/* =============================================================================
   Mighty Study — Stylesheet
   A MightyJoe Project
   -----------------------------------------------------------------------------
   Lucid Indigo: Mighty Study's own place in the Mighty palette.

     Reset  — soft frost blue      (#9CC2EC)  calm, recovering
     Focus  — electric cyan/violet (#4CD9FF)  sharp, decisive
     Vital  — restorative teal     (#3FD9C0)  warm, supportive
     Study  — lucid indigo + gold  (#93B4FF)  clear, considered

   Indigo carries every primary action. Gold is reserved for one idea and one
   idea only: recall — the thing you are trying to keep. Sage marks confidence.
   Geometry sits between Focus's architectural corners and Vital's soft ones,
   because studying is neither urgent nor restful; it is deliberate.

    1.  Design tokens
    2.  Base, resets, shell
    3.  Navigation (bottom bar → left rail)
    4.  Typography & utilities
    5.  Cards & panels
    6.  Buttons, chips, switches, fields
    7.  Today
    8.  Subjects & topics
    9.  Study session (focused screen)
   10.  Recall check & completion
   11.  Progress
   12.  Settings & ecosystem
   13.  Onboarding
   14.  Sheets, dialogs, toast
   15.  Responsive
   16.  Motion & print
   ========================================================================== */

/* ────────────────────────────────────────────────── 1. DESIGN TOKENS ────── */
:root {
  color-scheme: dark;

  /* Lucid indigo — every primary action. */
  --accent: #93B4FF;             /* ~9.6:1 on --bg */
  --accent-bright: #C9D8FF;      /* accented text on dark */
  --accent-deep: #3E5CC9;        /* pressed and deep states */
  --accent-soft: rgba(147, 180, 255, 0.12);
  --accent-line: rgba(147, 180, 255, 0.30);

  /* Gold — recall, retention, "what stuck". Never a generic highlight. */
  --recall: #F0C87E;
  --recall-soft: rgba(240, 200, 126, 0.13);
  --recall-line: rgba(240, 200, 126, 0.28);

  /* Sage — confidence and completion. */
  --sage: #7EE0A8;
  --sage-soft: rgba(126, 224, 168, 0.13);

  /* Foundation — near-black with an indigo cast, distinct from its siblings. */
  --bg: #080A14;
  --bg-glow-a: rgba(147, 180, 255, 0.085);
  --bg-glow-b: rgba(240, 200, 126, 0.045);
  --surface: #10141F;
  --surface-2: #161B29;
  --surface-3: #1D2333;
  --surface-hi: rgba(255, 255, 255, 0.035);
  --line: rgba(150, 175, 240, 0.13);
  --line-strong: rgba(147, 180, 255, 0.32);
  --line-soft: rgba(255, 255, 255, 0.055);

  /* Type — every value below is AA or better on --bg and --surface. */
  --text: #ECEFF8;               /* ~16:1 */
  --muted: #A6B0C8;              /* ~9.0:1 */
  --muted-dim: #838EA8;          /* ~5.6:1 — the quietest text allowed */
  --warn: #F0A2A2;
  --ok: #7EE0A8;
  --on-accent: #071026;

  /* Topic status colours, named by meaning so markup never hardcodes a hue. */
  --st-new: #838EA8;
  --st-learning: #93B4FF;
  --st-review: #F0C87E;
  --st-confident: #7EE0A8;

  /* Geometry */
  --r-xs: 9px;
  --r-sm: 12px;
  --r-md: 17px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-pill: 999px;

  --pad: 20px;
  --tap: 48px;
  --shell: 470px;
  --rail: 0px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 12px 30px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 20px 46px rgba(0, 0, 0, 0.52);
  --glow-accent: 0 0 0 1px rgba(147, 180, 255, 0.26), 0 12px 36px rgba(147, 180, 255, 0.15);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.18, 0.9, 0.28, 1);
  --t-fast: 130ms;
  --t: 220ms;
  --t-slow: 440ms;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;
}

/* ───────────────────────────────────────────── 2. BASE, RESETS, SHELL ───── */
*, *::before, *::after { box-sizing: border-box; }

/* Screens, sheets and overlays are toggled with the hidden attribute, and many
   of them are display:flex — which would otherwise beat hidden. Keep this. */
[hidden] { display: none !important; }

/* The root element paints the canvas: the area behind everything, including
   iOS rubber-band overscroll, the space beside content on a short page, and
   the backdrop of an installed PWA before the first frame. Without a
   background here the browser uses its own default, which is white on a device
   set to Light appearance. This declaration is what keeps the standalone app
   dark edge to edge. */
