/* ===========================================================================
   Numerische Methoden — Kursbuch
   Tokens first, then layout, then components. Everything is driven by custom
   properties so the dark theme only restates colours.
   =========================================================================== */

@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../../vendor/fonts/lora-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../../vendor/fonts/lora-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ------------------------------------------------------------------ tokens */
:root {
  --accent:       #0b6e8a;
  --accent-strong:#085a71;
  --accent-soft:  #e3f1f5;
  --accent-text:  #0a607a;
  --accent-ring:  rgba(11, 110, 138, .30);

  --good:      #1d7a4f;
  --good-bg:   #e7f5ed;
  --good-line: #acdcc2;
  --bad:       #b3261e;
  --bad-bg:    #fdeceb;
  --bad-line:  #f1bdb9;
  --warn:      #8f5b00;
  --warn-bg:   #fdf4e2;
  --warn-line: #ecd5a6;

  --c-def:   #2f6fb5;  --c-def-bg:   #edf4fc;
  --c-satz:  #5b4fc9;  --c-satz-bg:  #f1effc;
  --c-merke: #1d7a4f;  --c-merke-bg: #eaf6ef;
  --c-warn:  #a3540b;  --c-warn-bg:  #fdf2e6;
  --c-ex:    #0b6e8a;  --c-ex-bg:    #eaf4f7;
  --c-algo:  #6b5a1e;  --c-algo-bg:  #f7f3e6;
  --c-py:    #3b5a7a;  --c-py-bg:    #eef2f6;
  --c-note:  #5d6675;  --c-note-bg:  #f2f3f6;
  --c-q:     #9a3f7d;  --c-q-bg:     #faeef6;

  --bg:          #f6f5f2;
  --bg-raised:   #ffffff;
  --bg-sunken:   #eceae5;
  --bg-inset:    #faf9f7;
  --bg-code:     #f6f7f9;
  --line:        #e4e2dc;
  --line-strong: #cfccc4;
  --ink:         #1b1d22;
  --ink-soft:    #4e5462;
  --ink-faint:   #697080;   /* ≥ 4.5 : 1 on --bg and --bg-raised, for the small meta labels */
  --plot-grid:   #eceef2;

  --py-kw:   #8a2a8a; --py-str: #2f7a2f; --py-num: #b05a00; --py-com: #6b717d;
  --py-bi:   #1f5fa8; --py-call: #155a74; --py-fn: #8a4a00;

  --shadow-sm: 0 1px 2px rgba(20, 20, 30, .05);
  --shadow:    0 1px 3px rgba(20, 20, 30, .05), 0 8px 24px -10px rgba(20, 20, 30, .16);
  --shadow-lg: 0 18px 60px -12px rgba(20, 20, 30, .35);

  --r-xs: 4px; --r-sm: 7px; --r: 11px; --r-lg: 16px;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: 'Lora', Georgia, "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --t-xs: .76rem; --t-sm: .86rem;
  --t-base: clamp(.97rem, .93rem + .18vw, 1.04rem);
  --t-lg: clamp(1.08rem, 1.02rem + .28vw, 1.18rem);
  --t-xl: clamp(1.25rem, 1.14rem + .45vw, 1.45rem);
  --t-2xl: clamp(1.5rem, 1.32rem + .8vw, 1.95rem);
  --t-3xl: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);

  --topbar-h: 56px;
  --measure: 72ch;
}

html[data-theme="dark"] {
  --accent:       #4fb3d4;
  --accent-strong:#7ccbe5;
  --accent-soft:  #10303b;
  --accent-text:  #7ccbe5;
  --accent-ring:  rgba(79, 179, 212, .35);

  --good: #5fd39a; --good-bg: #0f2a1d; --good-line: #1f5a3d;
  --bad: #ff8f86;  --bad-bg: #331512;  --bad-line: #6e2a24;
  --warn: #f0b860; --warn-bg: #31240d; --warn-line: #6a4c1c;

  --c-def:   #7fb2ea;  --c-def-bg:   #142233;
  --c-satz:  #a99bff;  --c-satz-bg:  #1d1a36;
  --c-merke: #6fd4a0;  --c-merke-bg: #11271c;
  --c-warn:  #f0a95a;  --c-warn-bg:  #2e1f0f;
  --c-ex:    #63c1de;  --c-ex-bg:    #0f2731;
  --c-algo:  #d9c27a;  --c-algo-bg:  #29240f;
  --c-py:    #9cb8d6;  --c-py-bg:    #172230;
  --c-note:  #a6adbb;  --c-note-bg:  #1b1f27;
  --c-q:     #e58ac9;  --c-q-bg:     #2c1426;

  --bg:          #0f1115;
  --bg-raised:   #171a20;
  --bg-sunken:   #0b0c10;
  --bg-inset:    #1c2027;
  --bg-code:     #13161c;
  --line:        #272c35;
  --line-strong: #353b46;
  --ink:         #e7e9ee;
  --ink-soft:    #aab1bf;
  --ink-faint:   #858d9d;
  --plot-grid:   #232934;

  --py-kw: #d48ae0; --py-str: #8fd18f; --py-num: #f0a55a; --py-com: #858d9d;
  --py-bi: #7fb2ea; --py-call: #73c6dd; --py-fn: #f0c27a;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow:    0 2px 6px rgba(0, 0, 0, .4), 0 12px 28px -10px rgba(0, 0, 0, .6);
  --shadow-lg: 0 18px 60px -12px rgba(0, 0, 0, .75);
}

