:root {
  --bg: #fbfbfd;
  --card: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --faint: #aeaeb2;
  --border: #e8e8ed;
  --border-strong: #d2d2d7;
  --accent: #4353f5;
  --accent-soft: rgba(67, 83, 245, 0.09);
  --accent-contrast: #ffffff;
  --fill: rgba(0, 0, 0, 0.045);   /* Apple-style tinted gray fill (buttons) */
  --ok: #0d9b57;
  --warn: #e07c0c;
  --danger: #e5484d;
  --easy: #0d9b57;
  --medium: #e07c0c;
  --hard: #e5484d;
  --radius: 18px;      /* cards, banners */
  --radius-sm: 12px;   /* inputs, small frames */
  --pill: 980px;       /* buttons & chips */
  --shadow: 0 1px 2px rgba(0, 0, 20, 0.04), 0 8px 24px rgba(0, 0, 20, 0.04);
  /* Content is capped and centered; --edge is the distance from the viewport
     edge to the content edge, so full-bleed chrome (the nav) can align with it. */
  --content-max: 1360px;
  --gutter: 40px;
  --edge: max(var(--gutter), calc((100% - var(--content-max)) / 2 + var(--gutter)));
}
/* Dark theme: applied when the user picked it, or by system preference
   unless the user explicitly picked light. */
:root {
  /* The default wallpaper follows the app theme like a macOS dynamic
     wallpaper. Veil: lower alpha = more photo. */
  --wall-img: url("/static/walls/monterra-day.png");
  --wall-veil: rgba(251, 251, 253, 0.32);
  --wall-halo: rgba(251, 251, 253, 0.85);
  --wall-halo-clear: rgba(251, 251, 253, 0);  /* same hue at zero alpha: WebKit
     fades `transparent` toward black, which draws a dirty edge on photos */
  --wall-glass: 92%;   /* card opacity on wallpaper pages */
}
:root[data-theme="dark"] {
  --bg: #131315;
  --card: #1d1d1f;
  --text: #f5f5f7;
  --muted: #86868b;
  --faint: #6e6e73;
  --border: #2c2c2e;
  --border-strong: #3d3d40;
  --accent: #8c9bff;
  --accent-soft: rgba(140, 155, 255, 0.13);
  --accent-contrast: #14143c;
  --fill: rgba(255, 255, 255, 0.09);
  --ok: #3dd68c;
  --warn: #ffab4a;
  --danger: #ff7a72;
  --easy: #3dd68c;
  --medium: #ffab4a;
  --hard: #ff7a72;
  --wall-img: url("/static/walls/monterra-night.png");
  --wall-veil: rgba(19, 19, 21, 0.55);
  --wall-halo: rgba(19, 19, 21, 0.8);
  --wall-halo-clear: rgba(19, 19, 21, 0);
  --wall-glass: 84%;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131315;
    --card: #1d1d1f;
    --text: #f5f5f7;
    --muted: #86868b;
    --faint: #6e6e73;
    --border: #2c2c2e;
    --border-strong: #3d3d40;
    --accent: #8c9bff;
    --accent-soft: rgba(140, 155, 255, 0.13);
    --accent-contrast: #14143c;
    --fill: rgba(255, 255, 255, 0.09);
    --ok: #3dd68c;
    --warn: #ffab4a;
    --danger: #ff7a72;
    --easy: #3dd68c;
    --medium: #ffab4a;
    --hard: #ff7a72;
    --wall-img: url("/static/walls/monterra-night.png");
    --wall-veil: rgba(19, 19, 21, 0.55);
    --wall-halo: rgba(19, 19, 21, 0.8);
    --wall-glass: 84%;
  }
}

/* ---- Wallpaper (all pages): photo behind a readability veil ---- */
body.wall::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: var(--wall-img) center / cover no-repeat;
}
body.wall::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: var(--wall-veil);
}
/* collapsible card section (Settings sync history) */
details.fold summary {
  display: flex; align-items: baseline; gap: 12px;
  cursor: pointer; list-style: none;
}
details.fold summary::-webkit-details-marker { display: none; }
details.fold summary h3 { margin: 0; display: inline; }
details.fold summary::before {
  content: "▸"; color: var(--muted); font-size: 12px;
  transition: transform 0.15s ease; display: inline-block;
}
details.fold[open] summary::before { transform: rotate(90deg); }
details.fold[open] summary { margin-bottom: 10px; }

/* wallpaper picker (Settings) */
.wp-grid { display: flex; gap: 14px; flex-wrap: wrap; margin: 6px 0 16px; }
.wp-grid form { margin: 0; }
.wp-opt {
  display: block; padding: 6px 6px 8px; font: inherit; color: var(--text);
  background: none; border: 2px solid var(--border); border-radius: 12px; cursor: pointer;
}
.wp-opt:hover { border-color: var(--accent); }
.wp-opt.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.wp-thumb { display: flex; gap: 3px; width: 148px; height: 64px; border-radius: 7px; overflow: hidden; }
.wp-thumb img { width: 50%; height: 100%; object-fit: cover; display: block; }
.wp-thumb.wp-none { align-items: center; justify-content: center; background: var(--bg); color: var(--muted); font-size: 12.5px; }
.wp-name { display: block; text-align: center; font-size: 12.5px; margin-top: 7px; color: var(--muted); }
.wp-opt.sel .wp-name { color: var(--accent); font-weight: 600; }