html {
  background-color: var(--bg);
  min-height: 100%;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* The one piece of atmosphere in the whole app. Fixed and cheap; not animated. */
body::before {
  content: "";
  position: fixed;
  inset: -28% -20% auto -20%;
  height: 64vh;
  background:
    radial-gradient(56% 56% at 24% 14%, var(--bg-glow-a), transparent 70%),
    radial-gradient(44% 44% at 84% 2%, var(--bg-glow-b), transparent 72%);
  pointer-events: none;
  z-index: 0;
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: var(--rail);
  /* Deliberately transparent: body::before paints the ambient wash at z-index
     0 and #app sits above it. html and body both carry --bg underneath, so
     there are two opaque dark layers behind this and nothing white shows. */
  background-color: transparent;
}

#main { background-color: transparent; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: calc(env(safe-area-inset-left, 0px) + var(--pad));
  padding-right: calc(env(safe-area-inset-right, 0px) + var(--pad));
}

.screen {
  flex: 1 1 auto;
  display: block;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  /* Room for the fixed bottom nav plus the phone's home indicator. */
  padding-bottom: calc(108px + env(safe-area-inset-bottom, 0px));
  animation: screen-in var(--t-slow) var(--ease-out) both;
  outline: none;
}
body.has-resume .screen { padding-bottom: calc(164px + env(safe-area-inset-bottom, 0px)); }

@keyframes screen-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

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

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -220%);
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  font-weight: 650;
  text-decoration: none;
  z-index: 90;
  transition: transform var(--t) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}
/* Screens take focus on navigation so screen readers land in the new context,
   but they are containers — no visible ring. */
.screen:focus, .screen:focus-visible { outline: none; }

.icon { width: 20px; height: 20px; fill: none; stroke: currentColor;
        stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ──────────────────────────────────────────────────── 3. NAVIGATION ─────── */
.nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-top: 1px solid var(--line);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .nav { background: var(--surface); }
}

.nav-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.nav-btn {
  appearance: none;
  background: none;
  border: 0;
  min-height: var(--tap);
  padding: 7px 2px;
  border-radius: var(--r-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted-dim);
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-btn .icon { width: 22px; height: 22px; }
.nav-btn:hover { color: var(--muted); }
.nav-btn[aria-current="page"] { color: var(--accent); }
.nav-btn[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 1px; left: 50%;
  transform: translateX(-50%);
  width: 18px; height: 2px;
  border-radius: 2px;
  background: var(--accent);
}

.nav-foot {
  margin: 4px 0 0;
  text-align: center;
  font-size: 8.5px;
  letter-spacing: 0.22em;
  color: var(--muted-dim);
  opacity: 0.5;
}

/* Resume bar — only ever visible while a session is live and the user has
   navigated away from it. */
.resume-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  z-index: 45;
  width: min(calc(100% - 32px), var(--shell));
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent-line);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-lift);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}
.resume-bar__pulse {
  width: 9px; height: 9px; flex: none;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(147, 180, 255, 0.55);
  animation: pulse 2.2s var(--ease) infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 9px rgba(147, 180, 255, 0); }
  100% { box-shadow: 0 0 0 0 rgba(147, 180, 255, 0); }
}
.resume-bar__text { flex: 1 1 auto; min-width: 0; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.resume-bar__cta {
  flex: none;
  font-size: 12px; font-weight: 700;
  color: var(--on-accent);
  background: var(--accent);
  padding: 7px 13px;
  border-radius: var(--r-pill);
}

/* ────────────────────────────────────────── 4. TYPOGRAPHY & UTILITIES ───── */
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.015em; line-height: 1.22; }
h1 { font-size: 26px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
p  { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

.head { margin: 4px 0 22px; }
.head h1 { margin-bottom: 6px; }
.head p { color: var(--muted); font-size: 14.5px; }

.eyebrow {
  margin: 0 0 6px;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0.85;
}

.section-label {
  margin: 26px 0 10px;
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted-dim);
}
.section-label:first-of-type { margin-top: 18px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 26px 0 10px;
}
.section-head .section-label { margin: 0; }

.muted { color: var(--muted); }
.dim   { color: var(--muted-dim); }
.tnum  { font-variant-numeric: tabular-nums; }
.stack > * + * { margin-top: 10px; }

.fine-print {
  margin: 30px 0 6px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted-dim);
  opacity: 0.65;
}

/* ─────────────────────────────────────────────────── 5. CARDS & PANELS ──── */
.card {
  background: linear-gradient(180deg, var(--surface-hi), transparent 40%), var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--pad);
  box-shadow: var(--shadow-card);
}
.card + .card { margin-top: 12px; }
.card--flush { padding: 0; overflow: hidden; }
.card--accent { border-color: var(--accent-line); box-shadow: var(--glow-accent); }
.card--quiet { background: var(--surface); box-shadow: none; }

.rows > * + * { border-top: 1px solid var(--line-soft); }

.empty {
  text-align: center;
  padding: 30px 20px;
}
.empty__icon {
  width: 54px; height: 54px;
  margin: 0 auto 14px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.empty__icon .icon { width: 26px; height: 26px; }
.empty h3 { margin-bottom: 6px; }
.empty p { color: var(--muted); font-size: 14px; max-width: 30ch; margin-inline: auto; }
.empty .btn { margin-top: 16px; }

/* ─────────────────────────────── 6. BUTTONS, CHIPS, SWITCHES, FIELDS ────── */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 12px 20px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  background: var(--surface-3);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 650;
  cursor: pointer;
  text-align: center;
  transition: transform var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn .icon { width: 18px; height: 18px; }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 10px 26px rgba(147, 180, 255, 0.18);
}
.btn--primary:hover { background: var(--accent-bright); }

