/* AASB S2 walkthrough v2 (WP4): the door and its proposal variants. (The Mad Lib's rules went with it on 27 Oct 2026:
   Sheila asks the questions in her panel now, styled in sheila.css.)
   v1 tokens only (--s*, --earth-*, --solar-*, --dawn-*, --divider, --radius, --ft-error); the door reuses v1's .guide-dialog,
   .tb, .door, .doors and .credit-ticket. The code boxes and demo inbox follow the credit-union walkthrough's pattern,
   restyled for the dark guide surface. No Sheila purple on the guide layer. */

/* ---------- Door: the quiet text button ("Fill it in for me") ---------- */
.guide-dialog .tb.skip { background: none; border: none; color: var(--earth-100); text-decoration: underline; text-underline-offset: 3px; font-family: 'NeutrifPro Regular', sans-serif; padding: 0 6px; }

/* ---------- Door ---------- */
.door-dialog .gd-foot { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }
.door-dialog .gd-foot .grow { flex: 1; }
.door-dialog .gd-foot .gd-note { margin-top: 0; }
.door-variant .proposal-tag { align-self: flex-start; height: 22px; background: rgba(246,247,240,.12); color: var(--solar-500); border: 1px dashed rgba(246,247,240,.45); }
.door-variant p.door-sent { flex: 0 0 auto; }
.door-variant .field { margin-top: var(--s1); }
.door-variant .field label { display: block; margin-bottom: var(--s1); color: var(--earth-100); text-transform: uppercase; letter-spacing: .04em; }
.door-variant .field input[type=email] { width: 100%; height: 44px; padding: 0 var(--s3); border-radius: var(--radius); background: rgba(246,247,240,.08); border: 1px solid rgba(246,247,240,.35); color: #fff; font-size: 16px; outline: none; }
.door-variant .field input::placeholder { color: rgba(246,247,240,.45); }
.door-variant .hint { color: var(--earth-100); margin-top: var(--s1); }
.door-variant .err { color: var(--dawn-100); margin-top: var(--s1); display: flex; align-items: center; gap: var(--s1); }
.door-variant .err svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.door-variant .codes { display: flex; gap: var(--s1); margin-top: var(--s2); }
.door-variant .codes input { width: 40px; height: 48px; min-width: 0; flex: 1 1 0; text-align: center; font-family: 'RecklessNeue Regular', serif; font-size: 26px; line-height: 32px; border-radius: var(--radius); background: rgba(246,247,240,.08); border: 1px solid rgba(246,247,240,.35); color: #fff; outline: none; }
.door-variant .field input:focus, .door-variant .codes input:focus { border-color: var(--dawn-500); box-shadow: 0 0 0 3px rgba(255,79,1,.25); }
.door-variant .inbox { margin-top: var(--s3); border: 1px dashed rgba(246,247,240,.35); border-radius: var(--radius); padding: var(--s3); color: var(--earth-100); }
.door-variant .inbox .from { display: flex; align-items: center; gap: var(--s2); }
.door-variant .inbox svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.door-variant .inbox .ib-subj { margin-top: var(--s2); color: var(--solar-500); }
.door-variant .inbox .code { font-family: 'RecklessNeue Regular', serif; font-size: 28px; line-height: 32px; letter-spacing: .12em; color: #fff; margin: var(--s1) 0; }
.door-variant .door-acts { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s3); flex-wrap: wrap; }
.door-variant .door-acts .tb, .door-variant .sso-list .tb, .door-variant .door-end .tb { margin-top: 0; }
.door-variant .sso-list { display: flex; flex-direction: column; gap: var(--s2); }
.door-variant .sso-list .tb { align-self: stretch; justify-content: flex-start; }
.door-variant .door-end p { display: flex; gap: var(--s2); align-items: flex-start; color: var(--solar-500); flex: 0 0 auto; }
.door-variant .door-end p svg { width: 18px; height: 18px; fill: var(--dawn-500); flex-shrink: 0; margin-top: 1px; }
.door-variant .door-end .tb { margin-top: var(--s3); }

@media (max-width: 640px) {
  .door-dialog .doors { grid-template-columns: 1fr; }
}

/* ---------- v3.6: the closing dialog's three doors (Start free, Contact Drova, Keep exploring), side by side ----------
   The dialog widens to hold three columns; below 900 px they stack. Only the closing (#guide-door) changes. */
#guide-door.guide-dialog.closing { max-width: 840px; }
.door-dialog .doors.doors-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.door-dialog .gd-foot .gd-note:only-child { margin-left: auto; }
@media (max-width: 899px) {
  #guide-door.guide-dialog.closing { max-width: 600px; }
  .door-dialog .doors.doors-3 { grid-template-columns: 1fr; }
}

/* ======================================================================================================================
   the storyboard (27 Oct 2026): the intro card, the building dialog, the seven callouts and the closing dialog.
   v1 tokens only, on v1's dark guide surface (.guide-dialog, .tb). No Sheila purple on the guide layer; no new colours.
   ====================================================================================================================== */

/* ---------- 1. Sheila's welcome (v3.6: one paragraph and one button; v5.21, 5 Nov 2026: four short cards in turn, Next and Back
   between them, the last card's button the start; no eyebrow, so the card carries two type sizes: the title and the line.
   The dots (v5.22, decided 5 Nov 2026: one dot language on the tour) are the tour card's .prog pattern: 8 px, the card in view a
   22 px dawn pill, the ones read dawn at .55, the ones to come solar at .22, the same width transition; here they sit by the buttons,
   where the next press is decided.) ---------- */
.intro-dialog { max-width: 480px; }
.intro-dialog .gi-head { display: flex; align-items: center; gap: var(--s3); }
.intro-dialog .gi-head .h4 { color: var(--solar-500); text-wrap: balance; min-height: 72px; } /* v5.21: two lines reserved, so the card keeps its height from card to card */
.intro-dialog .gi-name { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.intro-dialog .gi-copy { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s2); }
.intro-dialog .gi-line { color: var(--earth-100); }
.intro-dialog .gi-copy > .gi-line:first-child { min-height: 72px; } /* v5.21: three lines reserved; the buttons never move */
.intro-dialog .gi-credit { color: var(--dawn-100); }
.intro-dialog .gi-copy.has-list > .gi-line:first-child { min-height: 0; } /* v5.52 (R01): the lead of a listed card is one line; the list carries the height */
.intro-dialog .gi-list { margin: 0; padding-left: 1.4em; color: var(--earth-100); display: grid; gap: var(--s1); } /* v5.52: the welcome's numbered list, the body's colour and size, markers inherited */
.intro-dialog .gi-list li { padding-left: var(--s1); }
.gi-acts { margin-top: var(--s5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.gi-dots { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.gi-dot { width: 8px; height: 8px; border-radius: 4px; background: rgba(246,247,240,.22); display: block; transition: width .2s ease, background .2s ease; }
.gi-dot.on { width: 22px; background: var(--dawn-500); }
.gi-dot.done { background: rgba(255,79,1,.55); }
.gi-btns { display: flex; flex-wrap: wrap; gap: var(--s2); }
.gi-btns .gi-ghost { visibility: hidden; } /* v5.21: card 1's Back placeholder keeps Next in its place */
.guide-dialog .tb.next[disabled] { opacity: .45; cursor: not-allowed; }
.guide-dialog .tb.next[disabled]:hover { background: var(--dawn-500); }

/* ---------- 2. Building: retired in v5.10 (4 Nov 2026, the review of 4 Nov 2026); the welcome opens the workspace at once ---------- */

/* ---------- 3. The callouts: v1's .tour-card, ported ---------- */
.tour-card { position: absolute; width: 400px; max-width: calc(100vw - 32px); background: var(--earth-500); color: var(--solar-500); border-radius: 8px; box-shadow: 0 20px 50px rgba(0,28,39,.45); padding: 20px 24px; pointer-events: auto; transition: left .25s ease, top .25s ease; }
.tour-card[hidden] { display: none; }
.tour-card .ptr { position: absolute; width: 16px; height: 16px; background: var(--earth-500); transform: rotate(45deg); border-radius: 2px; }
.tour-card[data-side="right"] .ptr { left: -7px; }
.tour-card[data-side="left"] .ptr { right: -7px; }
.tour-card[data-side="bottom"] .ptr { top: -7px; }
.tour-card[data-side="top"] .ptr { bottom: -7px; }
.tour-card[data-side="none"] .ptr, .tour-card[data-side="sheet"] .ptr { display: none; }
.tour-card[data-side="sheet"] { width: auto; left: 16px !important; right: 16px; top: auto !important; bottom: 16px; max-width: none; }
.tour-card .prog { display: flex; flex-direction: row; align-items: center; gap: 6px; }
.tour-card .prog i { width: 8px; height: 8px; border-radius: 4px; background: rgba(246,247,240,.22); display: block; transition: width .2s ease, background .2s ease; }
.tour-card .prog i.on { width: 22px; background: var(--dawn-500); }
.tour-card .prog i.done { background: rgba(255,79,1,.55); }
.tour-card .prog .accrue { margin-left: auto; color: var(--dawn-100); font-size: 13px; line-height: 16px; white-space: nowrap; }
.tour-card .tc-text { font-size: 16px; line-height: 24px; color: #fff; margin-top: 8px; }
/* Breadcrumb (27 Oct 2026): the product path to the stop, a muted caption at the top of every content callout. */
/* v5.24 (5 Nov 2026): the eyebrow is the module alone in the product's label style (the declarations of walk.css .overline, copied
   here: v5.25 found the page's own stylesheet defines a utility class named overline that draws a line above the text, so the card
   never carries that class and the rule says so); the step's title
   (.tc-title, the .h6 size) sits between the dots and the details; the next line is a second paragraph of the details. */
.tour-card .tc-crumb { color: var(--earth-100); margin: 0 0 10px; font-family: 'NeutrifPro Regular', sans-serif; font-size: 12px; line-height: 16px; text-transform: uppercase; letter-spacing: .04em; text-decoration: none; }
.tour-card .tc-title { color: #fff; margin-top: 14px; text-wrap: balance; }
/* v5.54: Skip as an X. A 32 px icon button at the card's top right, centred on the eyebrow line (the card's padding is 20px 24px; the
   eyebrow is 16px tall, so top 12px puts the button's centre on it); the eyebrow keeps clear of it. Quiet like the text controls
   (solar at 70 percent), white on hover with the back button's hover wash, the dawn focus ring. Nothing under reduced motion to switch off. */
.tour-card .tc-crumb, .tour-card > .prog { padding-right: 44px; } /* the eyebrow and, on a card without one, the dots row (its accrue span in offer mode) keep clear of the X */
.tour-card .tb.tc-x { position: absolute; top: 12px; right: 16px; width: 32px; height: 32px; padding: 0; border-radius: 6px; justify-content: center; background: transparent; color: rgba(246,247,240,.7); }
.tour-card .tb.tc-x svg { width: 18px; height: 18px; }
.tour-card .tb.tc-x:hover { background: rgba(246,247,240,.08); color: #fff; }
.tour-card .tb.tc-x:focus-visible { outline: 2px solid var(--dawn-500); outline-offset: 2px; }
/* What's next (v2.6, 27 Oct 2026): one muted caption line directly above the buttons. */
.tour-card .tc-upnext { font-size: 16px; line-height: 24px; color: var(--earth-100); margin-top: 12px; }
.tour-card .tc-upnext + .act { margin-top: 10px; }
/* Transitions: the callout fades out before the pointer runs (150 ms) and the next one fades in on its anchor (200 ms). */
.tour-card.tc-out { opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.tour-card.tc-in { animation: tcin .2s ease both; }
@keyframes tcin { from { opacity: 0; } to { opacity: 1; } }
.tour-card .tb[disabled] { opacity: .45; cursor: default; }
.tour-card .tb.back[disabled]:hover { background: transparent; }
.tour-card .tc-extra { margin-top: 14px; }
.tour-card .act { margin-top: 18px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tour-card .act .grow { flex: 1; }
/* v5.50 (spec v5.50-start-free-in-the-card.md): Start free (#tc-start) was the second quiet text control, right after Skip, 8 px from it
   with the row's gap; since v5.54 Skip is the X at the top right and Start free is the row's only text control, so this rule matches
   nothing on the card today; kept for the v5.50 pin and for any second text control later. */
.tour-card .act .tb.text + .tb.text { margin-left: 0; }
.tour-card .tb { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid transparent; font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 14px; line-height: 20px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.tour-card .tb svg { width: 14px; height: 14px; fill: currentColor; }
.tour-card .tb.next { background: var(--dawn-500); color: #fff; }
.tour-card .tb.next:hover { background: #E64801; }
.tour-card .tb.back { background: transparent; color: var(--solar-500); border-color: rgba(246,247,240,.3); }
.tour-card .tb.back:hover { background: rgba(246,247,240,.08); }
.tour-card .tb:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.tour.dlg .tour-card { display: none; }

/* ---------- 4. The final dialog ---------- */
.final-dialog .gd-acts { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s5); }
.final-dialog .door-offer { color: var(--dawn-100); }

@media (prefers-reduced-motion: reduce) {
  .tour-card, .tour-card .prog i, .tour-card.tc-out, .gi-dot { transition: none; }
  .tour-card[data-nudge="1"] .tb.next { animation: none; }
  .tour-card.tc-in { animation: none; }
}

/* ======================================================================================================================
   v3 slice 1 (27 Oct 2026): explore the sample after the walk (spec v3/spec/v3-explore.md sections 2 and 3).
   The closing dialog's link, the explore door and the notice (v5.10: the toast is retired), on the walk's dark guide surface
   (--earth-500, --solar-500, --dawn-500). Since v5.2 the top bar's Start free is the only orange button on the page;
   from v5.12 the guide card's launcher (Your four outcomes) is dawn too, and from v5.16 only while its panel is closed.
   ====================================================================================================================== */

/* v3.6: the closing dialog's text link to explore is retired; Keep exploring is its third door (above). */

/* ---------- v4.7: the closing dialog in explore (#guide-door.explore-closing): a close x top right, and the doors rise with
   the words instead of after the walk's 1.45 s ticket beat (the explore frame #explore-door is retired) ---------- */
.explore-closing { position: relative; }
.explore-closing .xd-x { position: absolute; top: var(--s4); right: var(--s4); width: 32px; height: 32px; border: none; border-radius: 16px; background: transparent; color: var(--earth-100); display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.explore-closing .xd-x:hover { background: rgba(246,247,240,.08); color: #fff; }
.explore-closing .xd-x svg { width: 18px; height: 18px; fill: currentColor; }
.explore-closing .xd-x:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.explore-closing .gd-head { padding-right: var(--s6); }
.guide-dialog.closing.explore-closing .doors { animation-delay: .45s; }
.guide-dialog.closing.explore-closing .gd-foot { animation-delay: .55s; }

/* v5.10 (the review of 4 Nov 2026): the entrance toast (bottom right) is retired with its rules; nothing floats
   at the bottom right in explore. */

/* ---------- The notice: a small dark note beside a module that is not in the sample ---------- */
.explore-notice { position: fixed; z-index: 77; width: 280px; max-width: calc(100vw - 32px); padding: var(--s3) var(--s4); background: var(--earth-500); color: var(--solar-500); border-radius: 8px; box-shadow: 0 12px 32px rgba(0,28,39,.4); font-size: 14px; line-height: 20px; }
.explore-notice[hidden] { display: none; }
.explore-notice.show { animation: xfade .18s ease both; }
@keyframes xfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.explore-notice p { color: var(--solar-500); }
.explore-notice .xn-cta { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s2); color: var(--dawn-100); font-family: 'NeutrifPro SemiBold', sans-serif; text-decoration: underline; text-underline-offset: 3px; }
.explore-notice .xn-cta svg { width: 14px; height: 14px; fill: currentColor; }
.explore-notice .xn-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---------- v5.2 (3 Nov 2026, spec v5.2-guide-card.md section 4): Start free in the top bar ----------
   button#explore-cta sits in the top bar's .actions between the sample tag and the Sheila AI pill (views-v2.js topbarHtml and
   app.js's fallback paint it on every route). It shows in explore only, by CSS and never the hidden attribute, so a repaint on
   navigation keeps it and the walk never shows it. The orange pill, 36 px to sit with the Sheila AI pill; on phones the sample tag
   and help hide (walk.css) and it stays. The one orange button on the page outside dialogs (v4.7). */
.explore-cta { display: none; }
body.explore .explore-cta { display: inline-flex; align-items: center; justify-content: center; flex: none; height: 38px; padding: 0 var(--s4); border: none; border-radius: 18px; background: var(--dawn-500); color: #fff; white-space: nowrap; cursor: pointer; }
body.explore .explore-cta:hover { background: #E64801; }
body.explore .explore-cta:focus-visible { outline: 2px solid var(--earth-500); outline-offset: 2px; }
@media (max-width: 767px) { body.explore .explore-cta { padding: 0 var(--s3); } }

/* ---------- v5.2 (spec v5.2-guide-card.md section 2): the guide card in the rail's foot ----------
   nav.side#rail is a frame: the painted rail (#sidenav, which scrolls) and the static card (#guide), which never scrolls away.
   The card is the guide's own dark surface (8 px radius, no shadow: it sits in the rail): the persona head (the ring with four
   arcs around the inverted initial, the name, the bank), the caption, then the launcher (app.js appends it last). #guide[data-done]
   is the seen count: data-done 0 draws the track only; 1 to 4 draw the four quarter arcs, arc n lit when data-done is n or more.
   While a screen plays the card is under the spotlight's dim (.tour, z-index 70) like the rest of the rail; no z-index here. */
nav.side { display: flex; flex-direction: column; overflow: hidden; container-type: inline-size; container-name: rail; }
#sidenav { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.guide-card { position: relative; flex: none; margin: var(--s2); padding: var(--s3); border-radius: 8px; background: var(--earth-500); color: var(--solar-500); text-align: left; }
.guide-card[hidden] { display: none; }
.guide-card .gc-head { display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.guide-card .gc-ring { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
.guide-card .gc-ring svg { position: absolute; left: 0; top: 0; display: block; width: 40px; height: 40px; overflow: visible; }
.guide-card .gc-track, .guide-card .gc-arc { fill: none; stroke-width: 2; }
.guide-card .gc-track { stroke: rgba(246,247,240,.28); }
.guide-card .gc-arc { display: none; stroke: rgba(246,247,240,.28); stroke-linecap: round; }
#guide:is([data-done="1"], [data-done="2"], [data-done="3"], [data-done="4"]) .gc-track { display: none; }
#guide:is([data-done="1"], [data-done="2"], [data-done="3"], [data-done="4"]) .gc-arc { display: inline; }
#guide[data-done="1"] .gc-arc[data-seg="1"],
#guide[data-done="2"] .gc-arc:is([data-seg="1"], [data-seg="2"]),
#guide[data-done="3"] .gc-arc:is([data-seg="1"], [data-seg="2"], [data-seg="3"]),
#guide[data-done="4"] .gc-arc { stroke: var(--dawn-500); }
.guide-card .avatar { position: relative; width: 28px; height: 28px; background: var(--solar-500); color: var(--earth-500); }
.guide-card .gc-who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.guide-card .gc-name { font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 14px; line-height: 18px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* v5.4 (spec v5.4-sample-bank.md section 3, acceptance 1): the org line is the role and the bank ("CFO · Sample Mutual Bank") and wraps
   to a second 16 px line rather than ending in an ellipsis; the name stays single-line. */
.guide-card .gc-org { font-family: 'NeutrifPro Regular', sans-serif; font-size: 12px; line-height: 16px; color: var(--solar-500); opacity: .8; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; }
/* v5.4 (the session, 3 Nov 2026): the role and the bank on their own lines, each on one line with an ellipsis; the separator is DOM text only. */
.guide-card .gc-org .gc-role, .guide-card .gc-org .gc-ent { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guide-card .gc-org .gc-sep { display: none; }
.guide-card .gc-status { margin-top: var(--s2); font-size: 12px; line-height: 16px; color: var(--solar-500); opacity: .8; }

/* The launcher (button#checklist, last in #guide): line 1 "Your four outcomes" with the chevron at the right, line 2 the progress.
   v5.12 (spec v5.12-dawn-launcher.md, the review of 4 Nov 2026): dawn so it stands out after a skip or a dismiss; hover is dawn-600,
   the overlay's primary hover. The progress line is white: 3.30:1 on dawn-500 and 3.97:1 on dawn-600 (WCAG), the pairing
   Start free already uses; white at 85 percent would be 2.73:1 at rest and is not used. The icon rail below keeps it transparent so the ring's arcs stay visible.
   v5.16 (spec v5.16-quiet-launcher-when-open.md, decided 4 Nov 2026): dawn only while its panel is closed. Open ([aria-expanded="true"])
   it goes quiet, the panel's own secondary ring (transparent on the card's earth-500, a 1px rgba(246,247,240,.35) border, rgba(246,247,240,.08)
   on hover, as .checklist-panel .ck-door): the panel's lit next row (v5.17; v5.14's Next button before it) is then the one lit control. The white text stays (on earth-500), the
   chevron still turns, and the re-prompt's dawn pulse ring (below) is unchanged. Rule order: open after hover at equal specificity,
   open-and-hover above both. */
#guide .checklist { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label chev" "prog prog"; align-items: center; column-gap: var(--s1); row-gap: 2px; width: 100%; margin-top: var(--s3); padding: var(--s2) var(--s2) var(--s2) var(--s3); border: 1px solid var(--dawn-500); border-radius: 6px; background: var(--dawn-500); color: #fff; text-align: left; cursor: pointer; }
#guide .checklist[hidden] { display: none; }
#guide .checklist:hover { background: var(--dawn-600); border-color: var(--dawn-600); }
#guide .checklist[aria-expanded="true"] { background: transparent; border-color: rgba(246,247,240,.35); }
#guide .checklist[aria-expanded="true"]:hover { background: rgba(246,247,240,.08); }
#guide .checklist:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#guide .checklist .ck-label { grid-area: label; min-width: 0; font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 14px; line-height: 20px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#guide .checklist .ck-prog { grid-area: prog; font-family: 'NeutrifPro Regular', sans-serif; font-size: 12px; line-height: 16px; color: #fff; }
#guide .checklist .ck-chev { grid-area: chev; width: 16px; height: 16px; fill: currentColor; transform: rotate(-90deg); transition: transform .15s ease; } /* up when closed: the panel opens upward (3 Nov 2026) */
#guide .checklist[aria-expanded="true"] .ck-chev { transform: rotate(90deg); }

/* The icon rail (under 1100 px, and body.rail-collapsed at any width: nav.side is 58 px): the card is the ring with the initial.
   The launcher keeps its semantics and becomes the ring's round hit area, laid over it; the head's title is the hover label. */
@container rail (max-width: 120px) {
  .guide-card { margin: var(--s2) var(--s1); padding: var(--s2) 0; }
  .guide-card .gc-head { justify-content: center; }
  .guide-card .gc-who, .guide-card .gc-status, #guide .checklist .ck-label, #guide .checklist .ck-prog, #guide .checklist .ck-chev { display: none; }
  #guide .checklist { position: absolute; left: 50%; top: var(--s2); display: block; width: 40px; height: 40px; margin: 0 0 0 -20px; padding: 0; border: none; border-radius: 50%; background: transparent; }
  #guide .checklist[hidden] { display: none; }
  /* v5.16: the open-and-hover selector too (1,3,0), so the top-level open-and-hover rule (.08) does not outrank the rail's .12. */
  #guide .checklist:hover, #guide .checklist[aria-expanded="true"], #guide .checklist[aria-expanded="true"]:hover { background: rgba(246,247,240,.12); }
}

/* ---------- v5.0 (3 Nov 2026, spec v5.0-four-stops.md sections 4.3 and 4.7): the checklist ----------
   It replaces the v4.10 tour menu, whose rules it starts from. v5.2: the launcher (button#checklist) is the guide card's (above);
   the panel (#checklist-panel, role dialog, a child of body) opens upward from the card on the callout's dark surface (app.js
   placeChecklist sets left, bottom and max-height; in the icon rail it is a flyout beside the rail) and rises (ckrise): the title
   and the progress, the hint, the first-time note, four rows (number or tick, title, why, state), then Replay from the start and
   Close. v5.3 (spec v5.3-doors-column.md section 1): at four of four the panel grows a second column (.ck-next: the all-done
   note as its heading, the Start free and Get in touch cards, the reassurance) and widens to 640 px; the footer spans both.
   Never in the report viewer; hidden under 768 px with the launcher. Icons are the MUI Outlined paths app.js draws; no emoji. */
.checklist-panel { position: fixed; z-index: 73; width: 360px; max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); overflow-y: auto; padding: var(--s2); background: var(--earth-500); color: var(--solar-500); border-radius: 8px; box-shadow: 0 20px 50px rgba(0,28,39,.45); text-align: left; white-space: normal; }
.checklist-panel[hidden] { display: none; }
.checklist-panel.show { animation: ckrise .22s ease both; }
@keyframes ckrise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.checklist-panel .ck-head { padding: var(--s2) var(--s3) var(--s3); }
.checklist-panel .ck-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); }
.checklist-panel .ck-heading { color: #fff; font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 15px; line-height: 20px; }
.checklist-panel .ck-count { flex: none; color: var(--dawn-100); font-size: 12px; line-height: 16px; }
.checklist-panel .ck-hint { margin-top: 2px; color: var(--solar-500); opacity: .8; font-size: 12px; line-height: 16px; }
.checklist-panel .ck-note { margin: 0 var(--s3) var(--s2); padding: var(--s2) var(--s3); border-radius: 6px; background: rgba(246,247,240,.08); } /* v5.17: the panel's neutral tint (was the dawn tint): a status note, not an action; the lit row is the panel's only dawn */
.checklist-panel .ck-note-t { color: #fff; font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 14px; line-height: 20px; }
.checklist-panel .ck-note-b { margin-top: 2px; color: var(--solar-500); font-size: 12px; line-height: 16px; }
.checklist-panel .ck-rows { display: flex; flex-direction: column; gap: 2px; }
.checklist-panel .ck-row { display: flex; align-items: flex-start; gap: var(--s3); width: 100%; padding: var(--s2) var(--s3); border: none; border-radius: 6px; background: transparent; color: var(--solar-500); font-family: 'NeutrifPro Regular', sans-serif; font-size: 14px; line-height: 20px; text-align: left; cursor: pointer; }
.checklist-panel .ck-row:hover { background: rgba(246,247,240,.08); }
.checklist-panel .ck-row:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.checklist-panel .ck-row.is-current { background: rgba(255,79,1,.14); }
.checklist-panel .ck-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-top: -2px; border-radius: 12px; border: 1px solid rgba(246,247,240,.35); color: #fff; font-size: 12px; line-height: 16px; }
.checklist-panel .ck-row.is-seen .ck-n { border-color: var(--fn-success); } /* v5.17: the success green ring (NDS functional success, walk.css --fn-success), transparent inside; was a dawn fill. Green means complete (design rule 06); dawn is the action colour */
.checklist-panel .ck-row.is-current .ck-n { border-color: var(--dawn-500); }
.checklist-panel .ck-n .ck-tick { width: 16px; height: 16px; fill: var(--fn-success); } /* v5.17: the green tick (was white on a dawn fill) */
.checklist-panel .ck-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.checklist-panel .ck-title { color: #fff; }
.checklist-panel .ck-why { color: var(--solar-500); opacity: .75; font-size: 12px; line-height: 16px; }
.checklist-panel .ck-state { flex: none; margin-top: 2px; color: var(--solar-500); opacity: .7; font-size: 12px; line-height: 16px; white-space: nowrap; }
.checklist-panel .ck-row.is-seen .ck-state { color: var(--green-700); opacity: 1; } /* v5.17: Done in the text-grade success token (design rule 17; about 7:1 on earth-500); was dawn-100 */
.checklist-panel .ck-row.is-current .ck-state { color: #fff; opacity: 1; }
.checklist-panel .ck-door { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 1px solid rgba(246,247,240,.35); border-radius: 17px; background: transparent; color: var(--solar-500); font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 14px; line-height: 20px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.checklist-panel .ck-door:hover { background: rgba(246,247,240,.08); color: #fff; }
.checklist-panel .ck-door.primary { border-color: var(--dawn-500); background: var(--dawn-500); color: #fff; }
.checklist-panel .ck-door.primary:hover { background: #E64801; }
.checklist-panel .ck-door svg { width: 14px; height: 14px; fill: currentColor; }
.checklist-panel .ck-door:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* v5.3 (spec section 1.2): the doors column. One column (360 px) until four of four; then two, the column 272 px wide. */
#checklist-panel[data-cols="2"] { width: 640px; }
.checklist-panel .ck-cols[data-cols="1"] { display: block; }
.checklist-panel .ck-cols[data-cols="2"] { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: var(--s2); align-items: start; }
.checklist-panel .ck-next { border-left: 1px solid rgba(246,247,240,.16); padding-left: var(--s2); min-width: 0; }
.checklist-panel .ck-next .ck-note.ck-done { margin: 0; padding: var(--s2) var(--s3) var(--s3); background: transparent; border-radius: 0; }
.checklist-panel .ck-next .ck-note-t { font-size: 15px; line-height: 20px; } /* the type of .ck-heading: one baseline with "Four outcomes" */
.checklist-panel .ck-cards { display: flex; flex-direction: column; gap: var(--s2); margin: 0 var(--s3); }
.checklist-panel .ck-card { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); border: 1px solid rgba(246,247,240,.16); border-radius: 6px; background: rgba(246,247,240,.04); }
.checklist-panel .ck-card-t { color: #fff; font-family: 'NeutrifPro SemiBold', sans-serif; font-size: 14px; line-height: 20px; }
.checklist-panel .ck-card-b { color: var(--solar-500); opacity: .8; font-size: 12px; line-height: 16px; }
.checklist-panel .ck-offer { color: var(--dawn-100); }
.checklist-panel .ck-card .ck-door { align-self: flex-start; margin-top: var(--s1); }
.checklist-panel .ck-reassure { margin: var(--s2) var(--s3) 0; color: var(--solar-500); opacity: .7; font-size: 12px; line-height: 16px; }
@media (max-width: 719px) { /* safety only: the panel never opens under 768 px */
  #checklist-panel[data-cols="2"] { width: 360px; }
  .checklist-panel .ck-cols[data-cols="2"] { grid-template-columns: 1fr; }
  .checklist-panel .ck-next { border-left: none; border-top: 1px solid rgba(246,247,240,.16); padding-left: 0; padding-top: var(--s2); }
}
.checklist-panel .ck-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s2); padding: var(--s3) var(--s3) var(--s1); border-top: 1px solid rgba(246,247,240,.16); }
.checklist-panel .ck-replay, .checklist-panel .ck-close { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 4px; border: none; background: transparent; color: var(--solar-500); font-family: 'NeutrifPro Regular', sans-serif; font-size: 13px; line-height: 16px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.checklist-panel .ck-replay:hover, .checklist-panel .ck-close:hover { color: #fff; }
.checklist-panel .ck-replay:focus-visible, .checklist-panel .ck-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.checklist-panel .ck-replay .ck-ic { width: 16px; height: 16px; fill: currentColor; }
body.viewer .checklist-panel, body.viewer #guide .checklist { display: none !important; }
@media (max-width: 767px) { #guide .checklist, .checklist-panel { display: none !important; } /* phones: the initial only, no launcher, no panel */ }
@media (prefers-reduced-motion: reduce) { .checklist-panel.show { animation: none; } #guide .checklist .ck-chev { transition: none; } }

/* ---------- v5.14 (spec v5.14-next-action-and-reprompt.md section 2; the review of 4 Nov 2026) and v5.17 (spec v5.17-lit-next-row-green-ticks.md
   section 1, decided 5 Nov 2026) ----------
   v5.14 drew the panel's primary action as a button (button#checklist-go, .ck-go) between the head and the rows; v5.17 retired it. The
   primary action is now the row of the next outcome (app.js ckGo: the first stop in order 1 to 4 not done), class is-next on .ck-row:
   the dawn ring (an inset shadow, so the row keeps its size), the dawn tint the playing row's rule uses, the number's dawn ring, the
   state word "Next" in white (--solar-50, the NDS white token) and a dawn forward arrow (.ck-arrow) after it; a deeper tint on hover
   and keyboard focus (focus-visible), the rows' white focus ring unchanged. At four of four no row is lit. Tokens only, never a literal.
   The re-prompt's pulse (v5.14, unchanged): the launcher rings three times (0 to 12 px, dawn-500 at 35 percent fading out, 0.6 s
   each, 1.8 s in all) while app.js holds .ck-pulse on it; nothing under reduced motion. */
.checklist-panel .ck-row.is-next { box-shadow: inset 0 0 0 1px var(--dawn-500); background: color-mix(in srgb, var(--dawn-500) 14%, transparent); }
.checklist-panel .ck-row.is-next:hover, .checklist-panel .ck-row.is-next:focus-visible { background: color-mix(in srgb, var(--dawn-500) 24%, transparent); } /* focus-visible, not focus: every open focuses the lit row, so plain :focus would hide the rest tint and the hover change from mouse visitors (the refuter of 5 Nov 2026) */
.checklist-panel .ck-row.is-next .ck-n { border-color: var(--dawn-500); }
.checklist-panel .ck-row.is-next .ck-state { display: inline-flex; align-items: center; gap: var(--s1); color: var(--solar-50); opacity: 1; }
.checklist-panel .ck-row.is-next .ck-arrow { width: 14px; height: 14px; fill: var(--dawn-500); }
/* v5.17 (decided 5 Nov 2026: "can the highlighting have some kind of animation?"): when the panel opens (.show, set on each open, not under
   reduced motion) the lit row pulses as the launcher does on the re-prompt: a dawn ring spreading 0 to 8 px (dawn-500 at 35 percent
   fading out) three times, 0.6 s each, after the panel's 0.22 s rise; then still. One language: the pulse means "this one". The ring
   keeps the inset 1px dawn ring in the same box-shadow. Never a loop: a standing glow would fight the page's spotlight. */
@keyframes cknextpulse { from { box-shadow: inset 0 0 0 1px var(--dawn-500), 0 0 0 0 color-mix(in srgb, var(--dawn-500) 35%, transparent); } to { box-shadow: inset 0 0 0 1px var(--dawn-500), 0 0 0 8px color-mix(in srgb, var(--dawn-500) 0%, transparent); } }
.checklist-panel.show .ck-row.is-next { animation: cknextpulse .6s ease-out .25s 3; }
@keyframes ckpulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dawn-500) 35%, transparent); } to { box-shadow: 0 0 0 12px color-mix(in srgb, var(--dawn-500) 0%, transparent); } }
#guide .checklist.ck-pulse { animation: ckpulse .6s ease-out 3; }
/* v5.29 (5 Nov 2026, F28): the card's Next pulses three times when a settled screen has had no press for 4.5 s (app.js nudgeNext sets the card's data-nudge). */
@keyframes tcnudge { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dawn-500) 45%, transparent); } to { box-shadow: 0 0 0 10px color-mix(in srgb, var(--dawn-500) 0%, transparent); } }
.tour-card[data-nudge="1"] .tb.next { animation: tcnudge .7s ease-out 3; }
@media (prefers-reduced-motion: reduce) { #guide .checklist.ck-pulse { animation: none; } .checklist-panel.show .ck-row.is-next { animation: none; } }

/* ---------- v5.0 (spec section 4.6): the confetti burst ----------
   One canvas over the window for 1.2 s (app.js confetti()), drawn in the Drova palette, then removed. It never takes a click and
   sits above the dialogs' scrim so the closing's burst shows as the dialog opens. app.js plays nothing under reduced motion; the
   rule below hides a canvas left over if the setting changes mid-burst. */
.wt-confetti { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; z-index: 95; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .wt-confetti { display: none !important; } }

/* v5.10 (the review of 4 Nov 2026): the explore sign-up nudge (bottom right) is retired with its rules. */
/* v5.2 fixer (refuter finding): the panel is a child of body, outside #wt-root, so it carries #wt-root's text defaults itself
   (walk.css): the walkthrough's type, size, line height and smoothing. */
.checklist-panel { font-family: 'NeutrifPro Regular', sans-serif; font-size: 16px; line-height: 20px; -webkit-font-smoothing: antialiased; }

/* ---------- Explore mode (body.explore): the product at full contrast, rows hover, controls look clickable ---------- */
body.explore .tour, body.explore .walk-hint { display: none !important; }
body.explore [data-spotlit] :is(a, button), body.explore :is(a, button)[data-spotlit] { opacity: 1; }
body.explore :is([data-read], [data-write], [data-scope]) { cursor: pointer; }
body.explore .shell { user-select: auto; }

@media (prefers-reduced-motion: reduce) {
  .explore-notice.show { animation: none; }
}

/* viewer */
/* v3 slice 2 (app.js): a view with fn.viewer (the Lens report viewer, #/report/<id>) puts body.viewer on; the rail and
   Sheila's pane step aside so the report takes the window. Esc or the top bar's back arrow returns to #/report. */
body.viewer nav.side, body.viewer #sheila { display: none !important; }

/* v5.40: the copy-review dot. A screen or stop intro flagged refining in copy.json carries it by its eyebrow or title: the copy there is still being refined. Red is the v1 error token; the pulse is off under reduced motion. */
.tc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ft-error); margin-left: 8px; vertical-align: middle; animation: tcdot 1.2s ease-in-out infinite; }
@keyframes tcdot { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 color-mix(in srgb, var(--ft-error) 45%, transparent); } 50% { opacity: .6; box-shadow: 0 0 0 5px color-mix(in srgb, var(--ft-error) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .tc-dot { animation: none; } }