/* ============================================================================
   FILE: assets/dashboard.css
   PURPOSE: the layout of the sandbox dashboard at /app/ (drawn by assets/dashboard.js). It reuses the tokens,
     the card, tag, console, button and table styles of styles.css and pages.css and adds only what a dashboard
     needs: stat tiles, funnel bars, status chips, chat bubbles, the inbox and the replay log.
   RULES: tokens only (no new colours except tints of the existing ones), logical properties, no inline style
     elements, and nothing wider than the viewport: grids shrink, tables scroll inside their own wrapper.
   ============================================================================ */

.dash { display: grid; gap: clamp(28px, 4vw, 48px); min-inline-size: 0; }
.dash > * { min-inline-size: 0; }
.dash ul, .dash ol { list-style: none; padding: 0; margin: 0; }
.dash .check-list, .dash .steps { padding: 0; }
.dash .steps { list-style: decimal; padding-inline-start: 1.4em; }
.dash-sec h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); max-inline-size: none; margin-block-end: 10px; }
.dash-sec h3 { font-size: 1.15rem; margin-block: 22px 10px; color: var(--bone); }
.dash-intro { max-inline-size: 72ch; color: var(--muted); margin-block-end: 16px; }
.dash-sec > * + * { margin-block-start: 16px; }
.dash-sec > h2 + * { margin-block-start: 0; }

.dash-banner { padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(255, 162, 77, 0.45); background: rgba(255, 122, 61, 0.07); display: grid; gap: 10px; }
.dash-banner p { max-inline-size: 80ch; }
.dash-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 0.76rem/1.5 var(--mono); color: var(--muted); letter-spacing: 0.03em; }

.dash-nav ul { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-nav a { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-strong); text-decoration: none; font: 500 0.78rem/1.2 var(--mono); color: var(--muted); }
.dash-nav a:hover, .dash-nav a:focus-visible { color: var(--bone); border-color: var(--ember-2); background: rgba(255, 122, 61, 0.08); }

