/* ============================================================================
   DEAD DROP — crew console
   ----------------------------------------------------------------------------
   Analogue espionage, not cyberpunk. A dark desk, one lit lamp, and paper on it.
   Amber is the only signal colour; cyan appears only while something is
   genuinely live on the wire. Nothing glows for decoration.

   ART IS AN ENHANCEMENT, NEVER A DEPENDENCY.
   Every generated asset is referenced as a *layered* CSS background sitting on
   top of a CSS-drawn plate. If the .webp is missing — and most of them are while
   the art run is still going — the browser simply paints the layer underneath
   and nothing breaks, with no JS error handler required. There is deliberately
   not a single <img> used for artwork in this console.

   Assets in docs/dead-drop-asset-manifest.json marked as chroma-key cutouts
   (cards/card-tier-*, cards/redaction-bar-*, cards/payload-seal-*, stations/*-icon,
   ui/vignette) are NOT alpha-transparent — they carry a flat green or magenta
   key that has to be removed downstream. They are therefore never used here.
   Only the opaque plates are referenced. Tier stamps, seals and redaction bars
   below are all drawn in CSS.
   ============================================================================ */

.dd,
.dd-body {
  --dd-void: #05070E;
  --dd-base: #0A0E1A;
  --dd-panel: #101625;
  --dd-raised: #16202F;
  --dd-sunk: #070A13;

  --dd-amber: #C6A455;
  --dd-amber-hi: #E3C87F;
  --dd-amber-dim: #7A6533;
  --dd-cyan: #4DD8E6;
  --dd-cyan-dim: #2A6C74;

  --dd-paper: #F5F0E8;
  --dd-paper-2: #E6DECD;
  --dd-paper-3: #D6CBB4;
  --dd-paper-ink: #191510;
  --dd-paper-ink-2: #4A4235;

  --dd-ink: #E9EDF6;
  --dd-ink-2: #A9B4C8;
  --dd-muted: #6F7C93;
  --dd-line: rgba(198, 164, 85, 0.20);
  --dd-line-hi: rgba(198, 164, 85, 0.42);
  --dd-line-cool: rgba(169, 180, 200, 0.14);

  --dd-good: #86D6A4;
  --dd-warn: #E0A24A;
  --dd-burn: #DE7A6D;

  --dd-mono: var(--font-mono, 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace);
  --dd-body: var(--font-body, 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif);

  --dd-r: 4px;
  --dd-r-lg: 10px;
  --dd-gap: clamp(0.75rem, 2vw, 1.25rem);
  --dd-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

.dd-body {
  /* Makes the UA paint scrollbars, focus rings and native form controls for a
     dark surface. Without it the station panel's scrollbar is a bright white
     stripe down the side of a black dossier. */
  color-scheme: dark;
  margin: 0;
  min-height: 100vh;
  color: var(--dd-ink);
  font-family: var(--dd-body);
  background-color: var(--dd-base);
  background-image:
    radial-gradient(120% 70% at 50% -10%, rgba(198, 164, 85, 0.10), transparent 60%),
    radial-gradient(90% 60% at 88% 8%, rgba(77, 216, 230, 0.05), transparent 60%),
    linear-gradient(180deg, #0B1020 0%, #070A13 62%, #05070E 100%);
  background-attachment: fixed;
}

/* Paper grain over the whole desk. Opaque plate, so it is blended, and it is
   the last layer declared — a 404 simply leaves the gradients above intact. */
.dd-body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: soft-light;
  background-image: url('./assets/ui/grain-overlay.webp');
  background-size: 640px 360px;
}

/* global.css puts .site-header at position:fixed, 72px tall (64px under 48rem),
   and publishes the height as --header-height. The console clears it rather
   than guessing, so the rail docks directly beneath the site nav instead of
   sliding under it. */
.dd {
  position: relative;
  z-index: 1;
  width: min(84rem, calc(100% - 1.5rem));
  margin: 0 auto;
  padding: calc(var(--header-height, 72px) + clamp(0.75rem, 2vw, 1.5rem)) 0 4rem;
}

.dd *,
.dd *::before,
.dd *::after { box-sizing: border-box; }

/* ── Shared type ──────────────────────────────────────────────────────── */

.dd-h {
  margin: 0 0 0.35rem;
  font: 700 0.72rem/1.2 var(--dd-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--dd-amber);
}
.dd-h--sm { color: var(--dd-ink-2); letter-spacing: 0.2em; }

.dd-sub {
  margin: 0 0 0.9rem;
  font: 400 0.78rem/1.5 var(--dd-body);
  color: var(--dd-muted);
}
.dd-sub--fine { font-size: 0.7rem; margin-top: 0.6rem; margin-bottom: 0; }

/* ── Console rail ─────────────────────────────────────────────────────── */

.dd-rail {
  position: sticky;
  top: calc(var(--header-height, 72px) + 0.5rem);
  z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem clamp(0.6rem, 2vw, 1.1rem);
  border: 1px solid var(--dd-line);
  border-radius: var(--dd-r-lg);
  background:
    linear-gradient(180deg, rgba(16, 22, 37, 0.95), rgba(8, 11, 20, 0.95));
  backdrop-filter: blur(8px);
  box-shadow: var(--dd-shadow);
}

.dd-rail__mark { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dd-rail__wordmark {
  font: 800 0.92rem/1 var(--dd-mono);
  letter-spacing: 0.32em;
  color: var(--dd-paper);
}
.dd-rail__cell {
  font: 500 0.66rem/1 var(--dd-mono);
  letter-spacing: 0.2em;
  color: var(--dd-amber);
}

.dd-rail__clock { text-align: center; }
.dd-clock {
  display: block;
  font: 700 clamp(1.6rem, 5.2vw, 2.5rem)/1 var(--dd-mono);
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--dd-paper);
  text-shadow: 0 0 18px rgba(198, 164, 85, 0.18);
}
.dd-clock__caption {
  display: block;
  margin-top: 0.2rem;
  font: 600 0.6rem/1 var(--dd-mono);
  letter-spacing: 0.22em;
  color: var(--dd-muted);
}
.dd-rail[data-clock="running"] .dd-clock { color: var(--dd-paper); }
.dd-rail[data-clock="running"] .dd-clock__caption { color: var(--dd-cyan); }
.dd-rail[data-clock="warn"] .dd-clock,
.dd-rail[data-clock="warn"] .dd-clock__caption { color: var(--dd-warn); }
.dd-rail[data-clock="burn"] .dd-clock,
.dd-rail[data-clock="burn"] .dd-clock__caption { color: var(--dd-burn); }
.dd-rail[data-clock="burn"] .dd-clock { animation: dd-pulse 1.6s ease-in-out infinite; }

@keyframes dd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.dd-rail__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  flex-wrap: wrap;
  min-width: 0;
}

