:root {
  --bg: #0f1420;
  --bg-panel: #161d2e;
  --bg-card: #1a2338;
  --bg-card-hover: #1f2a44;
  --daily-box: #283350;
  --border: #2a3654;
  --scrollbar-dim: #151b2a;   /* --border under the 50% overlay */
  --border-light: #354467;
  --text: #e8ecf6;
  --text-dim: #9aa7c7;
  --text-faint: #6b7794;
  --accent: #5b8cff;
  --accent-soft: rgba(91, 140, 255, 0.14);
  --gold: #f5c451;
  --level-mc: #4cc38a;
  --level-10: #5b8cff;
  --level-12: #9d7bff;
  --level-aime: #f08c4e;
  --level-oly: #ef5f8b;
  --radius: 12px;
  --topbar-h: 66px;
}

/* Every link is the app's blue and stays blue after a visit (owner, 2026-11-01): no purple
   visited links. Zero specificity, so a component's own colour still wins. */
:where(a), :where(a:visited) { color: var(--accent); }

/* Light theme — toggled via data-theme="light" on <html>. Everything is driven
   by these variables, so only the palette changes. */
:root[data-theme="light"] {
  --bg: #f6f8fc;
  --bg-panel: #eaeef7;
  --bg-card: #ffffff;
  --bg-card-hover: #eef2fb;
  --daily-box: #f6f8fd;
  --border: #d7deed;
  --scrollbar-dim: #6b6f77;   /* --border under the 50% overlay */
  --border-light: #c2cbe1;
  --text: #1b2333;
  --text-dim: #55607a;
  --text-faint: #808aa3;
  --accent: #2f66e0;
  --accent-soft: rgba(47, 102, 224, 0.12);
  --gold: #b7860b;
  --level-mc: #1f9d63;
  --level-10: #2f66e0;
  --level-12: #7a4fe0;
  --level-aime: #cf6a1e;
  --level-oly: #d63f6e;
}

/* A few elements hardcode a dark translucent fill; re-tint them for light mode. */
:root[data-theme="light"] .topbar { background: rgb(246, 248, 252); }
:root[data-theme="light"] .formula-display { background: rgba(20, 30, 55, 0.045); }
:root[data-theme="light"] .card-extra { background: rgba(20, 30, 55, 0.03); }
:root[data-theme="light"] .problem { background: rgba(20, 30, 55, 0.03); }

* { box-sizing: border-box; }

/* scroll-padding-top tells the browser the first N pixels of the scrollport are
   obscured by the sticky .topbar, so scrollIntoView stops short of sliding the
   target underneath it. Without it, clicking a sidebar sub-subject put the
   heading at viewport y = 0, i.e. completely behind the bar. Uses --topbar-h so
   the taller narrow-screen bar is handled by the same rule. */
html { scroll-behavior: smooth; scrollbar-gutter: stable;
       scroll-padding-top: calc(var(--topbar-h) + 12px); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  line-height: 1.55;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Opaque, not a translucent blur: blurring two hundred cards of math as they scroll under
     the bar cost more than anything else on a long subject page. */
  background: rgb(15, 20, 32);
  border-bottom: 1px solid var(--border);
}

.topbar-inner {
  max-width: 1560px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
}

/* Mobile-only hamburger that opens the section drawer. */
.nav-toggle {
  display: none;
  flex: 0 0 auto;
  font-size: 20px;
  line-height: 1;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
}
.nav-toggle:hover { color: var(--accent); border-color: var(--accent); }
.brand:hover .brand-text h1 { color: var(--accent); }

.topbar-tools {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.tool-btn .tb-icon { margin-right: 5px; }
.tool-btn .tb-icon svg { display: inline-block; vertical-align: -2px; }
.tool-btn.tool-btn-icon { font-size: 15px; line-height: 1; padding: 6px 10px; }

/* Active-filter indicator on the Filters button. */
#filters-btn { position: relative; }
#filters-btn.has-filters { color: var(--accent); border-color: var(--accent); }
#filters-btn.has-filters::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  border: 1.5px solid var(--bg);
}

.tool-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}
.tool-btn:hover { color: var(--accent); border-color: var(--accent); }

.brand-sigma {
  font-size: 34px;
  font-weight: 700;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
}

.brand-text h1 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.brand-text p {
  margin: 1px 0 0;
  font-size: 11.5px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}

.search-wrap {
  flex: 1 1 auto;
  position: relative;
  max-width: 760px;
}

#search-input {
  width: 100%;
  padding: 10px 40px 10px 14px;
  font-size: 14.5px;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.15s;
}

#search-input:focus { border-color: var(--accent); }
#search-input::placeholder { color: var(--text-faint); }

.search-kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--text-faint);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 1px 7px;
  font-family: inherit;
}

.filters-row {
  grid-area: filters;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.level-filters {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

#sort-select {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px 8px;
  cursor: pointer;
  font-family: inherit;
}

#sort-select:focus { outline: none; border-color: var(--accent); }

.level-chip {
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.12s;
}

.level-chip:hover { border-color: var(--border-light); color: var(--text); }

.level-chip.active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* ---------- Layout ---------- */

.layout {
  max-width: 1560px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  align-items: start;
}

/* Database & Lists surfaces drop the section sidebar and run full width.
   Desktop-only so the mobile hamburger drawer (below) is unaffected. */
@media (min-width: 901px) {
  .layout.no-sidebar { grid-template-columns: 1fr; }
  .layout.no-sidebar > .sidebar { display: none; }
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: sticky;
  top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding: 20px 10px 40px 16px;
}

/* Separates the formula reference from the pattern catalog in the sidebar. */
/* The two books. Only one is unfolded at a time: opening Formulas folds Patterns away
   and the reverse, so the sidebar reads as two folders rather than one long list. */
/* Only one space's group is shown at a time; spacing between groups counts visible ones only,
   so every space's sidebar starts at the same height. */
.nav-group:not([hidden]) ~ .nav-group:not([hidden]) { margin-top: 14px; }

.nav-group-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 12px;
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.nav-group-btn:hover { background: var(--bg-panel); }

.nav-group-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.nav-group.open .nav-group-label { color: var(--text-dim); }

.nav-group-caret {
  width: 0;
  height: 0;
  border-left: 4.5px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  color: var(--text-faint);
  transform-origin: 30% 50%;
  transition: transform 0.24s cubic-bezier(0.25, 0.9, 0.3, 1);
}
.nav-group.open .nav-group-caret { transform: rotate(90deg); }

.nav-group-body {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.26s cubic-bezier(0.25, 0.9, 0.3, 1),
              opacity 0.2s ease;
}
.nav-group-inner { overflow: hidden; min-height: 0; padding-top: 5px; }
.nav-group.open > .nav-group-body { grid-template-rows: 1fr; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .nav-group-body, .nav-group-caret { transition: none; }
}

.nav-section { margin-bottom: 4px; }

.nav-section-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  background: none;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.nav-section-btn:hover { background: var(--bg-panel); }
.nav-section-btn.active { background: var(--accent-soft); color: var(--accent); }

.nav-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  background: var(--bg-panel);
  border-radius: 999px;
  padding: 1px 8px;
}

.nav-section-btn.active .nav-count { color: var(--accent); background: transparent; }

/* Opening a section should read as a folder opening: its sub-subjects unfold while the
   previously open one folds away. grid-template-rows 0fr -> 1fr is the one way to
   transition to a true auto height, so the list needs the inner wrapper to clip against. */
.nav-subs {
  display: grid;
  grid-template-rows: 0fr;
  margin: 0;
  padding-left: 12px;
  opacity: 0;
  transition: grid-template-rows 0.24s cubic-bezier(0.25, 0.9, 0.3, 1),
              opacity 0.18s ease,
              margin 0.24s cubic-bezier(0.25, 0.9, 0.3, 1);
}
.nav-subs-inner { overflow: hidden; min-height: 0; }

.nav-section.open .nav-subs {
  grid-template-rows: 1fr;
  opacity: 1;
  margin: 2px 0 8px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-subs { transition: none; }
}

.nav-sub-link {
  display: block;
  padding: 4px 12px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-decoration: none;
  border-left: 2px solid var(--border);
  cursor: pointer;
}

.nav-sub-link:hover { color: var(--text); border-left-color: var(--accent); }
/* A subsection the section's filters have emptied: shown, so the outline stays whole,
   but dimmed and inert, since there is nothing on the page to jump to. */
.nav-sub-link.nav-empty, .nav-cluster-link.nav-empty { opacity: 0.4; cursor: default; }
.nav-sub-link.nav-empty:hover { color: var(--text-dim); border-left-color: var(--border); }
.nav-cluster-link.nav-empty:hover { color: var(--text-faint); border-left-color: var(--border); }

/* ---------- Adding cards from a list's own page ---------- */

.list-add { position: relative; margin: 10px 0 16px; max-width: 460px; }
.list-add-input {
  width: 100%;
  padding: 8px 12px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.list-add-input:focus { outline: none; border-color: var(--accent); }

.list-add-results {
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-card);
  overflow: hidden;
}
.list-add-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 11px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.list-add-row:last-child { border-bottom: none; }
.list-add-row:hover { background: var(--bg-panel); }
.list-add-row .lar-plus {
  flex: 0 0 18px;
  text-align: center;
  color: var(--accent);
  font-weight: 700;
}
.list-add-row .lar-name { flex: 1 1 auto; min-width: 0; }
.list-add-row .lar-crumb { flex: 0 0 auto; font-size: 11px; color: var(--text-faint); }
.list-add-row .katex { font-size: 1em; }
.list-add-empty { padding: 9px 12px; font-size: 12.5px; color: var(--text-faint); }

/* Two panels of one figure belong side by side: stacked, the second sits a screen away
   from the first and the comparison is lost. Collapses back to a column when narrow. */
.detail-diagrams { display: grid; gap: 12px; }
.detail-diagrams.dd-2 { grid-template-columns: 1fr 1fr; }
.detail-diagrams.dd-3 { grid-template-columns: 1fr 1fr 1fr; }
.detail-diagrams .detail-diagram { margin: 0; }
@media (max-width: 900px) {
  .detail-diagrams.dd-2, .detail-diagrams.dd-3 { grid-template-columns: 1fr; }
}

/* ---------- Card cross-links ---------- */

/* Colour alone marks a cross-link, with no underline, so a paragraph carrying three of
   them still reads as prose rather than as a menu. */
