/* The interactive preview's styles (FR-17, FR-18): the product evidence-journey panel rules (.kd),
   extracted verbatim from the canvas approved at G5 (design/demo/canvas.html, 2026-10-28), and the
   guided layer approved at G7 (design/demo-guided/, 2026-10-29). The site frame (header, footer,
   fonts, the canvas colour tokens) comes from /css/site.css. The token block below and the build
   additions at the end are on neither canvas. */

/* The design-system tokens the panels draw from that the release-1 site does not define, copied from
   design/demo/tokens.css (the product token block, copied unchanged from product commit db81a0a). */
:root {
  --control-border: var(--ink-2);
  --warn: #8A5300; --warn-wash: #FBF1DC; --danger-wash: #FBE9E7; --ok-wash: #E5F2EB; --info-wash: #E6EEFB;
  --redact-wash: #F3E3E1; --row-alt: #F6F8F9; --row-hover: #E8EDF1;
  --text-caption: 12px; --text-mono: 13px; --text-small: 15px; --text-body: 16px; --text-lead: 17px;
  --text-h3: 19px; --text-h2: 24px; --text-h1-phone: 36px; --text-h1-desk: 52px;
  --leading-body: 1.55; --leading-mono: 1.7; --tracking-eyebrow: 0.04em;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --radius-xs: 3px; --radius-sm: 4px; --radius-md: 6px; --radius-pill: 999px;
  --border-hair: 1px; --border-error: 2px; --focus-ring: 2px solid var(--focus);
  --control-h: 46px; --control-h-compact: 36px; --target-min: 24px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --warn: #F2C46B; --warn-wash: #2E2512; --danger-wash: #3A1A17; --ok-wash: #13291F;
    --info-wash: #14243D; --redact-wash: #3A1F1A; --row-alt: #1A2531; --row-hover: #213040;
  }
}
:root[data-theme="dark"] {
  --warn: #F2C46B; --warn-wash: #2E2512; --danger-wash: #3A1A17; --ok-wash: #13291F;
  --info-wash: #14243D; --redact-wash: #3A1F1A; --row-alt: #1A2531; --row-hover: #213040;
}

/* ---- the preview page top (FR-17) ---- */
.kp .demo-cap { font: 400 var(--text-caption) var(--font-mono); color: var(--ink-2); margin: 0; }
.kp .demo-end { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; padding-block: var(--space-8); }
.kp .demo-end p { margin: 0; max-width: 60ch; }
/* The label (FR-17): plain visible text, one style at the page top and at the top of every panel. */
.pv-label { justify-self: start; margin: 0; font: 500 var(--text-mono)/1.4 var(--font-mono); color: var(--ink); background: var(--paper); border: var(--border-hair) solid var(--control-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2); max-width: 100%; }