/* translucent cards on wallpaper pages — the photo tints through.
   Deliberately NO backdrop-filter here: live blur re-renders on every
   scrolled frame and makes long pages (Settings) visibly laggy. */
body.wall .card,
body.wall .events {
  background: color-mix(in srgb, var(--card) var(--wall-glass), transparent);
}
/* with a thin veil, text sitting directly on the photo gets a soft halo */
body.wall .page-head,
body.wall main > p {
  text-shadow: 0 1px 2px var(--wall-halo), 0 0 16px var(--wall-halo);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; scroll-padding-top: 72px; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.55;
}
main { max-width: var(--content-max); margin: 0 auto; padding: 32px var(--gutter) 96px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- native Mac shell ----
   Inside the Mac app the titlebar is transparent and content is full-size;
   shift the nav right so the brand clears the traffic lights. */
:root[data-app="mac"] .topnav { padding-left: max(92px, var(--edge)); }
:root[data-app="mac"] .topnav.stuck { padding-left: max(92px, calc(var(--edge) + 16px)); }

/* ---- nav ---- */
.topnav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 10px;
  padding: 14px var(--edge) 12px;
  transition: padding 0.25s ease;
}
/* When floating, the pill's edges line up with the content cards below
   (the shared --edge); the extra padding keeps text off the pill's edge. */
.topnav.stuck {
  padding-left: calc(var(--edge) + 16px);
  padding-right: calc(var(--edge) + 16px);
}
/* The bar's background lives on a pseudo-element so it can morph into a
   floating rounded pill on scroll without shifting the layout. */
.topnav::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg);
  border: 1px solid transparent; border-radius: 0;
  transition: inset 0.25s ease, border-radius 0.25s ease, border-color 0.25s ease,
              background 0.25s ease, box-shadow 0.25s ease;
}
/* Elevated once the page is scrolled (class set by a tiny listener in base.html). */
.topnav.stuck::before {
  inset: 7px var(--edge) 1px;
  border-radius: 999px;
  border-color: var(--border);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
}
/* Over a wallpaper the resting nav keeps a soft scrim fading into the photo,
   so 13px links stay legible on bright skies (pill state keeps its own bg).
   The scrim overhangs the nav and finishes fading before its own edge, so
   there is never a visible line where it ends. */
body.wall .topnav:not(.stuck)::before {
  inset: 0 0 -48px;
  /* to top, transparent stop first: the browser's gradient edge rows can wrap
     and sample the FIRST stop — keep that stop invisible or it draws a line */
  background: linear-gradient(to top, var(--wall-halo-clear) 10%, var(--wall-halo) 80%) no-repeat;
}
.topnav .brand {
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  margin-right: 12px; color: var(--text);
  display: inline-flex; align-items: center; gap: 8px;
}
.topnav .brand .logo { width: 21px; height: 21px; flex: none; }
.topnav a {
  color: var(--muted); font-size: 13.5px; text-decoration: none;
  padding: 5px 12px; border-radius: var(--pill);
  transition: color .15s ease, background .15s ease;
}
.topnav a:hover { color: var(--text); text-decoration: none; background: var(--fill); }
.topnav a.active { color: var(--accent); background: var(--accent-soft); }
/* right-side cluster: account sync · source status · settings · theme toggle */
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.sync-pill {
  font-size: 12px !important; color: var(--muted) !important;
  white-space: nowrap; display: inline-flex; align-items: center;
}
.topnav .sync-pill { padding: 5px 9px; }
.sync-pill:hover { color: var(--text) !important; text-decoration: none; }
.sync-pill .dot { margin-right: 0; }
.sync-pill .sync-label { margin-left: 7px; }
.topnav .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border-radius: 50%;
  color: var(--muted); background: none; border: none; cursor: pointer;
  font-family: inherit; font-size: 15px; line-height: 1;
  transition: color .15s ease, background .15s ease;
}
.topnav .icon-btn:hover { color: var(--text); background: var(--fill); text-decoration: none; }
.topnav .icon-btn.active { color: var(--accent); background: var(--accent-soft); }
.topnav .icon-btn:disabled { color: var(--faint); cursor: wait; }
.account-sync-button.syncing svg {
  transform-box: fill-box; transform-origin: center;
  animation: account-sync-spin .8s linear infinite;
}
@keyframes account-sync-spin { to { transform: rotate(360deg); } }

/* Keep the full navigation useful on iPad-sized windows without allowing its
   intrinsic width to widen the whole page. The status dot still communicates
   sync state when its text label is hidden. */
@media (max-width: 900px) {
  :root { --gutter: 16px; }
  .topnav { gap: 4px; }
  .topnav .brand { margin-right: 0; }
  .topnav a { padding-left: 6px; padding-right: 6px; }
  .topnav .sync-pill {
    width: 30px; height: 30px; padding: 0;
    justify-content: center;
  }
  .sync-pill .sync-label { display: none; }
}

