/* Your sessions, the Sessions tab made larger and better placed (Chris, 24 Oct: "bigger titles on the category and better placement, a
   massive upgrade of the sessions tab, and the drop down card"). Its own file: panel.css and style.css keep their size. */

/* The three category tabs: larger titles, taller to touch. */
.detail #tab-sessions, .detail #tab-new, .detail #tab-crew { font-size: 17px; min-height: 48px; padding-top: 10px; padding-bottom: 11px; letter-spacing: 0.01em; }
.detail #tab-sessions[aria-selected="true"], .detail #tab-new[aria-selected="true"], .detail #tab-crew[aria-selected="true"] { font-weight: 700; }

/* The list's categories: a large title, its count beside it, a rule under it, and room between them. */
.mine-group { margin: 0 0 26px; }
.mine-group .mine-group-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; padding: 0 0 8px; border-bottom: 1px solid var(--line); font: 700 22px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--text); }
.mine-group .mine-group-head.mine-g-waits { color: var(--warn, #e0a33f); }
.mine-group .mine-group-head.mine-g-live { color: var(--ok); }
.mine-group .mine-group-head.mine-g-week { color: var(--text); }
.mine-count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font: 600 13px/1 var(--font); }
.mine-project { margin: 14px 0 6px; font: 600 13px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }

/* A session: a dot for where it stands, its name over its state, and when it was last heard at the right. */
.mine-row { position: relative; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0 12px; margin: 0 0 8px; padding: 13px 14px; border-radius: 14px; }
.mine-row-body { display: grid; gap: 3px; min-width: 0; }
.mine-row-title { font-size: 16.5px; line-height: 1.3; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mine-row-meta { font-size: 13.5px; }
.mine-row-tag { font-size: 12.5px; }
.mine-row-ago { align-self: start; padding-top: 3px; font-size: 12.5px; color: var(--faint); white-space: nowrap; }
.mine-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--line); }
.mine-row .mine-dot { align-self: start; margin-top: 6px; }
.mine-row.live .mine-dot, .mine-drop-item.live .mine-dot { background: var(--ok); }
.mine-row.waits .mine-dot, .mine-drop-item.waits .mine-dot { background: var(--warn, #e0a33f); }
@media (prefers-reduced-motion: no-preference) {
  .mine-row.live .mine-dot, .mine-drop-item.live .mine-dot { animation: work-beat 1.6s ease-in-out infinite; }
}
.mine-row.waits { background: rgba(224, 163, 63, 0.07); }
.mine-search { font-size: 16px; min-height: 44px; border-radius: 12px; }

/* The drawer: a large title, three large numbers, then the sessions that need him, then the ones going. */
.mine-drop .mine-drop-head { margin: 0 0 10px; font: 700 22px/1.2 var(--font); letter-spacing: 0; text-transform: none; color: var(--text); }
.mine-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0 0 12px; }
.mine-tile { display: grid; gap: 2px; padding: 10px 8px; text-align: center; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.mine-tile-n { font: 700 30px/1.05 var(--font); color: var(--text); }
.mine-tile-l { font-size: 12.5px; line-height: 1.2; color: var(--muted); }
.mine-tile.live .mine-tile-n { color: var(--ok); }
.mine-tile.waits { border-color: var(--warn, #e0a33f); }
.mine-tile.waits .mine-tile-n { color: var(--warn, #e0a33f); }
.mine-drop-sub { margin: 10px 0 6px; font: 600 13px/1.2 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.mine-drop-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; margin: 0 0 6px; padding: 10px 12px; min-height: 0; text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--card, transparent); color: var(--text); font: inherit; cursor: pointer; }
.mine-drop-item.waits { border-color: var(--warn, #e0a33f); }
.mine-drop-item.live { border-color: rgba(111, 211, 143, 0.45); }
.mine-drop-item-title { font-size: 15.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-drop-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mine-drop .mine-usage { margin-top: 12px; }

/* Finding and operating (Chris, 24 Oct: "more visually assisting ... finding things on it and operating on it"). */

/* Each project has its colour: down the edge of its sessions and on its filter chip. */
.p-symposio { --proj: var(--symposio); } .p-argo { --proj: var(--argo); } .p-sympan { --proj: var(--sympan); } .p-engino { --proj: var(--engino); }
.p-factories { --proj: var(--factories); } .p-studio { --proj: var(--studio); } .p-philokalia { --proj: #8a4f7d; } .p-sisamosnet { --proj: #2f7f9a; }

/* The filter chips: one scrolling row, a state or a project each, with its count; the one pressed is filled. */
.mine-filters { display: flex; gap: 8px; margin: 0 -16px 14px; padding: 2px 16px 6px; overflow-x: auto; scrollbar-width: none; touch-action: pan-x; }
.mine-filters::-webkit-scrollbar { display: none; }
.mine-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--text); font: 600 14.5px/1 var(--font); cursor: pointer; white-space: nowrap; }
.mine-chip-n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--line); color: var(--text); font: 700 12.5px/1 var(--font); }
.mine-chip.proj::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--proj, var(--line)); }
.mine-chip.c-waits .mine-chip-n { background: var(--warn, #e0a33f); color: #1c1407; }
.mine-chip.c-live .mine-chip-n { background: var(--ok); color: #07210f; }
.mine-chip.on { background: var(--text); color: var(--panel); border-color: var(--text); }
.mine-chip.on .mine-chip-n { background: var(--panel); color: var(--text); }
.mine-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* A session: its project's colour down the edge, and what can be done without opening it under it. */
.mine-item { position: relative; margin: 0 0 10px; }
.mine-item::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 5px; border-radius: 3px; background: var(--proj, var(--line)); }
.mine-item .mine-row { margin: 0; padding-left: 20px; }
.mine-quick-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 0 0 20px; }
.mine-quick-acts .btn { min-height: 38px; }

/* How it stands, as a word in a pill, before where it is. */
.mine-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; white-space: normal; overflow: visible; }
.mine-row-where { min-width: 0; }
.mine-pill { flex: none; padding: 2px 9px; border-radius: 999px; font: 700 12px/1.4 var(--font); letter-spacing: 0.02em; background: var(--line); color: var(--text); }
.mine-pill.needs { background: var(--warn, #e0a33f); color: #1c1407; }
.mine-pill.turn { background: var(--gold); color: #1c1407; }
.mine-pill.work { background: var(--ok); color: #07210f; }
.mine-hit { background: rgba(255, 210, 74, 0.55); color: inherit; border-radius: 3px; padding: 0 1px; }

/* The category titles stay at the top while their sessions scroll under them. */
.mine-group .mine-group-head { position: sticky; top: 0; z-index: 2; margin-left: -16px; margin-right: -16px; padding: 8px 16px; background: var(--panel); }

/* ── Your sessions, tidied (Chris, 24 Oct: "much cooler and useful") ── */
/* The group heads: a smaller title with its count, a coloured pip, no heavy rule. */
.mine-group .mine-group-head { font-size: 15px; letter-spacing: 0.02em; padding: 8px 16px; border-bottom: 0; }
.mine-group .mine-group-head::before { content: ''; flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.mine-group .mine-group-head .mine-count { margin-left: auto; min-width: 22px; height: 22px; font-size: 12px; }
.mine-project { margin: 10px 0 6px; font-size: 11.5px; }
/* The rows: a lighter card, the state as a coloured edge, the whole row a tap target. */
.mine-row { border-radius: 16px; padding: 12px 14px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); transition: transform 0.12s ease-out, box-shadow 0.12s ease-out; }
.mine-row:active { transform: scale(0.99); }
.mine-row.live { box-shadow: inset 3px 0 0 var(--ok); }
.mine-row.waits { box-shadow: inset 3px 0 0 var(--warn, #e0a33f); }
/* Search and filters read as one control strip. */
.mine-search { margin-bottom: 8px; padding-left: 14px; border-radius: 999px; }
.mine-filters { margin-bottom: 10px; }
.mine-chip { min-height: 34px; padding: 4px 11px; font-size: 13.5px; }
.mine-chip-n { min-width: 20px; height: 20px; font-size: 11.5px; }

/* The "+" turns to a cross while what it opened is open. */
.mine-bubble { transition: transform 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out; }
.mine-bubble.open { transform: rotate(45deg); color: var(--gold); border-color: var(--gold); }
@keyframes mine-pop { from { opacity: 0; transform: scale(0.85) translateY(12px); } to { opacity: 1; transform: none; } }

/* ── The list folded under its projects (Chris, 25 Oct): one card a project, open when something goes in it ── */
.mine-proj { margin: 0 0 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel-2); overflow: hidden; position: relative; }
.mine-proj::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--proj, var(--line)); }
.mine-proj-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "mono name ago chev" "mono sum sum chev"; align-items: center; gap: 4px 10px; width: 100%; min-height: 56px; padding: 12px 14px 12px 20px; border: 0; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mine-proj-name { grid-area: name; font: 700 18px/1.2 var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-proj-head .mine-row-ago { grid-area: ago; padding: 0; align-self: center; }
.mine-proj-sum { grid-area: sum; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13.5px; color: var(--muted); }
.mine-proj-chev { grid-area: chev; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(-45deg); transition: transform 0.15s ease-out; }
.mine-proj.open .mine-proj-chev { transform: rotate(45deg); }
.mine-proj-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.mine-proj-body { padding: 2px 12px 8px 20px; }
.mine-proj-body .mine-item::before { display: none; }
.mine-proj-body .mine-item .mine-row { padding-left: 14px; }
.mine-proj-body .mine-quick-acts { padding-left: 0; }
.mine-proj-body .mine-project { margin: 12px 0 6px; }
.mine-proj-body .mine-project:first-child { margin-top: 4px; }

/* ── A wide window packs them side by side (Chris, 25 Oct: "not one in a row ... packed together ... visually helpful") ── */
/* The list measures its own width, so the same rules serve a phone, a laptop and a wide screen. Cards flow down columns
   of at least 320 px, each kept whole, so a short project sits beside a long one with no empty rows between them. */
.mine-list { container-type: inline-size; }
@container (min-width: 680px) {
  /* A grid, not CSS columns: columns split a card across two when another opened, leaving a ghost with only its glow and icon. */
  .mine-flow { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 16px; align-items: start; }
  .mine-flow > * { margin-bottom: 14px; min-width: 0; }
  .mine-projs .mine-proj { margin-bottom: 14px; }
  /* A session inside a card is a tile: its title large, its words kept short. */
  .mine-proj-body .mine-row-title { font-size: 15.5px; }
}

/* ── A livelier look (Chris, 25 Oct: "enhance it visually") ── */
/* Each project wears its own colour: a wash behind its header, and a round monogram in it. */
.mine-proj { background: linear-gradient(180deg, color-mix(in srgb, var(--proj, var(--line)) 9%, var(--panel-2)) 0, var(--panel-2) 120px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: box-shadow 0.15s ease-out; }
.mine-proj.open { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09); }
.mine-proj-mono { grid-area: mono; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--proj, var(--line)); color: #fff; font: 700 18px/1 var(--font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.mine-proj-head { grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 2px 12px; }
.mine-proj-head:hover .mine-proj-name { text-decoration: underline; text-decoration-color: var(--proj, var(--line)); text-underline-offset: 4px; text-decoration-thickness: 2px; }
/* A project with something going breathes: a soft ring round its monogram. */
.mine-proj.open:has(.mine-row.live) .mine-proj-mono { box-shadow: 0 0 0 3px var(--panel-2), 0 0 0 5px var(--ok); }
/* Sessions as tiles: the going ones lifted with a green glow, the rested ones quieter and flatter. */
.mine-proj-body .mine-item .mine-row { background: var(--panel); border: 1px solid var(--line); box-shadow: none; }
.mine-proj-body .mine-item .mine-row.live { border-color: rgba(111, 211, 143, 0.55); box-shadow: 0 0 0 1px rgba(111, 211, 143, 0.18), 0 6px 16px rgba(60, 160, 100, 0.14); }
.mine-proj-body .mine-item .mine-row:not(.live) .mine-row-title { font-weight: 500; color: var(--muted); }
.mine-proj-body .mine-item .mine-row:not(.live) .mine-pill { background: transparent; border: 1px solid var(--line); color: var(--muted); }
@media (hover: hover) { .mine-proj-body .mine-item .mine-row:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12); } .mine-proj-body .mine-item .mine-row:not(.live):hover .mine-row-title { color: var(--text); } }
/* The day labels become a rule with a word on it. */
.mine-proj-body .mine-project { display: flex; align-items: center; gap: 10px; }
.mine-proj-body .mine-project::after { content: ''; flex: 1; height: 1px; background: var(--line); }
/* What waits on him on top: a warmer, larger look. */
.mine-g-waits { letter-spacing: 0.01em; }
.mine-pair .mine-item .mine-row.waits { background: color-mix(in srgb, var(--warn, #e0a33f) 12%, var(--panel)); box-shadow: inset 4px 0 0 var(--warn, #e0a33f), 0 6px 16px rgba(224, 163, 63, 0.16); }
@media (prefers-reduced-motion: reduce) { .mine-proj-body .mine-item .mine-row:hover { transform: none; } }

/* The model's picture sits at the bottom right of a session's row (Chris, 26 Oct); the words leave room for it. */
.mine-row { position: relative; }
.mine-row .work-model-mark.work-strip-model { top: auto; bottom: 10px; right: 12px; }
.mine-row:has(.work-strip-model) .mine-row-body { padding-right: 26px; }
.mine-proj-more { display: block; margin: 8px 0 4px; }

/* The monogram is the project's own mark where it has one: on a light disc edged in the project's colour. */
.mine-proj-mono.has-mark { width: 44px; height: 44px; background: var(--panel); border: 2px solid var(--proj, var(--line)); text-shadow: none; }
.mine-proj-mono .sm-icon { width: 28px; height: 28px; margin: 0; opacity: 1; color: var(--proj, var(--gold)); }
.mine-proj-mono.has-mark { background: #17110d; }

/* ── Quiet links, project marks in the lane (Chris, 25 Oct: the huge "Open in Claude" buttons were confusing and bright) ── */
.mine-quick-acts { padding: 0 14px 6px; }
.mine-quiet-link, a.mine-quiet-link { display: inline-block; width: auto; min-height: 0; padding: 2px 0; border: 0; background: none; color: var(--muted); font-size: 12.5px; text-decoration: underline; text-underline-offset: 2px; }
.mine-quiet-link:hover { color: var(--text); }
.mine-lane-mark { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; align-self: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel-2); color: var(--text); font: 700 16px/1 var(--font); cursor: pointer; }
.mine-lane-mark .sm-icon, .mine-lane-mark svg { width: 24px; height: 24px; }
/* The mark sits in the middle of its bubble: .sm-icon's own right margin and baseline alignment (made for a card's text line) pushed it off to the left (Chris, 25 Oct). */
.mine-lane-mark .sm-icon { display: block; margin: 0; opacity: 1; }
.mine-lane-menu-item { display: flex; align-items: center; gap: 10px; }
.mine-lane-menu-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--panel); font: 700 14px/1 var(--font); }
.mine-lane-menu-mark .sm-icon { display: block; width: 22px; height: 22px; margin: 0; opacity: 1; }
.mine-lane-menu-mark svg:not(.sm-icon svg) { width: 100%; height: 100%; }
.mine-lane-menu-name { min-width: 0; }
.mine-lane-menu { display: grid; gap: 2px; margin: 0 0 10px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); }
.mine-lane-menu-item { min-height: 40px; padding: 6px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.mine-lane-menu-item:hover, .mine-lane-menu-item:focus-visible { background: var(--panel); }
.mine-lock { margin-top: 18px; }

/* The context share beside "Needs you" / "Your turn", inside the pill (Chris, 25 Oct). */
.mine-pill .mine-ctx { margin-left: 6px; padding-left: 6px; border-left: 1px solid currentColor; font-variant-numeric: tabular-nums; opacity: 0.8; }
.mine-pill .mine-ctx.warm { opacity: 1; }
.mine-pill .mine-ctx.hot { opacity: 1; font-weight: 700; text-decoration: underline; }

.mine-name-face { display: inline-block; vertical-align: middle; width: 22px; height: 22px; margin: -2px 8px 0 0; border-radius: 50%; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); }
.mine-name-face svg, .mine-name-face img { display: block; width: 100%; height: 100%; }

/* The start bubble's orbit (mine.js orbitOpen; Chris, 25 Oct): the project marks sit on quarter-circle rings round the bubble, popping out of it. */
.mine-orbit { position: absolute; z-index: 5; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); width: 52px; height: 52px; }
.mine-orbit-item {
  position: absolute; left: 4px; top: 4px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%; background: var(--panel-2); color: var(--text); font: 700 16px/1 var(--font);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); cursor: pointer; touch-action: manipulation; -webkit-touch-callout: none; user-select: none;
  transform: translate(var(--x), var(--y));
}
.mine-orbit-item:active, .mine-orbit-item:focus-visible { border-color: var(--gold); }
.mine-orbit-item .sm-icon, .mine-orbit-item svg { width: 26px; height: 26px; margin: 0; opacity: 1; }
.mine-orbit.crew .mine-orbit-item { display: none; }
.mine-orbit.leaving { pointer-events: none; }
.mine-lane-menu.in-orbit {
  position: absolute; right: 0; bottom: 64px; width: min(280px, calc(100vw - 36px)); max-height: 60vh; overflow-y: auto; margin: 0;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35); transform-origin: 100% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .mine-orbit-item { animation: orbit-out 0.32s cubic-bezier(0.2, 1.15, 0.4, 1) backwards; animation-delay: calc(var(--i) * 28ms); }
  .mine-orbit.leaving .mine-orbit-item { animation: orbit-in 0.18s ease-in forwards; animation-delay: 0s; }
  .mine-lane-menu.in-orbit { animation: mine-pop 0.22s cubic-bezier(0.2, 1.2, 0.4, 1); }
}
@keyframes orbit-out { from { transform: translate(0, 0) scale(0.3); opacity: 0; } }
@keyframes orbit-in { to { transform: translate(0, 0) scale(0.3); opacity: 0; } }

.mine-group .mine-group-head.mine-g-finish { color: var(--accent, #c9a14a); }
.mine-ship { margin: 2px 12px 8px; font-size: 12px; opacity: 0.8; }

/* ── An open project's header stays at the top while its sessions scroll (Chris, 29 Oct): tap it again to fold the list ── */
/* `overflow: clip` rounds the corners like `hidden` but makes no scroller, so the bar sticks to the list's own scroll. */
.mine-proj { overflow: clip; }
.mine-proj-bar { position: relative; }
.mine-proj.open .mine-proj-bar { position: sticky; top: 0; z-index: 3; background: color-mix(in srgb, var(--proj, var(--line)) 9%, var(--panel-2)); border-bottom: 1px solid var(--line); }
/* The bar holds the head and the VS Code link side by side, so they travel together (a link cannot sit inside the head's button). */

/* ── A start button on each project card (Chris, 27 Oct) ── */
.mine-proj.has-new .mine-proj-head { padding-right: 56px; }
.mine-proj.has-new:has(.mine-proj-vs) .mine-proj-head { padding-right: 92px; }
.mine-proj:has(.mine-proj-vs) .mine-proj-new { right: 44px; }
.mine-proj-new { position: absolute; z-index: 1; top: 11px; right: 8px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--proj, var(--line)); border-radius: 50%; background: var(--panel); color: var(--text); font: 600 22px/1 var(--font); cursor: pointer; }
.mine-proj-new:hover, .mine-proj-new:focus-visible { background: var(--proj, var(--gold)); color: #fff; outline: none; }
.mine-proj-new:active { transform: scale(0.94); }

/* ── Your Claude tools and Your devices, as cards like the projects' (Chris, 27 Oct) ── */
.mine-tools { display: block; margin: 18px 0 0; padding: 0; border: 0; background: none; }
.mine-shelf-head { margin: 0 0 8px 4px; font: 700 13px/1.2 var(--font); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.mine-card { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 12px 14px 12px 20px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 9%, var(--panel-2)) 0, var(--panel-2) 90px); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); transition: box-shadow 0.15s ease-out; }
.mine-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--gold); }
.mine-card:hover { box-shadow: 0 6px 22px rgba(0, 0, 0, 0.09); }
.mine-tool.mine-card { flex-wrap: nowrap; }
.mine-disc { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); background: #17110d; color: var(--gold); }
.mine-card-body { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.mine-card-body > b, .mine-card-link, a.mine-card-link { font: 700 17px/1.2 var(--font); color: var(--text); text-decoration: none; background: none; border: 0; padding: 0; min-height: 0; width: auto; text-align: left; justify-self: start; }
/* The whole card is the link. */
.mine-card-link::after { content: ''; position: absolute; inset: 0; }
.mine-card .mine-proj-chev { flex: none; }
.mine-card-sum { display: flex; align-items: center; gap: 12px; width: 100%; list-style: none; cursor: pointer; font-size: 17px; color: var(--text); }
.mine-card-sum::-webkit-details-marker { display: none; }
.mine-devices.mine-card { display: block; padding: 0; }
.mine-devices .mine-card-sum { padding: 12px 14px 12px 20px; box-sizing: border-box; font-size: 17px; color: var(--text); }
.mine-devices[open] .mine-proj-chev { transform: rotate(45deg); }
.mine-devices .mine-device { margin: 0; padding: 10px 14px 10px 20px; border-top: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .mine-card, .mine-proj-new { transition: none; } }