/* Pebble Log — an earth-tone SAT error tracker.
   Warm linen surfaces, espresso-brown ink, and a boho palette of rust /
   goldenrod / olive with a muted-teal focus accent. Hex codes are taken
   verbatim from the Earth Tones + Boho Tones reference palettes.
   Restraint over decoration; the signature is the "self-drawing miss". */

:root {
  color-scheme: light;

  /* surfaces — warm linen / cream */
  --bg: #f2eae3;          /* Linen */
  --surface: #fbf6ef;     /* warm near-white card */
  --surface-2: #ebded1;   /* Sandstone — insets / notes */

  /* ink — earth browns */
  --label: #3f2e24;       /* deep espresso */
  --label-2: #6a513f;     /* Cocoa */
  --label-3: #7a6249;     /* walnut, captions */

  /* separators & fills (espresso-tinted) */
  --separator: rgba(74, 53, 40, 0.13);
  --separator-strong: rgba(74, 53, 40, 0.25);
  --fill: rgba(141, 105, 77, 0.16);
  --fill-2: rgba(141, 105, 77, 0.08);

  /* semantic earth accents */
  --red: #994d2c;         /* Rust — wrong pick / needs review / brand */
  --red-tint: rgba(153, 77, 44, 0.15);
  --red-tint-strong: rgba(153, 77, 44, 0.25);   /* danger-button hover (was iOS red) */
  --terracotta: #b56b46;  /* Terracotta — secondary warm accent */
  --green: #5b6b43;       /* deep olive — correct / mastered */
  --green-tint: rgba(91, 107, 67, 0.20);
  --orange: #c2914c;      /* Goldenrod — reviewing / due (fills) */
  --orange-ink: #875b1b;  /* dark goldenrod for text */
  --orange-tint: rgba(194, 145, 76, 0.22);
  --orange-tint-strong: rgba(194, 145, 76, 0.30);  /* "add the fix" hover (was iOS orange) */
  --blue: #5e7e80;        /* Storm teal — focus / interactive accent */
  --blue-tint: rgba(94, 126, 128, 0.20);

  /* Light Boho theming — the exact blush + sage hexes, used in the charts */
  --blush: #D9BDAF;       /* Blush */
  --sage: #8A9A65;        /* Sage */

  /* extra status-palette inks (readable text on the tint) + tints, for the
     customizable triage-status colors (see STATUS_PALETTE in app.js). Inks are
     tuned so ink-on-tint clears WCAG AA on the card surface. */
  --red-ink: #994d2c;
  --green-ink: #4a5736;        /* darker than --green so the olive pill text passes AA */
  --terracotta-ink: #8a4626;   --terracotta-tint: rgba(181, 107, 70, 0.18);
  --blue-ink: #3e5557;
  --sage-ink: #56653a;         --sage-tint: rgba(138, 154, 101, 0.22);
  --cocoa-tint: rgba(106, 81, 63, 0.15);

  /* themed component tokens (overridden in the dark theme below) */
  --btn-bg: var(--label);
  --btn-fg: #fff;
  --btn-bg-hover: #2e211a;
  --bar-bg: rgba(251, 246, 239, 0.72);
  --foot-bg: rgba(251, 246, 239, 0.86);
  --scroll-thumb: rgba(74, 53, 40, 0.38);   /* espresso — only shown while scrolling */

  /* chevron glyph for the custom <select> controls (walnut on linen) */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a6249' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  /* radii */
  --r-sheet: 22px;
  --r-card: 20px;
  --r-btn: 13px;
  --r-field: 11px;
  --r-seg: 9px;

  /* shadows (warm brown-tinted) */
  --shadow-card: 0 1px 2px rgba(74, 53, 40, 0.06), 0 8px 24px -14px rgba(74, 53, 40, 0.20);
  --shadow-pop: 0 12px 40px -10px rgba(74, 53, 40, 0.28);
  --shadow-sheet: 0 24px 70px -18px rgba(74, 53, 40, 0.40);
  --shadow-thumb: 0 1px 3px rgba(74, 53, 40, 0.14), 0 1px 1px rgba(74, 53, 40, 0.05);

  /* type */
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, monospace;
  /* Fraunces — the brand display serif (shared with landing.html). Used with
     restraint on display headings + hero numerals only; never body or controls.
     Loaded weight range is 400–600, so display headings stay <= 600. */
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;

  /* motion */
  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------- dark theme -------------------------------
   A true off-black base (#0c0c0c, neutral — no hue) with faintly-warm
   near-black surfaces, and the boho earth accents desaturated ~20-40% so they
   read muted at night while staying recognizably rust / olive / goldenrod /
   storm-teal. All text/accent pairs clear WCAG AA (body text AAA). Toggled via
   <html data-theme="dark">. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0c0c0c;          /* neutral off-black */
  --surface: #171615;     /* faint-warm near-black card */
  --surface-2: #221f1d;   /* inset / notes */

  --label: #e8e6e3;
  --label-2: #aca59c;
  --label-3: #8c857c;

  --separator: rgba(255, 255, 255, 0.10);
  --separator-strong: rgba(255, 255, 255, 0.22);
  --fill: rgba(255, 255, 255, 0.085);
  --fill-2: rgba(255, 255, 255, 0.045);

  /* muted earth accents — saturation cut ~20-40% vs the light theme */
  --red: #c4855e;          --red-tint: rgba(196, 133, 94, 0.22);   --red-tint-strong: rgba(196, 133, 94, 0.32);
  --terracotta: #c99070;
  --green: #9da884;        --green-tint: rgba(157, 168, 132, 0.24);
  --orange: #c8a86c;       --orange-ink: #dcc190;   --orange-tint: rgba(200, 168, 108, 0.22);   --orange-tint-strong: rgba(200, 168, 108, 0.30);
  --blue: #8fa9aa;         --blue-tint: rgba(143, 169, 170, 0.24);
  --blush: #cebbb0;        --sage: #9aa783;
  /* status-palette inks/tints — in dark mode the ink is a light accent (nudged
     lighter than the base accent where needed so the pill text clears AA) */
  --red-ink: #cf9269;
  --green-ink: #9da884;
  --terracotta-ink: #d4a07f;   --terracotta-tint: rgba(201, 144, 112, 0.24);
  --blue-ink: #8fa9aa;
  --sage-ink: #9aa783;         --sage-tint: rgba(154, 167, 131, 0.24);
  --cocoa-tint: rgba(172, 165, 156, 0.18);

  --btn-bg: var(--red);
  --btn-fg: #130d09;
  --btn-bg-hover: #d0926b;
  --bar-bg: rgba(12, 12, 12, 0.72);
  --foot-bg: rgba(23, 22, 21, 0.86);
  --scroll-thumb: rgba(255, 255, 255, 0.30);   /* only shown while scrolling */

  /* lighter chevron so the custom selects read on the near-black surface */
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238c857c' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px -14px rgba(0, 0, 0, 0.8);
  --shadow-pop: 0 12px 40px -10px rgba(0, 0, 0, 0.9);
  --shadow-sheet: 0 24px 70px -18px rgba(0, 0, 0, 0.95);
  --shadow-thumb: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--label);
  background: var(--bg);
  line-height: 1.47;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* This is an app, not a document: dragging across cards, the nav, buttons or
     the flashcard controls must never highlight swaths of UI text (clicking
     Prev/Next quickly was selecting the whole card). Editable fields opt back
     in below so the capture sheet, filters and search still work normally. */
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* Anywhere the user actually types or edits keeps normal text selection. */
input, textarea, select, [contenteditable=""], [contenteditable="true"] {
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}

/* ---------------------- auto-hiding scrollbars --------------------------
   The scrollbar stays invisible until you actually scroll: app.js adds
   .is-scrolling to <html> on any scroll and removes it after a short idle.
   The gutter width is constant whether or not the thumb is showing, so
   revealing it never shifts the layout. (scrollbar-color/-width are inherited,
   so setting them on <html> covers every inner scroll area too — except the
   chrome-less rows like .filters/.why-row/.nav, which override locally.) */
/* Reserve the scrollbar gutter on every page so the header + content don't jump
   sideways when navigating between a tall (scrolling) view and a short one. */
html { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: transparent transparent; }
html.is-scrolling { scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb {
  background-color: transparent;
  background-clip: padding-box;
  border: 3px solid transparent;
  border-radius: 999px;
  transition: background-color 0.45s var(--ease);
}
html.is-scrolling ::-webkit-scrollbar-thumb { background-color: var(--scroll-thumb); }

button { font: inherit; cursor: pointer; color: inherit; }
input, select, textarea { font: inherit; }
a { color: var(--blue); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.022em; }

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

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* ----------------------------- buttons ----------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
  padding: 11px 19px;
  border-radius: var(--r-btn);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: transform 0.18s var(--spring), background 0.18s var(--ease), opacity 0.18s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { background: var(--btn-bg-hover); }
.btn:active { transform: scale(0.97); }
.btn.tinted { background: var(--fill); color: var(--label); }
.btn.tinted:hover { background: var(--separator); }
.btn.danger { background: var(--red-tint); color: var(--red); }
.btn.danger:hover { background: var(--red-tint-strong); }
.btn.small { padding: 7px 13px; font-size: 0.85rem; border-radius: 10px; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn .kbd { opacity: 0.55; font-size: 0.78em; margin-left: 2px; }

.kbd {
  font-family: var(--mono);
  font-size: 0.72rem;
  background: var(--fill);
  border-radius: 5px;
  padding: 1px 5px;
  color: var(--label-2);
  border: 1px solid var(--separator);
}

/* --------------------------- auth screen --------------------------- */
.auth { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.auth-card {
  width: 100%;
  max-width: 392px;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: 40px 34px 30px;
}
.auth-mark { display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.auth h1 { font-family: var(--display); font-size: 2.05rem; font-weight: 600; line-height: 1.06; letter-spacing: -0.015em; margin-bottom: 8px; }
.auth .lede { color: var(--label-2); margin: 0 0 26px; font-size: 0.98rem; letter-spacing: -0.012em; }
.field { margin-bottom: 16px; }
.field label {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--label-2);
  margin-bottom: 7px;
  letter-spacing: -0.006em;
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--separator-strong);
  border-radius: var(--r-field);
  background: var(--surface);
  color: var(--label);
  letter-spacing: -0.01em;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 4px var(--blue-tint);
}
.auth .btn { width: 100%; margin-top: 8px; padding: 13px; font-size: 1rem; }
.auth-switch { margin: 20px 0 0; text-align: center; color: var(--label-2); font-size: 0.92rem; }
.auth-switch button { background: none; border: none; color: var(--red); font-weight: 600; padding: 0; }
.form-error {
  background: var(--red-tint);
  color: var(--red);
  border-radius: var(--r-field);
  padding: 10px 13px;
  font-size: 0.88rem;
  margin-bottom: 15px;
}

/* ----------------------------- nav bar ----------------------------- */
/* In-app navigation is client-side (app.js swaps only the page content; the
   header + tab bar stay mounted), so switching views never reloads the document
   and the nav bar can't jitter. Naming the header/tab bar keeps them pinned
   during the same-document View Transition that crossfades the content, and also
   covers the few genuine full loads (login -> app, hard refresh) where the
   JS-rendered header would otherwise flash an empty frame. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation-duration: 0.001ms !important; }
}

.bar {
  position: sticky;
  top: 0;
  /* Above the mobile FAB (40) and bottom tab bar (60): backdrop-filter makes the
     bar its own stacking context, which traps the settings popover (z-index 50)
     inside it. If the bar sat below those bottom-fixed controls, they'd paint over
     the popover and eat taps on its rows in the narrow/zoomed mobile layout. The
     bar never visually overlaps them (opposite ends), so this only fixes ordering.
     Sheets/modals (90+) still cover the bar as intended. */
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px clamp(16px, 4vw, 36px);
  background: var(--bar-bg);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-bottom: 1px solid var(--separator);
  view-transition-name: app-header;
}
.brand { display: flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; }
.brand-name { font-family: var(--display); font-weight: 600; font-size: 1.24rem; letter-spacing: -0.02em; }
.nav { display: flex; gap: 2px; margin-left: 6px; background: var(--fill-2); padding: 3px; border-radius: 11px; }
.nav a {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 7px 15px;
  border-radius: 8px;
  color: var(--label-2);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}
.nav a:hover { color: var(--label); }
.nav a.active { color: var(--label); background: var(--surface); box-shadow: var(--shadow-thumb); }
.bar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.who { color: var(--label-2); font-size: 0.88rem; }
.who b { color: var(--label); font-weight: 600; }
.log-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: none;
  padding: 8px 15px 8px 13px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  transition: transform 0.18s var(--spring), background 0.18s var(--ease);
}
.log-cta:hover { background: var(--btn-bg-hover); }
.log-cta:active { transform: scale(0.96); }
.log-cta .plus { display: inline-flex; }
/* geometric +/× icons: block so flex/grid centers them exactly */
.plus-icon, .x-icon { display: block; }

/* ------------------------------ layout ----------------------------- */
.page { max-width: 1000px; margin: 0 auto; padding: clamp(26px, 4vw, 44px) clamp(16px, 4vw, 36px) 120px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 30px; flex-wrap: wrap; }
.page-head h1 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); font-weight: 700; line-height: 1.04; }
.page-head .sub { color: var(--label-2); margin-top: 6px; font-size: 1.02rem; letter-spacing: -0.012em; }
.eyebrow { font-size: 0.8rem; font-weight: 600; color: var(--label-2); margin-bottom: 9px; letter-spacing: -0.004em; }

