/* Demo: collect, then ask, then chart it. Markup and behaviour are in demo.js. Colours are
   tokens from css/tokens.css; the panel matches the product's MCP App panel in the docs
   palette, the rest the website frame. Every rule is scoped to .demo, since the class names
   are short. */

/* the intro continues the stone band; the window overlaps its bottom edge */
.demo .demo-top { padding: 120px 0 240px; border-top: 1px solid var(--hero-line); background: var(--hero); color: var(--on-hero); }
.demo .demo-top h2 { max-width: 18ch; font-size: clamp(36px, 3.9vw, 56px); line-height: 1.05; }
.demo .dsub { margin: var(--space-m) 0 0; max-width: 44ch; font-size: 18px; line-height: 1.6; color: var(--on-hero-muted); }
.demo .window { position: relative; margin-top: -190px; padding: 28px; border: 1px solid var(--edge); border-radius: var(--radius-lg); background: var(--surface-raised); box-shadow: var(--shadow-lifted); }
.demo .split { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 880px) {
  .demo .demo-top { padding-top: 72px; padding-bottom: 150px; }
  .demo .window { margin-top: -110px; padding: var(--space-m); }
  .demo .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-m); }
}

/* the question menu: a list, the current item as a filled pill */
.demo .menu { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-xs); }
.demo .mlabel { padding: 0 var(--space-s) var(--space-s); font-size: 12px; font-weight: 600; color: var(--ink-muted); }
/* the questions as the docs' sidebar links: 8px corners, the current one on stone, semibold */
.demo .item { padding: var(--space-s); border: 0; border-radius: var(--radius-md); background: transparent; color: var(--ink-muted); font: inherit; font-size: 14px; line-height: 20px; cursor: pointer; transition: background-color 0.15s, color 0.15s; }
.demo .item:hover { background: var(--surface-alt); color: var(--ink); }
.demo .item.on { background: var(--fill); color: var(--ink); font-weight: 600; }
.demo .item:focus-visible, .demo .replay:focus-visible { border-radius: var(--radius-md); }
/* the docs' text button (the demo's Reset) */
.demo .replay { padding: var(--space-s); border: 0; background: transparent; color: var(--ink-muted); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.demo .replay:hover { color: var(--ink); }
@media (max-width: 880px) {
  .demo .menu { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .demo .mlabel { width: 100%; padding-bottom: 0; }
}

/* the client: a conversation that starts at the top, and the message box under it */
.demo .client { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.demo .thread { position: relative; height: min(800px, 72vh); overflow: hidden; }
.demo .roll { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 18px; padding: 4px 2px 24px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.demo .roll > * { flex: 0 0 auto; }
.demo .roll::-webkit-scrollbar { display: none; }
/* soft edges; the top one only once the conversation has scrolled */
.demo .thread::before, .demo .thread::after { content: ""; position: absolute; left: 0; right: 0; z-index: 2; pointer-events: none; transition: opacity 0.3s; }
.demo .thread::before { top: 0; height: 28px; background: linear-gradient(var(--surface-raised), transparent); opacity: 0; }
.demo .thread.scrolled::before { opacity: 1; }
.demo .thread::after { bottom: 0; height: 24px; background: linear-gradient(transparent, var(--surface-raised)); }
.demo .roll .enter { animation: demo-in 0.42s cubic-bezier(0.2, 0, 0, 1) both; }
@keyframes demo-in { from { opacity: 0; transform: translateY(10px); } }

/* the message box: each question is typed here, then sent */
.demo .composer { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 6px 6px 18px; border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-raised); font-size: 16px; }
.demo .composer .text { flex-grow: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.demo .composer .ph { color: var(--ink-muted); }
.demo .send { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--tint); color: var(--ink-muted); transition: background-color 0.2s, color 0.2s, transform 0.15s; }
.demo .composer.ready .send { background: var(--primary); color: var(--on-primary); }
.demo .composer.sent .send { transform: scale(0.92); }

.demo .you { align-self: flex-end; max-width: 78%; padding: 11px 16px; border-radius: 18px; background: var(--tint); font-size: 15px; }
.demo .cur { display: inline-block; width: 2px; height: 18px; margin-left: 1px; background: currentColor; vertical-align: -3px; }
@media (prefers-reduced-motion: no-preference) { .demo .blink { animation: demo-blink 1.05s steps(1, end) infinite; } }
@keyframes demo-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.demo .call { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid var(--line-soft); border-radius: var(--radius-pill); background: var(--tint); font-size: 12px; }
.demo .call code { font-family: var(--font-mono); letter-spacing: 0; color: var(--ink-muted); }
.demo .call .tick { color: var(--accent); }
.demo .call .spin { display: inline-block; width: 11px; height: 11px; border: 1.6px solid var(--ink-muted); border-top-color: transparent; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) { .demo .call .spin, .demo .p-btn .spin, .demo .p-stat.busy .ic { animation: demo-spin 0.9s linear infinite; } }
@keyframes demo-spin { to { transform: rotate(360deg); } }

/* ---- the panel, as the product draws it ---- */
.demo .panel { align-self: flex-start; width: 100%; max-width: 520px; padding: 24px; border: 1px solid var(--line-soft); border-radius: var(--radius-xl); background: var(--surface-inset); box-shadow: var(--shadow-panel); font-size: 15px; }
.demo .view { display: flex; flex-direction: column; gap: 22px; }
.demo .view.fresh { animation: demo-view 0.3s cubic-bezier(0.2, 0, 0, 1); }
@keyframes demo-view { from { opacity: 0; transform: translateY(6px); } }
.demo .p-top { display: flex; flex-direction: column; gap: var(--space-s); font-size: 12px; color: var(--ink-muted); }
.demo .p-prog { display: flex; gap: var(--space-xs); }
.demo .p-prog i { position: relative; flex: 1; height: 3px; overflow: hidden; border-radius: 3px; background: var(--line-soft); }
.demo .p-prog i::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.45s cubic-bezier(0.2, 0, 0, 1); }
.demo .p-prog i.on::after { transform: scaleX(1); }
.demo .panel h3 { font-size: 22px; font-weight: 600; line-height: 1.1; }
.demo .panel h3 .of { font-weight: 500; color: var(--ink-muted); }
.demo .sub { margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--ink-muted); }
.demo .p-lbl { font-size: 12px; font-weight: 600; color: var(--ink-muted); }

/* choose companies: a search field, the picks as chips, a checked list */
.demo .p-search { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border: 1px solid var(--field-edge); border-radius: var(--radius-md); background: var(--field); font-size: 16px; color: var(--ink-muted); }
.demo .p-search svg { flex: none; color: var(--ink); }
/* a placeholder: one line, cut short like an input's */
.demo .p-search span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo .p-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.demo .p-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: var(--radius-pill); background: var(--chip); color: var(--on-chip); font-size: 13px; animation: demo-chip 0.25s cubic-bezier(0.2, 0, 0, 1); }
@keyframes demo-chip { from { opacity: 0; transform: scale(0.85); } }
.demo .p-pick { display: flex; flex-direction: column; gap: 6px; }
.demo .p-list { height: 234px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--input); }
.demo .p-row { display: flex; align-items: center; gap: 14px; min-height: 46px; padding: 0 14px; border-top: 1px solid var(--line-soft); }
.demo .p-row:first-child, .demo .p-stat:first-child { border-top: 0; }
.demo .name { flex-grow: 1; min-width: 0; }
.demo .kind, .demo .st { font-size: 13px; color: var(--ink-muted); }
/* the system's Checkbox, drawn without an input so the demo holds no focus stops */
.demo .p-box { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--control); border-radius: var(--radius-sm); background: var(--field); color: var(--on-accent); transition: background-color 0.15s, border-color 0.15s; }
.demo .p-box svg { opacity: 0; transform: scale(0.6); transition: opacity 0.15s, transform 0.18s cubic-bezier(0.2, 0, 0, 1); }
.demo .p-box.on { border-color: var(--accent); background: var(--accent); }
.demo .p-box.on svg { opacity: 1; transform: none; }