/* ------------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar-h) + 16px); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-base)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.25; font-weight: 650; letter-spacing: -.01em; }
p { margin: 0 0 .9em; }
a { color: var(--accent-text); text-decoration-thickness: 1px; text-underline-offset: 2px; }
code, kbd, samp, pre { font-family: var(--mono); }
code { font-size: .88em; }
:where(p, li, td, th, .mc-val, .callout-name, .option-text, .card-title, .sh-title) > code,
:where(h2, h3, h4) > code {
  background: var(--bg-code); border: 1px solid var(--line);
  border-radius: var(--r-xs); padding: .06em .32em; overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
kbd { font-size: .78em; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35em; background: var(--bg-raised); }
hr { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }
::selection { background: var(--accent-ring); }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--t-sm); }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--bg-raised); padding: .5rem .8rem; border-radius: var(--r-sm); }
.skip-link:focus { left: 8px; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 1rem;
  padding: 0 clamp(.75rem, 2vw, 1.5rem);
  background: color-mix(in srgb, var(--bg-raised) 92%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--ink); min-width: 0; }
.brand-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--accent); display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.brand-mark svg circle { fill: #fff; stroke: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.brand-text strong { font-family: var(--serif); font-size: 1.05rem; font-weight: 650; white-space: nowrap; }
.brand-sub { font-size: var(--t-xs); color: var(--ink-faint); white-space: nowrap; }
.tabs { display: flex; gap: .15rem; margin-left: auto; }
.tab {
  display: flex; align-items: center; gap: .4rem;
  padding: .42rem .75rem; border-radius: var(--r-sm);
  color: var(--ink-soft); text-decoration: none; font-weight: 550; font-size: var(--t-sm);
}
.tab:hover { background: var(--bg-sunken); color: var(--ink); }
.tab.is-active { background: var(--accent-soft); color: var(--accent-text); }
.tab-key { font-size: .7rem; color: var(--ink-faint); border: 1px solid var(--line); border-radius: 4px; padding: 0 .3rem; line-height: 1.35; }
.tab.is-active .tab-key { border-color: var(--accent-ring); color: var(--accent-text); }
.topbar-actions { display: flex; gap: .3rem; }
.icon-btn {
  display: flex; align-items: center; gap: .4rem; height: 34px; min-width: 34px; padding: 0 .5rem;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-raised); color: var(--ink-soft); cursor: pointer;
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.icon-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.kbd-hint { display: flex; gap: .15rem; }
.bottom-tabs { display: none; }

@media (max-width: 1080px) { .tab-key, .kbd-hint { display: none; } }
@media (max-width: 860px) {
  .tabs { display: none; }
  .topbar-actions { margin-left: auto; }
  .bottom-tabs {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--bg-raised); border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .btab { flex: 1; display: flex; flex-direction: column; align-items: center; padding: .4rem 0 .35rem; font-size: .7rem; color: var(--ink-faint); text-decoration: none; }
  .btab span { font-size: 1rem; line-height: 1.2; }
  .btab.is-active { color: var(--accent-text); }
  body { padding-bottom: 64px; }
  /* the caret of a code editor and the focus scroll into view above the tab bar, not under it */
  html { scroll-padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}

/* ------------------------------------------------------------------- views */
main { min-height: calc(100vh - var(--topbar-h)); }
.view { display: none; }
.view.is-active { display: block; }
#view-ueben, #view-labor, #view-methoden, #view-fortschritt { max-width: 980px; margin: 0 auto; padding: 1.5rem clamp(.9rem, 3vw, 1.6rem) 4rem; }
#view-methoden { max-width: 1200px; }

/* ---------------------------------------------------------------- learn */
.learn-layout {
  display: grid; grid-template-columns: 272px minmax(0, 1fr) 210px; gap: 0;
  max-width: 1420px; margin: 0 auto;
}
.learn-nav {
  position: sticky; top: var(--topbar-h); align-self: start;
  height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: 1.1rem .7rem 3rem 1rem; border-right: 1px solid var(--line);
  font-size: var(--t-sm);
}
.learn-main { padding: 1.8rem clamp(1rem, 4vw, 3.2rem) 5rem; min-width: 0; }
.learn-main .prose { max-width: var(--measure); margin: 0 auto; }
.learn-main .chapter-nav { max-width: var(--measure); margin: 2.5rem auto 0; }
.learn-toc {
  position: sticky; top: var(--topbar-h); align-self: start;
  max-height: calc(100vh - var(--topbar-h)); overflow-y: auto;
  padding: 1.6rem 1rem 2rem .4rem; font-size: var(--t-xs);
}
@media (max-width: 1240px) {
  .learn-layout { grid-template-columns: 256px minmax(0, 1fr); }
  .learn-toc { display: none; }
}
@media (max-width: 860px) {
  .learn-layout { grid-template-columns: minmax(0, 1fr); }
  .learn-nav { position: static; height: auto; max-height: none; border-right: 0; border-bottom: 1px solid var(--line); padding: .6rem .9rem; }
  .learn-nav .nav-group:not([open]) .nav-lessons { display: none; }
  .learn-main { padding-top: 1.2rem; }
}