.btn--big {
  width: 100%;
  min-height: 58px;
  font-size: 16.5px;
  border-radius: var(--r-lg);
}

.btn--ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--quiet { background: var(--surface-2); color: var(--muted); }
.btn--quiet:hover { color: var(--text); }
.btn--danger { background: transparent; border-color: rgba(240, 162, 162, 0.4); color: var(--warn); }
.btn--danger:hover { background: rgba(240, 162, 162, 0.1); }
.btn--wide { width: 100%; }
.btn--sm { min-height: 40px; padding: 8px 14px; font-size: 13.5px; }

.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1 1 0; }

/* Icon-only control — used for row actions. Always 44px+ despite looking small. */
.icon-btn {
  appearance: none;
  width: 44px; height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.icon-btn:hover { color: var(--text); background: var(--surface-3); }
.icon-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.icon-btn--warn:hover { color: var(--warn); }

/* Chips — the app's main low-typing input. */
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  appearance: none;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover { color: var(--text); border-color: var(--line-strong); }
.chip[aria-pressed="true"], .chip.is-on {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-bright);
}
.chip--grow { flex: 1 1 auto; justify-content: center; }
.chip .icon { width: 16px; height: 16px; }

/* Status chips carry meaning-specific colour. */
.chip[data-status="learning"][aria-pressed="true"]  { color: var(--st-learning); border-color: var(--accent-line);   background: var(--accent-soft); }
.chip[data-status="review"][aria-pressed="true"]    { color: var(--st-review);   border-color: var(--recall-line);   background: var(--recall-soft); }
.chip[data-status="confident"][aria-pressed="true"] { color: var(--st-confident);border-color: rgba(126,224,168,.3); background: var(--sage-soft); }
.chip[data-status="not-started"][aria-pressed="true"]{ color: var(--text);       border-color: var(--line-strong);   background: var(--surface-3); }

/* Switch */
.switch { position: relative; flex: none; margin-left: auto; display: inline-flex; }
.switch input {
  position: absolute; inset: 0; opacity: 0; margin: 0;
  width: 100%; height: 100%; cursor: pointer;
}
.switch__track {
  width: 50px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line);
  display: block;
  transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.switch__knob {
  display: block;
  width: 22px; height: 22px;
  margin: 3px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--t) var(--ease), background var(--t) var(--ease);
}
.switch input:checked + .switch__track { background: var(--accent-soft); border-color: var(--accent-line); }
.switch input:checked + .switch__track .switch__knob { transform: translateX(20px); background: var(--accent); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Fields */
.field { display: block; }
.field.grow { flex: 1 1 auto; }
.field + .field { margin-top: 14px; }
.field__label {
  display: block;
  margin-bottom: 7px;
  font-size: 13px;
  font-weight: 650;
  color: var(--muted);
}
.field__hint { margin: 7px 0 0; font-size: 12.5px; color: var(--muted-dim); }
.field__error { margin: 7px 0 0; font-size: 12.5px; color: var(--warn); }

.input, .textarea, .select {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming on focus */
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--muted-dim); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent-line);
  background: var(--surface-3);
}
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.input[aria-invalid="true"] { border-color: rgba(240, 162, 162, 0.5); }
.textarea { min-height: 104px; resize: vertical; line-height: 1.5; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A6B0C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  padding-right: 40px;
}
.select--inline { width: auto; min-width: 140px; margin-left: auto; }

.num-pair { display: flex; gap: 10px; }
.num-pair .field { flex: 1 1 0; margin-top: 0; }

/* Segmented count stepper — practice results, no typing needed on mobile. */
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper .input { text-align: center; }