.card {
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}

/* --------------------------- dashboard ----------------------------- */
.hero {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
  padding: clamp(22px, 4vw, 34px);
  margin-bottom: 22px;
}
.rings-wrap { position: relative; width: 168px; height: 168px; }
.rings-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rings-wrap .ring-bg { fill: none; opacity: 1; }
.rings-wrap .ring-fg { fill: none; stroke-linecap: round; transition: stroke-dashoffset 0.9s var(--spring); }
.rings-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.rings-center .big { font-family: var(--display); font-size: 2.6rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rings-center .big.d3 { font-size: 1.9rem; }
.rings-center .big.d4 { font-size: 1.5rem; }
.rings-center .cap { font-size: 0.72rem; color: var(--label-2); font-weight: 600; margin-top: 2px; }

.hero-legend { display: flex; flex-direction: column; gap: 14px; }
.legend-row { display: flex; align-items: center; gap: 12px; }
.legend-row .swatch { width: 11px; height: 11px; border-radius: 999px; flex-shrink: 0; }
.legend-row .lr-num { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.03em; min-width: 2ch; }
.legend-row .lr-label { font-size: 0.92rem; color: var(--label-2); }
.legend-row .lr-label b { color: var(--label); font-weight: 600; }
.hero-foot { margin-top: 4px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.9rem; color: var(--label-2); }
.hero-foot b { color: var(--label); font-weight: 600; }

.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.stat { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: 18px 18px 16px; }
.stat .label { font-size: 0.82rem; font-weight: 600; color: var(--label-2); }
.stat .num { font-size: 2.4rem; font-weight: 700; line-height: 1; margin-top: 10px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat .num small { font-size: 1rem; color: var(--label-3); font-weight: 600; }
.stat.accent .num { color: var(--red); }
.stat.good .num { color: var(--green); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.panel { padding: 22px 24px 26px; }
.panel h3 { font-size: 1.12rem; font-weight: 600; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.panel h3 .count { font-size: 0.85rem; color: var(--label-3); font-weight: 500; letter-spacing: -0.01em; }
.panel .panel-note { color: var(--label-2); font-size: 0.88rem; margin: 5px 0 18px; letter-spacing: -0.01em; }

.bars { display: flex; flex-direction: column; gap: 13px; }
.bar-item { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; align-items: center; }
.bar-item .name { font-size: 0.92rem; font-weight: 500; }
.bar-item .val { font-family: var(--mono); font-size: 0.85rem; color: var(--label-2); }
.bar-track { grid-column: 1 / -1; height: 7px; background: var(--fill); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--red); transform-origin: left; animation: grow 0.7s var(--spring) both; }
.bar-fill.t-orange { background: var(--orange); }
@keyframes grow { from { transform: scaleX(0); } }
/* pop-in: kept for the just-logged session ribbon (.ribbon .r-item) */
@keyframes pop-in { 0% { transform: scale(0.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ------------------------------ chips ------------------------------ */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600;
  background: var(--fill); color: var(--label-2);
  white-space: nowrap; letter-spacing: -0.006em;
}
.chip .dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

/* ------------------------------ log -------------------------------- */
.filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 22px; }
.filters select, .filters input {
  padding: 10px 13px; border: 1px solid var(--separator);
  border-radius: 11px; background: var(--surface); color: var(--label); letter-spacing: -0.01em;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.filters select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-right: 34px;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 13px center;
}
.filters select:hover, .filters input:hover { border-color: var(--separator-strong); }
.filters input { flex: 1; min-width: 170px; }
.filters input::placeholder { color: var(--label-3); }
.filters select:focus, .filters input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }

/* Flashcards filter bar — single row (no search box), selects share the width
   and overflow into a horizontal scroll on narrow screens rather than wrapping. */
.filters.one-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.filters.one-row::-webkit-scrollbar { display: none; }
.filters.one-row select { flex: 1 0 auto; }

/* Log filter row — compact so the switcher, selects, and Export PDF share one
   line. Selects are capped (their widest option no longer sets the width) and
   Export PDF is pushed to the right edge. */
.log-filters { gap: 7px; }
.log-filters select {
  padding: 8px 26px 8px 10px;
  font-size: 0.85rem;
  max-width: 168px;
  background-position: right 9px center;
}
.log-filters .seg.section-switch button { padding: 8px 14px; }
.log-filters #logMiss { margin-left: auto; }

.entries { display: flex; flex-direction: column; gap: 12px; }
.entry {
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  padding: 18px 22px; display: grid; grid-template-columns: 1fr auto; gap: 12px 20px;
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--spring);
}
.entry:hover { box-shadow: var(--shadow-pop); transform: translateY(-1px); }
.entry .meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.entry .topic { font-size: 1.1rem; font-weight: 600; letter-spacing: -0.018em; }
.entry .section-tag { font-size: 0.8rem; color: var(--label-2); font-weight: 500; }
.entry .q { color: var(--label-2); font-size: 0.92rem; margin: 4px 0 0; max-width: 62ch; overflow-wrap: anywhere; }
.entry .notes { margin: 8px 0 0; font-size: 0.9rem; background: var(--surface-2); border: 1px solid var(--separator); padding: 9px 13px; border-radius: 10px; color: var(--label); }
.entry .needs-lesson {
  margin: 8px 0 0; font-size: 0.85rem; color: var(--orange-ink); background: var(--orange-tint);
  border: none; padding: 7px 12px; border-radius: 9px; font-weight: 600; text-align: left;
  display: inline-flex; align-items: center; gap: 6px;
}
.entry .needs-lesson:hover { background: var(--orange-tint-strong); }
.entry .right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; justify-content: space-between; }
.entry .actions { display: flex; gap: 6px; }
.entry .stamp { font-family: var(--mono); font-size: 0.74rem; color: var(--label-3); }

/* ------------------------------ review ----------------------------- */
.review-wrap { max-width: 960px; margin: 0 auto; }
.progress-rail { display: flex; gap: 6px; justify-content: center; margin-bottom: 24px; }
.progress-rail span { width: 28px; height: 6px; border-radius: 999px; background: var(--fill); transition: background 0.3s var(--ease); }
.progress-rail span.current { background: var(--label); }

.flash { background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card); padding: clamp(28px, 5vw, 52px); min-height: 360px; display: flex; flex-direction: column; }
.flash .front-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.flash .prompt { font-size: 2rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.flash .lesson { font-size: 1.05rem; }
.flash .qtext { color: var(--label-2); margin-top: 14px; white-space: pre-wrap; font-size: 1rem; }
.flash .reveal { margin-top: auto; padding-top: 24px; }
.flash .reveal .btn { width: 100%; padding: 14px; font-size: 1rem; }
.flash .lesson { margin-top: 14px; background: var(--surface-2); border: 1px solid var(--separator); border-radius: 12px; padding: 13px 15px; font-size: 0.96rem; }
.flash .lesson .lbl { font-size: 0.74rem; color: var(--label-3); font-weight: 600; margin-bottom: 4px; }
@keyframes fade { from { opacity: 0; transform: translateY(8px); } }

/* --------------------------- empty states -------------------------- */
.empty { text-align: center; padding: 64px 24px; max-width: 460px; margin: 0 auto; }
.empty .mark { display: inline-flex; margin-bottom: 20px; }
.empty h2 { font-family: var(--display); font-size: 1.8rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.empty p { color: var(--label-2); margin: 0 0 24px; font-size: 1rem; }

/* =========================== QUICKSHEET ============================ */
.scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(46, 33, 25, 0.4);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.42s var(--spring);
  display: flex; align-items: flex-end; justify-content: center;
}
.scrim.in { opacity: 1; }

.sheet {
  width: 100%; max-width: 480px;
  background: var(--surface);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0;
  box-shadow: var(--shadow-sheet);
  transform: translateY(100%);
  transition: transform 0.46s var(--spring);
  max-height: 92dvh; display: flex; flex-direction: column; overflow: hidden;
  margin-bottom: 0;
}
#sheetInner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.scrim.in .sheet { transform: translateY(0); }
@media (min-width: 560px) {
  .scrim { align-items: center; padding: 24px; }
  .sheet { border-radius: var(--r-sheet); margin-bottom: 0; }
}

.sheet-grab { width: 38px; height: 5px; border-radius: 999px; background: var(--separator-strong); margin: 9px auto 0; flex-shrink: 0; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 6px; flex-shrink: 0; }
.sheet-head h3 { font-family: var(--display); font-size: 1.26rem; font-weight: 500; letter-spacing: -0.01em; }
.sheet-head .session-count { font-size: 0.82rem; color: var(--label-2); font-weight: 500; }
.sheet-head .right { display: flex; align-items: center; gap: 10px; }
.sheet-close { position: relative; background: var(--fill); border: none; width: 30px; height: 30px; border-radius: 999px; color: var(--label-2); font-size: 1.1rem; line-height: 1; display: grid; place-items: center; }
.sheet-close::before { content: ''; position: absolute; inset: -7px; } /* 44px tap target */
.sheet-close:hover { background: var(--separator); color: var(--label); }

.sheet-body { padding: 8px 22px 4px; overflow-y: auto; overscroll-behavior: contain; flex: 1; min-height: 0; }
.sheet-grp { margin-bottom: 18px; }
.sheet-grp > .lbl { font-size: 0.76rem; font-weight: 600; color: var(--label-2); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.sheet-grp > .lbl .hint { color: var(--label-2); font-weight: 500; }

/* Apple segmented control */
.seg { display: flex; background: var(--fill); border-radius: var(--r-seg); padding: 2px; gap: 2px; }
.seg button {
  flex: 1; border: none; background: none; padding: 8px 10px; border-radius: 7px;
  font-weight: 600; font-size: 0.88rem; color: var(--label); letter-spacing: -0.01em;
  transition: background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.seg button.on { background: var(--surface); box-shadow: var(--shadow-thumb); }
.seg.compact button { padding: 7px 6px; font-size: 0.82rem; }
/* Log's section switcher: sits above the filter row, sized to its labels. */
.seg.section-switch { display: inline-flex; max-width: 320px; margin-bottom: 16px; }
.seg.section-switch button { padding: 9px 20px; flex: 0 1 auto; }
/* On the Log the switcher shares the filter row, so it drops its bottom gap. */
.filters .seg.section-switch { margin-bottom: 0; margin-right: 3px; }

/* topic pills */
.pill-row { display: flex; flex-wrap: wrap; gap: 7px; }
.pill {
  border: 1px solid var(--separator-strong); background: var(--surface);
  padding: 8px 13px; border-radius: 999px; font-size: 0.86rem; font-weight: 500;
  color: var(--label); letter-spacing: -0.01em;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--spring);
  -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; gap: 6px;
}
.pill:hover { border-color: var(--label-3); }
.pill:active { transform: scale(0.96); }
.pill.on { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-fg); }
.pill .num { font-family: var(--mono); font-size: 0.7rem; opacity: 0.5; }
.pill.on .num { opacity: 0.6; }

/* error type scroll row */
.why-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.why-row::-webkit-scrollbar { display: none; }
.why-row .pill { flex-shrink: 0; }

/* note disclosure */
.note-toggle { background: none; border: none; color: var(--red); font-weight: 600; font-size: 0.9rem; padding: 4px 0; display: inline-flex; align-items: center; gap: 5px; }
.note-area textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--separator-strong); border-radius: var(--r-field); resize: vertical; min-height: 64px; line-height: 1.5; }
.note-area textarea:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }

/* session ribbon */
.ribbon { display: flex; gap: 8px; align-items: center; padding: 10px 22px; border-top: 1px solid var(--separator); flex-wrap: wrap; flex-shrink: 0; }
.ribbon .r-label { font-size: 0.78rem; color: var(--label-2); font-weight: 600; }
.ribbon .r-item { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); border: 1px solid var(--separator); border-radius: 999px; padding: 4px 6px 4px 10px; font-size: 0.78rem; animation: pop-in 0.32s var(--spring); }
.ribbon .r-item .undo { background: none; border: none; color: var(--blue); font-weight: 600; font-size: 0.76rem; padding: 2px 6px; border-radius: 7px; }
.ribbon .r-item .undo:hover { background: var(--blue-tint); }

/* sheet action bar */
.sheet-foot {
  display: flex; gap: 10px; align-items: center; padding: 14px 22px;
  padding-bottom: max(14px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--separator);
  background: var(--foot-bg);
  backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
  flex-shrink: 0;
}
.sheet-foot .btn-next { flex: 1; padding: 14px; font-size: 1rem; }
.sheet-foot .btn-done { padding: 14px 18px; font-size: 0.95rem; }

/* ------------------------------ toast ------------------------------ */
.toast {
  position: fixed; bottom: 28px; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: rgba(46, 33, 25, 0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  color: #fff; padding: 11px 18px; border-radius: 999px;
  font-size: 0.9rem; font-weight: 500;
  box-shadow: var(--shadow-pop);
  opacity: 0; pointer-events: none;
  transition: opacity 0.28s var(--ease), transform 0.34s var(--spring);
  z-index: 200;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: rgba(153, 77, 44, 0.96); }
.toast .check { color: var(--green); }

/* ------------------------------ utils ------------------------------ */
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--fill); border-top-color: var(--label); border-radius: 999px; animation: spin 0.7s linear infinite; }
.center-load { display: grid; place-items: center; padding: 90px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* mobile FAB */
.fab {
  position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-fg);
  border: none; font-size: 1.8rem; line-height: 1; box-shadow: var(--shadow-pop); z-index: 40;
  display: none; place-items: center; transition: transform 0.2s var(--spring);
}
.fab:active { transform: scale(0.92); }