.card-link {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.card-link:hover { color: var(--accent-strong, var(--accent)); }
/* A lesson reference such as (L3.4) looks like a card link (owner, 2026-11-01). */
.lp-ref { color: var(--accent); text-decoration: none; }
.lp-ref:hover { color: var(--accent-strong, var(--accent)); }

.card-link-broken { color: #dc2626; cursor: help; }

/* Square-cornered card with a small arrow pointing at the linked word, the way a wiki
   preview does it. The arrow is a rotated square sharing the card's border and background,
   with the side facing the card masked by the card itself. */
.card-preview {
  position: absolute;
  z-index: 60;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 11px 13px;
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}
.card-preview .cp-arrow {
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  transform: translateX(-50%) rotate(45deg);
}
/* sitting above the word: arrow on the bottom edge, pointing down */
.card-preview .cp-arrow { bottom: -6px; border-top: none; border-left: none; }
/* flipped below the word: arrow on the top edge, pointing up */
.card-preview.cp-below .cp-arrow {
  bottom: auto;
  top: -6px;
  border: 1px solid var(--border);
  border-bottom: none;
  border-right: none;
}

.card-preview .cp-thumb {
  margin: -5px -7px 9px;
  padding: 8px 6px;
  background: var(--bg-panel);
  border-radius: 3px 3px 0 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
/* Let the figure use the full width of the wider box; capping only the height keeps the
   card a sensible rectangle instead of stretching to whatever aspect the diagram has. */
/* The preview figure is cropped to its drawing (fitDiagramToContent), then drawn as tall as
   the box allows, so it fills about three quarters of the box or more. */
.card-preview .cp-thumb { height: 230px; align-items: center; }
.card-preview .cp-thumb svg { width: 100%; height: 205px; max-height: none; }
.card-preview .cp-head {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 5px;
}
.card-preview .cp-desc { color: var(--text-dim); }
.card-preview .cp-crumb {
  margin-top: 7px;
  font-size: 11px;
  color: var(--text-faint);
}
.card-preview .katex { font-size: 1em; }

/* Curated list-building groups sit above raw keywords in the advanced picker. */
.adv-tag-chip.adv-tag-group {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ---------- Content ---------- */

.content { padding: 24px 22px 120px; min-width: 0; }

.section-header { margin-bottom: 6px; }

.section-header h2 {
  margin: 0 0 4px;
  font-size: 26px;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.section-header p { margin: 0; color: var(--text-dim); font-size: 14px; }

.subsection { margin-top: 34px; }

/* The one second-level heading in the app. The formula page's subsection heading is the
   reference; the two Lists surfaces join it here rather than keeping their own near-copies,
   which is how they drifted to 15px, no gold and no rule line in the first place. */
.subsection > h3,
.wiki-letter > h3,
.list-section-title,
.lists-subhead {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 10px;
}

.subsection > h3::after,
.wiki-letter > h3::after,
.list-section-title::after,
.lists-subhead::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ---------- Clusters: the third level inside Methods and Patterns ----------
   A subject heading (gold, ruled) owns several clusters of techniques that get
   reached for in the same situation. The cluster heading is deliberately quieter
   than its subject: same weight, smaller, no rule, dim rather than gold, so the
   page still reads subject-first and the clusters group beneath it. */

.subsection.has-clusters { margin-top: 40px; }
.cluster { margin-top: 22px; scroll-margin-top: 76px; }
.cluster:first-child { margin-top: 0; }

.cluster-title {
  margin: 0 0 11px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-dim);
}

.nav-clusters { margin: 1px 0 5px; }

.nav-cluster-link {
  display: block;
  padding: 3px 12px 3px 26px;
  font-size: 11.5px;
  color: var(--text-faint);
  text-decoration: none;
  border-left: 2px solid var(--border);
  cursor: pointer;
}

.nav-cluster-link:hover { color: var(--text-dim); border-left-color: var(--accent); }

/* ---------- Nav for the Lists surfaces ----------
   Built on the Database navigator: .ln-sec/.ln-btn/.ln-items/.ln-item are joined onto the
   .db-fam/.db-fam-btn/.db-years/.db-year rules above rather than restated, so the two
   navigators are the same control and cannot drift apart. The search field is .db-search
   unchanged. What makes sharing #sidebar with the formula tree safe lives in app.js: the
   trees sit in #formula-nav and #list-nav, updateNavActive() is scoped to the former, and
   the delegated sidebar listener hands anything inside #list-nav to listNavClick(). */

#list-nav { display: flex; flex-direction: column; gap: 12px; padding-right: 8px; }
.ln-btn { width: 100%; background: none; border: none; cursor: pointer; font-family: inherit; text-align: left; }
.list-nav-back { display: block; padding: 2px 10px; font-size: 12.5px; color: var(--accent); text-decoration: none; }
.list-nav-back:hover { text-decoration: underline; }
.ln-empty { padding: 4px 12px; font-size: 12px; color: var(--text-faint); }

/* "Did you mean": the library's best answer when it sits outside the list being searched.
   One suggestion per line under the question, each marked with a turnstile, so two of them
   read as a short list rather than as a row of chips. */
.dym { margin: 0 0 20px; padding: 12px 16px; background: var(--bg-panel);
       border: 1px solid var(--border); border-radius: 10px; max-width: 70ch; }
.dym-label { margin: 0; font-size: 13.5px; font-weight: 650; color: var(--text); }
.dym-note { font-weight: 500; color: var(--text-faint); }
.dym-list { list-style: none; margin: 6px 0 0; padding: 0; }
.dym-list li { display: flex; align-items: baseline; gap: 8px; padding: 3px 0 3px 4px; }
.dym-list li::before { content: "\21B3"; color: var(--text-faint); font-size: 13px; }
.dym-link { font-size: 13.5px; font-weight: 650; color: var(--accent); text-decoration: none; }
.dym-link:hover { text-decoration: underline; }
.dym-crumb { font-size: 11.5px; color: var(--text-dim); }

/* ---------- Sections inside a study route ----------
   A 141-card route is only usable if it is broken up. The heading is deliberately quieter
   than the list's own title and louder than a card name, and the note sits directly under
   it so the reader can decide whether to read the section at all. */

.list-blurb { margin: 2px 0 18px; font-size: 14px; line-height: 1.6; color: var(--text-dim); }

.list-section { margin-top: 34px; scroll-margin-top: 76px; }
.list-section:first-child { margin-top: 8px; }


.list-section-title { margin-bottom: 6px; }
.list-section-note { margin: 0 0 14px; font-size: 13px; line-height: 1.55; color: var(--text-dim); }

/* ---------- Formula cards ---------- */

.cards { display: flex; flex-direction: column; gap: 12px; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px 14px;
  transition: border-color 0.15s, background 0.15s;
  position: relative;
}

/* Density and keyword tags, both driven from the Settings page by an attribute on <html>.
   Attributes rather than a class so they sit alongside data-theme and data-layout, and so a
   card needs no extra markup to respond to either. */
html[data-density="compact"] .card { padding: 10px 13px 9px; }
html[data-density="compact"] .cards { gap: 10px; }
html[data-density="compact"] .formula-display { padding: 10px 12px; margin: 8px 0; }
html[data-density="compact"] .subsection { margin-top: 24px; }
html[data-tags="off"] .card .tag-row { display: none; }

/* Text size. Every override below MIRRORS THE SELECTOR OF THE RULE IT SCALES, which is the
   whole trick: `.detail-head .card-name` is 25px while a list card's `.card-name` is 15.5px, so
   a single `html[data-text="large"] .card-name` rule outranks the two-class detail rule and
   shrinks the page title instead of growing it. Same name, two sizes, so two overrides.

   Headings are included deliberately. Scaling only body text leaves every heading behind and
   the page stops looking like one typeface at one scale — which is what the first attempt did.

   Maths comes along for free: every KaTeX size in the app is em-relative
   (.formula-display .katex is 1.18em, .card-desc .katex 1.02em, .key-forms .katex 1.05em), so
   raising a container's px size carries its formulas with it. .formula-display carries no
   font-size of its own, so it gets one here purely to give its KaTeX a larger multiplicand.
   Body prose takes the biggest step (14px -> 17px, about 20%), since that is what a reader
   asking for larger text is actually reading; headings are already large and grow less so
   the ramp keeps its shape. */

/* headings */
html[data-text="large"] .section-header h2 { font-size: 29px; }
html[data-text="large"] .detail-head .card-name { font-size: 28px; }
html[data-text="large"] .subsection > h3,
html[data-text="large"] .wiki-letter > h3,
html[data-text="large"] .list-section-title,
html[data-text="large"] .lists-subhead { font-size: 19px; }
html[data-text="large"] .detail-body h4,
html[data-text="large"] .key-forms h4,
html[data-text="large"] .related h4,
html[data-text="large"] .connected h4,
html[data-text="large"] .practice h4,
html[data-text="large"] .prob-chain h4,
html[data-text="large"] .prob-think h4,
html[data-text="large"] .search-problems h4,
html[data-text="large"] .interactive h4 { font-size: 16px; }

/* body */
html[data-text="large"] .card .card-name { font-size: 17.5px; }
html[data-text="large"] .card-desc { font-size: 16px; }
html[data-text="large"] .detail-summary { font-size: 17.5px; }
html[data-text="large"] .detail-body p,
html[data-text="large"] .detail-body li { font-size: 17px; }
html[data-text="large"] .key-forms .detail-list li { font-size: 17px; }
html[data-text="large"] .key-forms .kf-note { font-size: 14.5px; }
html[data-text="large"] .wiki-list a { font-size: 15.5px; }
html[data-text="large"] .formula-display { font-size: 1.12em; }

/* supporting text, so captions and breadcrumbs do not stay stranded at the small size */
html[data-text="large"] .diagram-cap { font-size: 14px; }
html[data-text="large"] .detail-crumb { font-size: 13.5px; }
html[data-text="large"] .card-crumb { font-size: 13px; }

.card:hover { border-color: var(--border-light); background: var(--bg-card-hover); }

.card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.card-name { font-size: 15.5px; font-weight: 700; margin: 0; }

.card-crumb { font-size: 11.5px; color: var(--text-faint); }

.badges { display: inline-flex; gap: 5px; flex-wrap: wrap; margin-left: auto; }

.badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: 999px;
  color: #0f1420;
}

.badge-MATHCOUNTS { background: var(--level-mc); }
.badge-AMC10 { background: var(--level-10); }
.badge-AMC12 { background: var(--level-12); }
.badge-AIME { background: var(--level-aime); }
.badge-Olympiad { background: var(--level-oly); }

/* The one split oval beside a card's name: the left half is the contest tier, the right half is
   the card's importance within its subsection, in a tint of the same color. Colors come from the
   theme variables, so one rule serves both themes. */
.tagpill { --tp-c: var(--accent); display: inline-flex; align-items: stretch; border-radius: 999px; overflow: hidden;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; line-height: 1.5; vertical-align: middle; }
.tagpill-amc { --tp-c: var(--accent); }
.tagpill-aime-early { --tp-c: var(--level-aime); }
.tagpill-aime-late { --tp-c: #a78bfa; }  /* a soft violet: the gold read as muddy */
.tagpill-olympiad { --tp-c: #f4727c; }  /* a lighter red, so the dark label reads in both themes */
.tp-tier { padding: 2px 8px; color: #0f1420; background: var(--tp-c); }
.tp-imp { padding: 2px 8px 2px 7px; color: var(--text);
  background: rgba(128, 128, 128, 0.16); background: color-mix(in srgb, var(--tp-c) 24%, var(--bg-card));
  border-left: 1.5px solid var(--bg-card); }
.tp-imp-high { font-weight: 800; }
.tp-imp-low { opacity: 0.8; }
.tp-imp-lower { opacity: 0.6; font-weight: 600; }
.tp-imp-lowest { opacity: 0.45; font-weight: 600; }

.formula-display {
  padding: 12px 14px;
  margin: 8px 0 10px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  text-align: center;
}

.formula-display .katex { font-size: 1.18em; }

.card-desc { font-size: 13.5px; color: var(--text-dim); margin: 0; }
.card-desc .katex { font-size: 1.02em; color: var(--text); }

.copy-btn {
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 2px 9px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 0.12s, color 0.12s, border-color 0.12s;
  font-family: inherit;
  align-self: center;
}

.card:hover .copy-btn { opacity: 1; }
.copy-btn:hover { color: var(--text); border-color: var(--border-light); }
.copy-btn.copied { color: var(--level-mc); border-color: var(--level-mc); opacity: 1; }
.extra-toggle .chev { font-size: 10px; }

/* Full width by design, but tight vertically: the figure should fill the band rather than
   float in the middle of it, so the padding is small and the diagram is allowed to be big. */
.card-extra {
  margin-top: 10px;
  padding: 6px 14px 4px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px dashed var(--border-light);
  border-radius: 8px;
}

.card-example {
  font-size: 13.5px;
  color: var(--text-dim);
  margin: 0;
}

.card-example::before {
  content: "Example. ";
  color: var(--gold);
  font-weight: 700;
}

.card-example .katex { color: var(--text); }

.diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 8px;
}

.diagram-cap {
  max-width: 400px;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.5;
}

.diagram svg {
  width: 100%;
  max-width: 400px;
  height: auto;
  overflow: hidden;
}

.diagram { margin-bottom: 14px; }

.diagram + .card-example { margin-top: 4px; }

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.tag {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--text-faint);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}

.tag:hover { color: var(--accent); border-color: var(--accent); }
.tag.tag-hit { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Search results ---------- */

.results-meta { color: var(--text-dim); font-size: 13.5px; margin: 0 0 16px; }
.results-meta strong { color: var(--text); }

.empty-state {
  text-align: center;
  padding: 80px 20px;
  color: var(--text-faint);
}

.empty-state .big { font-size: 42px; margin-bottom: 10px; }

/* ---------- Responsive ---------- */

/* ---------- Mobile drawer backdrop (shared) ---------- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.nav-backdrop[hidden] { display: none; }
body.nav-open .nav-backdrop { opacity: 1; }

@media (max-width: 900px) {
  /* clip, not hidden: hidden made the body a scroll container, which broke every sticky element
     on a phone, the top bar included (owner, 2026-10-31). */
  html, body { overflow-x: clip; }

  /* Two-row header: [hamburger][brand][tools] then full-width search. */
  .topbar-inner {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 10px 12px;
  }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; order: 0; }
  .brand { order: 1; }
  /* One row on a tablet: the menu, the logo, the spaces, the search and the tools (owner,
     2026-10-31: the search stays in the top bar instead of taking a row of its own). */
  .space-switch { order: 2; }
  .space-switch > button { padding: 0 9px; }
  .search-wrap { order: 3; flex: 1 1 90px; min-width: 0; max-width: none; }
  .search-kbd { display: none; }
  .topbar-tools { order: 4; margin-left: 0; flex: none; }

  /* Trim the header so nothing overflows the viewport. */
  .brand-text p { display: none; }
  .brand-sigma { font-size: 28px; }
  .brand-text h1 { font-size: 16px; }
  .tool-btn .tb-label { display: none; }
  .tool-btn .tb-icon { margin-right: 0; }
  .tool-btn { padding: 6px 10px; font-size: 14px; }

  :root { --topbar-h: 111px; }   /* a fallback: the ResizeObserver in app.js sets the real height */

  /* Sidebar becomes an off-canvas drawer. */
  .layout { grid-template-columns: 1fr; }
  .sidebar {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 61;
    width: 82%;
    max-width: 320px;
    height: 100vh;
    max-height: 100vh;
    background: var(--bg);
    border-right: 1px solid var(--border);
    padding: 18px 14px 40px;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    box-shadow: 2px 0 24px rgba(0, 0, 0, 0.28);
  }
  body.nav-open .sidebar { transform: translateX(0); }
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-track { background: transparent; }

/* An overlay dims the whole page, but the scrollbar is painted by the browser OUTSIDE the
   overlay, so it keeps its full strength and becomes the brightest thing on screen the moment
   a modal opens. Dim it to match. Driven by :has() rather than a class toggled in JS so it
   cannot desync from the overlay actually being present — the modals are created and removed
   as elements, with no single open/close chokepoint to hook.

   NOTE the selectors are written BOTH with and without a descendant space. The page's own
   scrollbar belongs to the root element, so it needs `html:has(...)::-webkit-scrollbar-thumb`
   with no space; the spaced form only reaches scrollbars on descendants (the sidebar, the
   database nav). Writing only the spaced form left the page scrollbar undimmed. */
html:has(.modal-overlay)::-webkit-scrollbar-thumb,
html:has(.modal-overlay) ::-webkit-scrollbar-thumb,
body.nav-open::-webkit-scrollbar-thumb,
body.nav-open ::-webkit-scrollbar-thumb { background: var(--scrollbar-dim); }

/* Firefox has no ::-webkit-scrollbar, and `scrollbar-color` is the only lever there. It must
   NOT be used where the webkit pseudo-elements exist: setting it makes Chrome fall back to its
   standard 15px scrollbar instead of the 10px one styled above, and with `scrollbar-gutter:
   stable` the reserved gutter changes with it, so the whole page visibly shifts sideways the
   moment a modal opens. */
@supports not selector(::-webkit-scrollbar) {
  html:has(.modal-overlay), body.nav-open { scrollbar-color: var(--scrollbar-dim) transparent; }
}

/* ---------- Detail pages ---------- */

.card { cursor: pointer; }

.more-hint {
  text-align: right;
  font-size: 11px;
  color: var(--accent);
  margin-top: 8px;
  opacity: 0;
  transition: opacity 0.12s;
}

.card:hover .more-hint { opacity: 1; }

.badge-method { background: #45d6c3; }
.badge-pattern { background: #f0a35e; }

.back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  margin-bottom: 14px;
}

.back-link:hover { text-decoration: underline; }

/* Back links stack, one per line, and read as equals — the one-step breadcrumb is a second
   way out, not a louder one. It goes on top: retracing the step you just took is the likelier
   move, so it should be the first thing under the cursor. */
.back-row { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; margin-bottom: 14px; }
.back-row .back-link { margin-bottom: 0; }

.detail-crumb { font-size: 12px; color: var(--text-faint); margin: 0 0 6px; }

.detail-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 12px;
}

.detail-head .card-name { font-size: 25px; margin: 0; }
.detail-head .copy-btn { position: static; opacity: 1; }

.detail-formula { padding: 22px 18px; }
.detail-formula .katex { font-size: 1.45em; }

/* "Key forms": the common shapes a method is applied in, its own subsection under
   the Key idea paragraph. Method cards only. Each item is a formula with a small
   note beneath it. */
.key-forms { margin: 2px 0 14px; }
.key-forms .detail-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.key-forms .detail-list li {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.5;
  padding: 9px 13px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.key-forms .kf-note {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--text-dim);
}
.key-forms .katex { font-size: 1.05em; }

.detail-summary { font-size: 15px; color: var(--text); }
/* Dark only. At full --text this paragraph is the brightest thing on the page, brighter than
   the heading above it, and it sits directly under the formula box where it competes for the
   eye. --text-dim settles it back into the page. Light mode is left exactly as it was: the
   same token there is already dark-on-white and reads correctly. */
:root[data-theme="dark"] .detail-summary { color: var(--text-dim); }

.detail-body { margin-top: 4px; }

.detail-body h4,
.key-forms h4,
.related h4,
.connected h4,
.practice h4,
.prob-chain h4,
.prob-think h4,
.search-problems h4,
.interactive h4 {
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  margin: 22px 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.key-forms h4 { margin: 22px 0 8px; }
.related h4, .connected h4, .practice h4, .interactive h4, .prob-think h4, .search-problems h4 { margin: 0 0 10px; }

.detail-body p { font-weight: 400; }

.detail-diagram { margin: 14px 0 4px; }
.detail-diagram svg { max-width: 430px; }
/* A figure placed inside the write-up at a {{figure:name}} marker, and an example's own
   figure under its question. Both sit in running text, so they get vertical breathing room
   and the same width cap as the figures at the top of the card. */
.body-figure { margin: 6px 0 16px; }
.body-figure svg, .example-figure svg { max-width: 430px; }
.example-figure { margin: 6px 0 12px; }
.problem-sol .example-figure { margin-top: 12px; }

.detail-body h4::after,
.key-forms h4::after,
.related h4::after,
.connected h4::after,
.practice h4::after,
.prob-chain h4::after,
.prob-think h4::after,
.search-problems h4::after,
.interactive h4::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.detail-body p {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 10px;
}

.detail-body .detail-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-body .detail-list li {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.55;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
}

/* Inline math should flow with the surrounding prose, not stand out from it. */
.detail-body .katex,
.card-desc .katex,
.card-example .katex,
.problem-q .katex,
.problem-sol .katex,
.detail-summary .katex {
  font-size: 1em;
  color: inherit;
  line-height: inherit;
}

.detail .card-extra { margin-top: 18px; }
.detail .tag-row { margin-top: 18px; }

.related { margin-top: 26px; }

/* ---------- Practice questions (detail pages only) ---------- */

.practice { margin-top: 26px; }

.interactive { margin-top: 26px; }

/* ---------- Problem database ---------- */
.practice-note { font-weight: 500; font-size: 11.5px; color: var(--text-faint); }
.prob-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* The link sits at the far right of a wide row, so in a long list it is easy to lose which problem
   it belongs to. Shading the whole row on hover ties the two ends together, and :focus-within
   keeps the row marked after its AoPS link is clicked (that opens a new tab), until focus moves.
   The negative margin puts the padding outside the text column, so nothing shifts. */
.prob-row { display: flex; align-items: center; gap: 10px; padding: 3px 8px; margin: 0 -8px;
            border-radius: 6px; transition: background 0.12s; }
.prob-row:hover, .prob-row:focus-within { background: var(--accent-soft); }
.prob-row:hover .prob-open, .prob-row:focus-within .prob-open { color: var(--accent); }
.prob-row .prob-open { font-size: 13.5px; color: var(--text); text-decoration: none; font-weight: 600; }
.prob-row .prob-open:hover { color: var(--accent); text-decoration: underline; }
.prob-row .ref-ext-link { margin-left: auto; font-size: 11.5px; color: var(--accent); text-decoration: none; white-space: nowrap; }
.prob-row .ref-ext-link:hover { text-decoration: underline; }

/* Browse page: competition/year navigator */
/* Column geometry matches the Lists sidebar exactly -- 24px left edge, 214px wide, content
   starting at 260 -- so moving between Database and Lists does not resize the navigator or
   shift the page. 214 is what .sidebar leaves after its 24/12 padding and its stable
   scrollbar gutter; the -4px on .db-nav reconciles .content's 28px padding with the
   sidebar's 24px, since this navigator lives inside the content column rather than in
   .sidebar the way #list-nav does. The matching +4px on the right keeps the box 214 wide
   rather than letting the negative margin stretch it to 218.
   The column is 220 rather than 214 because .db-nav scrolls on its own and so reserves a ~10px
   scrollbar gutter INSIDE the column, where on Lists that gutter belongs to .sidebar and sits
   outside the 214. 220 - 4 padding - 10 gutter leaves the same 206px of usable width, so the
   search box and the buttons end on the same pixel as #list-nav's.
   The gap then carries the rest: on Lists the main column is .content, whose own 28px padding
   puts its text at 288; .db-main sits inside that padding with none of its own, so
   28 + 220 + 40 = 288 lines the two surfaces up. */
.db-layout { display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; }
.db-nav { margin-left: -4px; margin-right: 4px; position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow-y: auto; scrollbar-gutter: stable; padding-right: 4px; display: flex; flex-direction: column; gap: 12px; }
.db-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; color: var(--text); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; }
.db-search:focus { outline: none; border-color: var(--accent); }
.db-fam-list.searching,
.ln-list.searching { opacity: 0.5; }
.db-fam,
.ln-sec { margin-bottom: 2px; }
.db-fam-btn,
.ln-btn { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 14px; font-weight: 650; color: var(--text); padding: 8px 10px; border-radius: 8px; }
.db-fam-btn:hover,
.ln-btn:hover { background: var(--bg-panel); }
.db-fam-btn.active,
.ln-btn.active { background: var(--accent-soft); color: var(--accent); }
.db-count { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--text-faint); }
.db-fam-btn.active .db-count,
.ln-btn.active .db-count { color: var(--accent); }
.db-years,
.ln-items { display: none; flex-direction: column; padding: 2px 0 6px 10px; }
.db-fam.open .db-years,
.ln-sec.open .ln-items { display: flex; }
.db-year,
.ln-item { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 13px; color: var(--text-dim); padding: 5px 10px; border-left: 2px solid var(--border); border-radius: 0 6px 6px 0; }
.db-year:hover,
.ln-item:hover { color: var(--text); border-left-color: var(--accent); }
.db-year.active,
.ln-item.active { color: var(--accent); font-weight: 650; border-left-color: var(--accent); background: var(--accent-soft); }
.db-main-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.db-main-year { color: var(--text-faint); font-weight: 600; }
.db-group { margin-top: 22px; }
.db-group-title { font-size: 15px; font-weight: 700; color: var(--gold); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; }
.db-group-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.prob-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
/* Stack the navigator above the problems on narrow screens (placed after the base
   .db-layout rule so it wins in source order). */
@media (max-width: 900px) {
  .db-layout { grid-template-columns: 1fr; gap: 14px; }
  /* margin-left goes back to 0: stacked, the navigator should sit on the content's own left
     edge, not 4px outside it. */
  .db-nav { margin-left: 0; margin-right: 0; position: static; max-height: none; overflow: visible; }
}
.prob-card { display: block; text-decoration: none; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; transition: border-color 0.12s; }
.prob-card:hover { border-color: var(--accent); }
.prob-card-top { display: flex; align-items: center; gap: 10px; }
.prob-ref { font-size: 14px; font-weight: 700; color: var(--text); }
.prob-formula-count { margin-left: auto; font-size: 11px; color: var(--text-faint); white-space: nowrap; }
.ptype-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ptype-chip { font-size: 11px; color: var(--text-dim); background: var(--bg-panel); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; text-decoration: none; }
a.ptype-chip:hover { border-color: var(--accent); color: var(--accent); }
/* The subject chip leads the row: the same pill, in full-strength text, so it reads as the
   problem's subject rather than one more topic. */
.subject-chip { color: var(--text); font-weight: 600; }
.prob-strategy { margin-top: 8px; font-size: 12.5px; color: var(--text-dim); line-height: 1.5; }

/* Per-problem detail */
.prob-strategy-box { margin: 14px 0; padding: 12px 14px; background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 8px; }
.prob-strategy-box h4 { margin: 0 0 5px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-faint); }
.prob-strategy-box p { margin: 0; font-size: 14px; color: var(--text); line-height: 1.6; }
.prob-detail-section { margin: 16px 0; }
.prob-detail-section h4 { font-size: 14px; font-weight: 700; margin: 0 0 10px; color: var(--text); }
.strat-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.strat-link { display: flex; flex-direction: column; gap: 2px; text-decoration: none; padding: 9px 12px; background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px; }
.strat-link:hover { border-color: var(--accent); }
.strat-name { font-size: 14px; font-weight: 600; color: var(--accent); }
.strat-crumb { font-size: 11.5px; color: var(--text-faint); }
.strat-empty { color: var(--text-faint); font-size: 13px; }

/* Tricks: the optional second route on a problem, faster than the main solution but
   leaning on something a solver would not normally reach for. Gold rather than the
   accent blue, so it reads as a different kind of thing from the standard route. It
   comes after the standard route, which is what a reader meets first. */
.trick-box { padding: 12px 14px; background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: 8px; }
.trick-box h4 { margin: 0 0 9px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); }
.trick-prose { margin: 0 0 10px; font-size: 14px; color: var(--text); line-height: 1.6; }
.trick-box .trick-prose:first-child, .trick-box .strat-list:first-child { margin-top: 0; }
.prob-note { font-size: 12.5px; color: var(--text-faint); margin: 14px 0 12px; }
.aops-btn { display: inline-block; font-size: 13px; font-weight: 600; color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 8px; padding: 8px 16px; text-decoration: none; }
.aops-btn:hover { filter: brightness(1.08); }
/* An AMC or AIME statement, with its credit line directly beneath, small and muted. */
.prob-st { margin: 14px 0 6px; }
/* A statement is always shown whole: it never scrolls (overflow-x: auto here once turned on a
   vertical scrollbar whenever a tall fraction reached past the box). Only a displayed formula
   too wide for a phone scrolls sideways on its own, and a figure shrinks to fit (owner, 2026-10-31). */
.prob-statement { font-size: 16px; line-height: 1.65; white-space: pre-line; padding: 16px 18px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px; overflow: visible; }
.prob-statement img { max-width: 100%; height: auto; }
html[data-text="large"] .prob-statement { font-size: 18px; }
html[data-text="larger"] .prob-statement { font-size: 21px; }
.prob-choice { padding: 7px 0; line-height: 1.7; min-height: 2.2em; }
.prob-choice .katex { line-height: 1.4; }
.prob-choice-img { vertical-align: middle; margin-left: 6px; background: #fff; border-radius: 6px; padding: 3px 6px; max-width: 100%; }
.prob-figure { display: block; max-width: 100%; height: auto; margin: 12px auto; padding: 10px 14px; background: #fff; border-radius: 8px; }
.prob-credit { font-size: 11.5px; line-height: 1.5; color: var(--text-faint); margin: 8px 2px 0; }
.prob-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* A displayed equation wider than the box scrolls inside it instead of widening the page. */
.prob-statement .katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.prob-statement .katex-display > .katex { white-space: nowrap; }

.problem {
  background: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 13px 15px;
  margin-bottom: 10px;
}

.problem-q {
  margin: 0;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.7;
}

.problem-q strong { color: var(--text); }

.sol-toggle {
  margin-top: 10px;
  padding: 3px 11px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
}

.sol-toggle:hover { border-color: var(--accent); }

.problem-sol {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
  color: var(--text-dim);
  font-size: 13.5px;
  line-height: 1.7;
}

.related-grid { display: flex; flex-wrap: wrap; gap: 8px; }
/* Used by methods, Related formulas: inline blue links that open the hover preview. */
.link-row { margin: 0; font-size: 14.5px; line-height: 1.9; }
.link-row .card-link { white-space: nowrap; }

.related-item {
  font-size: 13px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 12px;
  text-decoration: none;
  transition: border-color 0.12s;
}

.related-item:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Starred filter chip ---------- */
.star-chip.active {
  color: #1a1205;
  background: var(--gold);
  border-color: var(--gold);
}

/* ---------- Star buttons ---------- */
.star-btn {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color 0.15s, transform 0.1s;
}
.star-btn:hover { color: var(--gold); transform: scale(1.15); }
.star-btn.starred { color: var(--gold); }

/* ---------- At-a-glance diagrams on cards ---------- */
.card-glance svg { max-width: 300px; }
.card-glance .diagram-cap { font-size: 11.5px; max-width: 340px; margin-top: 2px; }
.card-glance.diagram { margin-bottom: 2px; }

/* ---------- Add-to-list "+" button (minimal, neutral) ---------- */
.addlist-btn {
  flex-shrink: 0;
  align-self: center;
  font-size: 14px;
  line-height: 1;
  font-family: inherit;
  color: var(--text-faint);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 8px;
  cursor: pointer;
  opacity: 0.6;
  transition: color 0.12s, border-color 0.12s, opacity 0.12s;
}
.card:hover .addlist-btn { opacity: 1; }
.addlist-btn:hover { color: var(--text); border-color: var(--border-light); opacity: 1; }

/* ---------- Topic chips ---------- */
/* The same pill as a keyword tag, outlined in a light tint of the accent, so a topic reads as
   a tag of another colour rather than as bare blue text (owner, 2026-10-17). */
.topic-chip {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 999px;
  padding: 1px 9px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.topic-chip:hover { border-color: var(--accent); }

/* ---------- Add-to-list popover ---------- */
.listmenu {
  position: absolute;
  z-index: 200;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  padding: 8px;
  font-size: 13px;
}
.lm-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-faint);
  padding: 2px 6px 8px;
}
.lm-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.lm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 6px;
  border-radius: 7px;
  cursor: pointer;
  color: var(--text);
  background: transparent;
  border: none;
  font: inherit;
  text-align: left;
}
.lm-row:hover { background: var(--bg-card-hover); }
.lm-emoji { flex-shrink: 0; }
.lm-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lm-new {
  display: flex;
  gap: 6px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.lm-new input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 12.5px;
  padding: 5px 8px;
  color: var(--text);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.lm-new input:focus { outline: none; border-color: var(--accent); }
.lm-new button {
  flex-shrink: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: pointer;
}
.lm-new button:hover { background: var(--accent); color: #fff; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%) translateY(14px);
  z-index: 300;
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  padding: 10px 18px;
  font-size: 13.5px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Study lists overview ---------- */
.lists-toolbar { margin: 4px 0 18px; }
.lists-new { display: flex; gap: 8px; max-width: 420px; }
.lists-new input {
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 14px;
  padding: 8px 12px;
  color: var(--text);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.lists-new input:focus { outline: none; border-color: var(--accent); }
.lists-new button {
  flex-shrink: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0 16px;
  cursor: pointer;
}
.lists-new button:hover { background: var(--accent); color: #fff; }

.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  /* stretch, not start: a name long enough to wrap ("MATHCOUNTS Counting & Probability")
     would otherwise leave its neighbours a line shorter and the row ragged again. */
  align-items: stretch;
  gap: 14px;
  margin-bottom: 30px;
}
/* Tiles past the preview cap stay in this grid and are hidden by class, so revealing them
   continues the existing rows instead of starting a detached second grid below a ragged one.
   An explicit rule, not [hidden]: an author `display` beats the UA sheet's
   [hidden] { display: none }, so the attribute alone would not hide a grid child either. */
.list-grid.is-collapsed .list-extra { display: none; }
.list-card {
  display: block;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 15px 16px;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.14s, background 0.14s, transform 0.1s;
}
.list-card:hover { border-color: var(--accent); background: var(--bg-card-hover); transform: translateY(-2px); }
.list-card-top { display: flex; align-items: flex-start; gap: 8px; }
.list-emoji { font-size: 18px; }
.list-name { font-weight: 700; font-size: 15px; flex: 1; min-width: 0; line-height: 1.3; overflow-wrap: break-word; }
.list-card-count { font-size: 12.5px; color: var(--accent); font-weight: 600; margin-top: 8px; }
.list-card-preview { font-size: 12px; color: var(--text-dim); margin-top: 6px; line-height: 1.45; }
.list-card-preview.empty { color: var(--text-faint); font-style: italic; }

/* ---------- List builder ---------- */
/* ---------- List detail ---------- */
.list-detail-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 2px; }
.list-detail-head h2 { margin: 0; font-size: 24px; }
.list-detail-count { color: var(--accent); font-weight: 600; font-size: 14px; }
/* margin-left:auto pushes the group to the far right of the header row, so the two
   destructive buttons sit away from the list body rather than just above it. */
.list-head-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.list-tool {
  font: inherit;
  font-size: 12.5px;
  color: var(--text-dim);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 12px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.list-tool:hover { color: var(--text); border-color: var(--border-light); }
.list-tool.danger:hover { color: var(--level-oly); border-color: var(--level-oly); }

/* List glyphs (plain text, not emoji) */
.list-star { color: var(--gold); }
.list-ico { color: var(--accent); font-size: 0.85em; }

/* Lists overview sections + built-in study sets */
/* Same 34px the formula page puts between .section-header and its first .subsection, so
   "Study Routes" sits off the page header rather than against it. */
.lists-section { margin: 34px 0; }
.lists-subhead { margin-bottom: 6px; }
.lists-subnote { font-size: 13px; color: var(--text-dim); margin: 0 0 14px; }
.builtin-card .list-name { font-weight: 700; font-size: 14.5px; display: block; }
.builtin-card .list-card-top { display: block; }
/* The grid's 30px bottom margin separates it from the NEXT section, but when a Show-more
   button follows it that margin is just a gap inside one block. Collapse it there. */
.list-grid:has(+ .list-more) { margin-bottom: 10px; }
.list-more { margin-top: 4px; }

.show-more-btn {
  margin-top: 4px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 16px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.show-more-btn:hover { border-color: var(--accent); background: var(--accent-soft); }
.builtin-note { color: var(--text-dim); font-size: 13px; margin: 2px 0 14px; }
.b-lvl-chip.active { color: #fff; background: var(--accent); border-color: var(--accent); }
#settings-btn { font-size: 17px; line-height: 1; }

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 16px 16px;
  overflow-y: auto;
}
.modal {
  width: 100%;
  max-width: 460px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.modal-head h3 { margin: 0; font-size: 16px; }
.modal-close {
  background: none; border: none; color: var(--text-dim);
  font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.modal-close:hover { color: var(--text); }
.settings-body { padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 20px; }

.settings-group-title {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--text-faint); margin-bottom: 9px;
}
.filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-chip {
  font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.filter-chip:hover { border-color: var(--accent); color: var(--accent); }
.filter-chip.active { color: #fff; background: var(--accent); border-color: var(--accent); }
.fc-count { opacity: 0.7; font-weight: 500; }
.filter-chip.active .fc-count { opacity: 0.9; }
/* Experimental corner of Settings. Deliberately looks like a side door rather than a setting:
   these are links out to standalone pages in lab/, not preferences, so they get cards instead
   of the .set-choice buttons every real option uses. */
.settings-lab .settings-group-title { display: flex; align-items: center; gap: 9px; }
.lab-tag {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-faint); border: 1px dashed var(--border-light);
  border-radius: 999px; padding: 1px 8px;
}
.lab-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.lab-card {
  display: block; text-decoration: none; padding: 14px 16px;
  background: var(--bg-panel); border: 1px dashed var(--border-light);
  border-radius: 11px; transition: border-color 0.15s, background 0.15s;
}
.lab-card:hover { border-color: var(--accent); background: var(--bg-card-hover); }
.lab-name { display: block; font-size: 14px; font-weight: 650; color: var(--text); margin-bottom: 5px; }
.lab-desc { display: block; font-size: 12.5px; line-height: 1.5; color: var(--text-dim); }
@media (max-width: 720px) { .lab-row { grid-template-columns: 1fr; } }

/* The Group toggle on a saved list. `.on` is the engaged state -- it is a mode the reader is
   currently in, not an action, so it reads as pressed rather than as another button. */
.list-tool.on {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--accent-soft);
}

.settings-hint { font-size: 12.5px; color: var(--text-faint); margin: 9px 0 0; }

/* ---------- Settings page ----------
   Reuses the filter modal's group headings so the page reads as part of the same app. Each
   preference is a row of cards rather than a toggle, because every option needs a line of
   explanation more than it needs to be compact. */
.settings-page { display: flex; flex-direction: column; gap: 34px; margin-top: 30px; max-width: 70ch; }
/* A group holds several options; each option keeps its own quieter label so the group heading
   ("Appearance") and the option name ("Text size") stay distinguishable. */
.settings-group > .set-opt + .set-opt { margin-top: 16px; }
.set-sub { font-size: 12.5px; font-weight: 650; color: var(--text-dim); margin-bottom: 7px; }
.set-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.set-choice {
  flex: 1 1 210px; display: flex; flex-direction: column; gap: 3px; text-align: left;
  font: inherit; padding: 11px 14px; cursor: pointer;
  color: var(--text-dim); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.set-choice:hover { border-color: var(--accent); color: var(--text); }
.set-choice.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.set-choice-label { font-size: 14px; font-weight: 650; }
.set-choice-note { font-size: 12.5px; color: var(--text-faint); line-height: 1.45; }
.set-choice.active .set-choice-note { color: var(--accent); opacity: 0.85; }

/* ---------- Wiki layout ----------
   A section as an A-Z index: the alphabet does the grouping, so subsections are folded away
   in the sidebar too (see the data-layout rule below) and each formula is just a link.
   column-width lets the browser pick the column count, so this collapses to one column on a
   phone without a media query. */
.wiki-letter { margin-top: 30px; scroll-margin-top: 76px; }
.wiki-letter > h3 { margin-bottom: 8px; }
.wiki-letter:first-of-type { margin-top: 18px; }
.wiki-list {
  list-style: none; margin: 0; padding: 0;
  column-width: 210px; column-gap: 26px;
}
/* A bullet per entry, and rows packed tight. The separator used to be whitespace alone, which
   needed a lot of it to read as a separation at all; with a marker doing that job the rows can
   close right up and a whole subject fits on one screen. The 30px above each letter is what
   keeps the groups apart. The bullet is a ::before rather than list-style because an outside
   marker gets clipped at a column edge in multi-column layout. */
.wiki-list li { break-inside: avoid; display: flex; gap: 7px; padding: 0; }
.wiki-list li::before {
  content: "\2022";
  flex: 0 0 auto;
  color: var(--text-faint);
  font-size: 13.5px; line-height: 1.5;
}
.wiki-list a {
  font-size: 13.5px; line-height: 1.5;
  color: var(--text); text-decoration: none;
}
.wiki-list a:hover { color: var(--accent); text-decoration: underline; }
/* Special:NewCards: one card per row, in the order written, with its kind, subject, and group. */
.newcards-list { columns: auto; margin-bottom: 18px; }
.newcards-meta { font-size: 12.5px; color: var(--text-dim); margin-left: 6px; }

/* Wiki mode groups by letter, so the sidebar's subsection lists have nothing to point at.
   Hiding them here rather than rebuilding the sidebar is deliberate: buildSidebar() runs once
   and owns a delegated click listener, so rebuilding it per render would leak one each time. */
html[data-layout="wiki"] .nav-subs { display: none; }
.settings-actions { display: flex; justify-content: flex-end; }
.settings-reset {
  font: inherit; font-size: 13px; color: var(--text-dim); background: transparent;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 14px; cursor: pointer;
}
.settings-reset:hover { color: var(--text); border-color: var(--border-light); }

/* Hide the browser's default (light) number spinner and replace it with themed ▲▼
   arrows (added by decorateNumberInputs) that sit inside the field and match the UI. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.num-stepper { position: relative; display: inline-flex; vertical-align: middle; }
.num-stepper > input[type="number"] { padding-right: 15px; }
.num-btns { position: absolute; right: 3px; top: 3px; bottom: 3px; display: flex; flex-direction: column; width: 12px; }
.num-btns button {
  flex: 1; padding: 0; margin: 0; border: none; background: transparent;
  color: var(--text-faint); cursor: pointer; font-size: 8px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.num-btns button:hover { color: var(--accent); }
.num-btns button:active { color: var(--text); }

/* ---------- Recurrence solver widget ---------- */
.rsolver {
  margin: 22px 0;
  padding: 18px 18px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.rsolver h4 { margin: 0 0 12px; font-size: 15px; }
.rsolver-eq { margin: 0 0 10px; font-size: 15px; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.rs-in {
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px;
  padding: 4px 8px; margin: 0 2px;
}
.rs-in:focus { outline: none; border-color: var(--accent); }
.rs-r { width: 46px; text-align: center; }
.rs-f { width: 190px; max-width: 60vw; }
.rs-n0 { width: 26px; text-align: center; padding: 1px 3px; font-size: 12px; }
.rs-a0 { width: 54px; text-align: center; }
.rs-go {
  font: inherit; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
  padding: 5px 16px; margin-left: 10px; cursor: pointer;
}
.rs-go:hover { filter: brightness(1.08); }
.rs-out { margin-top: 6px; }
.rs-answer { margin: 10px 0 6px; }
.rs-answer-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--text-faint); margin-bottom: 4px;
}
.rs-formula { overflow-x: auto; overflow-y: hidden; }
.rs-note { font-size: 12.5px; color: var(--text-dim); margin: 6px 0; font-style: italic; }
.rs-err { color: var(--level-oly); font-size: 13.5px; padding: 6px 0; }
.rs-steps { margin: 8px 0; }
.rs-steps summary { cursor: pointer; color: var(--accent); font-size: 13px; font-weight: 600; }
.rs-general { margin: 10px 0; }
.rs-step { display: flex; flex-direction: column; gap: 2px; margin: 8px 0; padding-left: 6px; border-left: 2px solid var(--border); }
.rs-step-label { font-size: 12px; color: var(--text-faint); }
.rs-check { border-collapse: collapse; margin: 12px 0 8px; font-size: 13px; }
.rs-check th, .rs-check td { border: 1px solid var(--border); padding: 3px 12px; text-align: right; color: var(--text-dim); }
.rs-check th { color: var(--text-faint); font-weight: 600; }
.rs-check td:first-child, .rs-check th:first-child { text-align: center; color: var(--text); }
.rs-verify { font-size: 12.5px; font-weight: 600; }
.rs-verify.ok { color: var(--level-mc); }
.rs-verify.bad { color: var(--level-oly); }
.rs-hint { font-size: 12px; color: var(--text-faint); margin: 10px 0 0; }
.rs-hint code { background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; font-size: 11.5px; }

/* ---------- Interactive geometry widgets ---------- */
.geo-widget {
  margin: 22px 0; padding: 16px 16px 14px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.geo-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.geo-svg {
  display: block; width: 100%; max-width: 400px; margin: 0 auto; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
}
.geo-cap { font-size: 14px; color: var(--text-dim); margin-top: 10px; line-height: 1.7; }
.geo-cap b { color: var(--text); font-weight: 600; }
.geo-hint { font-size: 12.5px; color: var(--text-faint); margin-top: 6px; }

/* shared SVG primitives (geometry + small plots) */
.gl { stroke: var(--text-faint); stroke-width: 1.4; fill: none; }
.gl-acc { stroke: var(--accent); stroke-width: 2; fill: none; }
.gl-dash { stroke: var(--text-faint); stroke-width: 1.2; fill: none; stroke-dasharray: 4 4; opacity: 0.8; }
.gl-ax { stroke: var(--border-light); stroke-width: 1; fill: none; }
.gl-grid { stroke: var(--border); stroke-width: 1; fill: none; opacity: 0.28; }
.gl-gold { stroke: var(--gold); stroke-width: 2; fill: none; }
.gl-grn { stroke: var(--level-mc); stroke-width: 2; fill: none; }
.gtri { stroke: var(--text-dim); stroke-width: 1.8; fill: none; }
.gtri-fill { stroke: var(--accent); stroke-width: 1.8; fill: var(--accent-soft); }
.gfill-gold { stroke: var(--gold); stroke-width: 1.6; fill: rgba(245, 196, 81, 0.16); }
.gfill-grn { stroke: var(--level-mc); stroke-width: 1.6; fill: rgba(76, 195, 138, 0.16); }
.gfill-none { stroke: var(--text-faint); stroke-width: 1.4; fill: none; }
.gfill-red { stroke: #e2555f; stroke-width: 1.6; fill: rgba(226, 85, 95, 0.20); }
.gl-red { stroke: #e2555f; stroke-width: 3; fill: none; }
.gt-red { fill: #e2555f; font-size: 13px; font-weight: 700; }
.gc { stroke: var(--text-faint); stroke-width: 1.4; fill: none; }
.gc-acc { stroke: var(--accent); stroke-width: 1.6; fill: var(--accent-soft); }
.gc-dash { stroke: var(--text-faint); stroke-width: 1.2; fill: none; stroke-dasharray: 5 5; opacity: 0.85; }
.gc-grn { stroke: var(--level-mc); stroke-width: 1.4; fill: none; }
.gd { fill: var(--text-dim); }
.gd-acc { fill: var(--accent); }
.gd-gold { fill: var(--gold); }
.gd-grn { fill: var(--level-mc); }
.gt { fill: var(--text-dim); font-size: 13px; font-weight: 600; }
.gt-acc { fill: var(--accent); font-size: 13px; font-weight: 700; }
.gt-gold { fill: var(--gold); font-size: 13px; font-weight: 700; }
.gt-grn { fill: var(--level-mc); font-size: 13px; font-weight: 700; }
.geo-handle { fill: var(--accent); opacity: 0.18; cursor: grab; }
.geo-handle:hover { opacity: 0.32; }
.geo-handle:active { cursor: grabbing; opacity: 0.4; }

/* ---------- Calculator-style tools ---------- */
.tool {
  margin: 22px 0; padding: 16px 16px 14px;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
}
.tool-title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.tool-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text-dim); }
.tool-row label { display: inline-flex; align-items: center; gap: 4px; }
.tool-in {
  font: inherit; font-size: 13.5px; color: var(--text);
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px;
}
.tool-in:focus { outline: none; border-color: var(--accent); }
/* The range a numeric input actually accepts. Every one of these fields clamps silently in
   JS, so a reader who types 99 into a field capped at 12 just watches their number change
   with no explanation. min/max attributes alone do not show this — they only bound the
   spinner. The range has to be on screen. */
.tool-lim { font-size: 10.5px; color: var(--text-faint); margin-left: -2px; white-space: nowrap; }
@media (max-width: 600px) { .tool-lim { white-space: normal; } }
select.tool-in { cursor: pointer; }
.tool-btn2 {
  font: inherit; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
  padding: 5px 16px; cursor: pointer;
}
.tool-btn2:hover { filter: brightness(1.08); }
.tool-out { margin-top: 12px; }
.tool-sub { font-size: 15px; color: var(--text); margin: 4px 0 8px; overflow-x: auto; }
.tool-cap { font-size: 14px; color: var(--text-dim); margin-top: 10px; line-height: 1.7; }
.tool-cap b { color: var(--text); font-weight: 600; }
.tool-err { color: var(--level-oly); font-size: 13px; padding: 4px 0; }
.tool-svg {
  display: block; width: 100%; max-width: 460px; margin: 6px auto 0;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
}
.tool-tbl { border-collapse: collapse; margin: 6px 0; font-size: 13px; }
.tool-tbl th, .tool-tbl td { border: 1px solid var(--border); padding: 3px 12px; text-align: right; color: var(--text-dim); }
.tool-tbl th { color: var(--text-faint); font-weight: 600; }
.tool-tbl td:first-child { color: var(--text); }
.tool-tbl td.dv-yes { color: rgb(76, 195, 138); font-weight: 700; }
.tool-tbl td.dv-no { color: rgb(239, 95, 139); }
.tool-tbl td:last-child { text-align: left; }
.rd-bar { border-top: 2px solid var(--accent); padding-top: 1px; color: var(--accent); }
/* Mass-points balance (js/mass-balance.js): a canvas, sized in JS to the card's width. Touch
   keeps scrolling the page; a mouse drag turns the view. */
.mb-canvas {
  display: block; margin: 12px auto 0; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); cursor: grab; touch-action: pan-y;
}
.mb-canvas:active { cursor: grabbing; }
.mb-row .mb-in { width: 64px; }
.mb-row .mb-in.mb-given { color: var(--gold); font-weight: 600; background: transparent; border-style: dashed; }
.mb-out .tool-btn2 { margin-left: 6px; }
.mb-prob { margin: 0 0 10px; }

/* Practice-problem list: only the first few show until "Show more" is clicked.
   The button reuses .show-more-btn so it matches the app's other reveal controls. */
/* A long derivation, folded away behind a button so the short explanation above
   it stays readable. */
.full-proof { margin: 14px 0 4px; display: flex; flex-direction: column; align-items: flex-start; }
.full-proof .proof-body { display: none; width: 100%; }
.full-proof.proof-open .proof-body { display: block; order: 1; }
/* Once open, the control belongs under the proof it closes, not stranded above it. */
.full-proof.proof-open .proof-toggle { order: 2; margin-top: 14px; }
.full-proof .proof-body p:first-child { margin-top: 12px; }

.contest-refs .prob-extra { display: none; }
/* Problems are grouped by contest; each group is a small label over its own list. */
.prob-group + .prob-group { margin-top: 18px; }
.prob-group-head { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
                   color: var(--accent); margin-bottom: 6px; }
.prob-group-head .practice-note { letter-spacing: 0; margin-left: 2px; }
.contest-refs .prob-group.probs-open .prob-extra { display: flex; }
.prob-group .prob-more { margin-top: 6px; }
.fg-curve { stroke: var(--accent); stroke-width: 2; fill: none; }
.tool-bar { fill: var(--accent); }
.sb-token { font-size: 20px; letter-spacing: 3px; word-break: break-all; line-height: 1.5; }
.sb-star { color: var(--gold); }
.sb-bar { color: var(--accent); }
.tool-fact { font-size: 15px; color: var(--text); margin: 6px 0; }

/* Pascal's triangle */
.pt-grid { display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 6px 0; overflow-x: auto; }
.pt-row { display: flex; gap: 3px; justify-content: center; }
.pt-cell {
  min-width: 30px; padding: 3px 5px; text-align: center; font-size: 11.5px;
  border-radius: 4px; background: var(--bg-card); border: 1px solid var(--border);
  color: var(--text-dim); cursor: default; transition: background 0.1s;
}
.pt-cell.hl { background: var(--accent); color: #fff; border-color: var(--accent); }
.pt-cell.hl2 { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.pt-cell.pt-z { opacity: 0.35; }
.pt-cell.pt-m1 { background: rgba(91, 140, 255, 0.28); color: var(--text); }
.pt-cell.pt-m2 { background: rgba(245, 196, 81, 0.30); color: var(--text); }
.pt-cell.pt-m3 { background: rgba(76, 195, 138, 0.30); color: var(--text); }
.pt-cell.pt-m4 { background: rgba(239, 95, 139, 0.30); color: var(--text); }

/* modular power sequence */
.mp-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 4px 0; }
.mp-cell {
  min-width: 26px; padding: 3px 7px; text-align: center; font-size: 13px;
  border-radius: 5px; background: var(--bg-card); border: 1px solid var(--border); color: var(--text-dim);
}
.mp-cell.mp-cyc { background: var(--accent-soft); border-color: var(--accent); color: var(--text); font-weight: 600; }
.mp-arrow { color: var(--text-faint); font-size: 12px; }

/* chicken mcnugget grid */
.cm-grid { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.cm-cell {
  min-width: 24px; padding: 3px 5px; text-align: center; font-size: 12px;
  border-radius: 4px; border: 1px solid var(--border);
}
.cm-cell.cm-yes { background: rgba(76, 195, 138, 0.18); color: var(--text); border-color: rgba(76, 195, 138, 0.5); }
.cm-cell.cm-no { background: rgba(239, 95, 139, 0.16); color: var(--text-dim); border-color: rgba(239, 95, 139, 0.45); }
.cm-cell.cm-frob { outline: 2px solid var(--gold); outline-offset: 1px; font-weight: 700; }
.cm-ell { align-self: center; padding: 0 6px; font-size: 12px; color: var(--text-faint); font-style: italic; }

/* ---------- Advanced search ---------- */
/* Tag-picker modal: fixed head + search + selected, with an isolated scroll on
   the tag grid only (so choosing tags never jerks the whole modal around). */
.adv-tagmodal {
  max-width: 560px; height: min(78vh, 620px);
  display: flex; flex-direction: column;
}
.adv-tagmodal .modal-head { flex: 0 0 auto; }
.adv-tagpick {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column;
  padding: 14px 18px 0;
}
.adv-pick-label {
  flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--text-faint); margin: 0 0 8px;
}
.adv-selected-wrap { flex: 0 0 auto; margin: 2px 0 14px; }
.adv-selected-wrap[hidden] { display: none; }
.adv-tag-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  display: flex; flex-wrap: wrap; gap: 7px; align-content: flex-start;
  padding: 2px 2px 14px; margin: 0 -2px;
}
.adv-tag-chip {
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--text-dim);
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 5px 13px; cursor: pointer; transition: all 0.12s; height: fit-content;
}
.adv-tag-chip:hover { border-color: var(--accent); color: var(--accent); }
.adv-tag-chip.adv-tag-topic { font-weight: 650; color: var(--text); }
.adv-modal-actions { flex: 0 0 auto; padding: 14px 18px; border-top: 1px solid var(--border); justify-content: space-between; align-items: center; }
.adv-apply {
  font: inherit; font-size: 13px; font-weight: 600; color: #fff;
  background: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
  padding: 7px 18px; cursor: pointer;
}
.adv-apply:hover { filter: brightness(1.08); }
.adv-apply:disabled { opacity: 0.45; cursor: default; filter: none; }
.adv-meta .adv-actions { margin-left: 8px; display: inline-flex; gap: 8px; }
.adv-link {
  font: inherit; font-size: 12px; color: var(--accent); background: none;
  border: none; cursor: pointer; padding: 0; text-decoration: underline;
}
.adv-link:hover { color: var(--text); }
.results-hint { font-size: 12.5px; color: var(--text-faint); margin: -8px 0 14px; }

/* ---------- Tag-picker search + selected chips ---------- */
.adv-tag-search {
  flex: 0 0 auto; width: 100%; box-sizing: border-box; margin: 0 0 14px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 12px;
}
.adv-tag-search:focus { outline: none; border-color: var(--accent); }
.adv-tag-empty { padding: 8px 2px; color: var(--text-faint); font-size: 12.5px; }
.adv-tag-selected { display: flex; flex-wrap: wrap; gap: 7px; }
.adv-tag-sel { cursor: pointer; }
.adv-tag-x { opacity: 0.85; margin-left: 1px; }

/* ---------- Contest navigator at the foot of a problem page ---------- */
/* Modelled on the AoPS "See also" box: the sitting, its neighbours, and every problem number
   in the paper. Numbers we have not tagged render as inert cells rather than being omitted,
   so the strip shows coverage honestly instead of implying a short paper. */
.contest-nav {
  margin: 20px auto 0;   /* centred like the AoPS box it mirrors */
  max-width: 560px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-panel);
}
.cn-head {
  display: flex; align-items: baseline; justify-content: center;
  font-size: 13.5px;
  padding: 6px 12px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.cn-head a { color: var(--text); text-decoration: none; }
.cn-head a:hover { color: var(--accent); }

.cn-sides { display: grid; grid-template-columns: 1fr 1fr; }
.cn-side {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 10px; text-decoration: none;
  font-size: 13px;
  color: var(--accent);
}
.cn-side + .cn-side { border-left: 1px solid var(--border); }
.cn-side:hover { background: var(--bg-card-hover); }
.cn-side-label { font-size: 10.5px; color: var(--text-faint); letter-spacing: 0.02em; }
.cn-side-ref { font-weight: 600; }
.cn-side-off { color: var(--text-faint); cursor: default; }
.cn-side-off:hover { background: none; }

.cn-nums {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--border);
}
.cn-num {
  min-width: 22px; padding: 1px 5px;
  text-align: center; border-radius: 5px;
  font-size: 12px; text-decoration: none;
  border: 1px solid var(--border);
  color: var(--accent); background: var(--bg-card);
}
.cn-num:hover { border-color: var(--accent); }
.cn-here { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.cn-missing { color: var(--text-faint); background: transparent; border-style: dashed; cursor: default; }

.cn-foot {
  padding: 5px 12px; text-align: center;
  border-top: 1px solid var(--border);
  font-size: 11.5px;
}
.cn-foot a { color: var(--text-dim); text-decoration: none; }
.cn-foot a:hover { color: var(--accent); }

@media (max-width: 560px) {
  .cn-num { min-width: 20px; font-size: 11px; padding: 1px 4px; }
}

/* ---------- Special pages and commands ----------
   "Special:Random" and friends, run from Settings or the search box (see renderSpecial). */
.command-box { display: flex; gap: 8px; margin-top: 4px; }
.command-input {
  flex: 1; font: inherit; font-size: 14px; padding: 9px 12px;
  color: var(--text); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 9px;
}
.command-input:focus { outline: none; border-color: var(--accent); }
.command-run {
  font: inherit; font-size: 13px; font-weight: 600; padding: 0 16px; cursor: pointer;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: 9px;
}
.command-list { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.command-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.command-chip {
  font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 3px 9px; cursor: pointer; color: var(--accent); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 7px;
}
.command-chip:hover { border-color: var(--accent); }
.command-desc { font-size: 12.5px; color: var(--text-dim); }
.special-page { margin-top: 22px; }
.special-note { font-size: 14px; color: var(--text-dim); margin: 0 0 16px; }
.special-table { border-collapse: collapse; font-size: 14px; }
.special-table td { padding: 5px 18px 5px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.special-table td + td { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-dim); }

/* Settings > Figure captions on cards > Hide: the picture only, on the browsing grid. The card's
   own page (.detail) keeps its captions, where they are part of the explanation. */
html[data-captions="hide"] .card-glance .diagram-cap { display: none; }

/* Settings type scale, one size per role so nothing reads as "a bit different": option and
   lab names 14px, buttons 13px (the app's show-more size), option labels, notes, hints and
   descriptions 12.5px. */
.command-toggle { margin-top: 12px; }
/* The letter row on Special:AllPages and Special:LonelyPages. */
.letter-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
.letter-jump button {
  font: inherit; font-size: 13px; font-weight: 600; min-width: 30px; padding: 3px 8px; cursor: pointer;
  color: var(--accent); background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px;
}
.letter-jump button:hover { border-color: var(--accent); }
.special-page .wiki-letter { scroll-margin-top: 76px; }
/* Only the one-line notes link in the accent colour; the card lists stay black like the wiki index. */
.special-note a, .section-header p a { color: var(--accent); text-decoration: none; }
.special-note a:hover, .section-header p a:hover { text-decoration: underline; }
.settings-group { scroll-margin-top: 76px; }

/* ---------- Command suggestions ----------
   A dropdown under the search box while a Special: command is typed, like Wikipedia's. */
.cmd-suggest {
  position: absolute; left: 0; right: 0; min-width: min(440px, 92vw); top: calc(100% + 4px); z-index: 60;
  max-height: min(430px, 70vh); overflow-y: auto; padding: 4px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.16);
}
.cmd-suggest[hidden] { display: none; }
.cs-item {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
  font: inherit; text-align: left; padding: 8px 12px; cursor: pointer;
  background: transparent; border: 0; border-radius: 7px; color: var(--text);
}
.cs-item:hover, .cs-item.is-active { background: var(--accent-soft); }
.cs-title { font-size: 14px; font-weight: 650; }
.cs-desc { font-size: 12.5px; color: var(--text-dim); }

/* ---------- Connected formulas ----------
   On a few broad cards, a curated set of the cards that belong to the same idea
   (js/data/connected.js). Sits after Practice problems, before Related, and reuses Related's
   chips (.related-grid / .related-item) so the two sections read as one style. */
.connected { margin-top: 26px; }

/* ---------- Four kinds: formula / method / pattern / problem ----------
   Formulas tell you what is true, methods what you can do, patterns what you are looking at;
   problems connect the three. These rules give each kind its own lead without a new visual
   language: the panels reuse the key-forms look (pale panel, coloured left edge). */
.badge-formula { background: #a9bbdc; }
.badge-problem { background: #c7a8ef; }
.badge-lesson { background: #a6dc86; }

.book-eyebrow {
  font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px;
}
.book-eyebrow span { color: var(--text-faint); letter-spacing: 0.02em; text-transform: none; font-weight: 600; }

/* The opening box: WHEN TO USE / CORE MOVE on a method, RECOGNIZE / TRY on a pattern. */
.lead-box {
  margin: 6px 0 16px; padding: 12px 15px; display: grid; gap: 11px;
  background: var(--bg-panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px;
}
.lead-method { border-left-color: #45d6c3; }
.lead-pattern { border-left-color: #f0a35e; }
.lead-label {
  font-size: 10.5px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-faint);
}
.lead-row .lead-label { margin-bottom: 3px; }
/* The box's own heading, smaller than a section heading, so the box reads as one unit. */
.lead-title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: -3px; }
.lead-text { font-size: 15px; line-height: 1.5; color: var(--text); }
.lead-signals { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.lead-try { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 14.5px; line-height: 1.45; }
.lead-try a { font-weight: 400; }
.lead-try-note { color: var(--text-dim); font-size: 13px; margin-left: 8px; }
.lead-placeholder, .related-planned { color: var(--text-faint); font-style: italic; }
.related-planned { cursor: default; }
.related-planned:hover { border-color: var(--border); color: var(--text-faint); }

/* Card face of a converted method or pattern: two labeled lines in place of the formula. */
.card-lead { margin: 9px 0 7px; display: grid; gap: 5px; }
.card-lead p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.card-lead .lead-label { margin-right: 6px; }

.kind-row { margin-top: 26px; }
.family-note { margin: 10px 0 0; font-size: 13px; color: var(--text-dim); }
.supp-math .detail-body p { margin: 0 0 6px; }
.supp-math .formula-display { padding: 8px 12px; margin: 6px 0 0; }
.supp-math .formula-display .katex { font-size: 1em; }

.contest-profile .pf-sentence { margin: 0 0 8px; font-size: 14px; color: var(--text); line-height: 1.5; }
.profile-stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13.5px; color: var(--text); }
.pf-k { color: var(--text-faint); font-weight: 650; margin-right: 6px; }
.pf-sub { color: var(--text-dim); }

.detail-steps { padding-left: 22px; }
.detail-steps li { margin: 4px 0; line-height: 1.55; }

/* Problem page: how this problem works (Pattern -> Method -> Formulas), then Think. */
/* A shade darker than the page (the panel blue-grey), with the three white cards on top. */
.prob-chain {
  margin: 16px 0; padding: 14px 16px; border-radius: 10px;
  border: 1px solid var(--border-light); background: var(--bg-panel);
}
.prob-chain h4 { margin: 0 0 10px; }
/* How this problem works: its heading, and beside it a small + Show / - Hide (owner, 2026-10-31).
   It and the new-list + only brighten a little on hover (owner). */
.chain-head { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.chain-head h4 { margin: 0; }
/* Show / Hide and the new-list + brighten a little on hover, like the study-route links. */
.chain-toggle:hover, #pr-lists .pl-new-btn:hover { filter: brightness(1.15); }
.chain-body[hidden] { display: none; }
.chain-head + .chain-body[hidden] { margin: 0; }
.prob-chain:has(.chain-body[hidden]) .chain-head { margin-bottom: 0; }
.chain-toggle { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border: none; border-radius: 6px; background: var(--space-soft, var(--bg-panel)); color: var(--space, var(--accent));
  font: inherit; font-size: 12.5px; font-weight: 750; line-height: 1; cursor: pointer; }
.chain-step { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.chain-label {
  width: 78px; flex: none; font-size: 10.5px; font-weight: 750; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint);
}
.chain-cards { display: flex; flex-wrap: wrap; gap: 6px; }
.chain-arrow { color: var(--text-faint); margin: 3px 0 3px 30px; font-size: 13px; }
.chain-empty { color: var(--text-faint); font-style: italic; font-size: 13px; }
/* "How this problem works": the strategy, then Pattern | Method | Formulas side by side. */
.chain-strategy { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--text); }
.chain-alt-note { margin: 8px 0 0; font-size: 12.5px; color: var(--text-faint); }
.chain-cards .chain-alt-card { border-style: dashed; }
.prob-own-figure { margin: 14px 0; }
/* A problem's own figure sits inside How this problem works, above the strategy. */
.prob-chain .prob-own-figure { margin: 4px 0 14px; }
.chain-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chain-col { padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); }
.chain-col .chain-label { width: auto; margin-bottom: 6px; }
@media (max-width: 700px) { .chain-grid { grid-template-columns: 1fr; } }
/* Study a concept more: under the three columns, a hairline, then links to the lessons. */
.chain-study { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.chain-study-h { font-size: 13.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.chain-study-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.chain-study-link { font-size: 14px; color: var(--accent); text-decoration: none; }
.chain-study-link:hover { text-decoration: underline; }
.chain-study-l { margin-left: 6px; font-size: 12px; color: var(--text-faint); }

.nav-practice-link {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: 14px; font-weight: 650;
  color: var(--text); text-decoration: none;
}
.nav-practice-link:hover { background: var(--bg-panel); }

/* Problems under the search results. */
.search-problems { margin-top: 30px; }
.search-problems h4 { margin: 0 0 8px; }
.sp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sp-chain { color: var(--text-dim); font-size: 12.5px; }
.sp-more { display: inline-block; margin-top: 8px; font-size: 13px; }

/* The sidebar shows one space at a time, headed by its name and question. */
.nav-space-head { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 2px; }
.nsh-label { font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--space); }
.nsh-ask { font-size: 12.5px; color: var(--text-faint); }
.nav-group[hidden] { display: none; }
.nav-section-btn.active { background: var(--space-soft); color: var(--space); }
.nav-section-btn.active .nav-count { color: var(--space); }
.nav-sub-link.active { color: var(--space); border-left-color: var(--space); font-weight: 650; }
.book-eyebrow { color: var(--space); }
.lead-box { border-left-color: var(--space); }

/* ---------- Card page tabs ---------- */
.detail-tabs {
  display: flex; gap: 4px; margin: 22px 0 4px; border-bottom: 1px solid var(--border); overflow-x: auto;
}
.dtab {
  font: inherit; font-size: 14px; font-weight: 650; padding: 9px 14px; border: none; background: none;
  color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.dtab:hover { color: var(--text); }
.dtab[aria-selected="true"] { color: var(--space); border-bottom-color: var(--space); }
.dtab-n {
  font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: 999px; margin-left: 4px;
  background: var(--bg-panel); color: var(--text-faint);
}
.dtab[aria-selected="true"] .dtab-n { background: var(--space-soft); color: var(--space); }
.dpanel { padding-top: 10px; }
.dpanel > .practice, .dpanel > .related, .dpanel > .connected, .dpanel > .contest-profile { margin-top: 18px; }
.dpanel > :first-child { margin-top: 8px; }
.dpanel-empty { color: var(--text-faint); font-size: 14px; }

/* ---------- Calmer browsing cards ---------- */
.card-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: -2px 0 2px; }
.level-range { font-size: 11.5px; font-weight: 650; color: var(--text-dim); }
.card-meta .card-crumb { margin-left: auto; }
.card-actions { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; }

/* The Practice space replaces the top-bar Problems button; the remaining tools go icon-only
   on laptop widths so the search box keeps its room next to the space switcher. */
#db-btn { display: none; }
@media (max-width: 1400px) {
  .tool-btn .tb-label { display: none; }
  .tool-btn .tb-icon { margin-right: 0; }
  .tool-btn { padding: 6px 10px; }
}

/* Top bar, simplified: the logo is the symbol alone (it still returns home), and Lists live
   inside the Practice space rather than in a bubble of their own. */
.topbar .brand-text { display: none; }
#lists-btn { display: none; }

/* The Practice pages' own navigation (study lists, problem database) takes the space's tint. */
body[data-space="practice"] .ln-btn.active,
body[data-space="practice"] .db-fam-btn.active { background: var(--space-soft); color: var(--space); }
body[data-space="practice"] .ln-btn.active .db-count,
body[data-space="practice"] .db-fam-btn.active .db-count { color: var(--space); }
body[data-space="practice"] .db-year.active { color: var(--space); border-left-color: var(--space); }
body[data-space="practice"] .ln-item:hover { border-left-color: var(--space); }
body[data-space="practice"] .db-year.active,
body[data-space="practice"] .ln-item.active { background: var(--space-soft); color: var(--space); border-left-color: var(--space); }

/* ---------- Search results: every kind, grouped ---------- */
.rm-kinds { color: var(--text-faint); margin-left: 6px; }
.result-group { margin-top: 24px; }
.rg-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 16px; font-weight: 750; }
.rg-head::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.rg-n { font-size: 11.5px; font-weight: 650; color: var(--text-faint); background: var(--bg-panel); padding: 1px 8px; border-radius: 999px; }
.rg-formula .rg-head { color: var(--accent); }
.rg-method .rg-head { color: #2fbfac; }
.rg-pattern .rg-head { color: #e0904a; }
.rg-problem .rg-head { color: #9d7bff; }
.result-group .rg-extra { display: none; }
.result-group.rg-open .rg-extra { display: revert; }
.result-group.rg-open .cards > .rg-extra { display: block; }
.rg-more { margin-top: 10px; }


/* ==========================================================================================
   UI round 2: four spaces (Formulas, Methods, Patterns, Problems), even top bar, group tiles
   and pages, space indexes, and the front page. Each space has a colour token; the page's
   space sets --space, and anything that names a space sets --tint with data-tint.
   ========================================================================================== */
:root {
  --c-formulas: var(--accent); --cs-formulas: var(--accent-soft);
  --c-methods: #45d6c3; --cs-methods: rgba(69, 214, 195, 0.14);
  --c-patterns: #f0a35e; --cs-patterns: rgba(240, 163, 94, 0.15);
  --c-practice: #9d7bff; --cs-practice: rgba(157, 123, 255, 0.15);
  --c-learn: #8fd16a; --cs-learn: rgba(143, 209, 106, 0.15);
}
:root[data-theme="light"] {
  --c-methods: #12897a; --cs-methods: rgba(18, 137, 122, 0.12);
  --c-patterns: #c25e0c; --cs-patterns: rgba(194, 94, 12, 0.12);
  --c-practice: #6d48df; --cs-practice: rgba(109, 72, 223, 0.12);
  --c-learn: #3d8a1c; --cs-learn: rgba(61, 138, 28, 0.12);
}
body { --space: var(--c-formulas); --space-soft: var(--cs-formulas); }
body[data-space="methods"] { --space: var(--c-methods); --space-soft: var(--cs-methods); }
body[data-space="patterns"] { --space: var(--c-patterns); --space-soft: var(--cs-patterns); }
body[data-space="practice"] { --space: var(--c-practice); --space-soft: var(--cs-practice); }
body[data-space="learn"] { --space: var(--c-learn); --space-soft: var(--cs-learn); }
body[data-space="none"] { --space: var(--text-dim); --space-soft: var(--bg-panel); }
[data-tint="formulas"] { --tint: var(--c-formulas); --tint-soft: var(--cs-formulas); }
[data-tint="methods"] { --tint: var(--c-methods); --tint-soft: var(--cs-methods); }
[data-tint="patterns"] { --tint: var(--c-patterns); --tint-soft: var(--cs-patterns); }
[data-tint="practice"] { --tint: var(--c-practice); --tint-soft: var(--cs-practice); }
[data-tint="learn"] { --tint: var(--c-learn); --tint-soft: var(--cs-learn); }
.rg-method .rg-head { color: var(--c-methods); }
.rg-pattern .rg-head { color: var(--c-patterns); }
.rg-problem .rg-head { color: var(--c-practice); }

/* ---------- Top bar: one height (40px) for the switcher, the search box and every tool ---------- */
.space-switch {
  flex: 0 0 auto; display: flex; align-items: stretch; gap: 2px; height: 40px; box-sizing: border-box; padding: 3px;
  border-radius: 10px; background: var(--bg-panel); border: 1px solid var(--border);
}
.space-switch button {
  font: inherit; font-size: 13px; font-weight: 650; padding: 0 12px; border-radius: 7px; border: none;
  background: transparent; color: var(--text-dim); cursor: pointer; white-space: nowrap;
  transition: background 0.12s, color 0.12s;
}
.space-switch button:hover { color: var(--text); }
/* A mouse click leaves no focus ring; keyboard focus still shows one. */
.space-switch button:focus:not(:focus-visible) { outline: none; }
body[data-space="formulas"] [data-space-go="formulas"],
body[data-space="methods"] [data-space-go="methods"],
body[data-space="patterns"] [data-space-go="patterns"],
body[data-space="practice"] [data-space-go="practice"],
body[data-space="learn"] [data-space-go="learn"] { background: var(--space-soft); color: var(--space); }
#search-input { height: 40px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.topbar-tools .tool-btn {
  height: 40px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 14px; border-radius: 10px; font-size: 13px;
}
.topbar-tools .tool-btn .tb-icon { display: inline-flex; }
.topbar-tools #settings-btn { width: 40px; padding: 0; font-size: 17px; }
@media (max-width: 1400px) { .topbar-tools .tool-btn { width: 40px; padding: 0; } }
@media (max-width: 760px) {
  .topbar-inner { flex-wrap: wrap; }
  /* A phone: the menu, the logo, the search and the tools on one row, the spaces on the next. */
  .search-wrap { order: 2; flex: 1 1 0; min-width: 72px; }
  .search-kbd { display: none; }
  /* The tools stay on the first row even when a page adds one (Filters on a reference page):
     smaller buttons and gaps, and the search box gives way (owner, 2026-10-31). */
  .topbar-tools { order: 3; gap: 6px; }
  .topbar-inner { gap: 10px 8px; }
  .topbar-tools .tool-btn, .topbar-tools #settings-btn { width: 38px; height: 38px; padding: 0; }
  .nav-toggle { width: 38px; height: 38px; }
  .space-switch { order: 5; width: 100%; }
  .space-switch > button { flex: 1; padding: 0 6px; }
}
/* The Reference menu (Formulas, Methods, Patterns) exists only on a narrow phone. */
.space-ref { display: none; position: relative; }
@media (max-width: 600px) {
  .space-switch > [data-space-go="formulas"], .space-switch > [data-space-go="methods"], .space-switch > [data-space-go="patterns"] { display: none; }
  .space-ref { display: flex; flex: 1; }
  .space-ref-btn { flex: 1; font: inherit; font-size: 13px; font-weight: 650; padding: 0 6px; border-radius: 7px; border: none; background: transparent; color: var(--text-dim); cursor: pointer; }
  .space-ref-caret { font-size: 10px; margin-left: 2px; }
  body[data-space="formulas"] .space-ref-btn, body[data-space="methods"] .space-ref-btn, body[data-space="patterns"] .space-ref-btn { background: var(--space-soft); color: var(--space); }
  .space-ref-menu { position: absolute; left: -3px; top: calc(100% + 6px); z-index: 70; min-width: 168px; display: flex; flex-direction: column; gap: 2px; padding: 6px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.2); }
  .space-ref-menu[hidden] { display: none; }
  .space-switch .space-ref-menu button { text-align: left; padding: 0 14px; height: 44px; font-size: 13px; border-radius: 8px; }
}

/* ---------- Group tiles (a subject's topics, method groups or pattern families) ---------- */
.topic-grid { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.topic-tile {
  display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--radius);
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text); text-decoration: none;
  transition: border-color 0.12s, background 0.12s;
}
.topic-tile:hover { border-color: var(--space); background: var(--bg-card-hover); }
.topic-tile.topic-empty { opacity: 0.45; pointer-events: none; }
.tt-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tt-title { font-size: 15.5px; font-weight: 720; line-height: 1.3; }
.tt-count { flex: none; font-size: 12px; font-weight: 650; color: var(--space); }
.tt-blurb { font-size: 13px; color: var(--text-dim); line-height: 1.45; }
.tt-sample {
  margin-top: auto; padding-top: 2px; font-size: 12px; color: var(--text-faint); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- One group's page ---------- */
.topic-header { margin-top: 6px; }
.topic-header .topic-blurb { margin: 6px 0 0; max-width: 760px; font-size: 15px; line-height: 1.55; color: var(--text-dim); }
.topic-header .topic-count { margin: 6px 0 0; font-size: 13px; font-weight: 650; color: var(--space); }
.topic-header + .cards { margin-top: 18px; }
.topic-nav { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.topic-step {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 12px; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
}
.topic-step-next { grid-column: 2; text-align: right; }
.ts-dir { font-size: 12px; font-weight: 650; color: var(--text-faint); }
.ts-name { font-size: 14.5px; font-weight: 700; }
.topic-step:hover { border-color: var(--space); }
.topic-step:hover .ts-name { color: var(--space); }

/* ---------- Panels shared by the front page and the Problems space ---------- */
.hp-panel { padding: 14px 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.hp-label { font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 8px; }
.hp-empty { margin: 0; font-size: 13.5px; color: var(--text-dim); line-height: 1.5; }
.hp-empty a { color: var(--accent); font-weight: 650; text-decoration: none; }
.rc-list { display: flex; flex-direction: column; }
.rc-row {
  display: flex; align-items: center; gap: 9px; padding: 7px 6px; border-radius: 8px; text-decoration: none; color: var(--text);
  border-bottom: 1px solid var(--border);
}
.rc-list .rc-row:last-child { border-bottom: none; }
.rc-row:hover { background: var(--bg-panel); }
.rc-name { font-size: 14px; font-weight: 650; flex: 1; min-width: 0; }
.rc-meta { font-size: 12px; color: var(--text-faint); white-space: nowrap; max-width: 45%; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) { .rc-row .rc-meta { display: none; } }
.rc-star { color: var(--gold); }
.hp-panel > .rc-row { border-bottom: none; }
.daily-title { display: inline-block; font-size: 20px; font-weight: 780; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.daily-title:hover { color: var(--accent); }
.daily-types { margin-top: 6px; display: flex; gap: 6px; flex-wrap: wrap; }
.daily-type { font-size: 11.5px; font-weight: 650; padding: 2px 9px; border-radius: 999px; background: var(--bg-panel); color: var(--text-dim); }
.daily-note { margin: 8px 0; font-size: 13px; color: var(--text-dim); }
.daily-st { margin: 12px 0 4px; }
/* No outline: a soft tint between white and the panel's hover blue, so it sits inside the panel
   at rest and reads as a slightly whiter shade when the panel turns blue on hover. */
.daily-st .prob-statement { font-size: 15px; padding: 12px 14px; border-color: transparent; background: var(--daily-box); }
.daily-reveal summary { cursor: pointer; font-size: 13px; font-weight: 650; color: var(--accent); margin-bottom: 8px; }
.hp-btn {
  display: inline-block; font-size: 13px; font-weight: 700; padding: 7px 13px; border-radius: 9px; text-decoration: none;
  background: var(--accent); color: #fff;
}
.hp-btn:hover { filter: brightness(1.08); }
.hp-btn-soft { background: var(--bg-panel); color: var(--text); border: 1px solid var(--border); }
.hp-btn-soft:hover { border-color: var(--accent); color: var(--accent); filter: none; }
body[data-space="practice"] .hp-btn:not(.hp-btn-soft),
body[data-space="learn"] .hp-btn:not(.hp-btn-soft) { background: var(--space); }
body[data-space="practice"] .hp-btn-soft:hover { border-color: var(--space); color: var(--space); }
.hp-link { display: inline-block; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; }
.hp-mine-foot { margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.hp-mine-foot a { color: var(--text-dim); text-decoration: none; font-weight: 600; }
.hp-mine-foot a:hover { color: var(--accent); }
.rand-btns { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Front page ---------- */
body.is-landing .nav-toggle { display: none; }
body.is-landing .layout { max-width: none; }
body.is-landing .content { padding: 0 0 70px; }
.hub { max-width: 1160px; margin: 0 auto; padding: 30px 24px 0; }
.hub-head { position: relative; }
.hub-brand { display: flex; align-items: center; gap: 14px; padding-right: 36px; }
.hub-gear { position: absolute; top: 2px; right: 0; font-size: 24px; line-height: 1; color: var(--text-dim); text-decoration: none; }
.hub-gear:hover, .hub-gear:focus-visible { color: var(--accent); }
.hub-brand .brand-sigma { font-size: 44px; }
.hub-name { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.hub-sub { margin-top: 2px; font-size: 13.5px; color: var(--text-dim); line-height: 1.45; }
@media (max-width: 640px) { .hub-sub { display: none; } }
.home-search { margin: 16px 0 0; display: flex; gap: 8px; }
.home-search input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 13px 18px; border-radius: 12px;
  border: 1px solid var(--border-light); background: var(--bg-card); color: var(--text);
}
.home-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.home-search button {
  font: inherit; font-size: 15px; font-weight: 700; padding: 0 20px; border-radius: 12px; border: none;
  background: var(--accent); color: #fff; cursor: pointer;
}
.home-search button:hover { filter: brightness(1.08); }
.home-try { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; color: var(--text-faint); }
.home-try span { margin-right: 2px; }
.home-try button {
  font: inherit; font-size: 12.5px; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.home-try button:hover { border-color: var(--accent); color: var(--accent); }
.hub-spaces { margin-top: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .hub-spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hs-tile {
  display: flex; flex-direction: column; gap: 1px; padding: 12px 15px; border-radius: 12px; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--tint); color: var(--text);
  transition: border-color 0.12s, background 0.12s;
}
.hs-tile:hover { background: var(--bg-card-hover); border-color: var(--tint); }
.hs-tile b { font-size: 17px; font-weight: 780; color: var(--tint); }
.hs-ask { font-size: 13px; font-weight: 650; color: var(--text); }
.hs-n { font-size: 12px; color: var(--text-faint); }
.hub-main { margin: 20px 0 10px; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .hub-main { grid-template-columns: 1fr; } }
.hub-about { padding: 20px 22px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); }
.hub-h { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.hub-h ~ .hub-h { margin-top: 22px; }
.hub-p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.hub-chain {
  margin-top: 14px; display: grid; align-items: stretch; gap: 6px;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
}
.hc-step {
  display: flex; flex-direction: column; gap: 3px; padding: 10px 11px; border-radius: 10px; text-decoration: none;
  background: var(--tint-soft); border: 1px solid transparent; color: var(--text);
}
.hc-step:hover { border-color: var(--tint); }
.hc-kind { font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tint); }
.hc-q { font-size: 13px; font-weight: 700; }
.hc-text { font-size: 12.5px; color: var(--text-dim); line-height: 1.4; }
.hc-arrow { align-self: center; color: var(--text-faint); }
@media (max-width: 720px) { .hub-chain { grid-template-columns: 1fr 1fr; } .hc-arrow { display: none; } }
.hub-why { margin: 0; padding-left: 18px; display: grid; gap: 5px; font-size: 14px; line-height: 1.5; color: var(--text); }
.hub-ways { display: flex; flex-direction: column; }
.hw-row {
  display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 12px; align-items: baseline;
  padding: 10px 6px; border-bottom: 1px solid var(--border); color: var(--text);
}
.hw-row:last-child { border-bottom: none; }
.hw-title { font-size: 14px; font-weight: 750; }
.hw-text { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; }
.hw-go { font-size: 12.5px; font-weight: 700; color: var(--text-faint); white-space: nowrap; text-decoration: none; }
.hw-go:hover { color: var(--accent); }
.hw-link { font-weight: 650; color: var(--tint, var(--text)); text-decoration: none; }
.hw-link:hover { text-decoration: underline; }
@media (max-width: 640px) { .hw-row { grid-template-columns: 1fr; gap: 3px; } }
.hub-side { display: flex; flex-direction: column; gap: 14px; }

/* ---------- Space pages: how the space fits, then a way into everything in it ---------- */
.space-home { max-width: 1180px; }
.space-home-head { margin: 4px 0 14px; }
.space-home-head h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--space); }
.sh-ask { margin: 2px 0 0; font-size: 15px; font-weight: 650; color: var(--text); }
.sh-intro { margin: 6px 0 0; max-width: 780px; font-size: 14.5px; line-height: 1.55; color: var(--text-dim); }
.sh-intro a { color: var(--text); font-weight: 650; text-decoration: underline; text-decoration-color: var(--border-light); text-underline-offset: 2px; }
.sh-intro a:hover { color: var(--space); }
.sh-recent { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.sh-recent .hp-label { margin: 0; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rc-chips .rc-row { padding: 4px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--bg-card); }
.rc-chips .rc-row:hover { border-color: var(--space); }
.rc-chips .badge, .rc-chips .rc-meta { display: none; }
.rc-chips .rc-name { flex: none; font-size: 13px; }
.ix-levels { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 6px 0 14px; }
.ix-levels .hp-label { margin: 0 4px 0 0; }
.ix-levels button {
  font: inherit; font-size: 12.5px; font-weight: 650; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--text-dim);
}
.ix-levels button:hover { color: var(--text); }
.ix-levels button[aria-pressed="true"] { background: var(--space-soft); border-color: transparent; color: var(--space); }
.ix-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 1100px) { .ix-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ix-grid { grid-template-columns: 1fr; } }
.ix-subject { padding: 14px 16px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--space); }
.ix-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 16px; font-weight: 780; color: var(--text); text-decoration: none; }
.ix-title:hover { color: var(--space); }
.ix-n { flex: none; font-size: 12px; font-weight: 650; color: var(--text-faint); background: var(--bg-panel); padding: 1px 9px; border-radius: 999px; }
.ix-topic { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; font-size: 13.5px; color: var(--text); text-decoration: none; border-top: 1px solid var(--border); }
.ix-topic:hover .ix-tname { color: var(--space); }
.ix-tn { flex: none; font-size: 12px; color: var(--text-faint); }
.ix-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); }
.ix-gtitle { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--space); text-decoration: none; }
.ix-gtitle:hover { text-decoration: underline; }
.ix-cards { list-style: none; margin: 0; padding: 0; }
.ix-cards li { padding: 2px 0; font-size: 13.5px; line-height: 1.4; }
.ix-cards a { color: var(--text); text-decoration: none; }
.ix-cards a:hover { color: var(--space); }
.ix-group[hidden], .ix-topic[hidden], .ix-cards li[hidden] { display: none; }

/* The Problems space */
.pr-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
@media (max-width: 860px) { .pr-top { grid-template-columns: 1fr; } }
.pr-top.pr-top-one { grid-template-columns: minmax(0, 1fr); max-width: 640px; }
.pr-moved { margin: 12px 0 0; font-size: 13.5px; color: var(--text-dim); }
.pr-moved a { color: var(--c-learn); font-weight: 600; }

/* ---------- Learn: the textbook shelf (PLAN step L4) ---------- */
.learn-note { margin: 0 0 14px; color: var(--text-dim); font-size: 14px; line-height: 1.6; }
.learn-sub { margin: 22px 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.lb-shelf { display: flex; flex-direction: column; gap: 10px; }
.lb-book { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); }
.lb-book > summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 14px 16px; cursor: pointer; list-style: none;
}
.lb-book > summary::-webkit-details-marker, .lb-ch summary::-webkit-details-marker { display: none; }
.lb-book > summary::before, .lb-ch summary::before {
  content: "\25B8"; color: var(--c-learn); display: inline-block; width: 12px; transition: transform 0.12s;
}
.lb-book[open] > summary::before, .lb-ch details[open] > summary::before { transform: rotate(90deg); }
.lb-book-title { font-weight: 700; font-size: 16px; color: var(--text); }
.lb-role { flex: 1 1 260px; color: var(--text-dim); font-size: 13.5px; }
.lb-n { color: var(--text-faint); font-size: 12.5px; white-space: nowrap; }
.lb-chapters { list-style: none; margin: 0; padding: 0 16px 12px; }
.lb-ch { border-top: 1px solid var(--border); }
.lb-ch summary { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; cursor: pointer; list-style: none; }
.lb-code { flex: 0 0 auto; min-width: 2.6em; font-variant-numeric: tabular-nums; font-weight: 650; color: var(--c-learn); font-size: 13px; }
.lb-title { flex: 1 1 auto; min-width: 0; color: var(--text); }
.lb-level { flex: 0 0 auto; font-size: 11.5px; font-weight: 650; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.lb-core { background: var(--cs-learn); color: var(--c-learn); }
.lb-coreii { background: var(--cs-methods); color: var(--c-methods); }
.lb-amc10 { background: var(--cs-learn); color: var(--c-learn); }
.lb-amc12 { background: var(--cs-methods); color: var(--c-methods); }
.lb-extension { background: var(--bg); color: var(--text-dim); border: 1px solid var(--border); }
.lb-lessons { list-style: none; margin: 0 0 10px; padding: 0 0 0 22px; }
.lb-lessons li { display: flex; align-items: baseline; gap: 10px; padding: 4px 0; font-size: 14px; color: var(--text-dim); }
.lb-lessons li > span:nth-child(2) { flex: 1 1 auto; min-width: 0; }
.lb-soon { flex: 0 0 auto; font-size: 11.5px; color: var(--text-faint); white-space: nowrap; }
@media (max-width: 600px) {
  .lb-soon { display: none; }
  .lb-lessons { padding-left: 4px; }
}
.lb-lessons li > a { display: flex; flex: 1 1 auto; align-items: baseline; gap: 10px; min-width: 0; color: inherit; text-decoration: none; }
.lb-lessons li > a .lb-title { color: var(--c-learn); }
.lb-lessons li > a:hover .lb-title { text-decoration: underline; }
.lb-open { display: inline-block; margin: 0 0 10px 22px; font-size: 13px; font-weight: 650; color: var(--c-learn); }
.lb-book > .lb-open { margin: 0 16px 14px; }

/* ---------- Learn: book, chapter, lesson and review pages (PLAN step L5) ---------- */
.learn-page { max-width: 1180px; }
.learn-h { margin: 4px 0 12px; font-size: 24px; line-height: 1.3; }
.learn-h .lb-code { font-size: inherit; min-width: 0; margin-right: 4px; }
.learn-h .lb-level { vertical-align: middle; font-size: 12px; }
.lb-book-page, .lb-chapter-page { padding: 0; margin: 10px 0; }
.lb-ch-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.lb-ch-link { display: flex; flex: 1 1 320px; align-items: baseline; gap: 10px; min-width: 0; text-decoration: none; }
.lb-ch-link:hover .lb-title { text-decoration: underline; }
.lb-chapter-page li { padding: 8px 0; border-top: 1px solid var(--border); font-size: 15px; }
.lp-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.lp-grid.has-drawer { grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); }
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); padding: 10px 12px; font-size: 13.5px; }
.lp-main { min-width: 0; max-width: 760px; }
.lp-cards { margin: 0 0 14px; display: flex; flex-direction: column; gap: 6px; }
.lp-cards-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.lp-cards-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); min-width: 13em; margin-right: 10px; }
@media (max-width: 600px) { .lp-cards-label { min-width: 0; flex-basis: 100%; } }
.lp-body p { line-height: 1.7; }
.lp-h3 { margin: 30px 0 10px; font-size: 18px; }

/* A check, answered with the math keyboard */
.lc-check { margin: 18px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); border-left: 3px solid var(--c-learn); background: var(--bg-card); }
.lc-q { margin-bottom: 10px; line-height: 1.6; }
.lc-n { display: inline-block; margin-right: 6px; font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.05em; color: var(--c-learn); }
.lc-result { margin-top: 10px; padding: 8px 12px; border-radius: 8px; line-height: 1.6; font-size: 14.5px; }
.lc-right { background: var(--cs-learn); }
.lc-right strong { color: var(--c-learn); }
.lc-wrong { background: var(--cs-patterns); }
.lc-wrong strong { color: var(--c-patterns); }
.lc-unread { background: var(--bg-panel); color: var(--text-dim); }
.mk { position: relative; max-width: 360px; }
/* The keypad pops up under the answer box while the box is in use. */
.mk-pop { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 280px;
  padding: 8px 10px 10px; border-radius: 12px; border: 1px solid var(--border-light); background: var(--bg-panel);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3); }
.mk.is-open .mk-pop { display: block; }
.mk.is-open .mk-input { border-color: var(--c-learn); }
.mk-row { display: flex; gap: 8px; }
.mk-input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 17px; padding: 7px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--bg); color: var(--text); }
.mk-input:focus { outline: none; border-color: var(--c-learn); }
.mk-submit { flex: 0 0 auto; font: inherit; font-weight: 700; font-size: 14px; padding: 7px 14px; border-radius: 8px; border: none;
  background: var(--c-learn); color: var(--bg); cursor: pointer; }