/* ===================== the evidence-journey panels (product canvas, approved 2026-10-28) ===================== */
.kd { font-family: var(--font-body); font-size: var(--text-body); line-height: var(--leading-body); color: var(--ink); }
.kd *, .kd *::before, .kd *::after { box-sizing: border-box; }
.kd a { color: var(--focus); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kd a:focus-visible, .kd button:focus-visible, .kd input:focus-visible, .kd textarea:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.kd h2, .kd h3 { font-family: var(--font-display); line-height: 1.2; margin: 0; }
.kd h2 { font-size: var(--text-h3); font-weight: 700; }
.kd h3 { font-size: var(--text-body); font-weight: 700; }
.kd p { margin: 0; }
.kd code, .kd .mono { font-family: var(--font-mono); font-size: var(--text-mono); }
.kd .muted { color: var(--ink-2); }
.kd .small { font-size: var(--text-small); }
.kd .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.stack { display: grid; gap: var(--space-5); padding-bottom: var(--space-4); }
.kd .btn { font: 600 var(--text-small) var(--font-body); min-height: var(--control-h-compact); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); border: var(--border-hair) solid var(--control-border); background: var(--sheet); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.kd .btn.primary { background: var(--seal); color: var(--on-seal); border-color: var(--seal); font-family: var(--font-display); font-weight: 700; min-height: var(--control-h); padding-inline: var(--space-5); }
.kd .badge { display: inline-flex; align-items: center; gap: var(--space-1); font: 600 var(--text-small) var(--font-body); border-radius: var(--radius-pill); padding: 0 var(--space-3); min-height: var(--target-min); border: var(--border-hair) solid currentColor; white-space: nowrap; }
.kd .badge.plain { color: var(--ink-2); background: var(--sheet); }
.kd .badge.sm { font: 500 var(--text-caption) var(--font-mono); padding: 0 var(--space-2); white-space: normal; border-radius: var(--radius-sm); }
.kd .panel { background: var(--sheet); border: var(--border-hair) solid var(--rule); border-radius: var(--radius-md); padding: var(--space-5); display: grid; gap: var(--space-4); min-width: 0; }
.kd .panel-head { display: grid; gap: var(--space-1); }
.kd .eyebrow { font: 500 var(--text-mono) var(--font-mono); letter-spacing: var(--tracking-eyebrow); color: var(--ink-2); }
.kd .summary { font: 500 var(--text-small) var(--font-body); color: var(--ink); border-top: var(--border-hair) solid var(--rule); padding-top: var(--space-2); }
.kd dl.kv { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.kd dl.kv > div { display: grid; gap: 0; padding-block: var(--space-2); border-top: var(--border-hair) solid var(--rule); min-width: 0; }
.kd dl.kv dt { color: var(--ink-2); font-size: var(--text-small); }
.kd dl.kv dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.kd .note { display: flex; gap: var(--space-3); align-items: flex-start; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--text-small); border-left: var(--space-1) solid currentColor; }
.kd .note > div { display: grid; gap: var(--space-1); color: var(--ink); }
.kd .note .g { font: 700 var(--text-small) var(--font-display); flex: none; }
.kd .note.info { background: var(--info-wash); color: var(--focus); }
.kd .note.ok { background: var(--ok-wash); color: var(--ok); }
.kd .note.danger { background: var(--danger-wash); color: var(--danger); }
.kd .note.warn { background: var(--warn-wash); color: var(--warn); }
.kd .note strong { color: var(--ink); }
.kd table.dt { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.kd table.dt caption { text-align: left; font: 700 var(--text-body) var(--font-display); padding-bottom: var(--space-2); }
.kd table.dt th { text-align: left; font-weight: 600; color: var(--ink-2); padding: var(--space-2) var(--space-3); border-bottom: var(--border-hair) solid var(--control-border); }
.kd table.dt tbody tr:nth-child(even) { background: var(--row-alt); }
.kd table.dt thead { display: none; }
.kd table.dt tr { display: grid; padding-block: var(--space-2); border-bottom: var(--border-hair) solid var(--rule); }
.kd table.dt td { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--space-2); border: 0; padding: var(--space-1) var(--space-2); vertical-align: top; overflow-wrap: anywhere; }
.kd table.dt td::before { content: attr(data-label); color: var(--ink-2); }
.kd .act { font: 500 var(--text-mono) var(--font-mono); }
.kd .payloads { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.kd .payload { border: var(--border-hair) solid var(--control-border); border-radius: var(--radius-sm); display: grid; min-width: 0; }
.kd .payload > header { padding: var(--space-2) var(--space-3); border-bottom: var(--border-hair) solid var(--rule); background: var(--row-alt); display: grid; gap: 0; }
.kd .payload > header p { font-size: var(--text-small); color: var(--ink-2); }
.kd .payload .msg { padding: var(--space-3); display: grid; gap: var(--space-1); border-top: var(--border-hair) solid var(--rule); }
.kd .payload .msg:first-of-type { border-top: 0; }
.kd .payload .who { font: 500 var(--text-caption) var(--font-mono); color: var(--ink-2); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); }
.kd .payload .txt { overflow-wrap: anywhere; }
.kd mark.found { background: var(--redact-wash); color: var(--ink); border-bottom: var(--border-hair) dashed var(--seal); }
.kd mark.masked { background: var(--redact-wash); color: var(--seal); font: 500 var(--text-mono) var(--font-mono); border: var(--border-hair) solid var(--seal); border-radius: var(--radius-xs); padding: 0 var(--space-1); white-space: nowrap; }
.kd .hidden-content { border: var(--border-hair) dashed var(--control-border); border-radius: var(--radius-sm); padding: var(--space-5); display: grid; gap: var(--space-3); justify-items: start; }
.kd .split { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.kd .subhead { display: grid; gap: var(--space-1); margin-bottom: var(--space-2); }
.kd .subhead p { font-size: var(--text-small); color: var(--ink-2); }
.kd ol.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.kd ol.chain li { border: var(--border-hair) solid var(--control-border); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); display: grid; gap: 0; font-size: var(--text-small); background: var(--sheet); }
.kd ol.chain li.this { border: var(--border-error) solid var(--seal); }
.kd ol.chain li .h { font: 400 var(--text-mono) var(--font-mono); overflow-wrap: anywhere; }
.kd ol.chain li.link { border: 0; padding: 0 var(--space-3); color: var(--ink-2); font: 400 var(--text-caption) var(--font-mono); background: transparent; }
.kd ol.chain li.start { border-style: dashed; color: var(--ink-2); }
.kd pre.term { margin: 0; font: 400 var(--text-mono)/var(--leading-mono) var(--font-mono); background: var(--paper); border: var(--border-hair) solid var(--control-border); border-radius: var(--radius-sm); padding: var(--space-3); white-space: pre-wrap; overflow-wrap: anywhere; }
.kd pre.term .k { color: var(--ink-2); }
.kd pre.term .ok { color: var(--ok); font-weight: 500; }
.kd pre.term .bad { color: var(--danger); font-weight: 500; }
.kd ul.plain { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.kd .row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.kd .build { display: grid; gap: var(--space-3); padding-top: var(--space-4); border-top: var(--border-hair) solid var(--rule); min-width: 0; }
.kd .build .subhead .badge { justify-self: start; }
/* NEW (FR-19, FR-23): the editable request text. Field styling follows the approved email field. */
.kd .req { display: grid; gap: var(--space-2); }
.kd .req label { font-weight: 600; display: grid; gap: var(--space-1); }
.kd .req .hint { font-weight: 400; font-size: var(--text-small); color: var(--ink-2); }
.kd .req textarea { font: inherit; font-size: var(--text-body); line-height: var(--leading-body); padding: var(--space-3); min-height: 168px; border: var(--border-hair) solid var(--control-border); border-radius: var(--radius-sm); background: var(--paper); color: var(--ink); width: 100%; resize: vertical; }
.kd .req textarea[readonly] { border-style: dashed; }
/* NEW (FR-26 refused): the card action switch, built like the canvas's segmented controls. */
.kd fieldset.act-pick { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-2); }
.kd fieldset.act-pick legend { font-weight: 600; font-size: var(--text-small); padding: 0; margin-bottom: var(--space-1); }
.kd .seg-r { display: inline-flex; border: var(--border-hair) solid var(--control-border); border-radius: var(--radius-md); overflow: hidden; justify-self: start; }
.kd .seg-r label { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-h-compact); padding: 0 var(--space-4); font: 500 var(--text-mono) var(--font-mono); cursor: pointer; background: var(--sheet); }
.kd .seg-r label + label { border-left: var(--border-hair) solid var(--control-border); }
.kd .seg-r input { accent-color: var(--seal); width: 16px; height: 16px; margin: 0; }