.dd-act {
  font: 700 0.68rem/1 var(--dd-mono);
  letter-spacing: 0.2em;
  color: var(--dd-amber-hi);
  white-space: nowrap;
}

.dd-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  max-width: 12rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--dd-line-cool);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  font: 600 0.66rem/1 var(--dd-mono);
  letter-spacing: 0.1em;
  color: var(--dd-ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dd-chip--coin { color: var(--dd-amber-hi); border-color: var(--dd-line); }
.dd-chip--coin::before { content: '¤'; font-weight: 800; }

/* ── System feed ──────────────────────────────────────────────────────── */

.dd-feed {
  margin: 0.6rem 0 0;
  min-height: 1.1rem;
  font: 600 0.7rem/1.4 var(--dd-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dd-cyan);
}
.dd-feed:empty { display: none; }
.dd-feed--alert { color: var(--dd-burn); }

/* ── Gate ─────────────────────────────────────────────────────────────── */

.dd-gate {
  margin-top: var(--dd-gap);
  padding: clamp(1.25rem, 5vw, 3rem);
  border: 1px solid var(--dd-line);
  border-radius: var(--dd-r-lg);
  text-align: center;
  background-color: rgba(10, 14, 26, 0.72);
  background-image:
    linear-gradient(180deg, rgba(10, 14, 26, 0.78), rgba(5, 7, 14, 0.94)),
    url('./assets/hero/act-plate-01.webp');
  background-size: cover;
  background-position: center;
  box-shadow: var(--dd-shadow);
}
.dd-gate[hidden] { display: none; }

.dd-gate__title {
  margin: 0 0 0.6rem;
  font: 800 clamp(1.3rem, 4.5vw, 2.1rem)/1.1 var(--dd-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--dd-paper);
}
.dd-gate__body {
  max-width: 46ch;
  margin: 0 auto;
  font: 400 0.95rem/1.6 var(--dd-body);
  color: var(--dd-ink-2);
}
.dd-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-top: 1.25rem;
}
.dd-gate__fine {
  margin: 1.5rem 0 0;
  font: 500 0.66rem/1.5 var(--dd-mono);
  letter-spacing: 0.08em;
  color: var(--dd-muted);
}

