/* ============================================================
   CALL MARLIN — LIVE-DEMO MODULE
   Demo-only styles. Layer-2 semantic tokens only; no raw hex.
   Everything that can be a shared component already is one
   (.btn, .chip, .selector, .field, .notice, .panel, .card,
   .dialog, .saiddone) — this file adds only what the demo needs.
   ============================================================ */

/* The demo toggles whole blocks with the `hidden` attribute. Several
   blocks below set `display: flex/grid`, which would otherwise beat the
   UA rule for [hidden] and leave them visible. */
[hidden] { display: none !important; }

/* Touch behaviour, set deliberately rather than left to the UA. */
.demo-page button,
.demo-page a,
.demo-page label,
.demo-page summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* The page gutter also clears the device safe area. max() keeps the shell's
   gutter as the floor, so this never removes it. */
.shell.demo-page {
  padding-inline:
    max(var(--page-gutter), env(safe-area-inset-left))
    max(var(--page-gutter), env(safe-area-inset-right));
}

/* ============================================================
   PAGE FRAME
   ============================================================ */

.demo-page { padding-block: var(--space-12) var(--space-16); }

.demo-page__head { max-width: 46rem; margin-bottom: var(--space-8); }
.demo-page__head h1 {
  font-size: var(--type-h2-size);
  line-height: var(--type-h2-lh);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}
.demo-page__head > p { margin-top: var(--space-4); }

/* The verbatim sandbox statement. Full-measure, never small print. */
.demo-disclosure { margin-bottom: var(--space-8); }
.demo-disclosure p:not(.meta) { font-size: var(--type-lead-size); line-height: var(--type-lead-lh); }
.demo-disclosure .meta { font-size: var(--type-body-size); line-height: var(--type-body-lh); }

/* Heading levels shift with the mount (h2 on demo.html, h3 under a page
   section heading elsewhere), so every heading rule below is class-based
   rather than element-based. */

/* ============================================================
   SCENARIO SELECTOR
   Reuses .selector. The face carries a name AND a task line, so
   changing sector visibly changes the work, not just an icon.
   ============================================================ */

.demo-scenarios { margin-bottom: var(--space-8); }
.demo-scenarios__title {
  font-size: var(--type-h3-size);
  margin-bottom: var(--space-4);
}
.demo-scenarios .selector { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) {
  .demo-scenarios .selector { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
}
.demo-scenarios .selector__face { align-items: flex-start; min-height: 88px; }
.selector__icon { flex: none; width: 28px; height: 28px; color: var(--text-link); margin-top: 2px; }
.selector__item input:checked + .selector__face .selector__icon { color: var(--action-primary); }
.selector__text { display: block; }
.selector__task {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--type-meta-size);
  font-weight: var(--weight-regular);
  line-height: var(--type-meta-lh);
  color: var(--text-secondary);
}
.demo-scenarios__more { margin-top: var(--space-4); }

/* Shown in place of the picker when the page has already chosen its sector.
   The other scenario stays one link away, so a visitor is never stuck. */
.demo-pinned {
  /* Inline flow, not flex: a flex parent would make the trailing full stop a
     separate flex item and leave a gap before it. */
  margin-bottom: var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-control);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  max-width: none;
}
.demo-pinned .chip { margin-right: var(--space-2); vertical-align: baseline; }

/* ============================================================
   MODULE LAYOUT
   Desktop: controls ~1/3, transcript + actions ~2/3.
   Mobile: controls FIRST so mute and end call are above the
   transcript and never scrolled behind it.
   ============================================================ */

.demo-module {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 1024px) {
  .demo-module {
    grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr);
    gap: var(--space-6);
  }
}

/* ---------- controls panel (navy) ---------- */

.demo-controls {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border-radius: var(--radius-panel);
  background: var(--surface-inverse);
  border: 1px solid var(--border-divider);
  color: var(--text-primary);
}
@media (min-width: 1024px) {
  /* Sticky, but capped and scrollable: a panel taller than the viewport
     would otherwise leave End call below the fold and unreachable. */
  .demo-controls {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-4));
    max-height: calc(100vh - var(--nav-height) - var(--space-8));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.demo-identity { display: flex; align-items: flex-start; gap: var(--space-3); }
.demo-identity > div { min-width: 0; }
.demo-identity__mark {
  flex: none; width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface-inverse-raised);
  display: grid; place-items: center;
  color: var(--accent-on-dark);
}
.demo-identity__mark svg { width: 26px; height: 26px; }
.demo-identity__agent {
  font-family: var(--font-heading);
  font-size: var(--type-body-size);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.demo-identity__business {
  margin-top: var(--space-1);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-lh);
  color: var(--text-secondary);
}
.demo-identity__business .chip { margin-right: var(--space-2); }

