/* exam.4ab.in — topic packs (app/topic.html).
   Loads after tokens.css + app.css. Every colour still comes from a token —
   nothing new is introduced here, this file only adds the components app.css
   does not already have: the picker, the header stat row, the year-trend
   table + inline SVG bars, the priority tiers, the intelligence table, the
   revision-sheet print view, and the flashcard flip UI.
*/

/* ---------------------------------------------------------------- shell */

#boot { padding: 60px 20px; text-align: center; color: var(--muted); }
#boot .bar2 { width: 220px; height: 4px; border-radius: 3px; background: var(--line);
  margin: 14px auto 0; overflow: hidden; }
#boot .bar2 i { display: block; height: 100%; width: 40%; background: var(--navy-2);
  animation: tp-sl 1.1s ease-in-out infinite; }
@keyframes tp-sl { 0% { transform: translateX(-100%); } 100% { transform: translateX(320%); } }
@media (prefers-reduced-motion: reduce) { #boot .bar2 i { animation: none; width: 100%; } }

.tp-section { margin: 0 0 26px; }
.tp-section > h2 {
  font-size: 19px; margin: 0 0 4px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.tp-section__note { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }
.tp-caveat {
  font-size: 12.5px; color: var(--body); margin: 8px 0 14px; padding: 9px 12px;
  border-radius: var(--r-sm); background: var(--chip-bg); border: 1px solid var(--chip-line);
}

/* ------------------------------------------------------------------ picker */

.tp-picker__group { margin-bottom: 22px; }
.tp-picker__group h3 { font-size: 15px; margin: 0 0 10px; }
.tp-picker input.inp { margin-bottom: 12px; }
.tp-picker__list { display: flex; flex-wrap: wrap; gap: 7px; }
.tp-pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 9px 14px; border-radius: 999px; text-decoration: none;
  background: var(--card); border: 1px solid var(--line); color: var(--ink);
  font-size: 13px; font: inherit; cursor: pointer;
}
.tp-pill:hover { background: var(--card-2); border-color: var(--chip-line); }
.tp-pill b { color: var(--muted); font-weight: 600; font-size: 11.5px; }
button.tp-pill { font-family: var(--sans); }
.tp-pill--drill { border-style: dashed; }
.tp-pill__go { color: var(--focus); font-size: 15px; margin-left: -2px; }
.tp-pill--scoped { opacity: .92; }
.tp-book { margin-bottom: 16px; padding: 14px; }
.tp-book h4 { font-size: 14px; margin: 0 0 8px; color: var(--navy); }

/* 2026-09-04: Subject -> Category -> Chapter -> Topic -> Subtopic cascade
   (taxonomy.js EX.taxonomy.wireCascade), replacing the flat 232-pill wall.
   Reuses the shared .fgroup/.flabel/.inp/.row2 classes from app.css, so
   this only adds what is specific to the topic picker's own layout. */
.tp-filter { padding: 18px 20px; margin-bottom: 20px; }
.tp-filter .fgroup:last-of-type { margin-bottom: 0; }
#tpResults .tp-picker__h { font-size: 15px; margin: 0 0 10px; }
.tp-picker__empty { color: var(--muted); font-size: 13px; }
.tp-picker__empty-card { padding: 18px 20px; }
.tp-picker__empty-card p { margin: 0; color: var(--muted); font-size: 13.5px; }

/* Collapsed-by-default chapter list — folds the old "one card per book"
   layout under the cascade instead of rendering every chapter up front. */
.tp-fold { margin-bottom: 20px; border: 1px solid var(--line); border-radius: var(--r-md, 12px);
  background: var(--card); padding: 4px 16px; }
.tp-fold[open] { padding-bottom: 14px; }
.tp-fold summary {
  cursor: pointer; list-style: none; padding: 12px 0; font-size: 14px; font-weight: 700;
  color: var(--navy); display: flex; align-items: center; gap: 8px; min-height: 44px;
}
.tp-fold summary::-webkit-details-marker { display: none; }
.tp-fold summary::before { content: '▸'; font-size: 11px; color: var(--muted); transition: transform .15s; }
.tp-fold[open] summary::before { transform: rotate(90deg); }
.tp-fold__n { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.tp-fold .tp-picker__list { margin-top: 4px; }

@media (max-width: 760px) {
  .tp-filter .row2 { grid-template-columns: minmax(0, 1fr); }
  #pkSubject, #pkCategory, #pkChapter, #pkTopic, #pkSubtopic, #pkSearch, #pkClear {
    min-height: 44px;
  }
  .tp-pill { min-height: 44px; padding: 10px 14px; }
}

/* --------------------------------------------------------------- header */

.tp-head { padding: 18px 20px; margin-bottom: 22px; }
.tp-head h1 { font-size: 25px; margin: 0 0 10px; }
.tp-head__stats {
  display: flex; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 4px;
}
.tp-stat {
  padding: 6px 12px; border-radius: var(--r-sm);
  background: var(--card-2); border: 1px solid var(--line-2);
  font-size: 12.5px; color: var(--body);
}
.tp-stat b { color: var(--ink); font-family: var(--serif); }

/* --------------------------------------------------------------- trend */

.tp-trend { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 900px) { .tp-trend { grid-template-columns: minmax(0, 1fr); } }

.tp-chart { padding: 14px; }
.tp-chart svg { width: 100%; height: auto; display: block; }
.tp-chart__bar { fill: var(--navy-2); }
.tp-chart__axis { stroke: var(--line); stroke-width: 1; }
.tp-chart__label { font: 10.5px var(--sans); fill: var(--muted); }
.tp-chart__val { font: 700 10.5px var(--sans); fill: var(--ink); }
.tp-chart__empty { padding: 20px; text-align: center; color: var(--muted); font-size: 13px; }

table.tp-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
table.tp-table th, table.tp-table td {
  padding: 7px 9px; text-align: left; border-bottom: 1px solid var(--line-2);
}
table.tp-table th { color: var(--muted); font-weight: 700; font-size: 11px;
  letter-spacing: .04em; text-transform: uppercase; }
table.tp-table td.num, table.tp-table th.num { text-align: right; font-family: var(--mono); }
.tp-table-wrap { overflow-x: auto; padding: 14px; }

.tp-dist { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 14px; }
.tp-dist > div { padding: 12px 14px; }
.tp-dist h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 0 0 8px; }
.tp-dist ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.tp-dist li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.tp-dist li b { color: var(--ink); font-family: var(--mono); }