/* ── Buttons ──────────────────────────────────────────────────────────── */

.dd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--dd-line-hi);
  border-radius: var(--dd-r);
  background: linear-gradient(180deg, rgba(198, 164, 85, 0.16), rgba(198, 164, 85, 0.06));
  color: var(--dd-amber-hi);
  font: 700 0.72rem/1 var(--dd-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 120ms ease;
}
.dd-btn:hover { background: rgba(198, 164, 85, 0.22); color: var(--dd-paper); }
.dd-btn:active { transform: translateY(1px); }
.dd-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.dd-btn--primary {
  border-color: var(--dd-amber);
  background: var(--dd-amber);
  color: #14100A;
}
.dd-btn--primary:hover { background: var(--dd-amber-hi); color: #14100A; }

.dd-btn--quiet {
  border-color: var(--dd-line-cool);
  background: rgba(255, 255, 255, 0.03);
  color: var(--dd-ink-2);
}
.dd-btn--quiet:hover { background: rgba(255, 255, 255, 0.07); color: var(--dd-paper); }

.dd-btn--live {
  border-color: var(--dd-cyan-dim);
  background: rgba(77, 216, 230, 0.12);
  color: var(--dd-cyan);
}
.dd-btn--live:hover { background: rgba(77, 216, 230, 0.2); color: var(--dd-paper); }

/* Focus is never removed, only restyled — this console is keyboard-first. */
.dd :focus-visible {
  outline: 2px solid var(--dd-cyan);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Board layout ─────────────────────────────────────────────────────── */

.dd-board {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--dd-gap);
  margin-top: var(--dd-gap);
}
.dd-board[hidden] { display: none; }

@media (min-width: 60rem) {
  .dd-board { grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); }
  .dd-col--cell { grid-column: 1 / -1; }
}
@media (min-width: 84rem) {
  .dd-board { grid-template-columns: minmax(20rem, 23rem) minmax(0, 1fr) minmax(17rem, 21rem); }
  .dd-col--cell { grid-column: auto; }
}

.dd-col {
  min-width: 0;
  padding: clamp(0.85rem, 2vw, 1.15rem);
  border: 1px solid var(--dd-line-cool);
  border-radius: var(--dd-r-lg);
  background: linear-gradient(180deg, rgba(16, 22, 37, 0.72), rgba(8, 11, 20, 0.72));
}

/* ── The Courier Card ─────────────────────────────────────────────────── */
/* The one bright object on a dark desk. Real index-card proportions, aged
   paper, a fold across the middle where the payload half begins. */

/* The paper is DRAWN, never photographed. card-face-blank.webp is an opaque
   plate of a card lying on a desk — laying content straight onto it puts the
   type on the desk as often as on the card. So the cream ground and the ruled
   lines are CSS, and the plate is demoted to a low-opacity multiply texture in
   ::before. With no art the card is clean cream; with art it gains grain. */
.dd-card {
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  isolation: isolate;
  color: var(--dd-paper-ink);
  background-color: var(--dd-paper);
  background-image:
    /* faint ruled lines, like an index card */
    repeating-linear-gradient(180deg, transparent 0 1.55rem, rgba(90, 120, 150, 0.10) 1.55rem 1.6rem),
    linear-gradient(140deg, rgba(255, 255, 255, 0.6), rgba(120, 100, 60, 0.09) 72%);
  background-position: 0 0.9rem, center;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 22px 44px rgba(0, 0, 0, 0.6),
    0 2px 0 rgba(0, 0, 0, 0.4);
  transform: rotate(-0.35deg);
}

.dd-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.15;
  mix-blend-mode: multiply;
  background-image: url('./assets/cards/card-face-blank.webp');
  /* Zoomed well past cover so the frame lands inside the photographed card's
     own surface. At cover the plate's card edge cuts a visible rectangle
     across the clue text. */
  background-size: 260% auto;
  background-position: 50% 42%;
}