.demo-statusblock {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-divider);
}
.demo-statusblock__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.demo-statusblock__label {
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.demo-timer {
  font-family: var(--font-numeric);
  font-size: var(--type-h3-size);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.demo-statusblock__next {
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  color: var(--text-secondary);
  max-width: 34ch;
}
.demo-timer-note {
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-lh);
  color: var(--text-secondary);
}

/* ---------- input-level meter ----------
   Never presented as evidence of completion. It is captioned in
   words, and when there is no stream it does not animate. */

.demo-meter { padding-top: var(--space-4); border-top: 1px solid var(--border-divider); }
.demo-meter__canvas {
  width: 100%;
  height: 56px;
  display: block;
  color: var(--accent-on-dark);
}
.demo-meter__caption {
  margin-top: var(--space-2);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-lh);
  color: var(--text-secondary);
  max-width: 38ch;
}

/* ---------- session buttons ---------- */

.demo-prestart { display: flex; flex-direction: column; gap: var(--space-3); }
.demo-prestart .btn { width: 100%; }
.demo-mode-note {
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-lh);
  color: var(--text-secondary);
}
/* minmax(0, 1fr), not 1fr: a plain 1fr keeps an auto minimum, which let the
   nowrap "End call" button overflow the navy panel at 390px. */
.demo-livecontrols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}
.demo-livecontrols .btn { width: 100%; padding-inline: var(--space-3); }

/* End call is a danger action and reads differently from mute:
   filled, labelled "End call", with its own glyph. */
.demo-btn-end { background: var(--status-error-fg); color: var(--surface-inverse); border-color: transparent; }
.demo-btn-end:hover { filter: brightness(1.08); }

/* ============================================================
   WORKSPACE (right side)
   ============================================================ */

.demo-workspace { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

/* ---------- stage: outside the mobile tabs on purpose ----------
   Failures, the confirmation card and the final result must be
   visible whichever tab is open, so they live here. */

.demo-stage { display: flex; flex-direction: column; gap: var(--space-4); }

.demo-card {
  border: 1px solid var(--border-control);
  border-left-width: 4px;
  border-radius: var(--radius-card);
  background: var(--surface-default);
  padding: var(--space-6);
}
.demo-card__title { font-size: var(--type-h3-size); line-height: var(--type-h3-lh); font-weight: var(--weight-bold); }
.demo-card__head-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.demo-card__body { margin-top: var(--space-3); color: var(--text-secondary); }
.demo-card__foot {
  margin-top: var(--space-4);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-lh);
  color: var(--text-secondary);
}
.demo-card__actions {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  margin-top: var(--space-6);
}
.demo-card__demo {
  display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-divider);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-lh);
  color: var(--text-secondary);
}
.demo-card__verdict {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--status-warning-bg);
  color: var(--status-warning-fg);
}
.demo-card__verdict--found { background: var(--status-progress-bg); color: var(--status-progress-fg); }
.demo-card__verdict p { max-width: 62ch; }

.demo-card--ask      { border-left-color: var(--status-warning-fg); }
.demo-card--error    { border-left-color: var(--status-error-fg); }
.demo-card--warn     { border-left-color: var(--status-warning-fg); }
.demo-card--ok       { border-left-color: var(--status-success-fg); }
.demo-card--progress { border-left-color: var(--action-primary); }
.demo-card--live     { border-left-color: var(--accent-on-light); }
.demo-card--neutral  { border-left-color: var(--border-control); }
.demo-card--cta      { border-left-color: var(--action-primary); background: var(--surface-subtle); }

.demo-list { margin-top: var(--space-4); display: grid; gap: var(--space-3); }
/* Bullets use an absolutely positioned marker, NOT a flex/grid parent:
   inline children such as <strong> would otherwise become separate flex
   items and break a sentence into columns. */
.demo-list li {
  position: relative;
  padding-left: var(--space-4);
  color: var(--text-secondary);
  max-width: 64ch;
}
.demo-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--action-primary);
}