/* BruteCode targets iPad rather than iPhone, but narrow desktop windows and
   phone browsers should still remain within the viewport. Keep the primary
   Today link and the account/settings controls; the rest remains available
   through the pages themselves once the window is widened. */
@media (max-width: 700px) {
  :root { --gutter: 16px; }
  .topnav { gap: 4px; }
  .topnav > a:not(.nav-today):not(.nav-setup) { display: none; }
  .topnav .brand { margin-right: 0; }
  .nav-right { gap: 2px; }
}

/* ---- headings & text ---- */
.page-head { margin: 28px 0 8px; }
.page-head h1 {
  margin: 0 0 6px; font-size: 26px; font-weight: 700; letter-spacing: -0.03em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
}
h2 {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 0;
}
h3 {
  font-size: 13px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--muted); margin: 0 0 14px;
}
.pace { margin: 4px 0; font-size: 14px; }
.pace.ok { color: var(--ok); }
.pace.warn { color: var(--warn); }
.muted { color: var(--muted); font-size: 13px; }
.small { font-size: 12px; }
.center { text-align: center; margin-top: 40px; }
.empty { color: var(--faint); font-size: 14px; padding: 12px 0; }
code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.9em; }

/* ---- sections ---- */
.card {
  margin: 26px 0; padding: 20px 24px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.section-head .count {
  color: var(--accent); background: var(--accent-soft);
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  padding: 1px 10px; border-radius: 999px;
}
.card > h3 { padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.danger-zone { border-color: color-mix(in srgb, var(--danger) 38%, var(--border)); }
.danger-zone .section-head { border-bottom-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.danger-zone .section-head h2 { color: var(--danger); }
.danger-confirm {
  margin-top: 14px; padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--danger) 38%, var(--border));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--danger) 7%, transparent);
}
.danger-confirm p { margin: 0 0 5px; }
.danger-confirm .btn-row { margin: 12px 0 0; }

/* ---- first-run checklist (Today) ---- */
.setup-steps { list-style: none; margin: 4px 0 0; padding: 0; }
.setup-steps li {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 16px 0; border-bottom: 1px solid var(--border);
}
.setup-steps li:last-child { border-bottom: none; padding-bottom: 8px; }
.setup-mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; color: var(--muted);
  border: 1.5px solid var(--border-strong);
}
.setup-steps li.done .setup-mark {
  color: var(--ok); border-color: transparent;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
}
.setup-body { flex: 1; }
.setup-body strong { font-size: 14.5px; }
.setup-steps li.done .setup-body strong { color: var(--muted); }
.setup-body p { margin: 3px 0 0; font-size: 13px; color: var(--muted); max-width: 62ch; }
.setup-steps .btn { flex-shrink: 0; margin-top: 3px; }

/* ---- item rows ---- */
.item {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding: 18px 0; border-bottom: 1px solid var(--border);
}
.item:last-child { border-bottom: none; padding-bottom: 6px; }
.item-title { font-size: 15px; letter-spacing: -0.01em; }
.item-title strong { font-weight: 600; }
.item-meta { color: var(--muted); font-size: 13px; margin-top: 3px; }
.item-why { color: var(--faint); font-size: 13px; margin-top: 3px; }
.item-actions { display: flex; gap: 8px; flex-shrink: 0; margin-top: 2px; }

/* ---- difficulty & status ---- */
.badge { font-size: 12px; font-weight: 500; margin-left: 8px; white-space: nowrap; }
.badge::before { content: "·"; margin-right: 8px; color: var(--faint); font-weight: 400; }
.badge-easy { color: var(--easy); }
.badge-medium { color: var(--medium); }
.badge-hard { color: var(--hard); }
.badge-na { color: var(--faint); }
.badge-overdue { color: var(--danger); }
.badge-viz { color: var(--accent); }
a.badge-viz:hover { text-decoration: underline; }
.lock-ico { vertical-align: -1px; flex: none; }
.badge-viz .lock-ico { margin-left: 1px; opacity: 0.75; }
.btn-locked { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.btn-locked:hover { color: var(--text); }
.anim-teaser { margin: 10px 0 14px; padding-left: 22px; color: var(--muted); font-size: 14px; }
.anim-teaser li { margin: 4px 0; }
#walkthrough .lock-ico { vertical-align: -1.5px; margin-right: 3px; }

/* Keep each animation at its designed width and give the remaining card space to its code. */
#walkthrough > [id$="-root"] { width: 100%; max-width: none; }
#walkthrough > :is(#cfa-root, #crp-root, #t3s-root, #vpa-root) { --walkthrough-animation-width: 455px; }
#walkthrough > :is(#ts2-root) { --walkthrough-animation-width: 480px; }
#walkthrough > :is(#sbt-root) { --walkthrough-animation-width: 495px; }
#walkthrough > :is(#mws-root) { --walkthrough-animation-width: 500px; }
#walkthrough > :is(#lsw-root, #pst-root) { --walkthrough-animation-width: 505px; }
#walkthrough > :is(#mdb-root) { --walkthrough-animation-width: 520px; }
#walkthrough > :is(#mwc-root) { --walkthrough-animation-width: 545px; }
#walkthrough > :is(#pxa-root) { --walkthrough-animation-width: 550px; }
#walkthrough > :is(#cpr-root) { --walkthrough-animation-width: 560px; }
#walkthrough > :is(#dtp-root, #eda-root, #gaa-root, #lcs-root, #mns-root, #rpn-root, #swm-root, #swmv-root, #tka-root, #tsa-root, #vaa-root, #vpr-root) { --walkthrough-animation-width: 580px; }
#walkthrough > :is(#trw-root) { --walkthrough-animation-width: 585px; }
#walkthrough > :is(#pas-root, #rne-root, #vsa-root, #vso-root) { --walkthrough-animation-width: 600px; }
#walkthrough > :is(#bsc-root) { --walkthrough-animation-width: 610px; }
#walkthrough > :is(#rng-root) { --walkthrough-animation-width: 620px; }
#walkthrough > :is(#atn-root, #cda-root, #fma-root, #ibt-root, #llc-root, #rla-root, #rva-root) { --walkthrough-animation-width: 630px; }
#walkthrough > :is(#rlf-root) { --walkthrough-animation-width: 720px; }
#walkthrough > [id$="-root"] > [class$="-cols"] > [class$="-left"] {
  flex: 0 1 var(--walkthrough-animation-width);
}
#walkthrough > [id$="-root"] > [class$="-cols"] > pre[class$="-code"] { flex-grow: 1; }
@media (min-width: 881px) {
  #walkthrough > :is(#swm-root, #swmv-root) > [class$="-cols"] [class$="-vars"] {
    min-height: 56px;
  }
}

