/* humanshaped.org: one humanist sans (Commissioner), white paper, ink,
   forest and thistle (Ben, October 6: a pairing no brand uses; see
   research/notes/ai-design-anti-patterns.md). Every page uses this one
   stylesheet. Tokens live in :root. --accent is forest in light and
   thistle in dark; --forest and --thistle stay the same in both. */

:root {
  --forest: #1F4D3A;
  --thistle: #DCC4F0;
  --on-thistle: #162019;
  --paper: #FFFFFF;
  --surface: #F6F1FA;
  --card: #FFFFFF;
  --ink: #162019;
  --muted: #4E5B55;
  --rule: #DDE3E0;
  --edge: #7C8A84;
  --accent: #1F4D3A;
  --on-ink: #FFFFFF;
  --danger: #B42318;
  --on-danger: #FFFFFF;
  --band: #1F4D3A;
  --band-ink: #FFFFFF;
  --band-muted: #C5D6CD;
  --band-accent: #DCC4F0;

  --sans: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;
  --measure: 38rem;
  --wide: 74rem;
  --gutter: 1rem;
  --radius: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #131916;
    --surface: #19201D;
    --card: #171D1A;
    --ink: #E8EDEA;
    --muted: #C1CAC5;
    --rule: #28302C;
    --edge: #747D78;
    --accent: #DCC4F0;
    --on-ink: #131916;
  --danger: #FF9B8E;
  --on-danger: #131916;
    --danger: #FF9B8E;
    --on-danger: #131916;
    --band: #1F4D3A;
    --band-ink: #FFFFFF;
    --band-muted: #C5D6CD;
    --band-accent: #DCC4F0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #131916;
  --surface: #19201D;
  --card: #171D1A;
  --ink: #E8EDEA;
  --muted: #C1CAC5;
  --rule: #28302C;
  --edge: #747D78;
  --accent: #DCC4F0;
  --on-ink: #131916;
  --band: #1F4D3A;
  --band-ink: #FFFFFF;
  --band-muted: #C5D6CD;
  --band-accent: #DCC4F0;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* hidden always wins, whatever display a class sets (the trap this site has hit twice). */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-feature-settings: "kern", "liga";
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: var(--gutter); top: -4rem; z-index: 2;
  background: var(--ink); color: var(--on-ink); padding: 0.6rem 1rem; border-radius: 8px;
}
.skip:focus { top: 0.75rem; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }

/* The wordmark: the hyphen is an arch */

.wordmark {
  display: inline-flex; align-items: baseline; color: var(--ink); text-decoration: none;
  font-weight: 680; letter-spacing: -0.025em; line-height: 1; font-size: 1.3rem;
  min-height: 44px; align-items: center;
}
.wordmark .arch {
  width: 0.78em; height: 0.39em; margin: 0 0.02em; color: var(--accent);
  transform: translateY(-0.04em); flex: none;
}
.wordmark .w { display: inline-block; }

/* Header */

.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.5rem 0.75rem; padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.nav { order: 3; width: 100%; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.nav a { color: var(--ink); text-decoration: none; font-size: 0.975rem; font-weight: 500; display: inline-block; padding: 0.35rem 0; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); }
.header-actions { display: flex; align-items: center; gap: 0.5rem; }
.theme-toggle {
  appearance: none; background: transparent; color: var(--ink);
  border: 1px solid var(--edge); border-radius: 999px; width: 40px; height: 40px;
  display: inline-grid; place-items: center; cursor: pointer;
}
.theme-toggle svg { width: 18px; height: 18px; }

/* Actions (research/notes/links-and-actions-notes.md; Ben, October 12,
   2026: "We need a consistent design for links and actions within the
   site"). Anything that stands on its own, whether it goes somewhere or
   does something, is a button: one shape and size, in one of three
   styles. Primary is filled, at most one in a group, and first; secondary
   is outlined; danger is outlined in red, last in its row, and filled red
   only on the final confirmation (.final). Underlined text appears only
   inside a sentence: links, and .text-button for a button in a sentence.
   tools/test/action-styles.test.mjs fails if a retired style returns. */
.btn-primary, .btn-secondary, .btn-danger {
  appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font: inherit; font-family: var(--sans); font-weight: 600; font-size: 1rem; line-height: 1.2;
  padding: 0.65rem 1.1rem; min-height: 44px; border-radius: 10px; border: 1px solid transparent;
  text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.btn-primary svg, .btn-secondary svg, .btn-danger svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--on-ink); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.btn-secondary { background: transparent; border-color: var(--edge); color: var(--ink); }
.btn-secondary:hover { background: var(--surface); border-color: var(--ink); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-danger:hover, .btn-danger.final { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
.btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: 0.55; cursor: default; }
.btn-primary.small, .btn-secondary.small, .btn-danger.small { padding: 0.45rem 0.85rem; min-height: 40px; font-size: 0.95rem; }
.btn-primary.small .long { display: none; }
.band .btn-primary { background: var(--band-ink); border-color: var(--band-ink); color: var(--band); }
.band .btn-primary:hover { background: var(--band-accent); border-color: var(--band-accent); color: var(--on-thistle); }
.band .btn-secondary { color: var(--band-ink); border-color: var(--band-muted); }
.band .btn-secondary:hover { background: transparent; border-color: var(--band-ink); }
.text-button {
  appearance: none; display: inline; background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer;
}
.text-button:hover { text-decoration-thickness: 2px; }

/* Type */

h1, h2, h3 { text-wrap: balance; margin: 0; line-height: 1.1; letter-spacing: -0.025em; font-weight: 650; }
h2 { font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.9rem); max-width: 20ch; }
h3 { font-size: 1.25rem; letter-spacing: -0.012em; line-height: 1.25; }
.kicker { font-size: 1rem; font-weight: 600; color: var(--accent); margin: 0 0 0.75rem; }
.prose { max-width: var(--measure); }
.prose p { margin: 0 0 1.05rem; }
.prose p:last-child { margin-bottom: 0; }
.lead { font-size: 1.2rem; line-height: 1.55; }

.section { padding: 4rem 0; }
.section-head { margin-bottom: 2rem; display: grid; gap: 1.25rem; }

/* Hero */

.hero { padding: 2.5rem 0 4rem; }
.hero-grid { display: grid; gap: 2.5rem; }
.hero .kicker { margin-bottom: 1rem; }
.hero h1 { font-size: clamp(2.5rem, 1.4rem + 4.6vw, 4.75rem); line-height: 1.03; letter-spacing: -0.035em; max-width: 14ch; font-weight: 680; margin: 0; }

.hero .lead { margin: 1.5rem 0 2rem; max-width: 36rem; }

/* The sleeve: the principles themselves, read live from the template,
   each one a sentence about what human-shaped software does. */
.sleeve { background: var(--card); border: 1px solid var(--rule); border-radius: 18px; padding: 1.25rem 1.25rem 1.1rem; box-shadow: 0 24px 48px -36px rgba(22, 32, 25, 0.4); }
.sleeve-list { list-style: none; margin: 0; padding: 0; counter-reset: p; }
.sleeve-list li { counter-increment: p; border-top: 1px solid var(--rule); }
.sleeve-list a { display: grid; grid-template-columns: 1.75rem 1fr; gap: 0.4rem; padding: 0.5rem 0; color: var(--ink); text-decoration: none; font-size: 0.975rem; line-height: 1.35; font-weight: 600; }
.sleeve-list a::before { content: counter(p); color: var(--accent); font-weight: 400; font-variant-numeric: tabular-nums; }
.sleeve-list a:hover .p-lead { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.2em; }
.sleeve-list .p-rest { display: none; }
.sleeve-list li:nth-child(n+6) { display: none; }
.sleeve-more { margin: 0.75rem 0 0; font-weight: 600; font-size: 0.975rem; }
.sleeve-stem { margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 680; letter-spacing: -0.015em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.fine { color: var(--muted); font-size: 0.95rem; margin: 1rem 0 0; max-width: 30rem; }

/* The five weeks card */

.weeks-card { background: var(--surface); border-radius: var(--radius); padding: 1.5rem 1.25rem; align-self: start; }
.weeks-card h2 { font-size: 1.25rem; letter-spacing: -0.01em; max-width: none; margin-bottom: 0.25rem; }
.weeks-card > p { margin: 0 0 1rem; color: var(--muted); font-size: 0.975rem; }
.weeks-card ol { list-style: none; margin: 0; padding: 0; }
.weeks-card li { display: grid; grid-template-columns: 4.75rem 1fr; gap: 0.75rem; padding: 0.7rem 0; border-top: 1px solid var(--rule); font-size: 0.975rem; line-height: 1.45; }
.weeks-card li b { font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }

/* The idea */

.idea { background: var(--surface); }
.idea .statement { font-size: clamp(1.6rem, 1.2rem + 2vw, 2.4rem); line-height: 1.2; letter-spacing: -0.02em; font-weight: 600; max-width: 24ch; margin: 0 0 1.5rem; }
/* A comparison is parallel: both sides share one structure and one type
   style, aligned at the top, so only the words differ. */
.compare { display: grid; gap: 2rem; margin-top: 1rem; align-items: start; }
.compare > div { display: grid; gap: 0.75rem; align-content: start; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.compare .tag { font-weight: 650; font-size: 0.95rem; margin: 0; color: var(--muted); }
.compare p.big { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); max-width: 30ch; }
.compare p.example { margin: 0; color: var(--muted); font-size: 1rem; font-style: italic; max-width: 34rem; }
.compare-more { margin: 1rem 0 0; }
.credit { color: var(--muted); font-size: 0.95rem; margin: 1.5rem 0 0; }

/* Three moves */

.moves { margin: 0; display: grid; gap: 1.75rem; }
.moves > div { display: grid; gap: 0.35rem; }
.moves dt { font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); font-weight: 680; letter-spacing: -0.035em; line-height: 1; color: var(--ink); }
.moves dd { margin: 0; max-width: 34rem; color: var(--muted); }
.moves dd b { color: var(--ink); font-weight: 600; }

/* How a cohort works */

.flow { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; counter-reset: f; }
.flow li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem; display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.flow svg { width: 3rem; height: 3rem; }
.flow h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
.flow p { margin: 0; color: var(--muted); font-size: 0.975rem; line-height: 1.5; }
.cohort-facts { margin-top: 2rem; display: grid; gap: 1rem; }

.idea .flow, .idea .cohort-facts { grid-column: 1 / -1; }
.ways-section { padding-top: 0; }
.idea .prose { margin-top: 1.25rem; }
.ways .prose { margin-top: 1.25rem; }
.band-action { margin: 1.25rem 0 0; }
.band :focus-visible { outline-color: var(--band-accent); }

/* Apps */

.apps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.app { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.app h3 { font-size: 1.4rem; }
.app .own { margin: 0; font-size: 1.1rem; line-height: 1.45; }
.app .facts { margin: 0; color: var(--muted); font-size: 0.975rem; }
.app .gave { margin: 0; font-size: 0.975rem; border-top: 1px solid var(--rule); padding-top: 0.75rem; margin-top: auto; }
.app .status { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--muted); }
/* Every app's card, with a picture of the app over a drawn cover in its
   own tone (October 5, 2026: pages that feel alive). */
.app-grid .app { padding: 0 0 1.25rem; overflow: hidden; }
.app-grid .app > :not(.app-cover-link):not(.app-cover) { margin-left: 1.25rem; margin-right: 1.25rem; }
.app-cover-link { display: block; text-decoration: none; }
.app-cover { position: relative; aspect-ratio: 2 / 1; background: var(--tone, var(--accent)); background-image: radial-gradient(circle at 85% 20%, rgba(255,255,255,0.18), transparent 55%); display: grid; place-items: center; overflow: hidden; margin-bottom: 0.4rem; }
.app-initials { font-size: clamp(2.5rem, 2rem + 3vw, 4rem); font-weight: 680; letter-spacing: -0.04em; color: rgba(255,255,255,0.92); }
.app-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; }
.app-cover.has-image img { opacity: 1; }
.app-cover-link:hover .app-cover { filter: brightness(1.05); }
/* Store screens: a TV app fills its cover; phone screens stand side by
   side, rising from the bottom edge. */
.app-cover.has-shots .app-initials { display: none; }
.app-cover.shots-phone { display: flex; justify-content: center; align-items: flex-start; gap: 6%; padding-top: 7%; }
.app-cover.shots-phone img { position: relative; inset: auto; width: 31%; height: auto; object-fit: contain; border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.45); }
.app-cover-wide.shots-phone img { width: 17%; border-radius: 14px; }
.app-grid { margin-bottom: 2rem; }
.app-cover-wide { aspect-ratio: 3 / 1; border-radius: var(--radius); margin: 0 0 2rem; }
@media (max-width: 40rem) { .app-cover-wide { aspect-ratio: 2 / 1; } }
.app-fallback { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.5rem; }

/* Other ways in */

.ways { display: grid; gap: 3rem; }
.ways ul { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.ways li { padding: 1rem 0; border-top: 1px solid var(--rule); }
.ways li:last-child { border-bottom: 1px solid var(--rule); }
.ways li a { font-weight: 600; font-size: 1.1rem; }
.ways li p { margin: 0.25rem 0 0; color: var(--muted); }

/* Closing band */

.band { background: var(--band); color: var(--band-ink); }
.band .wrap { padding-top: 4.5rem; padding-bottom: 4.5rem; display: grid; gap: 2rem; }
.band .big { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.8rem); line-height: 1.05; letter-spacing: -0.035em; font-weight: 650; max-width: 16ch; margin: 0; }
.band h2.big { margin: 0 0 1.25rem; }
.band p.small { margin: 0; color: var(--band-muted); max-width: 34rem; }

/* Footer */

/* The footer: the wordmark and one line, three short columns of what
   people come back for, and who made it. Credits live on /support/. */
.site-footer { padding: 3rem 0 2.5rem; color: var(--muted); font-size: 0.95rem; border-top: 1px solid var(--rule); background: var(--surface); }
.site-footer .wrap { display: grid; gap: 2rem; }
.site-footer .wordmark { font-size: 1.2rem; }
.site-footer p { margin: 0; max-width: 40rem; }
.footer-brand { display: grid; gap: 0.75rem; align-content: start; }
.footer-brand p { color: var(--ink); max-width: 22rem; }
.footer-brand p a { color: var(--ink); text-decoration: none; }
.footer-brand p a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
.footer-head { font-size: 0.8rem; font-weight: 650;  color: var(--accent); margin: 0 0 0.6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.site-footer ul a { color: var(--ink); text-decoration: none; }
.site-footer ul a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 0.2em; }
.site-footer .footer-made { max-width: none; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.9rem; }
@media (min-width: 720px) {
  .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .site-footer .wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 3rem; }
  .footer-made { grid-column: 1 / -1; }
}

/* Stage page */