/* ─────────────────────────────────────────────────────────── 7. TODAY ───── */
.today-head { margin: 2px 0 18px; }
.today-head .greet { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.today-head .sub { margin-top: 4px; color: var(--muted); font-size: 14px; }

.focus-card { position: relative; overflow: hidden; }
.focus-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -60% auto;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(147, 180, 255, 0.10), transparent 68%);
  pointer-events: none;
}
.focus-card__eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 750; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
}
.focus-card__subject { font-size: 13.5px; color: var(--muted); margin-bottom: 3px; }
.focus-card__topic { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.focus-card__why { margin-top: 8px; font-size: 13.5px; color: var(--muted); }
.focus-card .btn { margin-top: 18px; }
.focus-card__alt {
  margin-top: 10px;
  display: flex; justify-content: center;
}

/* Countdown pill for an exam date. */
.countdown {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--recall-soft);
  border: 1px solid var(--recall-line);
  color: var(--recall);
  font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.countdown .icon { width: 14px; height: 14px; }
.countdown--soon { background: rgba(240, 162, 162, 0.12); border-color: rgba(240, 162, 162, 0.32); color: var(--warn); }
.countdown--calm { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }

/* Goal ring + numbers */
.goal {
  display: flex;
  align-items: center;
  gap: 16px;
}
.goal__ring { width: 76px; height: 76px; flex: none; position: relative; }
.goal__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.goal__track { stroke: var(--surface-3); }
.goal__fill  { stroke: var(--accent); stroke-linecap: round;
               transition: stroke-dashoffset var(--t-slow) var(--ease-out); }
.goal__fill--met { stroke: var(--sage); }
.goal__pct {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 15px; font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.goal__body { min-width: 0; }
.goal__value { font-size: 21px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.goal__value small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.goal__label { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* Small metric strip */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 12px;
  text-align: center;
}
.metric__value { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.metric__value--accent { color: var(--accent); }
.metric__value--recall { color: var(--recall); }
.metric__label { margin-top: 3px; font-size: 11px; color: var(--muted-dim); letter-spacing: 0.03em; }

/* Today's small plan */
.plan-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px var(--pad);
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 56px;
}
.plan-item:hover { background: var(--surface-2); }
.plan-item__dot {
  width: 9px; height: 9px; flex: none; border-radius: 50%;
  background: var(--st-new);
}
/* These rows are built from <span>s inside a <button> (a <div> would be invalid
   there), so the stacked parts need display:block or they run together on one
   line. Same reason on .review-row and .history-row below. */
.plan-item__body { flex: 1 1 auto; min-width: 0; display: block; }
.plan-item__name { display: block; font-size: 14.5px; font-weight: 620;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-item__meta { display: block; font-size: 12px; color: var(--muted-dim); margin-top: 2px;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-item__done { color: var(--sage); flex: none; }
.plan-item.is-done .plan-item__name { color: var(--muted); text-decoration: line-through;
                                      text-decoration-color: var(--line-strong); }

/* One-line summary strip */
.summary-line {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--muted);
}
.summary-line .icon { flex: none; color: var(--accent); margin-top: 1px; }
.summary-line strong { color: var(--text); font-weight: 650; }

/* ────────────────────────────────────────────── 8. SUBJECTS & TOPICS ────── */
.subject-card { padding: 0; overflow: hidden; }
.subject-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px var(--pad) 14px;
}
.subject-card__body { flex: 1 1 auto; min-width: 0; }
.subject-card__name {
  font-size: 17px; font-weight: 700; letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.subject-card__meta {
  margin-top: 5px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted-dim);
}
.subject-card__actions { display: flex; gap: 2px; flex: none; }
.subject-card.is-archived { opacity: 0.6; }

/* Progress bar shared by subject cards and Progress screen. */
.bar {
  height: 7px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
  display: flex;
}
.bar__seg { height: 100%; transition: width var(--t-slow) var(--ease-out); }
.bar__seg--learning  { background: var(--st-learning); }
.bar__seg--review    { background: var(--st-review); }
.bar__seg--confident { background: var(--st-confident); }

.legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; }
.legend__item { display: inline-flex; align-items: center; gap: 6px;
                font-size: 11.5px; color: var(--muted-dim); }
.legend__swatch { width: 8px; height: 8px; border-radius: 2px; }

.topic-list { border-top: 1px solid var(--line-soft); }
.topic-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px 10px var(--pad);
  min-height: 56px;
}
.topic-row + .topic-row { border-top: 1px solid var(--line-soft); }
.topic-row__status {
  width: 10px; height: 10px; flex: none; border-radius: 50%;
  background: var(--st-new);
}
.topic-row__status[data-status="learning"]  { background: var(--st-learning); }
.topic-row__status[data-status="review"]    { background: var(--st-review);
                                              box-shadow: 0 0 0 3px var(--recall-soft); }
.topic-row__status[data-status="confident"] { background: var(--st-confident); }
.topic-row__body { flex: 1 1 auto; min-width: 0; }
.topic-row__name { font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.topic-row__meta { font-size: 11.5px; color: var(--muted-dim); margin-top: 2px;
                   display: flex; flex-wrap: wrap; gap: 8px; }
.topic-row__meta .tag--review { color: var(--recall); }
.topic-row__actions { display: flex; gap: 0; flex: none; }

.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 650; letter-spacing: 0.02em;
}
.tag--new       { color: var(--st-new); }
.tag--learning  { color: var(--st-learning); }
.tag--review    { color: var(--st-review); }
.tag--confident { color: var(--st-confident); }

.subject-foot {
  display: flex; gap: 8px; padding: 12px var(--pad) 16px;
  border-top: 1px solid var(--line-soft);
}
.subject-foot .btn { flex: 1 1 0; }

/* Reorder handles get their own affordance on desktop; on mobile the two
   arrow buttons are the whole story (drag on a phone is a precision task). */
.reorder { display: flex; flex-direction: column; }
.reorder .icon-btn { width: 34px; height: 28px; }
.reorder .icon-btn .icon { width: 15px; height: 15px; }

/* ─────────────────────────────────────── 9. STUDY SESSION (FOCUSED) ─────── */
.session {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  animation: session-in var(--t) var(--ease-out) both;
}
@keyframes session-in {
  from { opacity: 0; transform: scale(0.985); }
  to   { opacity: 1; transform: none; }
}
/* A calmer, deeper backdrop than the rest of the app: fewer things to look at. */
.session::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 52% at 50% 26%, rgba(147, 180, 255, 0.10), transparent 72%);
  pointer-events: none;
}
.session__inner {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + 22px)
    calc(env(safe-area-inset-right, 0px) + var(--pad))
    calc(env(safe-area-inset-bottom, 0px) + 22px)
    calc(env(safe-area-inset-left, 0px) + var(--pad));
}
.session__top { display: flex; align-items: flex-start; gap: 12px; }
.session__label { flex: 1 1 auto; min-width: 0; }
.session__subject {
  font-size: 11px; font-weight: 750; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent); opacity: 0.85;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.session__topic { margin-top: 5px; font-size: 20px; font-weight: 700;
                  letter-spacing: -0.02em; overflow-wrap: anywhere; }
