/* FluidDB web app — shared styles.
   Two concerns live here:
     1. APP SHELL + LIST PAGES (home, theory index)  — new.
     2. MODULE RENDERING (title/subtitle/bullets/figures/chips/extra) — carried over
        verbatim from the locked preview (preview/preview.html) so converted modules
        look exactly as Kilian approved.
   Palette and type scale are shared so every page reads as one calm learning platform. */

:root{
  --bg:#eef1f5; --frame:#0f172a; --card:#ffffff; --ink:#222a35; --muted:#6b7280; --line:#e6e9ef;
  --title-bg:#e7f0fe; --title-ink:#1b3c87;
  --sub-bg:#f0f1f4; --sub-ink:#222a35;
  --chip-bg:#f1f3f6; --chip-border:#2a3140; --chip-ink:#2a3140;
  --fig-bg:#fafbfd; --fig-line:#c7cedb; --arrow:#9aa4b2;
  --accent:#1b3c87; --row-hover:#f4f7fd;
}
*{box-sizing:border-box}
html,body{margin:0; min-height:100%}
body{
  background:var(--bg); color:var(--ink);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; align-items:center;
  padding:24px 14px 64px;
}

/* ---------- APP SHELL (all pages) ---------- */
.app{
  width:100%; max-width:720px; background:var(--card);
  border-radius:18px; overflow:hidden;
  box-shadow:0 14px 44px rgba(15,23,42,.16);
}
.topbar{
  position:sticky; top:0; z-index:5;
  background:var(--frame); color:#cfd6e4;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:11px 16px; font-size:13px; letter-spacing:.02em;
}
.topbar a{color:#cfd6e4; text-decoration:none}
.topbar .crumbs{display:flex; align-items:center; gap:7px; min-width:0; flex-wrap:wrap}
.topbar .crumbs a:hover{color:#fff; text-decoration:underline}
.topbar .crumbs .sep{opacity:.45}
.topbar .crumbs .here{color:#fff; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.topbar .brand{font-weight:700; letter-spacing:.06em; color:#9fb2d8; flex:none}
.view{padding:18px 16px 40px}

/* ---------- LIST PAGES (home + theory index) ---------- */
.page-title{font-size:20px; font-weight:750; color:var(--title-ink); margin:6px 2px 4px}
.page-sub{font-size:13.5px; color:var(--muted); margin:0 2px 18px}

/* generic tappable navigation row (home entries, subtopic items) */
.navlist{list-style:none; margin:0 0 8px; padding:0}
.navrow{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; margin:8px 0; border-radius:11px;
  background:#fff; border:1px solid var(--line); color:var(--ink);
  text-decoration:none; cursor:pointer; transition:background .12s,border-color .12s,transform .04s;
}
.navrow:hover{background:var(--row-hover); border-color:#cdd8ea}
.navrow:active{transform:translateY(1px)}
.navrow .label{flex:1 1 auto; min-width:0}
.navrow .label .name{font-weight:650; font-size:15.5px}
.navrow .label .meta{display:block; font-size:12.5px; color:var(--muted); margin-top:2px}
.navrow .arrow{flex:none; color:var(--arrow); font-size:17px; line-height:1}

/* big home entry */
.navrow.lead{padding:18px 16px}
.navrow.lead .label .name{font-size:17px}

/* theory index: a topic headline + its subtopics nested smaller */
.topic{margin:0 0 22px}
.topic > .topic-head{
  display:flex; align-items:baseline; gap:9px;
  font-size:16px; font-weight:750; color:var(--title-ink);
  background:var(--title-bg); padding:9px 13px; border-radius:10px; margin:0 0 8px;
}
.topic > .topic-head .num{
  font-size:12px; font-weight:700; color:#5e79b4;
  background:#fff; border:1px solid #c7d6f1; border-radius:6px; padding:1px 7px;
}
.topic .navlist{margin-left:6px}
.topic .navrow{padding:10px 13px; margin:6px 0}
.topic .navrow .label .name{font-size:14.5px; font-weight:600}

.empty{font-size:13.5px; color:var(--muted); padding:24px 6px; text-align:center}

/* ============================================================
   MODULE RENDERING — carried over verbatim from preview.html
   (the visual baseline Kilian locked). Scoped under .md.
   ============================================================ */
.md{font-size:15px; color:#2b3340}

/* TITLE — light-blue banner, biggest, with a copy button */
.md h1{
  position:relative; font-size:21px; font-weight:750; line-height:1.25; letter-spacing:-.01em;
  color:var(--title-ink); background:var(--title-bg);
  margin:2px 0 16px; padding:13px 72px 13px 15px; border-radius:12px;
}
.copy-btn{
  position:absolute; top:11px; right:11px; display:inline-flex; align-items:center; gap:.35em;
  font:600 11.5px/1 inherit; color:var(--title-ink);
  background:rgba(255,255,255,.65); border:1.5px solid #bcd0f2; border-radius:6px;
  padding:5px 8px; cursor:pointer;
}
.copy-btn:hover{background:#fff}
.copy-btn .ico{font-size:13px}
.copy-btn.done{background:#dcfce7; border-color:#86efac; color:#166534}

/* SUBTITLE — light-grey block, clearly smaller, no description */
.md h2{
  font-size:14.5px; font-weight:700; letter-spacing:.01em;
  color:var(--sub-ink); background:var(--sub-bg);
  margin:1.7em 0 .7em; padding:6px 10px; border-radius:7px;
}

/* SUBPOINT headline (bold lead word + description) */
.md p{margin:.55em 0 .3em}
.md p strong{color:#10182a; font-weight:700}
.md p + ul{margin-top:.15em}

/* DETAIL bullets — arrow markers, one fact each, smaller */
.md ul{list-style:none; margin:.2em 0 .95em; padding-left:1.5em}
.md li{position:relative; padding-left:1.35em; margin:.26em 0; font-size:14px; color:#3a4351}
.md li::before{content:"\21B3"; position:absolute; left:0; top:-.03em; color:var(--arrow); font-size:13.5px}

/* FIGURE — always precedes its description. Dashed placeholder until a screenshot is bound;
   solid card with the image once web/assets/figures/<id>.png exists (figures_bind.py). */
.figure{display:block; margin:.7em 0 .9em; padding:13px 14px 11px; border-radius:11px; background:var(--fig-bg); border:1.5px dashed var(--fig-line)}
.figure .badge{display:inline-block; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:#8a93a3; margin-bottom:5px}
.figure .cap{display:block; font-size:13px; color:#4b5563; line-height:1.45}
.figure.has-img{border-style:solid; border-color:var(--fig-line); text-align:center}
.figure.has-img .figure-img{display:block; max-width:100%; height:auto; margin:0 auto 8px; border-radius:8px; background:#fff; cursor:zoom-in}
.figure.has-img .cap{text-align:left}
.figure.has-img .badge{margin-bottom:0; margin-right:6px}

/* click-to-zoom lightbox */
.fdb-lightbox{position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(15,18,24,.82); cursor:zoom-out}
.fdb-lightbox[hidden]{display:none}
.fdb-lightbox figure{margin:0; max-width:min(1100px,95vw); max-height:92vh; display:flex; flex-direction:column; align-items:center; gap:10px}
.fdb-lightbox img{max-width:100%; max-height:84vh; object-fit:contain; border-radius:10px; background:#fff}
.fdb-lightbox figcaption{color:#e5e7eb; font-size:13px; line-height:1.45; text-align:center; max-width:760px}

/* per-section reference bar — only the covered slide button(s), right-aligned */
.refbar{display:flex; justify-content:flex-end; align-items:flex-start; gap:12px; margin:14px 0 2px}
.refs-right{display:flex; flex-direction:column; align-items:flex-end; gap:6px}
.chip{
  display:inline-flex; align-items:center; gap:.45em; font-size:12px; font-weight:600; line-height:1;
  text-decoration:none; padding:6px 11px; border-radius:7px;
  background:var(--chip-bg); border:1.5px solid var(--chip-border); color:var(--chip-ink);
  cursor:pointer; transition:background .12s; white-space:nowrap;
}
.chip:hover{background:#e6e9ef}
.chip .ico{font-size:11px; opacity:.7}
.chip-more.open{background:#e7eefb; border-color:#3a4150}
.chip-viz{background:#1e3a8a; border-color:#1e3a8a; color:#fff}
.chip-viz:hover{background:#15306f}
.chip-viz .ico{opacity:.85}

/* End-of-module call to action: jump to the exercises filtered by this subtopic. */
.do-exercises{display:flex; justify-content:flex-end; margin:22px 0 4px}
.do-ex-btn{text-decoration:none}

/* SLIDE VIEWER (slides.html) — renders only the cited pages of a deck with pdf.js. */
.back-link{color:inherit; text-decoration:none}
.back-link:hover{text-decoration:underline}
.slide-pages{display:flex; flex-direction:column; gap:20px; align-items:center; margin-top:10px}
.slide-page{display:flex; flex-direction:column; gap:6px; align-items:center; width:100%}
.slide-page canvas{max-width:100%; height:auto; background:#fff; border-radius:5px; box-shadow:0 1px 8px rgba(20,30,60,.18)}
.slide-page-cap{font-size:12px; color:#5b6573}
.slide-status{color:#5b6573; font-size:14px; margin:14px 0}
.do-ex-btn,.aux-btn{text-decoration:none}

/* EXTRA MATERIAL — rendered like a subtitle; rows of "button -> description" */
.extra-list{list-style:none; margin:.3em 0 .4em; padding-left:0}
.extra-list li{display:flex; align-items:center; gap:.55em; flex-wrap:wrap; margin:.5em 0; padding-left:0; font-size:13px; color:#5b6573}
.extra-list li::before{content:none}
.extra-list li .chip{flex:none}

/* longer-explanation panel (toggled by its chip) */
.longer{margin:2px 0 10px; padding:11px 13px; background:#f7f9fc; border:1px solid var(--line); border-left:3px solid #9db6e6; border-radius:9px; font-size:13.5px; color:#39424f}
.longer h3{font-size:13.5px; margin:.1em 0 .5em; color:#1b3c87}
.longer p{margin:.4em 0}

.katex-display{margin:.6em 0; overflow-x:auto; overflow-y:hidden}

/* ORDERED lists (exercise solutions only — theory uses none). Normal decimal markers,
   NOT the bullet ↳ arrows, and no redundant indentation. */
.md ol{list-style:decimal; margin:.4em 0 .95em; padding-left:1.7em}
.md ol li{padding-left:.3em; margin:.3em 0; font-size:14px; color:#3a4351}
.md ol li::before{content:none}

/* TABLES (exercise dimension matrices etc. — theory uses none). Real cell spacing. */
.md table{border-collapse:collapse; margin:.8em 0 1em; font-size:13.5px; display:block; overflow-x:auto}
.md th,.md td{border:1px solid var(--line); padding:5px 12px; text-align:center; white-space:nowrap}
.md thead th{background:var(--sub-bg); font-weight:700; color:var(--sub-ink)}
.md tbody tr:nth-child(even){background:#fafbfd}

/* desktop: a touch more breathing room */
@media (min-width:560px){
  .view{padding:24px 26px 48px}
}

/* ============================================================
   EXERCISES — list filters, the MC card, and the print view.
   Reuses the shared tokens, chip and figure styles above.
   ============================================================ */

/* ---- heading row with the Filters toggle, and the collapsible panel ---- */
.page-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:6px 2px 4px}
.page-head .page-title{margin:0}
.mini-btn.active{background:var(--title-bg); border-color:#9db6e6; color:var(--title-ink)}

/* ---- filter panel (exercises.html) — shown when the toggle is open ---- */
.filters{
  margin:2px 0 14px; padding:14px 15px;
  background:#fafbfd; border:1px solid var(--line); border-radius:12px;
}
.filters[hidden]{display:none}
.filter-foot{display:flex; justify-content:flex-end; margin-top:4px}
.filter-group{margin:0 0 12px}
.filter-h{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:0 2px 7px}
.fchips{display:flex; flex-wrap:wrap; gap:7px}
.fchip{
  font:600 12px/1 inherit; color:var(--chip-ink);
  background:var(--chip-bg); border:1.5px solid var(--line); border-radius:999px;
  padding:6px 12px; cursor:pointer; transition:background .12s,border-color .12s;
}
.fchip:hover{background:#e6e9ef}
.fchip.on{background:var(--title-bg); border-color:#9db6e6; color:var(--title-ink)}
/* exclusion chips read as "removed" when active */
#excl-chips .fchip.on{background:#fbe9e9; border-color:#e0a3a3; color:#9a2a2a; text-decoration:line-through}
.topic-filter{margin:0 0 10px}
.topic-filter-h{font-size:12.5px; font-weight:700; color:var(--title-ink); margin:0 2px 6px}

.results-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  border-top:1px solid var(--line); padding:11px 2px 6px; margin:4px 0 6px;
}
.result-count{font-size:13px; font-weight:650; color:var(--ink)}
.results-actions{display:flex; gap:8px}
.mini-btn{
  font:600 12.5px/1 inherit; color:var(--chip-ink); text-decoration:none;
  background:#fff; border:1.5px solid var(--chip-border); border-radius:8px;
  padding:8px 13px; cursor:pointer; transition:background .12s;
}
.mini-btn:hover{background:#eef1f5}
.mini-btn.primary{background:var(--title-ink); border-color:var(--title-ink); color:#fff}
.mini-btn.primary:hover{background:#15326f}

/* ---- the multiple-choice card (exercise.html) ---- */
.ex-card{margin:2px 0 0}
.ex-context{
  background:var(--fig-bg); border:1px solid var(--line); border-radius:11px;
  padding:13px 15px; margin:0 0 16px; font-size:14.5px; color:#39424f;
}
.ex-context > p:first-child{margin-top:0}
.ex-context > p:last-child{margin-bottom:0}
.ex-img{display:block; max-width:100%; height:auto; margin:8px auto; border-radius:8px; background:#fff; cursor:zoom-in}
.ex-note{
  background:#fbf7ec; border:1px solid #ecdfc0; border-left:3px solid #d9b15a; border-radius:9px;
  padding:9px 12px; margin:0 0 14px; font-size:13.5px; color:#5b5132;
}
.ex-note p{margin:.2em 0}
.ex-question{font-size:15.5px; color:#222a35; margin:0 0 14px; font-weight:550}
.ex-question p{margin:.2em 0}

.ex-options{display:flex; flex-direction:column; gap:9px; margin:0 0 4px}
.ex-opt{
  display:block; width:100%; text-align:left; font:inherit; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:10px;
  padding:11px 14px; cursor:pointer; transition:background .12s,border-color .12s;
}
.ex-opt:hover{background:var(--row-hover); border-color:#cdd8ea}
.ex-opt p{margin:0}
.ex-options.answered .ex-opt{cursor:default}
.ex-options.answered .ex-opt:hover{background:#fff; border-color:var(--line)}
.ex-opt.correct{background:#dcfce7; border-color:#86efac; color:#166534}
.ex-opt.correct:hover{background:#dcfce7; border-color:#86efac}
.ex-opt.wrong{background:#fee2e2; border-color:#fca5a5; color:#991b1b}
.ex-opt.wrong:hover{background:#fee2e2; border-color:#fca5a5}

/* image-valued options (e.g. pick-the-streamline-illustration): show as a thumbnail grid */
.ex-options-grid{flex-direction:row; flex-wrap:wrap; gap:10px}
.ex-options-grid .ex-opt{width:auto; flex:1 1 140px; max-width:240px; text-align:center; padding:8px}
.ex-opt-img img.ex-img{display:block; margin:0 auto; max-width:100%; max-height:150px; background:#fff}

.ex-hint-btn{
  display:inline-flex; align-items:center; gap:.4em; margin:14px 0 0;
  font:600 12.5px/1 inherit; color:var(--chip-ink);
  background:var(--chip-bg); border:1.5px solid var(--chip-border); border-radius:8px;
  padding:8px 12px; cursor:pointer;
}
.ex-hint-btn:hover{background:#e6e9ef}
.ex-hint-btn.open{background:#e7eefb; border-color:#3a4150}
.ex-hint{
  margin:10px 0 0; padding:11px 13px; background:#f7f9fc;
  border:1px solid var(--line); border-left:3px solid #9db6e6; border-radius:9px;
  font-size:13.5px; color:#39424f;
}

.ex-solution{
  margin:18px 0 0; padding:14px 16px; background:#f7f9fc;
  border:1px solid var(--line); border-radius:11px; font-size:14px; color:#39424f;
}
.ex-solution-head{
  font-size:11px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#5e79b4; margin:0 0 8px;
}

/* ============================================================
   PRINT VIEW (exercises_print.html) — screen preview + @media print.
   ============================================================ */
.print-body{display:block; align-items:initial; background:#e8ebf0; padding:0}
.print-toolbar{
  position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px;
  background:var(--frame); color:#cfd6e4; padding:10px 16px; font-size:13px;
}
.print-toolbar #print-info{flex:1 1 auto; color:#9fb2d8}
.print-doc{
  max-width:820px; margin:22px auto; background:#fff; color:#222a35;
  border-radius:6px; box-shadow:0 10px 30px rgba(15,23,42,.14); padding:34px 40px 48px;
}
.print-h1{font-size:20px; font-weight:750; color:var(--title-ink); margin:0 0 18px}
.print-problem, .print-solution{margin:0 0 22px}
.print-problem .ex-context{margin-bottom:12px}
.print-q-head{font-size:13.5px; font-weight:700; color:var(--title-ink); margin:14px 0 6px}
.print-question{font-size:14.5px; margin:0 0 8px}
.print-question p{margin:.2em 0}
.print-options{list-style:none; margin:6px 0 0; padding:0}
.print-options li{display:flex; gap:.6em; align-items:baseline; margin:5px 0; padding-left:0}
.print-options li::before{content:none}
.opt-letter{flex:none; font-weight:700; color:#5e79b4; min-width:1.3em}
.opt-val p{margin:0}
.print-qref{font-size:13px; color:#5b6573; margin:0 0 6px}
.print-qref p{margin:.1em 0}
.print-answer{font-size:14px; margin:0 0 8px}
.print-soltext{font-size:13.5px; color:#39424f}
.print-blank{min-height:120px}

/* on-screen the blank separator is just a labelled gap */
.print-blank{
  display:flex; align-items:center; justify-content:center; color:#9aa4b2;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  border-top:1px dashed #c7cedb; border-bottom:1px dashed #c7cedb; margin:8px 0;
}
.print-blank::after{content:"blank page"}

@media print{
  @page{margin:16mm}
  body.print-body{background:#fff}
  .print-toolbar{display:none}
  .print-doc{max-width:none; margin:0; padding:0; box-shadow:none; border-radius:0}
  .print-blank{break-before:page; break-after:page; border:none; min-height:0}
  .print-blank::after{content:""}
  .print-problem{break-inside:avoid}
  .print-q-head{break-after:avoid}
  .katex-display{overflow:visible}
}

/* ============================================================
   CONTENT — expandable sections of downloadable files / links.
   ============================================================ */
.content-sec{
  border:1px solid var(--line); border-radius:12px; background:var(--card);
  margin:10px 0; overflow:hidden;
}
.content-sec.open{border-color:#cdd8ea}
.content-head{
  width:100%; display:flex; align-items:center; gap:12px; cursor:pointer;
  padding:15px 16px; background:none; border:0; text-align:left; font:inherit; color:inherit;
}
.content-head:hover{background:var(--row-hover)}
.content-tt{flex:1 1 auto; min-width:0; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.content-title{font-weight:650; font-size:15.5px}
.content-meta{font-size:12.5px; color:var(--muted)}
.content-chev{flex:none; color:var(--arrow); font-size:14px; transition:transform .15s ease}
.content-sec.open .content-chev{transform:rotate(180deg)}
.content-body{padding:4px 16px 16px}
.content-note{margin:2px 0 10px; font-size:13px; color:var(--muted)}
.content-empty{margin:4px 0; font-size:13px; color:var(--muted)}
.content-empty code{background:var(--chip-bg); padding:1px 5px; border-radius:5px; font-size:12px}
.content-actions{margin:0 0 8px; display:flex; align-items:center; gap:10px}
.content-actions .aux-btn{margin-left:auto; text-decoration:none}
.content-sub{font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--muted); margin:12px 2px 6px}
.content-list{display:flex; flex-direction:column; gap:4px}
.content-row{
  display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit;
  padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:var(--fig-bg);
}
.content-row:hover{background:var(--row-hover); border-color:#cdd8ea}
.content-row:active{transform:translateY(1px)}
.content-name{flex:1 1 auto; min-width:0; font-size:14px; font-weight:560}
.content-go{flex:none; color:var(--accent); font-size:15px; line-height:1}