/* ---------------------------- responsive --------------------------- */
@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero-legend { width: 100%; max-width: 320px; }
  .stat-row { grid-template-columns: 1fr 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .entry { grid-template-columns: 1fr; }
  .entry .right { flex-direction: row; align-items: center; justify-content: space-between; }
  .nav .label-full { display: none; }
  .who { display: none; }
  .log-cta .label-full { display: none; }
  .fab { display: grid; }
}
@media (max-width: 420px) {
  .stat .num { font-size: 1.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* screen-reader-only live region (capture-stage announcements) */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* On touch (no real hover), don't let hover styling stick after a tap —
   this is the "native iOS" tell. :active press feedback stays for touch. */
@media (hover: none) {
  .entry:hover { box-shadow: var(--shadow-card); transform: none; }
  .pill:hover { border-color: var(--separator-strong); }
  .nav a:hover { color: var(--label-2); }
  .sheet-close:hover { background: var(--fill); color: var(--label-2); }
  .ribbon .r-item .undo:hover { background: none; }
  .entry .needs-lesson:hover { background: var(--orange-tint); }
}

/* ===================== added features (PDF spec) ==================== */

/* theme toggle + avatar in the bar */
.icon-btn {
  background: var(--fill); border: none; width: 34px; height: 34px; border-radius: 999px;
  color: var(--label-2); display: grid; place-items: center;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.icon-btn:hover { background: var(--separator); color: var(--label); }
.icon-btn[aria-expanded="true"] { background: var(--separator); color: var(--label); }
.who { display: inline-flex; align-items: center; }
.who .avatar { width: 22px; height: 22px; border-radius: 999px; object-fit: cover; margin-right: 7px; border: 1px solid var(--separator); }

/* settings popover (gear in the bar) */
.settings-wrap { position: relative; display: inline-flex; }
.settings-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 50;
  min-width: 208px; padding: 6px;
  /* never spill past the viewport on a short/zoomed window — scroll instead */
  max-height: calc(100vh - 72px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--surface); border: 1px solid var(--separator);
  border-radius: 14px; box-shadow: var(--shadow-pop);
  transform-origin: top right; animation: settings-pop-in 0.16s var(--spring) both;
}
.settings-pop[hidden] { display: none; }
@keyframes settings-pop-in { from { opacity: 0; transform: scale(0.94) translateY(-4px); } to { opacity: 1; transform: none; } }
.set-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 10px; border: none; background: none; border-radius: 9px;
  color: var(--label); font-size: 0.9rem; font-weight: 500; text-align: left;
  cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.set-row:hover { background: var(--fill); }
.set-row .set-ic { display: inline-flex; flex-shrink: 0; color: var(--label-2); }
.set-row .set-label { flex: 1; }
.set-row.danger { color: var(--red); }
.set-row.danger .set-ic { color: var(--red); }
.set-row.danger:hover { background: var(--red-tint); }
.set-sep { height: 1px; background: var(--separator); margin: 4px 2px; }
.set-row .switch {
  flex-shrink: 0; position: relative; width: 38px; height: 22px;
  border-radius: 999px; background: var(--fill-2); border: 1px solid var(--separator);
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
.set-row .switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-thumb);
  transition: transform 0.18s var(--spring);
}
.set-row[aria-checked="true"] .switch { background: var(--btn-bg); border-color: transparent; }
.set-row[aria-checked="true"] .switch::after { transform: translateX(16px); }
.set-row[aria-checked="true"] .set-ic { color: var(--label); }

/* auth — Google sign-in */
/* GIS caps the button at the 'large' preset, so scale the whole control up to
   enlarge the Google icon + label together. */
.gbtn { display: flex; justify-content: center; min-height: 56px; margin: 22px 0 10px; color-scheme: light; transform: scale(1.3); transform-origin: center; }
.auth-note { margin: 16px 0 0; color: var(--label-2); font-size: 0.85rem; text-align: center; line-height: 1.5; }

/* the-fix tag on entries */
.entry .notes .fix-tag {
  display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--label-3); margin-right: 8px;
}
.entry .stamp { text-align: right; }