.session__intention {
  margin-top: 14px;
  padding: 12px 14px;
  border-left: 2px solid var(--recall-line);
  background: var(--recall-soft);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 14px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.session__intention span { display: block; font-size: 10.5px; font-weight: 750;
                           letter-spacing: 0.12em; text-transform: uppercase;
                           color: var(--recall); margin-bottom: 4px; }

.session__stage {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px 0;
}
.dial { position: relative; width: min(268px, 72vw); aspect-ratio: 1; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial__track { stroke: var(--surface-2); }
.dial__fill {
  stroke: var(--accent);
  stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(147, 180, 255, 0.35));
  transition: stroke-dashoffset 260ms linear;
}
.is-paused .dial__fill { stroke: var(--muted-dim); filter: none; }
.is-over .dial__fill { stroke: var(--sage); filter: drop-shadow(0 0 12px rgba(126, 224, 168, 0.35)); }
.dial__center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
}
.dial__time {
  font-family: var(--mono);
  font-size: clamp(38px, 13vw, 52px);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.dial__state {
  font-size: 11px; font-weight: 750; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted-dim);
}
.is-paused .dial__state { color: var(--recall); }
.is-over .dial__state { color: var(--sage); }

.session__controls { display: flex; flex-direction: column; gap: 10px; }
.session__controls .btn-row { gap: 10px; }
.session__exit {
  margin-top: 2px;
  display: flex;
  justify-content: center;
}
.link-btn {
  appearance: none; background: none; border: 0;
  min-height: 44px; padding: 10px 14px;
  color: var(--muted-dim); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; border-radius: var(--r-sm);
  text-decoration: underline; text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}
.link-btn:hover { color: var(--text); }
.link-btn--warn:hover { color: var(--warn); }

/* ───────────────────────────────────── 10. RECALL CHECK & COMPLETION ────── */
.recall__step + .recall__step { margin-top: 22px; }
.recall__q {
  font-size: 15.5px; font-weight: 650; margin-bottom: 4px;
}
.recall__hint { font-size: 12.5px; color: var(--muted-dim); margin-bottom: 11px; }

.scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.scale__btn {
  appearance: none;
  min-height: 56px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
  font: inherit; font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  transition: all var(--t-fast) var(--ease);
}
.scale__btn small { font-size: 9px; font-weight: 650; letter-spacing: 0.04em; opacity: 0.8; }
.scale__btn:hover { border-color: var(--line-strong); color: var(--text); }
.scale__btn[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent-line);
  color: var(--accent-bright);
}
.scale__ends { display: flex; justify-content: space-between; margin-top: 7px;
               font-size: 11px; color: var(--muted-dim); }

.done-hero { text-align: center; padding: 6px 0 4px; }
.done-hero__mark {
  width: 72px; height: 72px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--sage-soft);
  border: 1px solid rgba(126, 224, 168, 0.32);
  color: var(--sage);
  animation: mark-in 520ms var(--ease-out) both;
}
.done-hero__mark .icon { width: 32px; height: 32px; stroke-width: 2.2; }
@keyframes mark-in {
  from { opacity: 0; transform: scale(0.82); }
  to   { opacity: 1; transform: none; }
}
.done-hero h2 { margin-bottom: 8px; }
.done-hero p { color: var(--muted); font-size: 14.5px; }
.done-stats {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
  margin-top: 18px;
}
.done-stat {
  padding: 10px 16px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line);
  text-align: center;
  min-width: 92px;
}
.done-stat__value { font-size: 18px; font-weight: 750; font-variant-numeric: tabular-nums; }
.done-stat__label { font-size: 10.5px; color: var(--muted-dim); margin-top: 2px; letter-spacing: 0.04em; }