/* Confirmation summary — the "nothing is written until you confirm" card */
.demo-summary {
  margin-top: var(--space-4);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-control);
  overflow: hidden;
}
.demo-summary__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}
.demo-summary__row + .demo-summary__row { border-top: 1px solid var(--border-divider); }
@media (min-width: 560px) {
  .demo-summary__row { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
}
.demo-summary dt { color: var(--text-secondary); font-size: var(--type-meta-size); }
.demo-summary dd { margin: 0; font-weight: var(--weight-semibold); }

.demo-card__spinner { margin-top: var(--space-4); }
.demo-spinner {
  display: block;
  width: 22px; height: 22px;
  border-radius: var(--radius-pill);
  border: 3px solid var(--border-divider);
  border-top-color: var(--action-primary);
  animation: demo-spin 900ms linear infinite;
}
@keyframes demo-spin { to { transform: rotate(360deg); } }

/* ============================================================
   TABS — mobile only. Desktop shows both panels.
   ============================================================ */

.demo-tabs {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-1);
  background: var(--surface-subtle);
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-control);
}
.demo-tabs button {
  flex: 1;
  min-height: var(--target-min);
  padding-inline: var(--space-3);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--space-2);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--motion-ease),
              color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}
.demo-tabs button:hover { background: var(--surface-selected); color: var(--text-primary); }
/* aria-pressed is the primary state; the selected state is also carried by
   background + border + weight, never by colour alone. */
.demo-tabs button[aria-pressed="true"] {
  background: var(--surface-default);
  border-color: var(--border-control);
  color: var(--text-primary);
  box-shadow: var(--shadow-raised);
}
@media (min-width: 768px) { .demo-tabs { display: none; } }

.demo-panel { min-width: 0; }
@media (max-width: 767px) {
  .demo-panel[data-active="false"] { display: none; }
}

.demo-panes { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1200px) {
  .demo-panes { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; }
}

.demo-box {
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-card);
  background: var(--surface-default);
  overflow: hidden;
}
.demo-box__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-4) var(--space-3);
  border-bottom: 1px solid var(--border-divider);
}
.demo-box__label {
  font-family: var(--font-body);
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ============================================================
   TRANSCRIPT
   Speakers are named. Alignment is a secondary cue only.
   ============================================================ */

.demo-transcript-scroll {
  position: relative;
  max-height: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-4);
}
@media (min-width: 1024px) { .demo-transcript-scroll { max-height: 26rem; } }

.demo-transcript { display: grid; gap: var(--space-4); }
.demo-turn {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  border: 1px solid var(--border-divider);
  background: var(--surface-default);
  max-width: 46ch;
}
.demo-turn--agent { border-left: 3px solid var(--action-primary); }
.demo-turn--user {
  border-left: 3px solid var(--accent-on-light);
  background: var(--surface-subtle);
  margin-left: auto;
}
.demo-turn__speaker {
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}
.demo-turn__text { color: var(--text-primary); max-width: none; overflow-wrap: anywhere; }

.demo-transcript-empty { color: var(--text-secondary); padding: var(--space-2) 0; }

/* "Marlin is responding" lives OUTSIDE the transcript live region. */
.demo-typing {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-4) var(--space-4);
  font-size: var(--type-meta-size);
  color: var(--text-secondary);
}
.demo-typing[hidden] { display: none; }
.demo-typing__dots { display: inline-flex; gap: 3px; }
.demo-typing__dots i {
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--action-primary);
  animation: demo-bounce 900ms var(--motion-ease) infinite;
}
.demo-typing__dots i:nth-child(2) { animation-delay: 140ms; }
.demo-typing__dots i:nth-child(3) { animation-delay: 280ms; }
@keyframes demo-bounce { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* Jump to latest: sticky inside the transcript scroller only. It
   cannot cover mute, end call, consent or submit controls. */
.demo-jump {
  position: sticky;
  bottom: 0;
  display: block;
  margin: var(--space-3) auto 0;
  min-height: var(--target-min);
  padding-inline: var(--space-4);
  background: var(--surface-inverse);
  color: var(--text-inverse);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  font-size: var(--type-button-size);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  box-shadow: var(--shadow-raised);
  transition: background-color var(--motion-fast) var(--motion-ease),
              border-color var(--motion-fast) var(--motion-ease);
}
.demo-jump:hover { background: var(--surface-inverse-raised); border-color: var(--accent-on-dark); }
.demo-jump[hidden] { display: none; }

/* ============================================================
   ACTION LOG — written for a business owner
   ============================================================ */

.demo-actions { display: grid; }
.demo-action {
  padding: var(--space-4);
  border-bottom: 1px solid var(--border-divider);
}
.demo-action:last-child { border-bottom: none; }
.demo-action__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); flex-wrap: wrap;
}
.demo-action__label { font-weight: var(--weight-semibold); }
.demo-action__detail,
.demo-action__note {
  margin-top: var(--space-2);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-lh);
  color: var(--text-secondary);
}
.demo-action[data-state="failed"] .demo-action__note { color: var(--status-error-fg); }
.demo-action[data-state="unknown"] .demo-action__note { color: var(--status-warning-fg); }
.demo-action__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-3);
  font-size: var(--type-meta-size);
}
.demo-action__meta dt { color: var(--text-secondary); }
.demo-action__meta dd {
  margin: 0;
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  color: var(--text-primary);
  overflow-wrap: anywhere;
}
.demo-actions-empty { padding: var(--space-4); color: var(--text-secondary); }

