/* =====================================================================
   Finals: the examiner's topics on the left, the topic in the middle.
   The topic uses Theory's own card (.th-topic, .th-body, chains, tables),
   so an answer here reads like the notes.
   ===================================================================== */
#view-finals{--th-rail:292px; display:grid; grid-template-columns:var(--th-rail) minmax(0,1fr)}

/* ---------------- locked: only the password card ---------------- */
#view-finals.locked{grid-template-columns:minmax(0,1fr)}
#view-finals.locked .th-rail,#view-finals.locked .th-mbar{display:none}
.fn-lock{min-height:100%; display:grid; place-items:center; padding:40px 20px}
.fn-lock-card{
  width:min(440px,100%); display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:28px 28px 22px; box-shadow:var(--shadow);
}
.fn-lock-card > svg{width:34px; height:34px; fill:none; stroke:var(--accent); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-bottom:4px}
.fn-lock-card h1{font-family:var(--font-display); font-weight:760; font-size:25px; line-height:1.15; letter-spacing:-.03em; margin:0}
.fn-lock-p{margin:0; font-size:14px; line-height:1.55; color:var(--ink-2)}
.fn-lock-row{display:flex; gap:8px; width:100%; margin-top:8px}
.fn-lock-row .search{flex:1; height:38px}
.fn-lock-row .primary{padding:0 18px}
.fn-lock-row :disabled{opacity:.6}
.fn-lock-msg{margin:0; min-height:1.5em; font-size:12.5px; color:var(--danger)}

/* ---------------- rail ---------------- */
.fn-ex{display:flex; gap:3px; padding:3px; background:var(--surface-2); border:1px solid var(--line-2); border-radius:10px}
.fn-ex a{flex:1; text-align:center; padding:6px 8px; border-radius:7px; font-size:12.5px; font-weight:600; color:var(--muted); text-decoration:none; white-space:nowrap}
.fn-ex a:hover{color:var(--ink)}
.fn-ex a[aria-selected="true"]{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-sm)}
.toc-i.fn-i{grid-template-columns:34px minmax(0,1fr) 13px}
.fn-star{font-style:normal; font-size:11px; line-height:1; color:var(--accent)}
.fn-i.fn-kw{margin-top:10px; border-top:1px solid var(--line-2); border-radius:0 0 8px 8px; padding-top:9px}
.fn-i.fn-kw .n{font-size:9.5px; letter-spacing:.04em}