/* license / purchase page */
.paycard { max-width: 600px; }
.pay-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent);
}
.pay-state {
  margin: 8px 0 6px; font-size: 27px; font-weight: 700;
  text-transform: none; letter-spacing: -0.02em; color: var(--text);
}
.pay-state .dot { margin-right: 9px; vertical-align: 2px; }
.pay-amount { margin-top: 8px; font-size: 42px; font-weight: 700; letter-spacing: -0.03em; }
.pay-amount small { font-size: 16px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.pay-sub { margin-top: 2px; }
.pay-want {
  margin: 14px 0 0; font-size: 14px; padding: 10px 14px;
  background: var(--accent-soft); border-radius: var(--radius-sm);
}
.pay-benefits {
  list-style: none; margin: 16px 0 20px; padding: 0;
  display: grid; gap: 9px; font-size: 14px; color: var(--muted);
}
.pay-benefits li { padding-left: 24px; position: relative; }
.pay-benefits li::before {
  content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 600;
}
.pay-buy { display: block; text-align: center; padding: 11px 22px; font-size: 15px; }
.pay-hint { margin-top: 10px; }
.pay-actions { margin: 14px 0; }
.pay-or {
  display: flex; align-items: center; gap: 12px; margin: 24px 0 12px;
  color: var(--faint); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
}
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.key-row { display: flex; gap: 10px; }
.key-row input { flex: 1; font-family: var(--mono); font-size: 13px; }
.anim-part {
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em;
  margin: 26px 0 12px; padding-top: 22px; border-top: 1px solid var(--border);
}
.anim-part:first-of-type { margin-top: 18px; padding-top: 0; border-top: none; }
/* Category chips: every category has a stable hue (via --cat-h), so
   problems of the same type visibly belong together. */
.cat {
  display: inline-block; font-size: 11.5px; font-weight: 500; line-height: 1.6;
  padding: 0 10px; border-radius: 999px; white-space: nowrap;
  background: hsl(var(--cat-h) 60% 50% / 0.13);
  color: hsl(var(--cat-h) 55% 34%);
}
:root[data-theme="dark"] .cat { color: hsl(var(--cat-h) 75% 76%); background: hsl(var(--cat-h) 60% 60% / 0.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cat { color: hsl(var(--cat-h) 75% 76%); background: hsl(var(--cat-h) 60% 60% / 0.14); }
}
/* line the columns up across the per-category cards: fixed table layout
   with pinned widths for every column except the flexible one */
table.list.fixed { table-layout: fixed; }
table.list.fixed th.w-idx { width: 34px; }
table.list.fixed th.w-diff { width: 105px; }
table.list.fixed th.w-solved { width: 205px; }
table.list.fixed th.w-due { width: 125px; }
table.list.fixed th.w-act { width: 195px; }
table.list.fixed th.w-watch { width: 110px; }
table.list.fixed th.w-prob { width: 300px; }

/* per-category card header (Problems / Animations tabs) */
.cat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.cat-head .count {
  color: var(--muted); font-size: 12.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* memory-strength bar (FSRS retrievability) shown next to problem titles;
   the outlined track is the full 100% so the empty part reads as decay */
.mem {
  display: inline-block; width: 54px; height: 7px; border-radius: 999px;
  background: var(--border); border: 1px solid var(--border-strong);
  vertical-align: 1px; margin-left: 8px;
  overflow: hidden;
}
.mem .mem-fill { display: block; height: 100%; border-radius: 999px; transition: width .3s ease; }
.mem-hi .mem-fill { background: var(--ok); }
.mem-mid .mem-fill { background: var(--warn); }
.mem-lo .mem-fill { background: var(--danger); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; }
.dot-ok { background: var(--ok); }
.dot-off { background: var(--faint); }
.dot-warn { background: var(--warn); }
.dot-danger { background: var(--danger); }
.check { color: var(--ok); }

/* ---- buttons ---- */
.btn {
  display: inline-block; border: none; border-radius: var(--pill);
  background: var(--fill); color: var(--text); padding: 6px 14px;
  font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer;
  font-family: inherit; line-height: 1.5; white-space: nowrap;
  transition: filter .15s ease, background .15s ease;
}
.btn:hover { text-decoration: none; filter: brightness(0.96); }
:root[data-theme="dark"] .btn:hover { filter: brightness(1.25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn:hover { filter: brightness(1.25); } }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.btn-primary:hover { filter: brightness(1.08); color: var(--accent-contrast); }
:root[data-theme="dark"] .btn-primary:hover { filter: brightness(1.08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn-primary:hover { filter: brightness(1.08); } }
.btn:disabled { opacity: 0.5; cursor: default; filter: none; }
.btn-danger { color: var(--danger); }
.btn-sm { padding: 4px 11px; font-size: 12.5px; }
.btn-row { display: flex; gap: 8px; margin: 14px 0; }
.account-provider-row { align-items: center; }
.btn.github-provider {
  min-width: 220px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #24292f; border-color: #24292f; color: #fff;
}
.btn.github-provider:hover { background: #1b1f23; color: #fff; }
.github-provider svg { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; }
.btn.provider-button {
  min-width: 220px; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  color: #fff; font-weight: 600;
}
.btn.provider-button:hover { color: #fff; text-decoration: none; filter: brightness(1.09); }
.provider-logo { width: 19px; height: 19px; flex: none; }
.btn.neetcode-provider { background: #172033; border-color: #172033; }
.btn.leetcode-provider { background: #252525; border-color: #252525; }
.leetcode-logo { fill: #ffa116; }
.provider-row { flex-wrap: wrap; }
.provider-form .provider-button { width: 100%; }
.inline-form { display: inline-flex; gap: 8px; }

/* ---- continuous onboarding journey ---- */
.onboarding-page main { max-width: 1000px; padding-top: 38px; }
.onboarding-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 28px;
  margin: 0 auto 24px; max-width: 860px;
}
.onboarding-head h1 { margin: 2px 0 7px; font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.035em; }
.onboarding-head p { margin: 0; max-width: 660px; }
.eyebrow {
  margin: 0 0 8px; color: var(--accent); font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
}
.btn-quiet { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.text-link { display: inline-block; margin-top: 16px; font-size: 13px; color: var(--muted); }
.onboarding-shell {
  max-width: 860px; margin: 0 auto; overflow: hidden;
  border: 1px solid var(--border); border-radius: 24px;
  background: color-mix(in srgb, var(--card) 96%, transparent); box-shadow: var(--shadow);
}
body.wall .onboarding-shell { background: color-mix(in srgb, var(--card) var(--wall-glass), transparent); }
.journey-progress {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; padding: 0; margin: 0; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 62%, transparent);
}
.journey-progress li {
  position: relative; min-width: 0; color: var(--faint);
}
.journey-step-link {
  display: flex; align-items: center; gap: 11px; height: 100%; padding: 18px 20px;
  color: inherit; text-decoration: none; border-radius: 0;
  transition: color .15s ease, background .15s ease;
}
.journey-step-link:hover {
  color: var(--text); text-decoration: none;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.journey-step-link:focus-visible {
  position: relative; z-index: 1; outline: 2px solid var(--accent); outline-offset: -3px;
}
.journey-progress li + li::before {
  content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 1px; background: var(--border);
}
.journey-progress li.active { color: var(--text); background: var(--accent-soft); }
.journey-progress li.done { color: var(--text); }
.journey-number {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--border-strong);
  font-size: 12px; font-weight: 700; color: inherit; background: var(--card);
}
.journey-progress li.active .journey-number { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); }
.journey-progress li.done .journey-number { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); color: var(--ok); }
.journey-progress strong, .journey-progress small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journey-progress strong { font-size: 13px; }
.journey-progress small { margin-top: 1px; font-size: 11px; color: var(--muted); }
.journey-stage { max-width: 640px; margin: 0 auto; padding: 52px 42px 56px; text-align: center; }
.journey-stage h2 { margin: 0 0 12px; font-size: clamp(24px, 4vw, 34px); letter-spacing: -0.025em; }
.journey-copy { max-width: 580px; margin: 0 auto 22px; color: var(--muted); line-height: 1.65; }
.journey-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: 20px; border-radius: 18px;
  background: #24292f; color: #fff; box-shadow: 0 10px 28px rgba(0, 0, 0, .18);
}
.journey-icon svg { width: 30px; height: 30px; fill: currentColor; }
.data-safety {
  display: flex; align-items: flex-start; gap: 2px; max-width: 520px; margin: 0 auto 24px;
  padding: 12px 15px; text-align: left; border: 1px solid color-mix(in srgb, var(--ok) 24%, var(--border));
  border-radius: 13px; color: var(--muted); background: color-mix(in srgb, var(--ok) 6%, transparent); font-size: 13px;
}
.data-safety .dot { flex: none; margin-top: 7px; }
.journey-primary { min-height: 44px; padding: 10px 21px; font-size: 14px; font-weight: 650; }
.journey-stage .small { display: block; margin: 11px 0 0; }
.journey-waiting {
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px;
  max-width: 550px; margin: 6px auto 0; padding: 17px 18px; text-align: left;
  border: 1px solid var(--border); border-radius: 15px; background: var(--fill);
}
.journey-waiting[hidden] { display: none; }
.journey-waiting p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.journey-waiting .btn-row { grid-column: 2; margin: 3px 0 0; }
.practice-sync-copy { min-width: 0; }
.practice-sync-bar { margin-top: 12px; }
.practice-sync-waiting .practice-progress-detail {
  margin-top: 5px; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text);
}
.practice-sync-waiting .practice-patience {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--border);
  color: var(--muted); line-height: 1.45;
}
.journey-spinner {
  width: 22px; height: 22px; border: 2px solid var(--border-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: journey-spin .8s linear infinite;
}
@keyframes journey-spin { to { transform: rotate(360deg); } }
.journey-notice { margin: 18px 24px 0; padding: 10px 14px; border-radius: 12px; font-size: 13px; text-align: center; }
.journey-notice.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.journey-notice.warn { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.journey-success-summary {
  display: flex; align-items: center; gap: 13px; margin: -20px auto 34px; padding: 13px 16px;
  text-align: left; border: 1px solid color-mix(in srgb, var(--ok) 28%, var(--border));
  border-radius: 14px; background: color-mix(in srgb, var(--ok) 7%, transparent);
}
.journey-success-summary p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.account-connected-summary { max-width: 540px; margin-top: 26px; margin-bottom: 22px; }
.success-check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; background: var(--ok); color: #fff; font-weight: 750;
}
.practice-choices { display: grid; gap: 12px; margin: 26px 0 18px; text-align: left; }
.practice-choice {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 17px 18px; border: 1px solid var(--border); border-radius: 15px; background: color-mix(in srgb, var(--bg) 55%, transparent);
}
.practice-choice p { margin: 2px 0 0; color: var(--muted); font-size: 12.5px; }
.practice-choice .btn { min-height: 40px; display: inline-flex; align-items: center; }
.journey-complete { padding-top: 58px; }
.completion-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 72px; height: 72px; margin-bottom: 20px; border-radius: 50%;
  color: #fff; background: var(--ok); font-size: 34px; font-weight: 750;
  box-shadow: 0 0 0 9px color-mix(in srgb, var(--ok) 10%, transparent);
}
.sync-receipt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px auto; }
.sync-receipt div { padding: 14px 10px; border: 1px solid var(--border); border-radius: 13px; background: var(--fill); }
.sync-receipt strong, .sync-receipt span { display: block; }
.sync-receipt strong { font-size: 23px; font-variant-numeric: tabular-nums; }
.sync-receipt span { color: var(--muted); font-size: 11px; }
.open-today-countdown {
  position: relative; isolation: isolate; overflow: hidden; min-width: 156px;
}
.open-today-countdown::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: color-mix(in srgb, var(--accent-contrast) 20%, transparent);
  transform: scaleX(0); transform-origin: left center;
  animation: open-today-fill 2s linear forwards;
}
.open-today-countdown #open-today-label { position: relative; z-index: 1; }
@keyframes open-today-fill { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .open-today-countdown::before { animation: none; opacity: .12; transform: scaleX(1); }
}

@media (max-width: 700px) {
  .onboarding-page main { padding: 24px 16px 80px; }
  .onboarding-head { align-items: center; }
  .onboarding-head .muted { display: none; }
  .onboarding-shell { border-radius: 18px; }
  .journey-step-link { justify-content: center; padding: 14px 8px; }
  .journey-progress li > span:last-child,
  .journey-step-link > span:last-child { display: none; }
  .journey-progress li + li::before { top: 28%; bottom: 28%; }
  .journey-stage { padding: 38px 20px 42px; }
  .journey-success-summary { margin-top: -8px; }
  .practice-choice { align-items: stretch; flex-direction: column; gap: 12px; }
  .practice-choice .btn, .practice-choice form { width: 100%; justify-content: center; }
  .journey-waiting { grid-template-columns: auto 1fr; }
  .sync-receipt { gap: 6px; }
  .sync-receipt div { padding: 11px 5px; }
  .sync-receipt strong { font-size: 19px; }
}

/* ---- live sync progress (Settings) ---- */
.sync-progress { margin: 14px 0 4px; max-width: 560px; }
.sync-progress-head {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; margin-bottom: 6px;
}
.sync-progress-head .muted { font-variant-numeric: tabular-nums; }
.sp-row { display: flex; align-items: center; gap: 10px; }
.sp-row .sp-bar { flex: 1; }
.sp-x {
  flex: none; width: 22px; height: 22px; padding: 0; border: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--muted); background: var(--fill); cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.sp-x svg { display: block; }
.sp-x:hover {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}
.sp-x:disabled { opacity: 0.5; cursor: default; }
.sp-bar {
  height: 8px; border-radius: 999px; overflow: hidden;
  background: var(--accent-soft);
}
.sp-fill {
  height: 100%; width: 0%; border-radius: 999px;
  background: var(--accent); transition: width 0.4s ease;
}
.sp-fill.indet { width: 38%; animation: sp-slide 1.3s ease-in-out infinite; }
@keyframes sp-slide {
  0% { margin-left: -38%; }
  100% { margin-left: 100%; }
}

/* ---- tables ---- */
table.list { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.list th {
  text-align: left; color: var(--faint); font-weight: 500; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border-strong);
}
table.list td { padding: 9px 10px 9px 0; border-bottom: 1px solid var(--border); vertical-align: top; font-variant-numeric: tabular-nums; }
table.list tr:last-child td { border-bottom: none; }
table.list td:last-child { white-space: nowrap; }

.sort-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: -8px 0 18px; }
.sort-row .small { margin-right: 4px; }
.sort-row .sort-dir { font-size: 9px; vertical-align: 1px; }

/* inline editor for one review-history row */
.rh-form { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; padding: 4px 0 6px; }
.rh-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.rh-form select, .rh-form input { font: inherit; font-size: 13px; padding: 5px 8px; background: var(--card); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); }
.rh-form .rh-note { flex: 1; min-width: 180px; }
.rh-form .rh-btns { display: flex; gap: 6px; }
table.list .badge { margin-left: 0; }
table.list .badge::before { content: none; }
table.kv { font-size: 14px; }
table.kv td { padding: 5px 16px 5px 0; }
table.kv td:first-child { color: var(--muted); white-space: nowrap; }

