/* ---------- Sendy Study Tool — Apple HIG-inspired theme ----------
   Semantic tokens, light + dark. Dark kicks in via prefers-color-scheme
   or the manual toggle (html[data-theme]). */

:root {
  /* Apple system palette — light */
  --blue: #007aff;
  --green: #34c759;
  --orange: #ff9500;
  --red: #ff3b30;
  --purple: #af52de;
  --teal: #30b0c7;

  --bg: #f2f2f7;                       /* grouped background */
  --bg-elevated: #ffffff;              /* cards */
  --bg-secondary: #f7f7fa;
  --sidebar-glass: rgba(246, 246, 248, 0.78);
  --ink: #1d1d1f;
  --logo-tile: #1d1d1f;
  --ink-secondary: rgba(60, 60, 67, 0.78);
  --muted: rgba(60, 60, 67, 0.6);
  --line: rgba(60, 60, 67, 0.14);
  --line-strong: rgba(60, 60, 67, 0.24);
  --fill: rgba(120, 120, 128, 0.12);   /* system fill */
  --fill-hover: rgba(120, 120, 128, 0.2);

  /* Brand accent: the mug's amber, everywhere (no blue). Text/links use the
     deeper shade in light mode for contrast; solid fills stay amber with dark
     text on top (--on-accent). Dark mode sets --accent to the bright amber. */
  --brand: #f5a524;          /* fills, and text in dark mode */
  --brand-deep: #b8700a;     /* text in light mode */
  --accent: var(--brand-deep);
  --accent-fill: var(--brand);
  --on-accent: #0a0a0a;
  --accent-soft: color-mix(in srgb, var(--brand) 18%, transparent);
  --ok: #248a3d;         --ok-soft: color-mix(in srgb, #34c759 16%, transparent);
  --warn: #c93400;       --warn-soft: color-mix(in srgb, #ff9500 16%, transparent);
  --fail: #d70015;       --fail-soft: color-mix(in srgb, #ff3b30 12%, transparent);
  --audio: #8944ab;      --audio-soft: color-mix(in srgb, #af52de 14%, transparent);

  --radius-sm: 7px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .08), 0 24px 60px rgba(0, 0, 0, .12);
  color-scheme: light;
}

/* ---------- accent palettes ----------
   Profile.accent renders as <html data-accent="…"> (context_processors.sidebar_courses,
   picked in the sidebar "Colours" row). Each palette swaps the brand pair every accent
   token derives from; amber is the default and public pages always keep it. */