/* identify yourself */
.demo .p-btns { display: flex; flex-wrap: wrap; gap: var(--space-s); }
.demo .p-btn { display: inline-flex; align-items: center; gap: var(--space-s); height: 44px; padding: 0 20px; border: 1px solid var(--primary); border-radius: var(--radius-md); background: var(--primary); color: var(--on-primary); font-size: 15px; white-space: nowrap; transition: transform 0.12s, opacity 0.15s; }
.demo .p-btn.sec { border-color: var(--field-edge); background: var(--field); color: var(--ink); }
.demo .p-btn.press { transform: scale(0.97); opacity: 0.7; }
.demo .p-btn .spin { width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; }
.demo .p-field { display: flex; flex-direction: column; gap: 6px; }
.demo .p-field .l { font-size: 13px; color: var(--ink-muted); }
.demo .p-input { display: flex; align-items: center; height: 44px; padding: 0 14px; border: 1px solid var(--control); border-radius: var(--radius-md); background: var(--input); font-size: 16px; transition: border-color 0.15s, box-shadow 0.15s; }
.demo .p-input.focus { border-color: var(--ink); box-shadow: 0 0 0 3px var(--accent-ring); }
.demo .p-input .ph { color: var(--ink-muted); }
.demo .p-hint { font-size: 12.5px; line-height: 1.35; color: var(--ink-muted); }
.demo .p-signing { align-items: center; }
.demo .p-signing .p-lbl { margin-right: var(--space-xs); }
.demo .p-chip.neutral { height: 28px; padding: 0 12px; border: 1px solid var(--edge); background: var(--field); color: var(--ink); animation: none; }
.demo .p-fine { margin: 0; font-size: 12px; line-height: 1.4; color: var(--ink-muted); }
.demo .p-fine u { color: var(--accent); text-underline-offset: 3px; }