/* ---- forms ---- */
.form-row { margin: 18px 0; }
.form-row > label { display: block; font-weight: 500; font-size: 14px; margin-bottom: 5px; }
.form-row label.inline { display: inline-block; font-weight: 400; font-size: 14px; margin-right: 14px; }
input[type=text], input[type=date], input[type=number], select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 7px 12px; font-size: 14px; font-family: inherit; min-width: 240px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3.5px var(--accent-soft);
}
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px;
}

/* ---- rating cards ---- */
.rating-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 14px 0 22px; }
.rating {
  border: 1px solid var(--border-strong); border-radius: 14px; padding: 12px 14px;
  cursor: pointer; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px;
  background: var(--bg);
}
.rating span { color: var(--muted); line-height: 1.4; }
.rating:hover { border-color: var(--muted); }
.rating:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.rating input { display: none; }
.rating strong { font-size: 14px; }
.rating .rating-next { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.rating .rating-next b { font-size: 14px; font-weight: 700; color: var(--text); }
.rating.again strong { color: var(--danger); }
.rating.hard strong { color: var(--warn); }
.rating.good strong { color: var(--accent); }
.rating.easy strong { color: var(--ok); }

/* ---- bars ---- */
.bar-row { display: flex; align-items: center; gap: 12px; margin: 8px 0; font-size: 13px; }
.bar-label { width: 190px; flex-shrink: 0; text-align: right; color: var(--muted); }
.bar { flex: 1; background: var(--border); border-radius: 999px; height: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.warn-fill { background: var(--warn); }
.bar-value { width: 64px; color: var(--faint); font-variant-numeric: tabular-nums; }

/* ---- progress page ---- */
.kpi-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; margin: 26px 0;
}
.kpi {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-value { font-size: 30px; font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; }
.kpi-value small { font-size: 17px; font-weight: 500; color: var(--muted); margin-left: 1px; }
.kpi-label { font-size: 12px; color: var(--muted); }

.pattern-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px; margin-top: 16px;
}
.pattern {
  border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px;
  background: var(--bg);
  display: block; color: var(--text); text-decoration: none;
}
a.pattern:hover { text-decoration: none; border-color: var(--accent); }
/* Card tint = recall confidence; the word label in the meta line carries the
   same state, so color is never the only channel. */
.pattern.solid {
  border-color: color-mix(in srgb, var(--ok) 35%, var(--border));
  background: color-mix(in srgb, var(--ok) 7%, var(--bg));
}
.pattern.developing {
  border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
  background: color-mix(in srgb, var(--warn) 7%, var(--bg));
}
.pattern.at-risk {
  border-color: color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--bg));
}
.pattern-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pattern-conf { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; }
.meter {
  height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--text) 9%, transparent);
  overflow: hidden; margin: 10px 0 8px;
}
.meter-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.pattern-meta { font-size: 12px; color: var(--muted); }
.pattern-word { font-weight: 550; color: var(--text); }