/* ──────────────────────────────────────────────────────── 11. PROGRESS ──── */
.week-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 6px;
  height: 116px;
  padding-top: 6px;
}
.week-day { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; }
.week-day__col {
  width: 100%;
  max-width: 30px;
  height: 84px;
  border-radius: var(--r-xs);
  background: var(--surface-3);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  position: relative;
}
.week-day__bar {
  width: 100%;
  border-radius: var(--r-xs);
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
  transition: height var(--t-slow) var(--ease-out);
  min-height: 3px;
}
.week-day__bar--met { background: linear-gradient(180deg, var(--sage), #2E8B63); }
.week-day__bar--zero { background: var(--surface-3); min-height: 0; }
.week-day__goal {
  position: absolute; left: 0; right: 0;
  border-top: 1px dashed var(--line-strong);
  pointer-events: none;
}
.week-day__label { font-size: 10.5px; color: var(--muted-dim); font-weight: 650; }
.week-day.is-today .week-day__label { color: var(--accent); }

.readiness {
  display: flex; align-items: center; gap: 13px;
}
.readiness__badge {
  flex: none;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 750; letter-spacing: 0.02em;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--muted);
}
.readiness__badge[data-band="1"] { color: var(--muted); }
.readiness__badge[data-band="2"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.readiness__badge[data-band="3"] { color: var(--recall); border-color: var(--recall-line); background: var(--recall-soft); }
.readiness__badge[data-band="4"] { color: var(--sage); border-color: rgba(126,224,168,.3); background: var(--sage-soft); }
.readiness__text { font-size: 12.5px; color: var(--muted-dim); }

.history-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px var(--pad);
  min-height: 60px;
}
.history-row__mark {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 11.5px; font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.history-row__mark[data-conf="high"] { background: var(--sage-soft); color: var(--sage); }
.history-row__mark[data-conf="low"]  { background: var(--recall-soft); color: var(--recall); }
.history-row__body { flex: 1 1 auto; min-width: 0; display: block; }
.history-row__topic { display: block; font-size: 14px; font-weight: 620; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
.history-row__meta { display: block; font-size: 11.5px; color: var(--muted-dim); margin-top: 2px;
                     overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-row__note {
  margin: 0 var(--pad) 13px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border-left: 2px solid var(--recall-line);
  font-size: 13px; color: var(--muted);
  overflow-wrap: anywhere;
}

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

.review-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 13px var(--pad); min-height: 56px;
  background: none; border: 0; font: inherit; color: inherit;
  text-align: left; cursor: pointer;
}
.review-row:hover { background: var(--surface-2); }
.review-row__body { flex: 1 1 auto; min-width: 0; display: block; }
.review-row__name { display: block; font-size: 14px; font-weight: 620; overflow-wrap: anywhere; }
.review-row__meta { display: block; font-size: 11.5px; color: var(--muted-dim); margin-top: 2px; }
.review-row .icon { color: var(--muted-dim); flex: none; }

/* ─────────────────────────────────────────── 12. SETTINGS & ECOSYSTEM ───── */
.set-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 14px var(--pad);
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}
button.set-row { cursor: pointer; }
button.set-row:hover { background: var(--surface-2); }
.set-row--stack { flex-direction: column; align-items: stretch; gap: 11px; }
.set-row__icon { flex: none; color: var(--muted); display: grid; place-items: center; }
.set-row__label { font-size: 14.5px; font-weight: 620; flex: 1 1 auto; min-width: 0; }
.set-row__label small {
  display: block; margin-top: 3px;
  font-size: 12px; font-weight: 500; color: var(--muted-dim); line-height: 1.42;
}
.set-row__value { flex: none; margin-left: auto; font-size: 13.5px; font-weight: 650; color: var(--muted); }
.set-row__value--accent { color: var(--accent); }
.set-row__value--warn { color: var(--warn); }

.disclaimer-inline { display: flex; gap: 11px; align-items: flex-start; }
.disclaimer-inline .icon { flex: none; color: var(--accent); margin-top: 2px; }
.disclaimer-inline p { font-size: 13px; color: var(--muted); margin: 0; }

.about__lede { font-size: 15px; color: var(--text); }
.about__disclaimer { font-size: 12.5px; color: var(--muted-dim); line-height: 1.55; }
.about__disclaimer strong { color: var(--muted); }
.about__version { font-size: 11.5px; color: var(--muted-dim); margin-top: 12px; }

.eco-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px var(--pad); }
.eco-row__mark {
  width: 34px; height: 34px; flex: none;
  border-radius: var(--r-xs);
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.eco-row__mark .icon { width: 17px; height: 17px; }
.eco-row__body { min-width: 0; display: block; }
.eco-row__name { display: block; font-size: 14px; font-weight: 650; }
.eco-row__name .here {
  margin-left: 7px; font-size: 10px; font-weight: 750; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
  padding: 2px 7px; border-radius: var(--r-pill);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.eco-row__role { display: block; font-size: 12.5px; color: var(--muted-dim); margin-top: 2px; }
.eco-foot {
  padding: 4px var(--pad) 16px;
  font-size: 12px; color: var(--muted-dim); line-height: 1.5;
}

/* ─────────────────────────────────────────────────────── 13. ONBOARDING ─── */
.onboard {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.onboard::before {
  content: "";
  position: fixed;
  inset: -25% -20% auto -20%;
  height: 60vh;
  background: radial-gradient(56% 56% at 30% 12%, var(--bg-glow-a), transparent 70%);
  pointer-events: none;
}
.onboard__inner {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding:
    calc(env(safe-area-inset-top, 0px) + 26px)
    calc(env(safe-area-inset-right, 0px) + var(--pad))
    calc(env(safe-area-inset-bottom, 0px) + 26px)
    calc(env(safe-area-inset-left, 0px) + var(--pad));
}
.onboard__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}
/* Keeps the dots in the same place whether or not there is a Back button, so
   the progress indicator does not jump between steps. */
.onboard__head-spacer { width: 44px; flex: none; }
.onboard__head .icon-btn { margin-left: -10px; }

.onboard__dots { display: flex; gap: 6px; flex: 1 1 auto; }
.onboard__dot {
  height: 3px; flex: 1 1 0; border-radius: 2px; background: var(--surface-3);
  transition: background var(--t) var(--ease);
}
.onboard__dot.is-on { background: var(--accent); }
.onboard__body { flex: 1 1 auto; }
.onboard__body h2 { font-size: 25px; margin-bottom: 8px; }
.onboard__body > p { color: var(--muted); font-size: 14.5px; margin-bottom: 22px; }
.onboard__foot { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.onboard__note {
  margin: 6px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted-dim);
  text-align: center;
}

/* A revealed optional field — the deadline picker, the study intention. */
.reveal { margin-top: 16px; }

/* Big tappable answers. The app's main input: one decision, 2–5 options, no
   typing. Full-width rows rather than chips so long labels never truncate and
   every target clears 44px on a 390px screen. */
.choice-list { display: flex; flex-direction: column; gap: 10px; }
.choice {
  appearance: none;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.choice:hover { border-color: var(--line-strong); background: var(--surface-2); }
.choice:active { transform: scale(0.99); }
.choice__label {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-size: 15.5px;
  font-weight: 620;
}
.choice__label small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted-dim);
  line-height: 1.42;
}
.choice__mark { flex: none; color: var(--muted-dim); display: grid; place-items: center; }
.choice__mark .icon { width: 18px; height: 18px; }
/* The tick only exists for selectable choices, and only shows when selected. */
.choice[aria-pressed] .choice__mark { opacity: 0; }
.choice[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}
.choice[aria-pressed="true"] .choice__label { color: var(--accent-bright); }
.choice[aria-pressed="true"] .choice__mark { opacity: 1; color: var(--accent); }

.brandmark {
  display: flex; align-items: center; gap: 12px; margin-bottom: 26px;
}
/* The welcome screen leads with the mark, so it gets more room than the
   inline version. */
.brandmark--hero { margin-bottom: 30px; }
.brandmark--hero .brandmark__glyph { width: 54px; height: 54px; }
.brandmark--hero .brandmark__glyph .icon { width: 28px; height: 28px; }
.brandmark--hero .brandmark__name { font-size: 18px; }
.brandmark__glyph {
  width: 46px; height: 46px; flex: none;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  color: var(--accent);
}
.brandmark__glyph .icon { width: 24px; height: 24px; }
/* Built from <span>s, so the two lines need display:block or the tagline runs
   on straight after the name. Same reason as .plan-item and .review-row. */
.brandmark__text { min-width: 0; display: block; }
.brandmark__name { display: block; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.brandmark__tag { display: block; font-size: 12px; color: var(--muted-dim);
                  margin-top: 2px; line-height: 1.4; }

/* ─────────────────────────────────────────── 14. SHEETS, DIALOGS, TOAST ─── */
.scrim {
  position: fixed;
  inset: 0;
  /* Above the full-screen session (70) — a confirmation raised from inside a
     session must sit on top of it, not behind it — and below onboarding (80),
     which never raises one. */
  z-index: 75;
  background: rgba(3, 5, 10, 0.68);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fade-in var(--t) var(--ease) both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  width: 100%;
  max-width: 480px;
  max-height: min(88vh, 720px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--surface);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lift);
  padding: 10px var(--pad) calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  animation: sheet-up var(--t) var(--ease-out) both;
}
@keyframes sheet-up {
  from { transform: translateY(18px); opacity: 0.4; }
  to   { transform: none; opacity: 1; }
}
.sheet__grip {
  width: 38px; height: 4px; border-radius: 2px;
  background: var(--surface-3);
  margin: 0 auto 16px;
}
.sheet__title { font-size: 19px; margin-bottom: 6px; }
.sheet__text { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.sheet__body { margin-top: 16px; }
.sheet__foot { display: flex; gap: 10px; margin-top: 20px; }
.sheet__foot .btn { flex: 1 1 0; }
.sheet__foot--stack { flex-direction: column; }

#toast-host {
  position: fixed;
  left: 50%;
  bottom: calc(94px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 95;
  width: max-content;
  max-width: min(92vw, 420px);
  pointer-events: none;
}
/* During a full-screen session the controls own the bottom of the screen, so
   the toast moves out of their way rather than landing on top of them. */
body.in-session #toast-host {
  bottom: auto;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
}
body.in-session .toast { animation-name: toast-in-top; }
@keyframes toast-in-top {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.toast {
  padding: 12px 18px;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-lift);
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  animation: toast-in var(--t) var(--ease-out) both;
}
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ────────────────────────────────────────────────────── 15. RESPONSIVE ──── */

/* Tablet: more breathing room, two-up metric grids. */
@media (min-width: 600px) {
  :root { --shell: 560px; --pad: 24px; }
  h1 { font-size: 29px; }
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  #toast-host { bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* Desktop: the bottom bar becomes a left rail. Same product, more room. */
/* Desktop: the bottom bar becomes a left rail, built to the same spec as
   Mighty Reset, Mighty Focus and Mighty Vital — 232px, a compact uppercase
   wordmark over a one-line tagline, 48px rows, and a 3px left-edge indicator
   on the active item. The rail is navigation, not a landing page: it should be
   readable at a glance and then get out of the way. */
@media (min-width: 840px) {
  :root { --rail: 232px; --shell: 560px; }

  .nav {
    top: 0; bottom: 0; right: auto;
    width: var(--rail);
    border-top: 0;
    border-right: 1px solid var(--line);
    padding: 28px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--bg) 94%, transparent);
  }

  /* Wordmark and tagline are pseudo-elements, exactly as in Focus and Vital:
     the rail markup stays identical to the mobile bar, and the bottom nav is
     untouched. They are flex items here, hence the explicit `order`. */
  .nav::before {
    content: "MIGHTY STUDY";
    display: block;
    order: 0;
    padding: 0 12px 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--text);
  }
  .nav::after {
    content: "Study with purpose.";
    display: block;
    order: 1;
    padding: 0 12px 22px;
    font-size: 12px;
    letter-spacing: normal;
    color: var(--muted-dim);
  }

  .nav-inner {
    grid-template-columns: 1fr;
    gap: 4px;
    max-width: none;
    order: 2;
  }
  .nav-btn {
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    min-height: 48px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: normal;
    border-radius: var(--r-sm);
  }
  .nav-btn[aria-current="page"] { background: var(--accent-soft); }
  /* The mobile bar marks the active tab with a short underline above it; on
     the rail the same element becomes the slim left-edge indicator. */
  .nav-btn[aria-current="page"]::after {
    top: 50%; left: 0;
    transform: translateY(-50%);
    width: 3px; height: 22px;
    border-radius: 0 3px 3px 0;
  }

  .nav-foot {
    order: 3;
    margin-top: auto;
    padding: 0 12px;
    text-align: left;
    font-size: 10.5px;
    letter-spacing: 0.1em;
    opacity: 1;
    color: var(--muted-dim);
  }

  .screen { padding-top: 40px; padding-bottom: 60px; }
  body.has-resume .screen { padding-bottom: 60px; }
  /* Centring in the space left over from the rail alone would push the column
     to the right of the screen. Shifting back by half the rail width puts it
     on the viewport's optical centre, so the empty space is shared evenly.
     Clamped at 0 so a narrow desktop never pulls content under the rail. */
  .shell {
    margin-left: max(0px, calc((100% - var(--shell)) / 2 - var(--rail) / 2));
    margin-right: auto;
  }

  .resume-bar { left: calc(var(--rail) + 24px); transform: none; bottom: 24px; width: 340px; }
  #toast-host { left: calc(var(--rail) + 50%); bottom: 28px; }

  .metrics { gap: 12px; }
  .scrim { align-items: center; }
  .sheet {
    border-radius: var(--r-xl);
    border-bottom: 1px solid var(--line);
    max-height: min(84vh, 760px);
    padding-bottom: var(--pad);
  }
  .sheet__grip { display: none; }
  .session__inner { max-width: 520px; }
  .dial { width: 300px; }
}

