/* My Talks styles, built on the "Margin Notes" design system
   (https://claude.ai/artifact/5sHkoLs6sLuVQZaERhrzyQ): cream paper, navy ink,
   four highlighters, Fraunces + Figtree + Caveat, chunky outlines with a hard
   sticker shadow. Tokens below are copied from its tokens.json; component
   rules follow its bundle.css. Pages load the three Google fonts. */

/* ---------- Margin Notes tokens: Lecture hall (light) ---------- */
:root {
  color-scheme: light;
  --paper: #fbf6ea;
  --paper-raised: #fffdf8;
  --paper-sunken: #f1e8d4;
  --ink: #1f2547;
  --ink-muted: #565b7a;
  --outline: var(--ink);
  --highlighter: #ffd84d;
  --highlighter-soft: #fff0a8;
  --pen: #ff6b57;
  --pen-soft: #ffd6cf;
  --pen-text: #ab2d1b;
  --mint: #5fd3b0;
  --mint-soft: #cdf2e5;
  --mint-text: #0b6b55;
  --sky: #7cc4ff;
  --sky-soft: #d3ebff;
  --sky-text: #1a5fa8;
  --on-fill: #1f2547;
  --focus-ring: #1a5fa8;
  /* Poll colors: a diverging scale for ordered answers, one blue for unordered ones. */
  --scale-agree-strong: #1c5cab;
  --scale-agree: #6da7ec;
  --scale-neutral: #d6d2c6;
  --scale-disagree: #ee8a5e;
  --scale-disagree-strong: #c2451a;
  --bar-single: #2a78d6;

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-sans: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Bradley Hand", "Comic Sans MS", cursive;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 6px; --radius-md: 14px; --radius-lg: 24px; --radius-pill: 999px;
  --shadow-sticker: 3px 3px 0 0 #1f2547;
  --shadow-pop: 5px 5px 0 0 #1f2547;
  --stroke-hair: 1px; --stroke-chunky: 2px; --stroke-bold: 3px;
  --tilt-left: -1.5deg; --tilt-right: 1.5deg;
}

/* ---------- Lights down (dark) ----------
   Off unless a page asks for it with data-theme="dark": the owner wants the
   light look everywhere, whatever the phone's setting. */
:root[data-theme="dark"] {
  --paper: #171a33; --paper-raised: #232748; --paper-sunken: #0f1128;
  --ink: #fbf6ea; --ink-muted: #b4b8d4;
  --highlighter-soft: #4a4420; --pen-soft: #4d2a2e; --pen-text: #ff9a8b;
  --mint-soft: #1d4a44; --mint-text: #7fe3c4; --sky-soft: #1f3a5c; --sky-text: #8ecfff;
  --focus-ring: #ffd84d;
  --shadow-sticker: 3px 3px 0 0 #fbf6ea; --shadow-pop: 5px 5px 0 0 #fbf6ea;
  --scale-agree-strong: #6da7ec; --scale-agree: #2f5f9a; --scale-neutral: #4a4d6a; --scale-disagree: #9a4f2c; --scale-disagree-strong: #ee8a5e; --bar-single: #3987e5;
}

/* ---------- Presenter: the calm mode for anything shown to a room ----------
   Slides, live results and the control panel. Same palette, lighter outlines,
   no shadows or tilt, navy main button. Use data-theme="presenter" on <html>,
   or the .presenter class on one block of a playful page. */
html[data-theme="presenter"], .presenter {
  --paper-raised: #ffffff; --shadow-sticker: none; --shadow-pop: none;
  --stroke-chunky: 1.5px; --tilt-left: 0deg; --tilt-right: 0deg;
}
html[data-theme="presenter"] h1, html[data-theme="presenter"] h2, html[data-theme="presenter"] h3,
.presenter h1, .presenter h2, .presenter h3 { font-variation-settings: "SOFT" 0, "WONK" 0; }
html[data-theme="presenter"] .btn, .presenter .btn { border-radius: var(--radius-md); }
html[data-theme="presenter"] .btn:hover, html[data-theme="presenter"] .btn:active, .presenter .btn:hover, .presenter .btn:active { transform: none; }
html[data-theme="presenter"] .btn.accent, .presenter .btn.accent { background: var(--ink); color: var(--paper); }
html[data-theme="presenter"] .eyebrow, .presenter .eyebrow { border-radius: var(--radius-sm); background: var(--paper-sunken); }