/* GitHub-style activity heatmap: sequential steps of the accent hue. */
.heatmap-scroll { overflow-x: auto; padding-top: 14px; }
.heatmap { min-width: 760px; width: fit-content; margin: 0 auto; }
.hm-months {
  display: grid; grid-template-columns: repeat(53, 12px); gap: 3px;
  margin-left: 34px; font-size: 10.5px; color: var(--faint); height: 15px;
}
.hm-months span { grid-row: 1; white-space: nowrap; }
.hm-body { display: flex; gap: 6px; }
.hm-days {
  display: grid; grid-template-rows: repeat(7, 12px); gap: 3px;
  font-size: 10px; color: var(--faint); width: 28px; text-align: right;
}
.hm-grid { display: flex; gap: 3px; }
.hm-week { display: grid; grid-template-rows: repeat(7, 12px); gap: 3px; }
.hm-cell {
  width: 12px; height: 12px; border-radius: 3px; display: inline-block;
  background: var(--hm-l0); flex: none;
}
.hm-cell.l1 { background: var(--hm-l1); }
.hm-cell.l2 { background: var(--hm-l2); }
.hm-cell.l3 { background: var(--hm-l3); }
.hm-cell.l4 { background: var(--hm-l4); }
.hm-cell.hm-empty { background: transparent; }
:root {
  --hm-l0: rgba(120, 120, 130, 0.10);
  --hm-l1: rgba(67, 83, 245, 0.22);
  --hm-l2: rgba(67, 83, 245, 0.45);
  --hm-l3: rgba(67, 83, 245, 0.70);
  --hm-l4: rgba(67, 83, 245, 0.95);
}
:root[data-theme="dark"] {
  --hm-l0: rgba(255, 255, 255, 0.06);
  --hm-l1: rgba(140, 155, 255, 0.25);
  --hm-l2: rgba(140, 155, 255, 0.45);
  --hm-l3: rgba(140, 155, 255, 0.68);
  --hm-l4: rgba(140, 155, 255, 0.95);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hm-l0: rgba(255, 255, 255, 0.06);
    --hm-l1: rgba(140, 155, 255, 0.25);
    --hm-l2: rgba(140, 155, 255, 0.45);
    --hm-l3: rgba(140, 155, 255, 0.68);
    --hm-l4: rgba(140, 155, 255, 0.95);
  }
}
.hm-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin: 12px 0 0 34px; font-size: 12px; color: var(--muted);
}
.hm-legend { display: inline-flex; align-items: center; gap: 3px; }
.hm-legend .hm-cell { cursor: default; }
.hm-tip {
  position: absolute; z-index: 10; pointer-events: none;
  background: var(--text); color: var(--bg); font-size: 12px;
  padding: 4px 9px; border-radius: 7px; white-space: nowrap;
}