/* ------------------------------------------------------------- priority */

.tp-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) { .tp-tiers { grid-template-columns: minmax(0, 1fr); } }
.tp-tier { padding: 14px; }
.tp-tier h3 {
  font-size: 12px; letter-spacing: .06em; text-transform: uppercase;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2);
}
.tp-tier--must h3   { color: var(--red); }
.tp-tier--should h3 { color: var(--amber); }
.tp-tier--good h3   { color: var(--green); }
.tp-tier__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 6px 0; font-size: 13.5px; border-bottom: 1px dashed var(--line-2);
}
.tp-tier__row:last-child { border-bottom: 0; }
.tp-tier__row span.n { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tp-tier__empty { color: var(--muted); font-size: 13px; }

/* -------------------------------------------------------- exam question bank */

.tp-exam-h { font-size: 17px; margin: 18px 0 8px; }
.tp-exam-h:first-child { margin-top: 0; }
.tp-year-h { font-size: 14px; color: var(--muted); margin: 12px 0 6px; padding-top: 8px;
  border-top: 1px solid var(--line-2); }
.tp-diff-h {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted); margin: 8px 0 6px;
}
.tp-cards { display: flex; flex-direction: column; gap: 0; }

/* ------------------------------------------------------ intelligence table */

.tp-table th[data-sort] { cursor: pointer; user-select: none; }
.tp-table th[data-sort]:hover { color: var(--ink); }
.tp-table th[data-sort] .tp-sort-i { font-size: 10px; margin-left: 3px; color: var(--focus); }
.tp-table code { font-family: var(--mono); font-size: 12px; }

/* --------------------------------------------------------------- revision */

.tp-rev-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 14px; margin-bottom: 14px; }
.tp-rev-bar label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.tp-rev-bar select.inp { width: auto; }
#revisionSheet { display: none; }

/* -------------------------------------------------------------- flashcards */