.mk-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mk-preview { flex: 1 1 auto; min-width: 0; min-height: 1.9em; display: flex; align-items: center; padding: 2px 4px; font-size: 18px; overflow-x: auto; }
.mk-preview.mk-note { font-size: 12.5px; line-height: 1.4; color: var(--text-dim); }
.mk-key.mk-clear { flex: 0 0 auto; min-height: 30px; padding: 0 10px; font-size: 12.5px; color: var(--text-dim); }
.mk-hint { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.4; color: var(--text-faint); }
@media (hover: none) { .mk-hint { display: none; } }
.mk-preview:empty::before { content: "Your answer, typeset, appears here"; font-size: 13px; color: var(--text-faint); }
.mk-keys { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.mk-key { font: inherit; font-size: 16px; min-height: 42px; padding: 0; border-radius: 8px; border: 1px solid var(--border);
  background: var(--bg-panel); color: var(--text); cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.mk-key:hover { border-color: var(--c-learn); }
.mk-key:active { background: var(--cs-learn); }
.mk-digit { background: var(--bg); font-variant-numeric: tabular-nums; }
.mk-edit { color: var(--text-dim); }

/* The problem list: statement, the student's box, then Show Solution */
.lp-problems { list-style: none; margin: 0; padding: 0; }
.lp-notes { display: block; width: 100%; box-sizing: border-box; margin: 10px 0 8px; font: inherit; font-size: 14.5px; line-height: 1.5;
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); resize: vertical; }
.lp-notes:focus { outline: none; border-color: var(--c-learn); }
.lp-sol { margin-bottom: 0; }

/* ---------- Learn: book covers and the book view (owner, 2026-10-31) ---------- */
.bk-shelf { display: grid; gap: 18px; }
.bk-shelf .bk-tile[hidden] { display: none; }
.bk-more { display: block; width: 100%; margin-top: 16px; }
.bk-more[hidden] { display: none; }
.bk-shelf-m { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); margin-top: 14px; }
.bk-shelf-s { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bk-tile { display: flex; flex-direction: column; gap: 9px; text-decoration: none; color: var(--text); }
.bk-tile-role { font-size: 13px; line-height: 1.45; color: var(--text-dim); }
.bk-cover {
  position: relative; display: flex; flex-direction: column; overflow: hidden; aspect-ratio: 3 / 4; width: 100%;
  padding: 14px 14px 12px 20px; box-sizing: border-box; border-radius: 4px 10px 10px 4px; color: #fff;
  background: linear-gradient(155deg, var(--bk-a), var(--bk-b));
  box-shadow: inset 7px 0 0 rgba(0, 0, 0, 0.22), inset 9px 0 0 rgba(255, 255, 255, 0.12), 0 6px 16px rgba(0, 0, 0, 0.28);
  transition: transform 0.15s, box-shadow 0.15s;
}
.bk-tile:hover .bk-cover, .bk-tile:focus-visible .bk-cover { transform: translateY(-4px) rotate(-0.6deg);
  box-shadow: inset 7px 0 0 rgba(0, 0, 0, 0.22), inset 9px 0 0 rgba(255, 255, 255, 0.12), 0 12px 24px rgba(0, 0, 0, 0.32); }
.bk-series { font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.bk-name { margin-top: 4px; font-size: 20px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
/* "Counting &" stays on one line (a no-break space before the &), so the title takes two lines, not three (owner, 2026-11-01). */
.bk-name-amp { letter-spacing: -0.035em; }
.bk-motif { flex: 1 1 auto; min-height: 0; width: 72%; align-self: center; margin: 8px 0; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.bk-motif .mf { fill: currentColor; stroke: none; }
.bk-motif .mg { stroke-width: 1.4; opacity: 0.45; }
.bk-size { font-size: 11.5px; font-weight: 650; opacity: 0.85; }
.bk-amc-algebra { --bk-a: #e0566a; --bk-b: #8f1f33; }
.bk-amc-number-theory { --bk-a: #d6a021; --bk-b: #7a5508; }
.bk-amc-counting { --bk-a: #2f9e8f; --bk-b: #145249; }
.bk-amc-geometry { --bk-a: #6c6fd8; --bk-b: #2f3187; }
.bk-bridge { --bk-a: #4c7ee8; --bk-b: #22428f; }
.bk-aime-algebra { --bk-a: #1fae9b; --bk-b: #0c5b52; }
.bk-aime-number-theory { --bk-a: #5fae35; --bk-b: #2b5d14; }
.bk-aime-geometry { --bk-a: #e58a3b; --bk-b: #91420f; }
.bk-aime-counting { --bk-a: #8b67ea; --bk-b: #432796; }
.bk-s { padding: 7px 6px 6px 11px; border-radius: 3px 7px 7px 3px; }
.bk-s .bk-series { font-size: 8.5px; letter-spacing: 0.1em; }
.bk-s .bk-name { font-size: 12.5px; margin-top: 2px; }
.bk-s .bk-motif { margin: 4px 0 0; stroke-width: 4; }
.bk-l { max-width: 210px; padding: 18px 18px 16px 26px; }
.bk-l .bk-name { font-size: 26px; }

.bk-hero { display: flex; gap: 26px; align-items: flex-start; margin: 4px 0 18px; }
.bk-hero .bk-cover { flex: 0 0 180px; width: 180px; }
.bk-hero-text { min-width: 0; }
.bk-stats { margin: 0 0 14px; font-size: 13.5px; color: var(--text-faint); }
.lp-main a.bk-start, .lp-main a.bk-start:visited, .bk-contents a.bk-start { background: var(--c-learn); color: #0d1a07; }
:root[data-theme="light"] :is(.lp-main, .bk-contents) a.bk-start { color: #fff; }
/* Dark text on the light green buttons in the dark theme (the theme's general button rule would make it pale). */
:root[data-theme="dark"] .lesson-page .lp-main :is(a.bk-start, .lp-show), :root[data-theme="dark"] .learn-page.bk-contents a.bk-start { color: #0d1a07; }
.bk-levels { margin-top: 6px; }
@media (max-width: 899px) {
}
@media (max-width: 600px) {
  .bk-hero { flex-direction: column; gap: 14px; }
  .bk-hero .bk-cover { width: 130px; flex-basis: auto; }
  .bk-shelf-m { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  /* The small covers keep a readable size and the row scrolls sideways. */
  .bk-shelf-s, .home-learn .bk-shelf-s { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .bk-shelf-s .bk-tile { flex: 0 0 92px; scroll-snap-align: start; }
  .bk-shelf-m .bk-name { font-size: 17px; }
  .bk-hero .bk-cover { width: 150px; padding: 12px 12px 10px 18px; }
  .bk-l .bk-name { font-size: 19px; }
}

/* Learn → Lists: room around your own lists */
/* Your lists sit in the Lists section as a plain subsection, not a box inside the box. */
#pr-lists .learn-sub { margin-top: 16px; }
/* New list: a small green + beside the "Your lists" heading (owner, 2026-10-31). */
#pr-lists .pl-mine-h { display: flex; align-items: center; gap: 8px; }
#pr-lists .pl-new-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border-radius: 6px; border: none;
  background: var(--cs-learn); color: var(--c-learn); font-size: 17px; font-weight: 800; line-height: 1; cursor: pointer; }
/* A user list's title renames in place: a press makes it editable, with an underline while typing. */
h2[data-list-title] { cursor: text; border-radius: 6px; }
h2[data-list-title]:hover { background: var(--bg-panel); }
h2[data-list-title][contenteditable="true"] { outline: none; background: var(--bg-panel); box-shadow: inset 0 -2px 0 var(--c-learn); padding: 0 6px; }
#pr-study > .learn-sub { margin-top: 26px; }

/* The card drawer */
.lp-drawer { position: sticky; top: calc(var(--topbar-h) + 12px); max-height: calc(100vh - var(--topbar-h) - 24px); overflow-y: auto;
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 18px 20px; }
.lp-drawer:focus { outline: none; }
.lp-drawer-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }

/* A bare ×, the height of the tags beside it (owner, 2026-10-31). */
.lp-drawer-close { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 22px; padding: 0; border: none; border-radius: 6px;
  background: none; color: var(--text-dim); font-size: 19px; line-height: 1; cursor: pointer; }
.lp-drawer-close:hover { background: var(--bg-panel); color: var(--text); }
/* The card preview in a lesson's drawer: the card page's own drawing, at the drawer's width. */
.lp-drawer .lp-drawer-head { margin-bottom: 8px; }
.lp-preview { max-width: none; margin: 0; padding: 0; font-size: 14px; }
.lp-preview-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 4px 0 14px; }
.lp-preview-title .card-name { margin: 0; font-size: 19px; line-height: 1.3; }
.lp-preview .detail-formula { margin: 8px 0 10px; padding: 12px 10px; overflow-x: auto; }
.lp-preview .detail-summary { font-size: 14px; line-height: 1.6; }
.lp-preview .detail-diagram { margin: 10px 0; }
.lp-preview .detail-diagram svg { max-width: 100%; height: auto; }
.lp-preview .detail-body h3, .lp-preview .detail-body .detail-h { font-size: 15px; }
/* The card's name opens the full card. */
.lp-preview-name { color: inherit; text-decoration: none; }
.lp-preview-name:hover { color: var(--bk-ink, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1100px) {
  /* No room for three columns: the drawer floats over the right edge instead. */
  .lp-grid.has-drawer { grid-template-columns: minmax(0, 1fr); }
  .lp-drawer { position: fixed; top: calc(var(--topbar-h) + 10px); right: 10px; bottom: 10px; width: min(380px, 46vw); max-height: none;
    z-index: 60; box-shadow: -8px 0 28px rgba(0, 0, 0, 0.35); }
}
@media (max-width: 899px) {
  .lp-grid, .lp-grid.has-drawer { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* On a phone the drawer is a sheet over the lower part of the screen. */
  .lp-drawer { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; z-index: 60; max-height: 62vh;
    border-radius: 14px 14px 0 0; box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.35); padding: 26px 16px 18px; }
  /* A grab handle: the sheet closes when swiped down (owner, 2026-10-31), and the handle leaves
     room above the tags. */
  .lp-drawer::before { content: ""; position: absolute; top: 9px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--border-light); }
  .lp-drawer.is-dragging { transition: none; }
  .lp-drawer.is-settling { transition: transform 0.2s ease; }
  .learn-h { font-size: 21px; }
}
.sh-section { margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.sh-section h3 { margin: 0; font-size: 17px; font-weight: 780; }
.sh-note { margin: 3px 0 12px; font-size: 13px; color: var(--text-dim); }
.grid-scroll { overflow-x: auto; }
.cy-grid { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.cy-grid th, .cy-grid td { padding: 7px 10px; text-align: center; border-bottom: 1px solid var(--border); white-space: nowrap; }
.cy-grid tbody tr:last-child th, .cy-grid tbody tr:last-child td { border-bottom: none; }
.cy-grid thead th { font-size: 12px; font-weight: 700; color: var(--text-faint); }
.cy-grid tbody th { text-align: left; font-weight: 700; }
.cy-grid a { color: var(--text); text-decoration: none; font-weight: 650; }
.cy-grid tbody th a:hover { color: var(--space); }
.cy-grid td a { display: inline-block; min-width: 30px; padding: 2px 8px; border-radius: 7px; background: var(--space-soft); color: var(--space); }
.cy-grid td a:hover { filter: brightness(1.15); }
/* On a phone the study routes are one row per subject with a chip per level, not a table that
   scrolls sideways (owner, 2026-10-31). */
.route-cards { display: none; }
@media (max-width: 760px) {
  #pr-study .grid-scroll { display: none; }
  .route-cards { display: flex; flex-direction: column; }
  .route-card { padding: 10px 0; border-bottom: 1px solid var(--border); }
  .route-card:last-child { border-bottom: none; }
  .route-card-t { margin-bottom: 7px; font-size: 14px; font-weight: 700; }
  .route-card-links { display: flex; flex-wrap: wrap; gap: 6px; }
  .route-card-links a { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 8px; background: var(--space-soft); color: var(--space); font-size: 13.5px; font-weight: 650; text-decoration: none; }
  .route-card-n { font-size: 12px; font-weight: 600; opacity: 0.75; }
}
.cy-none { color: var(--text-faint); }
.cy-all { color: var(--text-dim); font-weight: 700; }

/* ---------- Even card grids ----------
   Wherever cards are browsed (group pages, search results, lists) they sit in a grid of equal
   rows: two or three columns on a laptop (each at least 360px, so formulas stay readable), one
   on a phone. Each card face is short and
   about the same height (the first form only, scaled to fit; the summary clamped to four
   lines; figures off unless thumbnails are chosen), and a row stretches its cards to the
   tallest, so there are no holes between them. */
.content .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); gap: 14px; align-items: stretch; }
.cards > .card { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.cards > .card .formula-display { overflow: hidden; margin: 8px 0 10px; padding: 10px 12px; }
.cards > .card .formula-display.fd-scroll { overflow-x: auto; overflow-y: hidden; }
.cards > .card .formula-display.fd-scroll .katex-display { text-align: left; }
.cards > .card .card-desc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.cards > .card .more-hint { margin-top: auto; padding-top: 8px; }
.more-forms { margin: -4px 0 8px; font-size: 11.5px; color: var(--text-faint); text-align: center; }
.card-thumb { margin-top: 10px; padding: 4px 8px; text-align: center; }
.card-thumb .card-glance svg { max-height: 120px; width: auto; max-width: 100%; }
.card-thumb .diagram-cap { display: none; }
.cards > .card .card-lead p, .cards > .card .card-lead li { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Settings: panels of one-line rows, each with a segmented control ---------- */
.settings-page { gap: 14px; margin-top: 18px; max-width: 880px; }
.set-panel { display: block; padding: 2px 18px 6px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); scroll-margin-top: 76px; }
.set-panel-title {
  margin: 0; padding: 14px 0 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint);
}
summary.set-panel-title { cursor: pointer; display: flex; align-items: center; gap: 9px; list-style: none; }
summary.set-panel-title::-webkit-details-marker { display: none; }
summary.set-panel-title::after { content: "\25B8"; margin-left: auto; font-size: 13px; transition: transform 0.15s; }
details[open] > summary.set-panel-title::after { transform: rotate(90deg); }
/* Search settings: a small box under the page's subtitle, with matches in a dropdown. */
.set-find { position: relative; max-width: 360px; margin-top: 12px; }
.set-find-input { width: 100%; box-sizing: border-box; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); color: var(--text); font: inherit; font-size: 14px; }
.set-find-input:focus { outline: none; border-color: var(--accent); }
.set-find-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 50; padding: 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.16); }
.set-find-list[hidden] { display: none; }
.set-find-opt { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 10px; border: none; border-radius: 7px; background: none; color: var(--text); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.set-find-opt:hover, .set-find-opt.is-cur { background: var(--bg-panel); }
.set-find-group { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.set-find-none { padding: 8px 10px; font-size: 13.5px; color: var(--text-faint); }
/* The setting a search chose: a line draws itself under its name, then fades (owner, 2026-10-31). */
.set-name { position: relative; display: inline-block; }
.set-panel.set-found > .set-panel-title { display: inline-block; }
.set-panel-title { position: relative; }
.set-found .set-name::after, .set-panel.set-found > .set-panel-title::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; border-radius: 2px; background: var(--accent);
  transform-origin: left center; animation: set-uline 2.6s ease forwards; }
@keyframes set-uline { 0% { transform: scaleX(0); opacity: 1; } 22% { transform: scaleX(1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; border-top: 1px solid var(--border); }
.set-panel-title + .set-row { border-top: none; }
.set-text { min-width: 0; }
.set-name { font-size: 14.5px; font-weight: 700; color: var(--text); }
.set-desc { margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--text-dim); max-width: 520px; }
.seg { flex: none; display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--bg-panel); border: 1px solid var(--border); }
.seg button {
  font: inherit; font-size: 13px; font-weight: 650; padding: 6px 13px; border-radius: 7px; border: none;
  background: transparent; color: var(--text-dim); cursor: pointer; white-space: nowrap;
}
.seg button:hover { color: var(--text); }
.seg button[aria-checked="true"] { background: var(--bg-card); color: var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
:root[data-theme="dark"] .seg button[aria-checked="true"] { background: var(--accent-soft); box-shadow: none; }
.set-body { padding: 0 0 12px; }
.set-body .lab-row { margin-top: 10px; }
@media (max-width: 620px) { .set-row { flex-direction: column; align-items: flex-start; gap: 8px; } }

/* ---------- Practice: every contest year one click away, and the study lists inline ---------- */
.ct-list { display: flex; flex-direction: column; }
.ct-row { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--border); }
.ct-row:first-child { border-top: none; padding-top: 2px; }
.ct-name { display: flex; flex-direction: column; font-size: 14.5px; font-weight: 750; color: var(--text); text-decoration: none; }
.ct-name:hover { color: var(--space); }
.ct-n { font-size: 12px; font-weight: 600; color: var(--text-faint); }
.ct-years { display: flex; flex-wrap: wrap; gap: 5px; }
/* A contest still to come: greyed, not a link, and with no problem count. */
.ct-planned { opacity: 0.55; cursor: default; }
.ct-planned .ct-name { color: var(--text-dim); }
.ct-planned .ct-name:hover { color: var(--text-dim); }
.route-note { margin: 8px 2px 4px; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.ct-toggle { margin: 10px 0 2px; padding: 6px 12px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  background: var(--bg-card); border: 1px dashed var(--border); border-radius: 8px; cursor: pointer; }
.ct-toggle:hover { color: var(--text); border-color: var(--text-faint); }
.ct-planned-box[hidden] { display: none; }
.ct-note { font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.ct-years a {
  font-size: 12.5px; font-weight: 650; padding: 3px 8px; border-radius: 7px; text-decoration: none;
  background: var(--space-soft); color: var(--space);
}
.ct-years a:hover { filter: brightness(1.15); }
@media (max-width: 640px) { .ct-row { grid-template-columns: 1fr; gap: 6px; } }
.pl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; }
.hp-panel .pl-list { grid-template-columns: 1fr; gap: 0; }
.pl-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--text); text-decoration: none; background: var(--bg-panel); border: 1px solid transparent;
}
.hp-panel .pl-item { background: none; border-radius: 6px; border-bottom: 1px solid var(--border); }
.hp-panel .pl-item:last-child { border-bottom: none; }
.pl-item:hover { border-color: var(--space); color: var(--space); }
.pl-n { flex: none; font-size: 12px; font-weight: 600; color: var(--text-faint); }
.pl-kind-tag { margin-left: 8px; font-size: 11px; font-weight: 650; color: var(--text-faint); }
.pl-kinds { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; }
.pl-kind-title { margin-bottom: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--space); }
.rg-list .rg-head { color: var(--c-practice); }
.result-group .pl-list > .rg-extra { display: none; }
.result-group.rg-open .pl-list > .rg-extra { display: flex; }
.rg-lists .pl-kind-tag { display: block; margin: 1px 0 0; }

/* ---------- Search results: one list in order of relevance, every kind labelled ---------- */
.cards > [hidden] { display: none !important; }
a.card-result { color: var(--text); text-decoration: none; }
.badge-list { background: #b9c7a6; }
.rs-uses { margin: 8px 0 0; font-size: 12.5px; color: var(--text-faint); line-height: 1.45; }
.card-result .card-desc { margin-top: 6px; }
.rs-more { margin-top: 16px; }

/* ---------- Top bar: larger labels and icons in the 40px controls ---------- */
.space-switch button { font-size: 14px; padding: 0 13px; }
.topbar-tools .tool-btn { font-size: 14.5px; gap: 7px; }
.topbar-tools .tool-btn .tb-icon { margin-right: 0; }
.topbar-tools .tool-btn .tb-icon svg { width: 18px; height: 18px; vertical-align: middle; }
.topbar-tools #settings-btn { font-size: 21px; }
#search-input { font-size: 15px; }
@media (max-width: 760px) { .space-switch > button { font-size: 13px; padding: 0 4px; } }

/* ---------- Round 2 polish ---------- */
/* Settings is one click from the front page too, since the top bar is hidden there. */
.hub-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.hub-settings {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 40px; box-sizing: border-box; padding: 0 14px;
  border-radius: 10px; background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-dim);
  font-size: 14.5px; font-weight: 600; text-decoration: none;
}
.hub-settings span { font-size: 19px; }
.hub-settings:hover { color: var(--accent); border-color: var(--accent); }
/* Index rows stay one line each; the full name shows on hover. Formula topics take the space's
   colour, as method groups and pattern families do. */
.ix-topic { align-items: baseline; }
.ix-topic .ix-tname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--space); font-weight: 600; }
.ix-cards li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Search results: three to a row on a wide screen. */
.content .cards.search-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .content .cards.search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .content .cards.search-results { grid-template-columns: 1fr; } }
.rs-box { margin: 8px 0 10px; padding: 9px 12px; border-radius: 8px; background: var(--bg-panel); border: 1px solid var(--border); display: flex; flex-direction: column; gap: 4px; }
.rs-line { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; font-size: 13px; color: var(--text); }
.rs-k { flex: none; width: 66px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.rs-v { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-n { flex: none; font-size: 12px; color: var(--text-faint); }
.rs-more-line { color: var(--text-faint); font-size: 12px; }
/* A card's place (subject and topic) always sits on its own line under the badges. */
.card-meta .card-crumb { flex-basis: 100%; margin-left: 0; }
/* Rows inside panels: square ends and a background on hover, so separators stay straight and
   nothing looks clipped. */
.rc-row, .hp-panel .pl-item { border-radius: 0; }
.hp-panel .pl-item { border: none; border-bottom: 1px solid var(--border); }
.hp-panel .pl-item:last-child { border-bottom: none; }
.hp-panel .pl-item:hover { border-color: var(--border); background: var(--space-soft); color: var(--space); }
.rc-row:hover { background: var(--space-soft); }
/* Recently opened: one line; whatever does not fit is left off. */
.rc-chips { flex-wrap: wrap; max-height: 30px; overflow: hidden; }
.rc-chips .rc-row { border-radius: 999px; height: 30px; box-sizing: border-box; }

/* Sidebar hover takes the space's colour, like the active link. */
.nav-sub-link:hover, .nav-cluster-link:hover { border-left-color: var(--space); color: var(--space); }
.nav-section-btn:hover { color: var(--space); }

/* ---------- Round 3: subjects scroll again; Practice holds contests and lists ---------- */
.grp { scroll-margin-top: calc(var(--topbar-h, 66px) + 14px); margin-top: 34px; }
.section-header + .grp { margin-top: 18px; }
.grp-title { display: flex; align-items: baseline; gap: 10px; margin: 0; font-size: 20px; font-weight: 780; color: var(--text); }
.grp-n { font-size: 12px; font-weight: 650; color: var(--space); background: var(--space-soft); padding: 1px 9px; border-radius: 999px; }
.grp-blurb { margin: 4px 0 12px; max-width: 760px; font-size: 14px; line-height: 1.5; color: var(--text-dim); }
.ct-years-page { margin: 4px 0 8px; }
/* The phone's year bar: earlier, a year menu, later; and a toggle between the year's papers. */
.ct-yearbar, .ct-papers { display: none; }
@media (max-width: 760px) {
  .ct-years-page { display: none; }
  .ct-yearbar { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; }
  .ct-yb-select { flex: 1; min-width: 0; height: 42px; padding: 0 14px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: inherit; font-size: 15px; font-weight: 650; }
  .ct-yb-step { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-card); color: var(--text); font-size: 22px; line-height: 1; text-decoration: none; }
  .ct-yb-step.is-off { opacity: 0.35; }
  .ct-papers { display: flex; gap: 4px; margin: 0 0 6px; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); }
  .ct-papers button { flex: 1; height: 34px; border: none; border-radius: 9px; background: none; color: var(--text-dim); font: inherit; font-size: 14px; font-weight: 650; cursor: pointer; }
  .ct-papers button[aria-selected="true"] { background: var(--bg-card); color: var(--space); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
  .ct-papers ~ .db-group:not(.is-shown) { display: none; }
}
.ct-years a[aria-current="page"] { background: var(--space); color: #fff; }
.pl-new { display: flex; gap: 8px; margin-top: 10px; }
.pl-new input { flex: 1; min-width: 0; font: inherit; font-size: 13.5px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-panel); color: var(--text); }
.pl-new input:focus { outline: none; border-color: var(--space); }
.pl-new button { font: inherit; font-size: 13px; font-weight: 700; padding: 0 14px; border-radius: 8px; border: none; background: var(--space); color: #fff; cursor: pointer; }
a.hw-row { text-decoration: none; border-radius: 0; }
a.hw-row:hover { background: var(--bg-panel); }
a.hw-row:hover .hw-go { color: var(--accent); }
.hub-foot { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.hub-foot a { font-size: 13.5px; font-weight: 650; color: var(--text-dim); text-decoration: none; }
.hub-foot a:hover { color: var(--accent); }

/* ---------- Round 4 ---------- */
/* Star and add-to-list sit beside a card's name, always visible; the name wraps before them.
   Copying LaTeX and Asymptote is on the card's own page. */
/* The name never squeezes: if the tags do not fit beside it they drop to the next line, and the
   star and add buttons stay pinned top right. */
.card-head { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding-right: 70px; }
.card-head .card-name { flex: 0 0 auto; max-width: 100%; min-width: 0; }
/* The kind and tier tags sit on the name's own line; the actions stay at the far right. */
.card-head .card-tags { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.card-head .card-actions { position: absolute; top: 0; right: 0; margin: 0; }
.card .card-actions { flex: none; margin-top: 0; }
/* Card size: Large makes every card wider (the widths are set further down). */
html[data-cols="spacious"] .content .cards { grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); }
html[data-cols="spacious"] .content .cards.search-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { html[data-cols="spacious"] .content .cards.search-results { grid-template-columns: 1fr; } }
/* Figures on cards use the card's width. */
.card-thumb { padding: 6px 4px; }
.card-thumb .card-glance { width: 100%; }
.card-thumb .card-glance svg { width: 100%; max-width: 100%; height: auto; max-height: 300px; }
/* The random-problem picker. */
.rand-btns button {
  font: inherit; font-size: 13px; font-weight: 700; padding: 7px 12px; border-radius: 9px; cursor: pointer;
  background: var(--bg-panel); color: var(--text); border: 1px solid var(--border);
}
.rand-btns button:hover { border-color: var(--space); color: var(--space); }
.rand-btns button[aria-checked="true"] { background: var(--space); border-color: var(--space); color: #fff; }
.rand-diff { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; font-weight: 650; color: var(--text-dim); }
.rand-diff[hidden] { display: none; }
.rand-diff input { flex: 1; max-width: 260px; accent-color: var(--space); }
.rand-diff-val { min-width: 60px; color: var(--space); }
.rand-go { margin-top: 14px; }
.hub { max-width: 1320px; }
.space-home { max-width: none; }
/* A card's own page: name and actions on one line, then the same badge line as the card face. */
.detail-head { flex-wrap: nowrap; align-items: flex-start; margin-bottom: 6px; }
.detail-head .card-name { flex: 1; min-width: 0; }
.detail-actions { flex: none; display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; }
.detail-meta { margin: 0 0 12px; }
.detail-meta .level-range { font-size: 12.5px; }
/* The contest box on a problem page sits on the left with the rest of the page, in the
   app's panel style. */
.contest-nav { margin: 24px 0 0; border-radius: 12px; background: var(--bg-card);
  /* Wide enough that the 25 problem numbers of a paper sit on one line, and wider still if a paper has
     more; on a screen too narrow for that the numbers wrap and the box fits the page. */
  width: max-content; max-width: 100%; min-width: min(100%, 1060px); box-sizing: border-box; }
.contest-nav .cn-head { justify-content: center; padding: 10px 14px; background: none; }
.contest-nav .cn-nums { gap: 6px; }

/* Before the first render on the front page, the top bar and sidebar stay hidden (see the
   pre-paint script in index.html), so they do not flash. */
html.pre-landing .sidebar { display: none; }
/* Card size: Regular is two across on a laptop (three on a wide screen), Large one across on
   a laptop (two on a wide screen), with room for every form of a formula. */
.content .cards { grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr)); }
html[data-cols="spacious"] .content .cards { grid-template-columns: repeat(auto-fill, minmax(min(620px, 100%), 1fr)); }

/* ---------- A card page reads as one article ----------
   Every section is on the page in reading order; the sidebar lists them under "On this page",
   and each heading carries one line saying what the section is for. */
.page-toc { margin: 22px 0 0; padding: 14px 0 0 12px; border-top: 1px solid var(--border); }
.page-toc[hidden] { display: none; }
.toc-head { margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
/* A list's page tools, under its sections: plain text buttons, set off by a hairline. */
.toc-tools-head { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
/* Blue text links, as in a card's page tools (owner, 2026-10-31). */
.toc-tool { display: block; width: 100%; padding: 3px 0; border: none; background: none; color: var(--accent); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.toc-tool:hover, .toc-tool:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.toc-link {
  display: block; padding: 4px 10px; border-left: 2px solid var(--border); font-size: 13px; line-height: 1.35;
  color: var(--text-dim); text-decoration: none;
}
.toc-link:hover { color: var(--space); border-left-color: var(--space); }
.toc-link.active { color: var(--space); border-left-color: var(--space); font-weight: 650; }
.detail h4[id] { scroll-margin-top: 80px; }
.sec-note { margin: -4px 0 10px; font-size: 13px; line-height: 1.45; color: var(--text-faint); }
.detail > .related, .detail > .connected, .detail > .practice, .detail > .contest-profile,
.detail > .interactive, .detail > .key-forms, .detail > .uses-block { margin-top: 26px; }
.detail-diagrams { margin: 16px 0 8px; }
.uses-block .uses-notes { margin-top: 12px; }

/* ---------- Card and problem pages: one text style ----------
   Every paragraph and list item on a card's page and a problem's page reads at the same size,
   line height and colour as the summary; small grey text is kept for notes and labels. Lists
   are plain bullets (and numbers for steps), not boxed rows. */
.detail .detail-summary, .detail .detail-body p, .detail .detail-body li, .detail .key-forms li,
.detail .lead-text, .detail .lead-signals li, .detail .lead-try li, .detail .pf-sentence, .detail .profile-stats li,
.detail .problem-q, .detail .problem-sol, .detail .chain-strategy, .detail .prob-note, .detail .card-desc {
  font-size: 15px; line-height: 1.65; color: var(--text);
}
:root[data-theme="dark"] .detail .detail-summary, :root[data-theme="dark"] .detail .detail-body p,
:root[data-theme="dark"] .detail .detail-body li, :root[data-theme="dark"] .detail .key-forms li,
:root[data-theme="dark"] .detail .lead-text, :root[data-theme="dark"] .detail .lead-signals li,
:root[data-theme="dark"] .detail .lead-try li, :root[data-theme="dark"] .detail .pf-sentence,
:root[data-theme="dark"] .detail .profile-stats li, :root[data-theme="dark"] .detail .problem-q,
:root[data-theme="dark"] .detail .problem-sol, :root[data-theme="dark"] .detail .chain-strategy,
:root[data-theme="dark"] .detail .prob-note, :root[data-theme="dark"] .detail .card-desc { color: var(--text-dim); }
html[data-text="large"] .detail .detail-body p, html[data-text="large"] .detail .detail-body li,
html[data-text="large"] .detail .key-forms li, html[data-text="large"] .detail .lead-text,
html[data-text="large"] .detail .lead-signals li, html[data-text="large"] .detail .pf-sentence,
html[data-text="large"] .detail .profile-stats li, html[data-text="large"] .detail .problem-q,
html[data-text="large"] .detail .problem-sol, html[data-text="large"] .detail .chain-strategy,
html[data-text="large"] .detail .prob-note, html[data-text="large"] .detail .detail-summary { font-size: 17px; }
.detail .detail-body .detail-list, .detail .key-forms .detail-list {
  display: block; list-style: disc; margin: 0 0 12px; padding-left: 22px;
}
.detail .detail-body ol.detail-list { list-style: decimal; }
.detail .detail-body .detail-list li, .detail .key-forms .detail-list li {
  margin: 0 0 6px; padding: 0 0 0 2px; background: none; border: none; border-radius: 0;
}
.detail .key-forms .kf-note { display: inline; margin: 0; font-size: inherit; color: var(--text-dim); }
.detail .key-forms .kf-note::before { content: ": "; }
.detail .sec-note, .detail .kf-note { font-size: 13.5px; }
.detail .sec-note { color: var(--text-faint); }
/* Name, kind, level and importance on one line; the actions sit at the right end. */
.detail .detail-head { flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 12px; }
.detail .detail-head .card-name { flex: 0 0 auto; max-width: 100%; }
.detail .detail-head .detail-meta { margin: 0; }
.detail .detail-head .detail-actions { margin: 0 0 0 auto; }
/* The problem page's chain reads at the page's size too. */
.detail .chain-cards .related-item, .detail .chain-empty { font-size: 14px; }
.detail p.sec-note, .detail .detail-body p.sec-note { font-size: 13.5px; line-height: 1.45; color: var(--text-faint); margin: -4px 0 10px; }

/* ---------- Type scale on card and problem pages ----------
   One body size for reading (15px, 16.5px with Large text), 13px for the notes under headings
   and for small links, 11px capitals for labels. Nothing in between. */
html[data-text="large"] .detail .detail-body p, html[data-text="large"] .detail .detail-body li,
html[data-text="large"] .detail .key-forms li, html[data-text="large"] .detail .lead-text,
html[data-text="large"] .detail .lead-signals li, html[data-text="large"] .detail .lead-try li,
html[data-text="large"] .detail .pf-row, html[data-text="large"] .detail .problem-q,
html[data-text="large"] .detail .problem-sol, html[data-text="large"] .detail .chain-strategy,
html[data-text="large"] .detail .prob-note, html[data-text="large"] .detail .detail-summary { font-size: 16.5px; }
.detail .lead-signals, .detail .lead-try { font-size: 15px; }
.detail .lead-label, .card-lead .lead-label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); }
.lead-try-note { font-size: 13px; }
html[data-text="large"] .card-lead p { font-size: 15px; }

/* Contest profile: one labelled row per fact. */
.profile-rows { display: grid; gap: 8px; }
.pf-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 15px; line-height: 1.6; color: var(--text); }
:root[data-theme="dark"] .pf-row { color: var(--text-dim); }
.pf-row .pf-k { margin: 0; font-weight: 650; color: var(--text); }
:root[data-theme="dark"] .pf-row .pf-k { color: var(--text); }
.pf-v { min-width: 0; }
.pf-dot { color: var(--text-faint); margin: 0 3px; }
.pf-band {
  display: inline-block; margin: 0 6px 4px 0; padding: 1px 10px; border-radius: 999px; font-size: 13px; font-weight: 650;
  background: var(--bg-panel); border: 1px solid var(--border); color: var(--text);
}
.pf-band.pf-easy { border-color: color-mix(in srgb, var(--c-methods) 45%, transparent); }
.pf-band.pf-medium { border-color: color-mix(in srgb, var(--c-patterns) 45%, transparent); }
.pf-band.pf-hard { border-color: color-mix(in srgb, var(--c-practice) 45%, transparent); }
.pf-band.pf-zero { opacity: 0.45; }
@media (max-width: 640px) { .pf-row { grid-template-columns: 1fr; gap: 2px; } }

/* Problem of the day and Card of the day open their page from anywhere in the panel. */
.hp-click { cursor: pointer; transition: border-color 0.12s, background 0.12s; }
.hp-click:hover { border-color: var(--accent); background: var(--bg-card-hover); }
.hp-click:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hp-click .rc-row { padding-left: 0; padding-right: 0; border-bottom: none; }
.hp-click .rc-row:hover { background: none; }
.hp-click .daily-title { color: var(--text); }

/* On a card page the tag sits right after the name (and drops under it when there is no room);
   the star, add, and copy buttons are pushed to the right end of the line. */
.detail .detail-head .detail-meta { margin-left: 0; }
.detail .detail-head .detail-actions { margin-left: auto; }
/* Displayed (centred) maths reads a step larger than the prose around it. The card's own
   formula box keeps its larger size. */
.detail :not(.formula-display) > .katex-display > .katex { font-size: 1.22em; }
.pf-contests { margin-left: 6px; color: var(--text-dim); }
div.hw-row { cursor: default; }

/* Contest profile charts: a pie of contests, a line of where the problems sit in their papers. */
.pf-chart { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.pf-pie { width: 110px; height: 110px; flex: none; display: block; }
.pf-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.pf-leg { display: inline-flex; align-items: center; gap: 6px; }
.pf-sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.pf-c0 { fill: var(--c-practice); background: var(--c-practice); }
.pf-c1 { fill: var(--c-formulas); background: var(--c-formulas); }
.pf-c2 { fill: var(--c-methods); background: var(--c-methods); }
.pf-c3 { fill: var(--c-patterns); background: var(--c-patterns); }
.pf-c4 { fill: var(--text-faint); background: var(--text-faint); }
.pf-pie path { stroke: var(--bg); stroke-width: 1.5; }
.pf-line { width: 260px; height: 80px; flex: none; overflow: visible; }
.pf-axis { stroke: var(--border-light); stroke-width: 1; }
.pf-path { fill: none; stroke: var(--space); stroke-width: 2; stroke-linejoin: round; }
.pf-pt { fill: var(--bg); stroke: var(--space); stroke-width: 2; }
.pf-ax-label { font-size: 12px; fill: var(--text-dim); font-family: inherit; }
.hub-foot { min-height: 0; }

.pf-pie-wrap { position: relative; flex: none; }
.pf-pie path, .pf-pie circle { cursor: default; transition: opacity 0.12s; }
.pf-pie:hover path, .pf-pie:hover circle { opacity: 0.55; }
.pf-pie path:hover, .pf-pie circle:hover { opacity: 1; }
.pf-tip {
  position: absolute; z-index: 5; white-space: nowrap; pointer-events: none; padding: 4px 9px; border-radius: 7px;
  font-size: 13px; font-weight: 650; background: var(--text); color: var(--bg); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.pf-tip[hidden] { display: none; }
.pf-bars { display: grid; gap: 6px; flex: 1; min-width: 240px; max-width: 520px; }
.pf-bar-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) 36px; gap: 10px; align-items: center; font-size: 14px; }
.pf-bar-name { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-bar-track { height: 10px; border-radius: 5px; background: var(--bg-panel); overflow: hidden; }
.pf-bar { display: block; height: 100%; border-radius: 5px; }
.pf-bar-n { text-align: right; font-weight: 650; color: var(--text-dim); }
/* Section notes: one size everywhere on the page, including inside the write-up, where the
   Large-text paragraph rule used to outrank them. */
html .detail p.sec-note, html .detail .detail-body p.sec-note { font-size: 13.5px; line-height: 1.45; color: var(--text-faint); }
html[data-text="large"] .detail p.sec-note, html[data-text="large"] .detail .detail-body p.sec-note { font-size: 14.5px; }

/* ---------- Density: the spacing of the whole app ----------
   Compact tightens margins, gaps and padding everywhere: pages, card grids, card pages,
   panels and the sidebar. It never changes text size (Text size) or card width (Card size). */
html[data-density="compact"] .content { padding: 16px 16px 90px; }
html[data-density="compact"] .sidebar { padding: 14px 8px 30px 12px; }
html[data-density="compact"] .nav-section-btn { padding-top: 5px; padding-bottom: 5px; }
html[data-density="compact"] .nav-sub-link, html[data-density="compact"] .nav-cluster-link { padding-top: 2px; padding-bottom: 2px; }
html[data-density="compact"] .grp { margin-top: 22px; }
html[data-density="compact"] .section-header + .grp { margin-top: 12px; }
html[data-density="compact"] .grp-blurb { margin: 2px 0 8px; }
html[data-density="compact"] .cards > .card .formula-display { margin: 6px 0 7px; padding: 7px 10px; }
html[data-density="compact"] .detail-body h4, html[data-density="compact"] .key-forms h4,
html[data-density="compact"] .related h4, html[data-density="compact"] .connected h4,
html[data-density="compact"] .practice h4, html[data-density="compact"] .interactive h4 { margin: 14px 0 6px; }
html[data-density="compact"] .detail > .related, html[data-density="compact"] .detail > .connected,
html[data-density="compact"] .detail > .practice, html[data-density="compact"] .detail > .contest-profile,
html[data-density="compact"] .detail > .interactive, html[data-density="compact"] .detail > .key-forms,
html[data-density="compact"] .detail > .uses-block { margin-top: 16px; }
html[data-density="compact"] .detail-diagrams { margin: 10px 0 4px; }
html[data-density="compact"] .detail .detail-body p, html[data-density="compact"] .detail .detail-body li,
html[data-density="compact"] .detail .key-forms li, html[data-density="compact"] .detail .detail-summary { line-height: 1.55; }
html[data-density="compact"] .hp-panel, html[data-density="compact"] .ix-subject { padding: 10px 12px; }
html[data-density="compact"] .ix-grid { gap: 10px; }
html[data-density="compact"] .ix-topic { padding: 4px 0; }
html[data-density="compact"] .settings-page { gap: 10px; }
html[data-density="compact"] .set-row { padding: 8px 0; }

/* ---------- Settings preview ----------
   Three small screens beside the settings, only when the window has room for them. Each
   screen is laid out at a laptop's content width (1100px) and scaled to its frame. */
.set-preview { display: none; }
/* On a wide window the preview is its own fixed panel on the right, behind a dividing line: it
   never scrolls with the settings, and its three screens are sized to fit its height. */
@media (min-width: 1280px) {
  .set-preview {
    display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
    position: fixed; right: 0; bottom: 0; top: var(--pv-top, 58px); left: var(--pv-left, 70%);
    padding: 16px 22px; box-sizing: border-box; overflow: hidden;
    border-left: 1px solid var(--border); background: var(--bg);
  }
  /* The page must not bounce past its ends here: the document would move and the fixed panel
     would not, so the panel would poke out above the top bar or below the page. */
  html:has(.set-preview) { overscroll-behavior-y: none; }
}
.pv-title { align-self: stretch; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.pv-screen { margin: 0; transition: opacity 0.15s; }
.set-preview[data-focus] .pv-screen { opacity: 0.35; }
.set-preview[data-focus~="browse"] .pv-screen[data-pv="browse"],
.set-preview[data-focus~="page"] .pv-screen[data-pv="page"],
.set-preview[data-focus~="subject"] .pv-screen[data-pv="subject"],
.set-preview[data-focus~="problem"] .pv-screen[data-pv="problem"],
.set-preview[data-focus~="lesson"] .pv-screen[data-pv="lesson"] { opacity: 1; }
/* In the lesson preview the drawer sits in the grid beside the text, never floating, and nothing
   sticks: the screen is a still picture. */
.pv-inner .lp-drawer { position: static; max-height: none; box-shadow: none; }
.pv-inner .lp-grid.has-drawer { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; }
.pv-inner .bk-rail { position: static; }
.pv-inner .content, .pv-inner .bk-view { margin: 0; }
.pv-track { display: flex; flex-direction: column; gap: 8px; align-self: stretch; align-items: center; }
.pv-screen[hidden] { display: none; }
/* The arrows that step through the screens, one on each side of the panel. */
.pv-nav { position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); color: var(--text-dim); font-size: 20px; line-height: 1; cursor: pointer; }
.pv-nav:hover:not(:disabled) { color: var(--text); border-color: var(--border-light); }
.pv-nav:disabled { opacity: 0.3; cursor: default; }
.pv-prev { left: 8px; }
.pv-next { right: 8px; }
.pv-frame { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); pointer-events: none; user-select: none; }
.pv-inner { position: absolute; top: 0; left: 0; width: 1100px; height: 640px; overflow: hidden; transform-origin: 0 0; padding: 24px 22px; box-sizing: border-box; }
html[data-density="compact"] .pv-inner { padding: 16px 16px; }
.pv-inner .section-header + .cards { margin-top: 14px; }
.pv-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 22px 16px; background: var(--bg); border-top: 1px solid var(--border); }
.pv-label { margin-top: 5px; font-size: 12px; font-weight: 650; color: var(--text-dim); }

/* A card that is planned but not written yet: a red link, as for a missing Wikipedia article. */
.red-link { color: #ba0000; cursor: help; }
:root[data-theme="dark"] .red-link { color: #ff8a80; }
.related-planned { font-style: normal; }
/* A pattern's "Methods and Formulas to Try": two short labelled lists. */
/* Tables inside a write-up (a step-by-step probability table, for instance). The wrapper scrolls
   sideways on a narrow screen instead of squeezing the cells. */
.detail-table-wrap { overflow-x: auto; margin: 12px 0 14px; position: relative; }  /* relative: KaTeX's hidden MathML must not escape the scroller and widen the page */
.detail-table { border-collapse: collapse; font-size: 14px; min-width: 60%; }
.detail-table th, .detail-table td { padding: 6px 14px; border-bottom: 1px solid var(--border); text-align: center; font-variant-numeric: tabular-nums; }
.detail-table th { font-size: 12.5px; font-weight: 700; color: var(--text-dim); border-bottom: 2px solid var(--border); }
.detail-table td:first-child, .detail-table th:first-child { text-align: left; color: var(--text-dim); }
html[data-text="large"] .detail-table { font-size: 15.5px; }
.try-block .try-sub, .detail-body .body-sub { margin: 14px 0 6px; font-size: 13px; font-weight: 750; letter-spacing: 0.02em; color: var(--text-dim); }
html[data-text="large"] .try-block .try-sub, html[data-text="large"] .detail-body .body-sub { font-size: 14.5px; }
.lead-try .red-link { font-weight: 400; }
/* The chain sits near the bottom of a problem page, below the problem and Think, as a quieter
   summary rather than a lead panel. */
.detail .prob-chain { margin-top: 28px; }

/* The space's name in the sidebar, with a small "i" that opens what the space is for and what
   was recently opened in it (Formulas, Methods and Patterns have no main page). */
.nav-space-head { position: relative; display: grid; grid-template-columns: auto auto 1fr; align-items: center; column-gap: 7px; }
.nav-space-head .nsh-ask { grid-column: 1 / -1; }
.nsh-info {
  width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 1px solid var(--text-faint); background: none;
  font: italic 700 10.5px/14px Georgia, "Times New Roman", serif; color: var(--text-faint); cursor: pointer; text-align: center;
}
.nsh-info:hover, .nsh-info[aria-expanded="true"] { border-color: var(--space); color: var(--space); }
/* The space's dialog, opened from the "i": its question, what it holds, and what was recently opened. */
.info-modal { width: min(460px, calc(100vw - 32px)); }
.info-body { padding: 16px 18px 18px; }
.info-ask { margin: 0 0 6px; font-size: 15px; font-weight: 750; color: var(--text); }
.info-intro { margin: 0 0 16px; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.info-intro a { color: var(--accent); }
.info-label { margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.info-modal .modal-head h3 { color: var(--text); }

/* Front page: after the chain, every subject of every space as plain links in four columns. */
.hub-chain-note { margin-top: 10px; }
.hub-jump { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.hj-col { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); border-top: 3px solid var(--tint); }
.hj-head { margin-bottom: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tint); }
.hj-col a { padding: 3px 0; font-size: 14px; color: var(--text); text-decoration: none; }
.hj-col a:hover { color: var(--tint); }

/* A long subject page holds two hundred cards and some fifty thousand elements of typeset math.
   Cards off screen are skipped for layout and paint until they come near the screen; each
   keeps the height it last had, so the scrollbar does not jump. Scripts that measure a card
   (fitting its formula) still get a real layout. */
.content .cards > .card { content-visibility: auto; contain-intrinsic-size: auto 300px; }

/* ---------- Density: Spacious ----------
   More room everywhere, the mirror of Compact: page margins, card and section gaps, panel
   padding, the sidebar and the line spacing of a card's page. Text size and card width stay. */
html[data-density="spacious"] .content { padding: 24px 34px 140px; }
html[data-density="spacious"] .sidebar { padding: 26px 12px 48px 20px; }
html[data-density="spacious"] .nav-section-btn { padding-top: 12px; padding-bottom: 12px; }
html[data-density="spacious"] .nav-sub-link, html[data-density="spacious"] .nav-cluster-link { padding-top: 6px; padding-bottom: 6px; }
html[data-density="spacious"] .cards { gap: 22px; }
html[data-density="spacious"] .card { padding: 22px 24px 18px; }
html[data-density="spacious"] .cards > .card .formula-display { margin: 12px 0 14px; padding: 14px 16px; }
html[data-density="spacious"] .grp { margin-top: 48px; }
html[data-density="spacious"] .section-header + .grp { margin-top: 26px; }
html[data-density="spacious"] .grp-blurb { margin: 6px 0 18px; }
html[data-density="spacious"] .detail-body h4, html[data-density="spacious"] .key-forms h4,
html[data-density="spacious"] .related h4, html[data-density="spacious"] .connected h4,
html[data-density="spacious"] .practice h4, html[data-density="spacious"] .interactive h4 { margin: 32px 0 10px; }
html[data-density="spacious"] .detail > .related, html[data-density="spacious"] .detail > .connected,
html[data-density="spacious"] .detail > .practice, html[data-density="spacious"] .detail > .contest-profile,
html[data-density="spacious"] .detail > .interactive, html[data-density="spacious"] .detail > .key-forms,
html[data-density="spacious"] .detail > .uses-block { margin-top: 36px; }
html[data-density="spacious"] .detail-diagrams { margin: 22px 0 12px; }
html[data-density="spacious"] .detail .detail-body p, html[data-density="spacious"] .detail .detail-body li,
html[data-density="spacious"] .detail .key-forms li, html[data-density="spacious"] .detail .detail-summary { line-height: 1.8; }
html[data-density="spacious"] .hp-panel, html[data-density="spacious"] .ix-subject { padding: 18px 20px; }
html[data-density="spacious"] .settings-page { gap: 20px; }
html[data-density="spacious"] .set-row { padding: 16px 0; }
html[data-density="spacious"] .pv-inner { padding: 24px 34px; }

/* The preview's subject page carries the sidebar, drawn with the sidebar's own classes. */
.pv-shell { display: grid; grid-template-columns: 260px 1fr; align-items: start; --space: var(--c-formulas); --space-soft: var(--cs-formulas); margin: -24px -22px; }
html[data-density="compact"] .pv-shell { margin: -16px; }
html[data-density="spacious"] .pv-shell { margin: -24px -34px; }
.pv-side { position: static; max-height: none; overflow: hidden; }
.pv-main { padding: 24px 22px; min-width: 0; }
html[data-density="compact"] .pv-main { padding: 16px; }
html[data-density="spacious"] .pv-main { padding: 24px 34px; }

/* The A to Z subject page has the same row of letters as Special:AllPages. */
.wiki-jump { margin: 14px 0 4px; }
.wiki-letter { scroll-margin-top: calc(var(--topbar-h, 66px) + 12px); }

/* Dropdowns and dialogs keep their scrolling: reaching the end of the list does not start
   scrolling the page behind it. */
.cmd-suggest, .modal-overlay, .modal, .lm-list, .card-preview, .adv-modal { overscroll-behavior: contain; }
/* Special:Statistics: one table per group, a heading over each, shares in grey. */
.st-head { margin: 22px 0 6px; font-size: 15px; font-weight: 750; color: var(--text); }
.st-head:first-child { margin-top: 4px; }
.special-table .st-pct { color: var(--text-faint); }
.special-table td a { color: var(--accent); text-decoration: none; }

/* A list page's sidebar is only its sections ("On this list"): the space tree is hidden, so the
   panel loses the rule that separates it from that tree. */
#formula-nav[hidden] { display: none; }
#formula-nav[hidden] + .page-toc { margin-top: 0; padding-top: 0; border-top: 0; }
/* A long section name wraps beside its count instead of running under it. */
.toc-link.toc-counted { display: flex; align-items: baseline; gap: 10px; }
.toc-counted .toc-t { flex: 1; min-width: 0; }
.toc-counted .toc-n { flex: none; font-weight: 400; font-size: 11.5px; color: var(--text-faint); }
.list-section { scroll-margin-top: calc(var(--topbar-h, 66px) + 12px); }

/* "How this problem works" is a quiet summary box: no rule after its heading. */
.prob-chain h4::after { content: none; }

/* ---------- Density reaches the small pieces too ----------
   Compact and Spacious also tighten or loosen the side panels ("On this page", "On this list"),
   chips and tag rows, the method and pattern box, the contest profile rows, problem pages, the
   A to Z index, the front page panels, recent rows, search previews, dialogs and the command
   list, so the whole app changes together. Text size is never touched. */
html[data-density="compact"] .page-toc { margin-top: 14px; padding-top: 10px; }
html[data-density="compact"] .toc-link { padding-top: 2px; padding-bottom: 2px; }
html[data-density="compact"] .toc-head { margin-bottom: 4px; }
html[data-density="compact"] .nav-space-head { padding-bottom: 6px; }
html[data-density="compact"] .nav-practice-link { padding: 6px 10px; }
html[data-density="compact"] .related-grid, html[data-density="compact"] .tag-row { gap: 5px; }
html[data-density="compact"] .lead-box { padding: 9px 12px; gap: 8px; margin: 4px 0 12px; }
html[data-density="compact"] .pf-row { gap: 8px; line-height: 1.45; }
html[data-density="compact"] .profile-rows { row-gap: 4px; }
html[data-density="compact"] .prob-chain { padding: 9px 12px; }
html[data-density="compact"] .detail .prob-chain { margin-top: 18px; }
html[data-density="compact"] .chain-grid { gap: 7px; }
html[data-density="compact"] .list-section { margin-top: 22px; }
html[data-density="compact"] .ct-row { padding: 6px 0; }
html[data-density="compact"] .wiki-letter { margin-top: 14px; }
html[data-density="compact"] .hj-col { padding: 9px 11px; }
html[data-density="compact"] .rc-row { padding: 4px 6px; }
/* The Recently opened chips keep their side room in compact density: they are pills, not rows. */
html[data-density="compact"] .rc-chips .rc-row { padding: 4px 13px; }
html[data-density="compact"] .rs-box { padding: 6px 10px; margin: 6px 0 8px; }
html[data-density="compact"] .cs-item { padding: 5px 10px; }
html[data-density="compact"] .modal-head { padding: 10px 14px; }
html[data-density="compact"] .info-body, html[data-density="compact"] .settings-body { padding: 12px 14px 14px; }
html[data-density="compact"] .set-panel { padding: 0 14px 4px; }
html[data-density="compact"] .key-forms .detail-list li, html[data-density="compact"] .detail .detail-list li { margin-bottom: 2px; }

html[data-density="spacious"] .page-toc { margin-top: 30px; padding-top: 18px; }
html[data-density="spacious"] .toc-link { padding-top: 6px; padding-bottom: 6px; }
html[data-density="spacious"] .toc-head { margin-bottom: 10px; }
html[data-density="spacious"] .nav-space-head { padding-bottom: 14px; }
html[data-density="spacious"] .nav-practice-link { padding: 12px 14px; }
html[data-density="spacious"] .related-grid, html[data-density="spacious"] .tag-row { gap: 10px; }
html[data-density="spacious"] .lead-box { padding: 16px 19px; gap: 14px; margin: 10px 0 22px; }
html[data-density="spacious"] .pf-row { gap: 16px; line-height: 1.75; }
html[data-density="spacious"] .profile-rows { row-gap: 10px; }
html[data-density="spacious"] .prob-chain { padding: 16px 19px; }
html[data-density="spacious"] .detail .prob-chain { margin-top: 38px; }
html[data-density="spacious"] .chain-grid { gap: 14px; }
html[data-density="spacious"] .list-section { margin-top: 48px; }
html[data-density="spacious"] .ct-row { padding: 13px 0; }
html[data-density="spacious"] .wiki-letter { margin-top: 44px; }
html[data-density="spacious"] .hj-col { padding: 16px 18px; }
html[data-density="spacious"] .rc-row { padding: 10px 8px; }
html[data-density="spacious"] .rc-chips .rc-row { padding: 4px 14px; }
html[data-density="spacious"] .rs-box { padding: 12px 14px; margin: 12px 0 14px; }
html[data-density="spacious"] .cs-item { padding: 11px 14px; }
html[data-density="spacious"] .modal-head { padding: 18px 22px; }
html[data-density="spacious"] .info-body, html[data-density="spacious"] .settings-body { padding: 20px 22px 24px; }
html[data-density="spacious"] .set-panel { padding: 6px 22px 10px; }
html[data-density="spacious"] .key-forms .detail-list li, html[data-density="spacious"] .detail .detail-list li { margin-bottom: 8px; }
/* Math and the punctuation touching it never part at a line break. */
.math-glue { white-space: nowrap; }
/* fitInlineMath: glued math that overflows its line gets its breaks back, and math that still
   overflows scrolls on its own. */
.math-glue.loose { white-space: normal; }
.katex.math-wide { display: inline-block; max-width: 100%; overflow-x: auto; overflow-y: hidden; vertical-align: middle; padding: 0.15em 0; }
/* An empty list that will fill in as cards are written ("None yet"). */
.related-empty { margin: 0; font-size: 13.5px; color: var(--text-faint); }
/* The search box fills the top bar up to the tool buttons, whether or not Filters is shown. */
.search-wrap { max-width: none; }

/* Kind label after each TRY item on a pattern page: method or formula. */
.lead-try .try-kind { font-size: 0.72em; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin-left: 4px; }

/* Placeholder cards: a planned card shows a short notice instead of a formula box. */
.card-planned { margin: 10px 0 6px; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); }
.planned-note { margin: 14px 0; padding: 10px 14px; border: 1px dashed var(--border-light); border-radius: 10px; color: var(--text-dim); background: var(--bg-panel); }

/* ---------- Text size: Larger (about 1.18 times Large; 2026-10-10) ---------- */
html[data-text="larger"] .section-header h2 { font-size: 34px; }
html[data-text="larger"] .detail-head .card-name { font-size: 33px; }
html[data-text="larger"] .subsection > h3,
html[data-text="larger"] .wiki-letter > h3,
html[data-text="larger"] .list-section-title,
html[data-text="larger"] .lists-subhead { font-size: 22.5px; }
html[data-text="larger"] .detail-body h4,
html[data-text="larger"] .key-forms h4,
html[data-text="larger"] .related h4,
html[data-text="larger"] .connected h4,
html[data-text="larger"] .practice h4,
html[data-text="larger"] .prob-chain h4,
html[data-text="larger"] .prob-think h4,
html[data-text="larger"] .search-problems h4,
html[data-text="larger"] .interactive h4 { font-size: 19px; }
html[data-text="larger"] .card .card-name { font-size: 20.5px; }
html[data-text="larger"] .card-desc { font-size: 19px; }
html[data-text="larger"] .detail-summary { font-size: 20.5px; }
html[data-text="larger"] .detail-body p,
html[data-text="larger"] .detail-body li { font-size: 20px; }
html[data-text="larger"] .key-forms .detail-list li { font-size: 20px; }
html[data-text="larger"] .key-forms .kf-note { font-size: 17px; }
html[data-text="larger"] .wiki-list a { font-size: 18.5px; }
html[data-text="larger"] .formula-display { font-size: 1.24em; }
html[data-text="larger"] .diagram-cap { font-size: 16.5px; }
html[data-text="larger"] .detail-crumb { font-size: 16px; }
html[data-text="larger"] .card-crumb { font-size: 15.5px; }
html[data-text="larger"] .detail .detail-body p, html[data-text="larger"] .detail .detail-body li,
html[data-text="larger"] .detail .key-forms li, html[data-text="larger"] .detail .lead-text,
html[data-text="larger"] .detail .lead-signals li, html[data-text="larger"] .detail .pf-sentence,
html[data-text="larger"] .detail .profile-stats li, html[data-text="larger"] .detail .problem-q,
html[data-text="larger"] .detail .problem-sol, html[data-text="larger"] .detail .chain-strategy,
html[data-text="larger"] .detail .prob-note, html[data-text="larger"] .detail .detail-summary { font-size: 20px; }
html[data-text="larger"] .detail .detail-body p, html[data-text="larger"] .detail .detail-body li,
html[data-text="larger"] .detail .key-forms li, html[data-text="larger"] .detail .lead-text,
html[data-text="larger"] .detail .lead-signals li, html[data-text="larger"] .detail .lead-try li,
html[data-text="larger"] .detail .pf-row, html[data-text="larger"] .detail .problem-q,
html[data-text="larger"] .detail .problem-sol, html[data-text="larger"] .detail .chain-strategy,
html[data-text="larger"] .detail .prob-note, html[data-text="larger"] .detail .detail-summary { font-size: 19.5px; }
html[data-text="larger"] .card-lead p { font-size: 17.5px; }
html[data-text="larger"] .detail p.sec-note, html[data-text="larger"] .detail .detail-body p.sec-note { font-size: 17px; }
html[data-text="larger"] .detail-table { font-size: 18.5px; }
html[data-text="larger"] .try-block .try-sub, html[data-text="larger"] .detail-body .body-sub { font-size: 17px; }

/* ---------- Dark mode: one step below the body white (2026-10-11) ----------
   Headings, labels, table cells, and list and problem names all drew in --text, which in the
   dark theme reads as near-white and made the page glare. They now use a softer shade. Dark
   only: every rule is scoped to data-theme="dark", so light mode is untouched. */
:root[data-theme="dark"] {
  --text-head: #c3cce2;   /* headings, labels, names */
  --text-table: #aeb8d1;  /* table cells */
}
:root[data-theme="dark"] :is(
  .tp-imp,                                     /* the HIGH / MED / LOW half of the tag */
  .lead-title,                                 /* Overview */
  .nav-section-btn, .nav-practice-link,        /* sidebar */
  .card-name, .grp-title, .hub-name, .hs-ask, .hc-q, .sh-ask, .sh-intro a, .info-ask, .st-head,
  .detail h4, .detail-body h4, .prob-detail-section h4, .prob-chain h4, .prob-think h4,
  .interactive h4, .search-problems h4, .detail h3, .ix-title, h2, h3, .ts-name,   /* headers */
  .pf-row .pf-k, .profile-stats strong,        /* contest profile labels */
  .problem-q strong,                           /* Example 1. */
  .prob-row .prob-open, .rc-name,              /* practice problems */
  .prob-ref,                                   /* Problem 1 */
  .pl-item, .pl-item span, .ct-name, .daily-title   /* lists and contests */
) { color: var(--text-head); }
:root[data-theme="dark"] :is(.detail-table td, .special-table td, table:not(.detail-table) th) { color: var(--text-table); }
:root[data-theme="dark"] .detail-table td:first-child, :root[data-theme="dark"] .special-table td + td { color: var(--text-dim); }

/* Dark mode, second pass: Related chips, the random-problem
   buttons, and the math in formula boxes drop one step from white. Dark only. */
:root[data-theme="dark"] .related-item { color: var(--text-head); }
:root[data-theme="dark"] :is(.hp-btn, .rand-go, .rand-btns button[aria-checked="true"]) { color: #d3dae9; }
:root[data-theme="dark"] .formula-display, :root[data-theme="dark"] .formula-display .katex { color: #cdd5e8; }

/* Front page "How the four fit together" and "Jump to": the same softer shade. Dark only. */
:root[data-theme="dark"] :is(.hub-h, .hub-p, .hub-chain-note, .hub-why, .hub-why li, .hc-q, .hs-ask, .hj-col a, .hj-col h4, .hub-card a) { color: #b3bcd5; }
:root[data-theme="dark"] .hub :is(button, .hp-btn) { color: #d3dae9; }

/* Dark mode, popups, tabs and problem text (from screenshots of the Filters and Browse by Tag
   windows, the year tabs, and a problem statement). Dark only. */
:root[data-theme="dark"] :is(.filter-chip.active, .b-lvl-chip.active, .ct-years a[aria-current="page"], .adv-apply) { color: #d3dae9; }
:root[data-theme="dark"] :is(.adv-tag-chip.adv-tag-topic, .modal-head h3, .info-modal .modal-head h3) { color: var(--text-head); }
:root[data-theme="dark"] .adv-tag-chip.adv-tag-topic:hover { color: var(--accent); }
:root[data-theme="dark"] :is(.prob-statement, .prob-statement .katex) { color: #cdd5e8; }
.practice-placeholder { color: var(--text-faint); font-style: italic; margin: 4px 0 0; }
/* Front page (2026-10-16): each space's tile says what it holds; the main column carries
   Did you know, Newest cards, and Practice at a glance. */
.hs-what { font-size: 12.5px; color: var(--text-dim); line-height: 1.45; }
.hub-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dyk-fact { font-size: 15px; line-height: 1.65; color: var(--text); margin: 4px 0 10px; }
.dyk-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 13px; }
.dyk-foot a { color: var(--accent); text-decoration: none; }
.dyk-next { background: none; border: 0; cursor: pointer; padding: 0; font: inherit; }
.pg-list { display: flex; flex-direction: column; }
.pg-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--border); text-decoration: none; color: var(--text); font-size: 14px; }
.pg-row:first-child { border-top: 0; }
.pg-row:hover .pg-fam { color: var(--accent); }
.pg-fam { font-weight: 650; }
.pg-n { color: var(--text-dim); font-size: 13px; }
.pg-done { color: var(--text-faint); font-size: 12.5px; }
@media (max-width: 560px) { .pg-row { grid-template-columns: 1fr; gap: 2px; } }
/* Page tools (a setting): a Wikipedia-style column on the right of a card's page. */
.detail-with-tools { display: grid; grid-template-columns: minmax(0, 1fr) 236px; gap: 28px; align-items: stretch; }
.detail-with-tools > .detail { min-width: 0; }
/* The column stretches the whole height of the page and carries the divider, starting at the
   top bar (the negative margins cancel the page's own padding). As on Wikipedia, the panel starts
   a little down the column and, once the page scrolls it up to just under the top bar, stays
   there. It is never taller than the window (it scrolls inside itself instead), because a sticky
   panel taller than the window was what jumped up and down while scrolling (owner, 2026-10-17).
   The column has no bottom padding (the negative bottom margin alone carries the divider to the
   foot of the page), so the panel is not pushed up at the end of a page. */
.page-tools { border-left: 1px solid var(--border); padding-left: 16px; margin: -24px 0 -120px; padding-top: 24px; font-size: 13px; }
.pt-inner { position: sticky; top: calc(var(--topbar-h, 61px) + 20px); margin-top: 40px; max-height: calc(100vh - var(--topbar-h, 61px) - 40px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: 18px; }
html[data-density="compact"] .page-tools { margin: -16px 0 -90px; padding-top: 16px; }
html[data-density="spacious"] .page-tools { margin: -24px 0 -140px; padding-top: 24px; }
.pt-block { display: flex; flex-direction: column; gap: 4px; }
.pt-head { font-size: 11px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); padding-bottom: 5px; margin-bottom: 3px; border-bottom: 1px solid var(--border); }
.pt-block a, .pt-act { color: var(--accent); text-decoration: none; background: none; border: 0; padding: 2px 0; font: inherit; text-align: left; cursor: pointer; }
.pt-block a:hover, .pt-act:hover { text-decoration: underline; }
.pt-hide { color: var(--text-faint); }
.pt-n { color: var(--text-faint); font-size: 12px; margin-left: 4px; }
.pt-info { display: flex; justify-content: space-between; gap: 10px; color: var(--text-dim); }
.pt-info span { white-space: nowrap; }
.pt-info b { color: var(--text); font-weight: 600; text-align: right; }
.pt-info code { font-size: 11.5px; }
.pt-label { color: var(--text-dim); margin-top: 4px; }
.pt-seg { display: flex; flex-wrap: wrap; gap: 4px; }
.pt-seg button { font: inherit; font-size: 12px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-dim); cursor: pointer; }
.pt-seg button[aria-checked="true"] { border-color: var(--accent); color: var(--accent); font-weight: 650; }
@media (max-width: 1100px) {
  .detail-with-tools { grid-template-columns: 1fr; }
  .page-tools { margin: 0; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--border); }
  .pt-inner { position: static; margin-top: 0; max-height: none; overflow: visible; }
}
/* Printing a card (owner, 2026-10-17): no navigation, buttons or outside links, every example's
   solution and every practice problem shown; the screen keeps all of them. */
@media print {
  .page-tools, .sidebar, .topbar, .back-link, .back-row, .detail-actions,
  .sol-toggle, .show-more-btn, .ref-ext-link { display: none !important; }
  /* Nothing that floats over the page, or only works on screen, prints (owner, 2026-10-31): a
     toast such as "Link copied", the menus and dropdowns, the drawer and its backdrop, the
     phone's book navigation, and the card buttons. */
  .toast, #mq-toast, .space-ref-menu, .set-find-list, .nav-backdrop, .bk-mnav, .pv-nav, .lp-drawer,
  .star-btn, .addlist-btn, .copy-btn, .more-hint, .chain-toggle, .pl-new-btn, .toc-tool { display: none !important; }
  .layout, .detail-with-tools { display: block; }
  .content { max-width: none; margin: 0; }
  .problem-sol[hidden] { display: block !important; }
  .contest-refs .prob-extra { display: flex !important; }
}
/* Angle-chasing puzzle (js/geo-interactive.js) */
.ac-intro { font-size: 13.5px; color: var(--text-dim); margin: 0 0 10px; line-height: 1.55; }
.ac-w { fill: rgba(128, 128, 128, 0.10); stroke: var(--text-faint); stroke-width: 1; cursor: pointer; }
.ac-w:hover { fill: rgba(245, 196, 81, 0.28); }
.ac-w.ac-given { fill: rgba(91, 140, 255, 0.40); stroke: var(--accent); cursor: default; }
.ac-w.ac-sel { fill: rgba(245, 196, 81, 0.55); stroke: var(--gold); }
.ac-w.ac-ok { fill: rgba(76, 195, 138, 0.55); stroke: var(--level-mc); }
.ac-w.ac-miss { fill: rgba(226, 85, 95, 0.12); stroke: #e2555f; stroke-dasharray: 3 2; stroke-width: 1.6; }
.ac-w.ac-wrong { fill: rgba(226, 85, 95, 0.45); stroke: #e2555f; }
.ac-bar { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.ac-btn { font: inherit; font-size: 13px; padding: 5px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; }
.ac-btn:hover { border-color: var(--accent); color: var(--accent); }
.ac-score { font-size: 13px; color: var(--text-dim); }
.ac-reasons { margin: 6px 0; padding-left: 18px; }
.ac-key { display: block; font-size: 12px; color: var(--text-faint); }
.tool-intro { font-size: 13.5px; color: var(--text-dim); line-height: 1.55; margin: 2px 0 10px; }
.ac-levels { display: inline-flex; gap: 4px; margin-right: 8px; }
.ac-levels .ac-btn[aria-checked="true"] { border-color: var(--accent); color: var(--accent); font-weight: 650; }
.ac-w.ac-ring { fill: rgba(128, 128, 128, 0.16); }
.ac-bar.ac-top { margin: 0 0 10px; justify-content: center; }

/* ---------- The front page (owner, 2026-10-31, second version) ----------
   Dense, like a reference site's front page: the top bar carries the spaces and the search, then
   one strip of the spaces and two columns of sections divided by hairlines, not boxes. */
body.is-landing .content { padding: 0 0 50px; }
.home { max-width: 1180px; margin: 0 auto; padding: 22px 24px 0; }
.hm-intro { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.hm-name { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.hm-sub { margin: 0; font-size: 13.5px; color: var(--text-dim); }
.hm-spaces { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 14px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--bg-card); }
.hm-space { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 12px 14px 10px; text-decoration: none; color: var(--text); border-left: 1px solid var(--border); }
.hm-space:first-child { border-left: none; }
/* Each tile's coloured bar is a strip of its own inside the tile, so the grey divider runs the
   full height to the top and each colour stops exactly at it (a border-top met the divider on
   a slant, and a strip laid over the divider overran it; owner, 2026-10-31). */
.hm-space::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tint); }
.hm-space:hover { background: var(--tint-soft); }
.hm-space-name { font-size: 15px; font-weight: 780; color: var(--tint); }
.hm-space-ask { font-size: 12.5px; color: var(--text-dim); }
.hm-space-n { font-size: 11.5px; color: var(--text-faint); }
.hm-cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0 36px; margin-top: 6px; align-items: start; }
.hm-main, .hm-rail { min-width: 0; }
/* Every section, ours or a shared panel's, is a heading over a hairline: no box. */
.home .hm-sec, .home .hp-panel { margin: 0; padding: 14px 0 12px; background: none; border: none; border-radius: 0; border-top: 1px solid var(--border); box-shadow: none; }
.hm-main > :first-child, .hm-rail > :first-child { border-top: none; }
.home .hm-h, .home .hp-label { margin: 0 0 8px; font-size: 11.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.hm-h-row { display: flex; justify-content: space-between; align-items: baseline; }
.hm-more { font-size: 12.5px; font-weight: 650; color: var(--c-learn); text-decoration: none; }
.hm-more-practice { color: var(--c-practice); }
/* Problem of the day: the whole section opens the problem. On hover its background is filled in
   a rectangle, like a card row's (owner, 2026-10-31). The section reaches 12px past the column
   on each side so its text still lines up with the sections around it. */
.home .hp-daily { cursor: pointer; margin: 0 -12px; padding-left: 12px; padding-right: 12px; border-radius: 0; transition: background 0.12s; }
.home .hp-daily.hp-click:hover, .home .hp-daily.hp-click:focus-visible { background: var(--space-soft); }
.home .hp-daily:hover + * , .home .hp-daily:focus-visible + * { border-top-color: transparent; }
/* The statement is plain text in the section, with no shaded box around it (owner, 2026-10-31). */
.home .hp-daily .daily-st, .home .hp-daily .prob-statement { background: none; border: none; border-radius: 0; padding: 0; }
.home .hp-daily .daily-st .prob-credit { margin: 6px 0 0; }
.home .rc-row { padding-top: 6px; padding-bottom: 6px; }
.home .pg-row { padding-top: 6px; padding-bottom: 6px; }
.home .dyk { font-size: 14px; }
.home .katex-display { overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.home .hp-click:hover { background: none; }
.home .hp-click:hover .rc-name { color: var(--accent); }
.hm-books { display: flex; flex-direction: column; }
.hm-book { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 0; text-decoration: none; color: var(--text); }
.hm-book .bk-cover { width: 30px; padding: 3px; border-radius: 2px 5px 5px 2px; box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.22), 0 2px 5px rgba(0, 0, 0, 0.25); }
.hm-book .bk-series, .hm-book .bk-name { display: none; }
.hm-book .bk-motif { width: 100%; margin: 0; stroke-width: 5; }
.hm-book-t { font-size: 14px; font-weight: 650; }
.hm-book:hover .hm-book-t { color: var(--c-learn); }
.hm-book-n { font-size: 12px; color: var(--text-faint); white-space: nowrap; }
.home-cotd { margin: 4px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-dim); }
@media (max-width: 980px) {
  .hm-cols { grid-template-columns: minmax(0, 1fr); }
  .hm-rail > :first-child { border-top: 1px solid var(--border); }
}
@media (max-width: 760px) {
  /* The top bar already shows the five spaces on a phone. */
  .hm-spaces { display: none; }
  .home { padding: 16px 16px 0; }
  .hm-sub { display: none; }
  /* The phone's own order (owner, 2026-10-31): Continue, Did you know, Your library, Problem of
     the day, Card of the day, Newest cards, the contests, Textbooks. The two columns dissolve into
     one list; the wide layout keeps its own order. */
  .hm-cols { display: flex; flex-direction: column; }
  .hm-main, .hm-rail { display: contents; }
  .hm-continue { order: 1; } .home .dyk { order: 2; } .hm-library { order: 3; } .home .hp-daily { order: 4; }
  .hm-cotd { order: 5; } .hm-newest { order: 6; } .hm-glance { order: 7; } .hm-textbooks { order: 8; }
  .home .hm-cols > * > * { border-top: 1px solid var(--border); }
  .home .hm-cols .hm-continue { border-top: none; }
}

/* The book view's sidebar stays put while the page scrolls: the page's bottom space sits inside
   the grid (on the main column), so the end of the grid never pushes the sticky sidebar up. */
.content:has(> .lesson-page) { padding-bottom: 0; }
.lesson-page .lp-main { padding-bottom: 90px; }
.lesson-page .bk-body { min-height: calc(100vh - var(--topbar-h)); }

/* ---------- The book view, third version (owner, 2026-10-31) ----------
   The structure of an online textbook (a rail of chapter tabs, the chapter's and the page's
   title with arrows, problem blocks, previous and next at the bottom) drawn in the app's own
   language: rounded bordered cards, soft tints of the book's colour, pill buttons, hairlines. */
/* The book view starts right under the top bar in every density (the density rules set the
   content padding with more weight, which once left a gap above the rail and the bars). */
html .content:has(> .bk-view), html[data-density] .content:has(> .bk-view) { padding-top: 0; }
.bk-view, .bk-contents { --bk-ink: var(--bk-b); --bk-soft: color-mix(in srgb, var(--bk-a) 16%, transparent); }
.bk-view {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 18px; max-width: 1240px; margin: 0 auto; }
:root[data-theme="dark"] :is(.bk-view, .bk-contents) { --bk-ink: var(--bk-a); --bk-soft: color-mix(in srgb, var(--bk-a) 22%, transparent); }
/* The rail starts at the top like the header, and stays beside the page as it scrolls (the owner
   asked for the sidebar not to scroll away); it is a side rail, not a header. */
.bk-rail { position: sticky; top: var(--topbar-h); align-self: start; z-index: 30; display: flex; flex-direction: column; gap: 3px;
  padding: 5px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; background: var(--bg-panel); }
.bk-tab { position: relative; display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 8px;
  font-size: 14px; font-weight: 750; color: var(--text-dim); text-decoration: none; transition: background 0.12s, color 0.12s; }
.bk-tab:first-child { font-size: 12.5px; letter-spacing: 0.04em; margin-bottom: 3px; }
.bk-tab:hover { background: var(--bg-card); color: var(--text); }
.bk-tab.is-current, .bk-tab.is-current:hover { background: var(--bk-soft); color: var(--bk-ink); }
.bk-tip { display: none; position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 6px 11px;
  border: 1px solid var(--border-light); border-radius: 8px; background: var(--bg-card); color: var(--text); font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); z-index: 40; pointer-events: none; }
.bk-tip::before { content: ""; position: absolute; left: -6px; top: 50%; width: 10px; height: 10px; margin-top: -5px; transform: rotate(45deg);
  background: var(--bg-card); border-left: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); }
.bk-tab:hover .bk-tip, .bk-tab:focus-visible .bk-tip { display: block; }
/* A tab's card is centered on its tab and drawn in front of everything, the top bar included (owner, 2026-11-01). */
.bk-rail:hover, .bk-rail:focus-within, .bk-rail:has(.is-scrub) { z-index: 60; }
/* The scrubbing tabs are all one height and carry no markers (owner, 2026-10-31); the page list
   each tab holds is data for the scrubber, never shown. */
.bk-rail { touch-action: none; }
.bk-ticks { display: none; }
.bk-tip-ch { display: block; }
.bk-tip-p { display: block; margin-top: 2px; font-weight: 750; }
.bk-tip-p[hidden] { display: none; }
.bk-scrub.is-scrub .bk-tip-ch { font-size: 11.5px; font-weight: 650; color: var(--text-dim); }
.bk-scrub.is-scrub .bk-tip { display: block; }
.bk-body { min-width: 0; }
/* The header is attached to the top of the page, under the top bar, and scrolls away with the
   page: no sticky headers (owner, 2026-10-31). */
.bk-bars { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px;
  padding: 10px 12px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 12px 12px; background: var(--bg-card); }
.bk-bars-cover { grid-row: 1 / span 2; align-self: center; display: block; }
.bk-bars-cover .bk-cover { width: 40px; padding: 4px; border-radius: 2px 6px 6px 2px; box-shadow: inset 3px 0 0 rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.2); }
.bk-bars-cover .bk-series, .bk-bars-cover .bk-name { display: none; }
.bk-bars-cover .bk-motif { width: 100%; margin: 0; stroke-width: 5; }
.bk-bar { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--text); }
.bk-bar1 { padding-bottom: 6px; border-bottom: 1px solid var(--border); font-size: 16px; font-weight: 780; }
.bk-bar2 { padding-top: 6px; font-size: 14px; font-weight: 650; color: var(--text-dim); }
.bk-bar-k { flex: 0 0 auto; min-width: 74px; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--bk-ink); }
.bk-bar-t { position: relative; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: inherit; text-decoration: none; }
a.bk-bar-t:hover { color: var(--bk-ink); }
.bk-arrows { flex: 0 0 auto; display: flex; gap: 4px; }
.bk-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 26px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg-panel); color: var(--text); font-size: 18px; font-weight: 700; line-height: 1; text-decoration: none; transition: background 0.12s, color 0.12s, border-color 0.12s; }
.bk-arrow:hover { background: var(--bk-soft); border-color: var(--bk-ink); color: var(--bk-ink); }
.bk-arrow.is-off { opacity: 0.35; }
.bk-view .lp-grid { padding: 22px 4px 0; }
/* The chapter opener on an Introduction (owner, 2026-10-31, after a printed textbook's chapter
   page): the chapter's number large in the book's colour, the word Chapter and the title beside
   it, and a rule in the book's colour under both. */
.ch-open { display: flex; align-items: flex-end; gap: 16px; margin: 4px 0 22px; padding-bottom: 14px; border-bottom: 3px solid var(--bk-ink); }
.ch-open-n { flex: 0 0 auto; font-size: 72px; font-weight: 800; line-height: 0.8; color: var(--bk-ink); font-variant-numeric: tabular-nums; }
.ch-open-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ch-open-k { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bk-ink); }
.ch-open-k .lb-level { letter-spacing: 0; text-transform: none; }
.ch-open-t { font-size: 28px; font-weight: 800; line-height: 1.15; color: var(--text); }
@media (max-width: 600px) { .ch-open-n { font-size: 54px; } .ch-open-t { font-size: 22px; } }
/* The Summary's Problem Solving Strategies: one soft panel in the book's tint. */
.lp-strategies { margin: 22px 0 8px; padding: 14px 18px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--bk-soft, var(--bg-card)); }
.lp-strategies .lp-h3 { margin-top: 0; }
.lp-strategies ul { margin: 0 0 6px; padding-left: 20px; }
.lp-strategies li { margin: 0 0 8px; line-height: 1.6; }
.bk-view .learn-h { color: var(--text); }
.bk-view .learn-h .lb-code, .bk-view .lb-code, .bk-view .lc-n { color: var(--bk-ink); }
.bk-view .lc-check { border-left-color: var(--bk-ink); }
.bk-view .lb-lessons li > a .lb-title { color: var(--bk-ink); }
/* Problems keep their first look (owner, 2026-10-31): a rounded card, the number and reference,
   the statement, the box, and Show Solution under it. */
.lp-prob { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); }
.lp-prob-head { font-weight: 700; margin-bottom: 8px; }
.lp-prob-n { color: var(--bk-ink, var(--c-learn)); margin-right: 4px; }
.lp-prob-sep { color: var(--text-faint); margin-right: 4px; }
.lp-prob-head a { color: var(--text); text-decoration: none; }
.lp-prob-head a:hover { color: var(--bk-ink, var(--c-learn)); text-decoration: underline; }
.lp-prob .prob-st { margin: 0 0 10px; }
/* The statement is plain text in the card, not a box inside it (owner, 2026-10-31). */
.lp-prob .prob-statement { background: none; border: none; padding: 0; border-radius: 0; }
.lp-prob .prob-credit { margin: 6px 0 0; }
/* The work box and Show Solution side by side; the box starts two lines tall, grows with its
   text, and has no resize handle. */
.lp-work { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; }
.lp-work .lp-notes { flex: 1 1 auto; margin: 0; resize: none; overflow: hidden; min-height: 0; }
.lp-work .lp-show { flex: 0 0 auto; padding: 9px 16px; }
@media (max-width: 600px) { .lp-work { flex-direction: column; align-items: stretch; } .lp-work .lp-show { align-self: flex-end; } }
.lp-notes:focus { border-color: var(--bk-ink, var(--c-learn)); }
.lp-show { border: none; cursor: pointer; background: var(--c-learn); color: var(--bg); }
.lp-show:disabled { cursor: not-allowed; opacity: 0.45; filter: none; }
.lp-sol { margin: 12px 0 0; }
.bk-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin: 36px 0 0; padding-top: 14px; border-top: 1px solid var(--border); }
.bk-foot-link, .bk-foot-top { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; max-width: 100%; padding: 6px 10px; border-radius: 8px;
  font-size: 13px; font-weight: 650; color: var(--text-dim); text-decoration: none; }
.bk-foot-link:hover, .bk-foot-top:hover { background: var(--bg-panel); color: var(--text); }
.bk-foot-next { justify-self: end; }
.bk-foot-prev { justify-self: start; }
.bk-foot-a { flex: 0 0 auto; font-size: 15px; font-weight: 800; color: var(--bk-ink); }
.bk-foot-t { position: relative; display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 899px) {
  .content:has(> .bk-view) { padding-top: 0; padding-left: 10px; padding-right: 10px; }
  .bk-view { grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .bk-rail { padding: 3px; }
  .bk-tab { height: 32px; font-size: 13px; }
  .bk-tip { display: none; width: max-content; max-width: calc(100vw - 72px); white-space: normal; }
  .bk-tab:hover .bk-tip { display: none; }
  .bk-scrub.is-scrub .bk-tip { display: block; }
  .bk-bars { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; }
  .bk-bars-cover { display: none; }
  .bk-bar-k { display: none; }
  .bk-bar1 { font-size: 14.5px; }
  .bk-bar2 { font-size: 13px; }
  .bk-view .lp-grid { padding: 16px 0 0; }
  .bk-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bk-foot-top { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
/* Inside a problem block the statement is plain text, not a second box; the bars above already
   name the book and chapter, so the page's own eyebrow line is dropped. */
.bk-view .book-eyebrow { display: none; }

/* The book's own page (owner, 2026-10-31): no rail and no header, the cover and a few lines,
   then the table of contents: each chapter a heading over its lessons, divided by hairlines. */
.bk-contents { max-width: 980px; }
.bk-contents .bk-hero { margin-top: 8px; }
.bk-contents .learn-h { color: var(--text); }
.bk-contents .lb-code { color: var(--bk-ink); }
.bk-contents .lb-lessons li > a .lb-title { color: var(--bk-ink); }
/* The Start button and Show Solution take the book's own colour, solid and muted (mostly the
   cover's lighter shade, so the contrast with the page stays soft): no gradients on buttons
   (owner, 2026-10-31; the covers are the one exception). */
.learn-page.bk-contents a.bk-start, :root[data-theme] .learn-page.bk-contents a.bk-start,
:root[data-theme] .lesson-page.bk-view .lp-main .lp-show { background: color-mix(in srgb, var(--bk-a) 72%, var(--bk-b)); color: #fff; }
.bk-toc-h { margin: 30px 0 4px; font-size: 13px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint); }
.bk-toc { list-style: none; margin: 0; padding: 0; }
.bk-toc-ch { padding: 14px 0 6px; border-top: 1px solid var(--border); }
.bk-toc-ch:first-child { border-top: none; }
.bk-toc-chh { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; text-decoration: none; color: var(--text); }
.bk-toc-chh .lb-code { font-size: 17px; min-width: 2.2em; }
.bk-toc-t { font-size: 18px; font-weight: 750; }
.bk-toc-chh:hover .bk-toc-t { color: var(--bk-ink); text-decoration: underline; text-underline-offset: 3px; }
/* The first entry of the contents: a heading over Contents and How to Use This Book. */
.bk-toc-intro .bk-toc-chh:hover .bk-toc-t { color: inherit; text-decoration: none; }
.bk-toc-intro .lb-lessons { padding-left: calc(2.2em + 10px); }
.bk-toc-intro .lb-lesson.is-current .lb-title { font-weight: 650; }
.bk-howto { max-width: 760px; }
.bk-toc-meta { margin-left: auto; display: inline-flex; align-items: baseline; gap: 10px; }
.bk-toc .lb-lessons { margin: 6px 0 4px; padding-left: calc(2.2em + 10px); }
.bk-toc .lb-lessons li { padding: 3px 0; font-size: 14.5px; }
.bk-toc .lb-lessons li:not(:has(a)) .lb-code, .bk-toc .lb-lessons li:not(:has(a)) .lb-title { color: var(--text-faint); }
@media (max-width: 600px) {
  .bk-toc-chh { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 2px 8px; }
  .bk-toc-meta { grid-column: 2; margin-left: 0; }
  .bk-toc .lb-lessons { padding-left: 4px; }
}

/* A lesson is read, not skimmed: larger text in the main colour, and clear subheadings
   (owner, 2026-10-31: the write-up's 14px read as tiny). */
.lp-body p, .lp-body .detail-list li { font-size: 15.5px; line-height: 1.75; color: var(--text); }
.lp-body .body-sub { margin: 22px 0 8px; font-size: 19px; font-weight: 750; letter-spacing: -0.01em; color: var(--text); text-transform: none; }
.lp-body > .body-sub:first-child, .lp-body > :first-child .body-sub:first-child { margin-top: 4px; }
html[data-text="large"] .lp-body p { font-size: 17px; }
html[data-text="larger"] .lp-body p { font-size: 19px; }
@media (max-width: 600px) { .lp-body p, .lp-body .detail-list li { font-size: 15.5px; } }
.lesson-page .lc-q { font-size: 15.5px; }

/* A lesson's own problems, each in its own card like the contest problems, with "Jump to
   solution"; then the solutions, plain and divided by hairlines, each with "Back to problem"
   (owner, 2026-10-31). */
.lx-list { list-style: none; margin: 0; padding: 0; }
.lx { margin: 0 0 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); overflow: hidden; }
/* A hairline across the card under the label and "Jump to solution" (owner, 2026-10-31). */
.lx > .lx-head { margin: 0; padding: 9px 16px; border-bottom: 1px solid var(--border); align-items: center; }
.lx > .lx-q { padding: 12px 16px 14px; }
/* A solution: the problem's card again, then "Solution for Problem ...:" and the worked solution. */
.lx-sol { margin: 0 0 26px; }
.lx-sol .lx-again { margin-bottom: 10px; }
.lx-sol-h { margin: 0 0 4px; font-size: 15px; font-style: italic; color: var(--text-dim); }
.lx-sol > .lx-s { padding: 0 2px; }
.lx-q, .lx-s { font-size: 15.5px; line-height: 1.75; color: var(--text); }
.lx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.lx-n { font-size: 13px; font-weight: 800; letter-spacing: 0.04em; color: var(--bk-ink, var(--c-learn)); }
.lx-jump { flex: 0 0 auto; padding: 2px 8px; border: none; border-radius: 6px; background: none; font: inherit; font-size: 12.5px; font-weight: 650; color: var(--text-dim); cursor: pointer; }
.lx-jump:hover { background: var(--bg-panel); color: var(--bk-ink, var(--c-learn)); }

/* A lesson's card rows are plain links (owner, 2026-10-31), and its Related cards a short list. */
.lp-cards-row .card-link { font-size: 14.5px; }
.lp-cards-sep { margin: 0 2px; color: var(--text-faint); }
.lp-related { margin: 0; padding-left: 20px; }
.lp-related li { margin: 0 0 8px; font-size: 15.5px; line-height: 1.7; color: var(--text); }

/* ---------- The book view on a phone (owner, 2026-10-31) ----------
   No rail and no title bars: a line naming the book and the place in it, then a row with the
   previous page, a menu of every chapter and page, and the next page, which stays under the top
   bar. Less empty space at the end, and the bottom links centred. Wider screens keep the rail. */
.bk-mnav { display: none; }
@media (max-width: 760px) {
  .bk-view { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bk-view .bk-rail, .bk-view .bk-bars { display: none; }
  .bk-mnav { display: contents; }
  .bk-mnav-k { padding: 12px 2px 6px; font-size: 12px; color: var(--text-faint); }
  .bk-mnav-book { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--bk-ink); }
  .bk-mnav-row { position: sticky; top: var(--topbar-h); z-index: 30; display: flex; align-items: center; gap: 8px; margin: 0 -10px; padding: 8px 10px;
    background: var(--bg); border-bottom: 1px solid var(--border); }
  .bk-mnav-sel { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; color: var(--text); font: inherit; font-size: 14.5px; font-weight: 600; }
  .bk-mnav-step { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-card); color: var(--bk-ink); font-size: 22px; font-weight: 700; line-height: 1; text-decoration: none; }
  .bk-mnav-step.is-off { opacity: 0.35; color: var(--text-faint); }
  .lesson-page .bk-body { min-height: 0; }
  .lesson-page .lp-main { padding-bottom: 12px; }
  html .content:has(> .bk-view), html[data-density] .content:has(> .bk-view) { padding-bottom: 28px; }
  .bk-view .lp-grid { padding-top: 14px; }
  .bk-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 26px; }
  .bk-foot > span:empty { display: none; }
  .bk-foot-link { max-width: 46%; }
  .bk-foot-top { order: 3; flex-basis: 100%; justify-content: center; }
}
/* Cards say they open on touch screens, where nothing hovers (owner, 2026-10-31). */
@media (hover: none), (max-width: 760px) { .more-hint { opacity: 1; } }
/* The phone's menus (a contest's years, a book's pages): our own chevron, set in from the edge,
   on the card background (owner, 2026-10-31). */
.ct-yb-select, .bk-mnav-sel { -webkit-appearance: none; appearance: none; padding-right: 42px;
  background: var(--bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a93a6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 18px center; }
@media (max-width: 360px) {
  .topbar-inner { padding-left: 12px; padding-right: 12px; gap: 10px 6px; }
  .topbar-tools { gap: 4px; }
  .topbar-tools .tool-btn, .topbar-tools #settings-btn, .nav-toggle { width: 34px; height: 36px; }
  .search-wrap { min-width: 56px; }
  #search-input { padding-left: 10px; padding-right: 8px; }
}

/* A book's parts (Foundations, Core topics, Advanced topics, Toward the AIME): a plain heading in
   the contents, no box (owner, 2026-10-31: no boxes inside boxes). */
.bk-toc-part { list-style: none; margin: 22px 0 2px; }
.bk-toc-part h4 { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--bk-ink, var(--text-dim)); }