/* 2026-09-23 design refresh (branch design-refresh). Loaded after style.css and walk.css, so it
   restyles without touching layout logic. A lab notebook with a modern interface: a sans for the
   chrome, a warm serif for reading, and the figures' own palette (teal receptors, amber enzymes,
   coral messengers) for colour, so the pages and the schematics read as one set. No web fonts are
   downloaded: the stacks use what the student's system already has. */

:root {
  --paper: #fbf9f5;
  --paper-2: #f4f1ea;
  --card: #ffffff;
  --ink: #1b2430;
  --ink-2: #3d4a59;
  --muted: #6b7686;
  --line: #e7e2d8;
  --teal: #0f766e;   --teal-ink: #0b5953;  --teal-soft: #e5f3f0;
  --amber: #b45309;  --amber-bright: #e3a23b; --amber-soft: #fcf1df;
  --coral: #d9544a;  --coral-soft: #fcebe8;
  --slate: #4a5568;  --slate-soft: #eceff3;
  --shadow: 0 1px 2px rgba(27,36,48,.05), 0 6px 20px rgba(27,36,48,.06);
  --shadow-lift: 0 2px 4px rgba(27,36,48,.06), 0 12px 32px rgba(27,36,48,.10);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Sitka Text", Cambria, Georgia, serif;
  --r: 14px;
  /* legacy tokens other pages read */
  --ground: var(--paper); --accent: var(--teal); --accent-soft: var(--teal-soft);
}
/* Each module has its own accent, carried through its pages: teal for Signal Transduction I, amber for
   II, coral for Axon Guidance. The step-kind badges keep their own colours, which mean the kind. */
:root { --mod: var(--teal); --mod-strong: var(--teal); --mod-soft: var(--teal-soft); }
[data-module="st2_neurotrophism"] { --mod: var(--amber-bright); --mod-strong: #b45309; --mod-soft: var(--amber-soft); }
[data-module="axon_guidance"] { --mod: var(--coral); --mod-strong: #c0392f; --mod-soft: var(--coral-soft); }
/* Night mode, for Sunday-night studying. Figures stay on white cards so they read the same. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f141a; --paper-2: #151c24; --card: #18212b;
    --ink: #e8edf2; --ink-2: #c3ccd6; --muted: #8d99a8; --line: #273342;
    --teal: #3fb6a8; --teal-ink: #7fd6cb; --teal-soft: #13302e;
    --amber: #e3a23b; --amber-soft: #33270f;
    --coral: #f07b70; --coral-soft: #3a1f1d;
    --slate: #a9b4c2; --slate-soft: #1f2833;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.25);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  }
}

body { background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; }
a { color: var(--teal); text-underline-offset: 3px; text-decoration-thickness: 1px; }
h1, h2, h3 { font-family: var(--sans); letter-spacing: -.015em; font-weight: 700; }

/* Pages arrive softly. */
.walk-wrap { max-width: 48rem; padding: 0 1.25rem 6rem; animation: rise .28s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .walk-wrap { animation: none; } button, .mod { transition: none !important; } }

/* ---- top bar: sticky, frosted ------------------------------------------------------------ */
.walk-topbar { position: sticky; top: 0; z-index: 5; margin: 0 -1.25rem 1.25rem; padding: .7rem 1.25rem;
  background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); align-items: center; }
.walk-topbar strong { font-size: 1rem; letter-spacing: -.01em; display: inline-flex; align-items: center; gap: .5rem; }
.walk-topbar strong::before { content: ""; width: 1.35rem; height: 1.35rem; border-radius: 7px;
  background: conic-gradient(from 200deg, var(--teal), var(--amber-bright), var(--coral), var(--teal)); }
.walk-topbar a { text-decoration: none; font-weight: 600; font-size: .92rem; }
.walk-topbar .walk-meta { font-size: .82rem; }

/* ---- buttons: pills ---------------------------------------------------------------------- */
button { font-family: var(--sans); font-weight: 600; font-size: .95rem; border-radius: 999px; padding: .6rem 1.3rem;
  background: var(--teal); color: #fff; box-shadow: 0 1px 2px rgba(15,118,110,.25);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
button:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(15,118,110,.28); }
button:active:not(:disabled) { transform: translateY(0); }
button.ghost { background: var(--card); color: var(--ink-2); border: 1px solid var(--line); box-shadow: none; opacity: 1; }
button.ghost:hover:not(:disabled) { border-color: var(--teal); color: var(--teal); box-shadow: none; }
button.back { opacity: 1; }
button.quiet { opacity: .5; }
button.listen { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; padding: .35rem .85rem; }

/* ---- module picker ----------------------------------------------------------------------- */
.walk-wrap > h1 { font-size: 2rem; margin: 1.5rem 0 .25rem; }
.modules { gap: 1rem; margin-top: 1.25rem; }
.mod { --c: var(--teal); --c-soft: var(--teal-soft); position: relative; overflow: hidden; background: var(--card);
  border: 1px solid var(--line); border-radius: 18px; padding: 1.25rem 1.4rem 1.2rem 1.4rem; box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.mod::after { content: ""; position: absolute; right: -2.5rem; top: -2.5rem; width: 9rem; height: 9rem; border-radius: 50%;
  background: radial-gradient(circle, var(--c-soft) 0 55%, transparent 56%); pointer-events: none; }
.mod:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); border-color: var(--c); }
.mod h3 { font-size: 1.2rem; margin: .1rem 0 .3rem; position: relative; z-index: 1; }
.mod .m { color: var(--muted); opacity: 1; font-size: .85rem; position: relative; z-index: 1; }
.mod-eyebrow { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c); position: relative; z-index: 1; }
.mod-bar { height: 6px; border-radius: 99px; background: var(--paper-2); margin-top: .9rem; overflow: hidden; position: relative; z-index: 1; }
.mod-bar > i { display: block; height: 100%; border-radius: 99px; background: var(--c); }