html[data-accent="blue"] { --brand: #0a84ff; --brand-deep: #0a60c8; --on-accent: #ffffff; }
html[data-accent="green"] { --brand: #30d158; --brand-deep: #1f8a3d; --on-accent: #06210f; }
html[data-accent="teal"] { --brand: #40cbe0; --brand-deep: #177d91; --on-accent: #06272e; }
html[data-accent="purple"] { --brand: #bf5af2; --brand-deep: #7f2fb8; --on-accent: #ffffff; }
html[data-accent="rose"] { --brand: #ff375f; --brand-deep: #c3103b; --on-accent: #ffffff; }
html[data-accent="graphite"] { --brand: #a1a1a6; --brand-deep: #48484a; --on-accent: #0a0a0a; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --blue: #0a84ff;
    --green: #30d158;
    --orange: #ff9f0a;
    --red: #ff453a;
    --purple: #bf5af2;
    --teal: #40cbe0;
    --accent: var(--brand);
    --accent-soft: color-mix(in srgb, var(--brand) 14%, transparent);

    --bg: #0d0d0f;
    --bg-elevated: #1c1c1e;
    --bg-secondary: #161618;
    --sidebar-glass: rgba(22, 22, 24, 0.72);
    --ink: #f5f5f7;
    --logo-tile: #2c2c2e;
    --ink-secondary: rgba(235, 235, 245, 0.72);
    --muted: rgba(235, 235, 245, 0.55);
    --line: rgba(84, 84, 88, 0.48);
    --line-strong: rgba(84, 84, 88, 0.72);
    --fill: rgba(120, 120, 128, 0.24);
    --fill-hover: rgba(120, 120, 128, 0.36);

    --ok: #30d158;
    --warn: #ffd60a;
    --fail: #ff6961;
    --audio: #d8a9f0;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
    --shadow-lg: 0 2px 8px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --blue: #0a84ff;
  --green: #30d158;
  --orange: #ff9f0a;
  --red: #ff453a;
  --purple: #bf5af2;
  --teal: #40cbe0;
  --accent: var(--brand);
  --accent-soft: color-mix(in srgb, var(--brand) 14%, transparent);

  --bg: #0d0d0f;
  --bg-elevated: #1c1c1e;
  --bg-secondary: #161618;
  --sidebar-glass: rgba(22, 22, 24, 0.72);
  --ink: #f5f5f7;
  --logo-tile: #2c2c2e;
  --ink-secondary: rgba(235, 235, 245, 0.72);
  --muted: rgba(235, 235, 245, 0.55);
  --line: rgba(84, 84, 88, 0.48);
  --line-strong: rgba(84, 84, 88, 0.72);
  --fill: rgba(120, 120, 128, 0.24);
  --fill-hover: rgba(120, 120, 128, 0.36);

  --ok: #30d158;
  --warn: #ffd60a;
  --fail: #ff6961;
  --audio: #d8a9f0;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .5);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, .5), 0 24px 60px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 {
  font-size: 1.9rem; margin: 0 0 .25rem; font-weight: 700;
  letter-spacing: -0.022em;
}
h1[style*="--accent"] { border-left: 4px solid var(--accent); padding-left: .65rem; }
.muted { color: var(--muted); }
.error-text { color: var(--fail); font-size: .9rem; margin: .3rem 0; }

/* ---------- layout ---------- */
.layout { display: flex; min-height: 100vh; }
/* phone-only shell pieces (base.html); the phone shell section at the end shows them */
.m-bar, .m-scrim, .m-close { display: none; }
.sidebar {
  width: 256px; flex-shrink: 0;
  background: var(--sidebar-glass);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border-right: 1px solid var(--line);
  padding: 1.2rem 1rem;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
/* Brand lockup = brand/sendy-wordmark.svg: tile icon, "Sendy" over spaced "STUDY TOOL" */
.brand {
  display: flex; align-items: center; gap: .6rem;
  color: var(--ink); margin-bottom: 1.2rem; text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand .logo-beer { width: 2.25rem; height: 2.25rem; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.04em; }
.brand-sub {
  margin-top: .22rem; font-size: .58rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}
.brand-hero { gap: .9rem; }
.brand-hero .logo-beer { width: 3.6rem; height: 3.6rem; }
.brand-hero .brand-name { font-size: 2.3rem; }
.brand-hero .brand-sub { font-size: .8rem; margin-top: .35rem; }
.side-course { margin-bottom: 1rem; }
.side-course-head {
  display: flex; align-items: center; gap: .25rem;
  border-left: 3px solid var(--accent); padding-left: .55rem;
  margin-bottom: .3rem; border-radius: 1px;
}
.side-course-title {
  flex: 1; min-width: 0; font-weight: 600; color: var(--ink); font-size: .93rem;
}
.side-course-toggle {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; padding: 0; border: 0; background: none;
  color: var(--muted); border-radius: var(--radius-sm); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.side-course-toggle:hover { background: var(--fill); color: var(--ink); }
.side-course-toggle svg { transition: transform .18s ease; }
.side-course.collapsed .side-course-toggle svg { transform: rotate(-90deg); }
.side-course.collapsed .side-units { display: none; }
.side-course.collapsed { margin-bottom: .55rem; }
@media (prefers-reduced-motion: reduce) { .side-course-toggle svg { transition: none; } }
.side-units {
  display: flex; flex-direction: column; gap: 1px;
  margin-left: .6rem; padding-left: .4rem; border-left: 1px solid var(--line);
}
.side-units a {
  color: var(--ink-secondary); font-size: .88rem;
  padding: .28rem .6rem; border-radius: var(--radius-sm);
  transition: background .12s ease;
}
.side-units a:hover { background: var(--fill); text-decoration: none; }
/* active unit: a tint of the class colour with a bar, not a solid brand fill (2026-09-18) */
.side-units a.active { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
[data-reorder-url] a[data-slug] { cursor: grab; }
[data-reorder-url] a[data-slug].dragging { opacity: .4; cursor: grabbing; }
.side-section-label {
  font-size: .66rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted); margin: .3rem .35rem .5rem;
}
.sidebar nav { flex: 1; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.side-add {
  display: block; margin-top: .2rem; padding: .34rem .6rem;
  font-size: .88rem; font-weight: 500; color: var(--muted);
  border-radius: var(--radius-sm); transition: background .12s ease, color .12s ease;
}
.side-add:hover { background: var(--fill); color: var(--accent); text-decoration: none; }
/* Profile card at the foot of the sidebar (redesigned 2026-09-29: one quiet
   card, identity row on top, a two-column row of plain links, the colour
   picker folded in). Ids and data attributes are load-bearing for app.js. */
.side-profile {
  margin-top: .9rem; padding: .8rem .85rem .7rem;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -18px rgba(0, 0, 0, .25);
}
.side-profile-head { display: flex; align-items: center; gap: .7rem; cursor: pointer; list-style: none; border-radius: 10px; }
.side-profile-head::-webkit-details-marker { display: none; }
.side-profile-head:hover .side-profile-name { color: var(--accent); }
.side-profile-chevron { flex: none; color: var(--muted); transition: transform .18s ease; }
.side-profile[open] .side-profile-chevron { transform: rotate(180deg); }
.side-profile-menu { animation: side-menu-in .16s ease; }
@keyframes side-menu-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.side-avatar {
  width: 38px; height: 38px; border-radius: 11px; overflow: hidden;
  flex-shrink: 0; box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(0, 0, 0, .08);
}
.side-avatar svg { display: block; width: 100%; height: 100%; }
.side-profile-id { flex: 1; min-width: 0; line-height: 1.25; display: grid; gap: .1rem; }
.side-profile-name {
  display: block; font-weight: 600; font-size: .92rem; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-profile-meta { font-size: .74rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-profile-meta a { color: inherit; display: inline-flex; align-items: center; gap: .35rem; }
.side-profile-meta a:hover { color: var(--ink); text-decoration: none; }
.side-usage-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; }
.side-usage.is-warn .side-usage-dot { background: var(--warn); }
.side-usage.is-full .side-usage-dot { background: var(--fail); }
/* The menu inside the card: one left-aligned stacked list (Jack, 2026-10-05).
   Links, the theme button and the Colours summary all share .side-menu-item. */
.side-profile-menu { margin-top: .6rem; padding-top: .35rem; border-top: 1px solid var(--line); }
.side-menu-item {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%;
  padding: .42rem .5rem; margin: 0; border: 0; border-radius: 8px; background: transparent;
  font: inherit; font-size: .84rem; color: var(--ink-secondary); text-align: left; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.side-menu-item:hover { background: var(--fill); color: var(--ink); text-decoration: none; }
.side-menu-help { flex-direction: column; align-items: flex-start; gap: .05rem; }
.side-menu-sub { font-size: .74rem; color: var(--muted); overflow-wrap: anywhere; }
.side-menu-help:hover .side-menu-sub { color: var(--accent); }
.side-menu-icon {
  width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); flex: none;
  display: inline-grid; place-items: center; color: var(--ink-secondary);
}
.side-menu-icon svg { width: 14px; height: 14px; display: block; }
/* The Colours row's dot sits in the same 22px slot as the moon, so the two line up. */
.side-menu-icon-bare { border: 0; }
.side-accent[open] .side-menu-icon-bare { visibility: hidden; }
.side-signout { color: var(--muted); }
.side-signout:hover { color: var(--fail); background: var(--fail-soft); }
.content { flex: 1; padding: 2.2rem 2.6rem 4rem; min-width: 0; }
.content-solo { display: grid; place-items: center; min-height: 100vh; background: var(--bg); max-width: none; }
/* The account flow (sign in, sign up, reset, the emailed code) sits on plain white
   in light mode, like the Stripe Checkout page that follows it. Dark mode keeps
   the app's near-black. (Jack, 2026-10-05: no grey behind these pages.) */
.content-solo:not(:has(.landing)) { background: #ffffff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .content-solo:not(:has(.landing)) { background: var(--bg); }
}
:root[data-theme="dark"] .content-solo:not(:has(.landing)) { background: var(--bg); }

/* accent picker (sidebar "Colours" row inside the profile card; app.js `accentPicker`) */
.side-accent summary { list-style: none; }
.side-accent summary::-webkit-details-marker { display: none; }
.side-accent-current { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 1px var(--line); }

.accent-form { display: flex; flex-wrap: wrap; gap: .45rem; padding: .4rem .5rem .5rem; }
.accent-swatch {
  width: 1.4rem; height: 1.4rem; padding: 0; border-radius: 50%; cursor: pointer;
  background: var(--swatch); border: 2px solid transparent; box-shadow: inset 0 0 0 2px var(--bg);
  transition: transform .15s ease, border-color .15s ease;
}
.accent-swatch:hover { transform: scale(1.12); }
.accent-swatch.is-on { border-color: var(--ink); }
.accent-swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- buttons / pills / forms ---------- */
.btn {
  display: inline-block; border: none; cursor: pointer;
  font-size: .92rem; font-weight: 600; font-family: inherit; line-height: 1.3;
  padding: .5rem 1rem; border-radius: 9px;
  text-decoration: none !important;
  transition: transform .07s ease, background .1s ease, filter .1s ease, box-shadow .1s ease;
}
.btn:active { transform: translateY(1px) scale(.99); filter: brightness(.92); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn-primary { background: var(--accent-fill); color: var(--on-accent); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.btn-primary:hover { filter: brightness(1.08); }
/* Secondary buttons are neutral: ink text on a card-coloured button with a hairline
   outline. Amber is kept for the one main action (.btn-primary). Jack, 2026-10-20. */
.btn-ghost, .btn-danger {
  background: var(--bg-elevated); color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgba(0, 0, 0, .04);
}
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 5%, var(--bg-elevated)); }
.btn-danger { color: var(--fail); }
.btn-danger:hover { background: var(--fail-soft); }
.btn-sm { padding: .3rem .8rem; font-size: .85rem; }
.btn-row { display: flex; gap: .5rem; align-items: center; }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.link-btn:hover { text-decoration: underline; }
.icon-btn {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: .95rem; width: 28px; height: 28px; border-radius: 50%;
  display: inline-grid; place-items: center; transition: background .12s ease;
}
.icon-btn:hover { background: var(--fail-soft); color: var(--fail); }
.icon-btn-neutral:hover { background: var(--fill-hover); color: var(--ink); }

.pill {
  font-size: .74rem; font-weight: 600; padding: .16rem .55rem; border-radius: 6px;
  background: var(--fill); color: var(--muted); white-space: nowrap;
}
.pill-ok { background: var(--ok-soft); color: var(--ok); }
.pill-wait { background: var(--warn-soft); color: var(--warn); }
.pill-fail { background: var(--fail-soft); color: var(--fail); }
.pill-audio { background: var(--audio-soft); color: var(--audio); }

input[type="text"], input[type="url"], input[type="email"], input[type="password"], textarea, select {
  font: inherit; padding: .55rem .8rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--bg-elevated); color: var(--ink); width: 100%;
  transition: border-color .12s ease, box-shadow .12s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}
textarea { resize: vertical; }
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .8rem; }
label input, label textarea, label select { margin-top: .3rem; font-weight: 400; }
.field-help { display: block; margin-top: .35rem; font-size: .82rem; font-weight: 400; color: var(--muted); line-height: 1.45; }

.form-card, .login-card {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.7rem; max-width: 480px;
}
.login-card { width: min(390px, 100%); text-align: center; box-shadow: var(--shadow-lg); }
.login-card h1 { margin-bottom: 0; border: none; padding: 0; }
.login-card form { text-align: left; margin-top: 1.1rem; }
.login-card .btn { width: 100%; margin-top: .4rem; }
/* "or" rule + Continue with Google (login.html; providers from core/auth.py) */
.login-or { display: flex; align-items: center; gap: .8rem; margin: 1.1rem 0 .6rem; color: var(--muted); font-size: .8rem; }
.login-or::before, .login-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.login-card .oauth-form { margin-top: 0; }
.btn-oauth {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  background: var(--bg-elevated); color: var(--ink); border: 1px solid var(--line); font-weight: 600;
}
.btn-oauth:hover { background: var(--bg); border-color: var(--ink-secondary); color: var(--ink); }
.oauth-logo { width: 18px; height: 18px; flex: none; }
.stack-form { display: flex; flex-direction: column; gap: .5rem; margin-top: .6rem; }

/* Sign in + sign up pages (login.html, signup.html): centred card, amber accent like the landing page */
.picker { text-align: center; }
.picker h1 { border: none; padding: 0; margin: 0 0 .5rem; font-size: 2.2rem; display: flex; justify-content: center; }
.picker h1 .brand { margin-bottom: 0; }
.picker .muted { margin: 0 0 1.6rem; }
.picker .login-card { margin: 0 auto; }
.picker .login-card form { margin-top: .4rem; }
.picker .form-error { color: var(--fail); font-size: .9rem; margin: 0 0 .8rem; }
.picker .login-links { margin-top: 1rem; font-size: .88rem; display: flex; justify-content: space-between; gap: 1rem; }
.picker { --accent: #f5a524; --accent-soft: color-mix(in srgb, #f5a524 16%, transparent); }
.picker .btn-primary { background: #f5a524; color: #0a0a0a; font-weight: 600; }
.picker .btn-primary:hover { background: #ffb845; color: #0a0a0a; }
.picker .login-links a { color: var(--ink-secondary); }
.picker .login-links a:hover { color: var(--accent); }
.picker .login-switch { margin: 1.2rem auto 0; font-size: .92rem; color: var(--ink-secondary); }
.picker .login-switch a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.picker .login-switch a:hover { color: var(--accent); }
.picker .login-legal { margin: 1.1rem auto 0; max-width: 390px; font-size: .8rem; color: var(--muted); }
.picker .login-legal a { color: var(--ink-secondary); }
/* Auth pages (login.html, signup.html): Stripe-checkout feel. Quiet card, small muted labels,
   roomy inputs with a soft inset, joined password pair, numbered stepper on signup. */
.picker .login-card {
  padding: 2rem 1.9rem 1.7rem; border-radius: 12px; border-color: var(--line);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 12px 40px -12px rgba(0, 0, 0, .14);
}
.picker .login-card form { margin-top: 0; }
.picker .login-card label, .picker .login-card .field { margin-bottom: 1rem; }
.picker .login-card label, .picker .field-label {
  display: block; font-size: .82rem; font-weight: 500; color: var(--ink-secondary); text-align: left;
}
.picker .login-card label + label { margin-top: 0; }
.picker .login-card input {
  margin-top: .38rem; padding: .72rem .85rem; border-radius: 8px; border-color: var(--line-strong);
  box-shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 0 0 0 transparent; font-size: .95rem;
}
.picker .login-card input::placeholder { color: var(--muted); }
.picker .login-card input:focus { box-shadow: 0 0 0 3px var(--accent-soft), 0 1px 1px rgba(0, 0, 0, .03); }
.picker .field-stack { margin-top: .38rem; display: grid; }
.picker .field-stack input { margin-top: 0; border-radius: 0; position: relative; box-shadow: none; }
.picker .field-stack input:first-child { border-radius: 8px 8px 0 0; }
.picker .field-stack input + input { margin-top: -1px; border-radius: 0 0 8px 8px; }
.picker .field-stack input:focus { z-index: 1; box-shadow: 0 0 0 3px var(--accent-soft); }
.picker .login-card .btn { margin-top: .4rem; padding: .78rem 1rem; border-radius: 8px; font-size: .96rem; }
.picker .login-card label.login-check {
  display: flex; align-items: center; gap: .55rem; margin: .2rem 0 .9rem;
  font-size: .88rem; color: var(--ink); cursor: pointer;
}
.picker .login-card .login-check input { margin: 0; width: 17px; height: 17px; accent-color: var(--accent); flex: none; box-shadow: none; }
.picker .login-card input[readonly] { color: var(--ink-secondary); background: var(--fill); }
.pw-hint.is-weak { color: var(--fail); }
.pw-hint.is-ok { color: var(--warn); }
.pw-hint.is-good { color: var(--ok, #30d158); }
.picker .login-card .field-help { text-align: left; }
.two-step-qr { display: block; width: 180px; height: 180px; margin: .6rem 0; background: #fff; border-radius: 8px; padding: 6px; }
.two-step-secret { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; letter-spacing: .06em; user-select: all; }
.backup-codes { columns: 2; list-style: none; padding: 0; margin: .6rem 0 1rem; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 1rem; }
.backup-codes li { padding: .15rem 0; }
.two-step-code { font-size: 1.3rem; letter-spacing: .3em; text-align: center; }
.picker .login-card .btn-primary { box-shadow: 0 1px 2px rgba(0, 0, 0, .1); }
.picker .login-card .login-or { margin: 1.2rem 0 .9rem; }
.picker .login-card .login-links { font-size: .84rem; }
.picker .login-legal { font-size: .78rem; }
.picker .signup-steps {
  display: inline-flex; align-items: center; gap: 0; margin: 0 0 1.5rem; padding: 0; list-style: none;
  font-size: .84rem; font-weight: 500; color: var(--muted);
}
.picker .signup-steps li { display: inline-flex; align-items: center; gap: .45rem; }
.picker .signup-steps li + li::before {
  content: ""; width: 2.4rem; height: 1px; background: var(--line-strong); margin: 0 .75rem;
}
.picker .signup-steps .step-num {
  display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%;
  border: 1px solid var(--line-strong); font-size: .72rem; font-weight: 600; color: var(--ink-secondary);
  background: var(--bg-elevated);
}
.picker .signup-steps .is-now { color: var(--ink); }
.picker .signup-steps .is-now .step-num { background: #f5a524; border-color: #f5a524; color: #0a0a0a; }
.picker .login-card .reset-lede { margin: 0 0 .6rem; font-size: .98rem; line-height: 1.55; color: var(--ink); text-align: left; overflow-wrap: anywhere; }
.picker .reset-done .field-help { text-align: left; }
.picker .reset-done .btn { margin-top: 1.1rem; }
.picker .reset-done .reset-again { margin-top: 1rem; }
.picker .reset-done .reset-again a { color: var(--ink-secondary); text-decoration: underline; text-underline-offset: 3px; }
.picker .login-card .field-error { color: var(--fail); font-size: .84rem; display: block; margin: .3rem 0 0; text-align: left; }
.form-error { color: var(--fail); font-size: .88rem; display: block; margin: .2rem 0 .6rem; }

/* class accent colour: preset swatches instead of a colour dropper */
.swatches { border: 0; padding: 0; margin: 0 0 1rem; }
.swatches legend { font-size: .85rem; font-weight: 600; color: var(--muted); margin-bottom: .45rem; padding: 0; }
.swatch-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.swatch { position: relative; width: 2rem; height: 2rem; cursor: pointer; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch-dot {
  display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--swatch);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.35);
  transition: transform .12s ease, box-shadow .12s ease;
}
.swatch:hover .swatch-dot { transform: scale(1.08); }
.swatch input:checked + .swatch-dot {
  transform: scale(1.1);
  box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--swatch);
}
.swatch input:focus-visible + .swatch-dot { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 4px var(--ink); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.inline-form { display: flex; gap: .5rem; flex: 1; }
.inline-form .btn { flex: none; white-space: nowrap; }

/* ---------- page furniture ---------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.greeting { margin-bottom: 1.6rem; }
.greeting h1 { margin-bottom: .25rem; }
.greeting-line { color: var(--muted); font-size: 1.02rem; margin: 0; }
.greeting-exams_now .greeting-line,
.greeting-exams_soon .greeting-line,
.greeting-midterms_now .greeting-line,
.greeting-midterms_soon .greeting-line { color: var(--ink); font-weight: 500; }
.page-subhead { margin: 0; font-size: 1.15rem; }
.crumb { margin: 0 0 .1rem; font-size: .85rem; }
.card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 900px) { .card-grid { grid-template-columns: minmax(0, 1fr); } }
.course-card {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem; color: var(--ink); position: relative; overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
.course-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--accent);
}
.course-card:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.course-card h2 { margin: .2rem 0 .2rem; font-size: 1.15rem; letter-spacing: -0.01em; }
.course-card p { margin: .15rem 0; font-size: .88rem; }
.course-card-head { display: block; color: var(--ink); }
.course-card-head:hover { text-decoration: none; }
.course-card-head:hover h2 { color: var(--accent); }
.course-card-units {
  margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .5rem;
  display: flex; flex-direction: column;
}
.course-card-unit {
  display: flex; justify-content: space-between; align-items: center; gap: .8rem;
  padding: .42rem .5rem; margin: 0 -.5rem; border-radius: var(--radius-sm);
  color: var(--ink); font-size: .92rem;
  transition: background .12s ease;
}
.course-card-unit:hover { background: var(--fill); text-decoration: none; }
.course-card-unit-name {
  font-weight: 500; flex: 1 1 40%; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.course-card .unit-badges { flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; }
.course-card-none { margin-top: .8rem; border-top: 1px solid var(--line); padding-top: .7rem; }
.empty-state {
  background: var(--bg-elevated); border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-lg); padding: 2.6rem 2rem; text-align: center;
  color: var(--muted); margin-top: 1rem;
}
.empty-state p { margin: .2rem auto; max-width: 440px; }
.empty-state .btn { margin-top: 1rem; }
.empty-title { font-weight: 600; color: var(--ink); font-size: 1.05rem; }
.unit-list { display: flex; flex-direction: column; gap: .55rem; }
.unit-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .85rem 1.15rem; color: var(--ink);
  transition: border-color .12s ease, transform .12s ease;
}
.unit-row:hover { text-decoration: none; border-color: var(--accent); transform: translateX(2px); }
.unit-badges { display: flex; gap: .4rem; }

/* ---------- tabs (segmented-control style) ---------- */
.tab-groups {
  display: flex; gap: 1.6rem; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 1.3rem;
}
.tab-groups .tabs { margin-bottom: 0; }
.tab-group-label {
  display: block; margin: 0 0 .35rem .5rem;
  font-size: .66rem; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
}
.tab-group + .tab-group { border-left: 1px solid var(--line); padding-left: 1.6rem; }
.tabs {
  display: inline-flex; gap: 2px; background: var(--fill);
  padding: 3px; border-radius: 9px; margin-bottom: 1.3rem;
}
.tab {
  padding: .38rem 1rem; color: var(--ink-secondary); font-weight: 600;
  font-size: .92rem; border-radius: 7px; transition: background .15s ease, color .15s ease;
}
.tab:hover { text-decoration: none; color: var(--ink); }
.tab.active {
  color: var(--ink); background: var(--bg-elevated);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}
.tab-count { font-size: .74rem; background: var(--fill); border-radius: 5px; padding: 0 .4rem; margin-left: .15rem; }
.tab-panel { animation: fadein .18s ease-in; }
@keyframes fadein { from { opacity: .5; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.panel-actions { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; flex-wrap: wrap; }

/* generate card */
.generate-card {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.1rem 1.3rem; margin-bottom: 1rem;
  position: relative; overflow: hidden;
}
.generate-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--accent);
}
.generate-form { display: flex; flex-direction: column; gap: .7rem; }
.generate-copy { display: flex; flex-direction: column; gap: .1rem; }
.generate-copy strong { font-size: 1rem; letter-spacing: -0.01em; }
.generate-copy span { color: var(--muted); font-size: .87rem; }
.generate-controls { display: flex; gap: .6rem; align-items: center; }
.generate-controls input { flex: 1; }
.generate-controls .btn { flex-shrink: 0; }

/* toolbar above the rendered notes */
.notes-toolbar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  flex-wrap: wrap; margin: .2rem 0 .7rem;
}
.notes-meta { color: var(--muted); font-size: .82rem; }
.version-select { width: auto; font-size: .85rem; padding: .3rem .6rem; }

/* ---------- upload / sources ---------- */
.upload-zone {
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg);
  background: var(--bg-elevated); padding: 1.7rem; text-align: center;
  margin-bottom: .9rem; transition: border-color .15s, background .15s;
}
.upload-zone.dragover { border-color: var(--accent); background: var(--accent-soft); }
.upload-zone p { margin: .2rem 0; }
.upload-opt { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; font-size: .85rem; cursor: pointer; }
.upload-opt input { margin: 0; }
.upload-icon {
  width: 40px; height: 40px; margin: 0 auto .5rem; border-radius: 50%;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center; font-size: 1.15rem; font-weight: 700;
}
.add-row { display: flex; gap: .8rem; margin-bottom: 1.3rem; align-items: flex-start; flex-wrap: wrap; }
.paste-details summary { list-style: none; }
.paste-details summary::-webkit-details-marker { display: none; }
.paste-details form { min-width: 340px; }
.source-list { display: flex; flex-direction: column; gap: .45rem; }
.source-row {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .6rem 1rem;
}
.src-toggle input { width: 17px; height: 17px; accent-color: var(--accent); }
.src-kind {
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; padding: .14rem .5rem; border-radius: 6px;
}
.kind-pptx { background: var(--warn-soft); color: var(--warn); }
.kind-pdf { background: var(--fail-soft); color: var(--fail); }
.kind-docx { background: var(--accent-soft); color: var(--accent); }
.kind-youtube, .kind-video { background: var(--fail-soft); color: var(--fail); }
.kind-text, .kind-link { background: var(--fill); color: var(--muted); }
.kind-pocket { background: var(--ok-soft); color: var(--ok); }

/* Pocket note-taker panel: the student's own class notes */
.pocket-panel {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-left: 3px solid var(--ok); border-radius: var(--radius-lg);
  padding: 1rem 1.1rem 1.1rem; margin-bottom: 1.3rem;
}
.pocket-form { display: flex; flex-direction: column; gap: .6rem; }
.pocket-head { display: flex; gap: .8rem; align-items: flex-start; }
.pocket-head p { margin: .15rem 0 0; font-size: .88rem; }
.pocket-title { margin: 0; font-size: 1rem; }
.pocket-icon {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: var(--ok-soft); color: var(--ok);
  display: grid; place-items: center; font-size: 1.05rem; font-weight: 700;
}
.pocket-form textarea { font-size: .9rem; }
.pocket-actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; justify-content: space-between; }
.pocket-file-label { cursor: pointer; font-size: .85rem; }
.pocket-file-label.has-file { border-color: var(--ok); color: var(--ok); }
.src-title { flex: 1; min-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.src-title a { color: var(--ink); }
.src-fail-detail { flex-basis: 100%; padding-left: 2rem; }
.src-player summary { list-style: none; cursor: pointer; }
.src-player summary::-webkit-details-marker { display: none; }
.src-player[open] { flex-basis: 100%; padding-left: 2rem; }
.src-player video { display: block; width: 100%; max-width: 720px; margin-top: .5rem;
  border-radius: 10px; background: #000; }
.src-fail-detail textarea { font-size: .85rem; }
.token-bar { margin-top: .8rem; font-size: .85rem; }

/* ---------- jobs ---------- */
.job-banner {
  display: flex; align-items: center; gap: .6rem;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: .65rem 1rem; margin-bottom: 1rem; font-size: .92rem;
}
.job-failed { background: var(--fail-soft); border-color: var(--fail); }
.job-done { background: var(--ok-soft); border-color: var(--ok); }
.job-stopped { color: var(--muted); }
.job-stop { margin-left: auto; }
.job-stop .btn { padding: .18rem .7rem; font-size: .8rem; }
.spinner {
  width: 14px; height: 14px; border: 2px solid var(--accent); border-top-color: transparent;
  border-radius: 50%; animation: spin .7s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Thinking orbs (app.js `thinkingOrbs`): a dotted sphere drawn on a canvas in
   the element's `color`, so it follows the accent and the theme. data-orb names
   the motion (reading, thinking, writing), data-size the pixel size. Under
   prefers-reduced-motion one still frame. */
.orb { display: inline-block; width: 22px; height: 22px; color: var(--accent); line-height: 0; vertical-align: middle; flex: none; }
.orb canvas { display: block; width: 100%; height: 100%; }
.pill-wait .orb, .syllabus-status .orb { width: 14px; height: 14px; margin-right: .3rem; color: currentColor; vertical-align: -2px; }

/* ---------- notes body ---------- */
.notes-body {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 2.4rem 2.8rem; margin-bottom: .6rem;
  font-size: 16px; line-height: 1.8;
}
/* Readable measure: cap text line length so long lines don't overwhelm */
.notes-body > p, .notes-body > ul, .notes-body > ol, .notes-body > dl,
.notes-body > blockquote { max-width: 46rem; }
.notes-body h2 {
  font-size: 1.4rem; margin: 2.4rem 0 .9rem; letter-spacing: -0.018em;
  padding-bottom: .35rem; border-bottom: 1px solid var(--line);
}
.notes-body h2:first-child { margin-top: 0; }
.notes-body h3 { font-size: 1.12rem; margin: 1.7rem 0 .55rem; letter-spacing: -0.01em; }
.notes-body h4 { font-size: 1rem; margin: 1.3rem 0 .4rem; }
.notes-body p { margin: .85rem 0; }
.notes-body ul, .notes-body ol { margin: .7rem 0; padding-left: 1.5rem; }
.notes-body li { margin: .45rem 0; }
.notes-body li::marker { color: var(--accent); }
.notes-body hr { border: none; border-top: 1px solid var(--line); margin: 1.6rem 0; }
.notes-body img { max-width: 100%; height: auto; }
.notes-body figure {
  margin: 1.3rem auto; padding: 1rem 1rem .8rem; max-width: 640px;
  background: var(--bg-secondary); border: 1px solid var(--line);
  border-radius: var(--radius); text-align: center;
}
.notes-body figure img {
  border-radius: var(--radius-sm); background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}
.notes-body figcaption {
  font-size: .84rem; color: var(--muted); margin-top: .6rem;
  text-align: left; line-height: 1.5;
}
/* Generated HTML comes from a model: it must never be able to break the layout.
   Long words and URLs wrap at the box edge (break-word does not shrink table
   columns the way `anywhere` does), and cells keep their inner spacing tight. */
.notes-body { overflow-wrap: break-word; }
.notes-body a { overflow-wrap: anywhere; }
.notes-body td > :first-child, .notes-body th > :first-child { margin-top: 0; }
.notes-body td > :last-child, .notes-body th > :last-child { margin-bottom: 0; }
.notes-body td ul, .notes-body td ol { padding-left: 1.1rem; margin: .25rem 0; }
.notes-body td li { margin: .15rem 0; }

/* Tables: words never break mid-word (the chat bubble's overflow-wrap:anywhere
   would otherwise let the auto layout squeeze a column to one letter per line).
   Wide tables scroll sideways inside .table-wrap (added by app.js) instead. */
.notes-body .table-wrap {
  overflow-x: auto; margin: 1.1rem 0; border-radius: var(--radius);
  -webkit-overflow-scrolling: touch;
}
.notes-body .table-wrap > table { margin: 0; }
.notes-body table {
  border-collapse: separate; border-spacing: 0; width: 100%; margin: 1.1rem 0;
  font-size: .92rem; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.notes-body th, .notes-body td {
  border: none; border-bottom: 1px solid var(--line);
  padding: .6rem .85rem; text-align: left; vertical-align: top;
  overflow-wrap: normal; word-break: normal; hyphens: manual; min-width: 5.5rem;
}
.notes-body td:first-child { font-weight: 600; }
.notes-body th {
  background: var(--accent-soft); color: var(--accent);
  font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.notes-body tbody tr:last-child td { border-bottom: none; }
.notes-body tbody tr:nth-child(even) td { background: var(--bg-secondary); }
.notes-body tbody tr { transition: background .12s ease; }
.notes-body tbody tr:hover td { background: var(--fill); }

/* timeline: chronological content gets a spine, dots, and a scroll-in reveal */
.notes-body .timeline { position: relative; margin: 1.3rem 0; padding-left: 1.7rem; max-width: 46rem; }
.notes-body .timeline::before {
  content: ""; position: absolute; left: .42rem; top: .4rem; bottom: .4rem;
  width: 2.5px; border-radius: 2px;
  background: linear-gradient(180deg, var(--accent), var(--teal));
}
.notes-body .tl-item {
  position: relative; margin: 0 0 1.15rem;
  opacity: 0; transform: translateY(12px);
  transition: opacity .5s ease, transform .5s ease;
}
.notes-body .tl-item.in-view { opacity: 1; transform: none; }
.notes-body .tl-item::before {
  content: ""; position: absolute; left: -1.55rem; top: .3rem;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 3.5px var(--accent-soft);
}
.notes-body .tl-date {
  display: block; font-weight: 700; font-size: .78rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--accent);
  margin-bottom: .1rem;
}
.notes-body .tl-body p { margin: .2rem 0; }
@media (prefers-reduced-motion: reduce) {
  .notes-body .tl-item { opacity: 1; transform: none; transition: none; }
}
.notes-body code {
  background: var(--fill); padding: .12rem .4rem; border-radius: 6px; font-size: .88em;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}
.notes-body pre { background: #1c1c1e; color: #f5f5f7; padding: 1rem 1.2rem; border-radius: var(--radius); overflow-x: auto; }
.notes-body pre code { background: none; color: inherit; }
.notes-body blockquote { border-left: 3px solid var(--line-strong); margin: .9rem 0; padding: .2rem 1rem; color: var(--muted); }

.notes-body .tldr {
  background: var(--accent-soft); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: 1rem 1.3rem; margin-bottom: 1.5rem;
}
.notes-body .tldr::before { content: "TL;DR"; display: block; font-weight: 700; font-size: .76rem; letter-spacing: .08em; color: var(--accent); margin-bottom: .3rem; }
.notes-body .callout {
  background: var(--ok-soft); border-left: 4px solid var(--ok);
  border-radius: var(--radius); padding: .8rem 1.2rem; margin: 1rem 0;
}
.notes-body .callout::before { content: "Key insight"; display: block; font-weight: 700; font-size: .76rem; color: var(--ok); margin-bottom: .2rem; }
.notes-body .key-term {
  background: var(--audio-soft); border-radius: var(--radius); padding: .7rem 1.1rem; margin: .8rem 0;
}
.notes-body .key-term dt { font-weight: 700; color: var(--audio); }
.notes-body .key-term dd { margin: .15rem 0 0; }
.notes-body .example {
  background: var(--bg-secondary); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .8rem 1.2rem; margin: 1rem 0;
}
.notes-body .example::before { content: "Example"; display: block; font-weight: 700; font-size: .76rem; color: var(--muted); margin-bottom: .2rem; }
.notes-body .warning {
  background: var(--warn-soft); border-left: 4px solid var(--warn);
  border-radius: var(--radius); padding: .8rem 1.2rem; margin: 1rem 0;
}
.notes-body .warning::before { content: "Watch out"; display: block; font-weight: 700; font-size: .76rem; color: var(--warn); margin-bottom: .2rem; }
.notes-body .recall {
  background: var(--bg-secondary); border: 1.5px dashed var(--accent);
  border-radius: var(--radius); padding: .8rem 1.2rem; margin: 1rem 0;
}
.notes-body .recall::before { content: "Try it from memory first"; display: block; font-weight: 700; font-size: .76rem; letter-spacing: .04em; color: var(--accent); margin-bottom: .2rem; }
.notes-body .misconception {
  background: var(--fail-soft); border-left: 4px solid var(--fail);
  border-radius: var(--radius); padding: .8rem 1.2rem; margin: 1rem 0;
}
.notes-body .misconception::before { content: "Feels true, but isn't"; display: block; font-weight: 700; font-size: .76rem; color: var(--fail); margin-bottom: .2rem; }
.notes-body .mcq {
  background: var(--bg-secondary); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1.2rem; margin: 1.1rem 0;
}
.notes-body .mcq::before { content: "Quick check"; display: block; font-weight: 700; font-size: .76rem; letter-spacing: .04em; color: var(--accent); margin-bottom: .35rem; }
.notes-body .mcq-q { font-weight: 600; margin: 0 0 .55rem; }
.notes-body .mcq-option {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: .45rem .8rem; margin: .35rem 0; cursor: pointer; font-size: .94rem;
  transition: background .12s ease, border-color .12s ease;
}
.notes-body .mcq:not(.mcq-answered) .mcq-option:hover { background: var(--fill); border-color: var(--accent); }
.notes-body .mcq-answered .mcq-option { cursor: default; opacity: .75; }
.notes-body .mcq-answered .mcq-correct {
  background: var(--ok-soft); border-color: var(--ok); opacity: 1; font-weight: 600;
}
.notes-body .mcq-answered .mcq-correct::after { content: "  ✓"; color: var(--ok); font-weight: 700; }
.notes-body .mcq-answered .mcq-picked:not(.mcq-correct) {
  background: var(--fail-soft); border-color: var(--fail); opacity: 1;
}
.notes-body .mcq-answered .mcq-picked:not(.mcq-correct)::after { content: "  ✕"; color: var(--fail); font-weight: 700; }
.notes-body .mcq-why {
  display: none; margin-top: .55rem; padding-top: .55rem;
  border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-secondary);
}
.notes-body .mcq-answered .mcq-why { display: block; }

/* margin notes (saved annotations) */
.annotation-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .25rem; }
.annotation-kind {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent);
}
.annotation-user .annotation-kind { color: var(--warn); }
.annotation.unanchored .annotation-kind::after {
  content: ", from an older version of these notes";
  color: var(--muted); font-weight: 500; letter-spacing: 0; text-transform: none;
}
.annotation-user .clarify-answer { background: var(--warn-soft); border-radius: var(--radius-sm); padding: .5rem .8rem; }
.annotation-x { width: 22px; height: 22px; font-size: .8rem; }
.annotation-empty { padding: .5rem .2rem; font-size: .9rem; }

/* reading progress bar (notes pages) */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--teal));
  z-index: 300; transition: width .1s linear; border-radius: 0 2px 2px 0;
}

/* "Picked up where you left off" toast after a resumed scroll */
.resume-pill {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 12px);
  background: var(--bg-elevated); color: var(--ink); border: 1px solid var(--line);
  border-radius: 999px; box-shadow: var(--shadow); padding: .45rem .95rem;
  font-size: .85rem; opacity: 0; z-index: 320; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
}
.resume-pill.show { opacity: 1; transform: translate(-50%, 0); }
.draft-status { font-size: .82rem; min-width: 7rem; }

/* ---------- highlight-to-ask (clarify) ---------- */
::highlight(sendy-clarify) { background-color: rgba(255, 204, 0, .38); }

.clarify-hint { font-size: .82rem; margin: .2rem 0 0; }

.clarify-fab {
  position: fixed; z-index: 60;
  border: none; cursor: pointer; font: inherit;
  font-size: .85rem; font-weight: 600; line-height: 1.2;
  padding: .42rem .9rem; border-radius: 980px;
  background: var(--accent-fill); color: var(--on-accent);
  box-shadow: var(--shadow-lg);
  animation: fadein .12s ease-out;
}
.clarify-fab:hover { filter: brightness(1.1); }
.clarify-fab:active { transform: scale(.97); }

/* Word-style margin: annotation cards float beside the passage they anchor to. */
.notes-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.4rem; align-items: start;
}
.notes-main { min-width: 0; }
.clarify-panel { position: relative; }
#clarify-close, .clarify-head { display: none; }
.clarify-exchange {
  padding: .6rem .75rem;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: .88rem;
  transition: box-shadow .18s ease, border-color .18s ease, top .3s ease;
}
.annotation.floating { position: absolute; left: 0; right: 0; }
.annotation.hot, .clarify-exchange:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); }

/* connector lines from highlight to card (Word-style) */
.notes-layout { position: relative; }
svg.ann-lines {
  position: absolute; top: 0; left: 0; pointer-events: none; z-index: 4;
  overflow: visible;
}
.ann-lines path {
  fill: none; stroke: color-mix(in srgb, var(--warn) 45%, transparent);
  stroke-width: 1.5; transition: stroke .15s ease, stroke-width .15s ease;
}
.ann-lines path.hot { stroke: var(--warn); stroke-width: 2; }

/* long cards collapse to a preview; click expands */
.annotation:not(.expanded) .clarify-answer.clampable {
  max-height: 150px; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 97%);
}
.annotation .clarify-answer.clampable { cursor: pointer; }

/* the highlighted passage in the text */
mark.ann-anchor {
  background: color-mix(in srgb, var(--warn) 20%, transparent);
  color: inherit; border-bottom: 2px solid var(--warn);
  border-radius: 2px; cursor: pointer; transition: background .15s ease;
}
mark.ann-anchor.hot, mark.ann-anchor:hover {
  background: color-mix(in srgb, var(--warn) 38%, transparent);
}

/* composer: appears in the margin at the height of the selection */
.margin-composer {
  position: absolute; left: 0; right: 0; z-index: 6;
  background: var(--bg-elevated); border: 1px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  padding: .7rem .75rem;
}
/* high-specificity hide: the later .clarify-form{display:flex} must not win */
.clarify-panel:not(.composing) .margin-composer { display: none; }
.margin-composer .clarify-quote[hidden] { display: none; }

@media (max-width: 1150px) {
  /* Narrow screens: fall back to a slide-over drawer with a static list. */
  .notes-layout { grid-template-columns: 1fr; }
  .clarify-panel {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 55;
    width: min(400px, 100vw);
    display: flex; flex-direction: column;
    border-left: 1px solid var(--line);
    background: var(--bg-elevated); box-shadow: var(--shadow-lg);
    transform: translateX(110%); visibility: hidden;
    transition: transform .22s ease, visibility .22s;
  }
  .clarify-panel.open { transform: none; visibility: visible; }
  #clarify-close { display: inline-grid; }
  .clarify-head {
    display: flex; justify-content: space-between; align-items: center; gap: .6rem;
    padding: .85rem 1.1rem; border-bottom: 1px solid var(--line);
  }
  .clarify-log { flex: 1; overflow-y: auto; padding: .9rem .9rem 0; }
  .clarify-exchange { margin-bottom: .9rem; }
  /* drawer keeps a permanent composer at the bottom */
  .clarify-panel:not(.composing) .margin-composer { display: flex; }
  .margin-composer {
    position: static; border-color: var(--line);
    border-radius: 0; border-left: none; border-right: none; border-bottom: none;
    box-shadow: none;
  }
}
.clarify-quote {
  margin: 0 0 .45rem; padding: .45rem .8rem;
  border-left: 3px solid var(--warn); border-radius: var(--radius-sm);
  background: var(--warn-soft); color: var(--ink-secondary);
  font-size: .84rem; line-height: 1.45;
}
.clarify-question { margin: 0 0 .45rem; font-size: .9rem; font-weight: 600; }
.clarify-answer.notes-body {
  padding: 0; margin-bottom: 0;
  font-size: .92rem; line-height: 1.55;
  background: none; border: none; border-radius: 0; box-shadow: none;
}
.clarify-answer.notes-body > :first-child { margin-top: 0; }
.clarify-answer.notes-body > :last-child { margin-bottom: 0; }
.clarify-answer.notes-body h2 { font-size: 1.02rem; margin: .7rem 0 .3rem; border: none; padding: 0; }
.clarify-answer.notes-body h3 { font-size: .95rem; margin: .6rem 0 .25rem; }
/* Margin answers stay flat: neutralize any boxed elements older answers used. */
.clarify-answer .tldr, .clarify-answer .callout, .clarify-answer .key-term,
.clarify-answer .example, .clarify-answer .warning, .clarify-answer .misconception,
.clarify-answer .recall, .clarify-answer .mcq {
  background: none; border: none; box-shadow: none; padding: 0; margin: .45rem 0;
}
.clarify-answer .tldr::before, .clarify-answer .callout::before,
.clarify-answer .example::before, .clarify-answer .warning::before,
.clarify-answer .misconception::before, .clarify-answer .recall::before,
.clarify-answer .mcq::before { display: none; }
.clarify-answer .key-term dt { color: inherit; }
.clarify-error {
  background: var(--fail-soft); border: 1px solid var(--fail);
  border-radius: var(--radius); padding: .6rem .9rem; font-size: .9rem;
}
.clarify-form {
  display: flex; flex-direction: column; gap: .5rem;
  border-top: 1px solid var(--line); padding: .85rem 1.1rem;
}
.clarify-form .clarify-quote { max-height: 108px; overflow-y: auto; }
.clarify-form .btn { align-self: flex-end; }
.clarify-panel .chat-typing { padding: 0 1.1rem .4rem; }

/* Answered highlights pinned into the notes so they survive scrolling */
::highlight(sendy-pinned) { background-color: rgba(255, 204, 0, .2); }


/* ---------- podcast ---------- */
.podcast-card {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.5rem 1.7rem;
}
.podcast-card h3 { margin: 0 0 .8rem; letter-spacing: -0.01em; }
.podcast-card audio { width: 100%; }
.transcript {
  white-space: pre-wrap; font-size: .88rem; background: var(--bg-secondary);
  border: 1px solid var(--line); padding: 1rem; border-radius: var(--radius);
  max-height: 400px; overflow-y: auto;
}

/* ---------- print: just the notes ---------- */
@media print {
  .sidebar, .tabs, .page-head .btn-row, .panel-actions, .job-banner,
  .clarify-fab, .clarify-panel, .clarify-hint { display: none !important; }
  .content { padding: 0; max-width: none; }
  .notes-body { border: none; box-shadow: none; padding: 0; }
  body { background: #fff; }
}

@media (max-width: 760px) {
  .notes-body { padding: 1.3rem; }
  .generate-controls { flex-direction: column; align-items: stretch; }
}

/* ---------- Ask Sendy chat ---------- */
.side-ask {
  display: block; font-weight: 600; font-size: .93rem; color: var(--ink);
  padding: .38rem .6rem; border-radius: var(--radius-sm); margin-bottom: 1rem;
  background: var(--fill); text-align: center;
  position: relative; overflow: hidden;
  transition: background .12s ease, transform .15s ease, box-shadow .15s ease;
}
.side-ask::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 22%,
    color-mix(in srgb, var(--accent) 18%, transparent) 50%, transparent 78%);
  transform: translateX(-100%);
  animation: ask-shimmer 8s ease-in-out infinite;
}
.side-ask.active::after {
  background: linear-gradient(105deg, transparent 22%,
    rgba(255, 255, 255, .34) 50%, transparent 78%);
}
/* a wide band that takes ~3s to cross, then rests for the remaining ~5s */
@keyframes ask-shimmer {
  0%, 62% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
.side-ask:hover {
  background: var(--fill-hover); text-decoration: none;
  transform: translateY(-1px); box-shadow: var(--shadow);
}
.side-ask:active { transform: scale(.97); }
.side-ask.active { background: var(--accent-soft); color: var(--accent); }
/* the same periodic shimmer on every box where you can ask Sendy something */
.query-shimmer { position: relative; overflow: hidden; }
.query-shimmer::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 22%,
    color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 78%);
  transform: translateX(-100%);
  animation: ask-shimmer 8s ease-in-out infinite;
}
.query-shimmer:focus-within::after { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .side-ask::after, .query-shimmer::after { animation: none; }
}

.chat-wrap {
  display: flex; flex-direction: column;
  height: calc(100vh - 12rem); min-height: 360px;
}
.chat-scroll { flex: 1; overflow-y: auto; padding: .2rem .2rem 1rem; }
.chat-msg { display: flex; margin: .55rem 0; }
.chat-user { justify-content: flex-end; }
.chat-assistant { justify-content: flex-start; }
.chat-bubble {
  max-width: 78%; min-width: 0; padding: .65rem 1rem; border-radius: var(--radius-lg);
  box-shadow: var(--shadow); font-size: .95rem; overflow-wrap: break-word;
}
.chat-user .chat-bubble {
  background: var(--accent-soft); color: var(--ink); border-bottom-right-radius: 6px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.chat-assistant .chat-bubble {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}
.chat-bubble.notes-body { padding: .65rem 1.1rem; }
/* A bubble holding a table needs the full column so columns aren't crushed. */
.chat-assistant .chat-bubble:has(table) { max-width: 100%; }
.chat-bubble.notes-body > :first-child { margin-top: 0; }
.chat-bubble.notes-body > :last-child { margin-bottom: 0; }
.chat-error { background: var(--fail-soft); border: 1px solid var(--fail); color: var(--ink); }
/* A reply still being written (views.ask_stream): the waiting line until the
   first word, then plain text with a cursor, then the saved HTML. */
.chat-wait { display: inline-flex; align-items: center; gap: .5rem; color: var(--muted); font-size: .92rem; }
.chat-wait .orb { width: 22px; height: 22px; }
.chat-wait-text { animation: typing-fade 2.4s ease-in-out infinite; }
.chat-stream-text { white-space: pre-wrap; }
.chat-streaming .chat-stream-text::after { content: "\258B"; margin-left: .1em; color: var(--accent); animation: typing-fade 1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .chat-wait-text, .chat-streaming .chat-stream-text::after { animation: none; } }

.chat-form {
  display: flex; gap: .6rem; align-items: flex-end;
  border-top: 1px solid var(--line); padding-top: .9rem;
}
.chat-form .chat-input-wrap { flex: 1; min-width: 0; border-radius: var(--radius); }
.chat-form textarea { display: block; width: 100%; max-height: 140px; }
.chat-form .btn { flex-shrink: 0; }

.chat-typing { display: none; align-items: center; gap: .6rem; padding: .4rem .6rem; color: var(--muted); font-size: .88rem; }
.chat-typing.htmx-request { display: inline-flex; }
.chat-typing .orb { width: 40px; height: 40px; }
#clarify-typing .orb { width: 18px; height: 18px; }
#clarify-typing { font-size: .82rem; padding: 0 .2rem; }
.chat-typing-text { animation: typing-fade 2.4s ease-in-out infinite; }
@keyframes typing-fade { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .chat-typing-text { animation: none; } }

/* Past chats: history list, search, read-only thread view */
.history-search { position: relative; margin-bottom: 1.3rem; max-width: 46rem; }
.history-search input[type="search"] {
  width: 100%; box-sizing: border-box; padding: .7rem 2.4rem .7rem 1rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--bg-elevated); color: var(--ink); font: inherit; font-size: 1rem;
}
.history-search input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.history-spinner {
  position: absolute; right: .9rem; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  border: 2px solid var(--line-strong); border-top-color: var(--accent); border-radius: 50%;
  opacity: 0; animation: spin .8s linear infinite;
}
.history-search.htmx-request .history-spinner { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
.thread-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; max-width: 46rem; }
.thread-card {
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); overflow: hidden; transition: border-color .12s ease, transform .07s ease;
}
.thread-card:hover { border-color: var(--line-strong); }
.thread-current { border-left: 3px solid var(--accent); }
.thread-main { display: block; padding: .85rem 1.1rem; text-decoration: none; color: inherit; }
.thread-main:hover .thread-title { color: var(--accent); }
.thread-title { display: block; font-weight: 600; font-size: 1rem; line-height: 1.35; }
.thread-meta { display: block; color: var(--muted); font-size: .82rem; margin-top: .2rem; }
.thread-hits { list-style: none; margin: 0; padding: .2rem .6rem .7rem; border-top: 1px solid var(--line); }
.thread-hit a {
  display: flex; gap: .6rem; padding: .4rem .5rem; border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink); font-size: .88rem; line-height: 1.45;
}
.thread-hit a:hover { background: var(--fill); }
.thread-hit.muted { padding: .2rem .5rem; font-size: .8rem; }
.hit-who { flex-shrink: 0; width: 3.2rem; font-weight: 600; font-size: .75rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted); padding-top: .15rem; }
.thread-hit-user .hit-who { color: var(--accent); }
.hit-text mark, .chat-readonly mark { background: var(--warn-soft); color: inherit; border-radius: 3px; padding: 0 .1em; }
.crumb { margin: 0 0 .2rem; font-size: .85rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--accent); }
.thread-heading { font-size: 1.5rem; margin: 0 0 .2rem; }
.chat-readonly { max-width: 62rem; }
.chat-readonly .chat-msg:target .chat-bubble { outline: 2px solid var(--accent); outline-offset: 3px; }
.chat-readonly .chat-msg { scroll-margin-top: 1.5rem; }