@container (min-width: 900px) {
  .kd dl.kv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd dl.kv.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kd .payloads { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kd .split { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .kd .panel { padding: var(--space-6); }
  .kd table.dt thead { display: table-header-group; }
  .kd table.dt tr { display: table-row; padding: 0; }
  .kd table.dt td { display: table-cell; padding: var(--space-2) var(--space-3); border-bottom: var(--border-hair) solid var(--rule); }
  .kd table.dt td::before { content: none; }
}

/* ===================== the guided layer (G7, 2026-10-29; design/demo-guided/) =====================
   MEASURE RULE (the owner's 29 Oct 2026 line-break complaint). No running text is given a max-width
   narrower than the box it visibly sits in: at 900 px and wider the plain-English lines sit in two
   equal columns, so every wrap happens at an edge the reader can see. Text that spans the whole panel
   is held to one line at 1440 px by its copy. tests/e2e/demo.spec.ts measures both on the built page. */
/* ---- page top: introduction and the route through the five steps ---- */
.kp .guide-top { display: grid; gap: var(--space-6); padding-block: var(--space-8) var(--space-6); }
.kp .guide-top .head { display: grid; gap: var(--space-4); min-width: 0; }
.kp .guide-top h1 { font: 800 var(--text-h1-phone)/1.02 var(--font-display); letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.kp .guide-top .intro { display: grid; gap: var(--space-3); align-content: start; min-width: 0; }
.kp .guide-top .intro .lede { max-width: none; }
.kp .guide-top .route { display: grid; gap: var(--space-3); align-content: start; border-top: var(--border-error) solid var(--seal); padding-top: var(--space-3); min-width: 0; }
.kp .route-k { font: 500 var(--text-mono) var(--font-mono); letter-spacing: var(--tracking-eyebrow); color: var(--ink-2); margin: 0; }
.kp .route ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); counter-reset: step; }
.kp .route li { counter-increment: step; display: grid; grid-template-columns: var(--space-8) minmax(0, 1fr); align-items: baseline; }
.kp .route li::before { content: counter(step); font: 500 var(--text-mono) var(--font-mono); color: var(--ink-2); }
.kp .route a { display: inline-flex; align-items: center; min-height: var(--target-min); color: var(--focus); font-weight: 600; }
.kp .route .cta-line { margin: 0; font-size: var(--text-body); color: var(--ink-2); }
.kp .route .cta-line a { display: inline; min-height: 0; }

/* ---- each step: the two plain-English lines, the step working, the technical layer ---- */
.kd .panel-head .eyebrow .story { color: var(--ink); }
.kd .tell { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.kd .tell-col { display: grid; gap: var(--space-1); align-content: start; border-top: var(--border-error) solid var(--rule); padding-top: var(--space-3); min-width: 0; }
.kd .tell-col.biz { border-top-color: var(--seal); }
.kd .tell-k { font: 500 var(--text-mono) var(--font-mono); letter-spacing: var(--tracking-eyebrow); color: var(--ink-2); }
.kd .tell-col p:not(.tell-k) { font-size: var(--text-lead); color: var(--ink); }
.kd .show { display: grid; gap: var(--space-4); min-width: 0; }

/* Step 3's plain list of decisions: what was decided, and whether the page worked it out. */
.kd ul.decide { list-style: none; margin: 0; padding: 0; display: grid; }
.kd ul.decide li { display: grid; gap: var(--space-1) var(--space-4); padding-block: var(--space-2); border-top: var(--border-hair) solid var(--rule); grid-template-columns: minmax(0, 1fr); align-items: baseline; }
.kd ul.decide .d-k { font-weight: 600; }
.kd ul.decide .badge { justify-self: start; }

/* Step 4's plain chain: one card per record, each naming what it records and whether it is signed. */
.kd ol.seal-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.kd ol.seal-chain li { border: var(--border-hair) solid var(--control-border); border-radius: var(--radius-sm); background: var(--sheet); padding: var(--space-2) var(--space-3); display: grid; gap: 0; min-width: 0; }
.kd ol.seal-chain li.this { border: var(--border-error) solid var(--seal); }
.kd ol.seal-chain .sc-n { font: 500 var(--text-caption) var(--font-mono); color: var(--ink-2); }
.kd ol.seal-chain .sc-what { font-weight: 600; }
.kd ol.seal-chain .sc-prev, .kd ol.seal-chain .sc-sig { font-size: var(--text-small); color: var(--ink-2); }
.kd ol.seal-chain .sc-sig.ok { color: var(--ok); font-weight: 600; }

/* The technical layer: a native disclosure, closed on load, Enter and Space toggle it, works with
   scripting off (FR-25 [66][67]). The step heading stays outside the summary [68]. Opening it only
   grows the page below the summary; the script still routes the toggle through the page's one
   hold-in-place path (R6), which also covers the clamp when closing it at the page foot. No motion:
   it opens and closes at once, so there is no reduced-motion variant to design. */
.kd details.tech { border: var(--border-hair) solid var(--control-border); border-radius: var(--radius-sm); background: var(--paper); min-width: 0; }
.kd details.tech > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: var(--space-4) minmax(0, 1fr); align-items: baseline; column-gap: var(--space-2); min-height: var(--control-h-compact); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); }
.kd details.tech > summary::-webkit-details-marker { display: none; }
.kd details.tech > summary::before { content: "▸"; font: 500 var(--text-mono) var(--font-mono); color: var(--ink-2); }
.kd details.tech[open] > summary::before { content: "▾"; }
@media (hover: hover) { .kd details.tech > summary:hover { background: var(--row-hover); } }
.kd details.tech > summary:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.kd details.tech > summary .tech-t { font-weight: 600; }
.kd details.tech > summary .tech-d { display: block; grid-column: 2; font-size: var(--text-small); color: var(--ink-2); }
.kd .tech-body { display: grid; gap: var(--space-4); padding: var(--space-4); border-top: var(--border-hair) solid var(--rule); background: var(--sheet); border-radius: 0 0 var(--radius-sm) var(--radius-sm); min-width: 0; }