/* Once the rail and a wider column both fit, the column goes back to the width
   it had before the rail moved down to 840px. */
@media (min-width: 1060px) {
  :root { --shell: 640px; }
}

@media (min-width: 1240px) {
  :root { --shell: 720px; }
  .subjects-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .subjects-grid .card + .card { margin-top: 0; }
}

/* Large desktop: the rail grows a little with the screen, and stops there —
   the same ceiling the sibling apps use. It never becomes a wall. */
@media (min-width: 1280px) {
  :root { --rail: 248px; }
}

/* Very short screens (landscape phone): the dial must not push controls off. */
@media (max-height: 620px) {
  .dial { width: min(180px, 42vh); }
  .dial__time { font-size: 32px; }
  .session__stage { gap: 12px; padding: 12px 0; }
}

/* ──────────────────────────────────────────────────── 16. MOTION & PRINT ─── */

/* Two paths to the same place: the OS setting, and the in-app switch which
   stamps data-motion="reduced" on <html>. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
[data-motion="reduced"] *,
[data-motion="reduced"] *::before,
[data-motion="reduced"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

@media print {
  .nav, .resume-bar, #toast-host, .skip-link { display: none !important; }
  body, html { background: #fff; color: #000; }
  .card { border-color: #ccc; box-shadow: none; }
}