/* First Builds (first run as Hands On, a Friday hackathon)
   Made by Sean Beaverson, so it wears his North Shore look: assets/brand/north-shore.css loads first with the palette,
   the type (Montserrat for headings and anything you press, Newsreader for reading), the spacing scale, and the motion
   tokens. This file names the site's roles in those tokens, so a color here is a role, not a hex value. inquiredu.org is
   where the site lives, not its look. MNGAIA · AI4MN appear as the partner: their mark, in its own colors,
   beside their name, with no label phrase. Never as the interface's palette.

   How this file is built (the design audit, docs/DESIGN-AUDIT.md, "The system pass"):
   1. Tokens: roles, surfaces, spacing, motion, and Night.
   2. Base and type: thirteen levels, each meaning one thing.
   3. Components, each with every state: links, buttons, cards, badges, chips, disclosures, inputs, copy wells, notes.
   4. Overlays: the toast, the next-step sheet, dialogs.
   5. The frame: header and menu, now bar, footer.
   6. Each page's layout, built from the components. */


/* ======================================================================================================
   1. Tokens
   ====================================================================================================== */

:root {
  /* What North Shore leaves unnamed, from its own scales */
  --control-bg: var(--cream-50);
  --action-ghost-hover: var(--cream-200);
  --action-press: var(--cream-300);
  --action-accent: var(--sun-400);       /* a warm fill under navy-900 text (7.8:1) */
  --action-accent-hover: var(--sun-200);
  --tracking-badge: var(--tracking-label);

  --bg: var(--surface-page);
  --surface: var(--surface-raised);       /* cards */
  --overlay: var(--surface-raised);       /* the toast, the next-step sheet, dialogs: one step above what's under them */
  --overlay-line: var(--border-hairline);
  --tint: var(--surface-water-soft);      /* notes: summaries, routing, reference. Never a button, never a chip */
  --band: var(--surface-sunken);          /* a full-width section that sets itself off from the page */
  --feature: var(--navy-700);             /* the Happening now card */
  --feature-ink: var(--cream-100);
  --ink: var(--fg-1);                     /* anything a visitor must read */
  --muted: var(--fg-2);                   /* meta, section intros, hints, never instructions */
  --line: var(--border-hairline);
  --link: var(--fg-link);
  --link-line: var(--navy-300);           /* a link's underline at rest; copper on hover and focus (North Shore's rule) */
  --button: var(--navy-700);
  --button-hover: var(--navy-800);
  --button-press: var(--navy-900);
  --button-ink: var(--cream-100);
  --accent: var(--sun-600);               /* copper as a rule, a fill, or an underline, never as body text */
  --accent-ink: var(--sun-800);           /* copper text that passes 4.5:1 */
  --warm: var(--sun-400);                 /* the NOW tag and the notice, always with navy-900 text */
  --warm-ink: var(--navy-900);
  --focus: var(--sun-700);                /* one step darker than North Shore's sun-600 ring, which is 2.9:1 on cream; this is 4:1 */
  --control: var(--navy-400);             /* borders of things you press or type in: 3.6:1 on cream-50 */
  --placeholder: var(--navy-500);         /* 5.6:1 on cream-50; the browser's own grey was 4.3:1 */
  --invalid: var(--sun-800);

  /* The frame: the header, the now bar, and the footer stay navy-900 in both themes */
  --bar-bg: var(--navy-900);
  --bar-ink: var(--cream-100);
  --bar-ink-2: var(--navy-200);
  --bar-line: var(--navy-700);
  --bar-focus: var(--sun-500);

  /* Each starter keeps a color of its own, shown only in its icon tile */
  --oracle: var(--sun-700);
  --charter: var(--navy-600);
  --syllabus: var(--water-800);
  --script: var(--sun-800);
  --timer: var(--water-700);
  --groups: var(--rust-700);
  --feedback: var(--pine-700);
  --calendar: var(--navy-500);

  /* One scale for every page */
  --radius: var(--radius-md);             /* cards, notes, panels: 8px */
  --radius-sm: 4px;                       /* buttons, inputs, copy wells */
  --radius-dialog: var(--radius-lg);      /* dialogs and sheets: 14px */
  --card-pad: 20px;
  --gap: 16px;                            /* between cards in a grid */
  --block: 32px;                          /* between blocks inside a section */
  --section: 56px;                        /* above and below a section */
  --measure: 68ch;                        /* reading text */

  /* The type scale. Each size means one thing, and none is smaller than its floor: reading text 16px, small capitals
     13px, code 14px. In rem, so the large-screen step below moves every size at once. Headings that change with the
     screen (h1, h2, the hero) are clamp()s in rem, written where they're used. */
  --fs-label: .8125rem;      /* 13px · Montserrat 600, capitals, tracked: section labels, eyebrows, tags */
  --fs-ui-sm: .875rem;       /* 14px · Montserrat: meta lines, counts, chips, small buttons, statuses */
  --fs-ui: .9375rem;         /* 15px · Montserrat: buttons, the menu, links that act */
  --fs-ui-lg: 1.0625rem;     /* 17px · Montserrat: a lead-in: a step's title, a strong first line */
  --fs-read-2: 1rem;         /* 16px · Newsreader: secondary reading: notes, panels, tips, captions */
  --fs-body: 1.0625rem;      /* 17px · Newsreader: reading */
  --fs-lead-sm: 1.125rem;    /* 18px · Newsreader: a section's or a level's opening line */
  --fs-lead: 1.25rem;        /* 20px · Newsreader: the Happening now hint */
  --fs-title: 1.125rem;      /* 18px · Montserrat 600: a card's title, a fold's summary, h4 */
  --fs-h3: 1.25rem;          /* 20px · Montserrat 600: h3 */
  --fs-h2-card: 1.5rem;      /* 24px · Montserrat 600: a heading inside a card */
  --fs-code: .875rem;        /* 14px · Plex Mono: code in a panel; code in a sentence is .88em of the sentence */

  /* Motion: quiet, 120-360ms, eased out; leaving is faster than arriving; outlines never animate */
  --dur-1: var(--dur-fast);               /* 120ms: color, fill, border */
  --dur-2: var(--dur-base);               /* 200ms: small things appearing */
  --dur-3: 280ms;                         /* sheets and dialogs arriving */
  --dur-exit: 160ms;
  --dur-press: 80ms;
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --lift: translateY(-2px);
  --press: translateY(1px);
  --shadow-lift: 0 6px 18px rgba(20, 36, 52, .10);
}
@media (min-width: 768px) {
  :root { --card-pad: 24px; --section: 72px; }
}
/* A large screen: every size one step up (about 6%), and the page's column with it, so a 1920-wide monitor doesn't
   leave 17px text in a field of navy. Sizes in rem move together; the 44px floor on anything you press stays. */
@media (min-width: 1440px) {
  html { font-size: 106.25%; }
}

/* Night: <html data-theme="dark">, the default, set by assets/theme.js until the visitor chooses Light (the header's
   sun and moon). North Shore defines no dark theme, so this one is drawn from its own
   scales, with no new colors: navy pages, cream text, copper for the warm notes. */
[data-theme="dark"] {
  --surface-page: var(--navy-800);
  --surface-raised: var(--navy-700);
  --surface-sunken: var(--navy-900);
  --surface-inverse: var(--cream-100);
  --surface-water-soft: var(--navy-600);
  --fg-1: var(--cream-100);
  --fg-2: var(--navy-200);
  --fg-3: var(--navy-300);
  --fg-on-inverse: var(--navy-700);
  --fg-on-inverse-2: var(--navy-500);
  --fg-accent: var(--sun-400);
  --fg-link: var(--cream-100);
  --fg-link-hover: var(--sun-400);
  --border-hairline: var(--navy-600);
  --border-strong: var(--cream-100);
  --border-focus: var(--sun-500);
  --status-success: var(--pine-100); --status-success-bg: var(--navy-600);
  --status-warning: var(--sun-400);  --status-warning-bg: color-mix(in srgb, var(--sun-500) 16%, var(--navy-800));   /* a caution keeps its warmth in Night */
  --status-danger: var(--rust-100);  --status-danger-bg: var(--navy-600);
  --status-info: var(--water-400);   --status-info-bg: var(--navy-600);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 2px 6px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.3);
  --shadow-3: 0 12px 40px rgba(0,0,0,.5);
  --shadow-lift: 0 6px 18px rgba(0,0,0,.35);
  --scrim: rgba(20,36,52,.72);
  color-scheme: dark;

  --control-bg: var(--navy-900);
  --action-ghost-hover: var(--navy-600);
  --action-press: var(--navy-500);
  --overlay: var(--navy-600);            /* a step above the card, with a hairline, so it lifts off the page */
  --overlay-line: rgba(244, 241, 235, .2);
  --feature: var(--navy-900);            /* the Happening card stays dark in Night, with a copper rule */
  --link-line: var(--navy-400);
  --button: var(--cream-100);
  --button-hover: var(--cream-200);
  --button-press: var(--cream-300);
  --button-ink: var(--navy-900);
  --accent: var(--sun-500);
  --accent-ink: var(--sun-400);
  --focus: var(--sun-500);
  --control: var(--navy-300);
  --placeholder: var(--navy-300);        /* 6.9:1 on navy-900; the browser's grey was 3.4:1 */
  --invalid: var(--sun-400);
  --oracle: var(--sun-400);
  --charter: var(--navy-200);
  --syllabus: var(--water-200);
  --script: var(--sun-500);
  --timer: var(--water-400);
  --groups: var(--rust-100);
  --feedback: var(--pine-100);
  --calendar: var(--navy-300);
}
/* Night's notes and cautions sit on navy-600, where sun-400 is 4.4:1; a link hovered there steps up to sun-200 (6.6:1) */
[data-theme="dark"] :is(.note-box, .level-note, .stuck, .pick, .synthesis, .next, .caution, .audience, .message, .src-says, .builder-out, .monday, .learn) {
  --fg-link-hover: var(--sun-200);
}
/* While the theme switches, one frame without transitions, so every color changes together (assets/theme.js) */
.theme-switching *, .theme-switching *::before, .theme-switching *::after { transition: none !important; }


/* ======================================================================================================
   2. Base and type
   ====================================================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/var(--leading-body) var(--font-serif);   /* Newsreader for reading; Montserrat for headings and anything you press */
}
.wrap { max-width: 67.5rem; margin: 0 auto; padding: 0 16px; }   /* 1080px, and wider on a large screen */
[hidden]:not([hidden="until-found"]) { display: none !important; }   /* until-found: hidden, but find-in-page still looks inside (Three levels) */
img { max-width: 100%; }

/* The type scale. Each level means one thing:
   display (Home's name) · h1 page title · h2 section · h3 block · card title · label (a section inside a card)
   eyebrow (the page's and the partner's label only) · lede · body · small · ui · ui-small · stat · mono */
h1, h2, h3, h4, h5 { line-height: 1.2; margin: 0; font-family: var(--font-sans); font-weight: 600; letter-spacing: var(--tracking-heading); text-wrap: balance; }
h2 { font-size: clamp(1.5rem, 3.4vw, 1.875rem); }
h3 { font-size: var(--fs-h3); }
h4, h5 { font-size: var(--fs-title); }
.page-title { font-size: clamp(2rem, 5vw, 2.5rem); line-height: 1.1; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; }   /* the semibold both faces load; Newsreader has no 700 here, so the browser drew 600 anyway */
main p { max-width: var(--measure); }

.eyebrow, .kicker-dark, .label {
  margin: 0; font: 600 var(--fs-label)/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.kicker-dark { margin-bottom: 8px; }

/* A section inside a card: what happens, try it, before you start, hosts, ready to paste */
.level h3, .script-steps h4, .remix h5, .segment h4, .next h3, .src-group, .finder .ask-group > legend, .message .to, .nowcard-label {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); line-height: 1.3;
}
.nowcard-label { color: inherit; }

/* The page's lede: what this page is, in at most three lines, in the color you must read */
.page-title + .section-lede { color: var(--ink); font: var(--type-lead); font-size: clamp(1.125rem, 2.2vw, 1.25rem); }
.section-lede { margin: 12px 0 0; font-size: var(--fs-lead-sm); color: var(--muted); }
.hint { margin: 8px 0 16px; color: var(--muted); }
.small { font-size: var(--fs-read-2); color: var(--muted); }