/* screenshot thumbnail (entry) + lightbox */
.shot-thumb {
  display: block; margin-top: 10px; max-width: 280px; max-height: 170px; width: auto;
  border-radius: 12px; border: 1px solid var(--separator); cursor: zoom-in; object-fit: cover;
}
.lightbox {
  position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, 0.82);
  display: grid; place-items: center; padding: 24px; cursor: zoom-out; animation: fade 0.2s var(--ease) both;
}
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 12px; box-shadow: var(--shadow-pop); }
/* close affordance for the screenshot lightbox (overlay is always near-black,
   so a translucent dark chip with a white glyph reads in both themes) */
.lightbox-close {
  position: fixed; top: max(16px, env(safe-area-inset-top)); right: 16px;
  width: 40px; height: 40px; border-radius: 999px; border: none;
  background: rgba(46, 33, 25, 0.55); color: #fff;
  display: grid; place-items: center; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-close:hover { background: rgba(46, 33, 25, 0.82); }
/* keep the review-card zoom button tight to its image (flex column would stretch it) */
.shot-zoom-review { align-self: flex-start; }

/* screenshot capture field (sheet) */
.shot-add {
  width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 13px; border: 1px dashed var(--separator-strong); border-radius: var(--r-field);
  background: var(--surface-2); color: var(--label-2); font-weight: 600; font-size: 0.9rem;
}
.shot-add:hover { border-color: var(--label-3); color: var(--label); }
.shot-add .plus { display: inline-flex; }
.shot-preview { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.shot-preview img { max-width: 100%; max-height: 220px; border-radius: 12px; border: 1px solid var(--separator); }
.shot-remove { background: var(--fill); border: none; padding: 6px 12px; border-radius: 8px; color: var(--label-2); font-weight: 600; font-size: 0.82rem; }
.shot-remove:hover { background: var(--separator); color: var(--label); }
.shot-scan {
  display: inline-block; margin-top: 8px; padding: 7px 13px; font-size: 0.82rem; font-weight: 600;
  border: 1px solid var(--sage); color: var(--sage-ink); background: var(--sage-tint);
  border-radius: var(--r-field); cursor: pointer;
}
.shot-scan:hover { background: var(--sage); color: var(--btn-fg); }
.shot-scan:disabled { opacity: .6; cursor: default; }

/* extract-from-screenshot before/after confirm modal */
.extract-scrim {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(30, 20, 14, 0.42); opacity: 0; transition: opacity .18s ease;
}
.extract-scrim.in { opacity: 1; }
.extract-modal {
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-card);
  width: min(720px, 100%); max-height: 84vh; overflow: auto; padding: 20px 22px;
}
.extract-head { display: flex; align-items: center; justify-content: space-between; }
.extract-head h3 { margin: 0; font-size: 1.05rem; }
.extract-sub { margin: 4px 0 14px; color: var(--label-2); font-size: 0.88rem; }
.extract-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.extract-lbl { font-weight: 600; font-size: 0.78rem; color: var(--label-2); margin-bottom: 6px; }
.extract-box {
  white-space: pre-wrap; word-break: break-word; font-size: 0.88rem; line-height: 1.5;
  background: var(--surface-2); border: 1px solid var(--separator); border-radius: var(--r-field);
  padding: 10px 12px; max-height: 44vh; overflow: auto;
}
.extract-box.after { border-color: var(--sage); }
.extract-box.empty { color: var(--label-3); font-style: italic; }
.extract-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
@media (max-width: 560px) { .extract-cols { grid-template-columns: 1fr; } }

/* screenshot in review flashcard */
.shot-review { display: block; margin: 16px 0 0; max-width: 100%; max-height: 260px; border-radius: 14px; border: 1px solid var(--separator); cursor: zoom-in; }

/* insights — heatmap (trap type × domain) */
.heat-card { overflow: hidden; }
.heat-scroll { overflow-x: auto; margin-top: 10px; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.heatmap { border-collapse: separate; border-spacing: 4px; font-size: 0.8rem; }
.heatmap thead th span { display: inline-block; font-size: 0.7rem; white-space: nowrap; color: var(--label-2); font-weight: 600; padding: 0 2px; }
.heatmap th.rowhead { text-align: right; padding-right: 10px; color: var(--label); font-weight: 600; white-space: nowrap; }
.heatmap td {
  min-width: 40px; height: 34px; text-align: center; border-radius: 8px;
  background: var(--surface-2); color: var(--label-3);
  font-family: var(--mono); font-variant-numeric: tabular-nums;
}
.heatmap td.has { font-weight: 700; }
.heatmap th.tot, .heatmap td.tot { color: var(--label-2); font-family: var(--mono); font-weight: 700; background: transparent; padding-left: 6px; }

/* insights — progress line */
.line-chart { width: 100%; height: auto; margin-top: 10px; display: block; }
.lc-tick { fill: var(--label-3); font-size: 11px; font-family: var(--mono); }

/* insights — sage bar fill (boho) */
.bar-fill.t-sage { background: var(--sage); }

/* tools — 50:10 study timer */
.timer-card { padding: clamp(28px, 6vw, 48px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 460px; margin: 0 auto; }
.timer-phase { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--label-2); }
.timer-card[data-phase='focus'] .timer-phase { color: var(--red); }
.timer-card[data-phase='break'] .timer-phase { color: var(--green); }
.timer-clock { font-family: var(--display); font-size: clamp(3.4rem, 14vw, 5rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--label); }
.timer-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.timer-foot { color: var(--label-2); font-size: 0.88rem; }
.timer-foot b { color: var(--label); font-weight: 700; }

/* keep the 5-item nav usable on small screens */
@media (max-width: 760px) {
  .nav { overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { flex: 0 0 auto; }
}

/* ===================== manual triage states + source ================ */

/* per-task status dropdown (Ask Tutor / Review / Resolved) */
.status-select {
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--separator-strong); border-radius: 999px;
  padding: 5px 26px 5px 12px; font-weight: 600; font-size: 0.8rem; letter-spacing: -0.01em;
  color: var(--label); cursor: pointer;
  background: var(--surface) no-repeat right 9px center;
  background-image: var(--chevron);
}
.status-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
/* the status's accent text + tint background are applied inline per the user's
   palette choice (custom statuses) — see applyStatusStyle() in app.js. */
.status-select option { color: var(--label); background: var(--surface); }
.entry .right .status-select { align-self: flex-end; }

/* source dropdown inside the capture sheet */
.sheet-select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: 11px 38px 11px 13px; border: 1px solid var(--separator-strong); border-radius: var(--r-field);
  color: var(--label); font-size: 0.95rem; letter-spacing: -0.01em; cursor: pointer;
  background: var(--surface) no-repeat right 14px center;
  background-image: var(--chevron);
}
.sheet-select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }

/* ---------------- accessible custom select (combobox) ---------------- */
/* Replaces the native <select> popup with a themed, keyboard-navigable listbox.
   The real <select> stays in the DOM (hidden) as the value source; the button
   below carries the look of whichever control it replaced. */