.nav-home { display: block; padding: .35rem .5rem; margin-bottom: .4rem; border-radius: var(--r-sm); color: var(--ink-soft); text-decoration: none; font-weight: 600; }
.nav-home:hover, .nav-home.is-active { background: var(--bg-sunken); color: var(--ink); }
.nav-group { margin-bottom: .15rem; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }
.nav-chapter {
  display: flex; align-items: center; gap: .55rem; padding: .38rem .5rem; border-radius: var(--r-sm);
  cursor: pointer; color: var(--ink); font-weight: 600;
}
.nav-chapter:hover { background: var(--bg-sunken); }
.nav-title { flex: 1; min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.nav-count { font-size: .7rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.nav-num {
  display: inline-grid; place-items: center; width: 1.45rem; height: 1.45rem; flex: none;
  border-radius: 6px; font-size: .74rem; font-weight: 700; color: #fff; background: var(--c, var(--accent));
}
.nav-lessons { display: flex; flex-direction: column; margin: .1rem 0 .5rem 1.05rem; padding-left: .7rem; border-left: 1px solid var(--line); }
.nav-lesson {
  display: flex; gap: .35rem; padding: .26rem .45rem; border-radius: var(--r-xs);
  color: var(--ink-soft); text-decoration: none; line-height: 1.35;
}
.nav-lesson:hover { color: var(--ink); background: var(--bg-sunken); }
.nav-lesson.is-active { color: var(--accent-text); background: var(--accent-soft); font-weight: 600; }
.nav-intro { font-style: italic; }
.nav-check { width: .9rem; flex: none; color: var(--good); font-weight: 700; }
.nav-lesson.is-done { color: var(--ink-faint); }
/* phone: the whole list folded into one row (built by app.js below 860 px) */
.nav-fold > summary { list-style: none; }
.nav-fold > summary::-webkit-details-marker { display: none; }
.nav-fold-head { display: flex; align-items: center; gap: .55rem; padding: .4rem .5rem; border-radius: var(--r-sm); cursor: pointer; font-weight: 600; color: var(--ink-soft); }
.nav-fold-head::before { content: '▸'; color: var(--ink-faint); transition: transform .15s; }
.nav-fold[open] > .nav-fold-head { margin-bottom: .4rem; }
.nav-fold[open] > .nav-fold-head::before { transform: rotate(90deg); }
.nav-fold-head > span:first-child { flex: 1; }

.toc-head { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: .5rem; }
.toc-link { display: block; padding: .22rem .5rem; color: var(--ink-soft); text-decoration: none; border-left: 2px solid var(--line); line-height: 1.35; }
.toc-link:hover { color: var(--ink); }
.toc-link.is-active { color: var(--accent-text); border-left-color: var(--accent); }

/* ------------------------------------------------------------------ prose */
.prose { font-size: var(--t-base); }
.prose h1 { font-family: var(--serif); font-size: var(--t-3xl); font-weight: 650; margin: .2rem 0 .7rem; letter-spacing: -.015em; hyphens: auto; overflow-wrap: break-word; }
.prose h2 { font-family: var(--serif); font-size: var(--t-2xl); margin: 2.6rem 0 .8rem; padding-top: .3rem; }
.prose h3 { font-size: var(--t-lg); margin: 1.9rem 0 .6rem; }
.prose h4 { font-size: var(--t-base); margin: 1.4rem 0 .5rem; }
.prose ul, .prose ol { padding-left: 1.4rem; margin: 0 0 1em; }
.prose li { margin: .25em 0; }
.prose li > .math-block { margin: .4em 0; }
.prose blockquote { margin: 1.2em 0; padding: .2em 1em; border-left: 3px solid var(--line-strong); color: var(--ink-soft); }
.math-block { position: relative; overflow-x: auto; overflow-y: hidden; margin: 1em 0; padding: .15em 0; }
/* KaTeX's hidden MathML copy is absolutely positioned; anchor it, or a wide
   display formula makes the whole page scroll sideways on a phone. */
.katex { position: relative; }
.katex-display { margin: .2em 0 !important; }
.katex { font-size: 1.06em; }
.table-wrap { overflow-x: auto; margin: 1.1em 0 1.3em; }
.prose table, .stats-table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
.prose th, .prose td, .stats-table th, .stats-table td { padding: .45rem .65rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th, .stats-table th { font-weight: 650; color: var(--ink-soft); border-bottom: 2px solid var(--line-strong); white-space: nowrap; }

.lesson-crumb { font-size: var(--t-sm); color: var(--ink-faint); margin: 0 0 .2rem; }
.lesson-crumb a { color: inherit; text-decoration: none; }
.lesson-crumb a:hover { color: var(--accent-text); }
.lesson-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; }
.chapter-lede { font-size: var(--t-lg); color: var(--ink-soft); }
.pill { display: inline-flex; align-items: center; gap: .3rem; padding: .16rem .6rem; border-radius: 999px; font-size: var(--t-xs); background: var(--bg-sunken); color: var(--ink-soft); font-weight: 550; }
.pill-strong { background: var(--accent-soft); color: var(--accent-text); }
.pill-soft { background: transparent; border: 1px solid var(--line); }
.pill-good { background: var(--good-bg); color: var(--good); }

.goals { border: 1px solid var(--line); border-radius: var(--r); padding: .9rem 1.1rem .5rem; background: var(--bg-raised); margin: 0 0 1.8rem; }
.goals-head { font-weight: 650; font-size: var(--t-sm); color: var(--ink-soft); margin-bottom: .3rem; }
.goals ul { margin: 0 0 .4rem; padding-left: 1.2rem; }
.summary-box { margin: 3rem 0 1.5rem; padding: 1rem 1.3rem .4rem; border-radius: var(--r); background: var(--accent-soft); border: 1px solid var(--accent-ring); }
.summary-box h2 { margin: 0 0 .6rem !important; font-size: var(--t-xl) !important; }
.lesson-tasks { margin-top: 2.4rem; }
.task-fold { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-raised); margin: .5rem 0; }
.task-fold > summary { cursor: pointer; padding: .6rem .85rem; display: flex; align-items: center; gap: .6rem; list-style: none; }
.task-fold > summary::-webkit-details-marker { display: none; }
.task-fold > summary::before { content: '▸'; color: var(--ink-faint); transition: transform .15s; }
.task-fold[open] > summary::before { transform: rotate(90deg); }
.task-fold .card { border: 0; box-shadow: none; border-top: 1px solid var(--line); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.tf-title { flex: 1; }
.tf-done { color: var(--good); font-weight: 700; }
/* an exercise inside a lesson keeps the type of its card, not that of the
   lesson's section headings; in a fold the summary already shows its title */
.prose .card-title { font-family: var(--sans); font-size: var(--t-lg); margin: 0 0 .7rem; padding-top: 0; }
.prose .card .sub-head { font-family: var(--sans); font-size: var(--t-sm); margin: .6rem 0 .5rem; padding-top: 0; }
.task-fold .card-title { display: none; }
.lesson-done { margin: 2.2rem 0 0; display: flex; justify-content: center; }

/* ---------------------------------------------------------------- callouts */
.callout {
  --cc: var(--c-note); --cb: var(--c-note-bg);
  margin: 1.4em 0; padding: .8rem 1.1rem .3rem; border-radius: var(--r-sm);
  background: var(--cb); border-left: 3px solid var(--cc);
}
.callout-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .45rem; font-size: var(--t-sm); }
.callout-icon { color: var(--cc); font-weight: 700; width: 1rem; text-align: center; font-family: var(--mono); }
.callout-kind { color: var(--cc); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .74rem; }
.callout-name { font-weight: 650; color: var(--ink); font-size: var(--t-base); }
.callout-body > :last-child { margin-bottom: .6em; }
.callout .math-block { margin: .6em 0; }
.callout-def { --cc: var(--c-def); --cb: var(--c-def-bg); }
.callout-satz, .callout-lemma { --cc: var(--c-satz); --cb: var(--c-satz-bg); }
.callout-merke { --cc: var(--c-merke); --cb: var(--c-merke-bg); }
.callout-achtung { --cc: var(--c-warn); --cb: var(--c-warn-bg); }
.callout-beispiel { --cc: var(--c-ex); --cb: var(--c-ex-bg); }
.callout-algo { --cc: var(--c-algo); --cb: var(--c-algo-bg); }
.callout-python { --cc: var(--c-py); --cb: var(--c-py-bg); }
.callout-hinweis { --cc: var(--c-note); --cb: var(--c-note-bg); }
.callout-frage { --cc: var(--c-q); --cb: var(--c-q-bg); }
.callout-beweis, .callout-vertiefung { --cc: var(--c-note); --cb: transparent; border: 1px solid var(--line); border-left: 3px solid var(--cc); padding: 0; }
.callout-vertiefung { --cc: var(--c-satz); }
details.callout > summary { list-style: none; cursor: pointer; padding: .6rem 1rem; margin: 0; }
details.callout > summary::-webkit-details-marker { display: none; }
details.callout > summary::after { content: 'aufklappen'; margin-left: auto; font-size: .72rem; color: var(--ink-faint); }
details.callout[open] > summary::after { content: 'zuklappen'; }
details.callout > .callout-body { padding: 0 1.1rem .3rem; }
.frage-answer { margin: .2rem 0 .7rem; }
.frage-answer > summary { cursor: pointer; color: var(--cc); font-weight: 600; font-size: var(--t-sm); }
.frage-answer > div { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--line-strong); }