.crumbs { color: var(--muted); font-size: 0.95rem; padding-top: 2rem; margin: 0; }
.crumbs a { color: var(--muted); }
.stage-head { padding: 1.25rem 0 2.5rem; }
.stage-head .num { color: var(--accent); font-weight: 600; margin: 0 0 0.5rem; }
.stage-head h1 { font-size: clamp(2.6rem, 1.6rem + 4.5vw, 4.6rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 680; }
.stage-head .where { font-size: 1.2rem; line-height: 1.55; max-width: 36rem; margin: 1.25rem 0 0; }
.stage-layout { display: grid; gap: 2.5rem; padding: 0 0 4rem; }
.stage-toc { order: 2; background: var(--surface); border-radius: var(--radius); padding: 1.25rem; font-size: 0.95rem; }
.stage-toc h2 { font-size: 1rem; letter-spacing: 0; margin: 0 0 0.5rem; color: var(--muted); font-weight: 600; }
.stage-toc ol { list-style: none; margin: 0; padding: 0; }
.stage-toc a { display: grid; grid-template-columns: 2rem 1fr; padding: 0.45rem 0.5rem; margin: 0 -0.5rem; color: var(--ink); text-decoration: none; border-radius: 8px; }
.stage-toc a span { color: var(--muted); font-variant-numeric: tabular-nums; }
.stage-toc a:hover { background: var(--card); }
.stage-toc a[aria-current="page"] { background: var(--card); font-weight: 600; }
.stage-toc a[aria-current="page"] span { color: var(--accent); }
.article { max-width: var(--measure); }
.article h2 { font-size: clamp(1.55rem, 1.25rem + 1.3vw, 2rem); margin: 3rem 0 1rem; max-width: none; }
.article p, .article li { margin: 0 0 1.05rem; }
.article ol, .article ul { padding-left: 1.3rem; margin: 0 0 1.25rem; }
.article li::marker { color: var(--accent); font-weight: 600; }
.article blockquote { margin: 1.5rem 0; padding: 1.1rem 1.25rem; background: var(--surface); border-radius: 12px; font-size: 1.075rem; }
.article blockquote p { margin: 0; }
.article .thesis { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 2rem 0; }
.article code { font-family: inherit; font-weight: 600; }
.bring-back { margin: 3rem 0 0; padding: 1.5rem 1.25rem; background: var(--surface); border-radius: var(--radius); font-size: 1.15rem; line-height: 1.5; }
.bring-back strong { color: var(--accent); }
/* A stage's question (curriculum C7): the lesson starts here, so it sits
   apart, before the steps, in the same quiet panel as the bring-back. */
.prose ol.rounds { padding-left: 1.2rem; display: grid; gap: 0.6rem; }
.wk-move { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.4; }
.wk-lead { color: var(--ink); font-weight: 600; }
.stage-question { margin: 1.5rem 0 2rem; padding: 1.25rem; background: var(--surface); border-radius: var(--radius); }
.stage-question p { margin: 0; }
.stage-question-label { font-size: 0.85rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.stage-question-text { margin-top: 0.35rem !important; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.35; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
/* The "Stuck?" line on /cohort/ and in the run of show. */
.stuck-line { margin: 0.75rem 0 0; }
.show-stuck { margin: 0; padding: 0.6rem 0.8rem; border: 1px solid var(--rule); border-radius: var(--radius); }
.next-stage { margin-top: 2rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-weight: 600; }

/* The home page after Ben's review of October 5 (DECISIONS.md): the
   why under the comparison, and three ways in. */
.tint { background: var(--surface); }
.ways-in { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ways-in li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; }
.ways-in h3 { font-size: 1.2rem; margin-bottom: 0.35rem; }
.ways-in p { margin: 0; color: var(--muted); line-height: 1.5; }

@media (min-width: 40rem) {
  :root { --gutter: 1.5rem; }
  .compare { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; }
  .apps { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 56rem) {
  :root { --gutter: 2.5rem; }
  .site-header .wrap { gap: 0.75rem 2rem; padding-top: 1rem; padding-bottom: 1rem; }
  .wordmark { font-size: 1.4rem; }
  .nav { order: 0; width: auto; margin-left: auto; }
  .theme-toggle { width: 44px; height: 44px; }
  .btn-primary.small .long { display: inline; }
  .hero { padding: 4.5rem 0 6rem; }
  .weeks-card { padding: 1.75rem 1.75rem 1.25rem; }
  .section { padding: 6rem 0; }
  .section-head { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; align-items: start; margin-bottom: 3rem; }
  .idea .wrap { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 0 4rem; }
  .idea .compare { grid-column: 1 / -1; }
  .idea .prose { margin-top: 2.1rem; }
  .moves > div { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: baseline; gap: 2rem; }
  .ways-in { grid-template-columns: repeat(3, 1fr); }
  .flow { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .flow li { grid-template-columns: 1fr; padding: 1.5rem; }
  .cohort-facts { grid-template-columns: repeat(2, 1fr); gap: 4rem; }
  .apps { gap: 1.25rem; }
  .app { padding: 1.75rem; }
  .ways { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .band .wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 4rem; }
  .stage-layout { grid-template-columns: minmax(0, 1fr) 16rem; gap: 5rem; }
  .stage-toc { order: 0; grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem; align-self: start; }
  .article { grid-column: 1; grid-row: 1; font-size: 1.125rem; }
}

/* ------------------------------------------------------------------
   The live site: shared pieces beyond the Commons mockup
   ------------------------------------------------------------------ */

.nav a[aria-current] { color: var(--accent); }
.nav ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Inner page heads */

.page-head { padding: 2.5rem 0 3rem; display: grid; gap: 2.5rem; }
.page-head h1 { font-size: clamp(2.4rem, 1.5rem + 4vw, 4.4rem); line-height: 1.03; letter-spacing: -0.035em; font-weight: 680; max-width: 15ch; }
.page-head .lead { margin: 1.25rem 0 0; max-width: 38rem; }
.page-head .fine { margin-top: 1.25rem; }
.section.first { padding-top: 0; }
.section-more { margin: 2rem 0 0; font-weight: 600; }

/* A link that stands on its own takes .btn-secondary (see Actions). */

/* Reading view: what the renderer adds */

.stage-head .meta { color: var(--muted); margin: 1rem 0 0; max-width: 36rem; }
.stage-head .where[hidden], .stage-head .meta[hidden] { display: none; }
.article { overflow-wrap: break-word; }
.article h3 { font-size: 1.25rem; margin: 2.25rem 0 0.75rem; }
.article h2 + h3 { margin-top: 1.25rem; }
.article h2[id], .article h3[id] { scroll-margin-top: 1.5rem; }
.article strong { font-weight: 650; }
.article hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }
.article pre {
  font-family: inherit; white-space: pre-wrap; background: var(--surface);
  border-radius: 12px; padding: 1rem 1.25rem; font-size: 0.975rem; margin: 1.5rem 0;
}
.article pre code { font-weight: 500; }
.article img { max-width: 100%; height: auto; border-radius: 12px; }
.article a code { color: inherit; }
.article .bring-back { margin: 3rem 0 0; }
.article blockquote > :last-child { margin-bottom: 0; }
.article blockquote p + p { margin-top: 0.75rem; }
.table-wrap {
  overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--rule);
  border-radius: 12px; background: var(--card);
}
.article table { border-collapse: collapse; width: 100%; font-size: 0.975rem; line-height: 1.5; }
.article th, .article td { text-align: left; vertical-align: top; padding: 0.75rem 1rem; border-top: 1px solid var(--rule); }
.article thead th { border-top: 0; font-weight: 600; color: var(--muted); }
.article td { min-width: 10rem; }
.article td p { margin: 0; }
.source {
  color: var(--muted); font-size: 0.95rem; margin: 3rem 0 0; padding-top: 1.25rem;
  border-top: 1px solid var(--rule); max-width: var(--measure);
}
.stage-toc + .stage-toc { margin-top: 0; }
.toc-stack { display: grid; gap: 1rem; align-content: start; order: 2; }
.toc-stack .stage-toc { order: 0; }
.stage-toc .doc-toc a { grid-template-columns: 1fr; }
.stage-toc p { margin: 0.25rem 0 0; color: var(--muted); }
.stage-toc p a { display: inline; padding: 0; margin: 0; color: var(--accent); text-decoration: underline; }
.stage-toc p a:hover { background: none; }

/* Loading and error states */

.doc-status:empty { display: none; }
.doc-loading p { color: var(--muted); margin: 0 0 1.25rem; }
.doc-loading .line { display: block; height: 0.85rem; background: var(--surface); border-radius: 6px; margin: 0 0 0.9rem; animation: breathe 1.8s ease-in-out infinite; }
.doc-loading .line:nth-child(3) { width: 92%; }
.doc-loading .line:nth-child(4) { width: 97%; }
.doc-loading .line:nth-child(5) { width: 64%; }
@keyframes breathe { 50% { opacity: 0.5; } }
.doc-error { background: var(--surface); border-radius: var(--radius); padding: 1.5rem 1.25rem; }
.doc-error h2 { font-size: 1.35rem; letter-spacing: -0.015em; margin: 0 0 0.5rem; max-width: none; }
.doc-error p { margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; margin-top: 1.25rem; }


/* The path: nine stages */

.stages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.stages li { border-bottom: 1px solid var(--rule); }
.stages a { display: grid; grid-template-columns: 2.75rem 1fr; gap: 0.2rem 0.75rem; padding: 1.25rem 0; color: var(--ink); text-decoration: none; }
.stages .n { color: var(--accent); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.1rem; line-height: 1.35; }
.stages .t { font-size: 1.3rem; font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; }
.stages .l { grid-column: 2; color: var(--muted); }
.stages a:hover .t { color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.stages .aside .n { font-size: 1rem; }
/* /cohorts/: the stages, grouped by the week a cohort reads them. */
.stages .week-row { padding: 1.75rem 0 0.4rem; border-bottom: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.stages .week-row .wk { color: var(--accent); font-weight: 650; font-size: 0.9rem;  }
.stages .week-row .wk-what { color: var(--ink); font-weight: 600; }
.stages .week-row:first-child { padding-top: 1rem; }
.stages.by-week { border-top: 0; }

/* The cohort table */

.weeks-table { width: 100%; border-collapse: collapse; font-size: 0.975rem; line-height: 1.5; }
.weeks-table th, .weeks-table td { text-align: left; vertical-align: top; }
.weeks-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.weeks-table tr { display: block; padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.weeks-table tbody tr:last-child { border-bottom: 1px solid var(--rule); }
.weeks-table th[scope="row"], .weeks-table td { display: block; padding: 0.2rem 0; }
.weeks-table th[scope="row"] { color: var(--accent); font-weight: 600; font-size: 1.1rem; }
.weeks-table td::before { content: attr(data-label); display: block; font-weight: 600; color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; }
.table-note { margin-top: 2rem; }

/* Apps */

.app .links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; font-size: 0.975rem; font-weight: 600; }
.app .links a { display: inline-block; padding: 0.3rem 0; }
.app .note { margin: 0; color: var(--muted); font-size: 0.95rem; }
.app .story { margin: 0; font-weight: 600; }

/* Cohorts, start: plain sections of prose */

.topics { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem; }
.topic h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); max-width: none; margin-bottom: 1rem; }
.topic .prose p { margin: 0 0 1rem; }
.topic[id] { scroll-margin-top: 1.5rem; }
.steps { margin: 0.5rem 0 0; padding-left: 1.3rem; max-width: var(--measure); }
.steps li { margin: 0 0 0.9rem; overflow-wrap: anywhere; }
.steps li::marker { color: var(--accent); font-weight: 600; }

/* The human-shaped mark, on /start/ */
.topic h3 { font-size: 1.25rem; margin: 2.25rem 0 0.75rem; scroll-margin-top: 1.5rem; }
.marks { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.marks img { display: block; height: 44px; width: auto; }
/* The two marks, side by side (DECISIONS.md, October 5, 2026). */
.mark-kinds { list-style: none; margin: 1.25rem 0 1.5rem; padding: 0; display: grid; gap: 1rem; }
.mark-kinds li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem; }
.mark-kinds img { display: block; height: 44px; width: auto; margin-bottom: 0.9rem; }
.mark-kinds.just-marks { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0; }
.mark-kinds.just-marks li { padding: 1rem 1.25rem; }
.mark-kinds.just-marks img { margin: 0; }
.mark-kinds h3 { font-size: 1.1rem; margin-bottom: 0.35rem; }
.mark-kinds p { margin: 0; color: var(--muted); line-height: 1.5; }
@media (min-width: 40rem) { .mark-kinds { grid-template-columns: 1fr 1fr; } }
.mark-dark { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .mark-light { display: none !important; }
  :root:not([data-theme="light"]) .mark-dark { display: block !important; }
}
:root[data-theme="dark"] .mark-light { display: none !important; }
:root[data-theme="dark"] .mark-dark { display: block !important; }
.snippet { max-width: var(--measure); }
.snippet pre {
  margin: 0; padding: 0.9rem 1rem; background: var(--surface); border-radius: 10px;
  font: 500 0.875rem/1.55 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere;
}
.snippet .actions { margin-top: 0.75rem; }
.join { scroll-margin-top: 0; }
.join .wrap { align-items: start; }
.join h2 { color: var(--band-ink); font-size: clamp(2rem, 1.3rem + 3vw, 3.2rem); line-height: 1.05; letter-spacing: -0.035em; max-width: 14ch; }
.join .prose p { color: var(--band-ink); margin: 0 0 1rem; }
.join .prose p.small { color: var(--band-muted); }
.join a:not(.btn-primary):not(.btn-secondary) { color: var(--band-ink); text-decoration-color: var(--band-accent); }
.join .btn-primary { margin-right: 0.25rem; }

/* 404 */

.lost { padding-top: 4rem; padding-bottom: 5rem; }
.lost ul { list-style: none; margin: 2rem 0 0; padding: 0; max-width: var(--measure); }
.lost li { padding: 0.9rem 0; border-top: 1px solid var(--rule); }
.lost li:last-child { border-bottom: 1px solid var(--rule); }
.lost li a { font-weight: 600; font-size: 1.1rem; }
.lost li p { margin: 0.2rem 0 0; color: var(--muted); }

@media (min-width: 56rem) {
  .nav ul { display: flex; gap: 0.25rem 1.5rem; }
  .page-head { padding: 4.5rem 0 4rem; }
  .page-head.split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: center; padding-bottom: 5rem; }
  .stages a { grid-template-columns: 4rem minmax(0, 5fr) minmax(0, 6fr); align-items: baseline; gap: 2rem; padding: 1.5rem 0; }
  .stages .l { grid-column: 3; }
  .weeks-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; display: table-header-group; }
  .weeks-table tr { display: table-row; padding: 0; border: 0; }
  .weeks-table tbody tr:last-child { border: 0; }
  .weeks-table th, .weeks-table td, .weeks-table th[scope="row"] { display: table-cell; padding: 1.1rem 1.25rem 1.1rem 0; border-top: 1px solid var(--rule); }
  .weeks-table tbody tr:last-child > * { border-bottom: 1px solid var(--rule); }
  .weeks-table thead th { color: var(--muted); font-weight: 600; font-size: 0.95rem; border-top: 0; padding-top: 0; }
  .weeks-table th[scope="row"] { width: 6rem; font-size: 1rem; }
  .weeks-table td::before { display: none; }
  .topics { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem 5rem; }
  .topics.single { grid-template-columns: minmax(0, 1fr); }
  .toc-stack { order: 0; grid-column: 2; grid-row: 1; position: sticky; top: 1.5rem; align-self: start; }
  .toc-stack .stage-toc { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Late additions: layout hooks for the reading column, the week table and the 404 */
.weeks-block { grid-column: 1 / -1; margin-top: 2.5rem; }
.article-col { min-width: 0; }
.lost h1 { font-size: clamp(2.4rem, 1.5rem + 4vw, 4.2rem); line-height: 1.03; letter-spacing: -0.035em; font-weight: 680; max-width: 15ch; margin-bottom: 1.25rem; }
@media (min-width: 56rem) {
  .article-col { grid-column: 1; grid-row: 1; }
}
.next-stage { max-width: var(--measure); }
@media (min-width: 56rem) { .toc-stack .stage-toc { grid-column: auto; grid-row: auto; } }
@media (min-width: 56rem) { .join .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Account */
.account { max-width: 44rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.account > * { min-width: 0; }
.account h2 { margin-top: 2rem; font-size: 1.35rem; }
.account .who { display: flex; gap: 1rem; align-items: center; }
.account .avatar { border-radius: 50%; border: 1px solid var(--rule); }
.account .name { margin: 0; font-weight: 600; font-size: 1.15rem; }
.account .error { color: var(--accent); font-weight: 600; }
.cohort-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem; margin-top: 0.75rem; }
.cohort-card h3 { margin: 0 0 0.35rem; font-size: 1.15rem; }
dialog.confirm { max-width: 30rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper, var(--card)); color: var(--ink); padding: 1.5rem; }
dialog.confirm::backdrop { background: rgb(0 0 0 / 0.45); }
dialog.confirm h2 { margin-top: 0; font-size: 1.3rem; }
.account .small { color: var(--muted); font-size: 0.95rem; }
.account { padding-bottom: 4rem; }

/* Teaching */
.teach h3 { margin-top: 2rem; font-size: 1.15rem; }
.cohort-form:not([hidden]), .session-row, .inline-form { display: grid; gap: 0.9rem; margin-top: 1rem; }
.cohort-form label, .session-row label, .inline-form label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
.cohort-form input, .cohort-form select, .cohort-form textarea,
.session-row input, .session-row textarea, .inline-form input, .inline-form textarea {
  font: inherit; font-weight: 400; padding: 0.6rem 0.7rem; border: 1px solid var(--muted);
  border-radius: 10px; background: var(--card); color: var(--ink); min-height: 44px;
}
.cohort-form .row { display: grid; gap: 0.9rem; }
.cohort-form .hint { font-weight: 400; color: var(--muted); font-size: 0.9rem; }
label.check { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; }
.session-row { border-top: 1px solid var(--rule); padding-top: 1rem; }
.session-when { margin: 0; font-weight: 600; }
.roster { padding-left: 1.1rem; }
.roster li { margin: 0.35rem 0; }
@media (min-width: 40rem) { .cohort-form .row { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); } }
.teach h2, .account h2 { max-width: none; }

/* Cohort page */
.cohort-page .page-head { padding-top: 0; }
.cohort-grid { display: grid; gap: 1rem; }
.cohort-grid .cohort-card h2 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.cohort-page section > h2 { margin-top: 2.5rem; font-size: 1.4rem; }
.commits { border-top: 1px solid var(--rule); padding-top: 0.6rem; }
.commit-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: 0.95rem; }
.share .kicker { font-size: 0.9rem; margin-bottom: 0.4rem; }
.feedback { margin: 0.75rem 0 0; padding: 0.6rem 0.9rem; border-left: 3px solid var(--rule); }
.feedback p { margin: 0; }
.cohort-page .apps { margin-top: 1rem; }
@media (min-width: 48rem) { .cohort-grid { grid-template-columns: 1fr 1fr; } }
.account.cohort-page { max-width: 62rem; }
.cohort-page form.cohort-form, .cohort-page .prose-width { max-width: 44rem; }

/* Live session */
.live-page .notice { background: var(--surface); border-radius: 8px; padding: 0.4rem 0 0.4rem 0.9rem; max-width: 44rem; }
.agenda { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.75rem; }
.agenda-part { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.25rem; display: grid; gap: 0.35rem; justify-items: start; }
.agenda-part h3 { font-size: 1.1rem; }
.agenda-part p { margin: 0; }
@media (min-width: 48rem) { .agenda { grid-template-columns: 1fr 1fr; } }

/* Printable sheets (/start/sheets/). A sheet is a page of paper: its type
   is sized against its own width, so the preview and the print match. */
.sheets { display: grid; gap: 3.5rem; }
.sheet-block { scroll-margin-top: 1.5rem; }
.sheet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; max-width: 8.5in; }
.sheet-head h2 { margin: 0; font-size: 1.5rem; }
.sheet {
  container-type: inline-size; max-width: 8.5in; aspect-ratio: 8.5 / 11;
  background: #FFFFFF; color: #162019; border: 1px solid var(--rule); border-radius: 6px;
  padding: 7cqi 7.5cqi; display: flex; flex-direction: column; overflow: hidden;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.sheet-mark { display: flex; align-items: center; margin: 0; font-weight: 680; letter-spacing: -0.025em; font-size: 2.6cqi; line-height: 1; }
.sheet-mark svg { width: 0.78em; height: 0.39em; margin: 0 0.02em; color: #1F4D3A; }
.sheet-title { margin: 3cqi 0 0; font-size: 5.6cqi; line-height: 1.05; letter-spacing: -0.02em; font-weight: 680; max-width: none; }
.sheet-intro { margin: 2cqi 0 0; font-size: 2.2cqi; color: #4E5B55; }
.sheet-stem { margin: 3cqi 0 0; font-size: 2.6cqi; font-weight: 680; color: #162019; }
.sheet-list { margin: 3cqi 0 0; padding: 0 0 0 3.4cqi; }
.sheet-list li::marker { color: #1F4D3A; font-weight: 680; }
.sheet-list b { font-weight: 640; }
.sheet-principles .sheet-list { columns: 2; column-gap: 5cqi; font-size: 1.95cqi; line-height: 1.38; }
.sheet-principles .sheet-list li { break-inside: avoid; margin: 0 0 1.5cqi; padding-left: 0.6cqi; }
.sheet-questions .sheet-title { margin-top: 9cqi; font-size: 4.2cqi; color: #4E5B55; font-weight: 600; }
.sheet-questions .sheet-list { padding-left: 7.5cqi; font-size: 6.6cqi; line-height: 1.12; font-weight: 680; letter-spacing: -0.02em; }
.sheet-questions .sheet-list li { margin: 0 0 4.6cqi; padding-left: 1.2cqi; }
.sheet-after { margin: 2cqi 0 0; font-size: 2.7cqi; line-height: 1.4; color: #4E5B55; max-width: 46em; }
.sheet-status { margin: 3cqi 0 0; font-size: 2.2cqi; color: #4E5B55; }
.sheet-foot { margin: auto 0 0; padding-top: 2.5cqi; border-top: 1px solid #DDE3E0; font-size: 1.6cqi; color: #4E5B55; }

@media print {
  @page { margin: 0.45in; }
  body { background: #FFFFFF; }
  .site-header, .site-footer, .skip, .page-head, .sheet-head { display: none !important; }
  main .wrap, .section { padding: 0 !important; margin: 0 !important; max-width: none; }
  .sheets { display: block; }
  .sheet { border: 0; border-radius: 0; padding: 0; max-width: none; width: 100%; aspect-ratio: auto; height: 9.9in; }
  .sheet-block { break-after: page; }
  .sheet-block:last-child { break-after: auto; }
  body[data-printing="principles"] #questions,
  body[data-printing="questions"] #principles { display: none; }
}

/* The feedback queue on /teach/ */
.queue { margin-bottom: 3rem; }
.queue .cohort-card .small { margin: 0 0 0.5rem; }

/* Open cohorts on /cohorts/, and the chosen one on /account/ */
.open-cohorts { display: grid; gap: 1rem; margin: 1.5rem 0; }
.open-cohort { border: 1px solid var(--band-muted); border-radius: var(--radius); padding: 1.25rem; }
.open-cohort h3 { margin: 0 0 0.35rem; font-size: 1.25rem; }
.open-cohort p { margin: 0 0 0.5rem; }
.band .open-cohort p.small { color: var(--band-muted); }
.open-cohort .actions { margin-top: 1rem; }
.cohort-card.chosen { border-color: var(--accent); border-width: 2px; }
.teach-link { margin: 1.5rem 0 0; }

/* The conversation fields on /teach/ */
.cohort-form fieldset { border: 1px solid var(--rule); border-radius: 10px; padding: 1rem; margin: 0; display: grid; gap: 0.9rem; }
.cohort-form legend { font-weight: 600; padding: 0 0.35rem; }
.cohort-form fieldset .small { margin: 0; }

/* Connecting an agent (/oauth/consent/, /connect/) */
.consent h2 { font-size: 1.35rem; margin: 0 0 0.5rem; }
.consent-lists { display: grid; gap: 1rem 2.5rem; margin: 1.5rem 0; }
.consent-lists h3 { font-size: 1rem; margin: 0 0 0.4rem; }
.consent-lists ul { margin: 0; padding-left: 1.2rem; }
.consent-lists li { margin: 0 0 0.35rem; }
@media (min-width: 720px) { .consent-lists { grid-template-columns: 1fr 1fr; } }
.connect pre { margin: 0.5rem 0 1rem; padding: 0.9rem 1rem; background: var(--surface); border-radius: 10px;
  font: 500 0.875rem/1.55 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
.notice { background: var(--surface); border-radius: 8px; padding: 0.6rem 1rem; margin: 1.5rem 0; max-width: var(--measure); }

/* Getting ready, on /cohort/ */
.setup-card { margin: 0 0 1.5rem; }
.setup-steps { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.setup-steps li { position: relative; padding-left: 2rem; }
.setup-steps li::before {
  content: ""; position: absolute; left: 0; top: 0.2em; width: 1.15rem; height: 1.15rem;
  border: 2px solid var(--edge); border-radius: 50%;
}
.setup-steps li.done::before { background: var(--accent); border-color: var(--accent); }
.setup-steps li.done a { color: var(--muted); }
.setup-steps li.optional::before { border-style: dashed; }

/* Before the first session, on /teach/: steps that act on the page are
   buttons, drawn like the links beside them. */
.setup-steps button.link {
  font: inherit; color: var(--accent); background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  text-align: left; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
}
.setup-steps button.link:hover { text-decoration-thickness: 2px; }
.setup-steps li.done button.link { color: var(--muted); }
.teach .setup-card h3 { margin-top: 0; }

/* The public hub: each app's page (/apps/app/), and the feed of work in
   progress on /apps/ and the home page */
.app-page { padding-bottom: 4rem; }
.app-page .small, .feed-block .small { color: var(--muted); font-size: 0.95rem; }
.app-page .page-head { padding-top: 1.5rem; }
.app-page .page-head h1 { overflow-wrap: anywhere; }
.app-page .lead.own { font-size: 1.3rem; line-height: 1.45; }
.app-page .fine { margin-top: 0.75rem; }
.where h2 { font-size: 1.15rem; margin: 0 0 0.5rem; max-width: none; }
.where p { margin: 0 0 0.75rem; color: var(--muted); }
.where .links, .app-page .links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; font-weight: 600; }
.where .links a { display: inline-block; padding: 0.3rem 0; }
.app-section { max-width: 46rem; margin-top: 3rem; }
.app-section > h2 { font-size: 1.5rem; max-width: none; margin-bottom: 0.5rem; }
.app-section > .small { margin: 0 0 1rem; }
.app-section p { margin: 0 0 1rem; }
.app h3 a { color: inherit; text-decoration: none; }
.app h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.feed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.feed li { display: grid; gap: 0.1rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.feed .feed-app { grid-column: 1 / -1; font-size: 0.9rem; font-weight: 600; color: var(--muted); text-decoration: none; }
.feed .feed-app:hover { color: var(--accent); text-decoration: underline; }
.feed .feed-line { color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.feed .feed-line:hover { color: var(--accent); text-decoration: underline; }
.feed .feed-when { color: var(--muted); font-size: 0.9rem; white-space: nowrap; }
.feed-block { margin: 3rem 0 4rem; max-width: 46rem; }
.feed-block + .section-more { margin-top: 0; }
.feed-block h2, .feed-block h3 { font-size: 1.25rem; letter-spacing: -0.012em; line-height: 1.25; max-width: none; margin: 0 0 0.35rem; }
.feed-block > p { margin: 0 0 1rem; }
.feed-block [data-feed-note]:empty { display: none; }

/* Events and the community's newest conversations (/events/, /start/) */
.events { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); max-width: 46rem; }
.event { padding: 1.25rem 0; border-bottom: 1px solid var(--rule); }
.event h3 { font-size: 1.3rem; line-height: 1.25; margin: 0.15rem 0 0.35rem; max-width: none; overflow-wrap: anywhere; }
.event h3 a { color: inherit; text-decoration: none; }
.event h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.event p { margin: 0 0 0.4rem; }
.event .event-kind { font-size: 0.85rem; font-weight: 600;  color: var(--accent); margin: 0; }
.event .event-when { font-weight: 600; }
.event .event-where, .event .small { color: var(--muted); }
.event .links { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; font-weight: 600; }
.event .links a { display: inline-block; padding: 0.3rem 0; }
.next-events { margin: 0 0 1.25rem; }
.community-threads { margin: 0 0 1.5rem; }
.app-threads { margin: 0 0 1rem; }
.app-threads .feed li, .community-threads .feed li { grid-template-columns: minmax(0, 1fr); }
.app-threads .feed-when, .community-threads .feed-when { white-space: normal; }

.answers { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.answer { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.answer p { margin: 0.35rem 0 0; }
.answer .answer-head { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; }
.answer-title { font-weight: 600; }
.answer-tag { font-size: 0.9rem; font-weight: 600; color: var(--muted); border: 1px solid var(--edge); border-radius: 999px; padding: 0.05rem 0.6rem; white-space: nowrap; }
.answer-tag.is-meets { color: var(--accent); border-color: var(--accent); }
.answer-tag.is-not-yet { border-style: dashed; }

@media (min-width: 40rem) {
  .feed li { grid-template-columns: minmax(0, 1fr) auto; }
}
@media (min-width: 56rem) {
  .app-page .page-head.split { padding-top: 2.5rem; padding-bottom: 3rem; align-items: start; }
}

/* Showing your app in public, on /cohort/ */
.public-choice { display: grid; gap: 0.35rem; }
.public-choice .hint { margin: 0 0 0 1.75rem; }

/* ------------------------------------------------------------------
   The credential (M4): /credential/, /credential/issuer/, and issuing
   it on /teach/
   ------------------------------------------------------------------ */
.credential-page .page-head h1 { max-width: 18ch; overflow-wrap: anywhere; }
.check-card h2 { font-size: 1.15rem; margin: 0 0 0.5rem; max-width: none; }
.check-line { margin: 0; padding-left: 1.6rem; position: relative; }
.check-line::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 1rem; height: 1rem;
  border: 2px solid var(--edge); border-radius: 50%;
}
.check-line.is-ok::before { background: var(--accent); border-color: var(--accent); }
.check-line.is-bad { color: var(--accent); font-weight: 600; }
.check-line.is-bad::before { border-color: var(--accent); border-style: dashed; }
.evidence { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.evidence li { display: grid; gap: 0.1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.evidence a, .evidence li > span:first-child { font-weight: 600; }
.evidence .small { overflow-wrap: anywhere; }
.levels { margin-top: 1rem; }
.levels li { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 0.1rem 0.75rem; padding: 0.75rem 0; align-items: baseline; scroll-margin-top: 1.5rem; }
.levels li:target .t { color: var(--accent); }
.levels .t { font-size: 1.05rem; }
.levels .l { grid-column: auto; font-size: 0.9rem; white-space: nowrap; }
.levels .l a { display: inline; padding: 0; color: var(--accent); }
.credential-topics { padding-bottom: 4rem; max-width: 46rem; }
.credential-topics code { font-size: 0.95em; overflow-wrap: anywhere; }

/* Issuing on /teach/ */
.credential-person .who-line { margin: 0 0 0.35rem; font-weight: 600; }
.credential-person .small { margin: 0 0 0.5rem; }
.credential-person ul.links { list-style: none; margin: 0 0 0.5rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.25rem; font-weight: 600; overflow-wrap: anywhere; }
.platform-choices { border: 1px solid var(--rule); border-radius: 10px; padding: 1rem; margin: 0; display: grid; gap: 0.25rem; }
.inline-form label.check { min-height: 2.25rem; }
.inline-form label.check input { min-height: 0; }
.platform-choices legend { font-weight: 600; padding: 0 0.35rem; }
.platform-choices input[type="url"] { margin-left: 1.75rem; }
.signing-request { width: 100%; font: 500 0.85rem/1.5 var(--sans); padding: 0.6rem; border: 1px solid var(--muted); border-radius: 10px; background: var(--surface); color: var(--ink); }
.file-pick { position: relative; overflow: hidden; }
.file-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

/* ------------------------------------------------------------------
   M3: the live session's queue and checks for understanding (/live/).
   Self-contained: every rule here is scoped to .live-page.
   ------------------------------------------------------------------ */
.live-page .live-block { max-width: 44rem; }
.live-page .live-block > h2 { margin-top: 2.5rem; }
.live-page .live-block > .small { margin: 0.5rem 0 0; }
.live-page .inline-form select {
  font: inherit; font-weight: 400; padding: 0.6rem 0.7rem; border: 1px solid var(--muted);
  border-radius: 10px; background: var(--card); color: var(--ink); min-height: 44px; max-width: 100%;
}
.live-page .inline-form .hint { font-weight: 400; color: var(--muted); }
.live-page .live-queue { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.75rem; counter-reset: live; }
.live-page .live-item {
  counter-increment: live; position: relative; background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1rem 1rem 1rem 3rem; display: grid; gap: 0.35rem;
}
.live-page .live-item::before {
  content: counter(live); position: absolute; left: 1rem; top: 1rem; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; border: 1px solid var(--edge); display: grid; place-items: center;
  font-size: 0.85rem; font-weight: 650; color: var(--muted);
}
.live-page .live-item.next { border-color: var(--accent); border-width: 2px; }
.live-page .live-item.next::before { background: var(--accent); border-color: var(--accent); color: var(--on-ink); }
.live-page .live-queue.shown .live-item::before { content: "✓"; }
.live-page .live-item p { margin: 0; }
.live-page .live-item .kicker { font-size: 0.85rem; margin: 0; }
.live-page .live-item .actions { margin-top: 0.5rem; gap: 0.5rem 0.75rem; }
.live-page .live-empty { list-style: none; color: var(--muted); }
.live-page details.live-shown, .live-page details.live-earlier { margin-top: 1rem; }
.live-page details > summary { cursor: pointer; font-weight: 600; padding: 0.6rem 0; }
.live-page .live-add, .live-page .live-ask { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1.25rem; }
.live-page fieldset.live-mode { border: 0; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.live-page fieldset.live-mode legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 0.35rem; }
.live-page .live-mode label.check { min-height: 44px; }
.live-page .live-checks { display: grid; gap: 0.75rem; margin-top: 1rem; }
.live-page .live-check { margin-top: 0; }
.live-page .live-check .kicker { font-size: 0.85rem; margin-bottom: 0.35rem; }
.live-page .live-check h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.live-page .live-check > p { margin: 0.35rem 0; }
.live-page .live-tally ul { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.live-page .live-tally li { display: grid; grid-template-columns: minmax(0, 1fr) 2rem; gap: 0.25rem 0.75rem; align-items: center; }
.live-page .live-tally .label { grid-column: 1 / -1; font-size: 0.95rem; }
.live-page .live-tally .bar { display: block; height: 0.6rem; border-radius: 999px; background: var(--rule); position: relative; overflow: hidden; }
.live-page .live-tally .bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); background: var(--accent); border-radius: 999px; }
.live-page .live-tally .count { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.live-page .live-tally p { margin: 0.35rem 0 0; }
/* The question bank (R4): the kinds' own pieces, in the panel and on /live/. */
.live-page .live-tally li { grid-template-columns: minmax(0, 1fr) auto; }
.live-page .question-words { margin-top: 0.75rem; font-size: 0.95rem; }
.live-page .question-scale-points { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }
.live-page .question-rank { margin: 0.5rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; counter-reset: rank; }
.live-page .question-rank li { counter-increment: rank; display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: 0.35rem 0.5rem; align-items: center; padding: 0.5rem 0.75rem; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.live-page .question-rank li::before { content: counter(rank) "."; font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; }
.live-page .question-rank .label { overflow-wrap: anywhere; }
.live-page .question-rank-moves { grid-column: 2; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.live-page .question-rank-moves .btn-secondary { min-height: 2.25rem; font-size: 0.9rem; padding: 0.25rem 0.75rem; }
.live-page .question-fields { display: grid; gap: 0.75rem; }
.question-fields .hint { display: block; }
.live-page .question-scale:not([hidden]) { display: grid; gap: 0.75rem; }
.live-page .question-edit { margin-top: 0.75rem; }
.live-page .live-scene-question:not([hidden]) { border: 2px solid var(--accent); border-radius: var(--radius); background: var(--card); padding: 0.9rem; display: grid; gap: 0.35rem; margin-top: 0.75rem; }
.live-page .live-scene-question p { margin: 0; }
/* Whose work is on the main stage, and the audience's part (R7). */
.live-page .on-stage:not([hidden]) { border: 2px solid var(--accent); border-radius: var(--radius); background: var(--card); padding: 0.9rem; display: grid; gap: 0.35rem; margin: 0.5rem 0 0.75rem; }
.live-page .on-stage p { margin: 0; }
.live-page .on-stage .kicker { font-size: 0.85rem; }
.live-page .on-stage-line { font-weight: 650; }
.live-page .on-stage-audience { background: var(--surface); border-radius: 8px; padding: 0.35rem 0.6rem; }
.live-page .live-scene-question .kicker { font-size: 0.85rem; }
.live-page .live-answers { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.4rem; border-top: 1px solid var(--rule); padding-top: 0.75rem; }
.live-page .live-confirm { margin-top: 0.75rem; padding: 0.75rem 1rem; background: var(--surface); border-radius: 8px; }
.live-page .live-confirm p { margin: 0; font-weight: 600; }
.live-page .live-confirm .actions { margin-top: 0.5rem; }
.live-page .live-sync { margin-top: 1rem; }
.live-page .account-state, .live-page .live-block, .live-page .live-item, .live-page .live-check { min-width: 0; }
.live-page .inline-form select { width: 100%; }
.live-page .live-who { font-weight: 650; }
.live-page .live-what { overflow-wrap: anywhere; }
.live-page .live-note { color: var(--muted); }

/* ------------------------------------------------------------------
   M9: the cohort's conversation (GitHub Discussions) on /cohort/ and
   /live/ (assets/discussions.js). Every rule here starts with .talk,
   or .talk-*.
   ------------------------------------------------------------------ */
.talk { margin-top: 1rem; max-width: 44rem; min-width: 0; }
.talk-list { list-style: none; margin: 1rem 0 0; padding: 0; border-top: 1px solid var(--rule); }
.talk-item { border-bottom: 1px solid var(--rule); padding: 0.75rem 0; min-width: 0; }
.talk-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.1rem 1rem; align-items: baseline; }
.talk-title {
  appearance: none; background: none; border: 0; padding: 0.25rem 0; margin: 0; font: inherit;
  font-weight: 650; font-size: 1.05rem; line-height: 1.4; color: var(--ink); text-align: left;
  cursor: pointer; overflow-wrap: anywhere; min-height: 44px;
}
a.talk-title { display: inline-block; min-height: 0; padding: 0.15rem 0; color: var(--ink); text-decoration-color: var(--edge); }
button.talk-title { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); align-items: baseline; }
button.talk-title::before { content: "\25B8"; color: var(--muted); transition: transform 0.15s; justify-self: start; }
button.talk-title[aria-expanded="true"]::before { transform: rotate(90deg); }
.talk-title:hover { color: var(--accent); }
.talk-head .talk-meta { grid-column: 1; margin: 0 0 0 1.1em; }
.talk-head .talk-gh { grid-column: 2; grid-row: 1; white-space: nowrap; }
.talk-meta { color: var(--muted); font-size: 0.9rem; margin: 0; }
.talk-thread { margin: 0.75rem 0 0.25rem 1.1em; display: grid; gap: 0.75rem; }
.talk-post { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.85rem 1rem; min-width: 0; }
.talk-post.reply { margin-left: 1.25rem; background: var(--surface); }
.talk-post .talk-by { margin: 0 0 0.35rem; font-weight: 600; color: var(--muted); }
.talk-body { overflow-wrap: anywhere; font-size: 1rem; }
.talk-body > :first-child { margin-top: 0; }
.talk-body > :last-child { margin-bottom: 0; }
.talk-body h1, .talk-body h2, .talk-body h3 { font-size: 1.05rem; margin: 0.75rem 0 0.35rem; }
.talk-body img { max-width: 100%; height: auto; }
.talk-body pre { overflow-x: auto; background: var(--surface); padding: 0.6rem; border-radius: 8px; font-size: 0.9rem; }
.talk-body blockquote { margin: 0.5rem 0; padding-left: 0.8rem; border-left: 3px solid var(--rule); color: var(--muted); }
.talk-more { margin: 0; }
.talk-foot { display: flex; flex-wrap: wrap; gap: 0 1.25rem; align-items: center; margin: 0.5rem 0 0; }
.talk-start { max-width: 36rem; margin: 0 0 1.5rem; }
.talk-form { margin-top: 0.5rem; }
.talk-form .hint { margin: 0; color: var(--muted); font-weight: 400; }
.talk-form select {
  font: inherit; font-weight: 400; padding: 0.6rem 0.7rem; border: 1px solid var(--muted);
  border-radius: 10px; background: var(--card); color: var(--ink); min-height: 44px; max-width: 100%;
}
.talk-problem { background: var(--surface); border-radius: 8px; padding: 0.5rem 0.9rem; margin-top: 0.75rem; }
.talk-problem p { margin: 0.25rem 0; }
.talk-list.compact .talk-item { display: grid; gap: 0.1rem; justify-items: start; }
.live-page .talk-problem p { font-size: 0.95rem; }

/* ------------------------------------------------------------------
   M5: the movement toolkit (/start/meetup/, /start/hackathon/,
   /start/brand/). Self-contained: every rule here is scoped to .kit,
   except the print rules at the end, which only act on pages whose
   body has the kit-print class.
   ------------------------------------------------------------------ */
.kit .draft-note { color: var(--muted); font-size: 0.95rem; margin: 1.25rem 0 0; max-width: 38rem; padding-left: 0.9rem; border-left: 3px solid var(--rule); }
.kit .jumps { list-style: none; margin: 0 0 3rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-weight: 600; }
.kit .jumps a { display: inline-block; padding: 0.35rem 0; }
.kit .topic > h3 { font-size: 1.2rem; }
.kit .topic .prose + .steps, .kit .topic .prose + .arc { margin-top: 1rem; }
.kit .muted { color: var(--muted); }

/* The arc: each part of an event, with its minutes */
.kit .arc { list-style: none; margin: 1.25rem 0 0; padding: 0; max-width: 46rem; border-top: 1px solid var(--rule); }
.kit .arc > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); }
.kit .arc .min { margin: 0; line-height: 1.3; font-variant-numeric: tabular-nums; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6rem; }
.kit .arc .min b { color: var(--accent); font-weight: 650; font-size: 1.15rem; }
.kit .arc .min span { color: var(--muted); font-size: 0.9rem; }
.kit .arc h3 { font-size: 1.1rem; margin: 0 0 0.3rem; }
.kit .arc p { margin: 0 0 0.6rem; }
.kit .arc p:last-child { margin-bottom: 0; }
.kit .arc .clock { color: var(--muted); font-weight: 500; font-size: 0.95rem; }
.kit .arc-key { color: var(--muted); font-size: 0.95rem; margin: 0.75rem 0 0; max-width: 46rem; }

/* The facilitator's words, to be said aloud */
.kit .say { margin: 1rem 0 1.5rem; padding: 1.1rem 1.25rem; background: var(--surface); border-radius: 12px; max-width: var(--measure); }
.kit .say .who { margin: 0 0 0.5rem; font-size: 0.9rem; font-weight: 600; color: var(--accent); }
.kit .say p { margin: 0 0 0.85rem; font-size: 1.1rem; line-height: 1.55; }
.kit .say p:last-child { margin-bottom: 0; }

/* Checklists in three parts */
.kit .checklists { display: grid; gap: 2rem; margin-top: 1.25rem; }
.kit .checklists h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.kit .checklist { list-style: none; margin: 0; padding: 0; }
.kit .checklist li { position: relative; padding: 0.45rem 0 0.45rem 1.9rem; }
.kit .checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.75em; width: 1.05rem; height: 1.05rem;
  border: 2px solid var(--edge); border-radius: 4px;
}
.kit .materials { margin: 0.5rem 0 0; padding-left: 1.3rem; max-width: var(--measure); }
.kit .materials li { margin: 0 0 0.6rem; }
.kit .materials li::marker { color: var(--accent); }

/* The brand kit */
.kit .brand-grid { display: grid; gap: 1rem; margin-top: 1.25rem; }
.kit .tile { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--card); display: grid; }
.kit .tile .stage { display: grid; place-items: center; padding: 2.25rem 1.5rem; min-height: 9rem; }
.kit .tile .stage.on-light { background: #FFFFFF; }
.kit .tile .stage.on-white { background: #FFFFFF; }
.kit .tile .stage.on-dark { background: #131916; }
.kit .tile .stage.on-forest { background: #1F4D3A; }
.kit .tile .stage.on-gray { background: #7C8A84; }
.kit .tile .stage img { display: block; max-width: 100%; height: auto; }
.kit .tile .stage.full { padding: 0; min-height: 0; }
.kit .tile .stage.full img { width: 100%; }
.kit .tile .stage img.wide { width: 15rem; }
.kit .tile .stage img.event { width: 12rem; }
.kit .tile .stage img.icon { width: 5rem; }
.kit .tile .stage img.mark { width: auto; height: 44px; }
.kit .tile .about { padding: 1rem 1.25rem 1.1rem; border-top: 1px solid var(--rule); }
.kit .tile .about h3 { font-size: 1.05rem; margin: 0 0 0.25rem; }
.kit .tile .about p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.kit .downloads { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.1rem 1.1rem; font-weight: 600; font-size: 0.95rem; }
.kit .downloads a { display: inline-block; padding: 0.3rem 0; }
.kit .swatches { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); }
.kit .swatch { border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--card); }
.kit .swatch .chip { height: 4.5rem; }
.kit .swatch p { margin: 0; padding: 0.6rem 0.8rem 0.7rem; font-size: 0.9rem; line-height: 1.4; }
.kit .swatch b { display: block; font-size: 1rem; }
.kit .swatch code { font-family: inherit; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }
.kit .space-demo { display: inline-block; margin: 1.25rem 0 0.5rem; padding: 1.08rem; background: #FFFFFF; border-radius: 12px; outline: 1px dashed #1F4D3A; outline-offset: -1px; max-width: 100%; }
.kit .space-demo img { display: block; width: 15rem; max-width: 100%; height: auto; outline: 1px solid #DDE3E0; }
.kit .rules { margin: 0.5rem 0 0; padding-left: 1.3rem; max-width: var(--measure); }
.kit .rules li { margin: 0 0 0.9rem; }
.kit .rules li::marker { color: var(--accent); font-weight: 600; }
.kit .type-sample { margin: 1.25rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--rule); }
.kit .type-sample > div { display: grid; gap: 0.35rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.kit .type-sample dt { font-size: 0.8rem; font-weight: 600;  color: var(--muted); }
.kit .type-sample dd { margin: 0; line-height: 1.25; }
.kit .type-sample .w680 { font-weight: 680; font-size: 2rem; letter-spacing: -0.025em; }
.kit .type-sample .w600 { font-weight: 600; font-size: 1.25rem; }
.kit .type-sample .w400 { font-weight: 400; font-size: 1.0625rem; max-width: 36rem; }

/* Sheets on the guide pages reuse the .sheet look from /start/sheets/ */
.kit .sheets { margin-top: 1.5rem; }
.kit-sheet .sheet-title { font-size: 4.6cqi; }
.kit-sheet .sheet-sub { margin: 1.2cqi 0 0; font-size: 2.1cqi; color: #4E5B55; line-height: 1.4; }
.kit-sheet h4 { margin: 3cqi 0 1cqi; font-size: 2.3cqi; font-weight: 680; color: #1F4D3A; letter-spacing: -0.01em; }
.kit-sheet .sheet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 4cqi; }
.kit-sheet table { width: 100%; border-collapse: collapse; font-size: 1.9cqi; line-height: 1.3; }
.kit-sheet th, .kit-sheet td { text-align: left; vertical-align: top; padding: 0.7cqi 0; border-top: 1px solid #DDE3E0; }
.kit-sheet th { width: 7.5cqi; font-weight: 640; font-variant-numeric: tabular-nums; color: #162019; white-space: nowrap; padding-right: 1.5cqi; }
.kit-sheet td b { font-weight: 640; }
.kit-sheet .sheet-words { margin: 0; font-size: 1.9cqi; line-height: 1.42; }
.kit-sheet .sheet-words + .sheet-words { margin-top: 1cqi; }
.kit-sheet .sheet-note { margin: 2cqi 0 0; font-size: 1.75cqi; line-height: 1.4; color: #4E5B55; }
.kit-sheet .fill { margin: 0; display: grid; gap: 0; }
.kit-sheet .fill li { list-style: none; border-bottom: 1px solid #7C8A84; padding: 2.4cqi 0 0.6cqi; font-size: 2.1cqi; font-weight: 600; min-height: 13cqi; }
.kit-sheet .fill li span { display: block; font-weight: 400; color: #4E5B55; font-size: 1.7cqi; }
.kit-sheet .sheet-rules { margin: 1cqi 0 0; padding-left: 3cqi; font-size: 1.9cqi; line-height: 1.38; }
.kit-sheet .sheet-rules li { margin: 0 0 0.6cqi; }
.kit-sheet .sheet-rules li::marker { color: #1F4D3A; font-weight: 680; }

@media (min-width: 40rem) {
  .kit .brand-grid { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}
@media (min-width: 56rem) {
  .kit .checklists { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (min-width: 40rem) {
  .kit .arc > li { grid-template-columns: 6rem minmax(0, 1fr); }
  .kit .arc .min { display: block; }
  .kit .arc .min b, .kit .arc .min span { display: block; }
}

@media print {
  body.kit-print .print-hide { display: none !important; }
  body.kit-print[data-printing] .sheet-block:not(.printing) { display: none !important; }
}
.kit .arc-after { margin-top: 1.5rem; }
.kit .sheet-head h3 { margin: 0; font-size: 1.35rem; }
.kit .sheets-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); max-width: none; margin-bottom: 1rem; }
.kit-sheet.card-sheet { padding: 0; }
.card-sheet .card { flex: 1 1 0; min-height: 0; padding: 5.5cqi 7.5cqi 4cqi; display: flex; flex-direction: column; }
.card-sheet .card + .card { border-top: 1px dashed #7C8A84; }
.card-sheet .sheet-title { font-size: 3.6cqi; margin-top: 2cqi; }
.card-sheet .fill { padding: 0; margin-top: 1cqi; }
.card-sheet .fill li { min-height: 7.4cqi; padding-top: 1.6cqi; font-size: 1.9cqi; }
.card-sheet .fill li span { font-size: 1.6cqi; }
.card-sheet .card-back { margin: auto 0 0; padding-top: 1.5cqi; font-size: 1.6cqi; color: #4E5B55; }
@media print {
  body.kit-print .card-sheet .card { padding: 0.35in 0.1in 0.2in; }
  body.kit-print .card-sheet .card:first-child { padding-top: 0; }
}
.card-sheet .fill li.big { min-height: 15cqi; }

/* ------------------------------------------------------------------
   Submitting an app (M10): the note on /cohort/ as the cohort nears
   its end, the teacher's hide shown to the student, and the apps list
   with its hide and show controls on /teach/
   ------------------------------------------------------------------ */
.submit-note, .app-hidden-note { margin: 0.5rem 0 1.25rem; }
.app-hidden-note p { margin: 0; }
.app-hidden-note p + p { margin-top: 0.5rem; color: var(--muted); }
.submissions { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--rule); }
.submission { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.submission .who-line { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.submission .small { margin: 0.25rem 0 0; color: var(--muted); }
.submission .actions { margin-top: 0.5rem; }
.submission .inline-form { margin-top: 0.75rem; }
.submission .inline-form .small { margin: 0; }
[data-submissions] > .kicker { margin: 1rem 0 0.5rem; font-size: 0.95rem; }

/* ------------------------------------------------------------------
   The teaching tools (M12): what the current part of a live session
   needs (the teacher's "what I heard", each group's room and turns), a
   bring-back's question and its ready or not yet, and, on /teach/, a
   session's check answers and who has not been seen since it began.
   ------------------------------------------------------------------ */
.live-page .live-now { border: 2px solid var(--accent); border-radius: var(--radius); background: var(--card); padding: 1rem 1.25rem 1.25rem; margin-top: 1.5rem; max-width: 44rem; }
.live-page .live-now > .kicker { font-size: 0.85rem; margin: 0; }
.live-page .live-now > h2 { margin: 0.1rem 0 0.5rem; font-size: 1.35rem; }
.live-page .live-now .cohort-card { background: var(--paper); }
.live-page .live-heard p { margin: 0.5rem 0 0; }
.live-page .live-heard .kicker { font-size: 0.9rem; margin: 0; }
.agenda-part.now { border-color: var(--accent); border-width: 2px; }
.agenda-part.now h3::after { content: " (now)"; color: var(--accent); font-weight: 600; font-size: 0.95rem; }
.live-page .live-group .kicker { font-size: 0.85rem; margin: 1.1rem 0 0.4rem; }
.live-page .live-group .actions { margin: 0.5rem 0 0; }
.trio-order, .turn-steps { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.75rem; }
.trio-order p, .turn-steps p { margin: 0; }
.trio-order li, .turn-steps li { min-width: 0; }
.trio-order .want { font-style: italic; overflow-wrap: anywhere; }
.trio-order .btn-secondary, .turn-steps .btn-secondary { margin-top: 0.35rem; }
.turn-steps li.now .live-who::after { content: " (now)"; color: var(--accent); font-weight: 600; }

/* The room board (C2, assets/rooms.js): one card per group, side by
   side once there is room. A group that would like the teacher lights
   up in place, so no card moves under anyone's pointer. */
.room-board { display: grid; gap: 0.75rem; margin-top: 0.75rem; }
.room-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem 1rem; min-width: 0; }
.room-card h3 { margin: 0; font-size: 1.05rem; }
.room-card p { margin: 0.35rem 0 0; }
.room-card .actions { margin-top: 0.6rem; gap: 0.5rem 0.6rem; }
.room-card.is-asking { border-color: var(--accent); border-width: 3px; background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
/* Inside a rehearsal room (R6): whose turn, the audience's job, the
   step's clock, and what the rooms scene asks. */
.room-card .room-role { font-weight: 650; }
.room-card .room-role.is-presenting { color: var(--accent); }
.room-card .room-job { margin-top: 0.15rem; }
.room-card .room-clock { font-variant-numeric: tabular-nums; font-weight: 600; }
.room-card .room-clock.is-over { color: var(--accent); }
.room-card .room-prompt { background: var(--surface); border-radius: 8px; padding: 0.35rem 0.6rem; margin-top: 0.6rem; }
.room-asking { font-weight: 600; color: var(--accent); }
@media (min-width: 40rem) { .room-board { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
p.mark { margin: 0.35rem 0 0; font-weight: 600; font-size: 0.95rem; }
p.mark.is-not-yet { font-weight: 500; }
.bring-back-mark { border-top: 1px solid var(--rule); margin-top: 0.75rem; padding-top: 0.6rem; }
.bring-back-mark p { margin: 0.25rem 0 0; overflow-wrap: anywhere; }
.bring-back-mark .want { font-style: italic; }
.bring-back-mark .actions { margin-top: 0.5rem; }
.bring-back-extras:not([hidden]) { display: grid; gap: 0.9rem; }
.cohort-form fieldset.ready-mark, .inline-form fieldset.ready-mark { border: 1px solid var(--rule); border-radius: 10px; padding: 1rem; margin: 0; display: grid; gap: 0.6rem; min-width: 0; }
fieldset.ready-mark legend { font-weight: 600; padding: 0 0.35rem; font-size: 0.95rem; }
fieldset.ready-mark .hint { margin: 0; font-size: 0.9rem; color: var(--muted); }
.ready-bar p { margin: 0 0 0.4rem; border-left: 3px solid var(--rule); padding-left: 0.75rem; }
.check-answers h4 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.answer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.answer-list li { overflow-wrap: anywhere; }
/* Follow-ups on /teach/ (C7), commits during class on /live/ (C6), and a
   teacher's notes on /cohort/ */
.followups { display: grid; gap: 0.6rem; margin-top: 0.75rem; }
.followup { padding: 0; }
.followup > summary { cursor: pointer; padding: 0.85rem 1.1rem; min-width: 0; }
.followup > summary .followup-gist { display: block; margin-top: 0.15rem; color: var(--muted); overflow-wrap: anywhere; }
.followup > summary .followup-draft { display: inline-block; margin-left: 0.5rem; border: 1px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 0 0.5rem; font-weight: 600; }
.followup-line { display: block; margin-top: 0.3rem; }
.followup-body { padding: 0 1.1rem 1rem; border-top: 1px solid var(--rule); min-width: 0; }
.followup-body .kicker { font-size: 0.85rem; margin: 0.9rem 0 0.35rem; }
.followup-body .want { font-style: italic; }
.followup-form { margin-top: 1rem; }
.followup-sent { border-left: 3px solid var(--rule); padding-left: 0.75rem; overflow-wrap: anywhere; }
.live-pushed-list { margin-top: 0.75rem; }
.live-pushed-list li { overflow-wrap: anywhere; }
.live-pushed-list .small { display: block; }
.teacher-notes { margin-top: 1rem; }
.teacher-notes .feedback p { overflow-wrap: anywhere; }
.teacher-notes .feedback p + p { margin-top: 0.5rem; }
.teacher-notes .actions { margin-top: 0.5rem; }
.inline-form .hint { font-weight: 400; color: var(--muted); font-size: 0.9rem; }
.group-room { border-top: 1px solid var(--rule); padding-top: 0.75rem; }
[data-meet-text] { margin-top: 0.5rem; }

/* ------------------------------------------------------------------
   The Meet add-on (M15): the side panel (/addon/), a narrow run of show
   about 300 to 400px wide inside Google Meet, and the main
   stage (/addon/stage/), a large, calm view meant to be presented.
   The panel reuses the live session's queue and check styles through
   .live-page, and only adds what a narrow panel needs.
   ------------------------------------------------------------------ */
body.addon-body { min-height: 100vh; }
.addon-mark { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 650; font-size: 0.95rem; color: var(--ink); min-width: 0; }
.addon-mark .arch { width: 0.78em; height: 0.39em; margin: 0 0.02em; flex: none; color: var(--accent); }
.addon-mark:has(.arch) { gap: 0; font-weight: 680; letter-spacing: -0.025em; }
.addon-mark span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.addon-panel { padding: 0.9rem 0.9rem 2rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; font-size: 1rem; }
/* Outside Meet (learners, until Google approves the add-on): the same
   panel as one readable column, not stretched across a desktop window. */
.addon-panel.addon-standalone { max-width: 40rem; margin: 0 auto; }
.addon-panel > *, .addon-panel .account-state > * { min-width: 0; }
.addon-panel .account-state:not([hidden]) { display: grid; gap: 0.75rem; min-width: 0; }
.addon-panel h1 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.015em; }
.addon-panel h2 { font-size: 1.15rem; max-width: none; margin: 0.25rem 0 0; }
.addon-panel h3 { font-size: 1.05rem; }
.addon-panel p { margin: 0; }
.addon-panel .small { color: var(--muted); font-size: 0.9rem; }
.addon-panel .error { color: var(--accent); font-weight: 600; }
.addon-panel .actions { margin-top: 0.5rem; gap: 0.5rem; }
.addon-panel .btn-primary, .addon-panel .btn-secondary { font-size: 0.95rem; }
.addon-signin { display: grid; gap: 0.5rem; justify-items: start; }
.addon-signin .google-signin { margin: 0; }

.addon-head { display: grid; gap: 0.15rem; }
.addon-where { color: var(--muted); font-size: 0.9rem; }

.addon-part { border: 2px solid var(--accent); border-radius: var(--radius); background: var(--card); padding: 0.9rem; display: grid; gap: 0.35rem; }
.addon-part .kicker { font-size: 0.85rem; margin: 0; }
.addon-part-name { font-size: 1.25rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.012em; }
.addon-clock { font-size: 2rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1.1; }
.addon-teacher-only:not([hidden]) { display: grid; gap: 0.25rem; }
.addon-field { display: grid; gap: 0.25rem; font-weight: 600; font-size: 0.9rem; }
.addon-field select {
  font: inherit; font-weight: 400; padding: 0.5rem 0.6rem; border: 1px solid var(--muted);
  border-radius: 10px; background: var(--card); color: var(--ink); min-height: 44px; width: 100%;
}
.addon-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.9rem; display: grid; gap: 0.5rem; min-width: 0; }
.addon-card .kicker { font-size: 0.85rem; margin: 0; }
.addon-panel .live-item { padding: 0.8rem 0.8rem 0.8rem 2.6rem; }
.addon-panel .live-item::before { left: 0.75rem; top: 0.85rem; }
.addon-panel .live-check h3 { font-size: 1.05rem; }
.addon-panel .cohort-card { padding: 0.9rem; margin-top: 0; }
.addon-panel .live-checks { margin-top: 0; }
.addon-panel details > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
.addon-panel .inline-form { margin-top: 0.5rem; }
.addon-panel .inline-form textarea { width: 100%; }
.addon-panel .btn-secondary[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.addon-what > summary { font-size: 0.9rem; color: var(--muted); }
.addon-what p { margin-top: 0.25rem; }
.addon-foot { border-top: 1px solid var(--rule); padding-top: 0.75rem; display: grid; gap: 0.5rem; }
.addon-foot .actions { margin-top: 0; }

/* Outside Meet, the same pages say where they belong. */
.addon-outside:not([hidden]) { max-width: 30rem; margin: 0 auto; padding: 2rem var(--gutter); display: grid; gap: 1rem; align-content: start; }
.addon-outside h1 { font-size: 1.6rem; }

/* The main stage: large and calm, sized by the stage itself, so it reads
   the same in Meet's main area and at screen-share quality. */
.addon-stage { min-height: 100vh; display: grid; }
.stage-state:not([hidden]) { display: grid; min-height: 100vh; }
.stage-ready:not([hidden]) { grid-template-rows: auto 1fr; padding: 3vmin 4vmin 5vmin; gap: 2vmin; }
.addon-stage .stage-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.addon-stage .stage-head .addon-mark { font-size: clamp(1rem, 2.2vmin, 1.5rem); }
.stage-part { margin: 0; font-size: clamp(1rem, 2.4vmin, 1.6rem); font-weight: 600; color: var(--muted); }
.stage-clock { font-variant-numeric: tabular-nums; color: var(--ink); }
.stage-body:not([hidden]) { display: grid; align-content: center; gap: 2.5vmin; max-width: 70rem; width: 100%; margin: 0 auto; }
.stage-body .kicker { font-size: clamp(1rem, 2.6vmin, 1.75rem); margin: 0; }
.stage-title { font-size: clamp(2rem, 7vmin, 5.5rem); line-height: 1.08; letter-spacing: -0.03em; max-width: 22ch; }
[data-view="check"] .stage-title { font-size: clamp(1.75rem, 5.5vmin, 4.25rem); max-width: 28ch; }
.stage-clock-big { margin: 0; font-size: clamp(3rem, 16vmin, 11rem); font-weight: 650; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--accent); }
.stage-quiet { margin: 0; font-size: clamp(1rem, 2.4vmin, 1.5rem); color: var(--muted); }
.stage-state[data-state="loading"]:not([hidden]), .stage-state[data-state="error"]:not([hidden]) { place-items: center; padding: 2rem; }
.stage-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.6vmin; font-size: clamp(1.1rem, 3.2vmin, 2.25rem); }
.stage-choices li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.35rem 1.5rem; align-items: center; padding: 1.4vmin 2vmin; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); }
.stage-choices.counted li { grid-template-columns: minmax(0, 1fr) 3ch; }
.stage-choices .label { grid-column: 1 / -1; font-weight: 600; }
.stage-choices .bar { display: block; height: 0.5em; border-radius: 999px; background: var(--rule); position: relative; overflow: hidden; }
.stage-choices .bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--share, 0%); background: var(--accent); border-radius: 999px; }
.stage-choices .count { font-weight: 650; text-align: right; font-variant-numeric: tabular-nums; }
.stage-choices.counted li { grid-template-columns: minmax(0, 1fr) auto; }
/* A words question (R4): the words together, larger where more people gave them. */
.stage-words, .question-words { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 0.9em; }
.stage-words { font-size: clamp(1.1rem, 3vmin, 2rem); max-width: 60rem; }
.stage-words li, .question-words li { font-weight: 600; line-height: 1.1; color: var(--ink); overflow-wrap: anywhere; }
.stage-words .size-1, .question-words .size-1 { font-size: 1em; color: var(--muted); }
.stage-words .size-2, .question-words .size-2 { font-size: 1.3em; }
.stage-words .size-3, .question-words .size-3 { font-size: 1.65em; }
.stage-words .size-4, .question-words .size-4 { font-size: 2.05em; color: var(--accent); }
.stage-words .size-5, .question-words .size-5 { font-size: 2.5em; color: var(--accent); }
.stage-welcome .stage-note { color: var(--ink); line-height: 1.35; max-width: 46ch; overflow-wrap: anywhere; }
.stage-what { margin: 0; font-size: clamp(1.25rem, 3.6vmin, 2.5rem); font-weight: 600; overflow-wrap: anywhere; }
.stage-note { margin: 0; font-size: clamp(1.1rem, 3vmin, 2rem); color: var(--muted); max-width: 40ch; }
/* The audience's part, under a presenter's work (R7). */
.stage-audience { margin: 1vmin 0 0; font-size: clamp(1.1rem, 3vmin, 2rem); color: var(--ink); max-width: 46ch; }
/* The current scene (R3): its words read as words, not as a headline. */
.stage-lines { display: grid; gap: 1.6vmin; max-width: 46ch; }
.stage-lines .stage-what { font-weight: 450; line-height: 1.35; }
.stage-clock-scene { font-size: clamp(2rem, 9vmin, 6rem); }
/* The design stage (R5): the live board fills the stage under a small
   title, and the scene's own lines step aside for it. */
[data-view="scene"].has-board:not([hidden]) { max-width: none; align-content: stretch; grid-template-rows: auto auto 1fr; gap: 1vmin; }
[data-view="scene"].has-board .stage-title { font-size: clamp(1.25rem, 3.6vmin, 2.25rem); max-width: none; }
[data-view="scene"].has-board .stage-lines, [data-view="scene"].has-board [data-s-items], [data-view="scene"].has-board .stage-note, [data-view="scene"].has-board .stage-clock-scene { display: none; }
.stage-board:not([hidden]) { display: block; min-height: 60vh; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: #fff; }
.stage-board iframe { display: block; width: 100%; height: 100%; min-height: 60vh; border: 0; }

/* ------------------------------------------------------------------
   Accessibility audit (October 3, 2026): targets at least 24 px tall
   (WCAG 2.2, 2.5.8) for links that stand alone on a line, and check
   boxes and radio buttons large enough to hit, in the accent color.
   ------------------------------------------------------------------ */
.site-footer ul a, .crumbs a, .kicker a, .next-stage a { display: inline-block; padding: 0.15rem 0; }
.source a { padding: 0.15rem 0; }
input[type="checkbox"], input[type="radio"] { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--accent); }
label.check { min-height: 2.25rem; }
/* The file picker's real input is invisible, so its focus shows on the label around it. */
.file-pick:focus-within { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Forms shrink with the screen: a long choice in a select never pushes the page sideways at 320 px. */
.cohort-form:not([hidden]), .session-row, .inline-form,
.cohort-form label, .session-row label, .inline-form label { grid-template-columns: minmax(0, 1fr); }
.cohort-form select, .cohort-form input:not([type="checkbox"]):not([type="radio"]), .cohort-form textarea,
.inline-form select, .inline-form input:not([type="checkbox"]):not([type="radio"]), .inline-form textarea { max-width: 100%; min-width: 0; }

/* ------------------------------------------------------------------
   C1: live signals. On /live/, the banner that says where everyone
   should be, the teacher's card, who is on stage, the "recording now"
   line, and the teacher's controls; and /card/, the page a teacher
   presents in Meet (sized for a 1280 by 720 shared screen).
   ------------------------------------------------------------------ */
.signal-where, .signal-card, .signal-stage, .signal-recording { max-width: 44rem; min-width: 0; margin-top: 0.75rem; }
.signal-where {
  position: sticky; top: 0; z-index: 3;
  background: var(--card); border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 0.9rem 1rem 1rem; box-shadow: 0 6px 18px rgb(0 0 0 / 0.08);
  animation: signal-in 240ms ease-out;
}
.signal-where.is-warn, .signal-where.is-back { background: color-mix(in srgb, var(--accent) 13%, var(--card)); border-width: 3px; }
.signal-where p { margin: 0.25rem 0 0; }
.signal-where .signal-title { margin: 0; font-weight: 680; font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.015em; }
.signal-where .actions { margin-top: 0.75rem; gap: 0.6rem 0.75rem; }
.signal-time { font-weight: 650; font-size: 1.15rem; }
.signal-clock { font-variant-numeric: tabular-nums; }
.signal-card {
  background: var(--card); border-radius: var(--radius); border: 1px solid var(--rule);
  padding: 1.1rem 1.25rem; animation: signal-in 240ms ease-out;
}
.signal-card p { margin: 0; }
.signal-card .signal-card-text { font-size: clamp(1.5rem, 1.1rem + 2vw, 2.3rem); font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.signal-card .signal-time { margin-top: 0.5rem; color: var(--accent); font-size: 1.35rem; }
.signal-stage { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); padding: 0.9rem 1rem 1rem; }
.signal-stage p { margin: 0.25rem 0 0; }
.signal-stage .kicker { font-size: 0.85rem; margin: 0; }
.signal-stage .signal-stage-text { font-size: 1.2rem; font-weight: 650; line-height: 1.35; }
.signal-recording p { margin: 0; font-weight: 600; padding-left: 1.25rem; position: relative; }
.signal-recording p::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--accent);
}
@keyframes signal-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.signal-controls .signal-control { border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 1.25rem; min-width: 0; }
.signal-controls .signal-control h3 { margin: 0 0 0.25rem; font-size: 1.15rem; }
.signal-controls .signal-control > .small { margin: 0.6rem 0 0; }
.signal-controls .actions { margin-top: 0.75rem; gap: 0.6rem 0.75rem; }
.signal-controls .inline-form { margin-top: 0.5rem; }
.signal-controls .inline-form input[data-sig-rooms-minutes], .signal-controls .inline-form input[data-sig-card-minutes] { max-width: 8rem; }
.signal-controls .signal-now { margin: 0.25rem 0 0; font-weight: 600; overflow-wrap: anywhere; }
.signal-controls p[role="status"]:empty { display: none; }
.signal-presets { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.signal-presets li { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; min-width: 0; }
.signal-presets li > .btn-secondary:first-child { font-weight: 500; text-align: left; flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.signal-controls .signal-presets-label { margin: 1rem 0 0; }
.signal-confirm { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-weight: 600; }

/* /card/: presented in Meet, so it scales with the window, not the page. */
.card-screen { min-height: 100vh; min-height: 100dvh; }
.card-frame {
  min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto;
  padding: clamp(1rem, 3vmin, 2.5rem) clamp(1rem, 4vmin, 3.5rem); gap: 1rem;
}
.card-frame .wordmark { font-size: clamp(1.1rem, 2.6vmin, 1.6rem); justify-self: start; }
.card-frame .screen-body { align-self: center; min-width: 0; }
.screen-show { max-width: 62rem; min-width: 0; }
.screen-show p { margin: 0; }
.screen-title { font-size: clamp(1.9rem, 6.5vmin, 4.2rem); font-weight: 680; line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; max-width: none; overflow-wrap: anywhere; margin: 0; }
.screen-sub, .screen-show .screen-sub { font-size: clamp(1.15rem, 3.4vmin, 2rem); color: var(--muted); margin: 0.75rem 0 0; }
.screen-show .screen-sub:first-child { color: var(--accent); font-weight: 650; margin: 0 0 0.5rem; }
.screen-show .screen-note { font-size: clamp(1.15rem, 3.2vmin, 1.9rem); line-height: 1.35; margin: 1.25rem 0 0; max-width: 46ch; overflow-wrap: anywhere; }
.screen-card { font-size: clamp(2.1rem, 8.5vmin, 5.6rem); font-weight: 680; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; overflow-wrap: anywhere; }
.screen-show .screen-clock { font-size: clamp(2rem, 9vmin, 6rem); font-weight: 650; color: var(--accent); margin-top: 0.4em; line-height: 1; }
.screen-show[data-kind="card"], .screen-show[data-kind="rooms"], .screen-show[data-kind="back"] { padding-left: clamp(1rem, 3vmin, 2.5rem); }
.screen-foot { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1.5rem; color: var(--muted); font-size: clamp(0.95rem, 2.2vmin, 1.3rem); }
.card-frame:has(.screen-show[data-kind="idle"]) [data-card-cohort] { visibility: hidden; }
.screen-rec { font-weight: 650; color: var(--ink); padding-left: 1.1em; position: relative; }
.screen-rec::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--accent); }

/* ------------------------------------------------------------------
   C4: the board (/board/). Excalidraw fills .board-canvas, which needs a
   real height. Self-contained: every rule here is scoped to the board.
   ------------------------------------------------------------------ */
.board-states { padding-top: 2rem; }
.board-head { display: grid; gap: 0.75rem; padding-top: 1.25rem; padding-bottom: 1rem; }
.board-head .kicker { margin: 0 0 0.25rem; font-size: 0.95rem; }
.board-head h1 { font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.2rem); }
.board-actions, .board-teach { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center; }
.board-actions .btn-secondary, .board-teach .btn-secondary { font-size: 0.95rem; padding: 0.5rem 0.85rem; }
.board-head .small, .board-foot .small { color: var(--muted); font-size: 0.95rem; margin: 0; max-width: 44rem; }
.board-status:empty { display: none; }
.board-group-pick { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-weight: 600; font-size: 0.95rem; }
.board-group-pick select {
  font: inherit; font-weight: 400; padding: 0.5rem 0.7rem; border: 1px solid var(--muted);
  border-radius: 10px; background: var(--card); color: var(--ink); min-height: 44px; max-width: 100%;
}
.board-canvas {
  position: relative; height: calc(100svh - 4rem); min-height: 26rem; max-height: 60rem;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.board-canvas .excalidraw { font-family: inherit; }
.board-foot { display: grid; gap: 0.5rem; padding-top: 1rem; padding-bottom: 3rem; }

/* The stage view (?view=stage): the board alone, for the Meet add-on's
   main stage or a tab shared in Meet. */
.board-stage .skip, .board-stage .site-header, .board-stage .site-footer,
.board-stage .board-head > :not(.board-status), .board-stage .board-foot { display: none; }
.board-stage .board-head { padding: 0.35rem var(--gutter); position: absolute; z-index: 5; right: 0; bottom: 3.5rem; max-width: 22rem; pointer-events: none; }
.board-stage .board-status { font-size: 0.85rem; text-align: right; }
.board-stage .board-ready { position: relative; }
.board-stage .board-canvas { height: 100svh; max-height: none; border: 0; }

/* A member's role beside their name: only mentors carry a word (mentor-lib.js). */
.role-tag { margin-left: 0.4rem; font-size: 0.85em; font-weight: 600; color: var(--accent); }
/* Working through the path (G3, assets/path-marks.js): controls beside
   the template's words, never in place of them, and quiet. */
.path-where { color: var(--muted); }
.article .path-step .step-actions, .article .prompt-actions { margin-top: 0.6rem; }
.article .path-step.is-done > p:first-child > strong:first-child, .article .path-step.is-done > strong:first-child { color: var(--muted); }
.path-ready { border: 1px solid var(--rule); border-radius: 10px; padding: 1rem; margin: 1rem 0 1.5rem; display: grid; gap: 0.6rem; }
.path-ready legend { font-weight: 600; padding: 0 0.35rem; }
.path-ready .actions { margin-top: 0.25rem; }
.path-ready .hint { margin: 0; color: var(--muted); font-size: 0.9rem; }
.path-bring { margin: 0.75rem 0 0; }
.path-bring .hint { color: var(--muted); font-size: 0.9rem; }
.stages .path-mark { grid-column: 2; font-size: 0.85rem; color: var(--accent); font-weight: 600; }

/* The class builder (R2, assets/show-builder.js): each week's run of
   show under its session on /teach/, and a glance at it on /cohort/. The
   preview is the main stage in miniature, in the stage's own dark band. */
.show-builder { margin-top: 0.75rem; border-top: 1px solid var(--rule); padding-top: 0.75rem; }
.show-builder > summary { cursor: pointer; font-weight: 600; }
.show-box { display: grid; gap: 0.5rem; margin-top: 0.5rem; min-width: 0; }
.show-fit { margin: 0; }
.show-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.scene-item { border: 1px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.8rem; background: var(--card); min-width: 0; }
.scene-item.is-dragging { opacity: 0.5; }
.scene-item:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.scene-head { display: flex; gap: 0.75rem; align-items: baseline; min-width: 0; }
.scene-at { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 0.9rem; flex: none; }
.scene-words { display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; align-items: baseline; min-width: 0; }
.scene-kind { font-size: 0.8rem; font-weight: 600; color: var(--accent);  }
.scene-title { overflow-wrap: anywhere; }
.scene-note { margin: 0.35rem 0 0; }
.scene-actions { margin-top: 0.5rem; flex-wrap: wrap; gap: 0.35rem; }
.scene-actions .btn-secondary { font-size: 0.9rem; padding: 0.3rem 0.6rem; }
.scene-form { display: grid; gap: 0.6rem; }
.scene-form label { display: grid; gap: 0.25rem; }
.scene-form .hint { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.stage-preview { margin-top: 0.6rem; background: var(--band); color: var(--band-ink); border-radius: 10px; padding: 1rem 1.1rem; aspect-ratio: 16 / 9; overflow: hidden; display: flex; flex-direction: column; gap: 0.35rem; }
.stage-preview p { margin: 0; }
/* Scoped to the preview: the real main stage (/addon/stage/) uses
   .stage-title and .stage-note at full size. */
.stage-preview .stage-eyebrow { color: var(--band-ink); font-weight: 600; font-size: 0.85rem; }
.stage-preview .stage-title { font-size: 1.25rem; font-weight: 700; line-height: 1.2; max-width: none; letter-spacing: 0; }
.stage-preview .stage-line { color: var(--band-ink); }
.stage-preview .stage-items { margin: 0; padding-left: 1.1rem; color: var(--band-ink); }
.stage-preview .stage-note { color: var(--band-muted); font-size: 0.9rem; margin-top: auto; max-width: none; }
.run-of-show h3 { font-size: 1rem; margin: 0.75rem 0 0.35rem; }
/* The question bank on /teach/ (R4, assets/question-bank.js). */
.question-bank { margin-top: 1.5rem; }
.bank-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.bank-item { border: 1px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.8rem; background: var(--card); min-width: 0; }
.bank-item p { margin: 0; }
.bank-head { display: flex; flex-wrap: wrap; gap: 0.15rem 0.6rem; align-items: baseline; }
.bank-prompt { font-weight: 600; margin-top: 0.25rem !important; overflow-wrap: anywhere; }
.bank-sure:not([hidden]) { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.question-fields { display: grid; gap: 0.6rem; }
.question-fields label { display: grid; gap: 0.25rem; }
.question-fields .hint { color: var(--muted); font-size: 0.85rem; font-weight: 400; }
.question-scale:not([hidden]) { display: grid; gap: 0.6rem; }
.show-glance { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.show-glance li { display: flex; gap: 0.6rem; align-items: baseline; }
/* The show as it ran, above the follow-ups (R8). */
.followup-show { margin: 0 0 1rem; }
.followup-show > summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
.followup-show .show-glance { margin-top: 0.4rem; }
.followup-room { margin: 0 0 0.5rem; }

/* ------------------------------------------------------------------
   The run of show (R1, assets/show-view.js): the same layout in the Meet
   add-on's side panel and on /live/. A timeline of scenes, the current
   one open and outlined in the accent color; done scenes fold to one line; parts of
   the view are details with their name and a count. Narrow first: it
   has to work at about 320px inside Meet.
   ------------------------------------------------------------------ */
.show { display: grid; gap: 0.9rem; min-width: 0; }
.show-head { display: grid; gap: 0.2rem; }
.show-head h2, .show-anytime h2 { font-size: 1.15rem; margin: 0; max-width: none; }
.show-head p, .show-anytime > p { margin: 0; }
.show-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; counter-reset: scene; }
.show-scene {
  position: relative; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card);
  padding: 0.7rem 0.8rem 0.7rem 2.4rem; display: grid; gap: 0.35rem; min-width: 0; counter-increment: scene;
}
.show-scene::before {
  content: counter(scene); position: absolute; left: 0.7rem; top: 0.75rem; width: 1.15rem; height: 1.15rem;
  border-radius: 999px; border: 1px solid var(--edge); color: var(--muted); font-size: 0.72rem; font-weight: 650;
  display: grid; place-items: center; font-variant-numeric: tabular-nums;
}
.show-scene-head { display: grid; gap: 0.05rem; min-width: 0; }
.show-kind { margin: 0; font-size: 0.78rem; font-weight: 650;  color: var(--muted); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.show-mins { font-weight: 500; letter-spacing: 0; text-transform: none; }
.show-name { margin: 0; font-size: 1.02rem; line-height: 1.25; overflow-wrap: anywhere; }
.show-line { margin: 0; }
.show-what > summary { font-size: 0.88rem; color: var(--muted); font-weight: 600; cursor: pointer; }
.show-what p { margin: 0.25rem 0 0; }
.show-body { display: grid; gap: 0.6rem; min-width: 0; }
.show-body:empty { display: none; }
.show-tools { margin-top: 0.15rem; gap: 0.4rem; }
.show-tools .btn-secondary { font-size: 0.88rem; min-height: 40px; }
/* Running the show (R3): the current scene's clock and the teacher's
   moves, and editing a scene in place. Narrow first, for Meet's panel. */
.show-run { display: grid; gap: 0.4rem; min-width: 0; }
.show-run[hidden] { display: none; }
.show-clock { margin: 0; font-size: 1.35rem; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--accent); }
.show-pinned { margin: 0; }
.show-moves { gap: 0.4rem; flex-wrap: wrap; }
.show-moves .btn-secondary, .show-moves .btn-primary, .show-follow { font-size: 0.9rem; min-height: 40px; }
.show-edit { border-top: 1px solid var(--rule); padding-top: 0.5rem; min-width: 0; }
.show-edit > summary { font-size: 0.88rem; font-weight: 600; cursor: pointer; }
.show-edit-form { display: grid; gap: 0.6rem; margin-top: 0.5rem; min-width: 0; }
.show-edit-form label { display: grid; gap: 0.25rem; font-weight: 600; font-size: 0.92rem; min-width: 0; }
.show-edit-form .hint { color: var(--muted); font-size: 0.82rem; font-weight: 400; }
.show-edit-form input, .show-edit-form textarea { width: 100%; max-width: 100%; box-sizing: border-box; font: inherit; font-weight: 400; }
.show-edit-form .actions { gap: 0.4rem; flex-wrap: wrap; }

/* Done: one quiet line. Later: name and kind only. Now: everything, outlined. */
.show-scene.is-done { padding-top: 0.45rem; padding-bottom: 0.45rem; background: transparent; }
.show-scene.is-done::before { content: "\2713"; border-color: var(--rule); }
.show-scene.is-done .show-name { font-size: 0.92rem; font-weight: 500; color: var(--muted); }
.show-scene.is-done .show-line, .show-scene.is-done .show-what, .show-scene.is-done .show-kind,
.show-scene.is-later .show-line, .show-scene.is-later .show-what,
.show-scene.is-next .show-what { display: none; }
.show-scene.is-done .show-body, .show-scene.is-next .show-body, .show-scene.is-later .show-body { display: none; }
.show-scene.is-done .show-tools { display: none; }
.show-scene.is-now { border: 2px solid var(--accent); padding-left: calc(2.4rem - 1px); box-shadow: 0 1px 0 var(--rule); }
.show-scene.is-now::before { background: var(--accent); border-color: var(--accent); color: var(--on-ink); }
.show-scene.is-now .show-kind { color: var(--accent); }
.show-scene.is-now .show-name { font-size: 1.2rem; letter-spacing: -0.01em; }
.show-scene.is-next .show-kind::after { content: "Next"; color: var(--accent); letter-spacing: 0.04em; }

/* A part of the view: its name (and count), its one line, then itself. */
.show-slot { border-top: 1px solid var(--rule); padding-top: 0.5rem; min-width: 0; }
.show-body > .show-slot:first-child { border-top: 0; padding-top: 0; }
.show-slot > summary { cursor: pointer; font-weight: 650; display: flex; align-items: center; gap: 0.4rem; min-height: 32px; list-style-position: inside; }
.show-slot-name { overflow-wrap: anywhere; }
.show-count {
  min-width: 1.3rem; height: 1.3rem; padding: 0 0.3rem; border-radius: 999px; background: var(--accent); color: var(--on-ink);
  font-size: 0.75rem; display: inline-grid; place-items: center; font-variant-numeric: tabular-nums;
}
.show-slot-line { margin: 0.1rem 0 0.5rem; }
.show-slot > :not(summary):not(.show-slot-line) { min-width: 0; }
.show-slot .addon-part { border-width: 1px; }
.show-slot .signal-control { border: 0; padding: 0; background: transparent; }
.show-slot .signal-control > h3 { display: none; }
.show-before:not([hidden]) { display: grid; gap: 0.6rem; border: 2px solid var(--accent); border-radius: var(--radius); background: var(--card); padding: 0.8rem; }

.show-anytime { display: grid; gap: 0.5rem; min-width: 0; }
.show-anytime-list { display: grid; gap: 0.35rem; }
.show-anytime-list > .show-slot { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; padding: 0.4rem 0.75rem; }
.show-anytime-list > .show-slot[open] { padding-bottom: 0.75rem; }

.show-words > summary { font-size: 0.9rem; color: var(--muted); font-weight: 600; cursor: pointer; }
.show-words dl { margin: 0.4rem 0 0; display: grid; gap: 0.35rem; }
.show-words dt { font-weight: 650; }
.show-words dd { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* On /live/, the run of show sits in the reading column like the rest. */
.live-page .show { margin-top: 1.25rem; }
.live-page .show-parts:empty { display: none; }

/* Google sign-in beside GitHub: Google draws its own button inside. */
.google-signin { margin: 0.75rem 0 0.25rem; min-height: 44px; }
/* Google draws its button in a light page; in a dark one Chrome paints that
   frame's backdrop white unless the frame is told it is light too. */
.google-signin iframe { color-scheme: light; }
.linked-accounts { list-style: none; padding: 0; margin: 0.5rem 0; display: grid; gap: 0.4rem; }
.linked-accounts .btn-secondary { margin-left: 0.25rem; }

@media (min-width: 64rem) {
  .hero-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4.5rem; align-items: center; }
  .sleeve-list li:nth-child(n+6) { display: block; }
  .sleeve-more { display: none; }
}

/* A section of a reading page filled from a second template file
   (/principles/ carries the why, then the principles). */
.doc-part { margin-bottom: 3.5rem; padding-bottom: 2.5rem; border-bottom: 1px solid var(--rule); }
.part-title { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem); letter-spacing: -0.02em; margin: 0 0 1rem; scroll-margin-top: 1.5rem; }

/* Icons from Phosphor (assets/icons.svg), drawn by people and shared
   under the MIT License. */
.icon { display: block; width: 2.5rem; height: 2.5rem; color: var(--accent); margin-bottom: 1rem; flex: none; }
.compare .icon { color: var(--muted); }

/* The home page's working software: the founding apps' store screens on
   a dark band, right after the claim. */
.showcase { background: var(--band); color: var(--band-ink); padding: 3.5rem 0 3rem; }
.showcase .kicker { color: var(--band-ink); }
.showcase h2 { color: var(--band-ink); margin: 0 0 2rem; max-width: 22ch; }
.showcase .btn-secondary { color: var(--band-ink); border-color: var(--band-muted); }
.showcase .btn-secondary:hover { background: transparent; border-color: var(--band-ink); }
.shots { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; align-items: end; }
.shots a { display: block; color: var(--band-ink); text-decoration: none; }
.shots img { display: block; width: 100%; height: auto; border-radius: 12px; background: #000; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.8); }
.shot-tv { grid-column: 1 / -1; }
/* Every app on the same device (iPhone App Store screenshots): two by two,
   then four across. */
.shots:not(:has(.shot-tv)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.shot-phone img { aspect-ratio: 600 / 1000; object-fit: cover; object-position: top; border-radius: 16px; }
.shot-name { display: block; margin-top: 0.6rem; font-weight: 600; font-size: 0.95rem; }
.shots a:hover .shot-name { text-decoration: underline; text-decoration-color: var(--band-accent); text-underline-offset: 0.2em; }
.shots a:focus-visible { outline: 2px solid var(--band-accent); outline-offset: 4px; border-radius: 12px; }

/* One line said large, with the rest of its thought beneath it. */
.pull { margin: 3rem 0 0; padding: 2.5rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: 1rem; }
.pull p { margin: 0; font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.9rem); line-height: 1.1; letter-spacing: -0.025em; font-weight: 650; max-width: 18ch; }
.pull footer { max-width: var(--measure); color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 64rem) { .pull { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 4rem; align-items: start; } }

/* The method's three moves, each a card. */
.moves li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem 1.4rem; }
.moves h3 { font-size: 1.35rem; }
.moves p.first { font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; font-size: 1.05rem; }
.moves p:not(.first) { color: var(--muted); line-height: 1.5; }

@media (min-width: 48rem) {
  .showcase { padding: 5rem 0 4rem; }
  .shots { grid-template-columns: minmax(0, 2.6fr) repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
  .shot-tv { grid-column: auto; }
  .shots:not(:has(.shot-tv)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pull { margin-top: 4rem; }
}

/* A topic that holds a row of cards takes the whole width. */
.topics > .topic-wide { grid-column: 1 / -1; }

/* Reactions and stance (R10). In the panel, a row at its foot that stays
   in reach; on the stage, reactions float up and fade, and a thin bar
   shows where people stand while someone talks. */
.react-bar { position: sticky; bottom: 0; z-index: 5; margin: 0.5rem -0.9rem -2rem; padding: 0.6rem 0.9rem 0.8rem; background: var(--paper); border-top: 1px solid var(--rule); display: grid; gap: 0.5rem; }
.react-row { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.25rem; }
.react-btn { position: relative; display: grid; place-items: center; min-height: 44px; padding: 0.2rem 0 0.35rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--card); cursor: pointer; font: inherit; color: var(--ink); }
.react-btn:hover { border-color: var(--accent); }
.react-btn .react-emoji { font-size: 1.25rem; line-height: 1; }
.react-btn .react-key { font-size: 0.7rem; color: var(--muted); line-height: 1; margin-top: 0.15rem; }
.react-btn.sent { animation: react-sent 0.45s ease-out; }
@keyframes react-sent { 0% { transform: scale(1); } 40% { transform: scale(1.18); background: var(--surface); } 100% { transform: scale(1); } }
.stance-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; }
.stance-btn { min-height: 40px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 0.9rem; font-weight: 600; cursor: pointer; }
.stance-btn[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.react-line { font-size: 0.8rem !important; }
@media (prefers-reduced-motion: reduce) { .react-btn.sent { animation: none; outline: 2px solid var(--accent); } }

.stage-ready { position: relative; overflow: hidden; }
.react-layer { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.react-float { position: absolute; bottom: 4vmin; display: grid; justify-items: center; gap: 0.2em; animation: react-rise 3.2s ease-out forwards; }
.react-float .react-emoji { font-size: clamp(2rem, 5vmin, 4rem); line-height: 1; }
.react-float .react-name { font-size: clamp(0.8rem, 1.6vmin, 1.1rem); font-weight: 600; color: var(--ink); background: var(--card); border-radius: 999px; padding: 0.1em 0.6em; }
@keyframes react-rise { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 75% { opacity: 1; } 100% { transform: translateY(-55vh); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .react-float { animation: react-fade 3s ease-out forwards; } @keyframes react-fade { 0%, 70% { opacity: 1; } 100% { opacity: 0; } } }
.stance-bar { position: absolute; left: 4vmin; right: 4vmin; bottom: 1.5vmin; z-index: 15; }
.stance-track { display: flex; gap: 2px; }
.stance-bar[hidden] { display: none; }
.stance-part { height: 0.8vmin; min-height: 6px; transition: flex-grow 0.6s ease; flex-basis: 0; }
.stance-part.agree { background: #3F7A4F; border-radius: 999px 0 0 999px; }
.stance-part.unsure { background: var(--edge); }
.stance-part.disagree { background: var(--accent); border-radius: 0 999px 999px 0; }
.stance-key { display: flex; justify-content: space-between; margin: 0.4vmin 0 0; font-size: clamp(0.75rem, 1.4vmin, 1rem); color: var(--muted); font-weight: 600; }

/* The room at a glance (R11): the teacher's roster in the panel, and
   everyone's "where I am on the path". */
.roster { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); padding: 0.6rem 0.8rem; }
.roster summary { font-weight: 600; cursor: pointer; }
.roster .kicker { margin: 0.75rem 0 0.35rem; font-size: 0.85rem; }
.roster-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.roster-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; font-size: 0.95rem; }
.roster-list li.is-missing .roster-name { color: var(--muted); }
.roster-name { font-weight: 600; margin-right: auto; }
.roster-stage, .roster-answered, .roster-waiting { font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 0.05rem 0.5rem; }
.roster-stage { background: var(--surface); color: var(--ink); }
.roster-answered { background: #3F7A4F; color: #fff; }
.roster-waiting { border: 1px solid var(--rule); color: var(--muted); }
.path-pick { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.9rem; font-weight: 600; }
.path-pick select { min-height: 36px; max-width: 60%; font: inherit; font-weight: 400; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); color: var(--ink); padding: 0 0.4rem; }
.stage-path { list-style: none; margin: 3vmin 0 2vmin; padding: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 1.5vmin; align-items: end; height: 42vh; }
.stage-path li { display: grid; grid-template-rows: auto 1fr auto; gap: 1vmin; height: 100%; text-align: center; }
.stage-path .count { font-size: clamp(1.2rem, 3vmin, 2.4rem); font-weight: 680; }
.stage-path .col { display: flex; align-items: flex-end; background: var(--surface); border-radius: 10px; overflow: hidden; }
.stage-path .bar { display: block; width: 100%; height: var(--share); background: var(--accent); border-radius: 10px 10px 0 0; transition: height 0.6s ease; }
.stage-path .label { font-size: clamp(0.7rem, 1.6vmin, 1.1rem); font-weight: 600; color: var(--muted); line-height: 1.2; }

/* Every rehearsal room on the main stage (R12). */
.stage-rooms { list-style: none; margin: 2vmin 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 2vmin; }
.stage-room { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 2.2vmin 2.6vmin; display: grid; gap: 0.8vmin; align-content: start; }
.stage-room h2 { margin: 0; font-size: clamp(1.2rem, 2.8vmin, 2.2rem); }
.stage-room-place { margin: 0; font-size: clamp(1rem, 2vmin, 1.5rem); line-height: 1.35; }
.stage-room-clock { margin: 0; font-size: clamp(1rem, 2.2vmin, 1.6rem); font-weight: 680; font-variant-numeric: tabular-nums; color: var(--muted); }
.stage-room-clock:empty { display: none; }
.stage-room-clock.is-over { color: var(--accent); }
.stage-room.is-asking { border: 2px solid var(--accent); }
.stage-room-asking { margin: 0; font-weight: 680; color: var(--accent); font-size: clamp(1rem, 2vmin, 1.4rem); }
.stage-room.is-done { opacity: 0.7; }

/* Pages on the board (R13). */
.board-pages { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.board-pages input[type="file"] { display: none; }
.board-library { flex-basis: 100%; }
.board-library summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }
.board-library-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; }
.board-library-row input { flex: 1 1 14rem; min-height: 40px; font: inherit; border: 1px solid var(--rule); border-radius: 8px; padding: 0 0.6rem; background: var(--card); color: var(--ink); }
.board-library-files { list-style: none; margin: 0.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Code everyone can run (R14). */
.code-box:empty { display: none; }
.code-compose summary { font-weight: 600; cursor: pointer; padding: 0.3rem 0; }
.code-compose select { min-height: 36px; margin: 0.4rem 0; font: inherit; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); color: var(--ink); }
.code-text { width: 100%; box-sizing: border-box; font: 0.85rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 4; padding: 0.6rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); color: var(--ink); resize: vertical; }
.code-check { display: flex; gap: 0.4rem; align-items: center; font-size: 0.9rem; margin-top: 0.4rem; }
.code-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); padding: 0.7rem 0.8rem; display: grid; gap: 0.5rem; }
.code-card .kicker { margin: 0; }
.code-out { margin: 0; max-height: 14rem; overflow: auto; white-space: pre-wrap; word-break: break-word; font: 0.82rem/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface); border-radius: 8px; padding: 0.6rem; }
.code-err { color: var(--accent); }
.stage-code { position: absolute; inset: 9vmin 4vmin 5vmin; z-index: 12; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 3vmin 4vmin; overflow: auto; box-shadow: 0 30px 60px -40px rgba(0,0,0,0.5); }
.stage-code[hidden] { display: none; }
.stage-code pre { margin: 0; font: clamp(1rem, 2.4vmin, 1.8rem)/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; }

/* The class chat (R15). */
.chat { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); padding: 0.7rem 0.8rem; display: grid; gap: 0.5rem; }
.chat h2 { font-size: 1.05rem; margin: 0; }
.chat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; max-height: 22rem; overflow: auto; }
.chat-msg { display: grid; gap: 0.2rem; }
.chat-msg.is-ai { border-left: 3px solid var(--rule); padding-left: 0.5rem; }
.chat-head { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: baseline; font-size: 0.82rem; }
.chat-who { font-weight: 680; }
.chat-ai { font-size: 0.72rem; font-weight: 600; border: 1px solid var(--rule); border-radius: 999px; padding: 0 0.45rem; color: var(--muted); }
.chat-when { color: var(--muted); }
.chat-text { white-space: pre-wrap; word-break: break-word; font-size: 0.95rem; line-height: 1.4; }
.chat-reacts { display: flex; flex-wrap: wrap; gap: 0.25rem; align-items: center; }
.chat-react { min-height: 30px; padding: 0 0.45rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink); font: inherit; font-size: 0.85rem; cursor: pointer; }
.chat-react.is-mine { border-color: var(--accent); background: var(--surface); }
.chat-more { display: inline-block; }
.chat-more summary { list-style: none; cursor: pointer; font-size: 0.8rem; color: var(--muted); padding: 0.2rem 0.4rem; }
.chat-more summary::-webkit-details-marker { display: none; }
.chat-more[open] { display: flex; flex-wrap: wrap; gap: 0.2rem; flex-basis: 100%; }
.chat-reply { background: none; border: 0; color: var(--accent); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; min-height: 30px; }
.chat-replies { list-style: none; margin: 0.2rem 0 0 0.8rem; padding: 0 0 0 0.6rem; border-left: 2px solid var(--rule); display: grid; gap: 0.4rem; }
.chat-compose { display: grid; gap: 0.35rem; }
.chat-compose textarea, .chat-poll input, .chat-poll textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; border: 1px solid var(--rule); border-radius: 8px; padding: 0.4rem 0.5rem; background: var(--paper); color: var(--ink); }
.chat-agent { font-size: 0.82rem; display: flex; gap: 0.35rem; align-items: center; }
.chat-compose .btn-primary { justify-self: start; }
.chat-poll summary { font-weight: 600; cursor: pointer; font-size: 0.9rem; }
.chat-poll { display: grid; gap: 0.35rem; }
.chat-foot { margin: 0; }

/* Recognition for a skill shown in class (R16). */
.recognize { display: grid; gap: 0.5rem; }
.recognize-give { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--card); padding: 0.6rem 0.8rem; }
.recognize-give summary { font-weight: 600; cursor: pointer; }
.recognize-give[open] { display: grid; gap: 0.45rem; }
.recognize-give select, .recognize-give input { width: 100%; box-sizing: border-box; min-height: 38px; font: inherit; font-size: 0.95rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); padding: 0 0.5rem; }
.recognize-give .btn-primary { justify-self: start; }
.recognize-card { border: 1px solid var(--rule); border-radius: 10px; background: var(--card); padding: 0.6rem 0.8rem; }
.recognize-card.is-new { animation: recognize-in 1.2s ease-out; }
@keyframes recognize-in { 0% { background: var(--surface); transform: scale(0.98); } 100% { background: var(--card); transform: none; } }
@media (prefers-reduced-motion: reduce) { .recognize-card.is-new { animation: none; } }
.recognize-skill { font-weight: 680; }
.recognized-list { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; }

/* The rerun (R17): the first time's share as a thin line under each bar. */
.stage-choices .bar.has-before { height: 0.85em; background: transparent; overflow: visible; }
.stage-choices .bar.has-before::after { inset: 0 auto 40% 0; }
.stage-choices .bar.has-before::before { content: ""; position: absolute; left: 0; bottom: 0; height: 22%; width: var(--before, 0%); background: var(--edge); border-radius: 999px; }
.rerun-kicker { color: var(--accent); }

/* The cohort form on /teach/ (Ben, October 6): seven questions, each one
   about how the cohort runs, beside a preview of its card on /cohorts/. */
.cohort-builder:not([hidden]) { display: grid; gap: 1.75rem; margin-top: 1.5rem; padding: 1.5rem 1.25rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }
.builder-head { display: grid; gap: 0.5rem; max-width: 40rem; }
.builder-head h2 { margin: 0; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem); letter-spacing: -0.02em; }
.builder-head p:not(.kicker) { margin: 0; color: var(--muted); }
.builder-grid { display: grid; gap: 2rem; }
.builder-steps { display: grid; gap: 0; min-width: 0; }
.cohort-builder fieldset.q { border: 0; border-top: 1px solid var(--rule); margin: 0; padding: 1.4rem 0; display: grid; gap: 0.65rem; min-width: 0; }
.cohort-builder fieldset.q:first-child { border-top: 0; padding-top: 0; }
.cohort-builder legend { float: left; width: 100%; padding: 0; margin: 0 0 0.15rem; display: flex; align-items: baseline; gap: 0.7rem; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.01em; line-height: 1.3; }
.cohort-builder legend + * { clear: both; }
.q-n { flex: none; display: inline-grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 999px; background: var(--accent); color: var(--paper); font-size: 0.85rem; font-weight: 700; transform: translateY(-0.1rem); }
.cohort-builder .hint { margin: 0; color: var(--muted); font-size: 0.93rem; font-weight: 400; max-width: 40rem; }
.cohort-builder label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; min-width: 0; }
.cohort-builder label.sub { margin-top: 0.35rem; }
.cohort-builder input:not([type="checkbox"]):not([type="radio"]), .cohort-builder select, .cohort-builder textarea {
  width: 100%; max-width: 36rem; font: inherit; font-weight: 400; color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.85rem; min-height: 48px;
}
.cohort-builder input#cohort-title { font-size: 1.15rem; font-weight: 600; }
.cohort-builder input:focus-visible, .cohort-builder select:focus-visible, .cohort-builder textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.cohort-builder .row { display: grid; gap: 0.75rem; }
.cohort-builder .addr { margin: 0; font-size: 0.92rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.6rem; }
.cohort-builder .addr .url { overflow-wrap: anywhere; }
.cohort-builder .addr b { color: var(--ink); }
.cohort-builder .choices { display: grid; gap: 0.6rem; }
.cohort-builder label.choice { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); font-weight: 400; cursor: pointer; }
.cohort-builder label.choice input { margin-top: 0.15rem; }
.cohort-builder label.choice b { display: block; font-weight: 650; }
.cohort-builder label.choice span { color: var(--muted); font-size: 0.93rem; }
.cohort-builder label.choice b { color: var(--ink); font-size: 1rem; }
.cohort-builder label.choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.cohort-builder label.check { display: flex; gap: 0.6rem; align-items: center; font-weight: 500; }
.cohort-builder .by-hand { margin-top: 0.4rem; }
.cohort-builder .by-hand summary { cursor: pointer; color: var(--muted); font-size: 0.93rem; min-height: 44px; display: flex; align-items: center; }
.cohort-builder .by-hand[open] { display: grid; gap: 0.65rem; }
.builder-preview { display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.builder-preview .open-cohort { background: var(--band); color: var(--band-ink); border-color: transparent; }
.builder-preview .open-cohort .small { color: var(--band-muted); }
.builder-preview .open-cohort .placeholder { color: var(--band-muted); font-style: italic; }
.builder-preview .open-cohort .btn-primary { pointer-events: none; background: var(--band-ink); color: var(--band); border-color: var(--band-ink); }
.builder-preview > .small { margin: 0; color: var(--muted); }
.builder-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.builder-actions p { margin: 0; flex: 1 1 16rem; }
.cohort-builder { container-type: inline-size; }
@container (min-width: 34rem) {
  .builder-grid { gap: 2.5rem; }
  .cohort-builder .row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cohort-builder .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (min-width: 58rem) {
  .builder-grid { grid-template-columns: minmax(0, 1fr) 19rem; gap: 3rem; }
  .builder-preview { position: sticky; top: 1.5rem; }
}
@media (min-width: 40rem) {
  .cohort-builder:not([hidden]) { padding: 2rem; }
}

/* /principles/ (Ben, October 6): only the principles, each drawn the same
   way: its number, its whole statement at one weight, and, one click
   away, what it means and how you can tell. */
.principles-head h1 { max-width: 14ch; }
.principles-head .lead { max-width: 40rem; }
.principles-block { display: grid; gap: 1.5rem; max-width: 52rem; }
.p-stem { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); font-weight: 680; letter-spacing: -0.02em; color: var(--ink); }
ol.principles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); counter-reset: none; }
ol.principles > li { border-bottom: 1px solid var(--rule); scroll-margin-top: 1.5rem; }
ol.principles summary { list-style: none; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; align-items: baseline; gap: 0.75rem; padding: 1.1rem 0; cursor: pointer; min-height: 44px; }
ol.principles summary::-webkit-details-marker { display: none; }
ol.principles .p-n { font-weight: 650; color: var(--accent); font-variant-numeric: tabular-nums; font-size: 1.05rem; }
ol.principles .p-s { font-size: 1.15rem; font-weight: 560; line-height: 1.45; color: var(--ink); text-wrap: pretty; }
ol.principles .p-caret { width: 1.1rem; height: 1.1rem; color: var(--muted); align-self: center; transition: transform 0.15s; }
ol.principles details[open] .p-caret { transform: rotate(180deg); color: var(--accent); }
ol.principles summary:hover .p-s { color: var(--accent); }
ol.principles summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.p-more { display: grid; gap: 1rem; padding: 0 0 1.5rem 3.25rem; max-width: var(--measure); }
.p-more p { margin: 0 0 0.75rem; }
.p-more .p-body p:last-child { margin-bottom: 0; }
.p-label { margin: 0 0 0.35rem !important; font-size: 0.78rem; font-weight: 650;  color: var(--muted); }
.p-tell { background: var(--surface); border-radius: 10px; padding: 0.9rem 1.1rem; }
.p-tell p:last-child { margin-bottom: 0; }
.p-notyet { margin: 0; max-width: 40rem; color: var(--muted); }
.p-next { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; }
.p-next p, .p-next .section-more { margin: 0; }
@media (max-width: 30rem) {
  ol.principles summary { grid-template-columns: 2rem minmax(0, 1fr) 1.25rem; gap: 0.5rem; }
  .p-more { padding-left: 2.5rem; }
}
@media (prefers-reduced-motion: reduce) { ol.principles .p-caret { transition: none; } }

/* /about/: the organization and the idea. */
.about-head h1 { max-width: 18ch; }
.about-ways { margin-top: 0; }
.about-free { margin: 1.5rem 0 0; max-width: 44rem; font-size: 1.1rem; }
.about-why .article { max-width: var(--measure); }
.about-why .part-title { margin: 0 0 1rem; }
.home .hero .pitch strong, .hero .pitch strong { font-weight: 650; color: var(--ink); }

/* A "Case study: ..." section in a rendered template page (render.js):
   set apart as a card, with the app's iPhone screen floated beside it. */
.article .case-study { margin: 2.5rem 0; padding: 1.5rem 1.25rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); display: flow-root; }
.article .case-study > :last-child { margin-bottom: 0; }
.article .case-study h2 { margin-top: 0.25rem; }
.case-label { margin: 0 !important; font-size: 0.8rem; font-weight: 650;  color: var(--accent); }
.case-shot { float: right; width: 7rem; margin: 0 0 1rem 1.25rem; }
.case-shot img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 16px 32px -20px rgba(0, 0, 0, 0.6); }
.article .case-study blockquote { border-left-color: var(--accent); }
.case-more { margin: 1rem 0 0 !important; clear: both; }
@media (min-width: 40rem) {
  .article .case-study { padding: 2rem; }
  .case-shot { width: 9.5rem; margin-left: 1.75rem; }
}

/* The home page's closing band (anti-pattern pass 2): the cohort as the
   main way in, and the others as quieter links beside it. */
.band-ways { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; align-content: end; }
.band-ways li { display: grid; gap: 0.2rem; }
.band-ways a { color: var(--band-ink); font-weight: 650; font-size: 1.1rem; text-decoration: underline; text-decoration-color: var(--band-accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.band-ways a:hover { text-decoration-thickness: 3px; }
.band-ways span { color: var(--band-muted); }

/* Events: hosting, as two guides of equal standing and the kit as a line
   (anti-pattern pass 2: no row of identical icon cards). */
.host { display: grid; gap: 1.75rem; }
.host > div { padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.host h3 { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem); letter-spacing: -0.015em; margin: 0 0 0.5rem; }
.host h3 a { color: var(--ink); text-decoration-color: var(--accent); }
.host h3 a:hover { color: var(--accent); }
.host p { margin: 0; max-width: 32rem; }
.host-kit { margin: 2rem 0 0; max-width: var(--measure); }
@media (min-width: 48rem) { .host { grid-template-columns: 1fr 1fr; gap: 3rem; } }

/* Real photographs (Ben's desk and testing devices). */
.photo { margin: 0 0 2rem; }
.photo img { display: block; width: 100%; height: auto; border-radius: 12px; }
.photo figcaption { margin-top: 0.6rem; font-size: 0.9rem; color: var(--muted); max-width: var(--measure); }
#weeks .photo { max-width: 40rem; }
.about-head + .photo, section[aria-labelledby="who-title"] .photo { margin-top: 1.5rem; }

/* ------------------------------------------------------------------
   The site's own patterns (October 6, 2026; research/notes/design-patterns.md).
   1. One continuous page. Color never runs edge to edge: a colored
      section is a panel, inset to the page's width with round corners,
      so the page reads as paper with things placed on it.
   2. Hanging headings. On reading pages, from 64rem up, each heading
      sits in a left column beside the words it introduces, so long text
      has a spine instead of hugging the left edge.
   3. The footer is part of the page: paper, with one rule above it.
   ------------------------------------------------------------------ */
:root { --panel-radius: 28px; }

.band, .showcase, .section.tint, .section.idea { background: none; padding-left: var(--gutter); padding-right: var(--gutter); }
.band { padding-top: 1rem; padding-bottom: 4rem; }
.showcase { padding-top: 1rem; padding-bottom: 1rem; }
.section.tint, .section.idea { padding-top: 1rem; padding-bottom: 1rem; }
.band > .wrap, .showcase > .wrap, .section.tint > .wrap, .section.idea > .wrap {
  border-radius: var(--panel-radius);
  padding: clamp(2.25rem, 1.5rem + 3vw, 4.5rem) clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  max-width: calc(var(--wide) + 2rem);
}
.band > .wrap { background: var(--band); }
.showcase > .wrap { background: var(--band); }
.section.tint > .wrap, .section.idea > .wrap { background: var(--surface); }
@media (min-width: 64rem) { .band > .wrap { padding-top: 4.5rem; padding-bottom: 4.5rem; } }

.site-footer { background: none; }

@media (min-width: 64rem) {
  /* Topics that stand one under another: the heading hangs on the left. */
  .topics.single { gap: 0; }
  .topics.single > .topic {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem;
    padding: 3rem 0; border-top: 1px solid var(--rule);
  }
  .topics.single > .topic:first-child { border-top: 0; padding-top: 1rem; }
  .topics.single > .topic > * { grid-column: 2; }
  .topics.single > .topic > h2 { grid-column: 1; grid-row: 1 / span 30; align-self: start; position: sticky; top: 1.5rem; margin: 0; }

  /* A rendered document with no contents beside it: the same spine. */
  .article.hang {
    max-width: none; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem;
  }
  .article.hang > *, .article.hang .doc-body > * { grid-column: 2; max-width: var(--measure); }
  .article.hang .doc-body { display: contents; }
  .article.hang .doc-body > h2 { grid-column: 1; margin-top: 3rem; }
  .article.hang .doc-body > .table-wrap { grid-column: 1 / -1; max-width: none; margin: 1rem 0 2rem; }
  /* About's why: the section's own heading starts the same spine. */
  .about-why { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem; }
  .about-why .article, .about-why .article .doc-body { display: contents; }
  .about-why .doc-status:empty { display: none; }
  .about-why > .part-title { grid-column: 1; margin: 0; }
  .about-why .article > *, .about-why .doc-body > *, .about-why > .source { grid-column: 2; max-width: var(--measure); }
  .about-why .doc-body > h2 { grid-column: 1; margin-top: 3rem; }
  .hang-section { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem; border-top: 1px solid var(--rule); }
  .hang-section > * { grid-column: 2; }
  .hang-section > h2 { grid-column: 1; grid-row: 1 / span 4; }
  .hang-section > .photo { grid-column: 1 / -1; }
}

/* The weeks: one row per week, the week on the left and its stages
   listed close together on the right, so the list reads as five weeks,
   not fifteen rows. */
.stages.by-week { list-style: none; margin: 0; padding: 0; }
.stages.by-week > li.week { display: grid; gap: 0.75rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); border-bottom: 0; }
.stages.by-week > li.week:first-child { border-top: 0; padding-top: 0.5rem; }
.stages.by-week .week-head .wk { margin: 0 0 0.2rem; color: var(--muted); font-size: 0.95rem; font-weight: 650; }
.stages.by-week .week-head .wk-what { margin: 0; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); font-weight: 650; letter-spacing: -0.015em; line-height: 1.3; max-width: 24ch; }
.stages.by-week .week-stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.stages.by-week .week-stages li { border: 0; }
.stages.by-week .week-stages a { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 0.1rem 0.75rem; padding: 0.5rem 0; align-items: baseline; }
.stages.by-week .week-stages .n { grid-row: span 2; color: var(--muted); font-size: 0.95rem; font-weight: 600; }
.stages.by-week .week-stages .t { font-size: 1.05rem; font-weight: 600; }
.stages.by-week .week-stages .l { grid-column: 2; color: var(--muted); font-size: 0.97rem; line-height: 1.5; }
.stages.by-week .week-stages .path-mark { grid-column: 2; }
@media (min-width: 64rem) {
  .stages.by-week > li.week { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 4rem; padding: 1.75rem 0; }
  .stages.by-week .week-stages a { grid-template-columns: 2.5rem minmax(0, 5fr) minmax(0, 7fr); gap: 1.5rem; padding: 0.4rem 0; }
  .stages.by-week .week-stages .n { grid-row: auto; }
  .stages.by-week .week-stages .l { grid-column: 3; }
}
.section-head > .head-side > .prose { margin: 0 0 1.5rem; }
.section-head > .head-side .photo { margin: 0; }
[data-events] h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 1rem; }
[data-events] .small, [data-upcoming] p { max-width: var(--measure); }
#now > h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); margin-bottom: 0.5rem; }
.page-head .fine { max-width: 38rem; }
@media (min-width: 64rem) { .topics.single > .topic > .checklists { grid-column: 1 / -1; margin-top: 2rem; } }

/* Text in side-by-side columns starts at the same height: the top of
   the heading's capitals is level with the top of the first line beside
   it (Ben, October 6). Each column's first line is trimmed down to its
   cap height (text-box), and the columns align at the top. Where
   text-box is not supported, the tops of the boxes align instead. */
@media (min-width: 56rem) {
  .section-head, .band > .wrap { align-items: start; }
  .section-head > *, .section-head > * > :first-child, .band > .wrap > *, .band > .wrap > * > :first-child { text-box: trim-start cap alphabetic; margin-top: 0; }
}
@media (min-width: 64rem) {
  .pull, .topics.single > .topic, .hang-section, .about-why, .article.hang,
  .stages.by-week > li.week { align-items: start; }
  .pull > *, .topics.single > .topic > h2, .topics.single > .topic > h2 + *,
  .hang-section > h2, .hang-section > h2 + *, .about-why > .part-title,
  .about-why .doc-body > :first-child, .about-why .doc-body > h2, .about-why .doc-body > h2 + *,
  .article.hang .doc-body > :first-child, .article.hang .doc-body > h2, .article.hang .doc-body > h2 + *,
  .stages.by-week .week-head > :first-child, .stages.by-week .week-stages > li:first-child a > * { text-box: trim-start cap alphabetic; }
  .topics.single > .topic > h2 + *, .topics.single > .topic > h2 + ol > li:first-child, .topics.single > .topic > h2 + ul > li:first-child,
  .topics.single > .topic > h2 + * > :first-child, .hang-section > h2 + * > :first-child,
  .stages.by-week .week-head > :first-child, .stages.by-week .week-stages > li:first-child a,
  .pull > * { text-box: trim-start cap alphabetic; margin-top: 0; padding-top: 0; }
  .band-ways > li:first-child, .band-ways > li:first-child > :first-child { text-box: trim-start cap alphabetic; margin-top: 0; }
  .hang-section > h2, .hang-section > h2 + * { margin-top: 0; }
  /* A hanging heading and the words beside it start on the same row, so
     they take the same space above them. */
  .about-why .doc-body > h2 + *, .article.hang .doc-body > h2 + * { margin-top: 3rem; }
}
@media (min-width: 64rem) { .topics.single > .topic > h2 + .actions { margin-top: 0; } }

/* A heading that introduces the whole section, centered across both
   columns (Ben, October 6). Used where the section has no words beside
   its heading. */
@media (min-width: 56rem) {
  .head-center { text-align: center; }
  .section-head.head-center { grid-template-columns: 1fr; }
  .head-center > div { grid-column: 1 / -1; }
  .head-center h2 { margin-left: auto; margin-right: auto; max-width: 26ch; }
}

/* Finding a weekly time (/times/ and /teach/times/). Thistle marks what a
   person has chosen and, for the teacher, how many chose it; forest stays
   for what can be clicked. */
.account.times { max-width: 46rem; }
.times-head { padding-bottom: 0; }
.times-note { white-space: pre-line; max-width: var(--measure); margin: 0.75rem 0 0; }
.times-form { gap: 1.75rem; grid-template-columns: minmax(0, 1fr); }
.times-state, .times-form > * { min-width: 0; }
.times-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 0.75rem; }
.times-who { max-width: 30rem; }
.times-pick legend { padding: 0; }
.times-pick legend h2 { margin: 0; }
.times-form .hint, .times-teach .hint { margin: 0; font-weight: 400; color: var(--muted); font-size: 0.9rem; max-width: var(--measure); }
.times-zone label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.95rem; }
.times-zone select { max-width: 100%; min-width: 0; flex: 1 1 12rem; font: inherit; font-weight: 400; padding: 0.5rem 0.6rem; border: 1px solid var(--muted); border-radius: 10px; background: var(--card); color: var(--ink); min-height: 44px; }
.times-calendar { display: grid; gap: 0.4rem; justify-items: start; }
.times-mode { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.times-form label.times-mode-opt, .times-host label.times-mode-opt { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.9rem; min-height: 44px; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); cursor: pointer; }
.times-form label.times-mode-opt:has(input:checked), .times-host label.times-mode-opt:has(input:checked) { border-color: var(--ink); }
.times-form .times-mode-opt input, .times-host .times-mode-opt input { margin: 0; padding: 0; min-height: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--forest); }
.swatch { width: 1.1rem; height: 1.1rem; border-radius: 4px; flex: none; }
.swatch.works { background: var(--thistle); }
.swatch.maybe { border: 2px dashed var(--thistle); }
.times-status { min-height: 1.5em; margin: 0; color: var(--muted); }
.times-comment { max-width: 30rem; }

.times-scroll { overflow-x: auto; }
.times-grid { border-collapse: separate; border-spacing: 4px; width: 100%; max-width: 38rem; table-layout: fixed; margin-left: -4px; }
.times-grid th { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.times-grid thead th { text-align: center; padding: 0 0 0.2rem; }
.times-grid abbr { text-decoration: none; }
.times-grid .times-corner, .times-grid tbody th { width: 4.5rem; }
.times-grid tbody th { text-align: right; padding-right: 0.35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.times-grid td { padding: 0; }
.times-cell {
  appearance: none; display: block; width: 100%; height: 44px; padding: 0; position: relative;
  border: 1px solid var(--rule); border-radius: 8px; background: var(--card);
  font: inherit; font-weight: 600; font-size: 0.95rem; color: var(--on-thistle);
  font-variant-numeric: tabular-nums; cursor: pointer; user-select: none; touch-action: manipulation;
}
.times-cell:not(:disabled):hover { border-color: var(--ink); }
.times-cell:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }
:root[data-theme="dark"] .times-cell:focus-visible { outline-color: var(--thistle); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .times-cell:focus-visible { outline-color: var(--thistle); } }
.times-cell:disabled { cursor: default; }
.times-cell:not(.works):not(.h3):not(.h4) { color: var(--ink); }
.times-cell.works { background: var(--thistle); border-color: var(--thistle); }
.times-cell.maybe { border: 2px dashed var(--thistle); }
.times-cell.busy::after { content: ""; position: absolute; top: 4px; right: 4px; border-style: solid; border-width: 0 8px 8px 0; border-color: transparent var(--muted) transparent transparent; }
.times-cell.works.busy::after { border-right-color: var(--on-thistle); }
.times-cell.h1 { background: color-mix(in srgb, var(--thistle) 22%, var(--card)); }
.times-cell.h2 { background: color-mix(in srgb, var(--thistle) 45%, var(--card)); }
.times-cell.h3 { background: color-mix(in srgb, var(--thistle) 72%, var(--card)); border-color: transparent; }
.times-cell.h4 { background: var(--thistle); border-color: var(--thistle); }
.times-cell.picked { outline: 2px solid var(--ink); outline-offset: 2px; }
.times-legend { display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; color: var(--muted); }
.times-ramp { display: inline-flex; gap: 3px; }
.times-ramp i { width: 1.5rem; height: 0.9rem; border-radius: 3px; }
.times-ramp .h1 { background: color-mix(in srgb, var(--thistle) 22%, var(--card)); }
.times-ramp .h2 { background: color-mix(in srgb, var(--thistle) 45%, var(--card)); }
.times-ramp .h3 { background: color-mix(in srgb, var(--thistle) 72%, var(--card)); }
.times-ramp .h4 { background: var(--thistle); }

.times-keep { border-top: 1px solid var(--rule); margin-top: 1rem; }
.times-link, .times-share { display: grid; gap: 0.6rem; }
.times-link { grid-template-columns: minmax(0, 1fr) auto; align-items: center; max-width: 34rem; }
.times-link input, .times-share input { font: inherit; font-size: 0.95rem; padding: 0.6rem 0.7rem; border: 1px solid var(--muted); border-radius: 10px; background: var(--surface); color: var(--ink); min-height: 44px; min-width: 0; width: 100%; }
.times-share label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
.times-detail { display: grid; gap: 0.9rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.times-detail h3 { margin: 1.25rem 0 0; }
.times-detail .actions { margin-top: 0.25rem; }
.times-teach > .times-detail { margin-top: 0; padding-top: 0; border-top: 0; }
/* Making a poll a cohort (/teach/times/poll/): an inset panel, since it is
   the one step that changes more than the poll. */
.times-cohort { display: grid; gap: 0.9rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.25rem; margin-top: 1.25rem; }
.times-cohort h3 { margin: 0; }
.times-cohort [data-made] p { margin: 0 0 0.5rem; }
.times-make { display: grid; gap: 0.9rem; }
.times-invite-list { flex-direction: column; gap: 0; }
.times-invite-list .small { color: var(--muted); }
.times-invite { background: var(--card); border: 2px solid var(--accent); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem; }
.times-invite h2 { margin: 0 0 0.5rem; font-size: 1.3rem; }
.times-invite p { margin: 0 0 0.75rem; max-width: var(--measure); }
.times-invite p:last-child { margin-bottom: 0; }
.times-who-list h4 { margin: 0 0 0.25rem; font-size: 1rem; }
.times-who-list p { margin: 0.2rem 0; }
.times-best { margin: 0; padding-left: 1.4rem; }
.times-best li { margin: 0.3rem 0; }
.times-days { border: 0; padding: 0; margin: 0; }
.times-days legend { font-weight: 600; font-size: 0.95rem; padding: 0; margin-bottom: 0.4rem; }
.times-day-list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.times-day-list label.check { min-height: 44px; }
.times-answers { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.times-answers th, .times-answers td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem; border-top: 1px solid var(--rule); }
.times-answers thead th { border-top: 0; font-weight: 600; color: var(--muted); }
.times [data-saved]:focus { outline: none; }
.times-grid tr.times-gap > * { padding-top: 1.25rem; }
.times-part-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
@media (min-width: 40rem) { .times-part-list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.times-step { max-width: 16rem; }
.times-new .row { align-items: start; }
.times-wake { margin: 0; max-width: var(--measure); line-height: 2.4; }
.times-wake input { font: inherit; font-size: 0.95rem; padding: 0.3rem 0.5rem; border: 1px solid var(--muted); border-radius: 8px; background: var(--card); color: var(--ink); min-height: 40px; }
.times-calendar .times-status, .times-wake { font-size: 0.95rem; }
/* The teacher's own times: a dot on each time they can make, hollow for
   "if need be". Shown to everyone with the link. */
.times-host { display: grid; gap: 0.75rem; }
.times-host h3 { margin: 0.5rem 0 0; }
.times-host-name { max-width: 30rem; }
.times-cell.host-yes::before, .times-cell.host-maybe::before { content: ""; position: absolute; left: 6px; bottom: 6px; width: 7px; height: 7px; border-radius: 50%; }
.times-cell.host-yes::before { background: var(--ink); }
.times-cell.host-maybe::before { border: 1.5px solid var(--ink); }
.times-cell.works.host-yes::before, .times-cell.h3.host-yes::before, .times-cell.h4.host-yes::before { background: var(--on-thistle); }
.times-cell.works.host-maybe::before, .times-cell.h3.host-maybe::before, .times-cell.h4.host-maybe::before { border-color: var(--on-thistle); }
.times-host-key { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; margin: 0; font-size: 0.9rem; color: var(--muted); }
.times-host-key .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); margin-right: 0.4rem; vertical-align: middle; }
.times-host-key .dot.hollow { background: none; border: 1.5px solid var(--ink); }
.times-cal-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.times-cal-list label.check { min-height: 40px; font-size: 0.95rem; }

/* Exchanges (/exchange/): a thread of short videos, Threadit's shape. The
   player is the one large thing; thistle marks the clip that is playing
   (what is current), and the accent is what can be clicked. */
.exchange { padding-bottom: 4rem; }
.x-head { padding: 2rem 0 1.75rem; }
.x-head h1 { margin: 0; max-width: 20ch; }
.x-prompt { font-size: 1.2rem; line-height: 1.55; max-width: var(--measure); margin: 1rem 0 0; white-space: pre-line; }
.x-summary { color: var(--muted); margin: 0.85rem 0 0; max-width: var(--measure); }
.x-summary a { color: inherit; }
.x-tools { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin-top: 1.25rem; }
.x-layout { display: grid; gap: 2rem; }
/* Two columns from 48rem, so narrowing a desktop window keeps the thread
   beside the video instead of the video ballooning and the thread dropping
   below it. Neither the player nor the camera is ever taller than the
   window: each is as wide as its column or as wide as the window's height
   allows, whichever is less. */
@media (min-width: 48rem) {
  .x-layout { grid-template-columns: minmax(0, 1.75fr) minmax(15rem, 1fr); align-items: start; gap: 2rem; }
  .x-thread { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); max-height: calc(100svh - 3rem); overflow: auto; padding-right: 0.25rem; }
}
@media (min-width: 64rem) { .x-layout { grid-template-columns: minmax(0, 1.75fr) minmax(17rem, 1fr); gap: 2.5rem; } }
.x-player { width: min(100%, calc((100vh - 8rem) * 16 / 9)); width: min(100%, calc((100svh - 8rem) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--surface); position: relative; display: grid; place-items: center; scroll-margin-top: 1rem; }
.x-player iframe, .x-player video { width: 100%; height: 100%; border: 0; display: block; background: #000; }
.x-video { position: relative; width: 100%; height: 100%; }
.x-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; display: grid; place-items: center; border: 0; border-radius: 16px; background: rgba(0, 0, 0, 0.66); color: #fff; cursor: pointer; transition: background-color 0.15s; }
.x-play svg { width: 30px; height: 30px; margin-left: 3px; }
.x-play:hover { background: rgba(0, 0, 0, 0.82); }
.x-play:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.x-player-empty { color: var(--muted); margin: 0; padding: 1.5rem; text-align: center; max-width: 32rem; }
.x-player-empty p { margin: 0 0 1rem; }
.x-player-empty .hint { margin: 0.75rem 0 0; }
.x-now { display: grid; gap: 0.6rem; margin-top: 1rem; }
.x-now p { margin: 0; }
.x-now-who { display: flex; gap: 0.75rem; align-items: center; }
.x-now-name { font-weight: 650; }
.x-now-when { color: var(--muted); font-size: 0.95rem; }
.x-now-note { max-width: var(--measure); white-space: pre-line; }
.x-now .actions { margin-top: 0.25rem; }
.x-face { position: relative; width: var(--size, 40px); height: var(--size, 40px); border-radius: 50%; overflow: hidden; background: var(--surface); display: inline-grid; place-items: center; flex: none; }
.x-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-initials { font-weight: 650; font-size: calc(var(--size, 40px) * 0.38); color: var(--muted); }
.x-thread-head { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; justify-content: space-between; margin: 0 0 0.75rem; }
.x-thread-title { font-size: 1.1rem; margin: 0; }
.x-answers { list-style: none; margin: 0.3rem 0 0 1.1rem; padding: 0 0 0 0.6rem; border-left: 2px solid var(--rule); display: grid; gap: 0.3rem; }
.x-clip-answer .x-clip-btn { grid-template-columns: 5.25rem minmax(0, 1fr); padding: 0.4rem; }
.x-more { padding: 0.2rem 0 0.2rem 0.4rem; }
.x-next { position: absolute; inset: auto 0.75rem 0.75rem auto; display: grid; gap: 0.4rem; justify-items: start; max-width: min(20rem, calc(100% - 1.5rem)); padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--card); color: var(--ink); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35); z-index: 5; }
.x-next p { margin: 0; }
.x-next-who { font-weight: 650; }
.x-next-count { color: var(--muted); font-size: 0.92rem; }
.x-clips { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.x-clip-btn {
  appearance: none; width: 100%; display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: 0.8rem; align-items: start;
  text-align: left; padding: 0.5rem; border: 1px solid transparent; border-radius: 12px; background: none; color: var(--ink); font: inherit; cursor: pointer;
}
.x-clip-btn:hover { border-color: var(--rule); }
.x-clip { position: relative; }
.x-clip:has(.x-clip-remove) .x-clip-btn { padding-right: 2.75rem; }
.x-clip-remove { position: absolute; top: 0.4rem; right: 0.4rem; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--muted); cursor: pointer; }
.x-clip-remove svg { width: 18px; height: 18px; }
.x-clip-remove:hover { color: var(--ink); border-color: var(--rule); }
.x-clip-remove:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.x-clip-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.x-clip-btn[aria-current="true"] { background: color-mix(in srgb, var(--thistle) 32%, var(--paper)); border-color: transparent; }
.x-thumb { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.x-thumb > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.x-thumb:has(> img) .x-face { position: absolute; left: 5px; bottom: 5px; box-shadow: 0 0 0 2px var(--paper); --size: 26px !important; }
.x-len { position: absolute; right: 5px; bottom: 5px; background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 1px 6px; border-radius: 6px; font-variant-numeric: tabular-nums; }
.x-clip-words { display: grid; gap: 0.15rem; min-width: 0; padding-top: 0.1rem; }
.x-clip-name { font-weight: 650; }
.x-clip-when { color: var(--muted); font-size: 0.9rem; }
.x-clip-reacts { font-size: 0.9rem; letter-spacing: 0.1em; }
.x-reactions { display: grid; gap: 0.6rem; }
.x-reactions .react-row { max-width: 30rem; }
.x-reactions .react-btn[aria-pressed="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--thistle) 35%, var(--card)); }
.x-reactions .hint { margin: 0; color: var(--muted); font-size: 0.92rem; }
.x-reacted { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; color: var(--muted); font-size: 0.92rem; }
.x-reacted li { display: flex; gap: 0.5rem; align-items: baseline; }
.x-reacted-emoji { font-size: 1.05rem; color: var(--ink); }
.x-clip-closed-note { color: var(--muted); font-size: 0.9rem; font-style: italic; }
.x-clip-note { font-size: 0.92rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.x-empty { color: var(--muted); }
.x-signin { display: grid; gap: 0.5rem; border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 0.5rem; }
.x-signin p { margin: 0; }
.x-compose { display: grid; gap: 1rem; max-width: 46rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); scroll-margin-top: 1rem; }
.x-compose h2 { margin: 0; }
.x-compose h2:focus { outline: none; }
.x-compose .hint { margin: 0; color: var(--muted); font-size: 0.92rem; max-width: var(--measure); }
.x-note { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; }
.x-note .hint { font-weight: 400; }
.x-note textarea { font: inherit; font-weight: 400; padding: 0.6rem 0.7rem; border: 1px solid var(--muted); border-radius: 10px; background: var(--card); color: var(--ink); }
.x-progress { width: 100%; height: 8px; accent-color: var(--accent); }
.x-post-status { margin: 0; min-height: 1.4em; color: var(--muted); }

/* The recorder */
.xr { display: grid; gap: 0.9rem; }
.xr-sources { display: inline-flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--rule); border-radius: 12px; justify-self: start; }
.xr-source { appearance: none; border: 0; background: none; font: inherit; font-weight: 600; padding: 0.45rem 1rem; border-radius: 9px; min-height: 40px; color: var(--ink); cursor: pointer; }
.xr-source[aria-pressed="true"] { background: color-mix(in srgb, var(--thistle) 45%, var(--paper)); }
.xr-source:disabled { opacity: 0.55; cursor: default; }
.xr-stage { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #000; }
.xr-stage { width: min(100%, calc((100vh - 12rem) * 16 / 9)); width: min(100%, calc((100svh - 12rem) * 16 / 9)); }
/* A phone held upright films upright; a narrow desktop window does not. */
@media (max-width: 40rem) and (pointer: coarse) and (orientation: portrait) {
  .xr-stage { aspect-ratio: 3 / 4; width: min(100%, calc((100svh - 12rem) * 3 / 4)); }
}
.xr-steps { margin: 0; padding: 1.1rem 1.25rem 1.1rem 2.6rem; border-radius: var(--radius); background: var(--surface); max-width: var(--measure); display: grid; gap: 0.6rem; }
.xr-steps li { padding-left: 0.2rem; }
.xr-stage video { width: 100%; height: 100%; object-fit: contain; display: block; background: #000; }
.xr-stage.mirror .xr-live { transform: scaleX(-1); }
.xr-stage.recording { box-shadow: inset 0 0 0 3px #E5484D; }
.xr-idle { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.5rem; text-align: center; background: var(--surface); color: var(--muted); }
.xr-idle p { margin: 0; max-width: 28rem; }
.xr-count { position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(4rem, 14vw, 7rem); font-weight: 700; color: #fff; background: rgba(0, 0, 0, 0.3); text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5); }
.xr-badge { position: absolute; top: 0.75rem; left: 0.75rem; display: inline-flex; align-items: center; gap: 0.45rem; background: rgba(0, 0, 0, 0.66); color: #fff; padding: 0.3rem 0.75rem; border-radius: 999px; font-weight: 600; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.xr-badge::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: #E5484D; }
.xr-controls { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.xr-rec { appearance: none; display: inline-flex; align-items: center; gap: 0.6rem; border: 0; border-radius: 999px; padding: 0.7rem 1.4rem; min-height: 48px; font: inherit; font-weight: 650; background: var(--accent); color: var(--on-ink); cursor: pointer; }
.xr-rec::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: #E5484D; }
.xr-rec.stop::before { border-radius: 2px; background: currentColor; }
.xr-rec:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.xr-status { margin: 0; min-height: 1.4em; color: var(--muted); }
.xr-alt p { margin: 0; }
.x-section { display: grid; gap: 0.75rem; }
.x-section > h2 { margin-bottom: 0; }
.x-section .small { margin: 0; }
.x-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.x-list li { display: grid; gap: 0.2rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.x-list-title { font-weight: 650; font-size: 1.05rem; }
.x-list-line { color: var(--muted); font-size: 0.95rem; }
.x-form { max-width: 34rem; }

/* The signed-in home and header (research/notes/signed-in-experience-notes.md).
   <html data-member> is set in the home page's head before it draws, so
   someone signed in never sees the pitch flash, and the reverse. */
.member-home { display: none; }
html[data-member] .member-home { display: block; }
html[data-member] .public-home { display: none; }
.member-home > .wrap { padding-bottom: 4rem; }
.home-head { display: flex; align-items: center; gap: 1rem; padding: 2rem 0 1.5rem; }
.home-head h1 { margin: 0; font-size: clamp(2rem, 1.5rem + 2.4vw, 3.2rem); line-height: 1.05; letter-spacing: -0.03em; font-weight: 680; }
.home-head .small { margin: 0.35rem 0 0; color: var(--muted); }
.home-head .avatar { border-radius: 50%; border: 1px solid var(--rule); flex: none; }
.home-status { color: var(--muted); }
.home-status[hidden] { display: none; }
.home-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.home-row { display: grid; gap: 0.6rem; padding: 0.9rem 0; border-bottom: 1px solid var(--rule); }
.home-row-text > p { margin: 0; }
.home-row-title { font-weight: 650; font-size: 1.05rem; line-height: 1.35; }
.home-row-line { color: var(--muted); font-size: 0.97rem; margin-top: 0.15rem !important; }
.home-row .actions { margin: 0; flex-wrap: wrap; }
.home-when { display: block; color: var(--muted); font-weight: 600; font-size: 0.95rem; }
.home-empty > p { margin: 0 0 1rem; max-width: var(--measure); }
.home-empty .actions { margin: 0; }
.home-open { margin-top: 1.5rem; }
.home-open > .small { color: var(--muted); margin: 0 0 0.5rem; }
.home-part { padding: 2rem 0; border-top: 1px solid var(--rule); }
.home-part > h2 { font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.7rem); margin: 0 0 1rem; letter-spacing: -0.015em; }
.home-part .actions { margin-top: 1rem; }
.home-part .x-form { margin-top: 1rem; }
.home-part > div > .small { color: var(--muted); max-width: var(--measure); }
/* What is on now and soon: the current thing, so thistle's tint, in a panel. */
.home-next { background: var(--surface); border-radius: var(--panel-radius, 28px); padding: 1.25rem 1.25rem 0.5rem; margin: 0 0 1.5rem; }
.home-next > h2 { font-size: 1.15rem; margin: 0 0 0.5rem; }
.home-next .home-rows { border-top: 0; }
.home-next .home-row:last-child { border-bottom: 0; }
.home-next .home-row.live .home-when { color: var(--accent); }
.home-more { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.home-more li { display: grid; gap: 0.15rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.home-more a { color: var(--ink); font-weight: 650; font-size: 1.05rem; text-decoration: none; }
.home-more a:hover { color: var(--accent); text-decoration: underline; }
.home-more span { color: var(--muted); font-size: 0.97rem; }
@media (min-width: 40rem) {
  .home-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
  .home-row .actions { justify-content: flex-end; }
}
@media (min-width: 56rem) {
  .home-head { padding: 3.5rem 0 2.5rem; gap: 1.25rem; }
  .home-head .avatar { width: 72px; height: 72px; }
  .home-next { padding: 1.75rem 2rem 0.75rem; margin-bottom: 2.5rem; }
}
@media (min-width: 64rem) {
  .home-part.hang-section { padding: 2.5rem 0; }
  .home-part.hang-section > h2 { margin: 0; position: sticky; top: 1.5rem; }
}

/* The account menu in the header, for someone signed in. */
.account-menu { position: relative; }
.account-button {
  appearance: none; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 40px;
  padding: 0.25rem 0.85rem 0.25rem 0.3rem; border: 1px solid var(--edge); border-radius: 999px;
  background: transparent; color: var(--ink); font: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer;
}
.account-button:not(:has(img)) { padding-left: 0.85rem; }
.account-button img { width: 30px; height: 30px; border-radius: 50%; display: block; }
.account-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-button[aria-expanded="true"] { border-color: var(--accent); }
.account-menu-list {
  position: absolute; right: 0; top: calc(100% + 0.4rem); z-index: 20; min-width: 12rem;
  list-style: none; margin: 0; padding: 0.35rem; background: var(--card); color: var(--ink);
  border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}
.account-menu-list[hidden] { display: none; }
.account-menu-list a { display: block; padding: 0.65rem 0.8rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; }
.account-menu-list a:hover, .account-menu-list a:focus-visible { background: var(--surface); color: var(--accent); }
@media (min-width: 56rem) { .account-button { min-height: 44px; } }
/* On a phone, the picture alone, so the header keeps to the wordmark's row;
   the button's label still names the account. */
.account-button:has(img) .account-name { display: none; }
.account-button:has(img) { padding: 0.25rem; }
@media (min-width: 30rem) {
  .account-button:has(img) .account-name { display: inline; }
  .account-button:has(img) { padding: 0.25rem 0.85rem 0.25rem 0.3rem; }
}
/* From 48rem the menu joins the wordmark's row, so a window narrowed on a
   desktop spends one row on the header, not two. Until 64rem the account
   button is the picture alone again, to leave the menu room. */
@media (min-width: 48rem) {
  .nav { order: 0; width: auto; margin-left: auto; }
  .nav ul { flex-wrap: nowrap; }
}
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .account-button:has(img) .account-name { display: none; }
  .account-button:has(img) { padding: 0.25rem; }
}

/* The teaching desk's "What needs you" (/teach/): a count and a link per
   queue, never the queue itself (PAGES.md rule 6). */
.needs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.needs li { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }

/* How you find your way (PAGES.md; research/notes/navigation-and-wayfinding-notes.md).
   The page you are on is marked by more than color: an underline, in the
   site header and in every area's row of links. */
.nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; }

/* An area's row of links (Teaching, Run the hub, one cohort): each item
   its own page, the current one underlined. It wraps at phone width
   rather than scrolling sideways. */
.area-nav { border-bottom: 1px solid var(--rule); margin: 1.25rem 0 0; }
.area-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.area-nav a { display: inline-block; padding: 0.6rem 0 0.55rem; color: var(--muted); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.area-nav a:hover { color: var(--ink); }
.area-nav a[aria-current] { color: var(--ink); font-weight: 650; border-bottom-color: currentColor; }

/* Breadcrumbs say where a page sits, not where you came from. They end at
   the parent (the heading names this page), and at phone width only the
   parent shows. */
nav.crumbs { padding-top: 1.25rem; font-size: 0.95rem; }
nav.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; }
nav.crumbs li + li::before { content: "\203A"; color: var(--muted); margin-right: 0.5rem; }
nav.crumbs a { color: var(--muted); }
@media (max-width: 39.99rem) {
  nav.crumbs li:not(:last-child) { display: none; }
  nav.crumbs li:last-child::before { content: "\2039"; margin-right: 0.4rem; }
}
.area-nav + .page-head, .area-nav + nav.crumbs + .page-head { padding-top: 1.75rem; }
.cohort-top .area-nav { margin-top: 0.75rem; }
.cohort-top + .page-head { padding: 1.25rem 0 1rem; gap: 0.6rem; }
.cohort-top + .page-head .ui-meta-line { margin: 0; }
.cohort-row { margin-bottom: 2rem; }

/* Running the hub (/admin/): each right a row with what it allows and one
   button; lists of cohorts and changes as plain lists. */
.rights { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.right-row { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.25rem; display: grid; gap: 0.5rem; }
.right-row p { margin: 0; }
.right-name { font-weight: 600; }
@media (min-width: 48rem) {
  .right-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 1.5rem; }
  .right-row > [role="status"] { grid-column: 1 / -1; }
}
.admin-log { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.admin-log li { margin: 0.35rem 0; }
.admin-note, .admin-filter label { display: grid; gap: 0.35rem; font-weight: 600; font-size: 0.95rem; max-width: 30rem; }
.admin-filter { align-items: end; }

/* ---- The hub's shared pieces (DESIGN-KIT.md; assets/ui.js) ------------ */
.icon { width: 1.1em; height: 1.1em; flex: none; vertical-align: -0.15em; }
.ui-facts { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin: 0; }
.ui-facts div { display: grid; gap: 0.1rem; }
.ui-facts dt { font-size: 0.85rem; color: var(--muted); }
.ui-facts dd { margin: 0; font-weight: 500; }
.ui-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ui-row { display: grid; gap: 0.5rem 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); }
.ui-row-main { display: grid; gap: 0.2rem; min-width: 0; }
.ui-row-title { font-weight: 600; }
a.ui-row-title { color: var(--ink); }
.ui-row-meta { color: var(--muted); font-size: 0.95rem; }
.ui-row-side { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
@media (min-width: 40rem) {
  .ui-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .ui-row-side { justify-content: flex-end; }
}
.ui-empty { display: grid; justify-items: start; gap: 0.75rem; padding: 1.25rem 0; color: var(--muted); }
.ui-empty p { margin: 0; }
.ui-disclosure summary { cursor: pointer; color: var(--muted); font-size: 0.95rem; }
.ui-disclosure[open] summary { margin-bottom: 0.5rem; }

/* ---- The signed-in workspace (PAGES.md, "How you find your way") -------
   Signed in, the public menu gives way to a sidebar of the person's own
   things; the head marks <html data-signed-in> before the page draws. */
html[data-signed-in] .site-header .nav { display: none; }
.app-nav, .app-menu-button { display: none; }
html[data-signed-in] body:not([data-no-app-nav]) .app-menu-button { display: inline-flex; align-items: center; gap: 0.4rem; margin-right: auto; margin-left: 0.25rem; background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-weight: 600; color: var(--ink); cursor: pointer; min-height: 40px; }
html[data-signed-in] body:not([data-no-app-nav]) .site-header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--rule); }
.app-nav { padding: 0.75rem 0.6rem 1rem; overflow-y: auto; background: var(--paper); flex-direction: column; }
.app-nav ul { list-style: none; margin: 0; padding: 0; }
.app-nav-list > li { margin: 0.1rem 0; }
.app-nav a, .app-nav-collapse { display: flex; align-items: center; gap: 0.7rem; padding: 0.45rem 0.65rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 500; line-height: 1.3; min-height: 40px; }
.app-nav a .icon, .app-nav-collapse .icon { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; color: var(--muted); }
.app-nav a[aria-current] .icon { color: var(--ink); }
.app-nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-nav-note { margin-left: auto; font-size: 0.85rem; color: var(--muted); font-weight: 400; }
.app-nav a:hover, .app-nav-collapse:hover { background: var(--surface); }
.app-nav a[aria-current] { background: var(--surface); font-weight: 680; }
.app-nav-group { margin-top: 0.6rem !important; }
.app-nav-label { display: block; font-size: 0.85rem; color: var(--muted); padding: 0.4rem 0.65rem 0.2rem; min-height: 0 !important; font-weight: 600 !important; }
a.app-nav-label { display: block; }
.app-nav-quiet { margin-top: 0.4rem; padding-top: 0.2rem; border-top: 1px solid var(--rule); }
.app-nav-quiet a { color: var(--muted); font-size: 0.95rem; }
.app-nav-quiet a[aria-current] { color: var(--ink); }
.app-nav-collapse { display: none; margin-top: auto; width: 100%; background: none; border: 0; font: inherit; font-size: 0.95rem; color: var(--muted); cursor: pointer; text-align: left; }
/* Below 64rem the sidebar is a drawer behind Menu. */
html.app-nav-open[data-signed-in] body:not([data-no-app-nav]) .app-nav { display: flex; position: fixed; z-index: 40; top: var(--header-h, 4rem); left: 0; bottom: 0; width: min(19rem, 86vw); border-right: 1px solid var(--rule); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
@media (min-width: 64rem) {
  html[data-signed-in] body:not([data-no-app-nav]) .app-menu-button { display: none; }
  html[data-signed-in] body:not([data-no-app-nav]) { padding-left: 15rem; }
  html[data-signed-in] body:not([data-no-app-nav]) .site-header { margin-left: -15rem; padding-left: 0; }
  html[data-signed-in] body:not([data-no-app-nav]) .app-nav { display: flex; position: fixed; top: var(--header-h, 4rem); left: 0; bottom: 0; width: 15rem; border-right: 1px solid var(--rule); box-shadow: none; }
  html[data-signed-in] body:not([data-no-app-nav]) .app-nav-collapse { display: flex; }
  /* Collapsed: the icons alone, each naming itself in a tip on hover and focus. */
  html[data-signed-in][data-nav="collapsed"] body:not([data-no-app-nav]) { padding-left: 4rem; }
  html[data-signed-in][data-nav="collapsed"] body:not([data-no-app-nav]) .site-header { margin-left: -4rem; }
  html[data-signed-in][data-nav="collapsed"] body:not([data-no-app-nav]) .app-nav { width: 4rem; overflow: visible; }
  html[data-nav="collapsed"] .app-nav .app-nav-text, html[data-nav="collapsed"] .app-nav .app-nav-note { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  html[data-nav="collapsed"] .app-nav .app-nav-label { height: 0; padding: 0; overflow: hidden; border-top: 1px solid var(--rule); margin: 0.3rem 0.4rem; }
  html[data-nav="collapsed"] .app-nav-quiet { border-top: 0; }
  html[data-nav="collapsed"] .app-nav a, html[data-nav="collapsed"] .app-nav-collapse { justify-content: center; padding: 0.45rem; position: relative; }
  html[data-nav="collapsed"] .app-nav [data-tip]:hover::after, html[data-nav="collapsed"] .app-nav [data-tip]:focus-visible::after { content: attr(data-tip); position: absolute; left: calc(100% + 0.5rem); top: 50%; transform: translateY(-50%); background: var(--ink); color: var(--paper); font-size: 0.85rem; font-weight: 500; padding: 0.3rem 0.55rem; border-radius: 6px; white-space: nowrap; z-index: 50; pointer-events: none; }
  html[data-nav="collapsed"] .app-nav-collapse .icon { transform: scaleX(-1); }
}
@media print { .app-nav, .app-menu-button { display: none !important; } html[data-signed-in] body { padding-left: 0 !important; } }
.panel-section { margin: 0 0 2rem; }
.panel-section.guide { max-width: 44rem; }
.panel-section.guide h3 { font-size: 1rem; margin: 1.25rem 0 0.4rem; }
.panel-section.guide .ui-notice { margin: 0.75rem 0; }
.panel-section > h2, [data-tab] > section > h2, [data-tab] h2 { font-size: 1.25rem; margin: 1.5rem 0 0.6rem; }
[data-tab] > :first-child > h2:first-child { margin-top: 0.5rem; }
.ui-inline-status { margin: 0.25rem 0; color: var(--muted); font-size: 0.95rem; }
.ui-inline-status:empty { display: none; }
.ui-help { margin: 0.5rem 0; font-size: 0.95rem; }
.ui-meta-line { margin: 0 0 0.75rem; }
.cohort-tabs .area-nav { margin-top: 0.5rem; }
.cohort-tabs + .page-head { padding-top: 1.75rem; }
.danger-zone { border-top: 1px solid var(--rule); padding-top: 0.5rem; }
.ui-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.35rem 0.15rem 0.7rem; border: 1px solid var(--rule); border-radius: 1rem; font-size: 0.95rem; font-weight: 500; }
.ui-chip-x { border: 0; background: none; color: var(--muted); font: inherit; font-size: 1.1rem; line-height: 1; padding: 0.1rem 0.35rem; cursor: pointer; border-radius: 1rem; min-width: 24px; min-height: 24px; }
.ui-chip-x:hover { color: var(--ink); background: var(--surface); }
.ui-meta-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.6rem; color: var(--muted); font-size: 0.95rem; }

/* Status: an icon and a word, no box, no fill, no pill (DESIGN-KIT.md). */
.ui-status { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.95rem; font-weight: 500; white-space: nowrap; color: var(--ink); }
.ui-status-done .icon { color: var(--accent); }
.ui-status-active .icon { color: var(--thistle); stroke: var(--ink); stroke-width: 14; }
.ui-status-waiting, .ui-status-off { color: var(--muted); }
.ui-status-problem { color: var(--danger); }
/* Visibility: who can see this, its words defined in a popover. */
.ui-visibility { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; color: var(--muted); }
.ui-visibility-what { color: var(--muted); }
.ui-visibility-what::after { content: ":"; }
.ui-visibility-button { display: inline-flex; align-items: center; gap: 0.35rem; background: none; border: 0; padding: 0.15rem 0; min-height: 24px; font: inherit; color: var(--muted); cursor: help; text-decoration: underline dotted; text-underline-offset: 0.25em; }
.ui-visibility-button:hover { color: var(--ink); }
.ui-popover { margin: 0; padding: 0.6rem 0.8rem; max-width: 18rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--card); color: var(--ink); font-size: 0.9rem; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.ui-popover:not([popover]) { display: block; margin-top: 0.35rem; }
.ui-popover[popover] { position: fixed; inset: auto; margin: 0; }
/* Count: a number beside its noun, in tabular figures, no pill. */
.ui-count { font-variant-numeric: tabular-nums; font-weight: 650; color: var(--ink); }
.ui-tag { font-size: 0.85rem; font-weight: 600; color: var(--muted); margin-right: 0.35rem; }
/* Toolbar: one row of actions, no border or fill around it. */
.ui-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin: 0 0 1.5rem; }
.ui-toolbar .ui-toolbar-end { margin-left: auto; display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.ui-label { color: var(--muted); font-size: 0.95rem; margin-right: 0.35rem; }
.ui-say-problem { color: var(--danger); }
/* Confirm: a native dialog. */
.ui-dialog { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; max-width: min(28rem, 92vw); background: var(--card); color: var(--ink); }
.ui-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.ui-dialog h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.ui-dialog p { margin: 0 0 1.25rem; }
.ui-dialog .actions { justify-content: flex-end; }
/* Page gates. */
.ui-gate { display: grid; justify-items: start; gap: 0.75rem; padding: 1rem 0 2rem; }
.ui-gate-line { margin: 0; font-size: 1.1rem; font-weight: 600; }
/* Loading: nothing for a second, then rows shaped like the real ones. */
.ui-skeleton { display: grid; gap: 0.75rem; padding: 0.5rem 0; opacity: 0; animation: ui-appear 0.2s ease 1s forwards; }
.ui-skeleton i { display: block; height: 3rem; border-radius: 8px; background: var(--surface); }
.ui-skeleton i:nth-child(3) { width: 85%; }
.ui-skeleton i:nth-child(4) { width: 70%; }
@keyframes ui-appear { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ui-skeleton { animation: none; opacity: 1; } }
/* Tabs that do not fit fold into More. */
.ui-tabs ul { flex-wrap: nowrap; }
.ui-tabs-more { position: relative; }
.ui-tabs-more-button { background: none; border: 0; font: inherit; font-weight: 500; color: var(--muted); padding: 0.6rem 0 0.55rem; cursor: pointer; }
.ui-tabs-more-list { position: absolute; right: 0; top: 100%; z-index: 20; display: grid !important; gap: 0; min-width: 11rem; padding: 0.35rem; background: var(--card); border: 1px solid var(--rule); border-radius: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15); }
.ui-tabs-more-list[hidden] { display: none !important; }
.ui-tabs-more-list a { display: block; padding: 0.45rem 0.6rem; border-bottom: 0 !important; margin: 0 !important; }
.ui-tabs a { white-space: nowrap; }
/* The leader's guide: each step a row whose title opens the step itself. */
.guide-step p { margin: 0.3rem 0 0; max-width: 38rem; }
.guide-step a.ui-row-title:not([href]) { color: var(--ink); text-decoration: none; }
.guide > p { max-width: 38rem; }

/* The cohort's Files section, and each learner's role on GitHub in People. */
.files-group { margin-top: 1.5rem; }
.files-group h3 { font-size: 1rem; margin: 0 0 0.25rem; }
.files-group h3 a { color: inherit; }
.files-add { margin: 1rem 0; }
.roster-repo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.roster-repo label { font-size: 0.875rem; }
.roster-repo select { margin-left: 0.25rem; }
.feedback-body p { overflow-wrap: anywhere; margin: 0.35rem 0 0; }

/* The cohort's Asks: three columns side by side when there is room. */
.asks-form { max-width: 36rem; margin: 1rem 0 1.5rem; }
.asks-board { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .asks-board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.asks-column h3 { font-size: 1rem; margin: 0 0 0.5rem; }
.asks-column .ui-row { grid-template-columns: minmax(0, 1fr); }
/* The browser's own file button, drawn as the site's secondary button. */
.cohort-form input[type="file"] { padding: 0.4rem; }
.cohort-form input[type="file"]::file-selector-button {
  font: inherit; font-family: var(--sans); font-weight: 600; margin-right: 0.75rem; padding: 0.45rem 0.9rem; cursor: pointer;
  border: 1px solid var(--edge); border-radius: 10px; background: transparent; color: var(--ink);
}
.files-add, .asks-form { max-width: 36rem; margin: 0 0 1.5rem; }
.roster-repo select { font: inherit; font-weight: 400; min-height: 36px; padding: 0 0.5rem; border: 1px solid var(--muted); border-radius: 10px; background: var(--card); color: var(--ink); }
.watch-control { display: inline-flex; align-items: center; gap: 0.75rem; }
.ui-row-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4rem; }
.ui-row-head .role-tag { margin-left: 0; }
.roster-repo { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; }
.group-form { max-width: 36rem; margin: 0 0 1.5rem; }

/* A session's own page (JOURNEYS.md, S1): when it is, the sessions on
   either side, and the plan its leaders change before it runs. */
.session-meta { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.975rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.session-pager { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0.75rem 0 0; font-size: 0.95rem; }
.session-edit { margin: 2rem 0; }
.session-edit h2 { margin: 0 0 0.75rem; }
.session-details { margin-top: 1rem; }
.session-details > summary { cursor: pointer; font-weight: 600; }
.session-details .cohort-form { margin-top: 0.75rem; }

/* The plan as people read it (JOURNEYS.md, "The session page prepares"):
   each part's words in plain view, one Edit for a leader. */
.scene-head .btn-secondary.small { margin-left: auto; flex: none; }
.scene-detail { margin: 0.4rem 0 0 3.25rem; max-width: 40rem; }
.scene-detail .scene-body { margin: 0 0 0.5rem; }
.scene-detail .scene-prompt { margin: 0 0 0.5rem; font-weight: 600; }
.scene-detail .scene-note { margin: 0.5rem 0 0; color: var(--muted); }
.show-list.is-read-only .scene-item { background: transparent; }
.session-bring, .session-plan { margin: 2rem 0; }
.session-bring h2, .session-plan h2 { margin: 0 0 0.75rem; }
@media (max-width: 560px) { .scene-detail { margin-left: 0; } }

/* The current part's clock in the add-on's narrow panel: the time, and its
   small switch beside it; stopped, it is quiet (found in a real Meet call). */
.show-clock-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.show-clock.is-stopped { font-size: 0.95rem; font-weight: 500; color: var(--muted); }
.show-moves { flex-wrap: nowrap; }
/* The part's words, read across a call on the main stage. */
.stage-lines .stage-what { font-size: clamp(1.35rem, 4.4vmin, 3rem); }

/* The board's three downloads under one button (found in the loop's live
   test: six buttons crowded the board's head). */
.board-download { display: inline-block; }
.board-download > summary { list-style: none; cursor: pointer; }
.board-download > summary::-webkit-details-marker { display: none; }
.board-download[open] > .actions { margin-top: 0.5rem; }

.stage-lines .stage-what.is-long { font-size: clamp(1.1rem, 3.2vmin, 2.1rem); }

/* Counted choices sit on one line each, label, bar, and count, so the
   total under them stays in the frame (found in the loop's live Meet
   test: three choices pushed it out); many choices take a smaller size. */
.stage-choices.counted li { grid-template-columns: minmax(6ch, 1fr) minmax(0, 2fr) auto; padding: 1vmin 2vmin; }
.stage-choices.counted .label { grid-column: auto; }
.stage-choices.many { font-size: clamp(1rem, 2.5vmin, 1.7rem); gap: 0.9vmin; }
.stage-choices.many li { padding: 0.8vmin 1.6vmin; }
/* A scale, and any long uncounted list, flows across in columns so it
   stays in the frame (found in the loop's live Meet test: a five-point
   scale ran off the stage). */
.stage-choices.many:not(.counted), .stage-choices.scale { grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); }

/* Room at the stage's foot while the stance bar shows (found in the
   loop's live Meet test: the path view's last line ran under it). */
.has-stance .stage-ready:not([hidden]) { padding-bottom: calc(5vmin + 2.6rem); }

/* Recording, marked on the main stage for everyone in the call. */
.stage-rec { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 0.45em; font-size: clamp(0.9rem, 2vmin, 1.3rem); font-weight: 650; color: var(--ink); }
.stage-rec::before { content: ""; width: 0.6em; height: 0.6em; border-radius: 50%; background: var(--danger); }
.stage-rec[hidden] { display: none; }

/* The keyboard line means nothing on a touch screen, unless it is saying
   the connection dropped (found in the loop's phone-width check). */
@media (pointer: coarse) { .react-line:not(.is-warning) { display: none; } }

.stage-choices.long, .stage-choices.long.many { grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: clamp(0.95rem, 2.3vmin, 1.5rem); gap: 0.8vmin; }
.stage-choices.long li { padding: 0.8vmin 1.4vmin; }
[data-view="check"].has-long .stage-title { font-size: clamp(1.3rem, 4vmin, 2.8rem); max-width: 40ch; }
/* With long choices, the choices keep the room the answer line would take. */
[data-view="check"].has-long .stage-choices:not(.counted) ~ .stage-quiet { display: none; }