/* ---------- class context: how the weeks connect ---------- */
.links-card {
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 1rem 1.2rem 1.1rem; margin-bottom: 1.3rem;
}
.links-title { margin: 0 0 .15rem; font-size: 1rem; }
.links-card > .muted { margin: 0 0 .7rem; font-size: .85rem; }
.links-list { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .7rem; }
.links-unit { font-weight: 600; color: var(--ink); }
.links-summary { margin: .15rem 0 .25rem; font-size: .9rem; }
.links-builds, .links-strip { margin: 0; font-size: .82rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.links-strip { margin: -.3rem 0 .9rem; }
.chip {
  display: inline-block; padding: .12rem .55rem; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-weight: 600; text-decoration: none;
}
.chip:hover { background: var(--accent-fill); color: var(--on-accent); }

/* ---------- class summary ---------- */
.course-summary { margin-top: 2.2rem; }
.course-summary .generate-card::before { background: var(--audio); }
.chat-bubble.notes-body {
  font-size: .95rem; line-height: 1.55; margin-bottom: 0;
  box-shadow: var(--shadow); border-radius: var(--radius-lg);
  border-bottom-left-radius: 6px;
}
.chat-bubble.notes-body h2 { font-size: 1.1rem; margin: .8rem 0 .3rem; }
.chat-bubble.notes-body h3 { font-size: 1rem; margin: .7rem 0 .25rem; }

/* ---------- home layout: main column + year-round right rail ---------- */
.home-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(420px, 34vw, 520px);
  gap: 2rem; align-items: start;
}
.home-rail {
  display: flex; flex-direction: column; gap: 1.2rem;
  position: sticky; top: 1.6rem;
}
@media (max-width: 1150px) {
  .home-grid { grid-template-columns: 1fr; }
  .home-rail { position: static; }
}

/* ---------- dashboard: calendar + agenda ---------- */
.dashboard {
  display: grid; grid-template-columns: 320px 1fr; gap: 1.2rem;
  margin-bottom: 2.4rem; align-items: stretch;
}
.dash-title { margin: 0 0 .9rem; font-size: 1.12rem; letter-spacing: -0.01em; }
.dash-calendar, .dash-agenda {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.4rem 1.5rem;
}
.dash-agenda { display: flex; flex-direction: column; }
.agenda-empty {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 1.2rem; gap: .1rem;
}
.agenda-empty p { margin: .15rem 0; max-width: 380px; }
.agenda-empty-title { font-weight: 600; color: var(--ink); font-size: 1rem; }
.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th {
  font-size: .68rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; padding: .2rem 0 .45rem; text-align: center;
}
.cal-grid td {
  text-align: center; padding: .3rem 0 .38rem; border-radius: 8px;
  vertical-align: top; height: 50px;
}
.cal-day { font-size: .95rem; display: block; line-height: 1.55; }
.cal-today { background: var(--accent-soft); }
.cal-today .cal-day { color: var(--accent); font-weight: 700; }
.cal-dots { display: flex; gap: 2px; justify-content: center; margin-top: 2px; min-height: 6px; }
.cal-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.cal-more { font-size: .6rem; color: var(--muted); line-height: 6px; }

.agenda-group { margin-bottom: .9rem; }
.agenda-label {
  margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.agenda-row {
  display: flex; align-items: baseline; gap: .65rem; padding: .42rem .5rem;
  border-radius: var(--radius-sm); font-size: .95rem;
}
.agenda-row:hover { background: var(--fill); }
.agenda-date { flex-shrink: 0; width: 74px; color: var(--muted); font-size: .82rem; font-variant-numeric: tabular-nums; }
.agenda-body { flex: 1; min-width: 0; }
.agenda-course {
  font-size: .8rem; color: var(--ink-secondary);
  border-left: 3px solid var(--accent); padding-left: .4rem;
}
.agenda-body .agenda-course { display: block; width: fit-content; margin-top: .15rem; }
.ev-kind {
  flex-shrink: 0; font-size: .68rem; font-weight: 700; padding: .1rem .45rem;
  border-radius: 6px; text-transform: uppercase; letter-spacing: .03em;
}
.ev-homework { background: var(--accent-soft); color: var(--accent); }
.ev-quiz { background: var(--audio-soft); color: var(--audio); }
.ev-test, .ev-exam { background: var(--fail-soft); color: var(--fail); }
.ev-project { background: var(--warn-soft); color: var(--warn); }
.ev-lecture, .ev-other { background: var(--fill); color: var(--muted); }

.syllabus-card { margin: 1.4rem 0; }
.syllabus-list { display: flex; flex-direction: column; gap: .3rem; margin-top: .6rem; }
.syllabus-row {
  display: flex; align-items: center; gap: .7rem; font-size: .9rem;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .5rem 1rem;
}
.syllabus-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.syllabus-status { flex: 1; min-width: 0; }
.event-details summary { cursor: pointer; color: var(--accent); font-size: .9rem; padding: .4rem 0; }
.event-list { margin-top: .4rem; }

@media (max-width: 900px) {
  .dashboard { grid-template-columns: 1fr; }
}

/* ---------- home: ask bar + left-off resume pill ---------- */
.left-off {
  display: inline-flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: .9rem; padding: .6rem 1.05rem;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: 11px; box-shadow: var(--shadow);
  font-size: 1.02rem; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.left-off:hover {
  text-decoration: none; transform: translateY(-1px);
  box-shadow: var(--shadow-lg); border-color: var(--accent);
}
.left-off-kicker {
  font-size: .72rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted);
}
.left-off-label { font-weight: 600; letter-spacing: -0.01em; }
.left-off-when { font-size: .85rem; color: var(--muted); }
.left-off-arrow { color: var(--accent); font-weight: 600; transition: transform .12s ease; }

/* brand icon (partials/_logo.html); inline size for prose, overridden in .brand */
.logo-beer { width: 1.25em; height: 1.25em; vertical-align: -0.22em; border-radius: 22.6%; }
.agenda-cheers .logo-beer { width: 1.4em; height: 1.4em; }
.left-off:hover .left-off-arrow { transform: translateX(2px); }
.home-ask {
  display: flex; align-items: center; gap: .6rem;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: var(--shadow);
  padding: .45rem .6rem .45rem 1rem; margin: 1.1rem 0 1.6rem; max-width: 640px;
}
.home-ask::after { border-radius: 12px; }
.home-ask input {
  border: none; background: transparent; box-shadow: none; padding: .3rem 0;
}
.home-ask input:focus { border: none; box-shadow: none; outline: none; }
.home-ask .btn { flex-shrink: 0; }

/* ---------- full-window drag-and-drop overlay ---------- */
.drop-overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  backdrop-filter: blur(3px);
}
.drop-overlay.active { display: grid; }
.drop-overlay-box {
  border: 2.5px dashed var(--accent); border-radius: var(--radius-lg);
  background: var(--bg-elevated); box-shadow: var(--shadow-lg);
  padding: 2.4rem 3.2rem; text-align: center; color: var(--ink);
}
.drop-overlay-box strong { font-size: 1.2rem; display: block; margin-bottom: .3rem; }
.drop-overlay-box span { color: var(--muted); font-size: .92rem; }