.cs { position: relative; display: inline-flex; vertical-align: middle; }
.cs-native { display: none !important; }
.cs-btn {
  font: inherit; cursor: pointer; text-align: left;
  display: inline-flex; align-items: center; gap: 8px;
  appearance: none; -webkit-appearance: none;
  border: 1px solid var(--separator); border-radius: 11px;
  background: var(--surface) var(--chevron) no-repeat right 13px center;
  color: var(--label); letter-spacing: -0.01em; line-height: 1.25;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.cs-btn:hover { border-color: var(--separator-strong); }
/* Open (clicked): just recolor the border — no glow halo. The box-shadow ring
   read as a heavy highlight around the dropdown. Keyboard focus keeps a visible
   ring (declared after, so a keyboard-opened control still shows it for a11y;
   a plain mouse click sets only [aria-expanded] and gets the border-only look). */
.cs-btn[aria-expanded="true"] { outline: none; border-color: var(--blue); box-shadow: none; }
.cs-btn:focus-visible { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
.cs-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* filter-bar control (mirrors .filters select) */
.is-filter .cs-btn { padding: 10px 36px 10px 13px; }
.filters.one-row .cs { flex: 1 0 auto; }
.filters.one-row .cs-btn { width: 100%; }

/* per-entry status pill (mirrors .status-select) */
.entry .right .cs.is-status { align-self: flex-end; }
.is-status .cs-btn {
  border-color: var(--separator-strong); border-radius: 999px;
  padding: 5px 26px 5px 12px; font-weight: 600; font-size: 0.8rem;
  background-position: right 9px center;
}
/* per-status accent/tint applied inline (see applyStatusStyle() in app.js) */

/* capture-sheet source (mirrors .sheet-select) */
.cs.is-sheet { display: flex; width: 100%; }
.is-sheet .cs-btn {
  width: 100%; border-color: var(--separator-strong); border-radius: var(--r-field);
  padding: 11px 38px 11px 13px; font-size: 0.95rem; background-position: right 14px center;
}

/* the portaled popup listbox (position set in JS) */
.cs-list {
  position: fixed; z-index: 150; min-width: 160px; max-width: min(92vw, 360px);
  max-height: 288px; overflow-y: auto; padding: 5px;
  background: var(--surface); border: 1px solid var(--separator-strong);
  border-radius: 12px; box-shadow: var(--shadow-pop);
}
.cs-list[hidden] { display: none; }
.cs-group { padding-top: 2px; }
.cs-grp-label {
  padding: 8px 12px 4px; font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--label-3);
}
.cs-opt {
  position: relative; padding: 9px 12px 9px 30px; border-radius: 8px;
  color: var(--label); font-size: 0.9rem; letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer; user-select: none;
}
.cs-opt:hover { background: var(--fill-2); }
.cs-opt.cs-active { background: var(--fill); }
.cs-opt[aria-selected="true"] { font-weight: 600; }
.cs-opt[aria-selected="true"]::before {
  content: ''; position: absolute; left: 12px; top: 50%;
  width: 5px; height: 9px; margin-top: -6px;
  border: solid var(--blue); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.cs-opt[aria-disabled="true"] { color: var(--label-3); cursor: default; }
.cs-opt[aria-disabled="true"]:hover { background: none; }
@media (max-width: 560px) {
  .cs-opt { padding-top: 11px; padding-bottom: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-btn { transition: none; }
}
@media (forced-colors: active) {
  .cs-btn, .cs-list { border: 1px solid CanvasText; }
  .cs-opt.cs-active { background: Highlight; color: HighlightText; }
}

/* date input in the capture sheet */
.sheet-date {
  width: 100%; padding: 11px 13px; border: 1px solid var(--separator-strong);
  border-radius: var(--r-field); background: var(--surface); color: var(--label); font: inherit;
}
.sheet-date:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }

/* source chip on entries */
.chip.src { background: var(--blue-tint); color: var(--blue); }

/* toast action button (Undo) */
.toast-msg { vertical-align: middle; }
.toast-action {
  background: none; border: none; color: var(--orange); font-weight: 700;
  font-size: 0.84rem; margin-left: 16px; padding: 2px 4px; cursor: pointer; vertical-align: middle;
}
.toast-action:hover { color: #fff; text-decoration: underline; }

/* review flashcard deck navigation */
.deck-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.deck-nav .btn { padding: 10px 16px; }
.deck-count { font-size: 0.88rem; color: var(--label-2); font-variant-numeric: tabular-nums; font-weight: 600; }

/* Pomodoro tab — the timer card centered on its own page */
.pomodoro-page { max-width: 520px; margin: 8px auto 0; }
.pebble-logo { vertical-align: middle; }

/* dashboard greeting */
.dash-greeting { font-family: var(--display); font-size: clamp(1.75rem, 4vw, 2.45rem); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 24px; }

/* analysis radar chart */
.radar { width: 100%; max-width: 600px; height: auto; display: block; margin: 6px auto 0; }
.radar-label { fill: var(--label-2); font-size: 12px; font-weight: 600; }

/* analysis split into English / Math columns, side by side */
.analysis-split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.analysis-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col-head { font-size: 1.15rem; font-weight: 650; letter-spacing: -0.02em; margin: 2px 2px 0; }
.col-head .count { font-size: 0.82rem; font-weight: 500; color: var(--label-2); margin-left: 6px; letter-spacing: -0.01em; }
@media (max-width: 760px) { .analysis-split { grid-template-columns: 1fr; } }

/* study-timer interval presets */
.timer-presets { display: inline-flex; background: var(--fill); border-radius: var(--r-seg); padding: 3px; gap: 2px; }
.timer-presets button {
  border: none; background: none; padding: 7px 16px; border-radius: 7px;
  font-weight: 600; font-size: 0.9rem; color: var(--label-2); font-variant-numeric: tabular-nums;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.timer-presets button.on { background: var(--surface); color: var(--label); box-shadow: var(--shadow-thumb); }
.timer-preset-cap { font-size: 0.72rem; color: var(--label-3); letter-spacing: 0.02em; margin-top: -6px; }

/* ================== adaptive: iPhone-class screens ==================
   Everything below applies only at phone widths (<= 760px). iPad portrait
   (768px and up) and laptop/desktop keep the layout above, unchanged. The
   signature mobile move is a native bottom tab bar that replaces the top
   nav (which collapses to an unusable sliver once five tabs share the bar
   with the brand and account controls). This block is the only thing that
   adapts the experience for small screens. */

/* the bottom tab bar lives in the DOM on every page but only shows on phones */
.tabbar { display: none; view-transition-name: app-tabbar; }

@media (max-width: 760px) {
  /* header: tighter, notch-aware, and stripped of the nav + capture CTA
     (both move to the bottom bar / FAB) so brand + account fit comfortably */
  .bar { gap: 10px; padding-top: max(11px, env(safe-area-inset-top)); }
  .bar .nav { display: none; }
  .log-cta { display: none; }
  .who { display: inline-flex; }   /* keep the avatar as a small identity cue */
  .who b { display: none; }        /* but drop the name to save width */

  /* native iOS-style bottom tab bar */
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    display: flex; align-items: stretch;
    padding: 6px 4px max(6px, env(safe-area-inset-bottom));
    background: var(--bar-bg);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border-top: 1px solid var(--separator);
  }
  .tabbar a {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    padding: 6px 2px; border-radius: 12px;
    color: var(--label-2); text-decoration: none;
    font-size: 0.64rem; font-weight: 600; letter-spacing: -0.01em;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.18s var(--ease), transform 0.18s var(--spring);
  }
  .tabbar a svg { width: 23px; height: 23px; display: block; }
  .tabbar a span { line-height: 1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar a.active { color: var(--red); }           /* rust tint = active, like an iOS tab */
  .tabbar a:active { transform: scale(0.93); }

  /* capture FAB rides above the tab bar instead of colliding with it */
  .fab { display: grid; right: 18px; bottom: calc(env(safe-area-inset-bottom) + 80px); }

  /* keep page content clear of the fixed tab bar */
  .page { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }

  /* >=44px tap targets on the capture surface and the controls */
  .seg button { padding: 11px 10px; }
  .seg.compact button { padding: 10px 8px; }
  .pill { padding: 10px 14px; }
  .filters input { padding: 12px 14px; }
  /* the visible custom comboboxes carry the tap target now (native selects are hidden) */
  .cs-btn { min-height: 44px; }
  .entry .actions .btn.small { padding: 9px 14px; }
}

/* very small phones (iPhone SE / mini, <=360px) — ease the crowding */
@media (max-width: 360px) {
  .tabbar a { font-size: 0.6rem; }
  .tabbar a svg { width: 22px; height: 22px; }
  .brand-name { font-size: 1.05rem; }
}

/* ===================== design-skill pass (audit) ====================
   Identity (Fraunces display face) is applied on the rules above; this
   block adds the new structural pieces: per-view page titles, the
   skip-to-content link, focusable screenshot-zoom buttons, native <select>
   option colors for dark mode, and a couple of small responsive fixes. */

/* per-view page title (Log / Flashcards / Analysis / Pomodoro) — gives each
   view a real <h1> so heading order starts correctly, in the brand serif. */
.view-title {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  font-weight: 600; letter-spacing: -0.02em;
  margin: 0 0 22px;
}

/* skip-to-content — off-screen until focused, then a themed chip */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100;
  transform: translateY(-150%);
  background: var(--btn-bg); color: var(--btn-fg);
  padding: 10px 16px; border-radius: var(--r-btn);
  font-weight: 600; font-size: 0.9rem; box-shadow: var(--shadow-pop);
  transition: transform 0.16s var(--ease);
}
.skip-link:focus { transform: translateY(0); }
#page { scroll-margin-top: 64px; }

/* screenshot thumbnails are now real <button>s (keyboard + AT reachable);
   keep them visually identical to the bare <img> they replaced. */
.shot-zoom {
  display: inline-block; line-height: 0; padding: 0;
  border: none; background: none; cursor: zoom-in;
  border-radius: 12px; -webkit-tap-highlight-color: transparent;
}
.shot-zoom img { display: block; }

/* native <select> popup colors — fixes dark-on-dark options on Windows/Linux
   (mirrors the working .status-select option rule). */
.filters select option, .sheet-select option, .field select option {
  color: var(--label); background: var(--surface);
}

/* let the search field shrink on the narrowest phones so the row wraps clean */
@media (max-width: 420px) {
  .filters input { min-width: 0; }
}

/* honor left/right safe-area insets in landscape (notch / rounded corners) */
@media (max-width: 760px) {
  .bar {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .tabbar {
    padding-left: max(4px, env(safe-area-inset-left));
    padding-right: max(4px, env(safe-area-inset-right));
  }
}

/* ==================== settings: status manager modal ================= */
.modal-scrim {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(30, 20, 14, 0.42);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  opacity: 0; transition: opacity 0.2s var(--ease);
}
.modal-scrim.in { opacity: 1; }
.modal {
  width: min(460px, 100%);
  max-height: min(86vh, 720px);
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--separator);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-sheet);
  padding: 20px 20px 18px;
  transform: translateY(8px) scale(0.98);
  transition: transform 0.22s var(--spring);
}
.modal-scrim.in .modal { transform: none; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal-head h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.02em; color: var(--label); }
.modal-note { margin: 6px 0 16px; color: var(--label-2); font-size: 0.9rem; line-height: 1.45; }
.modal-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.modal-foot .st-err { flex: 1; color: var(--red); font-size: 0.84rem; font-weight: 600; min-height: 1.1em; }

/* delete-account confirm field */
.da-confirm { display: block; font-size: 0.9rem; color: var(--label-2); }
.da-confirm b { color: var(--red); font-weight: 700; letter-spacing: 0.04em; }
.da-confirm input {
  display: block; width: 100%; margin-top: 8px;
  padding: 11px 13px; border: 1px solid var(--separator-strong);
  border-radius: var(--r-field); background: var(--surface); color: var(--label);
  font: inherit; letter-spacing: 0.06em;
}
.da-confirm input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-tint); }