/* ---------- Names the page styles use, mapped onto the tokens ---------- */
:root {
  --surface: var(--paper-raised);
  --ink-2: var(--ink);
  --muted: var(--ink-muted);
  --hair: var(--paper-sunken);
  --rule: var(--outline);
  --accent: var(--pen-text);       /* error and attention text */
  --accent-ink: var(--on-fill);
  --focus: var(--focus-ring);
  --track: var(--sky-soft);
  --font: var(--font-sans);
  --step--1: 15px;
  --step-0: 18px;
  --step-1: 20px;
  --step-2: 26px;
  --step-3: clamp(28px, 4vw, 34px);
  --step-4: clamp(36px, 6vw, 52px);
  --step-5: clamp(44px, 8vw, 80px);
  --gutter: 16px;
  --max: 1120px;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper);
  color: var(--ink);
  font: 400 18px/28px var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
a { color: var(--sky-text); text-underline-offset: 3px; text-decoration-thickness: 2px; }
a:hover { color: var(--ink); }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: var(--stroke-bold) solid var(--focus-ring); outline-offset: 3px; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }
p { margin: 0; }
.muted { color: var(--ink-muted); }
.hand { font-family: var(--font-hand); font-weight: 600; }

/* Short tag label, e.g. YES OR NO (the system's Tag). */
.eyebrow, .tag {
  display: inline-flex; align-items: center; gap: var(--space-2); width: fit-content;
  padding: var(--space-1) var(--space-3); font: 700 13px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); background: var(--highlighter-soft); border: var(--stroke-chunky) solid var(--outline); border-radius: var(--radius-pill);
}
.ruled { border-top: var(--stroke-chunky) solid var(--outline); padding-top: 16px; }

/* ---------- Buttons (the system's Button) ----------
   .btn          secondary: raised paper
   .btn.accent   the one yellow main action per view */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 0 var(--space-6); font: 700 18px/1 var(--font-sans); white-space: nowrap; text-decoration: none;
  color: var(--ink); background: var(--paper-raised); border: var(--stroke-chunky) solid var(--outline); border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sticker); transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { color: var(--ink); transform: translate(-1px, -1px); box-shadow: var(--shadow-pop); }
.btn:active { transform: translate(3px, 3px); box-shadow: none; }
.btn.accent { background: var(--highlighter); color: var(--on-fill); }
.btn.accent:hover { color: var(--on-fill); }
.btn.ghost { background: var(--paper-raised); }
.btn.small { min-height: 36px; padding: 0 var(--space-4); font-size: 15px; }
.btn:disabled { background: var(--paper-sunken); color: var(--ink-muted); border-style: dashed; box-shadow: none; cursor: not-allowed; transform: none; }
.textlink { background: none; border: 0; padding: 4px 0; color: var(--ink-muted); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.textlink:hover { color: var(--ink); }

/* ---------- Inputs ---------- */
.field {
  font: inherit; padding: 12px 16px; min-height: 48px; width: 100%;
  border: var(--stroke-chunky) solid var(--outline); border-radius: var(--radius-md); background: var(--paper-raised); color: var(--ink);
}
.field:focus { outline: var(--stroke-bold) solid var(--focus-ring); outline-offset: 3px; }

.badge { display: inline-block; padding: 2px 8px; font: 700 12px/16px var(--font-sans); letter-spacing: .06em; text-transform: uppercase;
  background: var(--highlighter-soft); border: var(--stroke-chunky) solid var(--outline); border-radius: var(--radius-pill); vertical-align: 3px; }

/* The site's mark: two overlapping squares, coral and sky, and the name. */
.mark { display: inline-flex; align-items: center; gap: 14px; font: 700 22px/1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; text-decoration: none; color: var(--ink); }
.mark::before { content: ""; width: 18px; height: 18px; margin: -6px 2px 0 0; background: var(--pen); border-radius: 5px; box-shadow: 8px 8px 0 0 var(--sky); }
.mark:hover { color: var(--ink); }

/* Sticky note (the system's StickyNote): one short handwritten aside. */
.sticky { padding: var(--space-4) var(--space-5); font: 600 26px/30px var(--font-hand); color: var(--ink); background: var(--highlighter-soft);
  border: var(--stroke-chunky) solid var(--outline); border-radius: var(--radius-sm); box-shadow: var(--shadow-sticker); transform: rotate(var(--tilt-right)); width: fit-content; }

/* ---------- Live results (the system's PollOption, read-only) ----------
   Playful pages: the answer and its count, the bar underneath.
   Presenter: answer, bar and a big number on one row.
   Colors by meaning: s1..s5 run Strongly agree (deep blue) to Strongly
   disagree (deep orange); every other question uses one blue. */
.bars { display: grid; gap: var(--space-3); }
.bar-row {
  display: block; padding: 0.6em 0.9em 0.75em; font: 600 1em/1.3 var(--font-sans); color: var(--ink);
  background: var(--paper-raised); border: var(--stroke-chunky) solid var(--outline); border-radius: var(--radius-md);
}
.bar-row .row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); white-space: nowrap; }
.bar-row .n { font: 700 1.15em/1 var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; font-variant-numeric: tabular-nums; }
.bar-row .bar { display: block; position: relative; overflow: hidden; height: 0.8em; min-height: 12px; margin-top: 0.5em;
  background: var(--paper-sunken); border: var(--stroke-chunky) solid var(--outline); border-radius: var(--radius-pill); }