/* ---------- Flashcards ---------- */
.fc-deck { max-width: 620px; margin: 1.4rem auto 0; }
.fc-topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }
.fc-card {
  perspective: 1200px; height: 300px; cursor: pointer; outline: none;
}
.fc-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .45s cubic-bezier(.4, .1, .2, 1);
}
.fc-card.flipped .fc-inner { transform: rotateY(180deg); }
.fc-face {
  position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 2rem 2.4rem; font-size: 1.15rem; line-height: 1.5;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.fc-front { font-weight: 600; }
.fc-back { transform: rotateY(180deg); background: var(--accent-soft); border-color: var(--accent); }
.fc-hint {
  position: absolute; bottom: .9rem; left: 0; right: 0;
  font-size: .75rem; font-weight: 500; color: var(--muted);
}
.fc-controls { display: flex; justify-content: center; gap: .7rem; margin-top: 1.1rem; }
.fc-keys { text-align: center; font-size: .8rem; margin-top: .5rem; }
@media (prefers-reduced-motion: reduce) { .fc-inner { transition: none; } }

/* ---------- Test Mode ---------- */
.test-week-picker { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.test-week {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0;
  font-size: .88rem; font-weight: 500; cursor: pointer;
  background: var(--fill); border-radius: 8px; padding: .28rem .75rem;
}
.test-week:has(input:checked) { background: var(--accent-soft); color: var(--accent); }
.test-week input { accent-color: var(--accent); margin: 0; }

.test-list { display: flex; flex-direction: column; gap: .7rem; margin-top: 1rem; }
.test-row {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .9rem 1.15rem;
}
.test-row-info { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.test-row-info .muted { font-size: .85rem; }
.test-why { font-style: italic; }

.test-instructions {
  background: var(--accent-soft); border-radius: var(--radius);
  padding: .7rem 1rem; max-width: 780px;
}
.test-form { max-width: 780px; }
.test-question {
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.1rem 1.3rem; margin-bottom: 1rem;
}
.test-q-head { margin: 0 0 .6rem; font-weight: 500; }
.test-q-num { color: var(--accent); font-weight: 700; margin-right: .25rem; }
.test-q-pts { font-size: .82rem; }
.test-options { display: flex; flex-direction: column; gap: .35rem; }
.test-option {
  display: flex; align-items: baseline; gap: .55rem; margin: 0;
  font-weight: 400; font-size: .95rem; cursor: pointer;
  border-radius: var(--radius-sm); padding: .4rem .6rem;
}
.test-option:hover { background: var(--fill); }
.test-option:has(input:checked) { background: var(--accent-soft); }
.test-option input { accent-color: var(--accent); }
.test-submit-row { display: flex; align-items: center; gap: 1rem; margin: 1.2rem 0 2rem; }

.test-score-card {
  display: flex; align-items: center; gap: 1.3rem; max-width: 780px;
  background: var(--bg-elevated); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  padding: 1.2rem 1.4rem; margin-bottom: 1.4rem;
}
.test-score-big { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; color: var(--accent); }
.test-overall { margin-top: .3rem; font-size: .95rem; }
.test-result { max-width: 780px; border-left: 4px solid var(--warn); }
.test-result.test-full { border-left-color: var(--ok); }
.test-result.test-zero { border-left-color: var(--fail); }
.test-q-score { float: right; font-weight: 700; color: var(--ink-secondary); }
.test-your-answer { margin: .5rem 0; font-size: .93rem; }
blockquote.test-your-answer {
  border-left: 3px solid var(--line-strong); padding: .4rem .8rem; margin-left: 0;
  background: var(--bg-secondary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.test-feedback { font-size: .93rem; }
.test-feedback p:first-child { margin-top: .3rem; }

/* ---------- video overview ---------- */
.podcast-video { width: 100%; border-radius: var(--radius); background: #000; margin: .3rem 0; }
.video-head { margin-top: 1.2rem; }
.video-hint { border-top: 1px solid var(--line); padding-top: .8rem; margin-top: 1rem; }

/* ---------- Bierparty: logo-click easter egg ---------- */
.bierparty {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 1000;
  background: var(--bg-elevated);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: bierparty-in .35s cubic-bezier(.34, 1.4, .64, 1);
}
.bierparty iframe { display: block; }
.bierparty-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: linear-gradient(90deg, color-mix(in srgb, var(--orange) 22%, transparent), transparent);
}
.bierparty-close {
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.bierparty-close:hover { color: var(--ink); background: var(--fill); }
@keyframes bierparty-in {
  from { transform: translateY(24px) scale(.9); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.bierparty-wiggle {
  animation: bierparty-prost .6s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes bierparty-prost {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-11deg) translateY(-1px); }
  75%      { transform: rotate(11deg) translateY(-1px); }
}

/* ---------- motion & feedback (app-wide) ----------
   Press, ripple, loading and page-entry feedback. Everything non-essential
   sits under prefers-reduced-motion: no-preference; the reduce block at the
   end kills the rest. Ripple spans are added by app.js `buttonRipple`. */
.btn, .l-btn { position: relative; overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; }
.btn-primary { transition: transform .12s ease, background .1s ease, filter .1s ease, box-shadow .18s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--accent-fill) 70%, transparent), 0 1px 2px rgba(0, 0, 0, .18); }
.btn-primary:active { transform: translateY(0) scale(.98); box-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.btn-ghost:active, .btn-danger:active { transform: scale(.97); }
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: -1;
  width: var(--d); height: var(--d); left: var(--x); top: var(--y);
  margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  background: currentColor; opacity: .16; transform: scale(0);
  animation: ripple .55s cubic-bezier(.2, .7, .3, 1) forwards;
}
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* htmx in flight: the submit button shows a spinner and stops taking clicks */
form.htmx-request .btn[type="submit"], .btn.htmx-request { pointer-events: none; opacity: .82; }
form.htmx-request .btn[type="submit"]::before, .btn.htmx-request::before {
  content: ""; display: inline-block; width: .8em; height: .8em; margin-right: .5em; vertical-align: -0.1em;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}

/* page entry: content settles in on every full load */
@media (prefers-reduced-motion: no-preference) {
  .content { animation: page-in .32s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes page-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
  .side-units a { transition: background .12s ease, transform .15s ease, color .12s ease; }
  .side-units a:hover { transform: translateX(2px); }
  .tab { transition: background .18s ease, color .18s ease, transform .12s ease; }
  .tab:active { transform: scale(.97); }
  .job-banner { animation: fadein .28s ease-out; }
}
@media (prefers-reduced-motion: reduce) {
  .ripple { display: none; }
  .btn-primary:hover, .btn-primary:active, .btn-ghost:active, .btn-danger:active { transform: none; }
}

/* ---------- site tour (app.js `siteTour`) ----------
   Spotlight over a dashboard element (the box-shadow on .tour-spot dims the
   rest of the page) plus a card with Back / Next / Skip. Built on the app
   tokens, so it follows the dashboard's light and dark palettes. */
.tour { position: fixed; inset: 0; z-index: 60; opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.tour.is-open { opacity: 1; pointer-events: auto; }
.tour.is-closing { opacity: 0; pointer-events: none; }
.tour-backdrop { position: absolute; inset: 0; }
.tour-spot {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .62), 0 0 0 2px var(--accent-fill), 0 0 40px -6px color-mix(in srgb, var(--accent-fill) 60%, transparent);
  transition: left .4s cubic-bezier(.2, .7, .2, 1), top .4s cubic-bezier(.2, .7, .2, 1), width .4s cubic-bezier(.2, .7, .2, 1), height .4s cubic-bezier(.2, .7, .2, 1), opacity .25s ease;
}
.tour-card {
  position: fixed; width: 360px; max-width: calc(100vw - 32px); padding: 1.15rem 1.25rem 1rem;
  background: var(--bg-elevated); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 14px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
  transition: left .35s cubic-bezier(.2, .7, .2, 1), top .35s cubic-bezier(.2, .7, .2, 1);
}
.tour-card.is-centered { left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* "How it works" steps: the landing walkthrough window (partials/_landing_demo.html, included
   by home.html with demo_static) sits in a black band across the top of a wide card and one
   scene at a time gets .is-active. */
.tour-card-wide { width: 900px; max-height: calc(100vh - 32px); overflow: auto; }
.tour-stage { margin: -1.15rem -1.25rem 1rem; padding: 1rem 1rem 0; background: #0a0a0a; border-radius: 14px 14px 0 0; }
.tour-stage .demo::before { display: none; }
.tour-stage .demo-window { border-radius: 12px 12px 0 0; border-bottom: none; box-shadow: none; }
.tour-stage .demo-body { min-height: 400px; }
@media (max-width: 720px) {
  .tour-stage .demo-side { display: none; }
  .tour-stage .demo-body { grid-template-columns: 1fr; min-height: 400px; }
}
.tour-card-in { animation: tour-in .35s cubic-bezier(.2, .7, .2, 1); }
@keyframes tour-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.tour-count { margin: 0 0 .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.tour-title { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; border: none; padding: 0; }
.tour-body { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink-secondary); }
.tour-actions { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: 1rem; }
.tour-skip { font-size: .82rem; color: var(--muted); }
.tour-skip:hover { color: var(--ink); text-decoration: none; }
.tour-nav { display: inline-flex; gap: .4rem; }
.tour [hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { .tour, .tour-spot, .tour-card { transition: none; } .tour-card-in { animation: none; } }

/* ---------- Landing page (anonymous /): black, white, amber ---------- */
body:has(.landing) { background: #0a0a0a; color-scheme: dark; }
.content-solo:has(.landing) { display: block; place-items: unset; background: #0a0a0a; min-height: 100vh; padding: 0; }
.landing {
  --l-bg: #0a0a0a;
  --l-ink: #f5f5f3;
  --l-ink-2: rgba(245, 245, 243, .62);
  --l-line: rgba(255, 255, 255, .12);
  --l-amber: #f5a524;
  --l-amber-text: #f5a524;
  --l-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --logo-tile: #1c1c1e;
  --accent: var(--l-amber);
  color: var(--l-ink); background: var(--l-bg);
  max-width: none; margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased;
}
.landing a { color: inherit; }
.landing .brand-name { color: var(--l-ink); }
.landing .brand-sub { color: var(--l-ink-2); }
.landing .btn-primary { color: #0a0a0a; }
.landing-wrap { width: calc(100% - 6rem); margin: 0 auto; }

/* nav */
.landing-nav {
  position: sticky; top: 0; z-index: 5;
  background: rgba(10, 10, 10, .78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--l-line);
}
.landing-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 0; }
.landing-nav-links { display: flex; align-items: center; gap: 1.6rem; font-size: .92rem; color: var(--l-ink-2); }
.landing-nav-links a:hover { color: var(--l-ink); text-decoration: none; }
.landing-nav-signin { color: var(--l-ink); }

/* buttons */
.l-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .9rem 1.5rem; border-radius: 10px; border: 1px solid transparent;
  background: var(--l-amber); color: #0a0a0a; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; line-height: 1.2;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.l-btn:hover { background: #ffb845; color: #0a0a0a; text-decoration: none; transform: translateY(-1px); }
.l-btn-ghost { background: transparent; color: var(--l-ink); border-color: var(--l-line); }
.l-btn-ghost:hover { background: transparent; color: var(--l-ink); border-color: var(--l-ink); }
.l-btn-sm { padding: .5rem .95rem; font-size: .88rem; border-radius: 8px; }
.l-btn-block { width: 100%; }
.l-btn.is-disabled { opacity: .45; pointer-events: none; }
.l-btn:focus-visible { outline: 2px solid var(--l-amber); outline-offset: 3px; }

/* type */
.landing-eyebrow {
  margin: 0 0 1.1rem; font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--l-amber-text);
}
.landing h1, .landing h2, .landing h3 { border: none; padding: 0; color: var(--l-ink); }
.landing-hero { padding: 6.5rem 0 4.5rem; }
.landing-hero h1 {
  margin: 0; max-width: 15ch; display: block;
  font-size: clamp(2.9rem, 7.4vw, 5.8rem); font-weight: 700; letter-spacing: -0.045em; line-height: .98;
}
.landing-hero h1 em { font-style: normal; color: var(--l-amber); }
.landing-hero-row {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 3rem; align-items: end;
  margin-top: 3rem; padding-top: 2.2rem; border-top: 1px solid var(--l-line);
}
.landing-lede { margin: 0; max-width: 40rem; font-size: 1.12rem; line-height: 1.6; color: var(--l-ink-2); }
.landing-cta { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; justify-self: end; }
/* the Get Sendy button reads short now that the price is off it: give it room */
.landing-cta .l-btn:not(.l-btn-ghost) { min-width: 14rem; padding-left: 2.2rem; padding-right: 2.2rem; }
.landing-fineprint { flex-basis: 100%; margin: .4rem 0 0; font-size: .78rem; color: var(--l-ink-2); }
/* "Secure checkout by [Stripe]": the wordmark sits inline, sized to the text */
.stripe-line { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35em; }
.renewal-terms { margin: .7rem 0 0; font-size: .82rem; line-height: 1.5; max-width: 46rem; }
/* Usage limits (services/usage.py windows): meters on Billing, a pill in the sidebar. */
.usage-head { margin: 1.6rem 0 .3rem; font-size: 1.05rem; }
.field-optional { font-weight: 400; color: var(--muted); }
/* Referral card on Billing (services/referrals.py) */
.refer-card { margin-top: .6rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elevated); }
.refer-code-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.refer-code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .08em; padding: .3rem .7rem; border-radius: 8px; background: var(--accent-soft); color: var(--accent); user-select: all; }
.refer-link { margin: .5rem 0 0; font-size: .8rem; word-break: break-all; }
.refer-list { list-style: none; margin: .8rem 0 0; padding: .6rem 0 0; border-top: 1px solid var(--line); display: grid; gap: .35rem; font-size: .9rem; }
.refer-list li { display: flex; justify-content: space-between; gap: .8rem; }
.refer-status { font-size: .78rem; padding: .12rem .55rem; border-radius: 999px; background: var(--fill); color: var(--muted); }
.refer-status.is-subscribed { background: var(--warn-soft); color: var(--warn); }
.refer-status.is-paid { background: var(--ok-soft); color: var(--ok); }
.refer-empty { margin: .7rem 0 0; font-size: .85rem; }
/* Referral tracker (staff, referrals.html) */
.form-card-wide { max-width: 64rem; }
.tracker-totals { list-style: none; display: flex; flex-wrap: wrap; gap: .8rem; margin: 1rem 0 0; padding: 0; }
.tracker-totals li { display: grid; gap: .1rem; min-width: 7.5rem; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elevated); }
.tracker-totals strong { font-size: 1.3rem; letter-spacing: -.01em; }
.tracker-totals span { font-size: .78rem; color: var(--muted); }
.tracker-totals .is-owed strong { color: var(--warn); }
.tracker-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tracker-table th, .tracker-table td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.tracker-table th { font-size: .74rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.tracker-sub { display: block; font-size: .78rem; }
.usage-meters { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .5rem; }
.usage-meter { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr 3.2rem; grid-template-areas: "label bar pct" "frees frees frees"; align-items: center; gap: .15rem .7rem; font-size: .9rem; }
.usage-label { grid-area: label; }
.usage-bar { grid-area: bar; display: block; height: 8px; border-radius: 999px; background: var(--fill); overflow: hidden; }
.usage-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.usage-meter.is-warn .usage-fill { background: var(--warn); }
.usage-meter.is-full .usage-fill { background: var(--fail); }
.usage-pct { grid-area: pct; text-align: right; font-variant-numeric: tabular-nums; }
.usage-frees { grid-area: frees; font-size: .78rem; }
.side-usage.is-warn { color: var(--warn); }
.side-usage.is-full { color: var(--fail); }
.side-profile-meta .side-usage.is-warn:hover, .side-profile-meta .side-usage.is-full:hover { color: inherit; }
.usage-note { background: var(--warn-soft); color: var(--warn); }
.regen-confirm { flex-wrap: wrap; }
.regen-confirm-form { display: inline-flex; gap: .4rem; margin-left: auto; }
.stripe-mark { height: 1.5em; width: auto; display: inline-block; vertical-align: -0.2em; }

/* supported inputs */
.landing-types { border-top: 1px solid var(--l-line); padding: 2.6rem 0 3.2rem; }
.landing-types .landing-eyebrow { margin-bottom: 1.2rem; }
.landing-types-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
  background: var(--l-line); border: 1px solid var(--l-line); border-radius: 14px; overflow: hidden;
}
.landing-types-grid li {
  display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1.4rem .5rem 1.2rem;
  background: var(--l-bg); text-align: center; transition: background .2s ease;
}
.landing-types-grid li:hover { background: #111113; }
.landing-types-grid svg {
  width: 36px; height: 36px; margin-bottom: .55rem; fill: currentColor; color: var(--l-ink);
  transition: color .2s ease;
}
.landing-types-grid li:hover svg { color: var(--b, var(--l-ink)); }
.landing-types-grid svg .ink { stroke: var(--l-bg); }
.landing-types-grid svg .ink-text { fill: var(--l-bg); }
.landing-types-grid li:hover svg .ink { stroke: #fff; }
.landing-types-grid li:hover svg .ink-text { fill: #fff; }
.landing-type-more { grid-column: span 2; justify-content: center; gap: .35rem; }
.landing-type-more-label { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--l-amber-text); }
.landing-type-more-sub { font-size: .8rem; color: var(--l-ink-2); }
.landing-trio li { padding-top: 1.8rem; }
.landing-type-name { font-size: .95rem; font-weight: 600; letter-spacing: -0.01em; }
.landing-type-ext { font-size: .78rem; color: var(--l-ink-2); }

/* sections */
.landing-section { padding: 5.5rem 0; }
.landing-section-head { max-width: 44rem; }
.landing-section h2 {
  margin: 0; font-size: clamp(2rem, 4.2vw, 3.3rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.02;
}
.landing-section-lede { margin: 1.4rem 0 0; max-width: 36rem; font-size: 1.05rem; line-height: 1.6; color: var(--l-ink-2); }
.landing-paper {
  background: #f5f5f3;
  --l-ink: #0a0a0a;
  --l-ink-2: rgba(10, 10, 10, .6);
  --l-line: rgba(10, 10, 10, .14);
  --l-amber-text: #b8700a;
  color: var(--l-ink);
}

/* feature grid */
.landing-list {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.6rem 2.5rem;
}
.landing-list li::before { content: ""; display: block; width: 28px; height: 3px; border-radius: 2px; background: var(--l-amber); margin-bottom: 1rem; }
.landing-list h3 { margin: 0 0 .4rem; font-size: 1.2rem; font-weight: 650; letter-spacing: -0.02em; }
.landing-list p { margin: 0; font-size: .98rem; line-height: 1.55; color: var(--l-ink-2); }

/* subject areas ("Where Sendy is strongest", landing.html #subjects): a four-up
   hairline grid of fields, then the honest "where it is weaker" list */
.landing-fields-section { border-top: 1px solid var(--l-line); }
.landing-fields {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2.4rem; border-top: 1px solid var(--l-line);
}
.landing-fields li { padding: 1.8rem 0 2rem; border-bottom: 1px solid var(--l-line); }
.landing-field-icon { display: block; width: 26px; height: 26px; margin-bottom: .9rem; color: var(--l-amber); }
.landing-fields h3 { margin: 0 0 .55rem; font-size: 1.08rem; font-weight: 650; letter-spacing: -0.02em; }
.landing-fields p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--l-ink-2); }
.landing-honest { margin-top: 3.2rem; max-width: 52rem; }
.landing-honest .landing-eyebrow { margin-bottom: .9rem; }
.landing-honest-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--l-line); }
.landing-honest-list li { padding: .9rem 0; border-bottom: 1px solid var(--l-line); font-size: .95rem; line-height: 1.55; color: var(--l-ink-2); }
.landing-honest-list strong { color: var(--l-ink); font-weight: 600; }
.landing-paper .landing-field-icon { color: var(--l-amber-text); }
.landing-paper.landing-fields-section { border-top: 0; }

/* "One place. Every study format." (2026-10-20): six formats in one compact row on dark */
.landing-list-compact { grid-template-columns: repeat(6, 1fr); gap: 2rem 1.8rem; margin-top: 2.6rem; }
.landing-list-compact li::before { margin-bottom: .8rem; }
.landing-list-compact h3 { font-size: 1.08rem; margin-bottom: .25rem; }
.landing-list-compact p { font-size: .92rem; }
@media (max-width: 1000px) { .landing-list-compact { grid-template-columns: repeat(3, 1fr); } }

/* the flow loop on the landing page, and /how-it-works/ (how_it_works.html) */
.landing-flow-section .landing-demo-head { margin-bottom: 2.2rem; }
.flow-more { margin: 1.3rem 0 0; font-size: .95rem; }
.flow-more a { color: var(--l-ink-2); text-decoration: underline; text-underline-offset: 3px; }
.flow-more a:hover { color: var(--l-amber); }
.flow-more a::after { content: " \2192"; }
.landing-demo-page { padding-top: 4rem; }
.landing-demo-page h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.035em; line-height: 1.08; }
.how-cta { margin-top: 2.4rem; justify-self: start; }

/* steps */
.landing-how { border-top: 1px solid var(--l-line); padding-top: 4rem; }
.landing-steps {
  list-style: none; margin: 3.2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--l-line);
}
.landing-steps li { padding: 2.2rem 2rem 2.4rem 0; border-right: 1px solid var(--l-line); }
.landing-steps li + li { padding-left: 2rem; }
.landing-steps li:last-child { border-right: none; padding-right: 0; }
.landing-step-num { display: block; margin-bottom: 1.4rem; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--l-amber-text); }
.landing-steps h3 { margin: 0 0 .45rem; font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em; }
.landing-steps p { margin: 0; font-size: .95rem; line-height: 1.55; color: var(--l-ink-2); }

/* pricing */
.landing-pricing-section { padding-top: 2rem; }
.landing-pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.landing-pricing-card {
  border: 1px solid var(--l-line); border-radius: 16px; padding: 2.2rem;
  background: rgba(255, 255, 255, .03);
}
.landing-price { margin: 0 0 1.4rem; font-size: clamp(2.2rem, 4.6vw, 3.2rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.landing-pricing-list { list-style: none; padding: 0; margin: 0 0 1.8rem; border-top: 1px solid var(--l-line); }
.landing-pricing-list li { display: flex; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid var(--l-line); font-size: .97rem; }
.landing-pricing-list li::before { content: "+"; font-weight: 600; color: var(--l-amber-text); }
.landing-pricing-card .landing-fineprint { margin-top: 1rem; }

/* footer */
.landing-footer { border-top: 1px solid var(--l-line); }
.landing-footer-inner {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding: 2rem 0 3rem;
  font-size: .85rem; color: var(--l-ink-2);
}
.landing-footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; }
.landing-footer a:hover { color: var(--l-ink); text-decoration: none; }

/* landing motion: hero entrance, drifting glow, nav, scroll reveals, button sheen.
   Reveal classes are toggled by app.js `landingMotion`; without JS (or under
   reduced motion) everything is simply visible. */
@media (prefers-reduced-motion: no-preference) {
  .l-rise { animation: l-rise .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * .13s + .05s); }
  @keyframes l-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  .landing-hero { position: relative; overflow: hidden; }
  .landing-hero::before {
    content: ""; position: absolute; z-index: 0; pointer-events: none;
    width: 70vw; height: 70vw; max-width: 980px; max-height: 980px;
    right: -22vw; top: -34vw; border-radius: 50%;
    background: radial-gradient(circle at center, rgba(245, 165, 36, .17), rgba(245, 165, 36, .05) 38%, transparent 62%);
    animation: hero-drift 22s ease-in-out infinite alternate;
  }
  .landing-hero .landing-wrap { position: relative; z-index: 1; }
  @keyframes hero-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8vw, 6vw) scale(1.12); } }
  .js .reveal, .js .reveal-stagger > * {
    opacity: 0; transform: translateY(16px);
    transition: opacity .45s cubic-bezier(.2, .7, .2, 1), transform .45s cubic-bezier(.2, .7, .2, 1);
  }
  .js .reveal-stagger > * { transition-delay: calc(min(var(--i, 0), 8) * 40ms); }
  .js .reveal.in, .js .reveal-stagger.in > * { opacity: 1; transform: none; }
  .landing-nav { transition: padding .2s ease, background .2s ease, border-color .2s ease; }
  .landing-nav-inner { transition: padding .25s ease; }
  .landing-nav.is-scrolled { background: rgba(10, 10, 10, .9); border-bottom-color: rgba(255, 255, 255, .18); }
  .landing-nav.is-scrolled .landing-nav-inner { padding: .6rem 0; }
  .l-btn::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .42) 50%, transparent 68%);
    transform: translateX(-130%); transition: transform .05s;
  }
  .l-btn:hover::after { transform: translateX(130%); transition: transform .65s cubic-bezier(.2, .7, .2, 1); }
  .l-btn-ghost::after { background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .12) 50%, transparent 68%); }
  .l-btn:not(.l-btn-ghost):hover { box-shadow: 0 10px 28px -8px rgba(245, 165, 36, .6); }
  .l-btn:active { transform: translateY(0) scale(.98); transition-duration: .06s; }
  .landing-types-grid li { transition: background .2s ease, transform .2s ease; }
  .landing-types-grid li:hover { transform: translateY(-2px); }
  .landing-types-grid svg { transition: color .2s ease, transform .25s cubic-bezier(.2, .7, .2, 1); }
  .landing-types-grid li:hover svg { transform: scale(1.12); }
  .landing-pricing-card { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
  .landing-pricing-card:hover { border-color: rgba(245, 165, 36, .55); box-shadow: 0 30px 80px -30px rgba(245, 165, 36, .35); transform: translateY(-2px); }
  .landing-list li::before { transform-origin: left; transition: transform .3s ease; }
  .landing-list li:hover::before { transform: scaleX(1.6); }
}

/* ---- product walkthrough (.demo, partials/_landing_demo.html) ----
   A faux app window, drawn in the app's light theme so it stands off the black
   page (white window, 2026-09-27). Scenes stack in .demo-main; app.js gives one
   .is-active at a time and the CSS below plays each scene's choreography from
   that class. Every element's resting state is its *final* state, so with no
   animation (reduced motion) a scene still reads as finished. Above the window
   .demo-narr says what the step does in one sentence; .demo-cursor is a fake
   pointer parked inside whatever gets clicked, so it always lands on target
   regardless of layout (--at = when it starts, the click lands .9s later). */
.landing-demo { padding: 1.5rem 0 5.5rem; }
.landing-demo .landing-wrap { max-width: 1160px; }
.landing-demo-head { margin-bottom: 2rem; }
.demo {
  position: relative; font-size: 14px; line-height: 1.45;
  --d-bg: #ffffff; --d-side: #f4f4f1; --d-chrome: #ebebe8; --d-el: #f5f5f2; --d-line: rgba(10, 10, 10, .1);
  --d-ink: #111111; --d-ink2: rgba(17, 17, 17, .66); --d-mute: rgba(17, 17, 17, .45);
  --d-amber: #f5a524; --d-amber-text: #b8700a; --d-ok: #1d8a3d; --d-ok-line: rgba(52, 199, 89, .55); --d-ok-bg: rgba(52, 199, 89, .1);
}
.demo::before {
  content: ""; position: absolute; inset: -10% -6% auto; height: 80%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 40%, rgba(245, 165, 36, .16), rgba(245, 165, 36, .04) 45%, transparent 68%);
}

/* narration above the window + pause button */
.demo-top { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; margin-bottom: 1.1rem; }
.demo-narr { list-style: none; margin: 0; padding: 0; display: grid; flex: 1; min-width: 0; }
.demo-narr li {
  grid-area: 1 / 1; display: flex; flex-direction: column; gap: .3rem; min-width: 0;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s;
}
.demo-narr li.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .35s ease .1s, transform .35s ease .1s, visibility 0s; }
.demo-narr b { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--l-amber-text); }
.demo-narr span { font-size: 1.3rem; line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; color: var(--l-ink); max-width: 46rem; }
.demo-play {
  flex: none; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; color: var(--l-ink);
  background: transparent; border: 1px solid var(--l-line); border-radius: 999px; padding: .45rem 1rem;
  transition: border-color .2s ease, background .2s ease;
}
.demo-play:hover, .demo-play:focus-visible { border-color: var(--l-ink); outline: none; }
.demo-play[aria-pressed="true"] { background: var(--l-amber); border-color: var(--l-amber); color: #0a0a0a; }

.demo-window {
  position: relative; z-index: 1; border-radius: 16px; overflow: hidden;
  background: var(--d-bg); color: var(--d-ink);
  box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .18);
}
.demo-chrome { display: flex; align-items: center; gap: 1rem; padding: .6rem .9rem; border-bottom: 1px solid var(--d-line); background: var(--d-chrome); }
.demo-dots { display: inline-flex; gap: 6px; }
.demo-dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(0, 0, 0, .14); }
.demo-dots i:nth-child(1) { background: #ff5f57; }
.demo-dots i:nth-child(2) { background: #febc2e; }
.demo-dots i:nth-child(3) { background: #28c840; }
.demo-url { flex: 1; text-align: center; font-size: 12px; color: var(--d-mute); padding: .3rem 1rem; border-radius: 6px; background: rgba(255, 255, 255, .7); margin-right: 3.2rem; }
.demo-body { display: grid; grid-template-columns: 200px 1fr; min-height: 470px; }

/* faux sidebar */
.demo-side { border-right: 1px solid var(--d-line); padding: 1rem .85rem; font-size: 12.5px; background: var(--d-side); display: flex; flex-direction: column; gap: .35rem; }
.demo-brand { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 14.5px; letter-spacing: -0.02em; margin-bottom: .55rem; }
.demo-brand svg, .demo-brand .logo { width: 22px; height: 22px; }
.demo-ask { padding: .4rem .6rem; border-radius: 7px; border: 1px solid var(--d-line); background: var(--d-bg); font-weight: 600; color: var(--d-ink2); transition: background .3s ease, color .3s ease, border-color .3s ease; }
.demo.at-ask .demo-ask { background: rgba(245, 165, 36, .18); color: var(--d-amber-text); border-color: transparent; }
.demo-side-label { margin: .7rem .2rem .25rem; font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d-mute); }
.demo-course { display: flex; flex-direction: column; margin-bottom: .35rem; }
.demo-course span { padding: .22rem .5rem .22rem .85rem; color: var(--d-ink2); border-radius: 6px; position: relative; transition: background .3s ease, color .3s ease; }
.demo-course-title { font-weight: 600; color: var(--d-ink) !important; padding-left: .5rem !important; }
.demo-course-title::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--c); margin-right: .45rem; vertical-align: 1px; }
/* the current unit: a soft tint of the class colour with an inset bar, like the real sidebar */
.demo-course span.on { background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--d-ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--c); border-radius: 0 6px 6px 0; }
.demo.at-ask .demo-course span.on { background: transparent; color: var(--d-ink2); font-weight: 500; box-shadow: none; }
.demo.at-ask .demo-course-title { color: var(--d-amber-text) !important; }

/* scenes */
.demo-main { position: relative; overflow: hidden; }
.demo-scene {
  position: absolute; inset: 0; padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: .85rem;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.demo-scene.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .3s ease, transform .3s ease, visibility 0s; }
.demo-head { display: flex; align-items: baseline; gap: .6rem; }
.demo-h1 { font-size: 20px; font-weight: 700; letter-spacing: -0.03em; }
.demo-h1-sub { font-size: 12.5px; color: var(--d-mute); }
.demo-tabs { display: inline-flex; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 8px; background: rgba(0, 0, 0, .06); font-size: 12px; font-weight: 600; color: var(--d-ink2); }
.demo-tabs span { padding: .3rem .65rem; border-radius: 6px; white-space: nowrap; }
.demo-tabs span.on { background: var(--d-bg); color: var(--d-ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); }
.demo-tabs-tight { margin-bottom: -.2rem; }
.demo-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: .45rem .9rem; border-radius: 7px; background: var(--d-amber); color: #0a0a0a; font-weight: 600; font-size: 12.5px; white-space: nowrap; }

/* shared choreography */
.demo-swap { display: inline-grid; }
.demo-swap > * { grid-area: 1 / 1; }
.demo-swap > .a { opacity: 0; }
.demo-swap > .b { opacity: 1; }
.is-active .demo-swap > .a { animation: demo-a var(--t, 2s) step-end both; }
.is-active .demo-swap > .b { animation: demo-b var(--t, 2s) step-end both; }
@keyframes demo-a { from { opacity: 1; } to { opacity: 0; } }
@keyframes demo-b { from { opacity: 0; } to { opacity: 1; } }
@keyframes demo-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes demo-pop { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@keyframes demo-press { 0%, 100% { transform: none; filter: none; } 50% { transform: scale(.93); filter: brightness(.85); } }
@keyframes demo-spin { to { transform: rotate(360deg); } }
/* a press lands .9s after its cursor sets off (--at), see .demo-cursor */
.is-active .demo-press { animation: demo-press .3s ease both; animation-delay: calc(var(--at, 0s) + .9s); }
/* the pointer: tip at the top-left of the glyph, parked where the click lands;
   it glides in from --fx/--fy, dips on the click, then fades */
.demo-cursor {
  position: absolute; left: 56%; top: 46%; width: 22px; height: 26px; z-index: 6; pointer-events: none; opacity: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 26'%3E%3Cpath d='M3 2 L3 20 L7.6 15.6 L10.8 23.4 L14 22 L10.8 14.4 L17.2 14.4 Z' fill='%23111' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35));
}
.is-active .demo-cursor { animation: demo-cursor 1.3s cubic-bezier(.3, .7, .2, 1) var(--at, 0s) both; }
@keyframes demo-cursor {
  0% { opacity: 0; transform: translate(var(--fx, 120px), var(--fy, 90px)); }
  12% { opacity: 1; }
  62% { transform: translate(0, 0); }
  70% { transform: scale(.8); }
  78% { transform: scale(1); }
  88% { opacity: 1; }
  100% { opacity: 0; transform: translate(0, 0); }
}

/* 1 upload */
.demo-dropzone { position: relative; border: 1.5px dashed rgba(10, 10, 10, .22); border-radius: 12px; padding: 1.2rem; text-align: center; color: var(--d-mute); font-size: 13px; overflow: hidden; background: var(--d-el); }
.demo-drop-file { position: absolute; left: 50%; top: 50%; padding: .38rem .75rem; border-radius: 7px; background: var(--d-bg); border: 1px solid var(--d-line); color: var(--d-ink); font-size: 12.5px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); opacity: 0; transform: translate(-50%, -50%); }
.is-active .demo-drop-file { animation: demo-drop 2.2s cubic-bezier(.3, .8, .3, 1) .1s both; }
@keyframes demo-drop {
  0% { opacity: 0; transform: translate(40%, -180%) rotate(6deg); }
  20% { opacity: 1; }
  45% { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
  58% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
}
.is-active .demo-dropzone { animation: demo-glow 2.2s ease .1s both; }
@keyframes demo-glow { 0%, 100% { border-color: rgba(10, 10, 10, .22); background: var(--d-el); } 30%, 50% { border-color: var(--d-amber); background: rgba(245, 165, 36, .1); } }
.demo-rows { display: flex; flex-direction: column; }
.demo-row { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--d-line); font-size: 13px; }
.is-active .demo-row { animation: demo-in .35s ease both; animation-delay: calc(var(--i) * .3s + .1s); }
.demo-kind { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .14rem .42rem; border-radius: 5px; background: rgba(0, 0, 0, .07); color: var(--d-ink2); }
.demo-row-title { flex: 1; color: var(--d-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-pill { font-size: 11px; font-weight: 600; padding: .16rem .5rem; border-radius: 6px; border: 1px solid; white-space: nowrap; }
.demo-pill.wait { color: var(--d-ink2); border-color: rgba(10, 10, 10, .2); }
.demo-pill.ok { color: var(--d-ok); border-color: var(--d-ok-line); background: var(--d-ok-bg); }

/* 2 generate */
.demo-gen { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .95rem 1.05rem; border-radius: 12px; border: 1px solid var(--d-line); background: var(--d-el); box-shadow: inset 0 3px 0 var(--d-amber); }
.demo-gen-copy { display: flex; flex-direction: column; gap: .15rem; font-size: 13px; color: var(--d-ink2); }
.demo-gen-copy strong { color: var(--d-ink); font-size: 14px; }
.demo-job { display: flex; align-items: center; gap: .6rem; padding: .65rem .9rem; border-radius: 10px; border: 1px solid var(--d-line); background: var(--d-el); font-size: 13px; color: var(--d-ink2); }
.demo-job strong { color: var(--d-ink); }
.demo-job:not(.demo-job-done) { display: none; }
.is-active .demo-job:not(.demo-job-done) { display: flex; animation: demo-job-life var(--t) step-end 1s both; }
@keyframes demo-job-life { 0% { opacity: 1; } 100% { opacity: 0; display: none; } }
.demo-job-done { color: var(--d-ok); border-color: var(--d-ok-line); background: var(--d-ok-bg); font-weight: 600; margin-top: -.2rem; }
.is-active .demo-job-done { animation: demo-pop .35s ease calc(var(--t) + 1s) both; }
.demo-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--d-amber); border-right-color: transparent; }
.is-active .demo-spinner { animation: demo-spin .7s linear infinite; }
.demo-job-steps { display: inline-grid; }
.demo-job-steps span { grid-area: 1 / 1; opacity: 0; }
/* each message is invisible until its slot, shown for one slot (step-end holds
   the `from` value), then hidden again by `forwards`; the last one stays */