/* --------------------------------------------------------------- code */
.code { margin: 1.1em 0 .5em; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-code); overflow: hidden; }
.code + .code-out { margin-top: -.15em; }
.code-head { display: flex; align-items: center; gap: .5rem; padding: .3rem .4rem .3rem .8rem; border-bottom: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-faint); }
.code-title { flex: 1; font-weight: 600; color: var(--ink-soft); }
.code-norun .code-head { border-bottom-style: dashed; }
.code-copy { border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink-soft); border-radius: 5px; font-size: .7rem; padding: .12rem .5rem; cursor: pointer; }
.code-copy:hover { color: var(--ink); border-color: var(--line-strong); }
.code pre, .code-out pre { margin: 0; padding: .75rem .95rem; overflow-x: auto; font-size: .84rem; line-height: 1.55; tab-size: 4; }
.code pre code { font-size: inherit; }
.code-out { margin: 0 0 1.1em; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--r-sm) var(--r-sm); background: var(--bg-raised); }
.code-out-head { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); padding: .3rem .8rem 0; }
.code-out pre { color: var(--ink-soft); padding-top: .25rem; }
.py-kw { color: var(--py-kw); font-weight: 600; }
.py-str { color: var(--py-str); }
.py-num { color: var(--py-num); }
.py-com { color: var(--py-com); font-style: italic; }
.py-bi { color: var(--py-bi); }
.py-call { color: var(--py-call); }
.py-fn { color: var(--py-fn); font-weight: 600; }