.bar-row .bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); background: var(--bar-single); transition: width .35s ease; }
.bar-row:not(.empty) .bar::before { border-right: var(--stroke-chunky) solid var(--outline); }
.bar-row.s1 .bar::before { background: var(--scale-agree-strong); }
.bar-row.s2 .bar::before { background: var(--scale-agree); }
.bar-row.s3 .bar::before { background: var(--scale-neutral); }
.bar-row.s4 .bar::before { background: var(--scale-disagree); }
.bar-row.s5 .bar::before { background: var(--scale-disagree-strong); }

html[data-theme="presenter"] .bar-row, .presenter .bar-row {
  display: grid; grid-template-columns: var(--label-w, 9.5em) minmax(3em, 1fr) 2.4em; align-items: center; column-gap: 0.8em; padding: 0.5em 0.9em;
}
html[data-theme="presenter"] .bar-row .row, .presenter .bar-row .row { display: contents; }
html[data-theme="presenter"] .bar-row .label, .presenter .bar-row .label { order: 1; white-space: nowrap; }
html[data-theme="presenter"] .bar-row .bar, .presenter .bar-row .bar { order: 2; height: 1.15em; margin-top: 0; border-radius: var(--radius-sm); }
html[data-theme="presenter"] .bar-row .n, .presenter .bar-row .n { order: 3; text-align: right; font-size: 1.5em; font-variation-settings: "SOFT" 0, "WONK" 0; font-weight: 600; }

/* ---------- Panel: a flat field of color for steps and key statements ---------- */
.panel { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); color: var(--on-fill); background: var(--sky); border-radius: var(--radius-lg); }
.panel.coral { background: var(--pen); }
.panel.mint { background: var(--mint); }
.panel.yellow { background: var(--highlighter); }
.panel.ink { color: var(--paper); background: var(--ink); }
.panel .no { font: 700 72px/72px var(--font-display); font-variation-settings: "SOFT" 100, "WONK" 1; }
.panel h3 { font-size: 30px; line-height: 36px; }
.panel p { font-size: 20px; line-height: 30px; }
.panel .btn { background: var(--paper-raised); color: var(--ink); box-shadow: none; }

/* ---------- Segmented control: pick exactly one, shown in navy ---------- */
.seg { display: inline-flex; background: var(--paper-raised); border: var(--stroke-chunky) solid var(--outline); border-radius: var(--radius-md); }
.seg button { padding: var(--space-2) var(--space-4); font: 600 16px/24px var(--font-sans); color: var(--ink); background: transparent; border: 0; border-left: var(--stroke-chunky) solid var(--outline); }
.seg button:first-child { border-left: 0; border-radius: 12px 0 0 12px; }
.seg button:last-child { border-radius: 0 12px 12px 0; }
.seg button:hover { background: var(--paper-sunken); }
.seg button[aria-pressed="true"] { color: var(--paper); background: var(--ink); }