.is-active .demo-job-steps span { animation: demo-step .6s step-end forwards; animation-delay: calc(var(--i) * .6s + 1s); }
.is-active .demo-job-steps span:last-child { animation-name: demo-step-last; }
@keyframes demo-step { from { opacity: 1; } to { opacity: 0; } }
@keyframes demo-step-last { from { opacity: 1; } to { opacity: 1; } }

/* 3 notes */
.demo-notes-layout { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 1.3rem; align-items: start; }
.demo-notes { position: relative; display: flex; flex-direction: column; gap: .6rem; font-size: 13.5px; color: var(--d-ink2); }
.demo-notes h4 { margin: 0 0 .1rem; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; color: var(--d-ink); border: none; padding: 0; }
.demo-notes p { margin: 0; }
.demo-math { font-family: "Times New Roman", Times, serif; font-size: 15px; color: var(--d-ink); text-align: center; padding: .35rem 0; }
.demo-recall { padding: .6rem .8rem; border-radius: 9px; border: 1px solid rgba(245, 165, 36, .5); background: rgba(245, 165, 36, .1); color: var(--d-ink); }
.demo-recall strong { color: var(--d-amber-text); margin-right: .4rem; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.is-active .demo-notes > * { animation: demo-in .4s ease both; animation-delay: calc(var(--i) * .22s + .05s); }
/* highlight-to-ask: the mark sweeps as a selection, a pill pops under it, the
   margin composer types the question, then Sendy's card takes its place and the
   mark settles into the persistent anchor style (the resting state). */
.demo-sel {
  position: relative; color: inherit; border-radius: 2px; padding: 0 .1em; margin: 0 -.1em;
  background-color: rgba(255, 159, 10, .22); border-bottom: 2px solid #ff9f0a;
  background-image: linear-gradient(rgba(255, 204, 0, .45), rgba(255, 204, 0, .45));
  background-repeat: no-repeat; background-size: 0% 100%;
}
.is-active .demo-sel { animation: demo-select 3.9s linear both; }
@keyframes demo-select {
  0%, 22% { background-size: 0% 100%; background-color: transparent; border-bottom-color: transparent; }
  38%, 99.9% { background-size: 100% 100%; background-color: transparent; border-bottom-color: transparent; }
  100% { background-size: 0% 100%; background-color: rgba(255, 159, 10, .22); border-bottom-color: #ff9f0a; }
}
.demo-fab {
  position: absolute; left: 0; top: calc(100% + 5px); z-index: 3; white-space: nowrap;
  padding: .32rem .75rem; border-radius: 999px; background: var(--d-amber); color: #0a0a0a;
  font-size: 11.5px; font-weight: 600; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .4);
  opacity: 0; transform: scale(.9); pointer-events: none;
}
.is-active .demo-fab { animation: demo-fab 2.8s ease both; }
@keyframes demo-fab {
  0%, 57% { opacity: 0; transform: scale(.9) translateY(4px); }
  62%, 82% { opacity: 1; transform: none; }
  87% { opacity: 1; transform: scale(.92); filter: brightness(.85); }
  91% { opacity: 1; transform: none; filter: none; }
  100% { opacity: 0; transform: none; }
}
.demo-margin { display: grid; padding-top: 2.4rem; min-width: 0; }
.demo-margin > * { grid-area: 1 / 1; min-width: 0; max-width: 100%; }
.demo-composer, .demo-ann {
  position: relative; display: flex; flex-direction: column; gap: .4rem; padding: .7rem .8rem;
  border-radius: 10px; border: 1px solid var(--d-line); background: var(--d-bg); font-size: 12px;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .28);
}
.demo-composer { border-color: var(--d-amber); opacity: 0; visibility: hidden; }
.is-active .demo-composer { animation: demo-composer 4.2s step-end both; }
@keyframes demo-composer {
  0% { opacity: 0; visibility: hidden; }
  64% { opacity: 1; visibility: visible; }
  93%, 100% { opacity: 0; visibility: hidden; }
}
.demo-composer-quote { font-style: italic; color: var(--d-ink2); }
.demo-composer-input { display: block; width: 100%; min-width: 0; box-sizing: border-box; padding: .38rem .5rem; border-radius: 6px; border: 1px solid var(--d-line); background: var(--d-el); min-height: 1.6em; color: var(--d-ink); overflow: hidden; white-space: nowrap; }
.demo-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; width: max-content; max-width: 100%; }
.is-active .demo-type { animation: demo-type .8s steps(23) 2.85s both; }
@keyframes demo-type { from { max-width: 0; } to { max-width: 100%; } }
.demo-composer-ask { align-self: flex-end; padding: .32rem .75rem; font-size: 11.5px; }
.demo-ann::before { content: ""; position: absolute; left: -1.3rem; top: 1.1rem; width: 1.3rem; height: 1px; background: #ff9f0a; }
.is-active .demo-ann { animation: demo-pop .4s ease 3.9s both; }
.demo-ann-head { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--d-amber-text); }
.demo-ann-x { color: var(--d-mute); letter-spacing: 0; }
.demo-ann-q { font-weight: 600; color: var(--d-ink); }
.demo-ann-a { color: var(--d-ink2); }

/* 4 flashcards */
.demo-fc { display: flex; flex-direction: column; gap: .75rem; max-width: 460px; width: 100%; margin: 1.6rem auto 0; }
.demo-fc-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--d-mute); }
.demo-fc-card { perspective: 1000px; height: 176px; }
.demo-fc-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateY(180deg); }
.is-active .demo-fc-inner { animation: demo-flip 3s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes demo-flip { 0%, 55% { transform: none; } 72%, 100% { transform: rotateY(180deg); } }
.demo-fc-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; display: grid; place-items: center; text-align: center; padding: 1.2rem 1.5rem; border-radius: 14px; border: 1px solid var(--d-line); background: var(--d-bg); font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--d-ink); box-shadow: 0 20px 44px -22px rgba(0, 0, 0, .4); }
.demo-fc-front { flex-direction: column; }
.demo-fc-hint { display: block; margin-top: .6rem; font-size: 11px; font-weight: 500; color: var(--d-mute); }
.demo-fc-back { transform: rotateY(180deg); background: rgba(245, 165, 36, .14); border-color: var(--d-amber); font-weight: 500; font-size: 14px; }
.demo-fc-controls { display: flex; justify-content: center; gap: .5rem; font-size: 12.5px; font-weight: 600; }
.demo-fc-controls > span:not(.demo-btn) { padding: .45rem .85rem; border-radius: 7px; background: rgba(0, 0, 0, .06); color: var(--d-ink2); }

/* 5 practice test: options settle in, the cursor picks one, Submit presses, the graded card pops */
.demo-test { display: flex; flex-direction: column; gap: .75rem; margin-top: .9rem; max-width: 580px; }
.demo-test-top { display: flex; justify-content: space-between; gap: 1rem; font-size: 12px; color: var(--d-mute); }
.demo-test-q { margin: 0; font-size: 15px; font-weight: 600; color: var(--d-ink); }
.demo-test-num { color: var(--d-mute); margin-right: .35rem; }
.demo-test-opts { display: grid; gap: .45rem; }
.demo-test-opt { position: relative; display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; border-radius: 9px; border: 1px solid var(--d-line); background: var(--d-el); color: var(--d-ink2); }
.demo-test-opt i { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(10, 10, 10, .3); background: var(--d-bg); }
.demo-test-opt.is-pick { border-color: var(--d-amber); background: rgba(245, 165, 36, .12); color: var(--d-ink); }
.demo-test-opt.is-pick i { border-color: var(--d-amber); box-shadow: inset 0 0 0 3.5px var(--d-amber); }
.is-active .demo-test-opt { animation: demo-in .35s ease both; animation-delay: calc(var(--i) * .18s + .1s); }
.is-active .demo-test-opt.is-pick { animation: demo-in .35s ease both, demo-pick 1.7s step-end both; animation-delay: calc(var(--i) * .18s + .1s), 0s; }
.is-active .demo-test-opt.is-pick i { animation: demo-pick-dot 1.7s step-end both; }
@keyframes demo-pick { 0%, 99% { border-color: var(--d-line); background: var(--d-el); color: var(--d-ink2); } }
@keyframes demo-pick-dot { 0%, 99% { border-color: rgba(10, 10, 10, .3); box-shadow: none; } }
.demo-test-opt .demo-cursor { left: 42%; top: 40%; }
.demo-test-foot { display: flex; align-items: center; gap: .8rem; font-size: 12px; color: var(--d-mute); }
.demo-test-result { display: flex; align-items: flex-start; gap: .9rem; padding: .75rem .9rem; border-radius: 10px; border: 1px solid var(--d-ok-line); background: var(--d-ok-bg); font-size: 13px; line-height: 1.45; color: var(--d-ink2); }
.demo-test-score { font-size: 21px; font-weight: 700; letter-spacing: -0.03em; color: var(--d-ok); white-space: nowrap; }
.demo-test-fb strong { color: var(--d-ink); }
.is-active .demo-test-result { animation: demo-pop .4s ease 3.2s both; }

/* 6 podcast: the slide is drawn as a dark video frame so it reads as the video */
.demo-pod { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1rem; align-items: stretch; margin-top: .9rem; }
.demo-slide { display: flex; flex-direction: column; gap: .35rem; padding: 1.05rem 1.15rem; border-radius: 12px; background: #0f0f11; color: #f5f5f3; min-height: 196px; }
.demo-slide-kicker { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--d-amber); }
.demo-slide-title { font-size: 19px; font-weight: 700; letter-spacing: -0.03em; margin-bottom: .35rem; }
.demo-slide ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; font-size: 13px; color: rgba(245, 245, 243, .8); }
.demo-slide li { padding-left: .9rem; position: relative; }
.demo-slide li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--d-amber); }
.is-active .demo-slide li { animation: demo-in .4s ease both; animation-delay: calc(var(--i) * .55s + .35s); }
.demo-player { display: flex; flex-direction: column; gap: .55rem; padding: .95rem 1.05rem; border-radius: 12px; border: 1px solid var(--d-line); background: var(--d-el); }
.demo-hosts { display: flex; gap: .4rem; font-size: 11.5px; font-weight: 600; }
.demo-hosts span { padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--d-line); background: var(--d-bg); color: var(--d-ink2); }
.demo-hosts .demo-host-live { border-color: var(--d-amber); color: var(--d-amber-text); background: rgba(245, 165, 36, .12); }
.demo-wave { display: flex; align-items: center; gap: 3px; height: 40px; }
.demo-wave i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px; background: var(--d-amber); opacity: .9; transform-origin: center; }
.is-active .demo-wave i { animation: demo-wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.13s); }
@keyframes demo-wave { from { transform: scaleY(.35); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
.demo-timeline { height: 4px; border-radius: 2px; background: rgba(10, 10, 10, .12); overflow: hidden; }
.demo-timeline i { display: block; height: 100%; width: 41%; background: var(--d-amber); }
.is-active .demo-timeline i { animation: demo-progress 4.6s linear both; }
@keyframes demo-progress { from { width: 38%; } to { width: 44%; } }
.demo-times { display: flex; justify-content: space-between; font-size: 11px; color: var(--d-mute); }
.demo-caption { margin: .1rem 0 0; font-size: 12.5px; color: var(--d-ink2); }
.demo-caption strong { color: var(--d-ink); }
.is-active .demo-caption { animation: demo-in .4s ease .9s both; }

/* 7 ask */
.demo-chat { display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.demo-msg { max-width: 82%; padding: .65rem .9rem; border-radius: 12px; font-size: 13px; line-height: 1.45; }
.demo-msg-user { align-self: flex-end; background: rgba(245, 165, 36, .16); color: var(--d-ink); border: 1px solid rgba(245, 165, 36, .35); border-bottom-right-radius: 4px; }
.demo-msg-sendy { align-self: flex-start; background: var(--d-el); border: 1px solid var(--d-line); color: var(--d-ink2); border-bottom-left-radius: 4px; }
.demo-msg-sendy strong { color: var(--d-ink); }
.is-active .demo-msg-user { animation: demo-pop .35s ease .15s both; }
.is-active .demo-msg-sendy { animation: demo-pop .35s ease .7s both; }
.demo-typing { display: inline-flex; gap: 4px; padding: .2rem 0; }
.demo-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--d-ink2); }
.is-active .demo-typing i { animation: demo-dot 1s ease-in-out infinite; }
.demo-typing i:nth-child(2) { animation-delay: .15s; }
.demo-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes demo-dot { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-3px); opacity: 1; } }
.demo-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.demo-chip { font-size: 11.5px; font-weight: 600; padding: .24rem .6rem; border-radius: 6px; border: 1px solid rgba(184, 112, 10, .45); color: var(--d-amber-text); background: var(--d-bg); }
.demo-chatbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem .35rem .35rem .9rem; border-radius: 10px; border: 1px solid var(--d-line); background: var(--d-el); color: var(--d-mute); font-size: 13px; }

/* step buttons under the window */
.demo-steps { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: .6rem; position: relative; z-index: 1; }
.demo-steps button {
  position: relative; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--l-ink-2);
  background: transparent; border: none; border-top: 1px solid var(--l-line); padding: .8rem .1rem 0; overflow: hidden;
  transition: color .2s ease;
}
.demo-steps button:hover, .demo-steps button:focus-visible { color: var(--l-ink); outline: none; }
.demo-steps li.is-active button { color: var(--l-ink); }
.demo-step-num { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: var(--l-ink-2); margin-bottom: .15rem; }
.demo-steps li.is-active .demo-step-num { color: var(--l-amber-text); }
.demo-step-name { display: block; font-weight: 650; font-size: .95rem; letter-spacing: -0.01em; color: inherit; }
.demo-step-bar { position: absolute; left: 0; top: -1px; height: 2px; width: 100%; transform: scaleX(0); transform-origin: left; background: var(--l-amber); }
.demo-steps li.is-active .demo-step-bar { animation: demo-bar var(--dur, 5s) linear forwards; }
.demo.is-paused .demo-steps li.is-active .demo-step-bar { animation-play-state: paused; }
.demo-steps li.is-done .demo-step-bar { transform: scaleX(1); opacity: .35; }
@keyframes demo-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .demo-scene *, .demo-step-bar, .demo-spinner, .demo-typing i { animation: none !important; }
  .demo-scene, .demo-narr li { transition: none; }
  .demo-steps li.is-active .demo-step-bar { transform: scaleX(1); }
  .demo-job:not(.demo-job-done) { display: none !important; }
  .demo-cursor { display: none; }
}
@media (max-width: 1000px) {
  .demo-steps { grid-template-columns: repeat(4, 1fr); }
}

/* /story/ */
.story-hero { padding-bottom: 3.5rem; }
.story-hero h1 { max-width: 18ch; font-size: clamp(2.4rem, 5.6vw, 4.4rem); }
.story-body { border-top: 1px solid var(--l-line); padding: 4.5rem 0 3rem; }
.story-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 3rem; align-items: start; }
.story-aside { position: sticky; top: 6rem; }
.story-facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--l-line); }
.story-facts li { display: flex; gap: .8rem; padding: .75rem 0; border-bottom: 1px solid var(--l-line); font-size: .95rem; color: var(--l-ink-2); }
.story-facts li::before { content: "+"; font-weight: 600; color: var(--l-amber-text); }
.story-prose { max-width: 40rem; }
.story-prose p { margin: 0 0 1.4rem; font-size: 1.08rem; line-height: 1.65; color: var(--l-ink-2); }
.story-lead { font-size: 1.35rem !important; line-height: 1.45 !important; color: var(--l-ink) !important; letter-spacing: -0.01em; }
.story-signoff { color: var(--l-ink) !important; font-weight: 500; }
.story-cta { border-top: 1px solid var(--l-line); }
/* Privacy / Terms (legal_base.html, privacy.html, terms.html): the story shell with one prose column */
.legal-hero h1 { max-width: 16ch; }
.legal-updated { margin: 1.2rem 0 0; color: var(--l-ink-2); font-size: .95rem; }
.legal-body { border-top: 1px solid var(--l-line); padding: 3.5rem 0 3rem; }
.legal-prose { max-width: 44rem; }
.legal-prose h2 { font-size: 1.3rem; margin: 2.4rem 0 .7rem; letter-spacing: -0.01em; }
.legal-prose p, .legal-prose li { font-size: 1.02rem; line-height: 1.65; color: var(--l-ink-2); }
.legal-prose p { margin: 0 0 1.2rem; }
.legal-prose .legal-lead { font-size: 1.18rem; color: var(--l-ink); }
.legal-prose ul { margin: 0 0 1.2rem; padding-left: 1.25rem; }
.legal-prose li { margin-bottom: .55rem; }
.legal-prose strong { color: var(--l-ink); font-weight: 600; }
.legal-prose a { color: var(--l-amber-text); }
.story-cta-row { margin-top: 2rem; justify-self: start; }

/* /thanks/ */
.landing-thanks {
  min-height: 100vh; padding: 2rem 1.5rem; text-align: center;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem;
}
.landing-thanks .brand-hero { justify-content: center; }
.landing-thanks h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; letter-spacing: -0.04em; }
.landing-thanks .landing-lede { max-width: 34rem; }
.landing-thanks .landing-lede a { color: var(--l-amber); }
.landing-thanks .thanks-actions { display: flex; flex-direction: column; align-items: center; gap: .9rem; }
.landing-thanks .thanks-secondary { color: var(--l-ink-2); font-size: .95rem; text-decoration: underline; text-underline-offset: 3px; }
.landing-thanks .thanks-secondary:hover { color: var(--l-amber); }
.btn-lg { padding: .85rem 1.7rem; font-size: 1.05rem; border-radius: 10px; }
.btn.is-disabled { opacity: .55; cursor: default; pointer-events: none; }

