/* ============================================================
   COMMAND DECK — the Argus front-of-house surface.
   Section: .content-section[data-section="deck"]  →  #command-deck.deck

   ADDITIVE / CONTAINED / REVERSIBLE. Every rule is scoped under
   `.deck` and every class is `dk-`-prefixed, so this file can neither
   leak into the rest of the app nor inherit from it (the generic
   prototype names — .board/.panel/.chip/.score/.ledger/.kpi/.card —
   collide with global CSS, hence the namespace).

   Colours come from the shipped design tokens (design-tokens.css,
   cinema theme). We alias them to local --dk-* vars once so the ported
   prototype rules read cleanly and stay theme-agnostic; hex fallbacks
   only where a token is cinema-only (--gold, --accent-deep).
   ============================================================ */

.deck {
  /* token aliases — single source, everything below references these */
  --dk-surface:  var(--bg-surface);
  --dk-elevated: var(--bg-elevated);
  --dk-sunken:   var(--bg-muted);
  --dk-ink:      var(--text-primary);
  --dk-ink2:     var(--text-secondary);
  --dk-ink3:     var(--text-tertiary);
  --dk-ink4:     color-mix(in srgb, var(--text-tertiary) 58%, transparent);
  --dk-line:     var(--border-subtle);
  --dk-line2:    var(--border-default);
  --dk-line3:    var(--border-strong);
  --dk-cyan:     var(--accent-primary);
  --dk-cyan-rgb: 90, 214, 255; /* rgb of the cinema cyan, for soft glows */
  --dk-gold:     var(--gold, #e8b53a);
  --dk-mono:     var(--font-mono);
  --dk-sev-stable: var(--severity-stable);
  --dk-sev-watch:  var(--severity-watch);
  --dk-sev-warn:   var(--severity-warning);
  --dk-sev-alert:  var(--severity-alert);
  --dk-sev-crit:   var(--severity-critical);

  display: flex;
  flex-direction: column;
  gap: clamp(30px, 4vw, 52px);
  color: var(--dk-ink);
  padding-bottom: 40px;
  letter-spacing: -0.005em;
}

.deck .dk-mono { font-family: var(--dk-mono); font-variant-numeric: tabular-nums; }
.deck .dk-eyebrow {
  font-family: var(--dk-mono); font-size: 11px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--dk-ink3);
}

/* ---------- masthead ---------- */
.deck .dk-mast { display: flex; flex-direction: column; gap: 16px; position: relative; padding-top: 4px; }
.deck .dk-topline { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.deck .dk-brand { display: flex; align-items: baseline; gap: 14px; }
.deck .dk-word { font-size: clamp(22px, 3.5vw, 30px); font-weight: 600; letter-spacing: 0.02em; font-family: var(--font-display); }
.deck .dk-word b { color: var(--dk-cyan); font-weight: 600; }
.deck .dk-deckpill {
  font-family: var(--dk-mono); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--dk-ink3); border: 1px solid var(--dk-line2); border-radius: 999px; padding: 4px 11px; align-self: center;
}
.deck .dk-status { display: flex; align-items: center; gap: 16px; font-family: var(--dk-mono); font-size: 12px; color: var(--dk-ink3); flex-wrap: wrap; }
.deck .dk-live { color: var(--dk-cyan); display: inline-flex; align-items: center; gap: 6px; }
.deck .dk-live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dk-cyan);
  box-shadow: 0 0 0 0 var(--dk-cyan); animation: dk-ping 2.6s ease-out infinite;
}
@keyframes dk-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--dk-cyan-rgb), 0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(var(--dk-cyan-rgb), 0); } }
.deck .dk-mast h1 {
  font-size: clamp(28px, 6vw, 56px); font-weight: 600; line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance; max-width: 16ch; font-family: var(--font-display); color: var(--dk-ink);
}
.deck .dk-mast h1 em { font-style: normal; color: var(--dk-ink3); }
.deck .dk-scan {
  height: 1px; background: linear-gradient(90deg, transparent, var(--dk-cyan), transparent);
  background-size: 38% 100%; background-repeat: no-repeat; animation: dk-sweep 5.5s linear infinite; opacity: 0.6;
}
@keyframes dk-sweep { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }

/* ---------- section frame ---------- */
.deck .dk-sec { display: flex; flex-direction: column; gap: 16px; }
.deck .dk-sec-head { display: flex; align-items: center; gap: 14px; }
.deck .dk-sec-head .dk-eyebrow { white-space: nowrap; }
.deck .dk-rule { flex: 1; height: 1px; background: var(--dk-line); }
.deck .dk-meta { font-family: var(--dk-mono); font-size: 11px; color: var(--dk-ink4); white-space: nowrap; }

/* ---------- hero grid ---------- */
.deck .dk-hero { display: grid; grid-template-columns: 1.55fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 820px) { .deck .dk-hero { grid-template-columns: 1fr; } }