.st-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.st-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px; border-radius: var(--r-field);
  background: var(--fill-2); border: 1px solid var(--separator);
}
.st-reorder { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
.st-mv {
  display: grid; place-items: center; width: 24px; height: 17px;
  border: none; background: none; border-radius: 5px; color: var(--label-2); cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.st-mv:hover:not(:disabled) { background: var(--separator); color: var(--label); }
.st-mv:disabled { opacity: 0.3; cursor: not-allowed; }
.st-label {
  flex: 1; min-width: 0;
  padding: 8px 10px; border-radius: var(--r-field);
  border: 1px solid var(--separator-strong); background: var(--surface);
  color: var(--label); font-size: 0.92rem; font-weight: 500; font-family: var(--font);
}
.st-label:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-tint); }
.st-swatches { display: flex; gap: 4px; flex-shrink: 0; }
.st-swatch {
  width: 20px; height: 20px; border-radius: 999px; cursor: pointer; padding: 0;
  background: var(--sw); border: 2px solid transparent;
  box-shadow: 0 0 0 1px var(--separator) inset;
  transition: transform 0.15s var(--spring), box-shadow 0.15s var(--ease);
}
.st-swatch:hover { transform: scale(1.12); }
.st-swatch.sel { border-color: var(--surface); box-shadow: 0 0 0 2px var(--label); }
.st-swatch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--blue-tint); }
.st-del {
  display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0;
  border: none; background: none; border-radius: 8px; color: var(--label-2); cursor: pointer;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.st-del:hover:not(:disabled) { background: var(--red-tint); color: var(--red); }
.st-del:disabled { opacity: 0.3; cursor: not-allowed; }
.st-add { display: inline-flex; align-items: center; gap: 6px; }
.st-add .plus { display: inline-flex; }
.st-warn { margin: 12px 0 0; padding: 9px 12px; border-radius: var(--r-field); background: var(--orange-tint); color: var(--orange-ink); font-size: 0.84rem; font-weight: 500; }

/* on phones the swatch row would crowd the name field — let it wrap below */
@media (max-width: 480px) {
  .st-row { flex-wrap: wrap; }
  .st-label { flex-basis: 100%; order: -1; }
}

/* ===================== dashboard insights (free) ===================== */
/* Trap fingerprint · Points-left · Predicted weak spot · Careless leak ·
   Test-day countdown + intensity ring · Weekly recap. Themed tokens only. */

/* greeting + countdown chip row */
.dash-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0 0 24px; }
.dash-head .dash-greeting { margin: 0; }
.countdown-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--sage); color: var(--btn-fg);
  font-size: 0.82rem; font-weight: 600; letter-spacing: -0.01em;
  box-shadow: var(--shadow-card);
}
.countdown-chip svg { opacity: 0.92; }
.countdown-chip.urgent { background: var(--red); }

/* dashboard chips cluster (goal score + countdown) — sit at the row's right */
.dash-chips { display: inline-flex; align-items: center; gap: 9px; margin-left: auto; flex-wrap: wrap; }
.goal-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--fill-2); color: var(--label-2);
  font-size: 0.82rem; font-weight: 600; letter-spacing: -0.01em;
  border: 1px solid var(--separator);
}
.goal-chip svg { opacity: 0.8; }