/* ------------------------------------------------------------- figures */
.figure { margin: 1.8em 0; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-raised); box-shadow: var(--shadow-sm); overflow: hidden; }
.figure-head { display: flex; align-items: baseline; gap: .6rem; padding: .7rem 1rem .2rem; }
.figure-title { font-weight: 650; flex: 1; }
.figure-tag { font-size: .66rem; text-transform: uppercase; letter-spacing: .07em; color: var(--accent-text); background: var(--accent-soft); padding: .08rem .45rem; border-radius: 999px; }
.figure-controls { display: flex; flex-wrap: wrap; gap: .45rem 1.1rem; padding: .45rem 1rem .25rem; font-size: var(--t-sm); }
.figure-controls:empty { display: none; }
.ctl { display: flex; align-items: center; gap: .45rem; }
.ctl-label { color: var(--ink-soft); white-space: nowrap; }
.ctl-value { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: .8rem; min-width: 3.4em; color: var(--ink); }
.ctl-slider input { width: clamp(90px, 18vw, 170px); accent-color: var(--accent); }
.ctl select { font: inherit; padding: .15rem .35rem; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--bg-raised); color: var(--ink); max-width: 100%; }
.ctl-toggle input { accent-color: var(--accent); }
.figure-stage { padding: .3rem .4rem 0; display: grid; gap: .3rem; }
.figure-stage.is-two { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .figure-stage.is-two { grid-template-columns: 1fr; } }
.figure-canvas canvas { display: block; width: 100%; }
.figure-readout { padding: .35rem 1rem .6rem; font-size: var(--t-sm); color: var(--ink-soft); font-variant-numeric: tabular-nums; min-height: 1.2em; }
.figure-readout:empty { display: none; }
.figure-readout b, .figure-readout strong { color: var(--ink); }
.figure-caption { padding: .55rem 1rem .4rem; border-top: 1px solid var(--line); font-size: var(--t-sm); color: var(--ink-soft); background: var(--bg-inset); }
.figure-caption p { margin: 0 0 .4em; }
.figure-missing { padding: 1rem; color: var(--bad); font-size: var(--t-sm); }

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  padding: .48rem .95rem; border-radius: var(--r-sm); border: 1px solid var(--accent);
  background: var(--accent); color: #fff; font: 600 var(--t-sm)/1.2 var(--sans); cursor: pointer; text-decoration: none;
}
html[data-theme="dark"] .btn { color: #071a20; }
.btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-ghost { background: var(--bg-raised); color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] .btn-ghost { color: var(--ink); }
.btn-ghost:hover { background: var(--bg-sunken); border-color: var(--line-strong); }
.btn-lg { padding: .7rem 1.25rem; font-size: var(--t-base); }
.btn-small { padding: .25rem .6rem; font-size: var(--t-xs); }
.btn-danger, html[data-theme="dark"] .btn-danger { color: var(--bad); }
.btn-grade { background: var(--bg-raised); color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] .btn-grade { color: var(--ink); }
.btn-grade:hover { background: var(--bg-sunken); }
.btn-grade.is-chosen { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); opacity: 1; }
.row-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .9rem 0 .4rem; }