.deck .dk-board {
  background: linear-gradient(180deg, var(--dk-surface), var(--dk-sunken));
  border: 1px solid var(--dk-line); border-radius: 16px; overflow: hidden;
}
.deck .dk-brow {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 14px; align-items: center;
  padding: 13px 18px; border-top: 1px solid var(--dk-line); transition: background 0.16s;
}
.deck .dk-brow:first-child { border-top: none; }
.deck .dk-brow:hover { background: color-mix(in srgb, var(--dk-ink) 3%, transparent); }
.deck .dk-rk { font-family: var(--dk-mono); font-size: 13px; color: var(--dk-ink4); text-align: right; }
.deck .dk-who { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.deck .dk-nm { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 8px; }
.deck .dk-iso {
  font-family: var(--dk-mono); font-size: 10px; color: var(--dk-ink4); border: 1px solid var(--dk-line2);
  border-radius: 4px; padding: 1px 5px; letter-spacing: 0.05em;
}
.deck .dk-shock { font-size: 12px; color: var(--dk-ink3); display: flex; align-items: center; gap: 7px; min-width: 0; }
.deck .dk-shock-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deck .dk-fresh { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.deck .dk-fresh.dk-now { background: var(--dk-sev-stable); }
.deck .dk-fresh.dk-aged { background: var(--dk-sev-warn); }
.deck .dk-score { display: flex; align-items: center; gap: 12px; }
.deck .dk-sbar { width: 74px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--dk-ink) 8%, transparent); overflow: hidden; }
.deck .dk-sbar i { display: block; height: 100%; border-radius: 3px; }
.deck .dk-sv { font-family: var(--dk-mono); font-size: 20px; font-weight: 600; width: 2.2ch; text-align: right; }

/* ---------- side rail: dispatches + statement ---------- */
.deck .dk-side { display: flex; flex-direction: column; gap: 16px; }
.deck .dk-panel { background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: 16px; padding: 18px; }
.deck .dk-ph { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.deck .dk-dispatch { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--dk-line); }
.deck .dk-dispatch:first-of-type { border-top: none; }
.deck .dk-dnum { font-family: var(--dk-mono); font-size: 11px; color: var(--dk-cyan); padding-top: 2px; }
.deck .dk-dispatch p { font-size: 13.5px; color: var(--dk-ink2); line-height: 1.45; text-wrap: pretty; }
.deck .dk-priceit { background: linear-gradient(160deg, rgba(var(--dk-cyan-rgb), 0.08), transparent); border: 1px solid var(--dk-line2); }
.deck .dk-priceit .dk-big { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.deck .dk-priceit p { font-size: 13px; color: var(--dk-ink3); line-height: 1.5; }
.deck .dk-cy { color: var(--dk-cyan); }

/* ---------- convergence ---------- */
.deck .dk-conv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 820px) { .deck .dk-conv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .deck .dk-conv-grid { grid-template-columns: 1fr; } }
.deck .dk-conv {
  background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: 14px; padding: 15px 16px;
  display: flex; flex-direction: column; gap: 11px; transition: border-color 0.18s, transform 0.18s;
}
.deck .dk-conv:hover { border-color: color-mix(in srgb, var(--dk-gold) 35%, transparent); transform: translateY(-2px); }
.deck .dk-ct { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.deck .dk-cname { font-size: 15px; font-weight: 500; }
.deck .dk-cn { font-family: var(--dk-mono); font-size: 12px; color: var(--dk-gold); text-align: right; line-height: 1.2; }
.deck .dk-cn b { display: block; font-size: 22px; font-weight: 600; }
.deck .dk-vstrip { display: flex; gap: 3px; }
.deck .dk-vcell {
  flex: 1; height: 26px; border-radius: 4px; background: color-mix(in srgb, var(--dk-ink) 5%, transparent);
  border: 1px solid var(--dk-line); display: flex; align-items: flex-end; justify-content: center;
  position: relative; overflow: hidden;
}
.deck .dk-vcell i { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 3px 3px; }
.deck .dk-vcell span { position: relative; font-family: var(--dk-mono); font-size: 9px; color: var(--dk-ink3); padding-bottom: 2px; font-weight: 600; }
.deck .dk-drv {
  font-size: 11.5px; color: var(--dk-ink3); line-height: 1.4; text-wrap: pretty; min-height: 2.8em;
  display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* crosswalk legend — muted mono caption reconciling the 7 vectors to the 5 risk models */
.deck .dk-xwalk {
  font-family: var(--dk-mono); font-size: 10.5px; line-height: 1.55; letter-spacing: 0.02em;
  color: var(--dk-ink4); margin-top: 14px; max-width: 88ch;
}

/* ---------- capability atlas ---------- */
.deck .dk-atlas-intro { font-size: 15px; color: var(--dk-ink2); max-width: 62ch; line-height: 1.55; }
.deck .dk-atlas-intro b { color: var(--dk-ink); font-weight: 600; }
.deck .dk-grp { display: flex; flex-direction: column; gap: 12px; margin-top: 6px; }
.deck .dk-grp-label {
  font-family: var(--dk-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--dk-ink4);
  display: flex; align-items: center; gap: 10px;
}
.deck .dk-grp-label::after { content: ""; flex: 1; height: 1px; background: var(--dk-line); }
.deck .dk-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
@media (max-width: 920px) { .deck .dk-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .deck .dk-cards { grid-template-columns: 1fr; } }
.deck .dk-cap {
  background: var(--dk-surface); border: 1px solid var(--dk-line); border-radius: 13px; padding: 15px;
  display: flex; flex-direction: column; gap: 9px; min-height: 150px; position: relative; text-align: left;
  font: inherit; color: inherit; cursor: pointer; width: 100%;
  transition: border-color 0.18s, transform 0.18s, background 0.18s;
}
.deck .dk-cap:hover { border-color: var(--dk-line3); transform: translateY(-2px); background: var(--dk-elevated); }
.deck .dk-cap:focus-visible { outline: 2px solid var(--dk-cyan); outline-offset: 2px; }
.deck .dk-cap .dk-capn { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.2; }
.deck .dk-cap .dk-capd { font-size: 12px; color: var(--dk-ink3); line-height: 1.42; flex: 1; text-wrap: pretty; }
.deck .dk-cap .dk-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 2px; }
.deck .dk-chip {
  font-family: var(--dk-mono); font-size: 10px; letter-spacing: 0.03em; padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--dk-line2); color: var(--dk-ink2); white-space: nowrap;
}
.deck .dk-chip.dk-chip-live { color: var(--dk-cyan); border-color: rgba(var(--dk-cyan-rgb), 0.3); background: rgba(var(--dk-cyan-rgb), 0.06); }
.deck .dk-chip.dk-chip-gold { color: var(--dk-gold); border-color: color-mix(in srgb, var(--dk-gold) 30%, transparent); background: color-mix(in srgb, var(--dk-gold) 8%, transparent); }
.deck .dk-chip.dk-chip-cert { color: var(--dk-sev-stable); border-color: color-mix(in srgb, var(--dk-sev-stable) 30%, transparent); background: color-mix(in srgb, var(--dk-sev-stable) 8%, transparent); }
.deck .dk-cap .dk-act {
  font-family: var(--dk-mono); font-size: 10px; color: var(--dk-ink4); letter-spacing: 0.05em;
  opacity: 0; transform: translateX(-4px); transition: opacity 0.18s, transform 0.18s;
}
.deck .dk-cap:hover .dk-act, .deck .dk-cap:focus-visible .dk-act { opacity: 1; transform: none; color: var(--dk-cyan); }
.deck .dk-cap.dk-jewel { background: linear-gradient(165deg, rgba(var(--dk-cyan-rgb), 0.07), var(--dk-surface) 60%); border-color: rgba(var(--dk-cyan-rgb), 0.18); }