/* Worn edge + the shadow of the lamp falling across the card. */
.dd-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, 0.4), transparent 55%),
    linear-gradient(200deg, transparent 62%, rgba(60, 45, 20, 0.16));
  mix-blend-mode: multiply;
  opacity: 0.75;
}

.dd-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.9rem 0.5rem;
  border-bottom: 1px solid rgba(25, 21, 16, 0.18);
}
.dd-card__serial {
  font: 700 0.66rem/1 var(--dd-mono);
  letter-spacing: 0.24em;
  color: var(--dd-paper-ink-2);
}

/* Rubber-stamped tier mark — drawn, not an asset (tier plates are chroma-key). */
.dd-card__tier {
  padding: 0.22rem 0.5rem;
  border: 2px solid currentColor;
  border-radius: 2px;
  font: 800 0.6rem/1 var(--dd-mono);
  letter-spacing: 0.18em;
  color: #8E6A3A;
  opacity: 0.78;
  transform: rotate(2.4deg);
}
.dd-card__tier[data-tier="2"] { color: #8A5330; }
.dd-card__tier[data-tier="3"] { color: #96382F; }

.dd-card__half { position: relative; padding: 0.85rem 0.95rem 1rem; }

.dd-card__label {
  margin: 0 0 0.4rem;
  font: 700 0.6rem/1 var(--dd-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8A7B5E;
}
.dd-card__label--sub { margin-top: 1rem; }

.dd-card__clue {
  margin: 0;
  font: 400 clamp(0.95rem, 2.6vw, 1.08rem)/1.6 var(--dd-mono);
  color: var(--dd-paper-ink);
  text-wrap: pretty;
}

.dd-card__target { margin: 0; font-size: 0.85rem; }

.dd-card__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.dd-card__nav .dd-btn {
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  border-color: rgba(25, 21, 16, 0.22);
  background: rgba(25, 21, 16, 0.05);
  color: var(--dd-paper-ink-2);
  font-size: 0.62rem;
}
.dd-card__nav .dd-btn:hover { background: rgba(25, 21, 16, 0.12); color: var(--dd-paper-ink); }
.dd-card__count {
  font: 700 0.62rem/1 var(--dd-mono);
  letter-spacing: 0.16em;
  color: #8A7B5E;
}

/* The perforated fold. Cheap trick, enormous payoff. */
.dd-card__perf {
  height: 0;
  border-top: 1px dashed rgba(25, 21, 16, 0.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
}

.dd-card__half--payload { background: rgba(25, 21, 16, 0.045); }

.dd-card__payload {
  margin: 0;
  font: 800 clamp(1.5rem, 6vw, 2rem)/1 var(--dd-mono);
  letter-spacing: 0.22em;
  color: #7A2E28;
}
.dd-card__owner {
  margin: 0.55rem 0 0;
  font: 600 0.68rem/1.4 var(--dd-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8A7B5E;
}

/* ── THE REDACTION REVEAL ─────────────────────────────────────────────── */
/* The signature interaction. A censor bar sits over the text; on a correct
   solve it wipes off to the right, an amber scrape running just ahead of the
   edge, and the text settles in behind it. */

.dd-redact {
  position: relative;
  display: inline-block;
  max-width: 100%;
  vertical-align: baseline;
}

.dd-redact__text {
  display: inline-block;
  font: 700 0.8rem/1.5 var(--dd-mono);
  letter-spacing: 0.16em;
  color: var(--dd-paper-ink);
  word-break: break-word;
}

.dd-redact__bar {
  position: absolute;
  inset: -0.18em -0.35em;
  transform-origin: right center;
  background-color: #14110C;
  background-image:
    /* uneven ink density, so it reads as a marker pass and not a rectangle */
    repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.05) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #1D1913, #0D0B08);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
}

/* the scrape that runs ahead of the wiping edge */
.dd-redact__bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -2px;
  width: 3px;
  background: var(--dd-amber-hi);
  opacity: 0;
}

/* Concealed for real, not merely covered: visibility:hidden keeps the answer
   away from select-all and from a screen reader, so a scholar cannot read a
   target page out of the DOM instead of navigating to it. That is the whole
   anti-shortcut property of the mechanic. */
.dd-redact[data-redacted="true"] .dd-redact__text {
  opacity: 0;
  visibility: hidden;
}

/* The revealed state carries NO transition. Every animated property here is on
   the bar instead. Transitions are frozen in a backgrounded tab, and a frozen
   transition on the text would leave a correctly solved clue unreadable —
   information must never be gated on a frame clock. The bar wiping off
   already-opaque text is also the truer metaphor: the ink is scraped away, and
   what was underneath was always there. */
.dd-redact[data-redacted="false"] .dd-redact__text {
  opacity: 1;
  visibility: visible;
}
.dd-redact[data-redacted="false"] .dd-redact__bar {
  transform: scaleX(0);
  transition: transform 460ms cubic-bezier(0.72, 0, 0.16, 1), opacity 60ms 440ms linear;
  opacity: 0;
}
.dd-redact[data-redacted="false"] .dd-redact__bar::after {
  opacity: 1;
  transition: opacity 120ms 420ms linear;
}

/* Redaction on the dark side of the console reads inverted: chalk, not ink. */
.dd-col--cell .dd-redact__text,
.dd-modal .dd-redact__text { color: var(--dd-paper); }
.dd-col--cell .dd-redact__bar,
.dd-modal .dd-redact__bar {
  background-image:
    repeating-linear-gradient(96deg, rgba(255, 255, 255, 0.06) 0 3px, transparent 3px 9px),
    linear-gradient(180deg, #2A3244, #161C29);
}

/* ── Crew ─────────────────────────────────────────────────────────────── */

.dd-crew {
  margin-top: 0.9rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--dd-line-cool);
  border-radius: var(--dd-r);
  background: rgba(255, 255, 255, 0.02);
}
.dd-crew__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  margin: 0 0 0.5rem;
  font: 700 0.66rem/1.3 var(--dd-mono);
  letter-spacing: 0.18em;
  color: var(--dd-ink-2);
}
.dd-crew__role { color: var(--dd-amber-hi); }
.dd-crew__roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.dd-crew__roster li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.32rem 0.45rem;
  border-left: 2px solid var(--dd-line);
  background: rgba(255, 255, 255, 0.02);
  font: 500 0.7rem/1.3 var(--dd-mono);
  color: var(--dd-ink-2);
}
.dd-crew__roster li[data-self="true"] { border-left-color: var(--dd-amber); color: var(--dd-paper); }
.dd-crew__roster b {
  font: 700 0.6rem/1 var(--dd-mono);
  letter-spacing: 0.14em;
  color: var(--dd-muted);
}
.dd-crew__note {
  margin: 0.6rem 0 0;
  font: 400 0.68rem/1.5 var(--dd-body);
  color: var(--dd-muted);
}

/* ── Stations ─────────────────────────────────────────────────────────── */

.dd-stations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 0.6rem;
}