/* ---- module header and section progress -------------------------------------------------- */
.walk-head h1 { font-size: 1.05rem; color: var(--ink-2); font-weight: 650; }
.sections { gap: .35rem; margin: .7rem 0 .6rem; }
.sec { height: .5rem; border-radius: 99px; background: var(--paper-2); outline: none !important; }
.sec > i { background: var(--teal); opacity: 1; border-radius: 99px; }
.sec.current { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px color-mix(in srgb, var(--teal) 45%, transparent); }
.section-label { margin: 0 0 1.5rem; color: var(--muted); opacity: 1; }

/* ---- the step's kind, as a coloured badge ------------------------------------------------- */
.beat > .beat-kind:first-child { display: inline-flex; align-items: center; gap: .4rem; opacity: 1; font-weight: 700;
  font-size: .7rem; letter-spacing: .08em; padding: .28rem .7rem .28rem .55rem; border-radius: 999px;
  color: var(--slate); background: var(--slate-soft); }
.beat > .beat-kind:first-child::before { content: ""; width: .95rem; height: .95rem; background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.beat { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5a2 2 0 0 1 2-2h13v16H6a2 2 0 0 0-2 2z'/%3E%3Cpath d='M4 19V5'/%3E%3C/svg%3E"); }
.beat[data-kind="derive"] > .beat-kind:first-child { color: var(--teal-ink); background: var(--teal-soft); }
.beat[data-kind="derive"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v6L4.5 18.5A1.7 1.7 0 0 0 6 21h12a1.7 1.7 0 0 0 1.5-2.5L14 9V3'/%3E%3Cpath d='M7 15h10'/%3E%3C/svg%3E"); }
.beat[data-kind="apply"] > .beat-kind:first-child { color: var(--amber); background: var(--amber-soft); }
.beat[data-kind="apply"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.beat[data-kind="synth"] > .beat-kind:first-child { color: var(--coral); background: var(--coral-soft); }
.beat[data-kind="synth"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='M11 12l9-9M17 6l3 3M15 8l2 2'/%3E%3C/svg%3E"); }
.beat h2 { font-size: 1.6rem; line-height: 1.2; margin: .6rem 0 1.1rem; }

/* Small eyebrow labels inside a step (the question, your answer, ...). */
.beat-kind { font-family: var(--sans); color: var(--muted); opacity: 1; font-weight: 700; font-size: .7rem; letter-spacing: .09em; }
.question-label { margin-top: 1.25rem; }

/* ---- reading ----------------------------------------------------------------------------- */
.passage { font-family: var(--serif); font-size: 1.1rem; line-height: 1.72; color: var(--ink); }
.passage p { margin: 0 0 1.05rem; }
.lead-in { font-family: var(--serif); font-size: 1.05rem; color: var(--ink-2); opacity: 1;
  border-left: 3px solid var(--amber-bright); background: var(--amber-soft); padding: .7rem 1rem; border-radius: 0 10px 10px 0; }
.source { font-size: .76rem; color: var(--muted); opacity: 1; }
.source::before { content: "Source · "; font-weight: 700; letter-spacing: .02em; }
.beat-figure img { border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); background: #fff; }
.beat-figure figcaption { font-family: var(--sans); font-size: .8rem; color: var(--muted); opacity: 1; margin-top: .55rem; }
.listen-row { margin: .5rem 0 .4rem; }

/* ---- the question: a lifted card with a year-and-place opening line ---------------------- */
.probe { position: relative; background: var(--card); border: 1px solid var(--line); border-left: 1px solid var(--line);
  border-radius: 18px; padding: 1.4rem 1.5rem 1.2rem; box-shadow: var(--shadow); font-family: var(--serif);
  font-size: 1.12rem; line-height: 1.62; overflow: hidden; }
.probe::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--teal), var(--amber-bright) 60%, var(--coral)); }
.probe .passage { font-size: inherit; }
.beat[data-kind="synth"] .probe::before { background: linear-gradient(90deg, var(--coral), var(--amber-bright)); }
.framing { font-family: var(--serif); font-style: italic; color: var(--ink-2); opacity: 1; font-size: 1rem; margin: .5rem 0 .9rem; }

/* ---- the conversation -------------------------------------------------------------------- */
.note { color: var(--muted); opacity: 1; font-size: .88rem; }
.voice-convo { border: 1px solid color-mix(in srgb, var(--teal) 25%, var(--line)); border-radius: 18px;
  background: linear-gradient(135deg, var(--teal-soft), var(--card)); padding: 1rem 1.1rem; box-shadow: var(--shadow); }
.voice-convo .vc-start { font-size: 1rem; padding: .7rem 1.35rem;
  background: linear-gradient(135deg, var(--teal), color-mix(in srgb, var(--teal) 70%, #1e3a8a)); }
.voice-convo .vc-start { display: inline-flex; align-items: center; gap: .5rem; }
.voice-convo .vc-start::before { content: ""; width: 1.05rem; height: 1.05rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.voice-convo .vc-level { background: color-mix(in srgb, var(--teal) 15%, transparent); height: 5px; }
.voice-convo .vc-level i { background: linear-gradient(90deg, var(--teal), var(--amber-bright)); }
.turns { gap: .6rem; }
.turn { font-family: var(--serif); border-radius: 16px; padding: .75rem 1rem; max-width: 88%; }
.turn.student { align-self: flex-end; background: var(--teal-soft); border-bottom-right-radius: 6px; }
.turn.companion { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.turn .who { font-family: var(--sans); font-weight: 700; opacity: 1; color: var(--muted); }
.type-toggle { font-weight: 600; font-size: .88rem; text-decoration: none; }
textarea, input { border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
textarea:focus, input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 18%, transparent); }

/* ---- the answer, locked in --------------------------------------------------------------- */
.draft-card, .answer-card { border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line)); border-left: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
  background: var(--teal-soft); border-radius: 16px; padding: 1rem 1.15rem; }
.answer-card p, .draft-card .draft-text { font-family: var(--serif); font-size: 1.05rem; }
.answer-card .beat-kind { display: inline-flex; align-items: center; gap: .35rem; color: var(--teal-ink); }
.answer-card .beat-kind::before { content: ""; width: .8rem; height: .8rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") center / contain no-repeat; }

/* "Now, what actually happened" as a divider across the page. */
.now-read { display: flex; align-items: center; gap: .8rem; margin: 2rem 0 .75rem; color: var(--amber); }
.now-read::before, .now-read::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---- where your thinking went ------------------------------------------------------------- */
.trajectory-card { border: 1px solid color-mix(in srgb, var(--amber-bright) 45%, var(--line)); background: var(--amber-soft);
  border-radius: 16px; padding: 1.1rem 1.2rem; }
.trajectory-card p, .trajectory-card li { font-family: var(--serif); }
.trajectory-card .beat-kind { color: var(--amber); }
.done-mark { color: var(--teal-ink); font-weight: 600; opacity: 1; }
.debrief { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); font-family: var(--serif); }

.problem { border-radius: 12px; }
@media (prefers-color-scheme: dark) {
  .problem { background: #3a1f1d; color: #ffd4cf; border-color: #6b2f2a; }
  .voice-convo { background: linear-gradient(135deg, var(--teal-soft), var(--card)); }
}
@media (max-width: 600px) {
  body { font-size: 15.5px; }
  .beat h2 { font-size: 1.35rem; }
  .probe { padding: 1.15rem 1.1rem 1rem; font-size: 1.06rem; }
  .passage { font-size: 1.05rem; }
  .walk-wrap > h1 { font-size: 1.6rem; }
}

/* ---- module accent ------------------------------------------------------------------------ */
button { background: var(--mod-strong); box-shadow: 0 1px 2px color-mix(in srgb, var(--mod-strong) 30%, transparent); }
button:hover:not(:disabled) { box-shadow: 0 4px 14px color-mix(in srgb, var(--mod-strong) 32%, transparent); }
button.ghost:hover:not(:disabled) { border-color: var(--mod-strong); color: var(--mod-strong); }
.walk-topbar a, .type-toggle { color: var(--mod-strong); }
.sec > i { background: var(--mod); }
.sec.current { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px color-mix(in srgb, var(--mod) 55%, transparent); }
.walk-head h1 { display: inline-flex; align-items: center; gap: .5rem; }
.walk-head h1::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--mod); }
.probe::before { background: linear-gradient(90deg, var(--mod), var(--amber-bright) 55%, var(--coral)); }
.voice-convo .vc-start { background: linear-gradient(135deg, var(--mod-strong), color-mix(in srgb, var(--mod-strong) 70%, #1e3a8a)); }
.mod[data-slug="st1_signaling"] { --c: var(--teal); --c-soft: var(--teal-soft); }
.mod[data-slug="st2_neurotrophism"] { --c: #b45309; --c-soft: var(--amber-soft); }
.mod[data-slug="axon_guidance"] { --c: #c0392f; --c-soft: var(--coral-soft); }

/* ---- a section, closed --------------------------------------------------------------------- */
.section-done { position: relative; margin: 1.25rem 0 .5rem; padding: 1.2rem 1.3rem 1.1rem; border-radius: 18px; text-align: center;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              linear-gradient(120deg, var(--teal), var(--amber-bright), var(--coral)) border-box;
  border: 2px solid transparent; box-shadow: var(--shadow); overflow: visible; }
.section-done .sd-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--mod-strong); }
.section-done .sd-eyebrow::before { content: ""; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-7.5' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 78% no-repeat, var(--mod-strong); }
.section-done h3 { font-size: 1.3rem; margin: .35rem 0 .2rem; }
.section-done .sd-next { margin: 0; color: var(--muted); font-size: .92rem; }
.section-done.celebrate { animation: pop .45s cubic-bezier(.2,.9,.3,1.3); }
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.sd-burst { position: absolute; left: 50%; top: 40%; width: 0; height: 0; pointer-events: none; }
.sd-burst i { position: absolute; width: 8px; height: 13px; border-radius: 2px; opacity: 0;
  animation: burst 1.15s cubic-bezier(.15,.7,.3,1) var(--d) forwards; }
.sd-burst i:nth-child(3n) { width: 9px; height: 9px; border-radius: 50%; }
@keyframes burst { 0% { transform: translate(0,0) rotate(0); opacity: 1; }
  80% { opacity: 1; } 100% { transform: translate(var(--x), calc(var(--y) + 60px)) rotate(var(--r)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .section-done.celebrate { animation: none; } .sd-burst { display: none; } }

/* Night mode: bright accents need dark text on buttons to stay readable. */
@media (prefers-color-scheme: dark) {
  :root { --mod-strong: #3fb6a8; }
  [data-module="st2_neurotrophism"] { --mod-strong: #e3a23b; }
  [data-module="axon_guidance"] { --mod-strong: #f07b70; }
  button:not(.ghost) { color: #0c1218; }
  .mod[data-slug="st2_neurotrophism"] { --c: #e3a23b; }
  .mod[data-slug="axon_guidance"] { --c: #f07b70; }
  .mod[data-slug="st1_signaling"] { --c: #3fb6a8; }
}

/* ==== the other pages: login, password setup, instructor dashboard (2026-09-23) ============== */
.brand { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--sans); font-weight: 700; letter-spacing: -.01em; }
.brand-mark { width: 1.45rem; height: 1.45rem; border-radius: 8px; flex: none;
  background: conic-gradient(from 200deg, var(--teal), var(--amber-bright), var(--coral), var(--teal)); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.muted { color: var(--muted); }
.error { color: var(--coral); font-weight: 600; }
select { font: inherit; padding: .55rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); }

/* Login and setup: one centred card over a soft wash of the figure colours. */
body:has(.auth-card) { min-height: 100vh; background:
  radial-gradient(40rem 30rem at 12% 8%, color-mix(in srgb, var(--teal) 16%, transparent), transparent 70%),
  radial-gradient(36rem 28rem at 92% 18%, color-mix(in srgb, var(--amber-bright) 18%, transparent), transparent 70%),
  radial-gradient(40rem 30rem at 70% 100%, color-mix(in srgb, var(--coral) 14%, transparent), transparent 70%), var(--paper); }
.auth-card { max-width: 440px; margin: 12vh auto 4rem; padding: 2rem 2rem 1.6rem; border-radius: 22px; box-shadow: var(--shadow-lift);
  animation: rise .3s ease-out; }
.auth-card .brand { font-size: 1rem; color: var(--ink-2); }
.auth-card h1 { font-size: 1.8rem; margin: 1.1rem 0 .35rem; }
.auth-card > p.muted:first-of-type { margin-top: 0; }
.auth-card form p { margin: .7rem 0; }
.auth-card input { padding: .75rem .9rem; font-size: 1rem; }
.auth-card button { width: 100%; padding: .8rem 1.2rem; font-size: 1rem; margin-top: .3rem; }
.auth-card button.ghost { width: auto; margin-left: .4rem; }
@media (max-width: 520px) { .auth-card { margin: 6vh 1rem 3rem; padding: 1.5rem 1.3rem 1.3rem; } }

/* Instructor dashboard. */
#app { max-width: 1180px; }
#app > .topbar { position: sticky; top: 0; z-index: 5; margin: -2rem -1.25rem 1.5rem; padding: .8rem 1.25rem; align-items: center;
  background: color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); font-family: var(--sans); }
#app > .topbar a { text-decoration: none; font-size: .92rem; }
#app h1, #app h2, #app h3 { font-family: var(--sans); }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
  padding: 1.25rem 1.4rem 1.1rem; margin: 0 0 1.25rem; overflow-x: auto; }
.panel > h1, .panel > h2 { margin: 0 0 .5rem; display: flex; align-items: center; gap: .55rem; }
.panel > h1 { font-size: 1.5rem; }
.panel > h2 { font-size: 1.15rem; }
.panel > h2::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--teal); flex: none; }
.panel:nth-of-type(3n+1) > h2::before { background: var(--amber-bright); }
.panel:nth-of-type(3n+2) > h2::before { background: var(--coral); }
.panel > p.muted { font-size: .88rem; max-width: 62rem; }
.panel > p > button, .panel > p > a { margin-bottom: .45rem; }
.panel form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.panel form input { width: auto; flex: 1 1 14rem; margin: 0 !important; }
.panel form select { margin: 0 !important; }
#app table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line);
  border-radius: 12px; font-family: var(--sans); font-size: .86rem; background: var(--card); margin: .5rem 0; }
#app th, #app td { border: none; border-bottom: 1px solid var(--line); padding: .55rem .75rem; vertical-align: top; }
#app tr:last-child td { border-bottom: none; }
#app th { position: sticky; top: 0; background: var(--paper-2); color: var(--ink-2); font-weight: 700; font-size: .76rem;
  letter-spacing: .03em; text-align: left; white-space: nowrap; }
#app tr:hover td { background: color-mix(in srgb, var(--teal) 5%, transparent); }
#app td button { padding: .35rem .8rem; font-size: .8rem; }
.grade-cell { cursor: pointer; text-align: center; font-variant-numeric: tabular-nums; }
#app pre.brief { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; font-size: .84rem; }
.picture blockquote { font-family: var(--serif); color: var(--ink); border-left: 3px solid var(--amber-bright); background: var(--amber-soft);
  margin: .6rem 0; padding: .7rem 1rem; border-radius: 0 12px 12px 0; }
.picture blockquote p.muted { font-family: var(--sans); font-size: .8rem; margin: .35rem 0 0; }
.panel .card { box-shadow: none; border-radius: 14px; }
.panel .chat .msg { font-family: var(--serif); }
.panel .chat .msg.student { background: var(--teal-soft); }

/* ==== the experiment card (2026-09-24) =======================================================
   The page as a protocol, for students reading in a second language (docs/plain_english_style.md).
   Beside the text on a wide screen, above it on a narrow one, open by default and foldable. */
.xcard { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow); padding: .1rem 1.1rem .75rem; margin: .4rem 0 1.1rem; font-family: var(--sans);
  font-size: .93rem; line-height: 1.5; color: var(--ink); }
.xcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--mod); }
.xcard-after::before { background: var(--amber-bright); }
.xcard > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem;
  padding: .85rem 0 .3rem; font-weight: 700; font-size: .98rem; letter-spacing: -.005em; }
.xcard > summary::-webkit-details-marker { display: none; }
.xcard > summary::before { content: ""; width: 1.05rem; height: 1.05rem; flex: none; background: var(--mod-strong);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/%3E%3Cpath d='M9 12h6M9 16h6'/%3E%3C/svg%3E") center / contain no-repeat; }
.xcard-after > summary::before { background: var(--amber);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.5l2.7 2.7L16 9.8'/%3E%3C/svg%3E") center / contain no-repeat; }
.xcard > summary::after { content: ""; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .15s ease; }
.xcard:not([open]) > summary::after { transform: rotate(-45deg); }
.xcard:not([open]) { padding-bottom: .1rem; }
.xc-row { padding: .55rem 0 .2rem; border-top: 1px solid var(--line); }
.xcard > summary + .xc-row { border-top: 0; padding-top: .25rem; }
.xc-label { font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mod-strong); margin-bottom: .2rem; }
.xcard-after .xc-label { color: var(--amber); }
.xc-row p { margin: 0 0 .35rem; }
.xc-row ul, .xc-row ol { margin: 0 0 .3rem; padding: 0; list-style: none; }
.xc-row li { position: relative; padding-left: 1.65rem; margin: .3rem 0; }
.xc-row ul > li::before { content: ""; position: absolute; left: .45rem; top: .62em; width: .4rem; height: .4rem; border-radius: 50%; background: var(--mod); }
.xc-row ol { counter-reset: xc; }
.xc-row ol > li { counter-increment: xc; }
.xc-row ol > li::before { content: counter(xc); position: absolute; left: 0; top: .12em; width: 1.2rem; height: 1.2rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--mod-soft); color: var(--mod-strong); }
.xcard-after ol > li::before { background: var(--amber-soft); color: var(--amber); }
/* "Your answer should" is a checklist. */
.xc-tasks ol > li::before { content: ""; width: .8rem; height: .8rem; top: .32em; left: .2rem; border-radius: 4px;
  background: transparent; border: 2px solid var(--mod); }
.xc-row dl { margin: 0 0 .25rem; }
.xc-row dt { font-weight: 700; margin-top: .3rem; }
.xc-row dd { margin: 0 0 .1rem; color: var(--ink-2); }
.xc-conclusion p { font-weight: 600; }

@media (min-width: 1100px) {
  .walk-wrap.wide { max-width: 77rem; }
  .walk-wrap.wide > :not(.pair):not(.walk-topbar) { max-width: 48rem; }
  .pair { display: grid; grid-template-columns: minmax(0, 48rem) minmax(16rem, 1fr); column-gap: 2.25rem; align-items: start; }
  .pair > .pair-main { grid-column: 1; grid-row: 1; min-width: 0; }
  .pair > .xcard { grid-column: 2; grid-row: 1; position: sticky; top: 4.6rem; margin-top: .4rem;
    max-height: calc(100vh - 5.6rem); overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .xcard > summary::after { transition: none; } }
/* Steps and question parts inside prose (renderProse turns "1." and "-" lines into lists). */
.passage ol, .passage ul { margin: 0 0 1.05rem; padding-left: 1.6rem; }
.passage li { margin: .3rem 0; padding-left: .2rem; }
.passage ol > li::marker { font-family: var(--sans); font-weight: 700; color: var(--mod-strong); }
.passage ul > li::marker { color: var(--mod); }

/* A repaint lands on these (walk.js landAt); the sticky top bar must not cover them. */
.now-read, .trajectory, .section-done { scroll-margin-top: 5rem; }

/* Reading speed, beside every Listen button (2026-09-24). A pill that matches the ghost buttons. */
.listen-row { align-items: center; gap: .4rem; }
select.speed { appearance: none; -webkit-appearance: none; cursor: pointer; font-family: var(--sans); font-size: .82rem;
  font-weight: 600; line-height: 1.2; padding: .35rem 1.6rem .35rem .75rem; border-radius: 999px; border: 1px solid var(--line);
  color: var(--ink-2); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d99a8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center / .65rem; }
select.speed:hover, select.speed:focus { border-color: var(--mod-strong); color: var(--mod-strong); outline: none; }

/* ---- module contents and the way back (2026-09-24) ------------------------------------------- */
.walk-head { align-items: center; }
.walk-head-right { display: flex; align-items: center; gap: .7rem; flex: none; }
button.contents-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; padding: .35rem .85rem; }
button.contents-toggle::before { content: ""; width: .95rem; height: .95rem; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M8 6h12M8 12h12M8 18h12M4 6h.01M4 12h.01M4 18h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
button.contents-toggle[aria-expanded="true"] { border-color: var(--mod-strong); color: var(--mod-strong); }
.contents { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lift);
  padding: .5rem .6rem .7rem; margin: 0 0 1.25rem; max-height: 70vh; overflow-y: auto; font-family: var(--sans); }
.ct-sec + .ct-sec { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .35rem; }
.ct-sec-head { display: flex; align-items: baseline; gap: .6rem; padding: .45rem .5rem .25rem; font-weight: 700; font-size: .88rem; color: var(--ink); }
.ct-sec-head .ct-count { margin-left: auto; flex: none; font-weight: 600; font-size: .75rem; color: var(--muted); }
.ct-steps { list-style: none; margin: 0; padding: 0; }
.ct-link { display: flex; align-items: baseline; gap: .6rem; width: 100%; text-align: left; font: inherit; font-size: .9rem; font-weight: 500;
  color: var(--ink); background: transparent; border: 0; border-radius: 10px; box-shadow: none; padding: .42rem .5rem; }
button.ct-link:hover:not(:disabled) { background: var(--mod-soft); transform: none; box-shadow: none; }
.ct-kind { flex: none; width: 4.9rem; font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.ct-mark { flex: none; width: .95rem; height: .95rem; align-self: flex-start; margin-top: .2rem; border-radius: 50%; }
.ct-step.done .ct-mark { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.5 3.5 7.5-7.5' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat, var(--mod-strong); }
.ct-step.current .ct-mark { border: 2.5px solid var(--mod-strong); }
.ct-step.current .ct-title { font-weight: 700; }
.ct-step.locked .ct-mark { background: var(--muted); opacity: .45;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='5' y='11' width='14' height='10' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3' fill='none' stroke='black' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat; border-radius: 0; }
.ct-step.locked .ct-link { color: var(--muted); cursor: default; }
.ct-step.here .ct-link { background: var(--mod-soft); }
.review-banner { display: flex; align-items: center; justify-content: space-between; gap: .6rem 1rem; flex-wrap: wrap; margin: 0 0 1.1rem;
  padding: .6rem .7rem .6rem 1rem; border-radius: 14px; font-size: .92rem; color: var(--ink-2);
  background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber-bright) 45%, var(--line)); }
.review-banner button { font-size: .85rem; padding: .4rem .95rem; }
@media (max-width: 600px) { .ct-kind { width: 4.2rem; } .walk-head { flex-wrap: wrap; } }