/* ------------------------------------------------------------------ cards */
.card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r); padding: 1.2rem clamp(.9rem, 3vw, 1.5rem) 1rem; box-shadow: var(--shadow-sm); }
.embedded-task { margin: 1.6em 0; }
.card-inline { border-left: 3px solid var(--accent); }
.card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .5rem; font-size: var(--t-xs); color: var(--ink-faint); margin-bottom: .6rem; }
.topic-dot { width: 8px; height: 8px; border-radius: 50%; }
.meta-topic { font-weight: 650; color: var(--ink-soft); }
.meta-sub { color: var(--ink-soft); text-decoration: none; }
.meta-sub:hover { color: var(--accent-text); }
.badge { display: inline-block; padding: .06rem .45rem; border-radius: 5px; font-size: .7rem; font-weight: 650; background: var(--bg-sunken); color: var(--ink-soft); }
.badge-code { background: var(--c-py-bg); color: var(--c-py); }
.badge-calc { background: var(--c-algo-bg); color: var(--c-algo); }
.badge-derive { background: var(--c-satz-bg); color: var(--c-satz); }
.badge-mcmulti, .badge-mc, .badge-tf { background: var(--c-def-bg); color: var(--c-def); }
.badge-diff1 { background: var(--good-bg); color: var(--good); }
.badge-diff2 { background: var(--warn-bg); color: var(--warn); }
.badge-diff3 { background: var(--bad-bg); color: var(--bad); }
.badge-pace { background: transparent; border: 1px solid var(--line); }
.tag { color: var(--ink-faint); }
.tag::before { content: '#'; }
.card-title { font-size: var(--t-lg); margin: 0 0 .7rem; }
.statement > :last-child { margin-bottom: .4em; }
.answer-box { margin-top: .6rem; }
.answer-lead { font-size: var(--t-sm); color: var(--ink-soft); margin: .4rem 0 .6rem; }
.options { display: flex; flex-direction: column; gap: .4rem; }
.option-holder { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-raised); }
.option { display: flex; align-items: flex-start; gap: .6rem; padding: .55rem .75rem; cursor: pointer; }
.option input { margin-top: .3rem; accent-color: var(--accent); }
.option-letter { font-weight: 700; color: var(--ink-faint); font-size: var(--t-sm); margin-top: .1rem; }
.option-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.option-mark { font-weight: 800; }
.option-holder.is-picked { border-color: var(--accent); }
.option-holder.is-correct { border-color: var(--good-line); background: var(--good-bg); }
.option-holder.is-correct .option-mark { color: var(--good); }
.option-holder.is-wrong.is-picked { border-color: var(--bad-line); background: var(--bad-bg); }
.option-holder.is-wrong .option-mark { color: var(--bad); }
.option-why { padding: 0 .9rem .5rem 2.9rem; font-size: var(--t-sm); color: var(--ink-soft); }
.option-why > :last-child { margin-bottom: 0; }
.answer-input { width: min(100%, 360px); font: 1rem var(--mono); padding: .5rem .7rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-raised); color: var(--ink); }
.verdict { margin-top: .7rem; padding: .55rem .8rem; border-radius: var(--r-sm); font-size: var(--t-sm); }
.verdict.is-good { background: var(--good-bg); color: var(--good); }
.verdict.is-bad { background: var(--bad-bg); color: var(--bad); }
.verdict.is-warn { background: var(--warn-bg); color: var(--warn); }
.hints { margin: .6rem 0; }
.hint-list { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.hint { display: flex; gap: .6rem; padding: .5rem .75rem; border-radius: var(--r-sm); background: var(--warn-bg); font-size: var(--t-sm); }
.hint > div > :last-child { margin-bottom: 0; }
.hint-no { font-weight: 800; color: var(--warn); }
.solution { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed var(--line-strong); }
.sub-head { font-size: var(--t-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin: .6rem 0 .5rem; }
.check-list { list-style: none; padding: 0; }
.check-item { display: flex; gap: .5rem; align-items: flex-start; }
.grade-box, .self-assess { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
.grade-lead { font-size: var(--t-sm); color: var(--ink-soft); margin-right: .3rem; }
.code-status { font-size: var(--t-sm); font-weight: 650; }
.code-status-solved { color: var(--good); }
.code-status-partial { color: var(--warn); }
.next-row { justify-content: flex-end; }
.next-row .btn.is-ready { background: var(--accent); color: #fff; border-color: var(--accent); }

/* ------------------------------------------------------------- practice */
.session-bar { position: relative; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.session-meta, .session-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* the panel hangs from the whole bar, not from the button: on a phone the
   button wraps to the left edge, and a panel aligned to it left the screen */
.filter-drop { position: static; }
.filter-drop > summary { list-style: none; }
.filter-drop > summary::-webkit-details-marker { display: none; }
.filter-panel {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: min(560px, 100%);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-lg); padding: .9rem 1rem;
}
.filter-panel fieldset { border: 0; padding: 0; margin: 0 0 .8rem; }
.filter-panel legend { font-size: var(--t-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); margin-bottom: .35rem; }
.chip-grid { display: flex; flex-wrap: wrap; gap: .3rem; }
.chip { border: 1px solid var(--line-strong); background: var(--bg-raised); color: var(--ink-soft); border-radius: 999px; padding: .2rem .65rem; font-size: var(--t-xs); cursor: pointer; }
.chip.is-on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.filter-foot { display: flex; justify-content: flex-end; gap: .5rem; }
.mini-badge { background: var(--accent); color: #fff; border-radius: 999px; font-size: .66rem; padding: 0 .4rem; }
.panel { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r); padding: 1.4rem; }
.empty { text-align: center; }
.empty h2 { margin-bottom: .5rem; }

/* ------------------------------------------------------------- overview */
.hero { padding: .6rem 0 1.2rem; }
.eyebrow { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--accent-text); font-weight: 700; margin-bottom: .4rem; }
.hero .lede { font-size: var(--t-lg); color: var(--ink-soft); }
.hero-stats { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1rem 0 1.2rem; font-size: var(--t-sm); color: var(--ink-soft); }
.hero-stats strong { color: var(--ink); font-size: var(--t-lg); margin-right: .2rem; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; }
.howto { margin: 1.4rem 0 2rem; padding: 1rem 1.3rem .3rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg-raised); }
.howto h2 { margin-top: .3rem !important; font-size: var(--t-xl) !important; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .9rem; margin: 1.2rem 0; }
.chapter-card {
  display: flex; flex-direction: column; gap: .35rem; padding: 1rem 1.1rem .9rem;
  border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r); background: var(--bg-raised);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-sm);
}
.chapter-card:hover { border-color: var(--c); box-shadow: var(--shadow); }
.cc-num { font-family: var(--serif); font-size: 1.6rem; font-weight: 700; color: var(--c); line-height: 1; }
/* the chapter colours are chosen for a light page; lifted, they stay readable on a dark card */
html[data-theme="dark"] .cc-num { color: color-mix(in srgb, var(--c) 60%, #fff); }
.cc-title { font-weight: 650; font-size: var(--t-lg); line-height: 1.3; }
.cc-lede { font-size: var(--t-sm); color: var(--ink-soft); flex: 1; }
.cc-meta { font-size: var(--t-xs); color: var(--ink-faint); }
.meter { display: block; height: 5px; border-radius: 3px; background: var(--bg-sunken); overflow: hidden; min-width: 60px; }
.meter i { display: block; height: 100%; background: var(--good); border-radius: 3px; }
td .meter { display: inline-block; width: 70px; vertical-align: middle; margin-left: .4rem; }
.chapter-intro { margin: 1rem 0; }
.lesson-list { list-style: none; padding: 0; counter-reset: ll; }
.lesson-list li { counter-increment: ll; margin: .45rem 0; }
.lesson-list a {
  display: grid; grid-template-columns: 2.1rem 1fr; gap: 0 .5rem; padding: .7rem .9rem; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--bg-raised); text-decoration: none; color: var(--ink);
}
.lesson-list a::before { content: counter(ll); grid-row: span 3; font-family: var(--serif); font-weight: 700; color: var(--ink-faint); font-size: 1.15rem; }
.lesson-list li.is-done a::before { content: '✓'; color: var(--good); }
.lesson-list a:hover { border-color: var(--accent); }
.ll-title { font-weight: 650; }
.ll-meta { font-size: var(--t-xs); color: var(--ink-faint); }
.ll-teaser { font-size: var(--t-sm); color: var(--ink-soft); }

.chapter-nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2rem; }
.chapter-nav a { display: flex; flex-direction: column; max-width: 48%; min-width: 0; overflow-wrap: anywhere; hyphens: auto; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--r-sm); text-decoration: none; background: var(--bg-raised); }
.chapter-nav a:last-child:not(:first-child) { text-align: right; margin-left: auto; }
.chapter-nav a:hover { border-color: var(--accent); }
.cn-dir { font-size: var(--t-xs); color: var(--ink-faint); }
.cn-title { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------ pages */
.page-head { margin-bottom: 1.4rem; }
.page-head h1 { font-family: var(--serif); font-size: var(--t-3xl); margin-bottom: .4rem; }
.page-head .lede { color: var(--ink-soft); font-size: var(--t-lg); }
.back-link { display: inline-block; margin-bottom: .8rem; text-decoration: none; font-size: var(--t-sm); }
.labor-group { margin: 1.6rem 0; }
.labor-group h2, .methods-group h2 { display: flex; align-items: center; gap: .5rem; font-size: var(--t-xl); margin-bottom: .7rem; font-family: var(--serif); }
.labor-list { display: flex; flex-direction: column; gap: .35rem; }
.labor-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .85rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-raised); text-decoration: none; color: var(--ink); }
.labor-row:hover { border-color: var(--accent); }
.lr-status { width: 1.2rem; text-align: center; color: var(--ink-faint); font-weight: 700; }
.labor-row.is-solved .lr-status { color: var(--good); }
.labor-row.is-partial .lr-status { color: var(--warn); }
.lr-title { flex: 1; min-width: 0; }
.lr-min { font-size: var(--t-xs); color: var(--ink-faint); white-space: nowrap; }
.code-task .code-template .code { margin-top: .4rem; }