/* Everything you press, scan, or count is Montserrat, the interface face; reading text stays Newsreader */
button, .button, input, select, textarea, summary, kbd, .site-nav, .nowbar, .cue, .toast, .num, .length, .tag, .type, .tag-chip,
.facet-count, .count, .path-count, .go, .soon-tag, .where, .calc-out, .finder-label, .finder legend, .builder label, .builder-label,
.timeline strong, .steps strong, .awards strong, .also-card strong, .path-card strong, .shape strong, .glance strong, .card-title,
.choice label, .action-link, .menu-toggle,
.recap-sessions, .recap-tabs, .recap-glance strong, .at, .qa-who, .qa-group, .qa-tag, .threads, .res-name, .res-meta {
  font-family: var(--font-sans);
}

/* Code, addresses, and names to type: Plex Mono chips that don't break mid-token */
code { font: .88em var(--font-mono); background: var(--tint); padding: 1px 5px; border-radius: var(--radius-xs); white-space: nowrap; }
kbd {
  font-size: .85em; font-weight: 600; padding: 1px 6px; border: 1px solid var(--control); border-bottom-width: 2px;
  border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); white-space: nowrap;
}
.keys { white-space: nowrap; }   /* a whole shortcut, keys and plus signs, on one line */
.nowrap { white-space: nowrap; }   /* a meta item, a date with its "as of", kept whole */

/* Focus: the brand's ring drawn as an outline, so it survives Windows high-contrast mode. It never animates. */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; box-shadow: none; }
.nowbar :focus-visible, .footer :focus-visible, .site-head :focus-visible, .nowcard :focus-visible { outline-color: var(--bar-focus); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
::placeholder { color: var(--placeholder); opacity: 1; }

/* Text with {braces} waits until assets/timing.js fills in the times */
[data-fill]:not(.filled) { visibility: hidden; }

/* Keep focused items and anchor jumps clear of the sticky bar */
html { scroll-padding-top: 88px; }
@media (max-width: 760px) { html { scroll-padding-top: 108px; } }
html:has(body[data-mode="after"]) { scroll-padding-top: 24px; }   /* after the session there's no sticky bar to clear */
@media (max-height: 500px) {
  html { scroll-padding-top: 24px; }
  .nowbar { position: static; }
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 80;
  background: var(--button); color: var(--button-ink);
  padding: 10px 16px; border-radius: var(--radius-sm); font-weight: 600; font-family: var(--font-sans);
}
.skip:focus { top: 12px; }
.skip:hover { color: var(--button-ink); }


/* ======================================================================================================
   3. Components
   ====================================================================================================== */

/* ---------- Links: navy with a quiet underline at rest; copper on hover and focus ---------- */
a {
  color: var(--link); text-decoration-color: var(--link-line); text-decoration-thickness: 1px; text-underline-offset: .25em;
  transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  a:hover { color: var(--fg-link-hover); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
}
a:focus-visible { text-decoration-color: var(--accent); }
/* An action link: "Label →", for the one place a card or a section sends you next */
.action-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-ui); font-weight: 600; text-decoration: none; }
.action-link::after { content: "→"; transition: transform var(--dur-1) var(--ease-out); }
@media (hover: hover) {
  .action-link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
  .action-link:hover::after { transform: translateX(2px); }
}
/* A link that leaves the site says so */
a.away::after, .button.away::after { content: "↗"; margin-left: .3em; font-size: .85em; text-decoration: none; display: inline-block; }

/* ---------- Buttons: one primary, one secondary, in two sizes ---------- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  font: inherit; font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 600; line-height: 1.2;
  padding: 10px 16px; border-radius: var(--radius-sm);
  border: 1.5px solid var(--control); background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  button:hover, .button:hover { border-color: var(--ink); background: var(--action-ghost-hover); color: var(--ink); }
}
button:active, .button:active { transform: var(--press); background: var(--action-press); transition-duration: var(--dur-press); }
.primary { background: var(--button); border-color: var(--button); color: var(--button-ink); }
@media (hover: hover) {
  .primary:hover { background: var(--button-hover); border-color: var(--button-hover); color: var(--button-ink); }
}
.primary:active { background: var(--button-press); border-color: var(--button-press); color: var(--button-ink); }
button:disabled, button[aria-disabled="true"], .button[aria-disabled="true"] {
  background: transparent; border-color: var(--line); color: var(--muted); cursor: not-allowed; transform: none;
}
.sm, .remix li button, .src-foot > button, .results-tools button, .message button {
  min-height: 32px; padding: 4px 12px; font-size: var(--fs-ui-sm);
}
/* A toggle: pressed means on */
/* Selected and pressed: the tint with an ink edge, never the solid fill, which belongs to the one primary action in a view.
   Tabs carry an ink bar under the selected one instead. The theme toggle shows its state by its icon. */
button[aria-pressed="true"]:not(.path-card):not(.tab):not(.theme-toggle) { background: var(--tint); border-color: var(--ink); color: var(--ink); }
/* Done: the button says it worked, for two seconds, without changing width */
button.is-done, .button.is-done { background: var(--tint); border-color: var(--ink); color: var(--ink); }
button.is-done::before { content: ""; width: 12px; height: 12px; background: currentColor; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }

/* ---------- Cards: static ones sit; link cards lift ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); }
.card p { margin: 8px 0 0; }
.card-link {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); padding: var(--card-pad);
  color: var(--ink); text-decoration: none;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .card-link:hover { transform: var(--lift); box-shadow: var(--shadow-lift); border-color: var(--control); color: var(--ink); }
}
.card-link:active { transform: none; box-shadow: none; }

/* ---------- Number badges: outlined, so they never look like a button ---------- */
.num {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1.5px solid var(--ink); color: var(--ink); background: transparent; font-weight: 700; font-size: var(--fs-ui-sm);
  font-variant-numeric: tabular-nums;
}

/* ---------- Tags (static) and chips (they filter) are pills ---------- */
.tag-chip {
  min-height: 32px; padding: 3px 12px; border-radius: var(--radius-pill); font-size: var(--fs-ui-sm); font-weight: 600;
  background: var(--surface); border: 1px solid var(--control); color: var(--ink);
}
.tag-chip.on { background: var(--button); border-color: var(--button); color: var(--button-ink); }
.soon-tag { display: inline-block; font-size: var(--fs-ui-sm); font-weight: 600; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius-pill); padding: 2px 10px; }

/* ---------- Disclosures: one look everywhere, a chevron that turns ---------- */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details > summary:not(.segment-head) {
  display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: 600; color: var(--ink);
  transition: color var(--dur-1) var(--ease-out);
}
details > summary:not(.segment-head)::before {
  content: ""; flex: none; width: 7px; height: 7px; margin: 0 2px 0 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--dur-2) var(--ease-out);
}
details[open] > summary:not(.segment-head)::before { transform: rotate(45deg); }
@media (hover: hover) {
  details > summary:not(.segment-head):hover { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: .25em; }
}
details[open] > :not(summary) { animation: fold-in var(--dur-2) var(--ease-out); }
@keyframes fold-in { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Inputs ---------- */
input[type="text"], input[type="search"], input[type="number"], input:not([type]), textarea {
  min-height: 44px; padding: 10px 12px; font: inherit; font-family: var(--font-sans); font-size: 1rem;
  border: 1.5px solid var(--control); border-radius: var(--radius-sm); background: var(--control-bg); color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  input[type="text"]:hover, input[type="search"]:hover, input[type="number"]:hover, input:not([type]):hover, textarea:hover { border-color: var(--ink); }
}
[aria-invalid="true"] { border-color: var(--invalid) !important; border-width: 2px !important; }
.field-error { margin: 4px 0 0; font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; color: var(--invalid); }

/* Checkboxes and radios: drawn here, because the browser's own turn grey on navy (3.3:1) and blue when checked */
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none; flex: none;
  display: inline-grid; place-content: center;
  width: 20px; height: 20px; margin: 0;
  border: 1.5px solid var(--control); border-radius: var(--radius-sm); background: var(--control-bg);
  cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]::before {
  content: ""; width: 11px; height: 11px; transform: scale(0); background: var(--button-ink);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transition: transform var(--dur-1) var(--ease-out);
}
input[type="radio"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; transform: scale(0); background: var(--button-ink); transition: transform var(--dur-1) var(--ease-out); }
input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--button); border-color: var(--button); }
input[type="checkbox"]:checked::before, input[type="radio"]:checked::before { transform: scale(1); }
@media (hover: hover) {
  input[type="checkbox"]:hover, input[type="radio"]:hover { border-color: var(--ink); }
}

/* ---------- Copy wells: text to copy, and only that, wears the dashed edge ---------- */
.copybox {
  display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: flex-start; justify-content: space-between;
  margin-top: 12px; padding: 12px 12px 12px 14px;
  background: var(--tint); border: 1px dashed var(--control); border-radius: var(--radius-sm);
}
.copybox > p { flex: 1 1 16rem; margin: 0; color: var(--ink); }
.copybox > button { flex: none; }
/* A folded copy well: its buttons first, then the words, opening to the box's full width */
.copybox.fold { display: grid; gap: 10px; }
.copy-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.copybox details { min-width: 0; }
.copybox summary { color: var(--link); }
.copybox details[open] summary { margin-bottom: 8px; }
.copybox pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font: var(--fs-code)/1.5 var(--font-mono); }
/* A script to read before running keeps its lines whole and its indentation: it scrolls sideways, never splits a name */
.copybox pre[data-script] { white-space: pre; overflow-wrap: normal; overflow-x: auto; max-height: 28rem; overflow-y: auto; padding-bottom: 4px; }
.copybox details > p { margin: 0; }
/* A copy well's first line: what it holds (Prompt, Script, Message) and where it goes, with an icon for each kind.
   A prompt is words for an AI chat; a script is code for the place that runs it. The two never look alike. */