/* ============================================================
   RESULT CARD
   ============================================================ */

.demo-result {
  border: 2px solid var(--status-success-fg);
  border-radius: var(--radius-card);
  background: var(--status-success-bg);
  padding: var(--space-6);
}
.demo-result--request {
  border-color: var(--status-warning-fg);
  background: var(--status-warning-bg);
}
.demo-result__head { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.demo-result__head .chip { background: var(--surface-default); }
.demo-result__title {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}
.demo-result__fields {
  margin-top: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--surface-default);
  border: 1px solid var(--border-divider);
  overflow: hidden;
}
.demo-result__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
}
.demo-result__row + .demo-result__row { border-top: 1px solid var(--border-divider); }
@media (min-width: 560px) {
  .demo-result__row { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-4); align-items: baseline; }
}
.demo-result__row dt { color: var(--text-secondary); font-size: var(--type-meta-size); }
.demo-result__row dd { margin: 0; font-weight: var(--weight-semibold); color: var(--text-primary); overflow-wrap: anywhere; }
.is-mono { font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace; }

.demo-result__history {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--surface-default);
  border: 1px solid var(--border-divider);
}
.demo-result__subhead {
  margin-bottom: var(--space-3);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: var(--weight-semibold);
}
.demo-result__history ol { display: grid; gap: var(--space-2); }
.demo-result__history li { color: var(--text-secondary); font-size: var(--type-body-size); }
.demo-result__rev {
  display: inline-block;
  min-width: 6.5rem;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.demo-result__note { margin-top: var(--space-3); color: var(--text-primary); }
.demo-result__note--warn { font-weight: var(--weight-semibold); }

/* ============================================================
   SANDBOX INBOX — labelled, and not an outbox
   ============================================================ */

.demo-inbox {
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-card);
  background: var(--surface-subtle);
  padding: var(--space-6);
}
.demo-inbox__head { margin-bottom: var(--space-3); }
.demo-inbox__title { font-size: var(--type-h3-size); font-weight: var(--weight-bold); }
.demo-inbox__lede { margin-top: var(--space-2); color: var(--text-secondary); }
.demo-inbox__item {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border-radius: var(--radius-control);
  background: var(--surface-default);
  border: 1px solid var(--border-divider);
}
.demo-inbox__subject {
  margin-bottom: var(--space-2);
  font-size: var(--type-body-size);
  line-height: var(--type-body-lh);
  font-weight: var(--weight-semibold);
}
.demo-inbox__to { font-size: var(--type-meta-size); color: var(--text-secondary); overflow-wrap: anywhere; }
.demo-inbox__note {
  margin-top: var(--space-1);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-lh);
  color: var(--status-warning-fg);
}
.demo-inbox__item ul { margin-top: var(--space-3); display: grid; gap: var(--space-1); }
.demo-inbox__item li { font-size: var(--type-meta-size); color: var(--text-secondary); }

/* ============================================================
   STEP LEDGER
   ============================================================ */

.demo-ledger { display: grid; gap: var(--space-3); margin: var(--space-3) 0 var(--space-4); }
.demo-ledger li { color: var(--text-primary); }
.demo-ledger li .chip { margin-right: var(--space-2); vertical-align: middle; }
.demo-ledger__note { display: block; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--type-meta-size); }
.demo-card__subhead {
  margin-top: var(--space-4);
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ============================================================
   BRIEFING (pre-session) — real markup, no JS required
   ============================================================ */

.demo-briefing { display: flex; flex-direction: column; gap: var(--space-4); }
.demo-briefing__grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 720px) { .demo-briefing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.demo-brief-card {
  border: 1px solid var(--border-divider);
  border-radius: var(--radius-card);
  background: var(--surface-default);
  padding: var(--space-6);
}
.demo-brief-card__label {
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}
.demo-brief-card p + p { margin-top: var(--space-3); }
.demo-brief-card .demo-request {
  font-family: var(--font-heading);
  font-size: var(--type-lead-size);
  line-height: var(--type-lead-lh);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}
.demo-brief-card ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.demo-brief-card li { position: relative; padding-left: var(--space-4); color: var(--text-secondary); }
.demo-brief-card li::before {
  content: "\2022";
  position: absolute; left: 0; top: 0;
  color: var(--action-primary);
  font-weight: var(--weight-bold);
}

.demo-slots { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); }
.demo-slot {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-control);
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.demo-slot--full {
  border-color: var(--status-error-fg);
  color: var(--status-error-fg);
  text-decoration: line-through;
}
.demo-slot--request { border-color: var(--status-warning-fg); color: var(--status-warning-fg); }
.demo-slot__glyph { font-size: 0.9em; }

