/* ---- dash ---- */
/* The dashboard's door and its head. Every card is a house panel with what
   it says on the left and the desk on the right from 1024px (under the words
   before that), so the card keeps its shape from checking to sign-in to the
   head. The words are the door part's (sn-), the tag the pill part's, the
   tiles the stat part's, the desk the plate part's; here, where they stand.
   Settings first; the widths only change settings. */
.dh-card, .dh-head {
  --dh-gap: var(--sp-6);
  --dh-col-gap: var(--sp-16);
  --dh-cols: minmax(0, 7fr) minmax(0, 5fr);
  --dh-wait: 304px;              /* "Checking your session…": about where the desk will start on a phone */
  display: grid; gap: var(--dh-gap); min-width: 0;
}
.dh-card .sn-wait { min-height: var(--dh-wait); }
@media (min-width: 1024px) {
  .dh-card, .dh-head { --dh-wait: 280px; grid-template-columns: var(--dh-cols); gap: var(--sp-8) var(--dh-col-gap); }
  .dh-card > .dh-desk, .dh-head > .dh-desk { grid-column: 2; grid-row: 1; }
}
@media (min-width: 1600px) { .dh-card, .dh-head { --dh-col-gap: 96px; } }

/* The desk: it keeps its crop marks inside the panel (they stand outside its frame), and on a
   tablet it keeps the size it has beside the words rather than filling the card. */
.dh-desk {
  --dh-desk-room: var(--sp-2);
  --dh-desk-tablet: 480px;
  align-self: start; margin: var(--dh-desk-room);
}
@media (min-width: 768px) { .dh-desk { margin: var(--dh-desk-room) var(--dh-desk-room) 0 0; } }
@media (min-width: 768px) and (max-width: 1023px) { .dh-desk { max-width: var(--dh-desk-tablet); } }

/* The head: the tag, the line at the lead's size, the numbers in a sentence, when they were built,
   who is signed in; then the four tiles on the sage under the card. */
.dh-wrap { --dh-wrap-gap: var(--sp-10); display: grid; gap: var(--dh-wrap-gap); min-width: 0; }
.dh-main {
  --dh-h-size: 28px; --dh-h-line: 32px; --dh-h-track: -.025em;
  --dh-sub-size: 17px; --dh-sub-line: 28px; --dh-measure: 52ch;
  --dh-me-font: 600 15px/24px var(--sans);
  display: grid; gap: var(--sp-3); justify-items: start; align-content: start; min-width: 0;
}
.dh-h { font: 700 var(--dh-h-size)/var(--dh-h-line) var(--sans); letter-spacing: var(--dh-h-track); text-wrap: balance; }
.dh-sub { font: 400 var(--dh-sub-size)/var(--dh-sub-line) var(--sans); max-width: var(--dh-measure); text-wrap: pretty; }
.dh-fresh { font: var(--t-label); text-transform: uppercase; color: var(--muted); }
.dh-me { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); font: var(--dh-me-font); }
.dh-me a { display: inline-flex; align-items: center; min-height: var(--target); font-weight: 700; }
@media (min-width: 768px) { .dh-main { --dh-h-size: 40px; --dh-h-line: 44px; --dh-sub-size: 18px; } }
@media (min-width: 1280px) { .dh-main { --dh-h-size: 48px; --dh-h-line: 52px; --dh-sub-size: 20px; --dh-sub-line: 32px; } }
@media (min-width: 1600px) { .dh-main { --dh-h-size: 64px; --dh-h-line: 64px; --dh-h-track: -.03em; } }

/* The top card, once signed in (2026-11-05): the tag, their face beside their handle at the
   head's size, the links and Sign out under it, and the line on where things stand; the desk
   beside it as on the door's cards, under the words on a phone. */
.dh-topcard { margin-block-end: var(--sp-6); }
.dh-top { --dh-face: 72px; --dh-id-gap: var(--sp-4); }
.dh-id { display: flex; align-items: center; gap: var(--dh-id-gap); min-width: 0; max-width: 100%; }
.dh-face { width: var(--dh-face); height: var(--dh-face); flex: none; border: var(--line-thick); box-shadow: var(--drop-2); background: var(--cream); }
.dh-who { display: grid; gap: var(--sp-1); min-width: 0; }
.dh-name { overflow-wrap: anywhere; }
.dh-now:empty { display: none; }
.dh-now b { font-weight: 700; }
@media (min-width: 768px) { .dh-top { --dh-face: 96px; --dh-id-gap: var(--sp-6); } }
@media (min-width: 1600px) { .dh-top .dh-name { --dh-h-size: 56px; --dh-h-line: 60px; } }
.dh-recorder { justify-self: center; }

/* The deck on the top card (2026-11-05): gunmetal, the site deck's glass across its top (a counter, two
   lines, the state word), and the room's tape running between two reels; the caption under them. The
   reels turn only while data-run names something Re:Cap is doing; never under reduced motion. */
.dh-deck {
  --dh-reel: 96px; --dh-tape-h: 72px; --dh-deck-pad: var(--sp-4); --dh-bar-gap: 2px; --dh-spin: 5s;
  --dh-count-w: 4.5ch; --dh-dot: 8px;
  display: grid; gap: var(--sp-3); align-self: start; min-width: 0; padding: var(--dh-deck-pad);
  background: var(--gun); border: var(--line-thick); box-shadow: var(--bevel-gun), var(--drop-2);
}
.dh-vfd {
  display: flex; align-items: center; gap: var(--sp-3); min-width: 0; padding: var(--sp-2) var(--sp-3);
  background: var(--glass); border: var(--line); color: var(--vfd); font: var(--t-label); text-transform: uppercase;
}
.dh-count { flex: none; min-width: var(--dh-count-w); font: var(--t-display); text-align: center; }
.dh-lines { display: grid; flex: 1; min-width: 0; }
.dh-l1, .dh-l2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dh-l1 { color: var(--vfd-dim); }
.dh-state { display: inline-flex; align-items: center; gap: var(--sp-1); flex: none; color: var(--yellow); }
.dh-deck[data-run="rec"] .dh-state::before { content: ''; width: var(--dh-dot); height: var(--dh-dot); background: var(--rec); }
.dh-transport { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.dh-reel { flex: none; width: var(--dh-reel); height: var(--dh-reel); image-rendering: pixelated; }
.dh-deck[data-run="rec"] .dh-reel, .dh-deck[data-run="play"] .dh-reel { animation: dh-spin var(--dh-spin) linear infinite; }
@keyframes dh-spin { to { transform: rotate(360deg); } }
.dh-tape {
  display: flex; flex: 1; align-items: flex-end; gap: var(--dh-bar-gap); min-width: 0; height: var(--dh-tape-h);
  padding: var(--sp-1); background: var(--glass); border: var(--line);
}
.dh-tape i { flex: 1; min-width: 0; background: var(--vfd-dim); }
.dh-tape i[data-hot] { background: var(--yellow); }
.dh-tape:empty::before { content: ''; flex: 1; align-self: center; border-top: var(--line-w) dashed var(--vfd-dim); }
.dh-dcap { color: var(--cream); }
@media (max-width: 767px) { .dh-deck { --dh-reel: 64px; --dh-tape-h: 52px; --dh-deck-pad: var(--sp-3); } }
@media (max-width: 479px) { .dh-l1, .dh-l2 { white-space: normal; } }
@media (min-width: 1280px) { .dh-deck { --dh-reel: 112px; --dh-tape-h: 88px; } }
@media (prefers-reduced-motion: reduce) { .dh-deck .dh-reel { animation: none; } }