@media (max-width: 1000px) { .landing-types-grid { grid-template-columns: repeat(4, 1fr); } .landing-type-more { grid-column: span 4; } .landing-fields { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) {
  .landing-wrap { width: calc(100% - 2rem); }
  .landing-nav-links { gap: 1rem; }
  .landing-nav-links a:not(.landing-nav-signin):not(.l-btn) { display: none; }
  .landing-hero { padding: 3.6rem 0 3rem; }
  .landing-hero-row { grid-template-columns: 1fr; gap: 1.8rem; margin-top: 2rem; }
  .landing-cta { justify-self: start; }
  .landing-section { padding: 3.6rem 0; }
  .landing-types-grid { grid-template-columns: repeat(4, 1fr); }
  .landing-types-grid li { padding: 1rem .3rem .9rem; }
  .landing-types-grid svg { width: 30px; height: 30px; }
  .landing-type-name { font-size: .82rem; }
  .landing-list { grid-template-columns: 1fr; gap: 1.8rem; }
  .landing-fields { grid-template-columns: 1fr; margin-top: 1.6rem; }
  .landing-fields li { display: grid; grid-template-columns: 26px 1fr; column-gap: .9rem; align-items: start; padding: 1.1rem 0 1.2rem; }
  .landing-field-icon { grid-row: 1 / span 2; margin: .15rem 0 0; width: 22px; height: 22px; }
  .landing-honest { margin-top: 2.2rem; }
  .landing-steps { grid-template-columns: 1fr; }
  .landing-steps li { border-right: none; border-bottom: 1px solid var(--l-line); padding: 1.8rem 0; }
  .landing-steps li + li { padding-left: 0; }
  .landing-steps li:last-child { border-bottom: none; }
  .landing-pricing { grid-template-columns: 1fr; gap: 2rem; }
  .landing-pricing-card { padding: 1.6rem; }
  .story-grid { grid-template-columns: 1fr; gap: 2rem; }
  .story-aside { position: static; }
  .story-body { padding: 3rem 0 1.5rem; }
  .landing-demo { padding: .5rem 0 3.4rem; }
  .landing-demo-head { margin-bottom: 1.6rem; }
  .demo { font-size: 12.5px; }
  .demo-top { flex-direction: column; align-items: flex-start; gap: .7rem; margin-bottom: .9rem; }
  .demo-narr span { font-size: 1.05rem; }
  .demo-play { padding: .35rem .85rem; font-size: .8rem; }
  .demo-body { grid-template-columns: 1fr; min-height: 400px; }
  .demo-side { display: none; }
  .demo-scene { padding: .9rem .9rem; }
  .demo-tabs { max-width: 100%; overflow: hidden; font-size: 10px; }
  .demo-tabs span { padding: .25rem .3rem; }
  .demo-fc { margin-top: .6rem; }
  .demo-pod { margin-top: .2rem; }
  .demo-notes-layout, .demo-pod { grid-template-columns: 1fr; }
  .demo-margin { padding-top: .3rem; }
  .demo-ann::before { display: none; }
  .demo-scene[data-scene="notes"] .demo-recall { display: none; }
  .demo-slide { min-height: 0; }
  .demo-steps { grid-template-columns: repeat(2, 1fr); gap: .4rem; }
  .demo-step-num { display: none; }
  .demo-step-name { font-size: .85rem; }
  .demo-url { display: none; }

  /* phone pass (2026-09-19): shorter page, less stacked text.
     Headline fits two lines, lists go compact or two-up, inputs become pills. */
  .landing-nav-inner { padding: .7rem 0; }
  .landing-hero { padding: 2.6rem 0 2.4rem; }
  .landing-hero h1 { font-size: 2.25rem; letter-spacing: -0.04em; line-height: 1.02; max-width: none; }
  .landing-hero-row { margin-top: 1.4rem; padding-top: 1.4rem; gap: 1.3rem; }
  .landing-lede { font-size: 1rem; line-height: 1.5; }
  .landing-cta { width: 100%; }
  .landing-cta .l-btn { flex: 1 1 0; min-width: 0; padding-left: 1rem; padding-right: 1rem; }
  .landing-eyebrow { margin-bottom: .7rem; font-size: .85rem; }
  .landing-section { padding: 3rem 0; }
  .landing-section h2 { font-size: 1.75rem; letter-spacing: -0.035em; }
  .landing-demo { padding: .25rem 0 2.6rem; }
  .landing-demo-head { margin-bottom: 1.1rem; }
  .demo-body { min-height: 350px; }
  .demo-steps { grid-template-columns: repeat(3, 1fr); }
  /* steps: number beside the text instead of a tall block per step */
  .landing-how { padding-top: 3rem; }
  .landing-steps { margin-top: 1.4rem; }
  .landing-steps li { display: grid; grid-template-columns: 2rem 1fr; column-gap: .8rem; align-items: baseline; padding: 1.05rem 0; }
  .landing-step-num { grid-row: 1 / span 2; margin: 0; font-size: 1.5rem; }
  .landing-steps h3 { font-size: 1.02rem; margin-bottom: .2rem; }
  .landing-steps p { font-size: .9rem; line-height: 1.45; }
  .landing-trio li { grid-template-columns: 1fr; padding: .95rem 0; }
  /* supported inputs: a wrapped row of pills, names only */
  .landing-types { padding: 2.2rem 0 2.4rem; }
  .landing-types .landing-eyebrow { margin-bottom: .9rem; }
  .landing-types-grid { display: flex; flex-wrap: wrap; gap: .45rem; background: none; border: none; border-radius: 0; overflow: visible; }
  .landing-types-grid li { flex-direction: row; gap: .45rem; padding: .42rem .7rem .42rem .55rem; border: 1px solid var(--l-line); border-radius: 999px; background: transparent; }
  .landing-types-grid svg { width: 16px; height: 16px; margin: 0; }
  .landing-type-name { font-size: .84rem; }
  .landing-type-ext, .landing-type-more-sub { display: none; }
  .landing-type-more { grid-column: auto; border-style: dashed; }
  .landing-type-more-label { font-size: .84rem; }
  /* features: two-up */
  .landing-list { grid-template-columns: 1fr 1fr; gap: 1.3rem 1.1rem; margin-top: 1.6rem; }
  .landing-list-compact { grid-template-columns: 1fr 1fr; }
  .landing-demo-page { padding-top: 2.4rem; }
  .landing-list li::before { width: 22px; margin-bottom: .55rem; }
  .landing-list h3 { font-size: 1rem; margin-bottom: .2rem; }
  .landing-list p { font-size: .86rem; line-height: 1.45; }
  .landing-pricing-section { padding-top: 1rem; }
  .landing-pricing-card { padding: 1.4rem; }
  .landing-price { font-size: 2.1rem; margin-bottom: 1rem; }
  .landing-pricing-list li { padding: .6rem 0; font-size: .92rem; }
  .landing-footer-inner { padding: 1.5rem 0 2.2rem; flex-direction: column; gap: .8rem; }
}

/* ---------- Dashboard (home.html): the landing aesthetic, signed in ----------
   Tokens sit on <body> so the sidebar matches the page. Dark theme = the
   landing's black band, light theme = its white "paper" band. Amber is the
   accent; per-class colours stay on the cards, sidebar and calendar dots. */
body:has(.dash) {
  --bg: #0a0a0a; --bg-elevated: #111113; --bg-secondary: #0f0f11;
  --sidebar-glass: rgba(10, 10, 10, .82);
  --ink: #f5f5f3; --ink-secondary: rgba(245, 245, 243, .62); --muted: rgba(245, 245, 243, .55);
  --line: rgba(255, 255, 255, .12); --line-strong: rgba(255, 255, 255, .24);
  --fill: rgba(255, 255, 255, .06); --fill-hover: rgba(255, 255, 255, .1);
  --accent: var(--brand); --accent-soft: color-mix(in srgb, var(--brand) 14%, transparent);
  --logo-tile: #1c1c1e;
  --l-ink: var(--ink); --l-ink-2: var(--ink-secondary); --l-line: var(--line);
  --l-amber: var(--brand); --l-amber-text: var(--brand);
  /* labels: the app's own sans, tracked small caps, not the landing's monospace */
  --l-mono: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --shadow: none; --shadow-lg: none;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body:has(.dash) {
    --bg: #f5f5f3; --bg-elevated: #ffffff; --bg-secondary: #efefec;
    --sidebar-glass: rgba(245, 245, 243, .86);
    --ink: #0a0a0a; --ink-secondary: rgba(10, 10, 10, .6); --muted: rgba(10, 10, 10, .55);
    --line: rgba(10, 10, 10, .14); --line-strong: rgba(10, 10, 10, .26);
    --fill: rgba(10, 10, 10, .05); --fill-hover: rgba(10, 10, 10, .09);
    --accent: var(--brand-deep); --accent-soft: color-mix(in srgb, var(--brand) 18%, transparent);
    --logo-tile: #1d1d1f;
    --l-amber-text: var(--brand-deep);
  }
}
:root[data-theme="light"] body:has(.dash) {
  --bg: #f5f5f3; --bg-elevated: #ffffff; --bg-secondary: #efefec;
  --sidebar-glass: rgba(245, 245, 243, .86);
  --ink: #0a0a0a; --ink-secondary: rgba(10, 10, 10, .6); --muted: rgba(10, 10, 10, .55);
  --line: rgba(10, 10, 10, .14); --line-strong: rgba(10, 10, 10, .26);
  --fill: rgba(10, 10, 10, .05); --fill-hover: rgba(10, 10, 10, .09);
  --accent: var(--brand-deep); --accent-soft: color-mix(in srgb, var(--brand) 18%, transparent);
  --logo-tile: #1d1d1f;
  --l-amber-text: var(--brand-deep);
}

.dash { max-width: none; }
.dash-eyebrow {
  margin: 0 0 .7rem; font-family: var(--l-mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--l-amber-text);
}

/* hero: date eyebrow, big salutation, lede, resume row */
.dash-hero { margin: 0; padding: .4rem 0 0; border-bottom: none; }
.dash-hero .dash-eyebrow { margin-bottom: .5rem; }
.dash-hero h1 {
  margin: 0; max-width: 20ch;
  font-size: clamp(1.9rem, 3vw, 2.5rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1.05;
}
.dash .greeting-line { margin: .6rem 0 0; max-width: 38rem; font-size: 1.02rem; line-height: 1.5; color: var(--ink-secondary); }
.dash .greeting-exams_now .greeting-line, .dash .greeting-exams_soon .greeting-line,
.dash .greeting-midterms_now .greeting-line, .dash .greeting-midterms_soon .greeting-line { color: var(--ink); }
.dash .left-off {
  margin-top: 1.1rem; padding: .55rem .95rem; gap: .8rem;
  background: transparent; border: 1px solid var(--line); border-radius: 10px; box-shadow: none;
  font-size: .95rem; transition: border-color .15s ease;
}
.dash .left-off:hover { transform: none; box-shadow: none; border-color: var(--ink); }
.dash .left-off-kicker { font-family: var(--l-mono); font-size: .68rem; font-weight: 600; letter-spacing: .1em; color: var(--l-amber-text); }
.dash .left-off-when { font-size: .85rem; }

/* ask bar: hairline box, amber button */
.dash .home-ask {
  margin: 1.6rem 0 0; max-width: 680px;
  background: transparent; border: 1px solid var(--line); border-radius: 12px; box-shadow: none;
  padding: .5rem .5rem .5rem 1.1rem; transition: border-color .15s ease;
}
.dash .home-ask:focus-within { border-color: var(--ink); }
.dash .home-ask input { color: var(--ink); font-size: 1rem; }
.dash .home-ask input::placeholder { color: var(--ink-secondary); }
.dash .home-ask .l-btn { flex-shrink: 0; }

/* section heads: eyebrow + tight h2, button on the right, like a landing band */
.dash .home-grid {
  margin-top: 0; gap: 2.6rem;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 29vw, 420px);
}
.dash .home-grid-solo { grid-template-columns: minmax(0, 1fr); }
.dash-band-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap;
  margin: 3rem 0 1.3rem; padding-top: 2rem; border-top: 1px solid var(--line);
}
.dash-band-head .dash-eyebrow { margin-bottom: .4rem; }
.dash-h2 { margin: 0; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.dash .card-grid { gap: 1.4rem; }

/* class cards: flat, hairline, still colour-coded by --accent */
.dash .course-card {
  background: transparent; border: 1px solid var(--line); border-radius: 14px; box-shadow: none;
  padding: 1.3rem 1.4rem 1.1rem; transition: border-color .15s ease, background .15s ease;
}
.dash .course-card::before { height: 3px; }
.dash .course-card:hover { transform: none; box-shadow: none; border-color: var(--accent); background: color-mix(in srgb, var(--ink) 2%, transparent); }
.course-card-kicker {
  margin: 0 0 .35rem; font-family: var(--l-mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
}
.dash .course-card h2 { margin: 0; font-size: 1.3rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; }
.dash .course-card-units { margin-top: 1rem; padding-top: 0; }
.dash .course-card-unit {
  margin: 0; padding: .6rem 0; border-radius: 0; border-bottom: 1px solid var(--line);
  flex-wrap: wrap; row-gap: .35rem; transition: color .12s ease;
}
.dash .course-card-unit-name { flex: 1 1 14ch; white-space: normal; line-height: 1.3; }
.dash .course-card-unit:last-child { border-bottom: none; padding-bottom: .1rem; }
.dash .course-card-unit:hover { background: transparent; }
.dash .course-card-unit:hover .course-card-unit-name { color: var(--accent); }
.dash .course-card-none { margin-top: 1rem; padding-top: .8rem; font-size: .9rem; }
.dash .pill {
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .18rem .5rem; border-radius: 6px;
  background: transparent; border: 1px solid var(--line); color: var(--ink-secondary);
}
.dash .pill-ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.dash .pill-audio { color: var(--audio); border-color: color-mix(in srgb, var(--audio) 45%, transparent); }

/* empty state */
.dash .empty-state { background: transparent; border: 1px dashed var(--line-strong); border-radius: 14px; padding: 3rem 2rem; margin-top: 0; }
.dash .empty-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; }
.dash .empty-state .l-btn { margin-top: 1.4rem; }

/* right rail: calendar + agenda as bordered panels */
.dash .home-rail { top: 1.2rem; gap: 1.4rem; }
.dash .dash-calendar, .dash .dash-agenda {
  background: color-mix(in srgb, var(--ink) 3%, transparent); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: none; padding: 1.2rem 1.3rem 1.1rem;
}
.dash .dash-calendar .dash-eyebrow, .dash .dash-agenda .dash-eyebrow { margin-bottom: .35rem; }
.dash .dash-title { margin: 0 0 .8rem; font-size: 1.15rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
.dash .cal-grid th { font-weight: 600; letter-spacing: .08em; font-size: .62rem; padding-bottom: .3rem; }
.dash .cal-grid td { border-radius: 6px; height: 42px; padding: .2rem 0 .3rem; }
.dash .cal-day { font-size: .9rem; line-height: 1.45; }
.dash .agenda-label { font-family: var(--l-mono); font-weight: 600; letter-spacing: .1em; color: var(--l-amber-text); margin-bottom: .2rem; }
.dash .agenda-group { margin-bottom: 1.2rem; }
.dash .agenda-row { padding: .55rem 0; border-radius: 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.dash .agenda-row:hover { background: transparent; }
.dash .agenda-group .agenda-row:last-child { border-bottom: none; }
.dash .agenda-date { font-size: .8rem; width: 78px; }
.dash .agenda-empty { padding: 1.6rem 1rem 1.2rem; }
.dash .agenda-empty-title { font-size: 1.05rem; }

@media (max-width: 1150px) {
  .dash .home-grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; }
}
@media (max-width: 760px) {
  .dash-band-head { margin-top: 2.2rem; padding-top: 1.6rem; }
  .dash .course-card { padding: 1.1rem 1.1rem .9rem; }
}

/* django.contrib.messages (billing, password changes) */
.flash-stack { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.2rem; }
.flash { padding: .7rem 1rem; border-radius: var(--radius-sm); font-size: .92rem;
  background: var(--accent-soft); color: var(--ink); border: 1px solid var(--line); }
.flash-error { background: var(--fail-soft); color: var(--fail); }
.flash-success { background: var(--ok-soft, var(--accent-soft)); }

/* Landing comparison: one question, two answers (partials/_landing_versus.html, app.js `landingVersus`) */
.landing-versus-section { padding-top: 5rem; }
.versus { margin-top: 2.4rem; max-width: 1040px; }
.versus-ask { display: flex; align-items: center; gap: .8rem; margin: 0 0 1.2rem; }
.versus-you {
  flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); color: var(--l-ink); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.versus-q { margin: 0; font-size: clamp(1.25rem, 2.4vw, 1.7rem); font-weight: 600; letter-spacing: -.02em; color: var(--l-ink); min-height: 1.4em; }
.versus-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 3px; background: var(--l-amber); vertical-align: -0.15em; animation: caret-blink 1s steps(1) infinite; }
.versus.is-answering .versus-caret { opacity: 0; animation: none; }
@keyframes caret-blink { 50% { opacity: 0; } }
.versus-panes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: stretch; }
.versus-pane {
  display: flex; flex-direction: column; gap: .9rem; padding: 1.2rem 1.3rem 1.3rem; border-radius: 18px;
  border: 1px solid var(--l-line); background: rgba(255, 255, 255, .025); min-height: 240px;
}
.versus-them { color: var(--l-ink-2); }
.versus-us {
  background: linear-gradient(180deg, rgba(245, 165, 36, .09), rgba(245, 165, 36, .03));
  border-color: rgba(245, 165, 36, .45);
  box-shadow: 0 30px 80px -40px rgba(245, 165, 36, .45);
}
.versus-head { display: flex; align-items: center; gap: .6rem; font-size: .85rem; font-weight: 600; color: var(--l-ink-2); }
.versus-us .versus-head { color: var(--l-ink); }
.versus-avatar { width: 24px; height: 24px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.versus-answer {
  margin: 0; font-size: 1.02rem; line-height: 1.5; min-height: 4.5em;
  opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .7, .2, 1);
}
.versus-them .versus-answer { color: var(--l-ink-2); }
.versus-us .versus-answer { color: var(--l-ink); }
.versus-answer.is-in { opacity: 1; transform: none; }
.versus-sources, .versus-marks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.versus-sources li {
  font-size: .74rem; padding: .28rem .6rem; border-radius: 999px; color: var(--l-amber-text);
  border: 1px solid rgba(245, 165, 36, .4); background: rgba(245, 165, 36, .08);
  opacity: 0; transform: scale(.92); transition: opacity .35s ease, transform .35s ease;
}
.versus-marks { margin-top: auto; }
.versus-marks li {
  display: inline-flex; align-items: center; gap: .45rem; font-size: .86rem; font-weight: 500;
  opacity: 0; transform: translateY(4px); transition: opacity .35s ease, transform .35s ease;
}
.versus-marks li::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  font-size: .7rem; font-weight: 800; line-height: 1;
}
.versus-marks-them li { color: var(--l-ink-2); }
.versus-marks-them li::before { content: "\2715"; background: rgba(255, 255, 255, .08); color: rgba(255, 120, 120, .95); }
.versus-marks-us li { color: var(--l-ink); }
.versus-marks-us li::before { content: "\2713"; background: var(--l-amber); color: #0a0a0a; }
.versus li.is-in { opacity: 1; transform: none; }
.versus-dots { list-style: none; display: flex; gap: .5rem; margin: 1.3rem 0 0; padding: 0; }
.versus-dots button {
  width: 34px; height: 4px; border-radius: 2px; border: none; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, .16); transition: background .3s ease;
}
.versus-dots button.is-on { background: var(--l-amber); }
.versus-dots button:focus-visible { outline: 2px solid var(--l-amber); outline-offset: 3px; }
.versus.is-static .versus-answer, .versus.is-static .versus li { opacity: 1; transform: none; }
.versus.is-static .versus-caret { display: none; }
@media (prefers-reduced-motion: reduce) {
  .versus-answer, .versus li { transition: none; }
  .versus-caret { animation: none; }
}
@media (max-width: 760px) {
  .versus-panes { grid-template-columns: 1fr; }
  .versus-pane { min-height: 0; }
  .landing-versus-section { padding-top: 3.5rem; }
}

/* ---------- first-run guidance ---------- */
/* Dashboard "Get set up" checklist (home.html, views._setup_steps). */
.setup { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--line); }
.setup .dash-eyebrow { margin-bottom: .4rem; }
.setup-steps { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; max-width: 720px; }
.setup-step {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 1.15rem; border: 1px solid var(--line); border-radius: 14px;
}
.setup-mark {
  flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  border: 1px solid var(--line-strong); font-size: .82rem; font-weight: 650; color: var(--ink-secondary);
}
.setup-copy h3 { margin: .15rem 0 0; font-size: 1.02rem; font-weight: 650; letter-spacing: -0.01em; }
.setup-copy p { margin: .25rem 0 0; font-size: .92rem; line-height: 1.5; color: var(--ink-secondary); }
.setup-copy .l-btn { margin-top: .85rem; }
.setup-step.is-current { border-color: var(--brand, #f5a524); background: color-mix(in srgb, var(--brand, #f5a524) 6%, transparent); }
.setup-step.is-current .setup-mark { background: var(--brand, #f5a524); border-color: var(--brand, #f5a524); color: #0a0a0a; }
.setup-step.is-done .setup-mark { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.setup-step.is-done h3 { color: var(--ink-secondary); }
.setup-step.is-done p { display: none; }
.setup-step:not(.is-done):not(.is-current) { opacity: .62; }

/* Sources tab: the pointer on to Notes once something is uploaded (unit_detail.html). */
.next-step {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  margin: 1rem 0 1.3rem; padding: .8rem 1rem; border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--bg-elevated);
  font-size: .92rem;
}
.tab-panel > .source-list + .token-bar { margin-bottom: 1.3rem; }
.tab-panel > .empty-state { margin-bottom: 1.3rem; }
.flash-info { background: var(--fill); color: var(--ink); }
.form-card > .flash { margin-bottom: 1rem; }

/* Thanks page: what happens next (thanks.html). */
.landing-thanks .thanks-steps {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; text-align: left;
  font-size: .98rem; color: var(--l-ink);
}
.landing-thanks .thanks-steps li { display: flex; align-items: center; gap: .7rem; }
.landing-thanks .thanks-steps .step-num {
  flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  border: 1px solid var(--l-line); font-size: .76rem; font-weight: 600; color: var(--l-ink-2);
}
.landing-thanks .thanks-help { margin: 0; }
.landing-thanks .thanks-help a { color: var(--l-amber); }

/* Landing "Common questions" (landing.html #questions). */
.landing-faq-section { padding-bottom: 1rem; }
.landing-faq { margin-top: 2.6rem; max-width: 52rem; border-top: 1px solid var(--l-line); }
.landing-faq details { border-bottom: 1px solid var(--l-line); }
.landing-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.2rem;
  padding: 1.15rem 0; cursor: pointer; list-style: none;
  font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; color: var(--l-ink);
}
.landing-faq summary::-webkit-details-marker { display: none; }
.landing-faq summary::after {
  content: "+"; flex: none; font-size: 1.4rem; font-weight: 400; line-height: 1; color: var(--l-amber-text);
  transition: transform .2s ease;
}
.landing-faq details[open] summary::after { transform: rotate(45deg); }
.landing-faq summary:hover { color: var(--l-amber-text); }
.landing-faq summary:focus-visible { outline: 2px solid var(--l-amber); outline-offset: 4px; border-radius: 4px; }
.landing-faq p { margin: 0 0 1.3rem; max-width: 44rem; font-size: 1rem; line-height: 1.65; color: var(--l-ink-2); }
.landing-faq p a { color: var(--l-amber-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .landing-faq summary { font-size: 1rem; padding: 1rem 0; }
  .setup-step { padding: .85rem .9rem; gap: .8rem; }
}
/* The walkthrough's animated cursor can sit a few px past a phone screen's edge,
   which makes mobile browsers zoom the whole page out. Clip it at the section. */
.landing-demo { overflow-x: clip; }
/* A disabled button has to look it: Generate waits for sources on a new unit. */
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* Email code page (verify_email.html) and the done state of the sign-up steps. */
.picker .signup-steps .is-done { color: var(--ink-secondary); }
.picker .signup-steps .is-done .step-num { background: var(--ok-soft); border-color: transparent; color: var(--ok); }
.picker .login-card .verify-lede { margin: 0 0 1rem; font-size: .95rem; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.picker .login-card .verify-help { margin-top: .9rem; }
.picker .login-card .verify-alt { margin-top: .6rem; text-align: left; }
.picker .login-card .verify-alt .link-btn { font-size: .88rem; font-weight: 600; }
.picker .login-card .verify-change { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); text-align: left; }
.picker .login-card .verify-change summary { cursor: pointer; font-size: .88rem; color: var(--ink-secondary); }
.picker .login-card .verify-change summary:hover { color: var(--ink); }
.picker .login-card .verify-change form { margin-top: .9rem; }
.form-notice { color: var(--ok); font-size: .88rem; display: block; margin: .2rem 0 .6rem; }
.picker form.login-switch .link-btn { font: inherit; font-weight: 600; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }


/* ---------- /acquisition/ (where visitors come from) ---------- */
.acq-status { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin: .6rem 0 0; font-size: .82rem; color: var(--muted); }
.acq-dot::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fail); margin-right: .4rem; vertical-align: 1px; }
.acq-dot.is-on::before { background: var(--ok); }
.acq-filters { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; margin: 1rem 0 0; }
.acq-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--bg-elevated); }
.acq-seg a { padding: .35rem .7rem; font-size: .84rem; color: var(--ink-secondary); text-decoration: none; border-right: 1px solid var(--line); }
.acq-seg a:last-child { border-right: 0; }
.acq-seg a.is-on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tracker-totals .is-paid strong { color: var(--ok); }
.acq-sankey-wrap { margin-top: .6rem; padding: .6rem .4rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-elevated); overflow-x: auto; }
.acq-sankey { display: block; width: 100%; min-width: 880px; height: auto; }
.acq-sankey .acq-label { font-size: 12px; font-weight: 600; fill: var(--ink); }
.acq-sankey .acq-count { font-size: 11px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.acq-sankey .acq-drop { font-size: 11px; fill: var(--fail); font-variant-numeric: tabular-nums; }
.acq-sankey .acq-node-stage { fill: var(--ink-secondary); }
.acq-sankey .acq-band:hover { fill-opacity: .8; }
.acq-bad { color: var(--fail); }
.acq-spend { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin: .4rem 0 .8rem; }
.acq-spend label { display: grid; gap: .2rem; font-size: .8rem; color: var(--muted); }
.acq-spend input { min-width: 8rem; }
.acq-steps { max-width: 34rem; }
.acq-step { display: inline-block; margin: 0 .25rem .25rem 0; padding: .1rem .5rem; border-radius: 999px; background: var(--fill); font-size: .76rem; }
.acq-journeys tr.is-paid .acq-step { background: var(--ok-soft); color: var(--ok); }
.acq-downloads { margin-top: 1.4rem; }

/* /guides/ (guides.html, guides/_base.html): the legal shell with an answer box up top */
.guide-crumbs { margin: 0 0 1.2rem; font-size: .95rem; }
.guide-crumbs a { color: var(--l-amber-text); }
.guide-hero h1 { max-width: 22ch; font-size: clamp(2.1rem, 4.6vw, 3.6rem); }
.guide-byline a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.guide-answer { margin: 0 0 2.4rem; padding: 1.3rem 1.5rem; border: 1px solid var(--l-line); border-left: 3px solid var(--l-amber); border-radius: 10px; }
.guide-answer p { margin: 0; font-size: 1.15rem; color: var(--l-ink); }
.guide-prose h3 { font-size: 1.08rem; margin: 1.8rem 0 .5rem; color: var(--l-ink); }
.guide-prose ol { margin: 0 0 1.2rem; padding-left: 1.4rem; }
.guide-prose ol li { margin-bottom: .55rem; }
.guide-table-wrap { overflow-x: auto; margin: 0 0 1.6rem; }
.guide-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.guide-table th, .guide-table td { text-align: left; vertical-align: top; padding: .7rem .8rem; border-bottom: 1px solid var(--l-line); color: var(--l-ink-2); }
.guide-table th { color: var(--l-ink); font-weight: 600; }
.guide-sources { font-size: .92rem; }
.guide-related { margin-top: 3rem; padding-top: 1.6rem; border-top: 1px solid var(--l-line); }
.guide-related ul { list-style: none; padding: 0; }
.guide-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--l-line); }
.guide-list li { padding: 1.3rem 0; border-bottom: 1px solid var(--l-line); }
.guide-list a { font-size: 1.2rem; font-weight: 600; color: var(--l-ink); }
.guide-list p { margin: .4rem 0 0; }

/* ---------- public demo (core/demo, partials/_demo.html) ---------- */
.dmo-bar {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  margin: 0 0 1.1rem; padding: .65rem .9rem; border-radius: var(--radius);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent-fill) 45%, transparent);
  font-size: .9rem;
}
.dmo-bar-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-fill); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-fill) 25%, transparent); animation: dmo-pulse 2.4s ease-in-out infinite; }
@keyframes dmo-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent-fill) 10%, transparent); } }
.dmo-bar-text { flex: 1; min-width: 220px; }
.dmo-bar-cta { flex: none; }