@container (min-width: 900px) {
  .kp .guide-top { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-16); padding-block: var(--space-16) var(--space-8); }
  .kp .guide-top .head { grid-column: 1 / -1; }
  .kp .guide-top h1 { font-size: var(--text-h1-desk); }
  .kd .tell { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16); }
  /* The site's desktop lede size (site.css .lede, 19 px), so a column holds about 70 characters a line. */
  .kd .tell-col p:not(.tell-k) { font-size: 19px; }
  .kd ul.decide li { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr) minmax(0, 12rem); }
  .kd ul.decide .badge { justify-self: end; }
  .kd ol.seal-chain { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

/* ---------- build additions (not drawn on the canvas) ---------- */
/* The canvas drew the panel-4 side column with an inline style, which the /demo/* policy forbids. */
.kd .side { display: grid; gap: var(--space-5); align-content: start; }
/* The closing "Join the waitlist" link uses the site's primary button; as a link it needs these. */
.kp a.btn { text-decoration: none; display: inline-flex; align-items: center; }
/* The card-action switch shows the chosen option from the checked radio itself. */
.kd .seg-r label:has(input:checked) { background: var(--row-alt); font-weight: 600; box-shadow: inset 0 -3px 0 var(--seal); }
/* The refusal note's live region exists from load so it is announced when it fills; while empty it takes no space. */
.kd .live-note:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.kd .btn:disabled { opacity: .6; cursor: not-allowed; }
.kd .body { display: grid; gap: var(--space-4); min-width: 0; }
/* Containers the script fills; empty ones take no grid gap. */
.kd .body:empty, .kd #p5-out:empty { display: none; }