.dd-station {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  min-height: 8.5rem;
  padding: 0.85rem;
  border: 1px solid var(--dd-line-cool);
  border-radius: var(--dd-r);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  color: var(--dd-ink);
  background-color: var(--dd-panel);
  background-image:
    linear-gradient(180deg, rgba(10, 14, 26, 0.62), rgba(6, 9, 16, 0.9));
  background-size: cover;
  background-position: center;
  transition: border-color 160ms ease, transform 140ms ease, background-color 160ms ease;
}
.dd-station:hover { border-color: var(--dd-line-hi); transform: translateY(-2px); }

/* Station plates are opaque 16:9 art; the gradient above them is declared in
   the same shorthand, so a missing plate leaves a clean dark card. */
.dd-station[data-station="decrypt"] {
  background-image: linear-gradient(180deg, rgba(10, 14, 26, 0.66), rgba(6, 9, 16, 0.92)), url('./assets/stations/decrypt-plate.webp');
}
.dd-station[data-station="archive"] {
  background-image: linear-gradient(180deg, rgba(10, 14, 26, 0.66), rgba(6, 9, 16, 0.92)), url('./assets/stations/archive-plate.webp');
}
.dd-station[data-station="uplink"] {
  background-image: linear-gradient(180deg, rgba(10, 14, 26, 0.66), rgba(6, 9, 16, 0.92)), url('./assets/stations/uplink-plate.webp');
}
.dd-station[data-station="darkroom"] {
  background-image: linear-gradient(180deg, rgba(10, 14, 26, 0.66), rgba(6, 9, 16, 0.92)), url('./assets/stations/darkroom-plate.webp');
}