/* onboarding — first-run setup sheet (reuses .scrim/.sheet/.pill) */
.onb-sheet { max-width: 460px; }
#onbInner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.onb-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 22px 0; flex-shrink: 0; }
.onb-progress { display: inline-flex; gap: 6px; }
.onb-dot { width: 22px; height: 5px; border-radius: 999px; background: var(--separator-strong); transition: background 0.2s var(--ease); }
.onb-dot.on { background: var(--btn-bg); }
.onb-dot.done { background: var(--sage); }
.onb-skip { background: none; border: none; color: var(--label-2); font-size: 0.85rem; font-weight: 600; padding: 6px 4px; cursor: pointer; }
.onb-skip:hover { color: var(--label); }
.onb-body { padding: 14px 22px 6px; overflow-y: auto; flex: 1; min-height: 0; }
.onb-title { font-family: var(--display); font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 4px; }
.onb-sub { color: var(--label-2); font-size: 0.9rem; margin: 0 0 18px; }
.onb-grp { margin-bottom: 20px; }
.onb-lbl { font-size: 0.82rem; font-weight: 700; color: var(--label); margin-bottom: 9px; display: flex; align-items: center; gap: 8px; }
.onb-opt { font-weight: 500; color: var(--label-3); font-size: 0.76rem; }
.onb-hint { font-size: 0.78rem; color: var(--label-3); margin-top: 8px; }
.onb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-num {
  width: 100%; padding: 11px 13px; border: 1px solid var(--separator-strong);
  border-radius: var(--r-field); background: var(--surface); color: var(--label); font: inherit;
}
.onb-num:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px var(--blue-tint); }
.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 22px max(16px, env(safe-area-inset-bottom)); border-top: 1px solid var(--separator); flex-shrink: 0; }
.onb-foot .btn { min-width: 116px; justify-content: center; }
.onb-summary { background: var(--fill-2); border-radius: 14px; padding: 14px 16px; }
.onb-recap-h { font-size: 0.78rem; font-weight: 700; color: var(--label-2); margin-bottom: 8px; }
.onb-recap-row { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; font-size: 0.9rem; }
.onb-recap-row span { color: var(--label-2); }
.onb-recap-empty { font-size: 0.88rem; color: var(--label-2); }

/* --- Trap fingerprint --- */
.fingerprint-card { margin-top: 16px; }
/* Dashboard vertical rhythm: the points/careless row (grid-2 is dashboard-only) and
   the predicted card below it carry no margin of their own, so they'd butt right up
   against the card above — give them the same 16px gap as the rest of the stack. */
.fingerprint-card + .grid-2 { margin-top: 16px; }
.grid-2 + .card { margin-top: 16px; }
.fingerprint { display: grid; grid-template-columns: auto 1fr; gap: clamp(18px, 4vw, 34px); align-items: center; margin-top: 8px; }
.fp-chart { position: relative; width: 150px; height: 150px; flex-shrink: 0; justify-self: center; }
.fp-chart .donut { width: 150px; height: 150px; display: block; }
.fp-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 18px; }
.fp-center .fp-c-pct { font-family: var(--display); font-size: 1.8rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; }
.fp-center .fp-c-lbl { font-size: 0.66rem; color: var(--label-2); font-weight: 600; margin-top: 3px; line-height: 1.15; }
.fp-verdict { display: flex; flex-direction: column; gap: 2px; }
.fp-arche { font-family: var(--display); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.02em; }
.fp-sub { font-size: 0.85rem; color: var(--label-2); font-weight: 500; }
.fp-body { min-width: 0; }
.fp-blurb { color: var(--label-2); font-size: 0.9rem; margin: 10px 0 14px; letter-spacing: -0.01em; }
.fp-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 210px)); gap: 9px 26px; justify-content: start; }
.fp-leg { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.fp-leg .fp-sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.fp-leg .fp-name { color: var(--label-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-leg .fp-pct { margin-left: auto; font-family: var(--mono); font-size: 0.78rem; color: var(--label-3); }

/* --- Points left on the table --- */
.pl-band { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--fill); margin: 2px 0 10px; }
.pl-seg { height: 100%; }
.pl-seg.pl-rec { background: var(--sage); }
.pl-seg.pl-con { background: var(--blush); }
.pl-key { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8rem; color: var(--label-2); }
.pl-key span { display: inline-flex; align-items: center; gap: 6px; }
.pl-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.pl-dot.pl-rec { background: var(--sage); }
.pl-dot.pl-con { background: var(--blush); }
.pl-headline { display: flex; align-items: baseline; gap: 9px; margin: 18px 0 4px; }
.pl-plus { font-family: var(--display); font-size: 2.3rem; font-weight: 600; letter-spacing: -0.03em; color: var(--green); line-height: 1; font-variant-numeric: tabular-nums; }
.pl-unit { font-size: 0.92rem; color: var(--label-2); font-weight: 500; }
.pl-note { font-size: 0.76rem; color: var(--label-3); margin: 6px 0 0; letter-spacing: -0.005em; }

/* --- Predicted next weak spot --- */
.pred-list { display: flex; flex-direction: column; gap: 16px; }
.pred-row { display: flex; flex-direction: column; gap: 7px; }
.pred-head { display: flex; align-items: center; gap: 9px; }
.pred-rank { width: 22px; height: 22px; border-radius: 7px; flex-shrink: 0; display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; background: var(--fill); color: var(--label-2); font-variant-numeric: tabular-nums; }
.pred-row.lead .pred-rank { background: var(--red); color: var(--btn-fg); }
.pred-topic { font-size: 0.96rem; font-weight: 600; letter-spacing: -0.01em; }
.pred-sec { margin-left: auto; font-size: 0.74rem; color: var(--label-3); font-weight: 500; }
.pred-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.pred-chip { font-size: 0.72rem; font-weight: 600; color: var(--label-2); background: var(--fill); padding: 3px 9px; border-radius: 999px; letter-spacing: -0.005em; }

/* --- Careless leak detector --- */
.panel-note.good { color: var(--green); }

/* --- Test date picker (Settings modal) --- */
.td-opts { display: flex; flex-direction: column; gap: 2px; margin: 4px 0; }
.td-opt { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: var(--r-field); cursor: pointer; }
.td-opt:hover { background: var(--fill-2); }
.td-opt input[type="radio"] { accent-color: var(--sage); width: 17px; height: 17px; flex-shrink: 0; margin: 0; }
.td-opt-date { font-size: 0.95rem; font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.td-opt-days { margin-left: auto; font-size: 0.82rem; color: var(--label-3); font-variant-numeric: tabular-nums; }
.td-opt-tag { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--btn-fg); background: var(--sage); padding: 2px 7px; border-radius: 999px; }
.td-opt-custom { flex-wrap: wrap; }
.td-custom-input { margin-left: auto; padding: 7px 10px; border-radius: var(--r-field); border: 1px solid var(--separator-strong); background: var(--surface); color: var(--label); font: inherit; font-size: 0.88rem; }

/* --- Weekly recap card --- */
.recap-card { margin-top: 16px; }
.recap-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 4px 0 16px; }
.recap-stat { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-field); }
.rs-num { font-family: var(--display); font-size: 1.8rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.rs-lbl { font-size: 0.76rem; color: var(--label-2); font-weight: 600; }
.recap-lines { display: flex; flex-direction: column; gap: 0; margin-bottom: 16px; }
.recap-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--separator); font-size: 0.9rem; }
.recap-line .rl-k { color: var(--label-2); }
.recap-line .rl-v { font-weight: 600; text-align: right; }
.recap-share { display: inline-flex; align-items: center; gap: 8px; }
.recap-share svg { flex-shrink: 0; }
.recap-fresh { outline: 2px solid var(--sage); outline-offset: 2px; }

@media (max-width: 640px) {
  .fingerprint { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .fp-legend { grid-template-columns: 1fr; width: 100%; max-width: 320px; text-align: left; justify-content: stretch; }
}