.tp-flash { padding: 18px; text-align: center; }
.tp-flash__pos { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.tp-flip {
  perspective: 1400px; max-width: 560px; margin: 0 auto; cursor: pointer;
}
.tp-flip__inner {
  position: relative; min-height: 260px; transition: transform .5s;
  transform-style: preserve-3d;
}
.tp-flip.is-flipped .tp-flip__inner { transform: rotateY(180deg); }
.tp-flip__face {
  position: absolute; inset: 0; backface-visibility: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card-2);
  padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: auto;
}
.tp-flip__face img { max-width: 100%; height: auto; background: var(--crop-bg); border-radius: var(--r-sm); }
.tp-flip__back { transform: rotateY(180deg); text-align: left; align-items: stretch; justify-content: flex-start; }
.tp-flip__back .ans__k { font: 700 15px var(--sans); color: var(--green); margin-bottom: 8px; }
.tp-flip__back .ans__e { font-size: 13.5px; color: var(--body); white-space: pre-wrap; }
.tp-flip__hint { font-size: 11.5px; color: var(--muted); margin-top: 10px; }
.tp-flash__nav { display: flex; justify-content: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* ---------------------------------------------------------------- paper cta */

.tp-cta { padding: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tp-cta p { margin: 0; flex: 1 1 260px; font-size: 13.5px; color: var(--body); }

/* -------------------------------------------------------------------- AI */

.tp-ai { padding: 16px; }
.tp-ai__head { font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--amber); margin: 0 0 4px; }
.tp-ai__body { font-size: 14px; color: var(--body); white-space: pre-wrap; margin-top: 10px; }
.tp-ai__cost { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.tp-ai__note { font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* ---------------------------------------------------- print: revision sheet
   Only #revisionSheet exists on paper. Everything else in the document is
   suppressed by name; the sheet itself never appears on screen (display:none
   above) except via window.print(), so this block is what actually shows it. */
@media print {
  :root,
  :root:not([data-theme="light"]),
  :root[data-theme="light"],
  :root[data-theme="dark"] {
    --bg: #fff; --card: #fff; --card-2: #fff; --crop-bg: #fff;
    --line: #000; --line-2: #999; --ink: #000; --body: #000; --muted: #333;
    --navy: #000; --navy-2: #000; --gold: #000; --green: #000; --red: #000; --amber: #000;
    --on-navy: #fff; --chip-bg: transparent; --chip-line: #000;
    --shadow-sm: none; --shadow-md: none;
  }
  html, body { background: #fff; color: #000; }
  body > *:not(#revisionSheet) { display: none !important; }
  #revisionSheet {
    display: block !important;
    font: 11pt/1.45 Georgia, "Times New Roman", Times, serif;
  }
  #revisionSheet .rv-head { border-bottom: 1.6pt solid #000; padding-bottom: 4mm; margin-bottom: 6mm; }
  #revisionSheet .rv-title { font-size: 19pt; font-weight: 700; margin: 0 0 2mm; }
  #revisionSheet .rv-sub { font-size: 10pt; font-style: italic; margin: 0; }
  #revisionSheet .rv-q {
    break-inside: avoid; page-break-inside: avoid;
    margin: 0 0 5mm; padding-bottom: 4mm; border-bottom: .4pt solid #bbb;
  }
  #revisionSheet .rv-q__n { font-weight: 700; font-size: 12pt; margin-bottom: 1.5mm; }
  #revisionSheet .rv-q img { display: block; max-width: 100%; height: auto; max-height: 200mm; }
  #revisionSheet .rv-key { break-before: page; page-break-before: always; }
  #revisionSheet .rv-key h2 { font-size: 15pt; border-bottom: 1.2pt solid #000; padding-bottom: 1.5mm; }
  #revisionSheet .rv-key ol { columns: 3; column-gap: 6mm; font-size: 10pt; padding-left: 16px; }
  #revisionSheet .rv-key li { break-inside: avoid; page-break-inside: avoid; padding: .8mm 0; }
  @page { size: A4; margin: 14mm 12mm 16mm; }
}

/* ===================================================================
   THE PICKER, REDESIGNED (owner 2026-09-13: "redesign this page structure")

   The cascade is strictly ordered — subject, then category, chapter, topic,
   subtopic — but the old layout gave all five dropdowns equal weight, so
   nothing on screen said that. They are numbered steps now, and the subject
   row is lifted out as buttons because the page used to open with nothing
   clickable on it at all.
   =================================================================== */
.tp-filter--v2 { padding: 18px 18px 16px; }
.tp-fhead__h { margin: 0 0 3px; font-size: 1.18rem; color: var(--ink, #1B2A5E); }
.tp-fhead__note { margin: 0 0 14px; font-size: .9rem; color: var(--body-c, #4a5163); max-width: 70ch; }

/* --- the subject jump row --- */
.tp-quick {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 12px; margin: 0 0 16px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(37,99,235,.05), rgba(201,168,76,.07));
  border: 1px solid rgba(27,42,94,.08);
}
.tp-quick__lab {
  font: 700 .7rem/1 Roboto, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-ink, #8A6D1F); margin-right: 2px;
}
.tp-quick__b {
  border: 1px solid var(--qc, #2563eb); background: #fff; color: var(--qc, #2563eb);
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  font: 600 .875rem/1 Roboto, sans-serif; min-height: 38px;
  transition: background .13s, color .13s, transform .13s;
}
.tp-quick__b:hover { background: var(--qc, #2563eb); color: #fff; transform: translateY(-1px); }
/* The chosen subject is filled in, so the row shows where you are. */
.tp-quick__b[aria-pressed="true"] { background: var(--qc, #2563eb); color: #fff; }
.tp-quick__b.q0 { --qc:#2563eb } .tp-quick__b.q1 { --qc:#177A39 }
.tp-quick__b.q2 { --qc:#8A6D1F } .tp-quick__b.q3 { --qc:#7c3aed }
.tp-quick__b.q4 { --qc:#0f766e } .tp-quick__b.q5 { --qc:#be123c }

/* --- the numbered steps --- */
.tp-steps { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.tp-step { position: relative; padding-left: 34px; }
.tp-step__n {
  position: absolute; left: 0; top: 26px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: #eef2fb; color: var(--ink, #1B2A5E);
  font: 700 .78rem/1 Roboto, sans-serif;
}
.tp-step .fgroup { margin-bottom: 0; }

/* --- filter + clear on one line --- */
.tp-frow { display: flex; gap: 10px; align-items: flex-end; margin-top: 14px; }
.tp-frow__search { flex: 1 1 auto; margin-bottom: 0; min-width: 0; }

@media (max-width: 760px) {
  .tp-filter--v2 { padding: 14px; }
  .tp-steps { grid-template-columns: 1fr; }
  .tp-frow { flex-wrap: wrap; }
  .tp-frow__search { flex: 1 1 100%; }
  .tp-frow .btn { flex: 1 1 100%; }
}