.copy-kind {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; max-width: none;
  font-family: var(--font-sans); font-size: var(--fs-ui-sm); color: var(--muted);
}
.copy-kind > span:first-child { display: inline-flex; color: var(--ink); }
.copy-kind svg { width: 18px; height: 18px; }
.copy-kind strong { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.copybox > .copy-kind { flex: 1 0 100%; }
/* A prompt: the reading face, at reading size, in the dashed copy well */
.promptwell { display: grid; gap: 10px; padding: 12px 14px; background: var(--tint); border: 1px dashed var(--control); border-radius: var(--radius-sm); }
.prompt-text { margin: 0; font-size: var(--fs-body); color: var(--ink); }
/* A script: monospaced lines under a file's name, on the darkest surface, in the same dashed copy well */
.codewell { min-width: 0; background: var(--control-bg); border: 1px dashed var(--control); border-radius: var(--radius-sm); overflow: hidden; }
.codewell > .copy-kind { padding: 10px 14px 8px; }
.code-file { display: flex; justify-content: space-between; gap: 12px; margin: 0; max-width: none; padding: 6px 14px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font: var(--fs-code) var(--font-mono); color: var(--muted); }
.codewell pre { margin: 0; padding: 10px 14px; overflow-x: auto; white-space: pre; font: var(--fs-code)/1.55 var(--font-mono); color: var(--ink); tab-size: 2; }
.code-top { color: var(--muted) !important; }   /* the comments at the top: the script saying what it is */
/* The settings line, as a box to paste into: the one line you change, so nothing else needs touching */
.code-setting { display: grid; gap: 6px; padding: 12px 14px; background: var(--tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.code-setting label { font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; color: var(--ink); }
.setting-line { display: flex; align-items: center; gap: 2px; min-width: 0; }
.setting-line code { flex: none; padding: 0; background: none; font-size: var(--fs-code); }
.setting-line input { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 6px 10px; font: var(--fs-code) var(--font-mono); }
@media (max-width: 600px) { .setting-line { flex-wrap: wrap; row-gap: 6px; } .setting-line input { flex-basis: 100%; order: 2; } .setting-line code:last-child { order: 3; } }
.setting-status { margin: 0; font-family: var(--font-sans); font-size: var(--fs-ui-sm); color: var(--muted); }
.setting-status.is-found { color: var(--ink); font-weight: 600; }
.setting-status.is-found::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 6px; background: currentColor; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.code-rest > summary { min-height: 40px; padding: 0 14px; font-size: var(--fs-ui-sm); color: var(--link); }
.code-rest[open] > summary { border-bottom: 1px solid var(--line); }

/* ---------- A script kit (site.js draws it): get the script, paste it, run it, open what it made ---------- */
.kit-fold { margin-top: 16px; }
.kit-fold > summary {
  flex-wrap: wrap; gap: 4px 10px; padding: 8px 14px 8px 10px; border: 1.5px solid var(--control); border-radius: var(--radius-sm); background: var(--surface);
}
@media (hover: hover) { .kit-fold > summary:hover { border-color: var(--ink); background: var(--action-ghost-hover); text-decoration: none; } }
.kit-fold[open] > summary { border-color: var(--ink); }
.kit-open { font-weight: 600; }
.kit-fold > summary .count { font-weight: 500; font-size: var(--fs-ui-sm); color: var(--muted); }
.kit-before { margin-top: 20px; }
.script-kit h4 { margin: 0; font-family: var(--font-sans); }
.kit-before h4 { font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.kit-before ul { margin: 6px 0 0; padding-left: 1.4rem; }
.kit-before li { margin: 6px 0; max-width: var(--measure); }
/* The steps: a numbered rail, each step a title and what to do */
.stages { list-style: none; counter-reset: stage; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.stage { counter-increment: stage; position: relative; min-width: 0; padding: 16px 0 18px 46px; border-top: 1px solid var(--line); }
.way { min-width: 0; }   /* a long line of code scrolls inside its well; it never widens the page */
@media (max-width: 600px) {
  .stage { padding-left: 0; }
  .stage::before { position: static; float: left; margin: 0 10px 0 0; }
  .stage-title { display: flex; align-items: center; min-height: 30px; overflow: hidden; }
  .stage > :not(.stage-title) { clear: left; }
}
.stage::before {
  content: counter(stage); position: absolute; left: 0; top: 14px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--ink);
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-ui-sm);
}
.stage-title { font-size: var(--fs-ui-lg); font-weight: 600; line-height: 1.3; letter-spacing: 0; text-transform: none; }
.stage > p { margin: 8px 0 0; max-width: var(--measure); }
.stage > p.small { font-size: var(--fs-read-2); }
.run-list { margin: 8px 0 0; padding-left: 1.2rem; }
.run-list > li { margin: 6px 0; max-width: var(--measure); }
.stage .copy-actions { margin-top: 12px; }
.stage .copy-note { margin-top: 8px; max-width: var(--measure); }
.kit-explain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.kit-explain .copy-note { flex: 1 1 18rem; margin: 0; }
/* Where the script comes from: ours, or your AI's. One or the other, so they're tabs, never a pair to copy in turn */
.ways { display: inline-flex; flex-wrap: wrap; max-width: 100%; margin: 12px 0 12px; border: 1.5px solid var(--control); border-radius: var(--radius-sm); overflow: hidden; }
.ways button { gap: 8px; min-height: 42px; border: 0; border-radius: 0; border-right: 1px solid var(--line); background: var(--surface); }
.ways button:last-child { border-right: 0; }
.ways button[aria-selected="true"] { background: var(--tint); color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.way-note { font-weight: 500; font-size: var(--fs-ui-sm); color: var(--muted); }
@media (max-width: 600px) { .ways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; } .way-note { display: block; } .ways button { flex-direction: column; gap: 0; } }
.kit-breaks { margin-top: 4px; border-top: 1px solid var(--line); }
.kit-breaks ul { margin: 0 0 12px; padding-left: 1.4rem; }
.kit-breaks li { margin: 8px 0; max-width: var(--measure); }
.script-kit code { white-space: normal; overflow-wrap: anywhere; }
.script-kit .setting-line code, .script-kit pre code { white-space: pre; overflow-wrap: normal; }

/* ---------- Notes and the one caution ---------- */
.note-box, .level-note, .stuck, .pick, .synthesis, .next {
  margin-top: var(--block); padding: var(--card-pad); background: var(--tint); border-radius: var(--radius);
}
.caution {
  margin-top: 20px; padding: 16px 20px; background: var(--status-warning-bg);
  border-left: 4px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0;
}
.caution h3 { margin: 0; color: var(--ink); }
.caution ul { margin: 8px 0 0; padding-left: 20px; }
.caution li { margin: 6px 0; }

/* ---------- Lists that are steps ---------- */
.checks { margin: 16px 0 0; padding-left: 22px; display: grid; gap: 10px; max-width: var(--measure); }
.checks > li { max-width: var(--measure); }
.pending { color: var(--ink); }   /* where a link will come from is an instruction, set like one */
.link-slot:empty { display: none; }


/* ======================================================================================================
   4. Overlays: they lift off the page, never cover what you just pressed, and arrive and leave quietly
   ====================================================================================================== */

/* ---------- The toast: a page-level confirmation, at most two lines ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 60;
  transform: translateX(-50%) translateY(8px);
  width: max-content; max-width: min(420px, calc(100vw - 32px)); margin: 0;
  background: var(--overlay); color: var(--ink); border: 1px solid var(--overlay-line); box-shadow: var(--shadow-3);
  padding: 10px 16px; border-radius: var(--radius); font-weight: 500; font-size: var(--fs-ui); text-align: center;
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in);
}
.toast.show { opacity: 1; transform: translateX(-50%); pointer-events: auto; transition-duration: var(--dur-2); transition-timing-function: var(--ease-out); }

/* ---------- The next step after copying for an AI: a sheet docked at the foot of the window ---------- */
.next-step {
  position: fixed; left: 50%; bottom: 0; z-index: 70;
  width: min(760px, 100%);
  background: var(--overlay); color: var(--ink);
  border: 1px solid var(--overlay-line); border-bottom: 0; border-radius: var(--radius-dialog) var(--radius-dialog) 0 0;
  box-shadow: var(--shadow-3);
  max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(-50%);
  animation: sheet-in var(--dur-3) var(--ease-out);
}
.next-step.leaving { animation: sheet-out var(--dur-exit) var(--ease-in) forwards; }
@keyframes sheet-in { from { opacity: 0; transform: translateX(-50%) translateY(24px); } }
@keyframes sheet-out { to { opacity: 0; transform: translateX(-50%) translateY(16px); } }
.next-step-inner { padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 12px; }
.next-step-status { margin: 0; font: 600 var(--fs-label)/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.next-step-status::before { content: ""; width: 12px; height: 12px; background: var(--ink); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
.next-step-lead { margin: 0; font-size: var(--fs-lead-sm); color: var(--ink); }
.next-step-lead:focus { outline: none; }
.next-step-tools { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); align-items: start; }
.next-step-tool { display: grid; gap: 6px; }
.next-step-tool .button { width: 100%; }
.next-step-tool span { font-size: var(--fs-read-2); color: var(--muted); }
.next-step-close { justify-self: end; }
@media (min-width: 768px) {
  .next-step { bottom: 16px; border-bottom: 1px solid var(--overlay-line); border-radius: var(--radius-dialog); }
}

/* ---------- Dialogs: the Play window and the copy-by-hand box ---------- */
dialog {
  width: min(1180px, calc(100vw - 32px)); height: min(820px, calc(100dvh - 32px)); max-height: calc(100dvh - 32px);
  padding: 0; border: 1px solid var(--overlay-line); border-radius: var(--radius-dialog); box-shadow: var(--shadow-3);
  background: var(--surface); color: var(--ink);
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-exit) var(--ease-in), transform var(--dur-exit) var(--ease-in),
    overlay var(--dur-exit) allow-discrete, display var(--dur-exit) allow-discrete;
}
dialog[open] { opacity: 1; transform: none; transition-duration: 240ms; transition-timing-function: var(--ease-out); }
@starting-style { dialog[open] { opacity: 0; transform: translateY(8px); } }
dialog::backdrop { background: rgba(20, 36, 52, 0); transition: background-color var(--dur-2) var(--ease-out), overlay var(--dur-2) allow-discrete, display var(--dur-2) allow-discrete; }
dialog[open]::backdrop { background: var(--scrim); }
@starting-style { dialog[open]::backdrop { background: rgba(20, 36, 52, 0); } }

#fallback { height: fit-content; width: min(640px, calc(100vw - 32px)); }   /* a modal dialog pinned to both edges stretches at height: auto */
.fallback-inner { padding: 20px; display: grid; gap: 12px; }
.fallback-inner p { margin: 0; }
.fallback-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#fallback textarea { width: 100%; height: auto; min-height: 0; font: var(--fs-code)/1.5 var(--font-mono); resize: vertical; }

/* The Play window: the starter in a frame, the code beside it on a laptop, Tool and Code tabs on a phone */
.room { display: flex; flex-direction: column; height: 100%; }
.room-head {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid var(--line);
}
.room-title { margin: 0; min-width: 0; font: 600 var(--fs-label)/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.room-title strong { display: block; margin-top: 2px; font-size: var(--fs-ui-lg); letter-spacing: var(--tracking-heading); text-transform: none; color: var(--ink); }
.room-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (min-width: 761px) { #room-close { margin-left: 12px; } }   /* about the window, set apart from what acts on the tool */
#toggle-code[aria-expanded="true"] { background: var(--tint); border-color: var(--ink); }   /* on, not a second primary */
#toggle-code { min-width: 10.5em; }
.room-tabs { display: none; }
.room-body { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.room-body.with-code { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.room-frame { position: relative; min-height: 0; background: var(--surface); }
.room-frame::before {
  content: attr(data-starting); position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-sans); font-size: var(--fs-ui-sm); color: var(--muted);
}
.room iframe { position: relative; display: block; width: 100%; height: 100%; border: 0; background: #FFFFFF; opacity: 0; transition: opacity var(--dur-2) var(--ease-out); }
.room iframe.ready { opacity: 1; }
.code-pane { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); padding: 12px; gap: 8px; }
.code-pane[hidden] { display: none; }
.code-pane label { font-size: var(--fs-ui-sm); color: var(--muted); }
/* The code wraps, so the values people change are never past the right edge */
.code-pane textarea {
  flex: 1; min-height: 0; width: 100%; resize: none;
  font: var(--fs-code)/1.6 var(--font-mono); tab-size: 2; white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto;
}
.code-actions { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; }
.code-recover { margin: 0; flex: 1 1 16rem; font-size: var(--fs-read-2); color: var(--muted); }
/* The bar above the tool and the code: what's running, and the way back to the original */
.room-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 14px; border-bottom: 1px solid var(--line); background: var(--tint); }
.room-bar[hidden] { display: none; }
.room-status { margin: 0; font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; color: var(--ink); }
.room-status:empty { display: none; }
/* The starter keeps its own look, set inside the window like a screen in a frame, with the same edge in both themes */
.room-frame { margin: 8px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--overlay-line); }
/* A phone: the window fills the screen, the code is a tab, and Close sits top right */
@media (max-width: 760px) {
  #room { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border-radius: 0; border: 0; }
  /* Two rows: the name and Close; then The tool / The code beside Copy for my AI */
  .room-tools { display: contents; }
  #room-playing { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }   /* the eyebrow steps aside on a phone, for screen readers only; the bar says when it's your version */
  .room-title strong { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #room-close { grid-column: 2; grid-row: 1; }
  #room-copy { grid-column: 2; grid-row: 2; }
  #toggle-code { display: none; }
  .room-tabs { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; border: 1.5px solid var(--control); border-radius: var(--radius-sm); overflow: hidden; }
  .room-tabs button { min-height: 40px; padding: 6px 8px; border: 0; border-radius: 0; background: var(--surface); }
  .room-tabs button[aria-selected="true"] { background: var(--tint); color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }   /* selected, not a second primary */
  .room-body.with-code { grid-template-columns: minmax(0, 1fr); }
  .room-body.with-code .room-frame { display: none; }
  .code-pane { border-left: 0; }
}
@media (max-height: 500px) and (min-width: 761px) {
  .room-body.with-code { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; overflow: auto; }
  .room-body.with-code .room-frame { min-height: 260px; }
  .code-pane textarea { min-height: 10em; }
}


/* ======================================================================================================
   5. The frame: header and menu, the now bar and its notice, the footer
   ====================================================================================================== */

/* The header is navy, like the now bar under it and the footer: the page is framed in North Shore navy.
   The kit's name alone: the author signs at the foot of the page, not here. */
.site-head { position: relative; background: var(--bar-bg); color: var(--bar-ink); border-bottom: 1px solid var(--bar-line); }
.site-head-inner { display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; min-height: 56px; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--bar-ink); text-decoration: none; font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-title); letter-spacing: .01em; }
.brand:hover { color: var(--bar-ink); }
.site-nav { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 2px; }
.site-nav a {
  display: flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: var(--radius-pill);
  color: var(--bar-ink); text-decoration: none; font-weight: 600; font-size: var(--fs-ui);
  transition: background-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) { .site-nav a:hover { background: rgb(255 255 255 / .12); color: var(--bar-ink); } }
.site-nav a:active { background: rgb(255 255 255 / .2); }
.site-nav a[aria-current="page"] { background: var(--bar-ink); color: var(--bar-bg); }
.brand[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .35em; }
/* The menu, by who it's for: the three pages for building, always in view; then More, which holds the pages for
   reading (From the room, Sources) and, after a divider, the hosts' (Hosts, Present, the code on GitHub). On a page
   under More, the button carries that page's name, so the menu always says where you are. "Home" is the kit's name
   at the left; it's a row of its own only in the phone menu. */
.site-nav .nav-home { display: none; }
.nav-more { position: relative; }
.more-toggle {
  min-height: 36px; padding: 6px 12px 6px 14px; gap: 8px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--bar-ink); font-size: var(--fs-ui);
}
.more-toggle::after {
  content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out);
}
.more-toggle[aria-expanded="true"]::after { transform: translateY(1px) rotate(-135deg); }
@media (hover: hover) { .more-toggle:hover { background: rgb(255 255 255 / .12); color: var(--bar-ink); border-color: transparent; } }
.more-toggle:active { background: rgb(255 255 255 / .2); }
.more-toggle.is-current, .more-toggle.is-current:hover { background: var(--bar-ink); color: var(--bar-bg); }
.more-current { display: none; }
@media (min-width: 760px) { .more-toggle.is-current .more-label { display: none; } .more-toggle.is-current .more-current { display: inline; } }
.more-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px; }   /* without scripts: a row in the bar */
.nav-more.enhanced .more-menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 45; display: grid; gap: 2px; min-width: 14rem; padding: 6px;
  background: var(--bar-bg); border: 1px solid var(--bar-line); border-radius: var(--radius); box-shadow: var(--shadow-3);
  animation: fold-in var(--dur-2) var(--ease-out);
}
.nav-more.enhanced .more-menu:not(.open) { display: none; }
.more-menu a { border-radius: var(--radius-sm) !important; }
.more-menu .more-group { margin-top: 4px; padding-top: 6px; border-top: 1px solid rgb(244 241 235 / .24); }
.menu-toggle { display: none; }