.dmo-home {
  position: fixed; right: 18px; bottom: 18px; z-index: 80; display: inline-flex; align-items: center; gap: .45rem;
  padding: .6rem 1rem; border-radius: 999px; background: var(--bg-elevated); color: var(--ink);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); font-size: .88rem; font-weight: 600; text-decoration: none;
  transition: transform .15s ease, border-color .15s ease;
}
.dmo-home:hover { transform: translateY(-2px); border-color: var(--accent-fill); text-decoration: none; }
body.dmo-modal-open .dmo-home { display: none; }
.dmo-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 1rem; }
.dmo-modal[hidden] { display: none; }
.dmo-modal-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); backdrop-filter: blur(3px); animation: fadein .15s ease-out; }
.dmo-modal-card {
  position: relative; width: min(470px, 100%); max-height: calc(100vh - 2rem); overflow: auto;
  padding: 1.6rem 1.5rem 1.4rem; border-radius: var(--radius-lg); background: var(--bg-elevated);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg); animation: dmo-pop .22s cubic-bezier(.2, 1.3, .4, 1);
}
@keyframes dmo-pop { from { transform: translateY(14px) scale(.96); opacity: 0; } }
.dmo-modal-x { position: absolute; top: .55rem; right: .7rem; border: 0; background: none; color: var(--muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
.dmo-pane[hidden] { display: none; }
.dmo-mug { width: 54px; height: 54px; margin-bottom: .7rem; animation: dmo-wobble 2.6s ease-in-out infinite; transform-origin: 50% 90%; }
.dmo-mug svg, .dmo-mug img { width: 100%; height: 100%; }
@keyframes dmo-wobble { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-9deg); } 86% { transform: rotate(7deg); } 93% { transform: rotate(-3deg); } }
.dmo-kicker { margin: 0 0 .3rem; color: var(--accent); font-weight: 700; font-size: .85rem; }
.dmo-title { margin: 0 0 .5rem; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.2; }
.dmo-body { margin: 0 0 .8rem; color: var(--ink-secondary); font-size: .95rem; }
.dmo-list { margin: 0 0 1.1rem; padding-left: 1.1rem; font-size: .92rem; }
.dmo-list li { margin: .25rem 0; }
.dmo-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.dmo-fine { margin: .9rem 0 0; color: var(--muted); font-size: .8rem; }
body.dmo-modal-open { overflow: hidden; }
body.dmo-modal-open .dmo-tip { display: none; }

.dmo-tip {
  /* frosted glass (2026-10-20, Jack: more modern than the solid amber card) */
  --tip-glass: rgba(255, 255, 255, .72); --tip-edge: rgba(255, 255, 255, .9);
  position: absolute; z-index: 70; max-width: 290px; display: flex; gap: .55rem; align-items: flex-start;
  padding: .6rem .6rem .62rem .75rem; border-radius: 14px; color: var(--ink);
  background: var(--tip-glass); border: 1px solid var(--tip-edge);
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  font-size: .85rem; line-height: 1.4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04), 0 10px 30px -6px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .6);
  animation: dmo-pop .3s ease-out;
}
.dmo-tip::before {
  content: ""; position: absolute; top: -6px; left: 22px; width: 11px; height: 11px; transform: rotate(45deg); border-radius: 2px;
  background: var(--tip-glass); border: 1px solid var(--tip-edge); border-right: 0; border-bottom: 0;
  clip-path: polygon(0 0, 100% 0, 0 100%); /* only the half outside the card, so the glass does not double */
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
}
.dmo-tip-above::before { top: auto; bottom: -6px; border: 1px solid var(--tip-edge); border-left: 0; border-top: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.dmo-tip-label {
  display: inline-flex; align-items: center; gap: .35rem; padding-top: .14rem;
  font-weight: 700; text-transform: uppercase; font-size: .66rem; letter-spacing: .09em; color: var(--accent);
}
.dmo-tip-label::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-fill); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-fill) 22%, transparent); }
.dmo-tip-text { flex: 1; }
.dmo-tip-x {
  flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin: -.05rem -.1rem 0 0; padding: 0;
  border: 0; border-radius: 50%; background: rgba(120, 120, 128, .14); color: var(--muted);
  font-size: .9rem; line-height: 1; cursor: pointer; transition: background .12s ease, color .12s ease;
}
.dmo-tip-x:hover { background: rgba(120, 120, 128, .26); color: var(--ink); }
:root[data-theme="dark"] .dmo-tip { --tip-glass: rgba(44, 44, 48, .62); --tip-edge: rgba(255, 255, 255, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dmo-tip { --tip-glass: rgba(44, 44, 48, .62); --tip-edge: rgba(255, 255, 255, .14); } }

/* demo: the frosted end of a one-minute video preview */
.dmo-vwrap { position: relative; }
.dmo-frost { position: absolute; inset: .3rem 0; z-index: 5; display: grid; place-items: center; padding: 1rem;
  border-radius: var(--radius); background: rgba(12, 12, 16, .35); backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1); animation: fadein .4s ease-out; }
.dmo-frost[hidden] { display: none; }
.dmo-frost-card { max-width: 440px; text-align: center; color: #f5f5f7; }
.dmo-frost-kicker { margin: 0 0 .3rem; font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-fill); }
.dmo-frost-title { margin: 0 0 .5rem; font-size: 1.5rem; letter-spacing: -.02em; color: #fff; }
.dmo-frost-body { margin: 0 0 1rem; font-size: .95rem; color: rgba(245, 245, 247, .82); }
.dmo-frost-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.dmo-frost-actions .btn:not(.btn-primary) { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .2); }

/* ---------- phone shell (base.html .m-bar, app.js "phone menu") ----------
   Everything below applies at phone width only, so the desktop layout above is
   untouched. The sidebar becomes a drawer behind a menu button in a slim top
   bar, the content gets the full width, and the busier pieces tighten up. */
@media (max-width: 760px) {
  .layout { display: block; }
  .m-bar {
    position: sticky; top: 0; z-index: 60;
    display: flex; align-items: center; gap: .55rem;
    padding: .55rem 1rem; padding-top: max(.55rem, env(safe-area-inset-top));
    background: var(--sidebar-glass);
    -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--line);
  }
  .m-brand { margin: 0 auto 0 0; gap: .5rem; }
  .m-brand .logo-beer { width: 1.95rem; height: 1.95rem; }
  .m-brand .brand-name { font-size: 1.12rem; }
  .m-brand .brand-sub { font-size: .5rem; margin-top: .18rem; }
  .m-ask {
    padding: .4rem .85rem; border-radius: 999px; background: var(--fill);
    color: var(--ink); font-size: .84rem; font-weight: 600; white-space: nowrap;
  }
  .m-ask:hover { text-decoration: none; background: var(--fill-hover); }
  .m-ask.active { background: var(--accent-soft); color: var(--accent); }
  .m-menu {
    display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0;
    border: 1px solid var(--line); border-radius: 11px; background: var(--bg-elevated);
    color: var(--ink); cursor: pointer;
  }
  .m-menu:active { transform: scale(.95); }

  /* the sidebar, as a drawer from the left */
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
    width: min(320px, 86vw); height: 100%; height: 100dvh;
    padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom));
    background: var(--bg); border-right: 1px solid var(--line);
    box-shadow: 0 0 60px rgba(0, 0, 0, .35);
    transform: translateX(-104%); visibility: hidden;
    transition: transform .26s cubic-bezier(.2, .8, .2, 1), visibility .26s;
  }
  body.m-nav-open .sidebar { transform: none; visibility: visible; }
  .m-close {
    display: inline-grid; place-items: center; position: absolute; top: 1.05rem; right: .8rem;
    width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
    background: var(--fill); color: var(--ink-secondary); cursor: pointer;
  }
  .sidebar .brand { padding-right: 2.6rem; }
  .side-units a, .side-add { padding-top: .45rem; padding-bottom: .45rem; }
  .side-course-toggle { width: 2rem; height: 2rem; }
  .m-scrim {
    display: block; position: fixed; inset: 0; z-index: 85;
    background: rgba(0, 0, 0, .42); opacity: 0; pointer-events: none;
    transition: opacity .26s ease;
  }
  body.m-nav-open .m-scrim { opacity: 1; pointer-events: auto; }
  body.m-nav-open { overflow: hidden; }

  .content { padding: 1.1rem 1rem 5.5rem; }
  /* the page-in animation's "both" fill leaves a transform on .content, which
     would pin fixed children (margin notes drawer, demo home button) to it */
  .content { animation-fill-mode: backwards; }
  h1 { font-size: 1.6rem; line-height: 1.15; }
  .page-head { gap: .7rem; margin-bottom: 1.1rem; }
  .page-head > div:first-child { min-width: 0; flex: 1 1 100%; }
  .page-head .btn-row .btn { padding: .32rem .8rem; font-size: .84rem; }

  /* unit tabs: one row that scrolls sideways, labels dropped */
  .tab-groups {
    flex-wrap: nowrap; gap: .45rem; align-items: center;
    margin: 0 -1rem 1.1rem; padding: 0 1rem 2px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tab-groups::-webkit-scrollbar { display: none; }
  .tab-group-label { display: none; }
  .tab-group + .tab-group { border-left: 0; padding-left: 0; }
  .tab-group { flex: none; }
  .tabs { flex-wrap: nowrap; }
  .tab { white-space: nowrap; padding: .36rem .75rem; font-size: .86rem; }

  /* class page unit rows: title on its own line, badges under it */
  .unit-row { flex-wrap: wrap; gap: .5rem; padding: .8rem .95rem; }
  .unit-row > :first-child { flex: 1 1 100%; min-width: 0; }

  /* demo furniture */
  .dmo-bar { gap: .55rem .7rem; padding: .6rem .75rem; font-size: .82rem; line-height: 1.4; margin-bottom: 1rem; }
  .dmo-bar-text { min-width: 0; flex: 1 1 calc(100% - 2rem); }
  .dmo-bar-cta { margin-left: 1.3rem; }
  .dmo-home { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); padding: .48rem .8rem; font-size: .78rem; gap: .35rem; }
  .dmo-home svg { width: 14px; height: 14px; }
  .dmo-tip { max-width: min(290px, calc(100vw - 24px)); }
  .dmo-frost-title { font-size: 1.15rem; margin-bottom: .3rem; }
  .dmo-frost-body { font-size: .82rem; margin-bottom: .7rem; }
  .dmo-frost-kicker { font-size: .7rem; }
  .dmo-frost .btn { padding: .38rem .8rem; font-size: .84rem; }
  body:has(.chat-form) .dmo-home, body:has(.clarify-panel.open) .dmo-home, body:has(.tour) .dmo-home { display: none; }
  /* the margin notes drawer covers the top bar too */
  .clarify-panel { z-index: 95; width: 100vw; padding-bottom: env(safe-area-inset-bottom); }

  /* notes: less frame, more text */
  .notes-body { padding: 1.15rem 1.05rem; font-size: 15.5px; line-height: 1.7; border-radius: var(--radius); }
  .notes-body .tldr { padding: .8rem .95rem; }
  .notes-body .callout { padding: .7rem .9rem; }
  .notes-body ul, .notes-body ol { padding-left: 1.2rem; }
  .notes-body table { display: block; overflow-x: auto; }
  /* KaTeX's hidden MathML is absolutely positioned: keep it inside the scroller */
  .notes-body table, .notes-body .table-wrap, .notes-body .katex-display { position: relative; }

  /* Ask Sendy: the page scrolls, the box to ask stays pinned to the bottom */
  .chat-wrap { height: auto; min-height: 0; }
  .chat-scroll { overflow: visible; padding: 0 0 .4rem; }
  .chat-bubble { max-width: 90%; font-size: .93rem; }
  .chat-form {
    position: sticky; bottom: 0; z-index: 5; gap: .5rem;
    margin: 0 -1rem; padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
    background: var(--bg);
  }
  body:has(.chat-form) .content { padding-bottom: 0; }

  /* sources: the link box takes its own row */
  .add-row { gap: .6rem; }
  .add-row .inline-form { flex: 1 1 100%; }
  .add-row .inline-form input { min-width: 0; flex: 1; }
  .paste-details form { min-width: 0; }

  /* tests and flashcards */
  .test-row { flex-wrap: wrap; gap: .7rem; padding: .85rem .95rem; }
  .test-row-info { flex: 1 1 100%; }
  .test-question { padding: .95rem 1rem; }
  .test-score-card { flex-direction: column; align-items: stretch; gap: .5rem; padding: 1rem 1.1rem; }
  .test-score-big { font-size: 1.9rem; }
  .test-overall.notes-body, .test-feedback.notes-body { padding: .8rem .9rem; font-size: .93rem; line-height: 1.6; }
  .fc-card { height: 260px; }
  .fc-face { padding: 1.4rem 1.2rem 2.2rem; font-size: 1.05rem; }
  .fc-keys { display: none; }

  /* shorter copy: half sentences marked .m-hide, helper lines under buttons,
     model and token counts, and the weeks map clamped to three lines a unit */
  .m-hide { display: none; }
  .generate-copy span, .test-why, .notes-meta, .unit-row .muted { display: none; }
  .syllabus-card .generate-copy span { display: block; }
  .links-summary {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;
    overflow: hidden; cursor: pointer;
  }
  .links-summary.is-open { display: block; }
  .agenda-more { margin-top: .4rem; width: 100%; }
  .dash-agenda [hidden] { display: none; }

  /* dashboard: calendar and the agenda fit the narrow card */
  .dash .agenda-row { gap: .55rem; font-size: .88rem; }
  .dash .agenda-date { width: 58px; font-size: .74rem; }
  .dash .dash-calendar, .dash .dash-agenda { padding-left: 1rem; padding-right: 1rem; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .sidebar, .m-scrim { transition: none; }
}
/* public pages at phone width: one row of header links that never wraps, and
   hero buttons sharing the row evenly */
@media (max-width: 760px) {
  .landing-nav-inner { gap: .6rem; }
  .landing-nav .brand { gap: .45rem; }
  .landing-nav .brand .logo-beer { width: 1.9rem; height: 1.9rem; }
  .landing-nav .brand-name { font-size: 1.12rem; }
  .landing-nav .brand-sub { font-size: .5rem; margin-top: .18rem; white-space: nowrap; }
  .landing-nav-links { gap: .85rem; font-size: .84rem; white-space: nowrap; }
  .landing-nav-links .l-btn-sm { padding: .42rem .75rem; font-size: .84rem; }
  .landing-cta .l-btn, .landing-cta .l-btn:not(.l-btn-ghost) { min-width: 0; white-space: nowrap; padding-left: .8rem; padding-right: .8rem; text-align: center; }
}
@media (max-width: 370px) {
  .landing-nav .brand-text { display: none; }
}

/* ---------- landing flow loop (partials/_landing_flow.html) ----------
   A 10 second CSS loop on one shared clock: files go into Sendy, notes write
   themselves, then flashcards, a graded test and a podcast with its video.
   Sized in em off the container (1em = 1/120 of the width, 1/60 on phones).
   Marketing master copy with a seek() hook: marketing/flow/sendy-flow.html. */
.flow {
  --amber: #f5a524; --ink: #f5f5f3; --ink2: rgba(245, 245, 243, .62); --ink3: rgba(245, 245, 243, .38);
  --line: rgba(255, 255, 255, .1); --card: #141416; --card2: #1b1b1e; --T: 10s;
  --ease: cubic-bezier(.2, .8, .2, 1);
  container-type: inline-size; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: 18px; background: #0b0b0c;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
  color: var(--ink); -webkit-font-smoothing: antialiased;
  box-shadow: 0 0 0 1px var(--line), 0 40px 120px -40px rgba(0, 0, 0, .8);
}
.flow-stage { position: absolute; inset: 0; font-size: calc(100cqw / 120); }
.flow * { box-sizing: border-box; }
.flow-stage > * { position: absolute; }
.flow [class*="f-"], .flow .ln { animation-duration: var(--T); animation-iteration-count: infinite; animation-fill-mode: both; animation-timing-function: var(--ease); }/* backdrop: faint dot grid and a warm glow that follows the work */


.flow .f-grid { inset: 0; opacity: .55;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.2px); background-size: 2.4em 2.4em;
  -webkit-mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 45%, #000 30%, transparent 75%); }
.flow .f-glow { width: 70em; height: 70em; left: 21em; top: -8em; border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 165, 36, .16), transparent 62%); animation-name: fl-glow; }
@keyframes fl-glow {
  0% { transform: translateX(-22em); opacity: .6; }
  30% { transform: translateX(0); opacity: 1; }
  60% { transform: translateX(22em); opacity: .9; }
  80% { transform: translateX(14em); opacity: 1; }
  100% { transform: translateX(-22em); opacity: .6; }
}/* 1. files */


.flow .file { left: 5em; width: 27em; height: 6.6em; display: flex; align-items: center; gap: 1.3em; padding: 0 1.4em;
  border-radius: 1.2em; background: linear-gradient(180deg, var(--card2), var(--card));
  box-shadow: inset 0 0 0 1px var(--line), 0 1.4em 3em -1.6em rgba(0, 0, 0, .7); }