.dd-station__no {
  font: 800 0.62rem/1 var(--dd-mono);
  letter-spacing: 0.2em;
  color: var(--dd-amber-dim);
}
.dd-station__name {
  font: 800 1rem/1.1 var(--dd-mono);
  letter-spacing: 0.2em;
  color: var(--dd-paper);
}
.dd-station__verb {
  font: 400 0.72rem/1.45 var(--dd-body);
  color: var(--dd-ink-2);
}
.dd-station__role {
  margin-top: auto;
  padding-top: 0.5rem;
  font: 700 0.58rem/1 var(--dd-mono);
  letter-spacing: 0.16em;
  color: var(--dd-muted);
}

.dd-station[data-clear="true"] { border-color: var(--dd-line-hi); }
.dd-station[data-clear="true"] .dd-station__role { color: var(--dd-amber-hi); }
.dd-station[data-clear="false"] { opacity: 0.62; }
.dd-station[data-clear="false"] .dd-station__role { color: var(--dd-burn); }

.dd-station[data-cool="true"] { cursor: progress; }
/* Drains left-to-right while DECRYPT is cooling. Starts at zero — without an
   explicit initial transform this paints a full-width cyan bar on an idle
   terminal, which reads as "busy" when nothing is happening. */
.dd-station__cool {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--dd-cyan);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1s linear;
}

/* ── Dossier slots ────────────────────────────────────────────────────── */

.dd-dossier { margin-top: 1.25rem; }
.dd-slots {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
}
.dd-slot {
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 2.3rem;
  border: 1px dashed var(--dd-line-cool);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.25);
  font: 700 0.68rem/1 var(--dd-mono);
  letter-spacing: 0.1em;
  color: var(--dd-muted);
}
.dd-slot[data-filled="true"] {
  border-style: solid;
  border-color: var(--dd-amber);
  background: rgba(198, 164, 85, 0.12);
  color: var(--dd-amber-hi);
}

/* ── Act gate meter ───────────────────────────────────────────────────── */

.dd-gatemeter {
  padding: 0.9rem;
  border: 1px solid var(--dd-line);
  border-radius: var(--dd-r);
  background: rgba(0, 0, 0, 0.32);
  font: 700 0.72rem/1.7 var(--dd-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dd-amber-hi);
  white-space: pre-line;
}
.dd-gatemeter[data-open="true"] { color: var(--dd-good); border-color: rgba(134, 214, 164, 0.3); }

.dd-meter {
  position: relative;
  height: 8px;
  margin: 0.6rem 0 0.15rem;
  border: 1px solid var(--dd-line-cool);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
}
.dd-meter__fill {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(90deg, var(--dd-amber-dim), var(--dd-amber-hi));
  transition: width 600ms cubic-bezier(0.3, 0, 0.2, 1);
}
.dd-meter__gate {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--dd-cyan);
}

/* ── Cell board ───────────────────────────────────────────────────────── */

.dd-lb { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.dd-lb li { display: grid; grid-template-columns: 3.4rem 1fr auto; gap: 0.5rem; align-items: center; }
/* The empty-board row is a single sentence, not a period/bar/points triple —
   left on the grid it gets chopped into one word per column. */
.dd-lb li.dd-empty { display: block; }
.dd-lb__period {
  font: 700 0.66rem/1 var(--dd-mono);
  letter-spacing: 0.14em;
  color: var(--dd-ink-2);
}
.dd-lb__bar {
  height: 14px;
  border: 1px solid var(--dd-line-cool);
  border-radius: 2px;
  background: rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.dd-lb__fill {
  height: 100%;
  background: linear-gradient(90deg, rgba(198, 164, 85, 0.45), var(--dd-amber));
  transition: width 700ms cubic-bezier(0.3, 0, 0.2, 1);
}
.dd-lb__pts {
  font: 700 0.7rem/1 var(--dd-mono);
  font-variant-numeric: tabular-nums;
  color: var(--dd-paper);
}
.dd-lb li[data-self="true"] .dd-lb__period { color: var(--dd-amber-hi); }
.dd-lb li[data-self="true"] .dd-lb__fill { background: linear-gradient(90deg, var(--dd-cyan-dim), var(--dd-cyan)); }

/* ── Cache feed (Act III) ─────────────────────────────────────────────── */

.dd-caches { margin: 1rem 0; }
.dd-caches[hidden] { display: none; }
.dd-caches__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.dd-caches__list li {
  padding: 0.5rem 0.6rem;
  border-left: 2px solid var(--dd-cyan-dim);
  background: rgba(77, 216, 230, 0.06);
  font: 500 0.7rem/1.45 var(--dd-mono);
  letter-spacing: 0.06em;
  color: var(--dd-ink-2);
}
.dd-caches__list li[data-fresh="true"] { border-left-color: var(--dd-cyan); color: var(--dd-paper); }
.dd-caches__list li b { color: var(--dd-cyan); font-weight: 700; }

/* ── Station panel (modal) ────────────────────────────────────────────── */

.dd-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: end center;
  padding: 0;
}
.dd-modal[hidden] { display: none; }
@media (min-width: 48rem) {
  .dd-modal { place-items: center; padding: 1.5rem; }
}

.dd-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(3, 5, 10, 0.82);
  backdrop-filter: blur(3px);
}