/* Light or Night: the last item in the menu. The icon shows the theme that's on, from data-theme, with no script;
   assets/theme.js says whether it's pressed (Night is "pressed") and saves the choice. Lucide's sun and moon (ISC). */
:root {
  --icon-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/%3E%3C/svg%3E");
  --icon-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3E%3C/svg%3E");
}
.theme-toggle {
  min-height: 36px; width: 36px; padding: 0; gap: 12px; border: 0; border-radius: var(--radius-pill);
  background: transparent; color: var(--bar-ink);
}
@media (hover: hover) { .theme-toggle:hover { background: rgb(255 255 255 / .12); color: var(--bar-ink); } }
.theme-toggle:active { background: rgb(255 255 255 / .2); }
.theme-icon {
  flex: none; width: 20px; height: 20px; background: currentColor;
  -webkit-mask: var(--icon-sun) center / contain no-repeat; mask: var(--icon-sun) center / contain no-repeat;
}
[data-theme="dark"] .theme-icon { -webkit-mask-image: var(--icon-moon); mask-image: var(--icon-moon); }
.theme-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.theme-state { display: none; }
.theme-state::after { content: "Off"; }
[data-theme="dark"] .theme-state::after { content: "On"; }
.site-nav .theme-item { margin-left: 6px; }

/* Narrower than the bar (about 680px; the three pages and More fit beside the name down to there, which keeps them in
   view in a window beside Meet on a 1366px Chromebook): the name and a Menu button; every page opens as a full-width
   row under the bar, Home first, and More's pages follow in their two groups */
@media (max-width: 679px) {
  .site-head-inner { flex-wrap: nowrap; }
  .site-head-inner > * { min-width: 0; }
  .menu-toggle {
    display: inline-flex; gap: 10px; min-height: 44px; padding: 8px 14px;
    background: transparent; color: var(--bar-ink); border: 1px solid rgb(244 241 235 / .5);
  }
  .menu-toggle::after {
    content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out);
  }
  .menu-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
  .menu-toggle:active { background: rgb(255 255 255 / .2); }
  .site-head nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; }
  .site-head nav:not(.open) { display: none; }
  .site-nav { display: grid; gap: 0; padding: 8px 16px 16px; background: var(--bar-bg); border-bottom: 1px solid var(--bar-line); box-shadow: var(--shadow-3); animation: fold-in var(--dur-2) var(--ease-out); }
  .site-nav a { min-height: 48px; border-radius: var(--radius-sm); padding: 10px 12px; font-size: 1rem; }
  .site-nav .nav-home { display: block; }
  .more-toggle { display: none; }
  .nav-more.enhanced .more-menu, .nav-more.enhanced .more-menu:not(.open) {
    position: static; display: grid; min-width: 0; margin: 8px 0 0; padding: 8px 0 0;
    border: 0; border-top: 1px solid rgb(244 241 235 / .24); border-radius: 0; box-shadow: none; animation: none;
  }
  .more-menu { display: grid; }
  /* In the menu the toggle is a row of its own, after a divider: the moon or sun, its name, and On or Off */
  .site-nav .theme-item { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid rgb(244 241 235 / .24); }
  .site-nav .theme-toggle { width: 100%; min-height: 48px; justify-content: flex-start; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 1rem; }
  .site-nav .theme-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .site-nav .theme-state { display: inline; margin-left: auto; color: var(--bar-ink-2); font-weight: 500; }
}
@media (hover: hover) and (max-width: 679px) {
  .menu-toggle:hover { background: rgb(255 255 255 / .12); color: var(--bar-ink); border-color: var(--bar-ink); }
}

/* ---------- The now bar ---------- */
.nowbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--bar-bg); color: var(--bar-ink);
  border-bottom: 1px solid var(--bar-line);
}
.nowbar-inner { display: flex; align-items: center; min-height: 44px; padding-top: 8px; padding-bottom: 8px; }
.nowbar .now {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-ui);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 10px;
}
.nowbar .now .tag {
  display: inline-block; padding: 1px 10px; align-self: center;
  border-radius: var(--radius-pill); background: var(--warm); color: var(--warm-ink);
  font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-badge); text-transform: uppercase;
}
.nowbar .now-text > span { white-space: nowrap; }
.nowbar .now a { color: var(--bar-ink); font-weight: 600; text-decoration-color: rgb(244 241 235 / .5); white-space: nowrap; }
@media (hover: hover) { .nowbar .now a:hover { color: var(--bar-ink); text-decoration-color: var(--warm); } }
.nowbar .now .upnext { color: var(--bar-ink-2); }
@media (max-width: 600px) { .nowbar .now .upnext { display: none; } }

/* The notice when the morning moves to its next part: it joins the bar, so nothing below moves */
.cue { border-top: 2px solid var(--warm); animation: cue-in var(--dur-2) var(--ease-out); }
.cue[hidden] { display: none; }
@keyframes cue-in { from { opacity: 0; } }
.cue-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 8px; padding-bottom: 10px; }
.cue-text { margin: 0; flex: 1 1 16rem; font-family: var(--font-sans); font-size: var(--fs-ui); }
.cue-text strong { font-weight: 600; color: var(--warm); }
.cue .button { min-height: 44px; padding: 6px 14px; font-size: var(--fs-ui-sm); }   /* the same height as Got it beside it */
.cue .button.primary { background: var(--warm); border-color: var(--warm); color: var(--warm-ink); }
.cue-close { background: transparent; border-color: rgb(244 241 235 / .5); color: var(--bar-ink); }
@media (hover: hover) { .cue-close:hover { background: rgb(255 255 255 / .12); color: var(--bar-ink); border-color: var(--bar-ink); } }

/* ---------- The footer: the partner, the two notes, and at the lower left the author's signature ---------- */
.footer { background: var(--bar-bg); color: var(--bar-ink); padding: 40px 0 44px; border-top: 1px solid var(--bar-line); }
.footer-inner { display: grid; gap: 24px; }
.credit { display: flex; align-items: center; gap: 14px; margin: 0; }
.credit img { width: auto; height: 52px; flex: none; }
.credit p { margin: 0; font-family: var(--font-sans); font-size: var(--fs-ui); line-height: 1.45; }
.credit .host { display: block; margin-top: 2px; font-size: var(--fs-ui-sm); }
.footer .credit p { max-width: 40rem; text-wrap: balance; }
.footer-notes { display: grid; gap: 12px; max-width: var(--measure); }
.footer p { margin: 0; }
.footer .small { color: var(--bar-ink-2); }
.footer .small strong { color: var(--bar-ink); }
.footer a.inline { color: inherit; font-weight: 600; text-decoration-color: rgb(244 241 235 / .5); }
@media (hover: hover) { .footer a.inline:hover { color: var(--bar-ink); text-decoration-color: var(--bar-focus); } }
.footer .backups .pending { font-style: normal; }
.signature { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding-top: 18px; border-top: 1px solid var(--bar-line); font-family: var(--font-sans); font-size: var(--fs-ui-sm); color: var(--bar-ink-2); }
.signature img { width: auto; height: 32px; }   /* the mark's minimum */
.footer .signature a.inline { font-weight: 500; }


/* ======================================================================================================
   6. Pages
   ====================================================================================================== */

.section { padding: var(--section) 0; }
.band { background: var(--band); }
.subhead { margin: var(--block) 0 12px; }
.subhead-2 { margin: calc(var(--block) + 16px) 0 0; }
.more-link { margin: 16px 0 0; color: var(--muted); }

/* ---------- Home: the cover ---------- */
/* The name large on the page and the partner it was made with, then North Shore's horizon bands across its foot */
.hero { background: var(--bg); color: var(--ink); }
.hero::after {
  content: ""; display: block; height: 36px;
  background: linear-gradient(to bottom, var(--sun-600) 0 12px, var(--bg) 12px 17px, var(--sun-600) 17px 24px, var(--bg) 24px 28px, var(--sun-600) 28px);
}
.hero-inner { padding-top: clamp(40px, 7vw, 88px); padding-bottom: clamp(36px, 6vw, 64px); }
.hero-text { max-width: 40rem; }
.eyebrow { margin: 0 0 14px; letter-spacing: var(--tracking-eyebrow); }
.hero h1 { font: var(--type-display); font-size: clamp(2.75rem, 9vw, 4.5rem); letter-spacing: var(--tracking-display); }
.hero-meta { margin: 14px 0 0; font: var(--type-ui); font-size: 1rem; }
.hero-lede { max-width: 34rem; margin: 16px 0 0; font: var(--type-lead); font-size: clamp(1.125rem, 2.2vw, 1.3125rem); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 24px 0 0; }
.credit-lead { gap: 20px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); max-width: 34rem; }
.credit-lead img { height: 90px; }
.credit-lead strong { display: block; font-size: clamp(1.3rem, 3vw, 1.6rem); line-height: 1.2; }
.credit-lead .host { margin-top: 4px; font-size: var(--fs-ui-sm); color: var(--muted); }
@media (max-width: 480px) { .credit-lead img { height: 72px; } }
@media (max-width: 760px) { .hero-inner { padding-top: 36px; } }