/* ============================================================
   COMPOSER (typed mode). Really works; says what it does.
   ============================================================ */

.demo-composer {
  border: 1px solid var(--border-control);
  border-radius: var(--radius-card);
  background: var(--surface-default);
  padding: var(--space-4);
}
.demo-composer[hidden] { display: none; }
.demo-composer__row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-end; }
.demo-composer__row .field { flex: 1 1 16rem; }
.demo-composer__suggest {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border: 1px dashed var(--border-control);
  border-radius: var(--radius-control);
  background: var(--surface-subtle);
  color: var(--text-primary);
  font-size: var(--type-button-size);
  cursor: pointer;
  min-height: var(--target-min);
  transition: border-color var(--motion-fast) var(--motion-ease),
              background-color var(--motion-fast) var(--motion-ease);
}
.demo-composer__suggest:hover { border-color: var(--action-primary); background: var(--surface-selected); }
.demo-composer__suggest-label {
  display: block;
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  color: var(--text-link);
}
.demo-composer__suggest-text { display: block; margin-top: 2px; }
.demo-composer__suggest[hidden] { display: none; }
.demo-composer__note {
  margin-top: var(--space-3);
  font-size: var(--type-meta-size);
  line-height: var(--type-meta-lh);
  color: var(--text-secondary);
  max-width: 68ch;
}

/* Fieldset used purely for the radio group's accessible name. */
.demo-scenarios .selector { border: 0; padding: 0; margin: 0; }

/* Dialog copy + scroll containment. */
.dialog { overscroll-behavior: contain; }
.dialog__title {
  font-size: var(--type-h3-size);
  line-height: var(--type-h3-lh);
  font-weight: var(--weight-bold);
}
.dialog__body > p { margin-top: var(--space-4); color: var(--text-secondary); }

/* ============================================================
   DEV INJECTION BANNER — impossible to mistake for real behaviour
   ============================================================ */

.demo-inject { margin-bottom: var(--space-6); }
.demo-inject[hidden] { display: none; }
.demo-inject code {
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-weight: var(--weight-semibold);
}

/* ============================================================
   PLACEHOLDER SHELL (replaced by the shared nav/footer)
   ============================================================ */

.shell-placeholder {
  background: var(--surface-subtle);
  border-bottom: 1px dashed var(--border-control);
  padding-block: var(--space-3);
}
.shell-placeholder__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
}
.shell-placeholder p { font-size: var(--type-meta-size); color: var(--text-secondary); }
.shell-placeholder--footer { border-bottom: none; border-top: 1px dashed var(--border-control); margin-top: var(--space-16); }

/* ============================================================
   MOTION PREFERENCE
   base.css neutralises durations globally; these rules remove the
   looping indicators outright rather than running them at 0ms.
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .demo-spinner {
    animation: none;
    border-top-color: var(--action-primary);
    border-right-color: var(--action-primary);
  }
  .demo-typing__dots i { animation: none; opacity: 1; }
}

/* ============================================================
   PASS 2 — TECHNICAL DISCLOSURE
   The engineering explanation of an unconfirmed write lives here rather
   than on the normal path. It is collapsed by default and must not be
   removed: it is what explains the absence of a retry button.
   ============================================================ */
.demo-details {
  margin-top: var(--space-4);
  border-top: 1px solid var(--border-divider);
  padding-top: var(--space-3);
}
.demo-details > summary {
  cursor: pointer;
  font-size: var(--type-meta-size);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  min-height: var(--target-min);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.demo-details > summary:hover { color: var(--text-primary); }
.demo-details > summary::marker { color: var(--border-control); }
.demo-details p {
  margin-top: var(--space-2);
  font-size: var(--type-meta-size);
  color: var(--text-secondary);
  max-width: 62ch;
}