/* sign in, and the company rows under it */
.demo .p-qrcard { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface-alt); }
/* the code's tile stays white in dark mode: an inverted code scans badly */
.demo .p-qr { flex: none; padding: var(--space-s); border-radius: var(--radius-md); background: #FFFFFF; line-height: 0; }
.demo .p-scan { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.demo .p-scan .small { font-size: 13px; line-height: 1.35; color: var(--ink-muted); }
.demo .p-scan .big { font-size: 28px; line-height: 1; font-weight: 600; }
.demo .p-stat { display: flex; align-items: center; gap: 12px; min-height: 46px; border-top: 1px solid var(--line-soft); }
.demo .p-stat.wait .name { color: var(--ink-muted); }
.demo .ic { flex: none; }
.demo .ic.wait { color: var(--ink-muted); }
.demo .ic.done { color: var(--accent); }

/* what we found */
.demo .p-total { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface-alt); }
.demo .p-total span { font-size: 13px; color: var(--ink-muted); }
.demo .p-total b { font-size: 34px; line-height: 1; font-weight: 600; font-variant-numeric: tabular-nums; }
.demo .p-grp { padding: 12px 0; border-top: 1px solid var(--line-soft); }
.demo .p-grp:first-child { padding-top: 0; border-top: 0; }
.demo .p-grp .h, .demo .p-grp .p { display: flex; justify-content: space-between; gap: var(--space-m); }
.demo .p-grp .h { font-weight: 600; }
.demo .p-grp .p { font-size: 13px; line-height: 22px; color: var(--ink-muted); }
.demo .p-grp span + span { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) {
  .demo .panel { padding: 18px; }
  /* four rows, so the whole first step fits the thread on a phone */
  .demo .p-list { height: 184px; }
  .demo .p-qrcard { gap: 14px; padding: 14px; }
  .demo .p-qr svg { width: 84px; height: 84px; }
  .demo .p-scan .big { font-size: 22px; }
}

/* the answer, the way the model writes it */
.demo .said p { margin: 0 0 12px; font-size: 15px; line-height: 1.4; }
.demo .said b { font-weight: 600; }
.demo .sample { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0; color: var(--ink-muted); }

/* ...and the charts it draws: bars, the one the answer is about highlighted */
.demo .chart { max-width: 560px; padding: 20px; border: 1px solid var(--line-soft); border-radius: var(--radius-lg); background: var(--surface-inset); }
.demo .chart h4 { margin: 0; font-size: 16px; font-weight: 600; }
.demo .cs { margin: 4px 0 18px; font-size: 13px; color: var(--ink-muted); }
/* one set of columns for every bar, so the tracks are the same length and the bars compare */
.demo .bars { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; gap: 12px; }
.demo .bar { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; grid-template-columns: subgrid; align-items: center; font-size: 13.5px; }
.demo .bl { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.demo .track { display: block; height: 14px; overflow: hidden; border-radius: 3px; background: var(--surface-alt); }
/* the width is set per bar by demo.js */
.demo .fill { display: block; width: 0; height: 100%; border-radius: 3px; background: var(--accent); transition: width 0.9s cubic-bezier(0.2, 0, 0, 1); }
.demo .bv { color: var(--ink-muted); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.demo .bar.hl .bl, .demo .bar.hl .bv { font-weight: 600; }
.demo .bar.hl .bv { color: var(--ink); }
.demo .bar.hl .fill { background: var(--chart-highlight); }
@media (max-width: 560px) {
  .demo .bars { grid-template-columns: minmax(0, 1fr) auto; }
  .demo .bar { grid-template-columns: minmax(0, 1fr) auto; grid-template-columns: subgrid; row-gap: 4px; }
  .demo .track { grid-column: 1 / -1; grid-row: 2; }
}

/* the projection: a fan of growth rates, or the same money at two fees */
.demo .chart.lc { max-width: 620px; }
.demo .lc svg { display: block; width: 100%; height: auto; overflow: visible; }
.demo .lc-g { stroke: var(--line-soft); stroke-width: 1; }
.demo .lc-t { fill: var(--ink-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.demo .lc-e { fill: var(--ink-muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.demo .lc-e.on { fill: var(--ink); }
.demo .lc-l { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0, 0, 1); }
.demo .lc-main { stroke: var(--accent); }
.demo .lc-soft { stroke: var(--ink-muted); stroke-width: 1.5; opacity: 0.7; }
.demo .lc-area { fill: var(--accent); opacity: 0; transition: opacity 0.8s 0.6s; }
.demo .lc.drawn .lc-l { stroke-dashoffset: 0; }
.demo .lc.drawn .lc-area { opacity: 0.14; }

/* what the insurance covers, and what it doesn't */
.demo .cov-rows { display: flex; flex-direction: column; }
.demo .cov-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; align-items: center; gap: 12px; min-height: 46px; border-top: 1px solid var(--line-soft); font-size: 14px; opacity: 0; transform: translateY(4px); transition: opacity 0.35s, transform 0.35s cubic-bezier(0.2, 0, 0, 1); }
.demo .cov-row:first-child { border-top: 0; }
.demo .cov-row.in { opacity: 1; transform: none; }
.demo .cov-n { font-weight: 600; }
.demo .cov-d { color: var(--ink-muted); }
.demo .cov-p { justify-self: end; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; white-space: nowrap; }
.demo .cov-row.gap .cov-p { background: var(--warning-surface); color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning-line); }
@media (max-width: 560px) {
  .demo .cov-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; padding-block: 8px; }
  .demo .cov-d { grid-column: 1; grid-row: 2; font-size: 13px; }
  .demo .cov-p { grid-column: 2; grid-row: 1 / 3; }
}

/* demo.js jumps straight to each end state; this drops the easing in between */
@media (prefers-reduced-motion: reduce) {
  .demo .roll .enter, .demo .view.fresh, .demo .p-chip { animation: none; }
  .demo .item, .demo .thread::before, .demo .send, .demo .p-prog i::after, .demo .p-box, .demo .p-box svg,
  .demo .p-btn, .demo .p-input, .demo .fill, .demo .lc-l, .demo .lc-area, .demo .cov-row { transition: none; }
}