/* The front door: the kit on the left, the first twenty minutes on the right */
.hero-split { display: grid; gap: 32px 56px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .hero-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
/* The examples as pictures, two by two, each opening its starter's card */
.hero-shots { list-style: none; margin: 24px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 34rem; }
.hero-shots a { display: grid; gap: 8px; align-content: start; color: var(--ink); text-decoration: none; font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 600; }
.hero-shots img {
  display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--tint);
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .hero-shots a:hover img { transform: var(--lift); box-shadow: var(--shadow-lift); }
  .hero-shots a:hover > span { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: .25em; }
}
.hero-note { margin: 14px 0 0; font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 600; color: var(--muted); }
.first-steps { padding: var(--card-pad); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.first-steps h2 { font-size: var(--fs-h2-card); }
.first-steps > p { margin: 8px 0 0; color: var(--muted); }
.mini-steps { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 0; }
.mini-steps li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.mini-steps strong { display: block; font-family: var(--font-sans); font-size: var(--fs-ui-lg); }
.mini-steps span:not(.num) { display: block; margin-top: 2px; }
.mini-steps .action-link { min-height: 36px; }
.first-steps .hint { margin: 4px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
/* The invitation: the shape of the morning as one row, and how to join said plainly */
/* .shape.shape-row: the general .shape rules come later in this file, so the row names both to win */
.shape.shape-row { margin-top: 20px; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 600px) { .shape.shape-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shape.shape-row li { padding: 12px 14px; }
.shape.shape-row strong { font-size: 1.75rem; }
.shape.shape-row span { font-size: var(--fs-read-2); }
.join { margin: 20px 0 0; }
.join .pending { display: inline-block; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font-family: var(--font-sans); font-style: normal; font-weight: 600; color: var(--ink); }
.join:has(a) + .hero-actions .try { background: var(--surface); border-color: var(--control); color: var(--ink); }

/* ---------- Home: happening now ---------- */
.nowcard-wrap { padding-bottom: 8px; }
.nowcard { padding: clamp(20px, 4vw, 36px); border-radius: var(--radius); background: var(--feature); color: var(--feature-ink); border-top: 4px solid var(--accent); }
.nowcard-title { margin: 6px 0 0; font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 600; line-height: 1.08; letter-spacing: var(--tracking-display); }
.nowcard-hint { margin: 12px 0 0; max-width: 36rem; font-size: var(--fs-lead); }
.nowcard-action { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.nowcard-action #nowcard-shared { display: contents; }
.nowcard-action .button { font-size: var(--fs-ui-lg); padding: 12px 22px; min-height: 48px; }
.nowcard .button { background: transparent; color: var(--feature-ink); border-color: rgb(244 241 235 / .6); }
@media (hover: hover) { .nowcard .button:hover { background: rgb(255 255 255 / .12); color: var(--feature-ink); border-color: var(--feature-ink); } }
.nowcard .button.primary { background: var(--action-accent); border-color: var(--action-accent); color: var(--fg-on-accent); }
@media (hover: hover) { .nowcard .button.primary:hover { background: var(--action-accent-hover); border-color: var(--action-accent-hover); color: var(--fg-on-accent); } }
.nowcard-next { margin: 16px 0 0; font-family: var(--font-sans); font-weight: 600; color: var(--bar-ink-2); }
.nowcard-action #nowcard-also { display: contents; }

/* During the session: the part that's on comes right under the card, then the schedule, with finished parts as one line */
body[data-mode="during"] main { display: flex; flex-direction: column; }
body[data-mode="during"] #today { order: 1; }
/* The card above already names the part, so its section's own title is for screen readers only */
body[data-mode="during"] :is(#cheer, #close) > .wrap > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body[data-mode="during"] :is(#cheer, #close) > .wrap > .section-lede { margin-top: 0; }
.timeline li.done > div > span, .timeline li.done > div > a { display: none; }
.timeline li.done { padding-top: 10px; padding-bottom: 10px; }
.timeline li.done .length::after { content: "Done"; display: block; width: max-content; margin-top: 4px; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 600px) { .timeline li.done .length::after { display: inline-block; margin: 0 0 0 8px; } }
body[data-mode="after"] .timeline li.done > div > span, body[data-mode="after"] .timeline li.done > div > a { display: initial; }

/* The schedule */
.timeline { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.timeline li {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 14px; align-items: start;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px;
}
.timeline li > div { max-width: var(--measure); }
.timeline .length { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.timeline strong { display: block; font-size: var(--fs-ui-lg); }
.timeline span { color: var(--muted); }
.timeline a { font-weight: 600; }
.timeline li.done { background: transparent; }
.timeline li.done :is(.length, strong) { color: var(--muted); }
.timeline li.now { border: 2px solid var(--accent); }
.timeline li.now .length::after {
  content: "Now"; display: block; width: max-content; margin-top: 6px; padding: 0 8px;
  border-radius: var(--radius-pill); background: var(--warm); color: var(--warm-ink);
  font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase;
}
@media (max-width: 600px) {
  .timeline li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .timeline .length { font-size: var(--fs-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
  .timeline li.now .length::after { display: inline-block; margin: 0 0 0 8px; }
}

/* Steps: a short numbered sequence */
.steps { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); }
.steps strong { display: block; margin-top: 10px; font-size: var(--fs-title); }
.steps span:not(.num) { display: block; margin-top: 4px; color: var(--muted); }
.glance li { display: flex; flex-direction: column; }
.glance a { margin-top: auto; padding-top: 10px; font-weight: 600; }

/* Before you come, the shape of the morning, everything here */
.shape { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); }
.shape li { padding: 16px var(--card-pad); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.shape strong { display: block; font-size: 2.5rem; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.shape span { display: block; margin-top: 6px; color: var(--muted); }
.also { display: grid; gap: var(--gap); margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
@media (min-width: 960px) { .also { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.also-card strong { font-size: var(--fs-title); }
.also-card span { color: var(--muted); }
.also-card .go { margin-top: auto; padding-top: 6px; color: var(--link); font-weight: 600; font-size: var(--fs-ui); }
.also-card .go::after { content: " →"; }

/* The awards and the close */
.three-up { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); margin-top: 24px; align-items: start; }
.three-up .card { display: grid; gap: 8px; }
.three-up .card p { margin: 0; }
.three-up .link-slot { margin-top: 4px; }
.beyond { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); max-width: var(--measure); }
.beyond p { margin: 6px 0 0; }
.awards { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.awards li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); }
.award-icon { grid-row: span 2; color: var(--ink); }
.awards strong { display: block; font-size: var(--fs-title); }
.awards span:not(.award-icon) { color: var(--muted); }
.award-icon svg { width: 28px; height: 28px; }
.two-up { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 24px; }
.card p { color: var(--muted); }
.rungs { margin: 12px 0 0; padding-left: 24px; display: grid; gap: 8px; }
.rungs li::marker { color: var(--ink); font-weight: 600; }
.next p { margin: 6px 0 0; font-size: var(--fs-body); }

/* After the session */
.keep-grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
.keep-grid .card h2 { font-size: var(--fs-h3); letter-spacing: 0; }
.keep-grid .card p { color: var(--ink); }
.card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rows { margin: 16px 0 0; display: grid; gap: 0; }
.rows > div { padding: 12px 0; border-top: 1px solid var(--line); }
.rows dt { font-family: var(--font-sans); font-weight: 600; }
.rows dd { margin: 4px 0 0; }
.quiet-fold { margin-top: 4px; border-top: 1px solid var(--line); }
.quiet-fold > summary { font-size: var(--fs-ui); color: var(--muted); }
.quiet-fold p { margin: 4px 0 10px; }

/* ---------- Three levels ---------- */
.levels-part { margin-top: var(--section); font-size: clamp(1.375rem, 3vw, 1.625rem); }
.chooser-lead { margin: 8px 0 0; font-family: var(--font-sans); font-weight: 600; }
.meta { margin: 6px 0 0; font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; color: var(--muted); }
.first-run { margin: 14px 0 0; }
/* How the three differ: a card per level with the same five rows, and where there's room, each row lines up across
   the three (subgrid), so the page reads as a comparison as well as a way in */
.compare { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.compare > li { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); }
.compare h3 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--fs-title); }
.compare dl { margin: 14px 0 0; }
.compare dl > div { padding: 8px 0; border-top: 1px solid var(--line); }
.compare dt { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.compare dd { margin: 2px 0 0; }
.compare-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.compare-foot .meta { margin: 0; }
.compare-foot .action-link::after { content: "↓"; }   /* the level opens below, on this page */
.compare > li:has(a[aria-current]) { border-color: var(--ink); box-shadow: inset 0 3px 0 var(--ink); }
/* A card with a row to itself: each row's label sits beside its value, which keeps the cards short */
@media (max-width: 879px) {
  .compare dl > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 2px 12px; align-items: baseline; }
  .compare dd { margin: 0; }
}
@media (min-width: 480px) and (max-width: 879px) { .compare dl > div { grid-template-columns: 8.5rem minmax(0, 1fr); } }
@media (min-width: 880px) {
  .compare { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .compare > li { display: grid; grid-row: span 7; grid-template-rows: subgrid; row-gap: 0; }
  .compare dl { grid-row: span 5; display: grid; grid-template-rows: subgrid; }
  .compare-foot { margin-top: 0; align-self: start; }   /* its divider on one line across the three */
}
.tips.habits { margin-top: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 880px) { .tips.habits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tips.habits > div { padding: var(--card-pad); }
.habits h3 { margin: 0 0 6px; font-size: var(--fs-ui-lg); }
.habits p { margin: 0; }
/* Level 1's three kinds of code, each named beside what it does */
.code-kinds { display: grid; gap: 6px; max-width: var(--measure); margin: 10px 0 0; }
.code-kinds > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 12px; align-items: baseline; }
.code-kinds dt { font-family: var(--font-sans); font-weight: 600; }
.code-kinds dd { margin: 0; }

/* A level: on a wide screen, what it is and the steps at reading width on the left, and what it teaches you about
   code beside them, staying in view while you work down the steps. Narrower, the same parts stack in reading order. */
.level-body { display: grid; grid-template-columns: minmax(0, 1fr); }
.learn { margin-top: 24px; padding: 18px 20px; background: var(--tint); border-radius: var(--radius); }
.level .learn h3 { margin: 0; }
.level .learn ul { list-style: none; margin: 10px 0 0; padding: 0; }
.level .learn li { margin: 0; padding: 10px 0; border-top: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); font-size: var(--fs-read-2); }
.level .learn li:first-child { border-top: 0; padding-top: 4px; }
.learn li > strong:first-child { display: block; font-family: var(--font-sans); font-size: var(--fs-ui); }
.learn code { background: var(--surface); }
.level .caution h3 { margin: 0; }   /* the caution's own padding is its top space */
@media (min-width: 1024px) {
  .level-body { grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); column-gap: 40px; }
  .level-intro, .level-steps { grid-column: 1; }
  .level-side { grid-column: 2; grid-row: 1 / span 2; align-self: start; }
  .level-side .learn { margin-top: 6px; }
}
/* Tall enough to keep it all in view: the panel stays beside the steps, just under the level bar */
@media (min-width: 1024px) and (min-height: 760px) {
  .level-side { position: sticky; top: calc(var(--below-level-bar, 64px) + 16px); }
}
/* The level bar: the three levels as rungs, a line leading from each to the next, each with its length. It sticks under
   the now bar while a level is on screen (.levels-stage holds both); the open level is tinted and marked on the bar's line. */
.level-bar {
  position: sticky; top: 0; z-index: 15; display: flex; gap: 0; margin: var(--block) 0 0; padding: 6px 0 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.level-bar a {
  position: relative; display: flex; flex: none; align-items: center; gap: 10px; min-width: 0; min-height: 52px; margin-bottom: -1px; padding: 6px 14px 6px 8px;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-family: var(--font-sans); text-decoration: none; color: var(--ink);
  transition: background-color var(--dur-1) var(--ease-out);
}
.lb-line { flex: 1 1 24px; min-width: 12px; height: 2px; margin: 0 6px; align-self: center; border-radius: 1px; background: var(--line); }
.level-bar .num { width: 28px; height: 28px; font-size: var(--fs-ui-sm); }
.level-bar .lb-text { display: grid; min-width: 0; line-height: 1.2; }
.level-bar .lb-name { font-size: var(--fs-ui); font-weight: 600; }
.level-bar .lb-time { font-size: var(--fs-ui-sm); font-weight: 500; color: var(--muted); }
@media (hover: hover) { .level-bar a:hover { background: var(--action-ghost-hover); color: var(--ink); } }
.level-bar a[aria-current] { background: var(--tint); box-shadow: inset 0 -3px 0 var(--ink); }
/* A phone: still three rungs joined by lines, each a number; the open one says its name (the lengths are on the cards).
   The other names stay for screen readers. */
@media (max-width: 600px) {
  .level-bar { padding-top: 4px; }
  .level-bar a { gap: 8px; min-height: 44px; padding: 4px 6px; }
  .lb-line { flex-basis: 16px; margin: 0 4px; }
  .level-bar a:not([aria-current]) .lb-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .level-bar a[aria-current] { flex: 0 1 auto; }   /* the open name may wrap on the narrowest screens, never push past the edge */
  .level-bar .lb-time { display: none; }
  .level-bar .lb-name { font-size: var(--fs-ui-sm); line-height: 1.15; }
}
.level-panel + .level-panel, .level-bar + .level-panel { margin-top: var(--block); }
/* A level waiting its turn has no box at all until it's opened; on paper, every level prints */
.level-panel[hidden="until-found"] { margin: 0; padding: 0; border: 0; }
@media print { .level-panel[hidden] { display: block !important; content-visibility: visible; margin-top: var(--block); } .level[hidden] { padding: var(--card-pad); border: 1px solid var(--line); } }
/* On Three levels and Starters an anchor jump lands below the level bar (and the now bar, when it sticks) */
html:root:has(.level-bar) { scroll-padding-top: calc(var(--below-level-bar, 64px) + 12px); }
/* Back and next at the foot of a level */
.level-pager { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.level-pager a {
  display: grid; gap: 4px; min-width: min(100%, 15rem); padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-sans); color: var(--ink); text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.level-pager .pager-next { margin-left: auto; justify-items: end; text-align: right; }
.pager-dir { font-size: var(--fs-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.pager-prev .pager-dir::before { content: "← "; }
.pager-next .pager-dir::after { content: " →"; }
.pager-name { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.pager-name .num { width: 26px; height: 26px; font-size: var(--fs-ui-sm); }
@media (hover: hover) { .level-pager a:hover { border-color: var(--control); background: var(--action-ghost-hover); color: var(--ink); } }
@media (max-width: 600px) { .level-pager a { flex: 1 1 100%; } .level-pager .pager-next { margin-left: 0; } }
/* Opening another level crossfades, briefly (assets/site.js skips it for anyone who asks for less motion) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-3); }
.later-tag { display: inline-block; margin: 0 0 8px; padding: 1px 10px; border: 1px solid var(--control); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.copy-note { margin: 0; font-size: var(--fs-read-2); color: var(--muted); }
.sub-steps { margin: 8px 0 0; padding-left: 1.5rem; }
.sub-steps li { margin: 6px 0; }
.stop-note { margin: 10px 0 0; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--status-warning-bg); font-size: var(--fs-read-2); }
.script-steps code { white-space: normal; overflow-wrap: anywhere; }
.level .quiet-fold { margin-top: 20px; }
/* Level 3's field guide: four folds, each saying its question and its answer in a line, opening to the detail */
.guide-fold { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.guide-fold > summary { flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 16px 10px 10px; }
.guide-q { font-weight: 600; }
.guide-a { flex: 1 0 100%; padding-left: 23px; font-weight: 500; font-size: var(--fs-ui); color: var(--muted); }
.guide-fold[open] > summary { border-bottom: 1px solid var(--line); }
.guide-body { padding: 4px 18px 18px; }
.level .guide-body h4 { margin: 20px 0 4px; font-size: var(--fs-ui-lg); }
.guide-body ul { padding-left: 1.3rem; }
.homes-table { margin-top: 12px; }
.homes-table > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.homes-table [role="rowheader"], .homes-head [role="columnheader"] { font-family: var(--font-sans); font-weight: 600; }
.homes-head { display: none !important; }
.homes-table [role="cell"]::before { content: attr(data-col) ": "; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-ui-sm); }
@media (min-width: 700px) {
  .homes-table > div { grid-template-columns: 8.5rem minmax(0, 1fr) minmax(0, 1fr); }
  .homes-head { display: grid !important; }
  .homes-table [role="cell"]::before { content: none; }
}
.level { margin-top: var(--block); padding: var(--card-pad); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.level-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.level-head .level-try { margin-left: auto; }   /* where this level's starters are, as Starters says where its teaching is */
.level-head h2 { margin: 0; }
.level h3 { margin: 28px 0 8px; }
.level p { margin: 6px 0 0; }
.level .level-what { font-size: var(--fs-lead-sm); }
.level ol, .level ul { margin: 6px 0 0; padding-left: 1.5rem; }
.level li { margin: 6px 0; max-width: var(--measure); }
.level.later { border-style: dashed; }
.pick h2 { margin: 0; font-size: var(--fs-h3); }
.pick p { margin: 10px 0 0; }

/* The where-to-paste block and the script steps, filled from site.js: one AI tool at a time, the visitor's own first */
.where-tabs { display: inline-flex; max-width: 100%; margin: 4px 0 14px; border: 1.5px solid var(--control); border-radius: var(--radius-sm); overflow: hidden; }
.where-tabs button { min-height: 40px; border: 0; border-radius: 0; border-right: 1px solid var(--line); background: var(--surface); }
.where-tabs button:last-child { border-right: 0; }
.where-tabs button[aria-selected="true"] { background: var(--tint); color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
.where-panel p { margin: 0 0 8px; }
@media (max-width: 600px) { .where-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; } }
.level-note h4 { margin: 0 0 8px; }
.level-note > summary h4 { display: inline; margin: 0; }
.level-note p { margin: 6px 0 0; }
.tips { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.tips > div { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.tips h4 { margin-bottom: 6px; font-size: var(--fs-title); }
.tips p { margin: 0; color: var(--ink); font-size: var(--fs-read-2); }
.tips p + p { margin-top: 8px; }
.where-notes { margin: 16px 0 0; padding-left: 20px; color: var(--ink); }
.where-notes li { margin: 6px 0; max-width: var(--measure); }
.script-steps { margin-bottom: 14px; }
.script-steps h4 { margin: 24px 0 6px; }
.script-steps .kind { margin: 0; color: var(--muted); }
.script-steps ol, .script-steps ul { margin: 4px 0 0; padding-left: 1.5rem; }
.script-steps li { margin: 8px 0; max-width: var(--measure); }
.script-steps p { margin: 4px 0 0; }

/* ---------- Starters ---------- */
/* One level at a time, under the same level bar as Three levels. Each level is a shelf, shaped the same: its name and
   what it is, a link to what it teaches, how it works in four steps in its own verbs, the help it needs, its starters. */
.shelf-head { display: grid; gap: 4px 24px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.shelf-head .level-head h2 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 1.875rem); }
.shelf-teach { justify-self: start; }
.shelf-teach::after { content: "→"; }
@media (min-width: 900px) {
  .shelf-head { grid-template-columns: minmax(0, 1fr) auto; }
  .shelf-head .level-head, .shelf-head .level-summary { grid-column: 1; }
  .shelf-teach { grid-column: 2; grid-row: 1; align-self: center; }
}
.shelf .how-row { margin-top: 20px; }
.shelf > .level-note { margin-top: 16px; padding: 4px var(--card-pad) 8px; }
.shelf > .machines { margin-top: 20px; }
.shelf > .level-note + .level-note { margin-top: 8px; }
.shelf .pick + * { margin-top: 0; }
/* Level 3's two places a script can live, side by side */
.script-homes { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); margin-top: 20px; }
@media (min-width: 760px) { .script-homes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.script-homes > div { padding: 14px 18px; background: var(--tint); border-radius: var(--radius); }
.script-homes h3 { margin: 0; font-size: var(--fs-ui-lg); }
.script-homes h3 span { margin-left: 4px; font-weight: 500; font-size: var(--fs-ui-sm); color: var(--muted); }
.script-homes p { margin: 6px 0 0; font-size: var(--fs-read-2); }
.level-index { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.level-index a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 14px 6px 6px;
  border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: var(--surface);
  font-family: var(--font-sans); font-weight: 600; text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.level-index .num { width: 28px; height: 28px; font-size: var(--fs-ui-sm); }
.level-index .count { margin-left: 4px; font-weight: 500; font-size: var(--fs-ui-sm); color: var(--muted); }
@media (hover: hover) { .level-index a:hover { border-color: var(--control); background: var(--action-ghost-hover); color: var(--ink); } }
.audience { display: grid; gap: 0 24px; margin-top: 24px; padding: 4px var(--card-pad); background: var(--tint); border-radius: var(--radius); grid-template-columns: minmax(0, 1fr); }
.audience > div { padding: 14px 0; }
.audience > div + div { border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .audience { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .audience > div + div { border-top: 0; border-left: 1px solid var(--line); padding-left: 24px; }
}
.audience-title { margin: 0 0 4px; font-family: var(--font-sans); font-weight: 600; }
.audience p { margin: 0; }
.audience .link-slot { margin-top: 10px; }
.how-row { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.how-row li { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-content: start; gap: 2px 12px; padding: 14px 0; border-bottom: 1px solid var(--line); }   /* rows stay at the top, so the four titles line up when steps differ in length */
.how-row .num { grid-row: span 2; }
.how-row li:last-child { border-bottom: 0; }   /* the level below opens with its own rule */
.how-row strong { font-family: var(--font-sans); font-size: var(--fs-ui-lg); }
.how-row span:not(.num) { color: var(--muted); }
@media (min-width: 900px) {
  .how-row { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 24px; border-bottom: 1px solid var(--line); }
  .how-row li { border-bottom: 0; grid-template-columns: minmax(0, 1fr); }
  .how-row .num { grid-row: auto; margin-bottom: 6px; }
}
.level-summary { margin: 8px 0 0; color: var(--ink); }
.level details.level-note { margin-top: 16px; padding: 4px var(--card-pad) 8px; }

/* The cards: two to a row on a laptop. Each card's picture, title, words, and buttons sit on rows shared with its
   neighbor (subgrid), so the Play buttons line up across a row. Monday, a note, and the Remix menu share the last
   row, so a card with less to say ends with space at its foot, not a gap in its middle, and an open Remix menu
   grows only that row: its neighbor's buttons stay put. */
.machines { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 760px) {
  .machines { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .machines:not(.scripts) { align-items: stretch; }
  .machines:not(.scripts) > .cabinet { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .machines:not(.scripts) > .cabinet > .shot { grid-row: 1; }
  .machines:not(.scripts) > .cabinet > .cabinet-head { grid-row: 2; }
  .machines:not(.scripts) > .cabinet > p:not([class]) { grid-row: 3; }
  .machines:not(.scripts) > .cabinet > .actions { grid-row: 4; align-self: start; }
  .machines:not(.scripts) > .cabinet > .cabinet-more { grid-row: 5; align-self: start; }
}
.machines.scripts { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .machines.scripts > .cabinet { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .machines.scripts > .cabinet > .shot { grid-column: 1; margin: 0; }
  .machines.scripts > .cabinet > .cabinet-text { grid-column: 2; }
  .machines.scripts > .cabinet > :is(.script-kit, .remix) { grid-column: 1 / -1; }
}
.cabinet { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--card-pad); }
/* A starter's picture (scripts/starter-shots.js): the tool just after its first press, or, for a script, what it
   leaves in your Drive. The words beside it say the same, so screen readers skip it. Pressing the picture of a
   starter that plays opens Play; the Play button stays the way in from a keyboard. */
.shot { position: relative; margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--tint); }
.shot img { display: block; width: 100%; height: auto; }
/* A starter that plays: its picture runs to the card's top edges, as the card's image, and says "Play" in its corner */
.machines:not(.scripts) .shot {
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 16px; border: 0; border-bottom: 1px solid var(--line);
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
}
.shot[data-shot] { cursor: pointer; }
.shot-play {
  position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 10px;
  border-radius: var(--radius-pill); background: var(--bar-bg); color: var(--bar-ink); box-shadow: var(--shadow-1);
  font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.shot-play svg { width: 14px; height: 14px; }
@media (hover: hover) { .shot[data-shot]:hover .shot-play { background: var(--button); color: var(--button-ink); } }
/* In Night the pictures step down a little, so a white screenshot doesn't outshine the page's own heading */
[data-theme="dark"] :is(.shot, .hero-shots) img { filter: brightness(.9); }
.cabinet-head { display: block; }
.cabinet h3 { margin-top: 2px; font-size: var(--fs-title); }
.cabinet .for { margin: 2px 0 0; font-size: var(--fs-read-2); color: var(--muted); }
.cabinet > p, .cabinet-text > p { margin: 12px 0 0; color: var(--ink); }
.cabinet-text > .cabinet-head h3 { margin-top: 0; }
.cabinet .monday { margin: 12px 0 0; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--tint); font-size: var(--fs-read-2); }
.cabinet .meta { margin-top: 12px; }
.data-note { margin: 12px 0 0; padding: 4px 0 4px 12px; border-left: 3px solid var(--control); font-size: var(--fs-read-2); color: var(--ink); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.remix { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 2px; }
.remix > summary .count { margin-left: 4px; font-weight: 500; color: var(--muted); }
.remix h5 { margin: 16px 0 6px; }
.remix ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.remix li {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; justify-content: space-between;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 8px 8px 12px; font-size: var(--fs-read-2);
}
.remix li > span:first-child { flex: 1 1 14rem; }
.remix li button { flex: none; min-width: 6.5rem; }   /* the same width when it says Copied, so the line beside it never re-wraps */
.remix li > .remix-hint { flex: 1 0 100%; margin: -4px 0 0; }   /* where it goes, under the line just copied */
.remix li .slot { white-space: nowrap; color: var(--accent-ink); font-weight: 600; letter-spacing: .05em; }
.remix .note { display: block; margin-top: 4px; font-size: var(--fs-read-2); color: var(--muted); }
.remix li.do { display: block; background: transparent; border-style: dashed; }
.remix-lead { margin: 4px 0 0; font-size: var(--fs-read-2); color: var(--muted); }
.remix-hint { margin: 0 0 2px 12px; font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; color: var(--muted); list-style: none; }

/* ---------- Invent your own ---------- */
/* One card for the one task (describe it), the jar inside it, then what happens after you copy as a plain list */
.step-label { margin: 0 0 4px; font: 600 var(--fs-label)/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink); }
.invent-card { margin-top: var(--block); padding: var(--card-pad); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.invent-card > h2 { font-size: var(--fs-h2-card); }
.invent-layout { display: grid; gap: 16px 32px; grid-template-columns: minmax(0, 1fr); margin-top: 8px; }
@media (min-width: 960px) {
  .invent-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .request { position: sticky; top: 24px; padding-top: 30px; }
}
.builder { display: grid; gap: 4px; }
.builder label { margin-top: 12px; font-weight: 600; color: var(--ink); }
.builder textarea { resize: vertical; min-height: 0; overflow: hidden; }
.builder ::placeholder { font-style: italic; }   /* examples look like examples, not answers */
/* An empty answer says so in words beside its label, not only in its copper edge */
.builder label:has(+ [aria-invalid="true"])::after { content: " · answer this one"; font-weight: 600; color: var(--invalid); }
.builder .field-error, .builder-status { margin: 4px 0 0; }
.builder .field-error:empty, .builder-status:empty { display: none; }
.builder-status { font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: 600; color: var(--ink); }
@media (max-width: 480px) { #idea-copy { justify-self: stretch; min-height: 48px; } }
.request { display: grid; gap: 4px; justify-items: start; }
.builder-label { margin: 8px 0 0; font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; color: var(--muted); }
.builder-out { justify-self: stretch; margin: 4px 0 10px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--tint); border: 1px dashed var(--control); color: var(--ink); }
.builder-out .blank { color: var(--muted); font-style: italic; text-decoration: underline dotted var(--accent); text-underline-offset: .25em; }
.jar-box { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.jar-title { font-size: var(--fs-title); }
.jar-box .hint { margin: 6px 0 12px; }
.jar { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.jar button { font-weight: 500; text-align: left; justify-content: flex-start; }
@media (max-width: 600px) { .jar { display: grid; } .jar button { width: 100%; } }
.step-list { list-style: none; margin: var(--block) 0 0; padding: 0; display: grid; gap: 0; }
.step-list > li { padding: 20px 0; border-top: 1px solid var(--line); }
.step-list > li:last-child { border-bottom: 1px solid var(--line); }
.step-list h3 { margin: 0 0 6px; }
.step-list p { margin: 0; }
.step-list .copybox { max-width: var(--measure); }
@media (min-width: 960px) {
  .step-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .step-list > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .step-list > li:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* an odd last step takes the row, not half of it */
  .step-list > li:nth-last-child(2):has(+ li:last-child:nth-child(odd)) { border-bottom: 0; }
}
.stuck ul { margin: 10px 0 0; padding-left: 20px; }
.stuck li { margin: 8px 0; max-width: var(--measure); }
.stuck .copybox { margin-top: 8px; }
.stuck > p { margin: 10px 0 0; }
/* Invent your own's two helps, where to paste and what to do when stuck: side by side on a wide screen */
@media (min-width: 1024px) {
  .help-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); align-items: stretch; margin-top: var(--block); }
  .help-pair > * { margin-top: 0; }
}
.live-note { color: var(--muted); }
#wall .link-slot { display: block; margin: 18px 0 0; }
.live-fold { margin-top: var(--block); padding: 4px var(--card-pad) var(--card-pad); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.live-fold > summary { font-size: var(--fs-title); }
.live-fold:not([open]) { padding-bottom: 4px; }   /* closed, its label sits in the middle */
.live-fold p { margin: 10px 0 0; }
.wall-steps { margin: 10px 0 0; padding-left: 1.4em; max-width: var(--measure); }
.wall-steps li { margin: 8px 0; }
#wall .caution { margin-top: var(--block); }
#wall .caution p { margin: 6px 0 0; }

/* ---------- Hosts ---------- */
.hosts-intro { max-width: var(--measure); }
.on-page { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.on-page ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.on-page a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 4px 12px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; text-decoration: none; color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) { .on-page a:hover { border-color: var(--control); color: var(--ink); } }
/* The contents rail (assets/site.js builds it from the list above): on a screen with room beside the reading column,
   the page's sections stay in view in the right margin, the one you're in marked in ink, and the list up top steps
   aside. The content gives up the rail's width; the bands' colors still run edge to edge. */
.page-rail { display: none; }
@media (min-width: 1200px) {
  body.has-rail .on-page { display: none; }
  body.has-rail main .wrap { padding-right: calc(16px + 280px); }   /* the rail's 216px and a 64px gap */
  .page-rail { display: block; position: sticky; top: -80px; z-index: 5; width: 100%; height: 0; max-width: 1080px; margin: 0 auto; }   /* stuck, the list sits 32px from the top; full width even where main is a flex column (on the day) */
  body[data-mode="during"] .page-rail { top: -16px; }   /* below the now bar, which sticks on the day */
  .page-rail-inner { position: absolute; top: 112px; right: 16px; width: 216px; max-height: calc(100vh - 136px); overflow-y: auto; }
  .page-rail ul { list-style: none; margin: 10px 0 0; padding: 0; border-left: 2px solid var(--line); }
  .page-rail a {
    display: block; margin-left: -2px; padding: 6px 0 6px 14px; border-left: 2px solid transparent;
    font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; line-height: 1.3; text-decoration: none; color: var(--muted);
    transition: color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  }
  @media (hover: hover) { .page-rail a:hover { color: var(--ink); } }
  .page-rail a[aria-current] { color: var(--ink); border-left-color: var(--ink); }
}
.host-grid { display: grid; gap: var(--gap); margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
/* The two ways to run it: side by side they're one height, and each ends in its way on, level with the other's */
.host-grid:has(> .way) { align-items: stretch; }
.card.way { display: flex; flex-direction: column; }
.card.way > .card-actions { margin-top: auto; padding-top: 16px; }
.host-grid .card ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.way .label { margin-bottom: 6px; }
.checks ul, .checks .sub-steps { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.before-list .message { margin-top: 12px; }
.materials-groups { display: grid; gap: 20px; margin-top: 16px; }
.materials-groups .label { margin-bottom: 8px; }
.materials { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.slot-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: var(--measure); border-top: 1px solid var(--line); }
.slot-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 52px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.slot-list strong { font-family: var(--font-sans); }
.slot-list .pending { font-style: normal; font-size: var(--fs-read-2); }
.key-table { margin: 16px 0 0; display: grid; gap: 0; max-width: var(--measure); border-top: 1px solid var(--line); }
.key-table > div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.key-table dd { margin: 0; }
.calc-card { margin-top: 20px; max-width: 36rem; }
.calc { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; }
.calc label { flex-basis: 100%; font-family: var(--font-sans); font-weight: 600; }
.calc input { width: 6em; }
.calc-out { margin: 12px 0 0; font-size: var(--fs-h3); font-weight: 600; color: var(--ink); }

/* The run of show: the two hours as one bar, then each part as a row that opens */
.ros-bar { display: flex; gap: 2px; margin-top: 20px; border-radius: var(--radius-sm); overflow: hidden; }
.ros-part { display: grid; gap: 2px; min-width: 0; padding: 8px 0; background: var(--button); color: var(--button-ink); font-family: var(--font-sans); font-size: var(--fs-label); }
.ros-part.rooms { background: var(--water-800); color: var(--cream-50); }   /* dark enough that its small times pass AA */
.ros-name { padding: 0 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* padding inside the labels, so each part's width is its minutes alone */
.ros-at { padding: 0 8px; font-weight: 500; font-variant-numeric: tabular-nums; overflow: hidden; }
@media (max-width: 760px) { .ros-name { display: none; } }
.ros-key { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 4px; max-width: var(--measure); color: var(--muted); }
.runofshow { display: grid; gap: 12px; margin-top: 18px; }
.segment { min-width: 0; padding: var(--card-pad) 20px; background: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--button); border-radius: 0 var(--radius) var(--radius) 0; }
.segment.rooms { border-left-color: var(--water-700); }
/* Each part folds; the part that's on stays open. The whole row opens it. */
.segment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
summary.segment-head {
  list-style: none; cursor: pointer; margin: calc(var(--card-pad) * -1) -20px; padding: var(--card-pad) 20px; min-height: 56px; border-radius: 0 var(--radius) var(--radius) 0;
  transition: background-color var(--dur-1) var(--ease-out);
}
summary.segment-head::after {
  content: ""; margin-left: auto; align-self: center; width: 8px; height: 8px; flex: none;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg); transition: transform var(--dur-2) var(--ease-out);
}
.segment[open] > summary.segment-head::after { transform: rotate(-135deg); }
@media (hover: hover) { summary.segment-head:hover { background: var(--tint); } }
.segment-head .length { width: 4.5em; flex: none; font-family: var(--font-sans); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.segment-head h3 { font-size: var(--fs-title); }
.segment .where { padding: 1px 10px; border-radius: var(--radius-pill); background: var(--tint); font-size: var(--fs-ui-sm); font-weight: 600; }
.segment .progress { font-family: var(--font-sans); font-size: var(--fs-ui-sm); color: var(--muted); }
@media (max-width: 600px) { .segment-head .length { width: auto; } .segment-head h3 { flex-basis: 100%; order: -1; } }
.segment h4 { margin: 24px 0 8px; }
.segment .participants { margin: 8px 0 0; color: var(--muted); }
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.stage-list li { max-width: var(--measure); }
.screen-no { display: inline-block; margin-right: 8px; padding: 0 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; color: var(--muted); vertical-align: 2px; }
.stage-list a { font-family: var(--font-sans); font-weight: 600; text-decoration: none; }
@media (hover: hover) { .stage-list a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; } }
.stage-list .note { display: grid; gap: 4px; margin-top: 6px; }
.cue-line { display: grid; grid-template-columns: 5.2em minmax(0, 1fr); gap: 8px; color: var(--ink); }
.cue-line:not(:has(.cue-who)) { display: block; }
@media (max-width: 600px) { .cue-line { grid-template-columns: minmax(0, 1fr); gap: 0; } .cue-who { padding-top: 4px; } }
.cue-who { padding-top: .3em; font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.cue-who.who-do, .cue-who.who-co-host { color: var(--muted); }   /* copper only for Say: the lines spoken aloud stand out */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.checklist label { display: flex; gap: 10px; align-items: flex-start; min-height: 36px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
@media (hover: hover) { .checklist label:hover { background: var(--tint); } }
.checklist label:has(input:checked) { color: var(--muted); }
.checklist input { margin-top: 3px; }
.message { margin-top: 12px; padding: 12px 16px; border-radius: var(--radius-sm); background: var(--tint); }
.message-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.message .to { margin: 0; }
.message pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; max-width: var(--measure); }
.blank-chip { padding: 0 6px; border: 1.5px dashed var(--accent); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: .85em; font-weight: 600; white-space: nowrap; color: var(--accent-ink); }
.blank-note { margin: 8px 0 0; font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; color: var(--accent-ink); }
.breaks { margin: 16px 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.breaks > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding: 12px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 760px) { .breaks > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.breaks dt { font-family: var(--font-sans); font-weight: 600; }
.breaks dd { margin: 0; }
.fold { margin-top: 0; }
.record-fold { padding: 4px var(--card-pad) 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.fold > summary { font-size: var(--fs-title); }
.fold[open] > summary { margin-bottom: 10px; }
.fold ul { padding-left: 20px; }

/* ---------- Sources ---------- */
.route { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; }
.reading { max-width: var(--measure); margin-top: 8px; }
.reading ul { margin: 4px 0 12px; padding-left: 20px; }
.reading li { margin: 6px 0; }
.synthesis h2 { font-size: var(--fs-h3); letter-spacing: 0; }
.synthesis p { margin: 10px 0 0; font-size: var(--fs-body); }
.friday-design { margin-top: var(--gap); }
.friday-design h2 { font-size: var(--fs-h3); letter-spacing: 0; }
.friday-design p { color: var(--ink); }
.paths { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
@media (min-width: 960px) { .paths { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.path-card {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; text-align: left;
  min-height: 0; padding: 16px var(--card-pad); border-radius: var(--radius); border: 1.5px solid var(--line); background: var(--surface); color: var(--ink);
  font-weight: 400;
  transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) { .path-card:hover { transform: var(--lift); box-shadow: var(--shadow-lift); border-color: var(--control); background: var(--surface); } }
.path-card strong { font-size: var(--fs-ui-lg); }
.path-card span { font-family: var(--font-serif); color: var(--muted); font-size: var(--fs-read-2); }
.path-card .path-count { margin-top: auto; padding-top: 4px; font-family: var(--font-sans); color: var(--link); font-weight: 600; font-size: var(--fs-ui-sm); }
.path-card[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 4px 0 var(--ink); }

.tabs { display: flex; flex-wrap: wrap; margin: 16px 0 18px; border: 1.5px solid var(--control); border-radius: var(--radius-sm); width: fit-content; max-width: 100%; overflow: hidden; }
.tab { border: 0; border-radius: 0; border-right: 1px solid var(--line); min-height: 44px; }
.tab:last-child { border-right: 0; }
.tab .facet-count { margin-left: 8px; }
.tab[aria-pressed="true"] { background: var(--tint); color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); }
@media (max-width: 600px) {
  .tabs { display: grid; width: 100%; }
  .tab { justify-content: space-between; border-right: 0; border-bottom: 1px solid var(--line); }
  .tab:last-child { border-bottom: 0; }
}

.browse-layout { display: grid; gap: 24px; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); align-items: start; }
/* Taller than the window, the filters scroll on their own beside the sources */
.finder {
  position: sticky; top: 16px; padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
@media (max-height: 560px) { .finder { position: static; max-height: none; overflow: visible; } }   /* only a very short window lets them scroll away */
.finder-toggle { display: none; }
.finder-label { display: block; margin-bottom: 6px; font-weight: 600; }
.finder input[type="search"] { width: 100%; }
.finder fieldset { margin: 18px 0 0; padding: 0; border: 0; }
.finder legend { margin-bottom: 6px; padding: 0; font-weight: 600; }
.finder .ask-group { margin-top: 12px; }
.finder .ask-group > legend { margin-bottom: 2px; }
.choice { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.choice label { flex: 1; display: flex; justify-content: space-between; gap: 8px; cursor: pointer; font-size: var(--fs-ui); }
.choice.empty label { color: var(--muted); }
.facet-count { color: var(--muted); font-size: var(--fs-ui-sm); font-variant-numeric: tabular-nums; }

.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 10px; }
.count { margin: 0; font-weight: 600; }
.results-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.path-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; padding: 12px 16px; background: var(--surface); border: 2px solid var(--ink); border-radius: var(--radius); }
.path-banner p { margin: 0; }

.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 12px; }
.active-label { font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; color: var(--muted); margin-right: 2px; }
.choice input:disabled + label { color: var(--muted); cursor: default; }
.finder-done { display: none; margin-top: 18px; width: 100%; }
.src-section + .src-section { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.src-section > h3 { font-size: var(--fs-h2-card); }
.src-section-blurb { margin: 6px 0 0; color: var(--muted); }
.src-group { margin: 28px 0 10px; }
.src-list { display: grid; gap: 10px; }
.src { padding: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 24px; }
.src.highlight { box-shadow: 0 0 0 2px var(--accent); }
.src-title { margin: 0; font-size: var(--fs-ui-lg); line-height: 1.35; }
.src-title a { text-decoration: none; padding-block: 2px; }   /* a one-line title is still a 24px target */
.src-title a::after { content: " ↗"; font-size: .85em; color: var(--muted); }
@media (hover: hover) { .src-title a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; } }
.src-step { color: var(--ink); }
.src-kind { margin: 0 0 4px; font: 600 var(--fs-label)/1.2 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.src-meta { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-read-2); }
.src-take { margin: 8px 0 0; }
.src-says { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--tint); animation: fold-in var(--dur-2) var(--ease-out); }
.src-says p { margin: 0; }
.src-says p + p { margin-top: 6px; }
.src-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; }
/* Two quiet buttons: they act on this card, so they're text, not boxes */
.src-foot > button { min-height: 36px; padding: 4px 8px; margin-left: -8px; border-color: transparent; background: transparent; font-size: var(--fs-ui-sm); }
@media (hover: hover) { .src-foot > button:hover { background: var(--action-ghost-hover); border-color: transparent; } }
.src-toggle::after { content: ""; width: 6px; height: 6px; margin-left: 4px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
.src-toggle.open::after { transform: translateY(1px) rotate(-135deg); }
.src-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.src-tags-label { margin-right: 4px; font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; color: var(--muted); }
.empty-state { padding: 24px; text-align: center; background: var(--surface); border-radius: var(--radius); }
.empty-state p { margin: 0 auto 12px; }

@media (max-width: 900px) {
  .browse-layout { grid-template-columns: minmax(0, 1fr); }
  /* A phone: one button opens the search and filters. It reads as a button with a chevron, not as a field */
  .finder { position: static; max-height: none; overflow: visible; padding: 0; background: none; border: 0; }
  .finder-panel:not(.open) { display: none; }
  .finder-panel.open { margin-top: 12px; padding: 16px 16px 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
  .finder-toggle { display: inline-flex; width: 100%; justify-content: space-between; border-color: var(--ink); font-weight: 600; }
  .finder-toggle::after { content: ""; width: 7px; height: 7px; margin: -3px 4px 0 0; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--dur-2) var(--ease-out); }
  .finder-toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
  /* Show N sources stays at the foot of the screen while the panel is open, so a choice near the top applies without a scroll */
  .finder-done { display: inline-flex; position: sticky; bottom: 0; margin: 18px -16px 0; width: calc(100% + 32px); border-radius: 0 0 var(--radius) var(--radius); box-shadow: 0 -8px 16px var(--surface); }
}

/* ---------- From the room: each session's record, newest first ---------- */
/* Each session is an article: a short header, a row of tabs (Overview, Questions, Themes, Offers and asks, Index),
   and one view at a time. assets/recap.js runs the tabs; without it, the views follow one another down the page.
   Built from the components above: the tabs look like Sources' tabs, the index filter is that same group, the tiles are
   link cards, and every fold is the one disclosure. */
.recap-intro { padding: 40px 0 22px; }
.recap-sessions ul { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.recap-sessions a {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 3px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--control); background: var(--surface); color: var(--ink); font-size: var(--fs-ui-sm); text-decoration: none;
}
@media (hover: hover) { .recap-sessions a:hover { border-color: var(--ink); background: var(--action-ghost-hover); color: var(--ink); } }
.recap-sessions a[aria-current] { background: var(--tint); border-color: var(--ink); }   /* selected: the tint with an ink edge */
.recap-about { padding: 0 0 var(--section); }
.recap-how { max-width: var(--measure); }
.recap-how > summary { font-size: var(--fs-ui-lg); }
.recap-how p { margin: 0; color: var(--muted); }
.recap-head { padding: 28px 0 22px; }
.recap-head h2 { font-size: clamp(1.9rem, 4.5vw, 2.4rem); line-height: 1.1; }

/* The tabs. After the session they stay in reach as you read; during it, the now bar has the top of the window.
   On a phone they keep to one row that scrolls sideways, so the view starts within the first screen. */
.recap-tabs { background: var(--bg); border-bottom: 1px solid var(--line); }
body[data-mode="after"] .recap-tabs { position: sticky; top: 0; z-index: 15; }
.recap-tabs [role="tablist"] {
  display: flex; width: fit-content; max-width: 100%; margin: 10px 0; overflow-x: auto; scrollbar-width: none;
  border: 1.5px solid var(--control); border-radius: var(--radius-sm);
}
.recap-tabs [role="tablist"]::-webkit-scrollbar { display: none; }
.recap-tabs [role="tab"] {
  flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  border-right: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: var(--fs-ui); font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease-out);
}
.recap-tabs [role="tab"]:last-child { border-right: 0; }
.recap-tabs [role="tab"]:focus-visible { outline-offset: -3px; }   /* inside the group, so the scroll edge can't clip it */
@media (hover: hover) { .recap-tabs [role="tab"]:hover { background: var(--action-ghost-hover); color: var(--ink); } }
.recap-tabs [role="tab"][aria-selected="true"] { background: var(--tint); box-shadow: inset 0 -3px 0 var(--ink); }
.recap-panel { padding: 30px 0 var(--section); }
.recap-panel + .recap-panel { border-top: 1px solid var(--line); }   /* without the script, the views follow one another */
.tabs-on .recap-panel + .recap-panel { border-top: 0; }
.panel-title { margin-bottom: 8px; }
.tabs-on .panel-title {   /* the selected tab already names the view */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.recap-panel > .wrap > .section-lede, .panel-bar .section-lede { margin-top: 0; }
/* Whatever a link opens lands under the tabs, and wears the copper ring for a moment's notice */
.recap-panel, .qa, .res, .theme { scroll-margin-top: 56px; }   /* with the page's own 24px after the session: just under the tabs */
.qa:target, .res:target, .theme:target { box-shadow: 0 0 0 2px var(--accent); }
.at { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Overview */
.recap-glance { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
.recap-glance .card-link { height: 100%; padding: 16px var(--card-pad); }
.recap-glance strong { display: block; font-size: 2.5rem; line-height: 1; color: var(--link); font-variant-numeric: tabular-nums; }
.recap-glance span { color: var(--muted); }
.recap-start .card h4 { font-size: var(--fs-title); }
.recap-start .card p { color: var(--ink); }
.recap .fold { margin-top: var(--block); }
.morning { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 8px; max-width: var(--measure); }

/* Questions: grouped, folded, so the questions can be scanned and the answers opened one at a time */
.panel-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 24px; }
.panel-bar .section-lede { flex: 1 1 28rem; }
.qa-group { margin: 28px 0 10px; font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink); line-height: 1.3; }
.qa-list { display: grid; gap: 8px; max-width: 52rem; }
.qa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.qa > summary { padding: 10px 18px 10px 12px; font-size: var(--fs-ui-lg); line-height: 1.35; }
.qa[open] > summary { border-bottom: 1px solid var(--line); }
.qa-body { padding: 2px 18px 16px; }
.qa-body > p { margin: 10px 0 0; max-width: 48rem; }
.qa-who { font-size: var(--fs-ui-sm); color: var(--muted); }
.qa .qa-see { color: var(--muted); font-size: var(--fs-read-2); }
/* Researched after the session: marked as ours, not the room's, with what each answer rests on */
.qa-group-note { max-width: 52rem; margin: -4px 0 12px; color: var(--muted); }
.qa > summary .qa-q { flex: 1; }
.qa-tag {   /* a static tag: a pill that doesn't look pressable */
  flex: none; padding: 2px 10px; border: 1px solid var(--control); border-radius: var(--radius-pill);
  color: var(--ink); font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--tracking-badge); text-transform: uppercase;
}
@media (max-width: 600px) {   /* on a phone the tag rides on a line of its own above the question, so the question keeps the width */
  .qa.researched > summary { flex-wrap: wrap; row-gap: 6px; }
  .qa.researched .qa-tag { order: -2; }
  .qa.researched > summary::after { content: ""; order: -1; flex-basis: 100%; }
}
.qa-sources { margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm); background: var(--tint); }
.qa-sources p { margin: 0; font-family: var(--font-sans); font-size: var(--fs-ui-sm); font-weight: 600; color: var(--ink); }
.qa-sources ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--fs-read-2); }

/* Themes: what kept coming up, in our words, with the room's words beside them */
.themes { display: grid; gap: var(--gap); margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.theme { display: flex; flex-direction: column; padding: var(--card-pad); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.theme h4 { font-size: var(--fs-title); line-height: 1.3; }
.theme > p { margin: 8px 0 0; }
.theme-quote { margin: 14px 0 0; padding-left: 14px; border-left: 3px solid var(--accent); }
.theme-quote blockquote { margin: 0; }
.theme-quote p { margin: 0; font-style: italic; font-size: var(--fs-body); line-height: 1.45; }
.theme-quote figcaption { margin-top: 4px; font-family: var(--font-sans); font-size: var(--fs-ui-sm); color: var(--muted); }
.threads { list-style: none; margin: auto 0 0; padding: 16px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.threads a {   /* where to read more: links, so navy and underlined, set small as a row */
  display: inline-flex; align-items: center; min-height: 32px; padding: 3px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); background: var(--surface); font-size: var(--fs-ui-sm); font-weight: 600; text-decoration: none;
}
@media (hover: hover) { .threads a:hover { border-color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; } }

/* Offers and asks */
.asks-grid { display: grid; gap: var(--gap); margin-top: 20px; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); align-items: start; }
.asks-grid .card h4 { font-size: var(--fs-title); }
.offer-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.offer-list .at, .offer-list .pending { font-size: var(--fs-ui-sm); color: var(--muted); }
.ideas-fold { margin-top: 14px; padding-top: 6px; border-top: 1px solid var(--line); }
.ideas-fold p { margin: 6px 0 0; }
.idea-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 6px; }

/* The index: one line each, filtered by kind with the Sources tabs group */
.res-filter { margin: 16px 0 0; }
.res-group { margin: 26px 0 0; font-size: var(--fs-title); }
.res-group-blurb { max-width: 48rem; margin: 6px 0 0; color: var(--muted); }
.res-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
.res { padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.res-name { margin: 0; font-weight: 600; font-size: var(--fs-ui-lg); line-height: 1.3; }
.res-meta { margin: 2px 0 0; font-size: var(--fs-ui-sm); color: var(--muted); }
.res-what { margin: 6px 0 0; font-size: var(--fs-read-2); line-height: 1.45; }
.res-link { margin: 6px 0 0; font-size: var(--fs-read-2); }

/* Reduced motion: nothing moves; color, fill, and opacity still show every state */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
  :root { --lift: none; --press: none; }
  dialog, details > :not(summary) { transform: none !important; }
  .toast { transition-property: opacity; }
}