.dd-modal__panel {
  position: relative;
  width: min(46rem, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--dd-line);
  border-radius: var(--dd-r-lg) var(--dd-r-lg) 0 0;
  background: linear-gradient(180deg, #121A2B, #080C16);
  box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.7);
}
@media (min-width: 48rem) {
  .dd-modal__panel { border-radius: var(--dd-r-lg); box-shadow: var(--dd-shadow); }
}

.dd-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--dd-line-cool);
}
.dd-modal__title {
  margin: 0;
  font: 800 0.95rem/1 var(--dd-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--dd-amber-hi);
}
.dd-modal__body {
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Station internals ────────────────────────────────────────────────── */

.dd-lede {
  margin: 0 0 1rem;
  font: 400 0.85rem/1.6 var(--dd-body);
  color: var(--dd-ink-2);
}
.dd-note {
  margin: 0.85rem 0 0;
  padding: 0.6rem 0.7rem;
  border-left: 2px solid var(--dd-line);
  background: rgba(198, 164, 85, 0.06);
  font: 400 0.74rem/1.55 var(--dd-body);
  color: var(--dd-ink-2);
}
.dd-note--hard { border-left-color: var(--dd-burn); background: rgba(222, 122, 109, 0.08); }

.dd-field { display: grid; gap: 0.4rem; margin-bottom: 0.9rem; }
.dd-field > label {
  font: 700 0.62rem/1 var(--dd-mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dd-muted);
}
.dd-input {
  width: 100%;
  min-height: 46px;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--dd-line-cool);
  border-radius: var(--dd-r);
  background: rgba(0, 0, 0, 0.45);
  color: var(--dd-paper);
  font: 600 0.9rem/1.3 var(--dd-mono);
  letter-spacing: 0.1em;
}
.dd-input::placeholder { color: var(--dd-muted); letter-spacing: 0.2em; }
.dd-input:focus { border-color: var(--dd-cyan-dim); }

.dd-input--sigil {
  font-size: clamp(1.5rem, 8vw, 2.2rem);
  letter-spacing: 0.5em;
  text-align: center;
  text-transform: uppercase;
  padding-left: 0.5em;
  min-height: 64px;
}

.dd-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.dd-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.dd-list__row {
  display: grid;
  gap: 0.15rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--dd-line-cool);
  border-radius: var(--dd-r);
  background: rgba(255, 255, 255, 0.02);
}
.dd-list__row a { color: var(--dd-cyan); text-decoration: none; border-bottom: 1px solid transparent; }
.dd-list__row a:hover { border-bottom-color: currentColor; }
.dd-list__name { font: 700 0.78rem/1.3 var(--dd-mono); letter-spacing: 0.08em; color: var(--dd-paper); }
.dd-list__path { font: 500 0.7rem/1.4 var(--dd-mono); color: var(--dd-cyan); word-break: break-all; }
.dd-list__hint { font: 400 0.7rem/1.45 var(--dd-body); color: var(--dd-muted); }
.dd-list__row[data-mine="true"] { border-color: var(--dd-line-hi); background: rgba(198, 164, 85, 0.07); }

.dd-empty {
  padding: 1.1rem;
  border: 1px dashed var(--dd-line-cool);
  border-radius: var(--dd-r);
  text-align: center;
  font: 600 0.7rem/1.5 var(--dd-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dd-muted);
}

/* Field-op photo preview. Local object URL only — never uploaded, never
   persisted, revoked as soon as the panel closes. */