.flow .file b { display: grid; place-items: center; width: 3.9em; height: 4.3em; border-radius: .7em;
  font-size: 1em; font-weight: 800; letter-spacing: .04em; color: #fff; }
.flow .file-t { font-size: 1.55em; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; }
.flow .file-s { display: block; margin-top: .3em; font-size: .75em; font-weight: 500; color: var(--ink3); letter-spacing: 0; }
.flow .f-file0 { top: 15.8em; animation-name: fl-file0; } .flow .f-file0 b { background: #e5484d; }
.flow .f-file1 { top: 24.5em; animation-name: fl-file1; } .flow .f-file1 b { background: #f76b15; }
.flow .f-file2 { top: 33.2em; animation-name: fl-file2; } .flow .f-file2 b { background: #8e4ec6; }
@keyframes fl-file0 {
  0%, 2% { opacity: 0; transform: translateX(-10em); }
  9% { opacity: 1; transform: none; }
  19% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  28%, 100% { opacity: 0; transform: translate(37.5em, 8.7em) scale(.16); }
}
@keyframes fl-file1 {
  0%, 5% { opacity: 0; transform: translateX(-10em); }
  12% { opacity: 1; transform: none; }
  21% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  30%, 100% { opacity: 0; transform: translate(37.5em, 0) scale(.16); }
}
@keyframes fl-file2 {
  0%, 8% { opacity: 0; transform: translateX(-10em); }
  15% { opacity: 1; transform: none; }
  23% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.6, 0, .4, 1); }
  32%, 100% { opacity: 0; transform: translate(37.5em, -8.7em) scale(.16); }
}/* 2. Sendy reads it: the mug, a progress ring, then a beam to the notes */


.flow .f-mug { left: 51em; top: 23.4em; width: 10em; height: 10em; animation-name: fl-mug; }
.flow .f-mug svg.logo { width: 100%; height: 100%; display: block; border-radius: 2.3em;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 1.5em 4em -1em rgba(245, 165, 36, .35); }
@keyframes fl-mug {
  0%, 3% { opacity: 0; transform: scale(.85); }
  10% { opacity: 1; transform: none; }
  24% { transform: none; }
  27% { transform: scale(1.08); }
  31% { transform: scale(.98); }
  34% { transform: scale(1.05); }
  37% { transform: none; }
  56% { opacity: 1; transform: none; }
  62%, 100% { opacity: 0; transform: scale(.8); }
}
.flow .f-ring { left: 49em; top: 21.4em; width: 14em; height: 14em; animation-name: fl-ring; }
.flow .f-ring circle { fill: none; stroke-width: .35; }
.flow .f-ring .track { stroke: rgba(255, 255, 255, .08); }
.flow .f-ring .bar { stroke: var(--amber); stroke-linecap: round; stroke-dasharray: 100; animation-name: fl-ringbar; transform: rotate(-90deg); transform-origin: 50% 50%; }
@keyframes fl-ring { 0%, 18% { opacity: 0; } 22% { opacity: 1; } 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes fl-ringbar { 0%, 22% { stroke-dashoffset: 100; } 39%, 100% { stroke-dashoffset: 0; } }
.flow .f-beam { left: 61.5em; top: 28.2em; width: 8.5em; height: .22em; border-radius: 1em; animation-name: fl-beam;
  background: linear-gradient(90deg, transparent, var(--amber), transparent); background-size: 200% 100%; }
@keyframes fl-beam {
  0%, 30% { opacity: 0; background-position: 100% 0; }
  33% { opacity: 1; }
  42% { opacity: 1; background-position: -100% 0; }
  46%, 100% { opacity: 0; background-position: -100% 0; }
}/* 3. the notes write themselves */


.flow .f-doc { left: 70em; top: 7.5em; width: 45em; height: 47em; padding: 2.8em 3em; border-radius: 1.6em;
  background: linear-gradient(180deg, #fbfaf7, #f4f2ec); color: #1d1d1f; animation-name: fl-doc;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .2), 0 3em 7em -2em rgba(0, 0, 0, .85); }
@keyframes fl-doc {
  0%, 33% { opacity: 0; transform: translateY(1.6em) scale(.97); }
  38% { opacity: 1; transform: none; }
  60% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.65, 0, .3, 1); }
  69% { opacity: 1; transform: translateX(-65em) scale(.96); }
  93% { opacity: 1; transform: translateX(-65em) scale(.96); }
  98%, 100% { opacity: 0; transform: translateX(-65em) scale(.96); }
}
.flow .doc-class { display: inline-flex; align-items: center; gap: .6em; font-size: 1.05em; font-weight: 600; color: #6b6b70; }
.flow .doc-class i { width: .75em; height: .75em; border-radius: 50%; background: #4c6ef5; }
.flow .doc-title { margin: .45em 0 1.1em; font-size: 2.9em; font-weight: 750; letter-spacing: -.035em; line-height: 1; padding-left: .35em; border-left: .14em solid #4c6ef5; }
.flow .ln { animation-name: fl-ln; animation-delay: var(--d, 0s); }
@keyframes fl-ln {
  0%, 35% { clip-path: inset(0 100% 0 0); opacity: 0; }
  36% { opacity: 1; }
  44% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 0 0); opacity: 1; }
}
.flow .tldr { margin: 0 0 1.3em; padding: 1em 1.2em; border-radius: .8em; background: rgba(245, 165, 36, .14); border-left: .3em solid #d98a06; }
.flow .tldr small { display: block; font-size: .8em; font-weight: 800; letter-spacing: .1em; color: #b06d00; }
.flow .tldr p { margin: .25em 0 0; font-size: 1.45em; font-weight: 500; line-height: 1.35; }
.flow .doc-h { margin: 0 0 .6em; font-size: 1.45em; font-weight: 700; letter-spacing: -.01em; }
.flow .chips { display: flex; flex-wrap: wrap; gap: .55em; margin-bottom: 1.4em; }
.flow .chips span { padding: .45em .9em; border-radius: 99em; background: #ecebe6; font-size: 1.1em; font-weight: 600; color: #3a3a3c; }
.flow .eq { margin: 0 0 1.3em; padding: .9em 0; text-align: center; font: italic 2.1em/1.2 "Times New Roman", Georgia, serif; color: #111; border-top: 1px solid #e3e1da; border-bottom: 1px solid #e3e1da; }
.flow .eq sub, .flow .eq sup { font-size: .6em; } .flow .eq .sum { font-style: normal; font-size: 1.3em; vertical-align: -.12em; margin: 0 .1em; }
.flow .bul { margin: 0; padding: 0; list-style: none; }
.flow .bul li { position: relative; padding-left: 1.2em; margin: 0 0 .55em; font-size: 1.3em; line-height: 1.35; color: #3a3a3c; }
.flow .bul li::before { content: ""; position: absolute; left: 0; top: .55em; width: .45em; height: .45em; border-radius: 50%; background: #d98a06; }
.flow .bul mark { background: rgba(245, 165, 36, .3); color: inherit; padding: 0 .15em; border-radius: .2em; }
.flow .made { position: absolute; right: 2.6em; top: 2.6em; display: flex; align-items: center; gap: .5em; font-size: 1em; font-weight: 600; color: #8a8a8e; }
.flow .made svg { width: 1.8em; height: 1.8em; border-radius: .45em; }/* 4. then study it every way */


.flow .tile { left: 58em; width: 57em; height: 13.6em; display: flex; align-items: center; gap: 2.2em; padding: 0 2.4em 0 1.6em;
  border-radius: 1.6em; background: linear-gradient(180deg, var(--card2), var(--card));
  box-shadow: inset 0 0 0 1px var(--line), 0 2em 5em -2em rgba(0, 0, 0, .8); animation-name: fl-tile; animation-delay: var(--d); }
.flow .f-t0 { top: 7.5em; --d: 0s; } .flow .f-t1 { top: 24.2em; --d: .25s; } .flow .f-t2 { top: 40.9em; --d: .5s; }
@keyframes fl-tile {
  0%, 64% { opacity: 0; transform: translateX(6em); }
  71% { opacity: 1; transform: none; }
  93% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}
.flow .tile-vis { flex: none; width: 17em; height: 10.4em; border-radius: 1.1em; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); display: grid; place-items: center; position: relative; perspective: 40em; }
.flow .tile-k { font-size: 1em; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); }
.flow .tile-t { margin: .3em 0 0; font-size: 2.3em; font-weight: 700; letter-spacing: -.025em; }
.flow .tile-s { margin: .3em 0 0; font-size: 1.3em; color: var(--ink2); }

.flow .card { position: relative; width: 13em; height: 8em; transform-style: preserve-3d; animation-name: fl-flip; animation-delay: 0s; }
@keyframes fl-flip { 0%, 74% { transform: none; } 80%, 100% { transform: rotateY(180deg); } }
.flow .card div { position: absolute; inset: 0; display: grid; place-items: center; padding: .8em; text-align: center; border-radius: .8em; backface-visibility: hidden; -webkit-backface-visibility: hidden; font-size: 1.15em; font-weight: 600; line-height: 1.25; }
.flow .card .front { background: #f7f5ef; color: #1d1d1f; }
.flow .card .back { background: var(--amber); color: #1d1d1f; transform: rotateY(180deg); }

.flow .score { width: 8.6em; height: 8.6em; position: relative; }
.flow .score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.flow .score circle { fill: none; stroke-width: 3; }
.flow .score .track { stroke: rgba(255, 255, 255, .1); }
.flow .score .bar { stroke: #30d158; stroke-linecap: round; stroke-dasharray: 100; animation-name: fl-score; animation-delay: .25s; }
@keyframes fl-score { 0%, 69% { stroke-dashoffset: 100; } 82%, 100% { stroke-dashoffset: 8; } }
.flow .score b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 2.2em; font-weight: 750; letter-spacing: -.03em; }

@keyframes fl-bar { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }/* podcast tile: a mini video overview (a slide with a curve drawing itself, host captions, progress) */


.flow .vid { width: 19.5em; overflow: hidden; display: block; background: radial-gradient(120% 90% at 30% 0%, #26201a, #111113 70%); }
.flow .vid-top { position: absolute; left: 1em; top: .8em; display: flex; align-items: center; gap: .45em; font-size: .78em; font-weight: 600; color: var(--ink2); }
.flow .vid-top i { width: .65em; height: .65em; border-radius: .2em; background: var(--amber); }
.flow .vid-plot { position: absolute; left: .6em; top: 2em; width: 18.3em; height: 6em; overflow: visible; }
.flow .vid-plot path { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.flow .vid-plot .sqw { stroke: rgba(255, 255, 255, .28); stroke-width: 1; }
.flow .vid-plot .fsw { stroke: var(--amber); stroke-width: 1.6; stroke-dasharray: 100; animation-name: fl-fsw; filter: drop-shadow(0 0 2px rgba(245, 165, 36, .6)); }
@keyframes fl-fsw { 0%, 70% { stroke-dashoffset: 100; } 84%, 100% { stroke-dashoffset: 0; } }
.flow .vid-cap { position: absolute; left: 1em; right: 4.6em; bottom: 1.35em; white-space: nowrap; font-size: .78em; line-height: 1.3; color: #fff; }
.flow .vid-cap b { color: var(--amber); font-weight: 700; margin-right: .3em; }
.flow .f-cap0 { animation-name: fl-cap0; } .flow .f-cap1 { animation-name: fl-cap1; }
@keyframes fl-cap0 { 0%, 70% { opacity: 0; } 73%, 81% { opacity: 1; } 83%, 100% { opacity: 0; } }
@keyframes fl-cap1 { 0%, 82% { opacity: 0; } 84%, 100% { opacity: 1; } }
.flow .vid-bar { position: absolute; left: 1em; right: 4.4em; bottom: .6em; height: .22em; border-radius: 1em; background: rgba(255, 255, 255, .15); overflow: hidden; }
.flow .vid-bar span { display: block; height: 100%; width: 100%; background: var(--amber); transform-origin: 0 50%; animation-name: fl-prog; animation-timing-function: linear; }
@keyframes fl-prog { 0%, 68% { transform: scaleX(.18); } 100% { transform: scaleX(.46); } }
.flow .vid-wave { position: absolute; right: .9em; bottom: .35em; display: flex; align-items: center; gap: .2em; height: 2.2em; }
.flow .vid-wave i { width: .26em; border-radius: 1em; background: var(--amber); height: var(--h); animation: fl-bar 1s ease-in-out infinite both; animation-delay: var(--w); }/* captions */


.flow .cap { left: 5em; bottom: 5em; display: flex; align-items: baseline; gap: 1.2em; }
.flow .cap b { font-size: 1.15em; font-weight: 700; color: var(--amber); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.flow .cap span { font-size: 2.3em; font-weight: 650; letter-spacing: -.025em; }
.flow .f-c0 { animation-name: fl-c0; } .flow .f-c1 { animation-name: fl-c1; } .flow .f-c2 { animation-name: fl-c2; } .flow .f-c3 { animation-name: fl-c3; }
@keyframes fl-c0 { 0%, 2% { opacity: 0; transform: translateY(.8em); } 6%, 17% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; transform: translateY(-.8em); } }
@keyframes fl-c1 { 0%, 20% { opacity: 0; transform: translateY(.8em); } 24%, 31% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-.8em); } }
@keyframes fl-c2 { 0%, 34% { opacity: 0; transform: translateY(.8em); } 38%, 58% { opacity: 1; transform: none; } 61%, 100% { opacity: 0; transform: translateY(-.8em); } }
@keyframes fl-c3 { 0%, 64% { opacity: 0; transform: translateY(.8em); } 69%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: translateY(-.8em); } }
.flow .f-c3 { left: 5em; bottom: 5em; }/* in phase 2 the notes sit on the left, so the last caption goes under the tiles */

.flow .f-c3 { left: 58em; bottom: 4.2em; }
.flow .f-c3 span { font-size: 1.9em; color: var(--ink2); }

@media (prefers-reduced-motion: reduce) {
  .flow [class*="f-"], .flow .ln, .flow .card, .flow .bar, .flow .vid-wave i { animation-play-state: paused; animation-delay: -7.6s !important; }
}/* phones: a portrait stage (60em wide) with the same story stacked, so the words stay readable */


@media (max-width: 640px) {
  .flow { aspect-ratio: 4 / 5; border-radius: 14px; }
  .flow-stage { font-size: calc(100cqw / 60); }
  .flow .file { left: 8em; width: 44em; }
  .flow .f-file0 { top: 7em; animation-name: fl-file0p; } .flow .f-file1 { top: 15.5em; animation-name: fl-file1p; } .flow .f-file2 { top: 24em; animation-name: fl-file2p; }
  .flow .f-mug { left: 25em; top: 36em; animation-name: fl-mugp; }
  .flow .f-ring { left: 23em; top: 34em; }
  .flow .f-beam { display: none; }
  .flow .f-glow { left: -5em; top: 5em; }
  .flow .f-doc { z-index: 2; font-size: 1.15em; left: 4.35em; top: 4.35em; width: 43.5em; height: 48.7em; animation-name: fl-docp; }
  .flow .tile { font-size: 1.1em; left: 3.64em; width: 47.3em; height: 13.6em; gap: 1.6em; padding: 0 1.6em 0 1.3em; }
  .flow .f-t0 { top: 4.55em; } .flow .f-t1 { top: 19.1em; } .flow .f-t2 { top: 33.6em; }
  .flow .tile-vis { width: 15em; } .flow .vid { width: 16.5em; } .flow .vid-plot { width: 15.3em; }
  .flow .tile-t { font-size: 1.95em; }
  .flow .cap, .flow .f-c3 { left: 5em; bottom: 5em; z-index: 3; }
  .flow .f-c3 span { font-size: 2.3em; color: var(--ink); }
}
@keyframes fl-file0p { 0%, 2% { opacity: 0; transform: translateX(-10em); } 9% { opacity: 1; transform: none; } 19% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.6, 0, .4, 1); } 28%, 100% { opacity: 0; transform: translate(0, 30.7em) scale(.16); } }
@keyframes fl-file1p { 0%, 5% { opacity: 0; transform: translateX(-10em); } 12% { opacity: 1; transform: none; } 21% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.6, 0, .4, 1); } 30%, 100% { opacity: 0; transform: translate(0, 22.2em) scale(.16); } }
@keyframes fl-file2p { 0%, 8% { opacity: 0; transform: translateX(-10em); } 15% { opacity: 1; transform: none; } 23% { opacity: 1; transform: none; animation-timing-function: cubic-bezier(.6, 0, .4, 1); } 32%, 100% { opacity: 0; transform: translate(0, 13.7em) scale(.16); } }
@keyframes fl-mugp { 0%, 3% { opacity: 0; transform: scale(.85); } 10% { opacity: 1; transform: none; } 24% { transform: none; } 27% { transform: scale(1.08); } 31% { transform: scale(.98); } 34% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; transform: scale(.8); } }
@keyframes fl-docp { 0%, 33% { opacity: 0; transform: translateY(1.6em) scale(.97); } 38% { opacity: 1; transform: none; } 60% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(-2em) scale(.97); } }

/* ---------- Sendy Hub (core/hub/*.html, services/hub.py) ----------
   Slate Hub's layout (page nav in groups, a topbar, a 12-column grid of
   cards, stat tiles, line charts with a table view) in Sendy's own tokens:
   the app sidebar, amber accent, system fonts, light and dark. */
/* the hub's own shell (core/hub/_shell.html), not the student app's .layout */
.hub-body { margin: 0; }
.hub-shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); min-height: 100vh; }
.hub-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; padding: 1.2rem 1rem;
  background: var(--sidebar-glass); -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%); border-right: 1px solid var(--line); }
.hub-brand { margin-bottom: .6rem; }
.hub-brand .brand-sub { color: var(--accent); }
.hub-foot { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: .35rem; font-size: .78rem; color: var(--muted); }
.hub-foot span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-foot button { background: none; border: 0; padding: 0; font: inherit; color: var(--muted); text-align: left; cursor: pointer; }
.hub-foot button:hover { color: var(--ink); }
.hub-main { min-width: 0; padding: 0 2.6rem 4rem; }
.hub-flash { margin: 0; padding: .5rem .8rem; border-radius: var(--radius); background: var(--ok-soft); color: var(--ok); font-size: .85rem; }
.hub-login { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1rem; }
.hub-login-box { width: min(360px, 100%); display: flex; flex-direction: column; gap: .8rem; }
.hub-login-box label { display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; font-weight: 600; color: var(--ink-secondary); }
.hub-login-box input { font: inherit; font-size: .95rem; padding: .55rem .7rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); }
.hub-login-box p { margin: 0; }
.hub-link { background: none; border: 0; color: var(--accent); font: inherit; font-size: .85rem; cursor: pointer; }
.hub { max-width: 1380px; display: flex; flex-direction: column; gap: 1.25rem; }
.hub .muted { color: var(--muted); }
.hub code { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace; font-size: .82em; background: var(--fill); border-radius: 5px; padding: .05rem .35rem; }

.hub-nav { flex: 1; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: 1px; }
.hub-nav .side-section-label { margin-top: .9rem; }
.hub-nav .side-section-label:first-child { margin-top: .2rem; }
.hub-nav a { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .36rem .6rem; border-radius: var(--radius-sm); color: var(--ink-secondary); font-size: .9rem; transition: background .12s ease; }
.hub-nav a:hover { background: var(--fill); color: var(--ink); text-decoration: none; }
.hub-nav a.active { background: var(--accent-fill); color: var(--on-accent); font-weight: 600; }
.hub-count { font-size: .72rem; font-variant-numeric: tabular-nums; opacity: .65; }

.hub-topbar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 0 -2.6rem; padding: 1.1rem 2.6rem .9rem;
  background: color-mix(in srgb, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%); border-bottom: 1px solid var(--line); }
.hub-topbar h1 { margin: 0; font-size: 1.65rem; font-weight: 700; letter-spacing: -.025em; }
.hub-meta { color: var(--muted); font-size: .8rem; }
.hub-spacer { flex: 1; }
.hub-capture { position: relative; }
.hub-capture > summary { list-style: none; cursor: pointer; }
.hub-capture > summary::-webkit-details-marker { display: none; }
.hub-capture-box { position: absolute; right: 0; top: calc(100% + .5rem); width: min(360px, 86vw); padding: .8rem; display: flex; flex-direction: column; gap: .55rem; align-items: flex-end;
  background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.hub-capture-box textarea { width: 100%; min-height: 6rem; resize: vertical; font: inherit; font-size: .9rem; padding: .55rem .65rem; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); }

.hub-applinks { display: flex; flex-wrap: wrap; gap: .4rem; }
.hub-applinks a { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; border: 1px solid var(--line); background: var(--bg-elevated); color: var(--ink-secondary); font-size: .8rem; font-weight: 500; }
.hub-applinks a:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.hub-applinks a span { color: var(--muted); font-size: .75rem; }

.hub-lead { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -.015em; line-height: 1.35; max-width: 60rem; }
.hub-lead .muted { font-weight: 500; }
.hub-attention { display: flex; flex-wrap: wrap; gap: .45rem; }
.hub-chip { display: inline-flex; align-items: baseline; gap: .35rem; padding: .4rem .8rem; border-radius: 999px; background: var(--fill); color: var(--ink-secondary); font-size: .85rem; }
.hub-chip b { font-size: .95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
a.hub-chip:hover { text-decoration: none; background: var(--fill-hover); }
.hub-chip.is-bad { background: var(--fail-soft); color: var(--fail); } .hub-chip.is-bad b { color: var(--fail); }
.hub-chip.is-warn { background: var(--warn-soft); color: var(--warn); } .hub-chip.is-warn b { color: var(--warn); }
.hub-chip.is-ok { background: var(--ok-soft); color: var(--ok); }

.hub-health { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; font-size: .82rem; color: var(--ink-secondary); }
.hub-health li { display: flex; align-items: center; gap: .4rem; }
.hub-health b { color: var(--ink); font-weight: 600; }
.hub-light { width: .5rem; height: .5rem; border-radius: 50%; background: var(--muted); flex: none; }
.is-ok > .hub-light { background: var(--green); } .is-warn > .hub-light { background: var(--orange); } .is-bad > .hub-light { background: var(--red); }

.hub-grid { display: grid; gap: .9rem; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.hub-grid > .col-3 { grid-column: span 3; } .hub-grid > .col-4 { grid-column: span 4; } .hub-grid > .col-6 { grid-column: span 6; }
.hub-grid > .col-8 { grid-column: span 8; } .hub-grid > .col-12 { grid-column: span 12; }
.hub-grid > div > .hub-card { height: 100%; }

.hub-card { background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1rem 1.15rem; box-shadow: var(--shadow); min-width: 0; }
.hub-card h3 { margin: 0 0 .7rem; font-size: .86rem; font-weight: 650; display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.hub-card h4 { margin: .8rem 0 .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.hub-card p { color: var(--ink-secondary); font-size: .88rem; margin: .4rem 0; }
.hub-src { font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
a.hub-src:hover { color: var(--accent); text-decoration: none; }
.hub-empty { color: var(--muted); font-size: .87rem; margin: .2rem 0; }
.hub-empty b { color: var(--ink-secondary); }
.hub-err { color: var(--fail); font-size: .85rem; display: block; }
.hub-ok { color: var(--ok); font-size: .87rem; margin: .2rem 0; }
.hub-bad { color: var(--fail); }
.hub-note { font-size: .78rem !important; color: var(--muted) !important; }

.hub-tile { display: flex; flex-direction: column; gap: .2rem; }
.hub-tile-label { display: flex; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--ink-secondary); }
.hub-tile-label .hub-src { font-size: .6rem; }
.hub-tile-value { font-size: 2rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hub-tile-value.is-na { font-size: 1.1rem; font-weight: 500; color: var(--muted); letter-spacing: 0; padding: .45rem 0 .2rem; }
.hub-tile-delta { display: flex; flex-wrap: wrap; gap: .1rem .5rem; font-size: .76rem; color: var(--muted); }
.hub-tile-delta .up { color: var(--ok); font-weight: 600; } .hub-tile-delta .down { color: var(--fail); font-weight: 600; }
.hub-spark { width: 100%; height: 34px; margin-top: .35rem; }
.hub-spark path { fill: none; stroke: var(--accent-fill); stroke-width: 1.6; vector-effect: non-scaling-stroke; }

/* series: amber first, then Apple blue, green, purple */
.hub-line { display: block; width: 100%; height: auto; overflow: visible; }
.hub-line .grid { stroke: var(--line); stroke-width: 1; }
.hub-line .axis { fill: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.hub-line .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hub-line .area { opacity: .09; }
.hub-line .s1 { stroke: var(--accent-fill); } .hub-line .area.s1 { fill: var(--accent-fill); stroke: none; }
.hub-line .s2 { stroke: var(--blue); } .hub-line .area.s2 { fill: var(--blue); stroke: none; }
.hub-line .s3 { stroke: var(--green); } .hub-line .area.s3 { fill: var(--green); stroke: none; }
.hub-line .s4 { stroke: var(--purple); } .hub-line .area.s4 { fill: var(--purple); stroke: none; }
.hub-line .col rect { fill: transparent; }
.hub-line .col line { stroke: var(--line-strong); stroke-dasharray: 2 3; opacity: 0; }
.hub-line .col:hover line { opacity: 1; }
.hub-legend { display: flex; flex-wrap: wrap; gap: .9rem; font-size: .76rem; color: var(--ink-secondary); margin: -.2rem 0 .5rem; }
.hub-legend i { display: inline-block; width: .6rem; height: .6rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.hub-legend .s1 { background: var(--accent-fill); } .hub-legend .s2 { background: var(--blue); } .hub-legend .s3 { background: var(--green); } .hub-legend .s4 { background: var(--purple); }
.hub-tableview { margin-top: .4rem; }
.hub-tableview summary { font-size: .74rem; color: var(--muted); cursor: pointer; }
.hub-tableview .hub-table { margin-top: .4rem; }

.hub-bars { display: flex; flex-direction: column; gap: .45rem; }
.hub-bar { display: grid; grid-template-columns: minmax(6rem, 9rem) 1fr auto; gap: .6rem; align-items: center; font-size: .82rem; }
.hub-bar .name { color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-bar .track { height: .6rem; background: var(--fill); border-radius: 99px; overflow: hidden; }
.hub-bar .fill { display: block; height: 100%; min-width: 2px; background: var(--accent-fill); border-radius: 99px; }
.hub-bar .num { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.hub-bar .num small { color: var(--muted); font-weight: 500; margin-left: .2rem; }

.hub-scroll { overflow-x: auto; }
.hub-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.hub-table th { text-align: left; font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: .3rem .6rem .45rem 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.hub-table td { padding: .5rem .6rem .5rem 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.hub-table tr:last-child td { border-bottom: 0; }
.hub-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.hub-table small { display: block; color: var(--muted); font-size: .76rem; }

.hub-list { list-style: none; margin: 0; padding: 0; }
.hub-list li { display: flex; justify-content: space-between; gap: .8rem; padding: .32rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; }
.hub-list li:last-child { border-bottom: 0; }
.hub-list span { color: var(--ink-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-list b { font-variant-numeric: tabular-nums; }
.hub-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.hub-pill { display: inline-block; font-style: normal; font-size: .7rem; font-weight: 600; padding: .1rem .5rem; border-radius: 99px; background: var(--fill); color: var(--ink-secondary); white-space: nowrap; }
.hub-pill.is-ok, .hub-pill.is-done, .hub-pill.is-worked { background: var(--ok-soft); color: var(--ok); }
.hub-pill.is-warn, .hub-pill.is-at_risk, .hub-pill.is-blocked { background: var(--warn-soft); color: var(--warn); }
.hub-pill.is-bad, .hub-pill.is-missed, .hub-pill.is-did_not_work { background: var(--fail-soft); color: var(--fail); }
.hub-pill.is-doing { background: var(--accent-soft); color: var(--accent); }

.hub-feed, .hub-when, .hub-timeline, .hub-issues, .hub-items { list-style: none; margin: 0; padding: 0; }
.hub-feed li { display: grid; grid-template-columns: 5.6rem 1fr; gap: .1rem .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line); font-size: .84rem; }
.hub-feed li:last-child { border-bottom: 0; }
.hub-feed time { color: var(--muted); font-size: .76rem; grid-row: span 2; }
.hub-feed small { color: var(--muted); font-size: .76rem; }
.hub-feed li.is-strong b { color: var(--accent); }
.hub-now { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; font-size: .8rem; color: var(--muted); }
.hub-now span { background: var(--ok-soft); color: var(--ok); padding: .1rem .5rem; border-radius: 99px; }

.hub-when li, .hub-timeline li { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: .7rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .87rem; }
.hub-when li:last-child, .hub-timeline li:last-child { border-bottom: 0; }
.hub-when time, .hub-timeline time { color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
.hub-when time.is-late { color: var(--fail); font-weight: 600; }
.hub-when small, .hub-timeline small { display: block; color: var(--muted); font-size: .76rem; }
.hub-timeline li { grid-template-columns: 6rem 1fr auto; position: relative; }
.hub-timeline li.is-risk span { color: var(--warn); }

.hub-issues li { display: flex; flex-direction: column; gap: .1rem; padding: .55rem 0 .55rem .7rem; border-bottom: 1px solid var(--line); border-left: 3px solid var(--red); margin-bottom: .2rem; font-size: .85rem; }
.hub-issues li.is-warning { border-left-color: var(--orange); }
.hub-issues li:last-child { border-bottom: 0; }
.hub-issues small, .hub-issues span { color: var(--muted); font-size: .76rem; }

.hub-add > summary, .hub-closed > summary { cursor: pointer; font-weight: 650; font-size: .88rem; }
.hub-add[open] > summary { margin-bottom: .7rem; }
.hub-closed[open] > summary { margin-bottom: .4rem; }
.hub-form { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; align-items: end; }
.hub-form label { display: flex; flex-direction: column; gap: .25rem; font-size: .74rem; font-weight: 600; color: var(--muted); }
.hub-form label.wide { grid-column: span 2; }
.hub-form input, .hub-form textarea, .hub-item-form select, .hub-item-form input { font: inherit; font-size: .88rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .4rem .55rem; }
.hub-form textarea { resize: vertical; }
.hub-form button { justify-self: start; }
.hub-item { display: grid; grid-template-columns: 4.2rem 1fr auto; gap: .7rem; align-items: start; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.hub-item:last-child { border-bottom: 0; }
.hub-item time { color: var(--muted); font-size: .78rem; padding-top: .15rem; font-variant-numeric: tabular-nums; }
.hub-item.is-late time { color: var(--fail); font-weight: 600; }
.hub-item-main b { font-size: .9rem; }
.hub-item-main small { margin-left: .45rem; color: var(--muted); font-size: .74rem; }
.hub-item-main p { margin: .2rem 0 0; font-size: .83rem; }
.hub-item-form { display: flex; gap: .35rem; align-items: center; flex-wrap: nowrap; justify-content: flex-end; }
.hub-item-form select, .hub-item-form input { width: auto; min-width: 0; margin: 0; font-size: .8rem; padding: .22rem .4rem; }
.hub-x { border: 0; background: none; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: .2rem .4rem; border-radius: var(--radius-sm); cursor: pointer; }
.hub-x:hover { background: var(--fail-soft); color: var(--fail); }

.hub-connect { padding-top: .3rem; padding-bottom: .3rem; }
.hub-connect-row { display: grid; grid-template-columns: minmax(14rem, 1fr) 2fr; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.hub-connect-row:last-child { border-bottom: 0; }
.hub-connect-row > div { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.hub-connect-row p { margin: 0; font-size: .86rem; }
.hub-vars { display: flex; flex-wrap: wrap; gap: .25rem; }
.hub-vars code { font-size: .7rem; }
.hub-vars code.is-missing { color: var(--fail); background: var(--fail-soft); }

@media (max-width: 1100px) {
  .hub-grid > .col-3, .hub-grid > .col-4 { grid-column: span 6; }
  .hub-grid > .col-8 { grid-column: span 12; }
}
@media (max-width: 760px) {
  .hub-shell { grid-template-columns: 1fr; }
  .hub-side { position: static; height: auto; }
  .hub-nav { max-height: 40vh; }
  .hub-main { padding: 0 1rem 3rem; }
  .hub-topbar { margin: 0 -1rem; padding: .8rem 1rem; position: static; }
  .hub-topbar h1 { font-size: 1.35rem; }
  .hub-grid > .col-3, .hub-grid > .col-4, .hub-grid > .col-6 { grid-column: span 12; }
  .hub-tile-value { font-size: 1.6rem; }
  .hub-two, .hub-connect-row { grid-template-columns: 1fr; }
  .hub-form { grid-template-columns: 1fr; } .hub-form label.wide { grid-column: auto; }
  .hub-item { grid-template-columns: 1fr; gap: .3rem; } .hub-item-form { justify-content: flex-start; flex-wrap: wrap; }
  .hub-capture-box { right: auto; left: 0; }
}