/* ---- calendar (Apple Calendar-style month grid) ---- */
.cal-month-label {
  font-size: 17px; font-weight: 650; letter-spacing: -0.01em;
  margin: 30px 0 10px;
}
.cal-month-label:first-child { margin-top: 4px; }
.cal-dows { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; }
.cal-dow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); text-align: right; padding-right: 10px;
}
.cal-dow:nth-child(n+6) { color: var(--faint); }  /* weekend headers dimmed */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
}
.cal-cell {
  min-height: 98px; padding: 6px 8px 8px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transition: background .15s ease;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell:nth-last-child(-n+7) { border-bottom: none; }
.cal-cell.rest { background: color-mix(in srgb, var(--text) 4%, transparent); }
.cal-cell:not(.pad):not(.blank) { cursor: pointer; }
.cal-cell:not(.pad):not(.blank):hover { background: var(--fill); }
.cal-cell.sel {
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.cal-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.cal-top {
  display: flex; justify-content: flex-end; align-items: center; gap: 6px;
  margin-bottom: 1px;
}
.cal-daynum {
  width: 22px; height: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--muted); border-radius: 50%;
}
.cal-cell.pad .cal-daynum, .cal-cell.rest .cal-daynum { color: var(--faint); }
.cal-cell.blank { min-height: 0; }
.cal-cell.pad, .cal-cell.blank { cursor: default; }
.cal-cell.today .cal-daynum {
  background: var(--accent); color: var(--accent-contrast); font-weight: 600;
}
.cal-dot-buffer {
  width: 6px; height: 6px; border-radius: 50%; background: var(--warn); flex: none;
}
.cal-ev {
  font-size: 11px; line-height: 1.6; font-weight: 500;
  padding: 0 7px; border-radius: 5px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev-review { background: var(--accent-soft); color: var(--accent); }
.ev-new { background: color-mix(in srgb, var(--easy) 13%, transparent); color: var(--easy); }
.ev-deadline { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); font-weight: 600; }
.cal-more { font-size: 11px; color: var(--faint); padding-left: 7px; }
.cd-sub {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--muted); margin: 20px 0 2px;
}
#cd-list .cd-sub:first-child { margin-top: 12px; }
.cal-restlabel { font-size: 11px; color: var(--faint); padding-left: 7px; margin-top: auto; }
.cal-ev.cal-count { display: none; }  /* compact count chip: mobile only */
@media (max-width: 860px) {
  .cal-cell { min-height: 64px; padding: 4px 6px 6px; }
  .cal-cell .ev-review, .cal-cell .cal-more, .cal-cell .cal-restlabel { display: none; }
  .cal-cell .ev-review.cal-count { display: block; }
  .cal-ev { font-size: 10px; }
}

/* ---- events banner ---- */
.events {
  margin: 24px 0; padding: 16px 20px;
  background: var(--accent-soft); border: 1px solid transparent; border-radius: var(--radius);
}
.events h3 { color: var(--accent); border: none; padding: 0; margin-bottom: 8px; }
.events-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.events-head h3 { margin-bottom: 0; }
.events-head form { margin: 0; }
.event-row {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 8px 0; font-size: 14px;
}