.dd-shot {
  display: block;
  width: 100%;
  max-height: 16rem;
  object-fit: contain;
  margin-top: 0.7rem;
  border: 1px solid var(--dd-line-cool);
  border-radius: var(--dd-r);
  background: #000;
}

.dd-op {
  display: grid;
  gap: 0.3rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--dd-line-cool);
  border-radius: var(--dd-r);
  background: rgba(255, 255, 255, 0.02);
}
.dd-op__name { font: 800 0.76rem/1 var(--dd-mono); letter-spacing: 0.18em; color: var(--dd-paper); }
.dd-op__task { font: 400 0.74rem/1.5 var(--dd-body); color: var(--dd-ink-2); }
.dd-op__by { font: 600 0.64rem/1 var(--dd-mono); letter-spacing: 0.12em; color: var(--dd-muted); }
.dd-op[data-verified="true"] { border-color: rgba(134, 214, 164, 0.4); background: rgba(134, 214, 164, 0.07); }

/* Verified stamp — drawn, so it holds up with no art present. */
.dd-stamp {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border: 2px solid var(--dd-good);
  border-radius: 2px;
  font: 800 0.6rem/1 var(--dd-mono);
  letter-spacing: 0.2em;
  color: var(--dd-good);
  transform: rotate(-3deg);
  opacity: 0.85;
}

.dd-code {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--dd-line-hi);
  border-radius: 2px;
  background: rgba(198, 164, 85, 0.1);
  font: 800 1rem/1 var(--dd-mono);
  letter-spacing: 0.3em;
  color: var(--dd-amber-hi);
}

/* ── Footer ───────────────────────────────────────────────────────────── */

.dd-foot {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--dd-line-cool);
}
.dd-foot p {
  margin: 0;
  font: 400 0.72rem/1.6 var(--dd-body);
  color: var(--dd-muted);
}

/* ── Projector mode ───────────────────────────────────────────────────── */
/* A classroom projector is far away and often washed out. Above 100rem the
   type scales up and the contrast floor rises. */

@media (min-width: 100rem) {
  .dd { width: min(96rem, calc(100% - 3rem)); }
  .dd-clock { font-size: 3.2rem; }
  .dd-station__name { font-size: 1.15rem; }
  .dd-lb__pts { font-size: 0.85rem; }
  .dd-gatemeter { font-size: 0.85rem; }
}

/* ── Narrow phones ────────────────────────────────────────────────────── */

@media (max-width: 25rem) {
  .dd { width: calc(100% - 0.75rem); }
  .dd-rail {
    grid-template-columns: 1fr auto;
    row-gap: 0.5rem;
  }
  .dd-rail__meta { grid-column: 1 / -1; justify-content: flex-start; }
  .dd-card__payload { letter-spacing: 0.14em; }
  .dd-slot { width: 2.7rem; }
}

/* ── Reduced motion ───────────────────────────────────────────────────── */
/* The redaction wipe still *happens* — the bar still goes away — it just stops
   moving. The information is never withheld from anyone. */

@media (prefers-reduced-motion: reduce) {
  .dd *,
  .dd *::before,
  .dd *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  .dd-card { transform: none; }
  .dd-card__tier,
  .dd-stamp { transform: none; }
  /* The bar still goes away and the text still arrives — only the motion is
     dropped. Information is never withheld from a reduced-motion reader. */
  .dd-redact[data-redacted="false"] .dd-redact__bar { transform: scaleX(0); opacity: 0; }
}

/* ── Forced colours ───────────────────────────────────────────────────── */

@media (forced-colors: active) {
  .dd-redact__bar { background: CanvasText; }
  .dd-redact[data-redacted="false"] .dd-redact__bar { display: none; }
  .dd-meter__fill,
  .dd-lb__fill { background: Highlight; }
  .dd-station,
  .dd-col,
  .dd-card { border: 1px solid CanvasText; }
}

/* ── Print — the console is not the print surface ─────────────────────── */
/* Courier Cards print from the teacher console. If somebody prints this page,
   give them the card and nothing else. */

@media print {
  .dd-rail,
  .dd-stations,
  .dd-col--cell,
  .dd-modal,
  .dd-foot,
  #nav-root,
  #footer-root { display: none !important; }
  .dd-body { background: #fff; }
  .dd-card { box-shadow: none; transform: none; border: 1px solid #000; }
}