/* ---------- ledger footer ---------- */
.deck .dk-ledger {
  background: linear-gradient(180deg, var(--dk-surface), var(--dk-sunken)); border: 1px solid var(--dk-line);
  border-radius: 16px; padding: 22px 24px; display: flex; flex-direction: column; gap: 16px;
}
.deck .dk-lh { font-size: 17px; font-weight: 600; }
.deck .dk-ledger p { font-size: 13.5px; color: var(--dk-ink3); max-width: 70ch; line-height: 1.55; }
.deck .dk-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--dk-line);
  border: 1px solid var(--dk-line); border-radius: 12px; overflow: hidden;
}
@media (max-width: 640px) { .deck .dk-kpis { grid-template-columns: 1fr 1fr; } }
.deck .dk-kpi { background: var(--dk-surface); padding: 16px; display: flex; flex-direction: column; gap: 5px; }
.deck .dk-kn { font-family: var(--dk-mono); font-size: 26px; font-weight: 600; color: var(--dk-ink2); }
.deck .dk-kn.dk-dash { color: var(--dk-ink4); }
.deck .dk-kl { font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--dk-ink4); }

/* ---------- quiet failure / empty states ---------- */
.deck .dk-unavailable {
  font-family: var(--dk-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--dk-ink4);
  padding: 18px; text-align: center;
}
.deck .dk-loading { font-family: var(--dk-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--dk-ink4); padding: 18px; text-align: center; }

/* ---------- entrance ---------- */
.deck .dk-rise { opacity: 0; transform: translateY(12px); animation: dk-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
.deck .dk-rise:nth-child(1) { animation-delay: 0.02s; }
.deck .dk-rise:nth-child(2) { animation-delay: 0.08s; }
.deck .dk-rise:nth-child(3) { animation-delay: 0.14s; }
.deck .dk-rise:nth-child(4) { animation-delay: 0.2s; }
.deck .dk-rise:nth-child(5) { animation-delay: 0.26s; }
@keyframes dk-rise { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .deck *, .deck *::before { animation: none !important; }
  .deck .dk-rise { opacity: 1; transform: none; }
  .deck .dk-cap:hover, .deck .dk-conv:hover { transform: none; }
}