/* stat tiles */
.stat-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.stat { padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.03); display: grid; gap: 6px; align-content: start; }
.stat dt { font: 500 0.66rem/1.35 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.stat dd { margin: 0; display: grid; gap: 4px; }
.stat dd b { font: 600 1.6rem/1.1 var(--serif); color: var(--bone); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat dd span { font-size: 0.8rem; color: var(--muted); }

/* chips: a colour and always a word */
.chip { display: inline-block; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-strong); font: 600 0.66rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.chip.ok { color: var(--teal); border-color: rgba(79, 216, 196, 0.5); background: rgba(79, 216, 196, 0.08); }
.chip.warn { color: var(--ember-2); border-color: rgba(255, 162, 77, 0.55); background: rgba(255, 122, 61, 0.1); }
.chip.info { color: var(--bone); border-color: rgba(239, 234, 223, 0.45); background: rgba(239, 234, 223, 0.07); }
.chip.none { color: var(--muted); border-style: dashed; }
.chip.halt { color: var(--halt); border-color: rgba(255, 77, 85, 0.6); background: rgba(255, 77, 85, 0.1); }

/* funnel */
.funnel { display: grid; gap: 18px; }
.funnel-row { display: grid; gap: 6px; padding-block-end: 14px; border-block-end: 1px dashed var(--line); }
.funnel-row.is-history { margin-block-start: 8px; padding-block-start: 18px; border-block-start: 1px solid var(--line-strong); }
.funnel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.funnel-label { font: 600 0.78rem/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember-2); }
.funnel-count { font: 600 1.35rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.funnel-bar { block-size: 12px; border-radius: 999px; background: rgba(239, 234, 223, 0.08); overflow: hidden; }
.funnel-bar i { display: block; block-size: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--teal), var(--ember)); }
.funnel-detail { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; color: #d8d2c4; font-size: 0.92rem; }
.funnel-note { font-size: 0.82rem; color: var(--dim); max-inline-size: 78ch; }

.dash-callout { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); max-inline-size: 80ch; font-size: 0.94rem; color: #d8d2c4; }
.dash-callout.warn { border-color: rgba(255, 162, 77, 0.5); background: rgba(255, 122, 61, 0.07); }
.dash-callout b { color: var(--bone); }
.dash-details { border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px 14px; background: rgba(255, 255, 255, 0.02); }
.dash-details summary { cursor: pointer; padding-block: 10px; font-weight: 600; }
.dash-details summary:focus-visible { outline: 2px solid var(--ember-2); outline-offset: 3px; border-radius: 6px; }
.dash-details .table-wrap { margin-block-start: 8px; }

/* list and campaigns */
.seg-bar { display: flex; block-size: 18px; border-radius: 999px; overflow: hidden; border: 1px solid var(--line-strong); }
.seg-bar .seg { display: block; block-size: 100%; }
.seg-0 { background: var(--teal); } .seg-1 { background: var(--ember); } .seg-2 { background: var(--muted); } .seg-3 { background: var(--bone); }
.seg-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.88rem; color: #d8d2c4; }
.seg-legend .swatch { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 3px; margin-inline-end: 8px; }
.camp-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.camp { padding: 22px; display: grid; gap: 12px; align-content: start; }
.camp h3 { margin: 0; }
.mini-dl { display: grid; gap: 0; }
.mini-dl > div { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; border-block-start: 1px solid var(--line); font-size: 0.9rem; }
.mini-dl dt { color: var(--dim); font: 500 0.68rem/1.7 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.mini-dl dd { margin: 0; text-align: end; color: var(--bone); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mono-wrap { font: 500 0.78rem/1.4 var(--mono); word-break: break-all; }
.spark { display: grid; gap: 6px; }
.spark li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.spark li i { display: block; block-size: 8px; border-radius: 999px; background: var(--teal); }
.spark li span { font: 500 0.72rem/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }

/* conversations */
.chat-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.chat { margin: 0; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255, 255, 255, 0.025); display: grid; gap: 10px; align-content: start; }
.chat figcaption { font: 600 0.7rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ember-2); }
.bubble { padding: 10px 14px; border-radius: 14px; font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; display: grid; gap: 4px; }
.bubble .who { font: 600 0.62rem/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.bubble.customer { background: rgba(239, 234, 223, 0.08); justify-self: start; max-inline-size: 92%; }
.bubble.system { background: rgba(79, 216, 196, 0.08); border: 1px solid rgba(79, 216, 196, 0.25); justify-self: end; max-inline-size: 96%; }

/* inbox */
.inbox { display: grid; gap: 14px; }
.inbox-card { padding: 18px 20px; display: grid; gap: 10px; }
.inbox-head { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.inbox-out, .audit-out { min-block-size: 1.5em; color: var(--bone); max-inline-size: 80ch; font-size: 0.92rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.dash button:disabled { opacity: 0.55; cursor: progress; }
.dash button.btn { cursor: pointer; }

/* kill switch replay */
.kill-body { display: grid; gap: 0; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.kill-log { block-size: 280px; overflow-y: auto; padding: 14px 18px; font: 400 0.78rem/1.55 var(--mono); color: #d6d0c2; border-inline-end: 1px solid var(--line); }
.kill-log li { padding-block: 5px; border-block-end: 1px dashed rgba(239, 234, 223, 0.07); overflow-wrap: anywhere; }
.kill-log li.halt, .kill-log li.held { color: var(--halt); }
.kill-log li.ok { color: var(--teal); }
.kill-agents { padding: 14px 18px; display: grid; gap: 8px; align-content: start; font-size: 0.84rem; }
.kill-counters { margin: 0; max-inline-size: none; }
.dash .console .status .state-text { text-transform: uppercase; }

.steps { padding-inline-start: 1.4em; display: grid; gap: 8px; max-inline-size: 70ch; list-style: decimal; color: #d8d2c4; }
.steps li::marker { color: var(--ember-2); font-family: var(--mono); }

@media (max-width: 720px) {
  .kill-body { grid-template-columns: minmax(0, 1fr); }
  .kill-log { border-inline-end: 0; border-block-end: 1px solid var(--line); block-size: 220px; }
  .bubble.customer, .bubble.system { max-inline-size: 100%; }
  .dash-banner { padding: 14px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .dash * { transition: none !important; animation: none !important; }
}
@media print {
  .dash-nav, .btn-row { display: none; }
}