/* ---------------- an examiner's overview ---------------- */
.fn-hero{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr); gap:40px; align-items:start;
  padding-bottom:34px; margin-bottom:30px; border-bottom:1px solid var(--line);
}
.fn-hero h1{font-family:var(--font-display); font-weight:780; font-size:clamp(32px,3.6vw,48px); line-height:1.05; letter-spacing:-.04em; margin:12px 0 0; text-wrap:balance}
.fn-hero h1 em{font-style:normal; font-weight:250; color:var(--accent)}
.fn-pick{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; margin-top:26px}
.fn-pick a{
  display:flex; flex-direction:column; gap:3px; padding:14px 16px; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); color:var(--ink); text-decoration:none; transition:border-color .15s, box-shadow .15s;
}
.fn-pick a:hover{border-color:var(--accent-line); box-shadow:var(--shadow)}
.fn-pick a[aria-current="true"]{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.fn-pick .pn{font-family:var(--font-display); font-weight:720; font-size:18px; letter-spacing:-.02em}
.fn-pick .pc{font-family:var(--font-mono); font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.fn-intro{background:var(--surface); border:1px solid var(--line); border-radius:18px; padding:20px 22px 8px; box-shadow:var(--shadow)}
.fn-intro h2{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 10px}
.fn-intro p{margin:0 0 12px; font-size:14px; line-height:1.6; color:var(--ink-2)}
.fn-intro b{font-weight:600; color:var(--ink)}
.bc-list.fn-list a{grid-template-columns:34px minmax(0,1fr) 13px}
.fn-block{margin-top:38px; padding-top:0; scroll-margin-top:20px}
.fn-block > h2{font-family:var(--font-display); font-weight:750; font-size:21px; letter-spacing:-.028em; margin:0 0 14px}
.fn-block.flash > h2{animation:fn-flash 1.4s ease-out}
@keyframes fn-flash{0%,40%{color:var(--accent)}}
.fn-block.th-body p,.fn-block.th-body ol,.fn-block.th-body ul{max-width:none}

/* ---------------- a topic ---------------- */
.fn-num{font-size:60px; letter-spacing:-.04em; padding-top:6px}
.fn-her{color:var(--accent); font-weight:600}
/* the questions: what the topic is there to answer */
.fn-q{margin:26px 0 0; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-sm); overflow:hidden}
.fn-q h2{margin:0; padding:13px 18px 11px; border-bottom:1px solid var(--line-2); background:var(--surface-2); font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.fn-q ol{margin:0; padding:10px 18px 12px 40px; font-size:15.5px; line-height:1.55; font-weight:550; letter-spacing:-.008em}
.fn-q li{padding:5px 0 5px 4px}
.fn-q li::marker{color:var(--accent); font-weight:700; font-variant-numeric:tabular-nums}
.fn-q em{font-weight:400; color:var(--muted); font-size:.9em}
/* the Theory topics it draws on */
.fn-th{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0 4px}
.fn-th h2{margin:0 4px 0 0; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.fn-th a{
  display:inline-flex; align-items:baseline; gap:7px; padding:5px 11px 5px 9px; border:1px solid var(--line); border-radius:999px;
  background:var(--surface); color:var(--ink-2); text-decoration:none; font-size:12.5px; font-weight:500; line-height:1.35; transition:border-color .15s, color .15s;
}
.fn-th a:hover{border-color:color-mix(in srgb,var(--theory) 45%,var(--line)); color:var(--theory)}
.fn-th .tn{font-family:var(--font-mono); font-size:11px; font-weight:650; color:var(--theory); font-variant-numeric:tabular-nums}

.fn-body .ar{color:var(--c-mech); font-weight:650; padding:0 1px}
.fn-body a.fref,.fn-q a.fref,.fn-block a.fref{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.4px}
.th-body .death{--c:var(--danger)}
.fn-body .death h4{margin:18px 0 8px; font-size:14px; font-weight:650; letter-spacing:-.01em; color:var(--ink)}
.fn-body .death h3 + h4{margin-top:2px}
/* a line that opens what follows */
.th-body p.fn-lead{font-weight:650; margin:20px 0 8px; letter-spacing:-.01em}
.th-body .blk > h3 + p.fn-lead{margin-top:0}
/* the statement a question turns on, a link between organs, a word that differs from the textbooks */
.th-body p.fn-key,.th-body p.fn-corr,.th-body p.fn-note{
  max-width:none; margin:14px 0 16px; padding:12px 16px 12px 16px; border-radius:12px; border:1px solid var(--k-line); background:var(--k-bg);
}
.th-body p.fn-key{--k-bg:var(--hy-bg); --k-line:var(--hy-line); --k-ink:var(--hy-ink)}
.th-body p.fn-corr{--k-bg:color-mix(in srgb,var(--c-def) 7%,var(--surface)); --k-line:color-mix(in srgb,var(--c-def) 32%,var(--line)); --k-ink:var(--c-def)}
.th-body p.fn-note{--k-bg:var(--surface-2); --k-line:var(--line); --k-ink:var(--muted)}
.fn-tag{
  display:inline-block; margin-right:8px; padding:1px 8px; border-radius:6px; vertical-align:1px;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  color:var(--k-ink); background:color-mix(in srgb,var(--k-ink) 12%,transparent);
}
.th-body li.fn-keyi{background:var(--hy-bg); border-radius:8px; padding:3px 8px 3px 6px; margin-left:-4px}
.th-body li.fn-keyi::marker{color:var(--hy-line)}
.fn-body .tblwrap td:first-child{font-weight:550}

/* ---------------- "Asked at Finals", on a Theory card ---------------- */
.th-finals{margin:22px 0 0; border:1px solid color-mix(in srgb,var(--finals) 30%,var(--line)); border-radius:14px; background:color-mix(in srgb,var(--finals) 5%,var(--surface)); overflow:hidden}
.th-finals h2{margin:0; padding:10px 16px 8px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--finals)}
.th-finals a{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1px 12px; align-items:baseline; padding:9px 16px 10px;
  border-top:1px solid color-mix(in srgb,var(--finals) 16%,var(--line-2)); color:var(--ink); text-decoration:none; transition:background .15s;
}
.th-finals a:hover{background:color-mix(in srgb,var(--finals) 9%,var(--surface))}
.th-finals .fx{font-family:var(--font-mono); font-size:11px; font-weight:650; color:var(--finals); font-variant-numeric:tabular-nums; white-space:nowrap}
.th-finals .ft{font-size:13.5px; font-weight:600; line-height:1.35}
.th-finals .fq{grid-column:2; font-size:12.5px; line-height:1.45; color:var(--muted)}
.th-finals .fq em{font-style:normal; font-family:var(--font-mono); font-size:10.5px; color:var(--finals); margin-left:4px; white-space:nowrap}
#view-theory.th-cram .th-finals{display:none}

/* ---------------- narrower windows ---------------- */
@media (max-width:1360px){ #view-finals{--th-rail:262px} }
@media (max-width:1100px){ .fn-hero{grid-template-columns:1fr; gap:24px} }
/* the topic list becomes a drawer */
@media (max-width:880px){
  #view-finals{grid-template-columns:minmax(0,1fr)}
  #view-finals.rail-open .th-rail{transform:none}
  #view-finals.rail-open .th-scrim{display:block; position:absolute; inset:0; z-index:24; background:var(--scrim)}
  .fn-num{font-size:44px}
  .fn-q ol{font-size:15px}
}
/* tablets: the on-screen keyboard takes the lower half of the screen, so the
   password card sits in the upper one; 16px in the field keeps iPadOS from zooming in */
@media (pointer:coarse){
  .fn-lock{place-items:start center; padding-top:min(16vh,150px)}
  .fn-lock-row .search{height:46px; font-size:16px}
  .fn-lock-row .primary{padding:0 22px; font-size:15px}
}
@media (pointer:coarse) and (min-width:600px){
  .fn-ex a{padding:10px 8px; font-size:13.5px}
  .fn-th a{padding:8px 13px 8px 11px; font-size:13.5px}
}