.methods-tools { display: flex; gap: .5rem; margin-top: .8rem; }
.methods-tools input { flex: 1; font: inherit; padding: .5rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-raised); color: var(--ink); min-width: 0; }
.methods-group { margin: 1.8rem 0; }
.methods-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .8rem; }
@media (max-width: 420px) { .methods-grid { grid-template-columns: 1fr; } }
.method-card { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-sm); padding: .85rem 1rem .7rem; font-size: var(--t-sm); break-inside: avoid; }
.method-card h3 { font-size: var(--t-base); margin-bottom: .2rem; }
.mc-problem { color: var(--ink-soft); margin-bottom: .45rem; }
.mc-row { display: grid; grid-template-columns: 7.2rem 1fr; gap: .5rem; padding: .2rem 0; border-top: 1px solid var(--line); }
.mc-label { color: var(--ink-faint); font-weight: 600; font-size: var(--t-xs); padding-top: .12rem; }
.mc-val { min-width: 0; overflow-wrap: anywhere; }
.mc-link { display: inline-block; margin-top: .45rem; font-size: var(--t-xs); text-decoration: none; }
.method-card.is-target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: .8rem; margin-bottom: 1.6rem; }
.tile { background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r); padding: .9rem; }
.tile-big { font-family: var(--serif); font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.tile-big small { font-size: 1rem; color: var(--ink-faint); }
.tile-label { font-size: var(--t-sm); color: var(--ink-soft); margin: .2rem 0 .5rem; overflow-wrap: break-word; hyphens: auto; }
.stats-table a { text-decoration: none; color: var(--ink); display: inline-flex; align-items: center; gap: .4rem; }
.forecast, .mistakes, .data-tools, .py-progress { margin-top: 2rem; }
.forecast h2, .mistakes h2, .data-tools h2, .py-progress h2 { font-size: var(--t-xl); margin-bottom: .8rem; font-family: var(--serif); }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.bar i { width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; min-height: 2px; }
.bar span { font-size: .66rem; color: var(--ink-faint); margin-top: 3px; }
.mistake-list { padding-left: 1.2rem; }

/* ----------------------------------------------------------- search modal */
.modal { position: fixed; inset: 0; z-index: 80; background: rgba(10, 12, 16, .45); display: flex; justify-content: center; align-items: flex-start; padding: 10vh 1rem 1rem; }
.modal-box { width: min(680px, 100%); background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
#searchInput { width: 100%; font: var(--t-lg) var(--sans); padding: .9rem 1.1rem; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); outline: none; }
.search-results { max-height: 58vh; overflow-y: auto; padding: .4rem; }
.search-results > p { padding: .6rem .8rem; margin: 0; }
.search-hit { display: grid; grid-template-columns: auto 1fr; gap: .1rem .6rem; padding: .55rem .75rem; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); }
.search-hit.is-sel, .search-hit:hover { background: var(--accent-soft); }
.sh-kind { grid-row: span 2; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); padding-top: .2rem; min-width: 6.5rem; }
.sh-title { font-weight: 600; }
.sh-snip { font-size: var(--t-xs); color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 520px) { .sh-kind { min-width: 0; grid-row: auto; } .search-hit { grid-template-columns: 1fr; } }
.modal-foot { padding: .45rem .9rem; border-top: 1px solid var(--line); font-size: var(--t-xs); color: var(--ink-faint); }

.toast {
  position: fixed; left: 50%; bottom: 1.4rem; transform: translate(-50%, 140%); z-index: 90;
  width: max-content; max-width: calc(100vw - 2rem);   /* else it wraps at half the screen width */
  background: var(--ink); color: var(--bg-raised); padding: .55rem 1rem; border-radius: 999px; font-size: var(--t-sm);
  transition: transform .25s ease, opacity .25s ease; pointer-events: none; opacity: 0;
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }
@media (max-width: 860px) { .toast { bottom: 5rem; } }

/* ------------------------------------------------------------------- print */
@media print {
  .topbar, .bottom-tabs, .learn-nav, .learn-toc, .chapter-nav, .methods-tools, .lesson-done, .toast, .row-actions, .code-copy { display: none !important; }
  body { background: #fff; color: #000; }
  /* paper does not scroll: long code lines wrap instead of being cut off */
  .code pre, .code-out pre { white-space: pre-wrap; overflow-wrap: anywhere; overflow: visible; }
  .learn-layout { display: block; }
  .figure, .card { break-inside: avoid; }
  details.callout:not([open]) { display: none; }
  .method-card { border-color: #bbb; }
  #view-methoden { max-width: none; padding: 0; }
}