/*
 * TheorieFocus — merkidentiteit v2 (stijlblad 12a, vastgesteld in ronde 12).
 * Licht is de standaard, donker is de variant. Alle schermen in `app/` lezen
 * uitsluitend uit deze tokens; losse hexwaarden horen hier en nergens anders.
 */

:root {
  color-scheme: light;

  /* kleurrollen — licht */
  --tf-canvas: #eceae5;
  --tf-bg: #fdfbf6;
  --tf-surface: #fff;
  --tf-surface-sunken: #f4efe4;
  --tf-surface-warm: #f7f2e9;
  --tf-track: #f0eadd;
  --tf-ink: #26221c;
  --tf-ink-soft: #3f3a31;
  /*
   * Deze grijs was #8a8172 en haalde daarmee 3,7:1 op de achtergrond van de app.
   * WCAG 2.1 AA (succescriterium 1.4.3) eist 4,5:1 voor gewone tekst, en deze
   * kleur draagt echte tekst: de norm onder de examenknop, de regel bij je
   * bewaarde vragen, de legenda in het overzicht — achttien plaatsen in
   * scherm.css alleen al. Hij is bijgetrokken tot 5,0:1 op de achtergrond en
   * 4,7:1 op het warme vlak, met dezelfde tint. Zie app/TOEGANKELIJKHEID.md.
   */
  --tf-muted: #746c5e;
  --tf-faint: #b0a68f;
  --tf-line: #eae3d5;
  --tf-line-soft: #f2ede2;
  --tf-outline: #ddd4c2;

  /* accent + status */
  --tf-accent: oklch(0.78 0.14 74);
  --tf-accent-strong: oklch(0.72 0.14 74);
  --tf-accent-line: oklch(0.82 0.11 74);
  --tf-accent-tint: oklch(0.95 0.05 74);
  --tf-accent-tint-soft: oklch(0.97 0.03 74);
  --tf-accent-ink: #26221c;
  --tf-good: oklch(0.52 0.11 150);
  --tf-good-tint: oklch(0.95 0.03 150);
  --tf-bad: oklch(0.5 0.17 27);
  --tf-bad-tint: oklch(0.96 0.02 27);

  /* scène — schematische plaatshouder tot de scène-engine levert */
  --tf-sand: #ded3c0;
  --tf-asphalt: #7c766e;
  --tf-marking: #efe7da;

  /* vormtaal */
  --tf-radius-card: 14px;
  --tf-radius-element: 12px;
  --tf-radius-small: 9px;
  --tf-radius-pill: 999px;
  --tf-hit: 44px;
  --tf-hit-comfort: 48px;
  --tf-border: 1.5px;

  /*
   * BREEDTES — gedeeld door de app en de website. De afspraken erachter staan in
   * app/AFSPRAKEN.md; de website houdt zijn eigen maten in app/site/maten.css.
   * Dit bestand voert alleen de twee getallen die de app op een element zet.
   *
   * De drie toetsmaten (390, 768, 1280) en de twee omslagpunten (761 en 1024)
   * kunnen hier NIET staan: een @media-regel kan geen custom property lezen. Ze
   * staan als kaal getal in de stijlbladen en als afspraak in AFSPRAKEN.md.
   *
   *   --tf-lees-max   Waar lopende tekst ophoudt met breder worden. NAGEMETEN en
   *                   niet geschat: in de browser is de gemiddelde tekenbreedte
   *                   van deze letter op 13,5px 6,58 pixels, dus 75 tekens is
   *                   494 pixels tekst. Met de 2×18 rand van een kaart erbij komt
   *                   dat op 530; afgerond 540, wat neerkomt op 76 tekens. De
   *                   vuistregel is 60 tot 75 tekens per regel. Op de website
   *                   heet dezelfde afspraak `--site-lees: 68ch`; daar mag het in
   *                   `ch` omdat het altijd om tekst gaat, hier niet omdat deze
   *                   waarde ook de breedte van een kolom in een raster zet en
   *                   `ch` daar tegen het verkeerde lettertype afrekent.
   *   --tf-app-max    Waar het oefenscherm ophoudt met breder worden. Hetzelfde
   *                   getal als `--site-max` in app/site/maten.css, en dat is de
   *                   bedoeling: een blad van de site en het oefenscherm horen
   *                   even breed te zijn, anders verspringt de maat als je van de
   *                   pagina naar de app loopt.
   */
  --tf-lees-max: 540px;
  --tf-app-max: 1120px;

  /*
   * Stemmen (12a): Bricolage Grotesque voor koppen, Spline Sans voor lopende
   * tekst, IBM Plex Mono waar de wet spreekt.
   *
   * Het ontwerpdossier levert ze via Google Fonts, maar deze app draait onder
   * `default-src 'self'`: een externe fontbron wordt door de eigen CSP
   * geblokkeerd en zou bovendien het IP-adres van de leerling naar een derde
   * sturen. Daarom staan de merknamen vooraan en volgt een systeemstapel. Wil
   * je ze echt tonen, zet de woff2-bestanden dan onder `app/fonts/` en voeg
   * hier @font-face-regels toe — geen CSP-uitzondering nodig.
   */
  --tf-font-display: "Bricolage Grotesque", "Segoe UI Semibold", ui-sans-serif, system-ui, sans-serif;
  --tf-font-ui: "Spline Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --tf-font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;
}

/* `hidden` wint van elke display-waarde; anders lekt een dichtgeklapt blok. */
[hidden] {
  display: none !important;
}

/*
 * Donkere variant (11b), aan `data-theme="dark"`.
 *
 * DIT WAS EEN VARIANT PER OPPERVLAK EN IS SINDS 19-08-2026 DE STAND VAN DE HELE
 * APP. Hier stond dat donker in dit merk voor iets anders staat (dashboardtegels,
 * nachtstand) en uitdrukkelijk geen automatische systeemstand is. De eigenaar
 * heeft dat omgedraaid: er is nu een instelling met drie standen, en de stand
 * waarop de app begint is "zoals je telefoon". Zie app/SCHERM.md.
 *
 * Er staat nog steeds geen `prefers-color-scheme` in dit bestand, en dat is met
 * opzet: app/toegankelijk.js rekent uit wat "zoals je telefoon" op dit moment
 * betekent en zet `data-theme` vast. Anders zou deze hele kleurenset er een
 * tweede keer onder een @media staan en loopt er ooit een van de twee achter.
 */
[data-theme="dark"] {
  color-scheme: dark;
  --tf-canvas: #191510;
  --tf-bg: #211d19;
  --tf-surface: #2b2620;
  --tf-surface-sunken: #2e2922;
  --tf-surface-warm: #2e2922;
  --tf-track: #2e2922;
  --tf-ink: #efe8da;
  --tf-ink-soft: #d8d0c0;
  --tf-muted: #a19783;
  --tf-faint: #7d7466;
  --tf-line: #38322a;
  --tf-line-soft: #332e27;
  --tf-outline: #443d33;
  --tf-accent-tint: #3a3125;
  --tf-accent-tint-soft: #332c22;
  --tf-good: oklch(0.68 0.11 150);
  --tf-good-tint: #26332b;
  --tf-bad: oklch(0.66 0.15 27);
  --tf-bad-tint: #37241f;
}

/*
 * STERKER CONTRAST — de stand die iemand zelf kiest in "Makkelijker lezen".
 *
 * Hij staat hier en niet in toegankelijk.css omdat dit bestand de enige plek is
 * waar een kleurwaarde hoort. Wat er verder aan die stand vastzit — dikkere
 * randen, een dikkere focusring — staat wel in toegankelijk.css, want dat zijn
 * geen kleuren.
 *
 * LET OP WAT HIER NIET GEBEURT: het wordt geen zwart op wit. De achtergrond
 * blijft het gebroken wit van het merk. Puur zwart op puur wit geeft bij een
 * deel van de lezers met dyslexie glans en "bewegende" letters; de British
 * Dyslexia Association adviseert daarom uitdrukkelijk een gebroken witte of
 * cremekleurige ondergrond. Wat hier wél gebeurt is de tekst donkerder en de
 * randen zichtbaar maken. Zie app/TOEGANKELIJKHEID.md.
 */
:root[data-tf-contrast="hoog"] {
  --tf-ink: #171309;
  --tf-ink-soft: #241f16;
  --tf-muted: #514a3b;
  --tf-outline: #8f8672;
  --tf-line: #b9b09c;
  --tf-line-soft: #cdc5b3;
  --tf-border: 2px;
  --tf-accent-strong: oklch(0.6 0.15 74);
  --tf-good: oklch(0.42 0.12 150);
  --tf-bad: oklch(0.43 0.19 27);
}

:root[data-tf-contrast="hoog"][data-theme="dark"] {
  --tf-ink: #fbf6ec;
  --tf-ink-soft: #ece5d6;
  --tf-muted: #c7bda9;
  --tf-outline: #6b6252;
  --tf-line: #574f42;
  --tf-line-soft: #4b4438;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--tf-canvas);
  color: var(--tf-ink);
  font-family: var(--tf-font-ui);
  font-synthesis: none;
  overflow-x: hidden;
  overflow-wrap: anywhere;
}

a {
  color: #1a1a1a;
}

a:hover {
  color: #000;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

/* Focusring: 3px inkt met 3px afstand, nooit blauw (10b). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tf-ink);
  outline-offset: 3px;
}

/* ── stemmen ─────────────────────────────────────────────────────────── */

.tf-display {
  margin: 0;
  font-family: var(--tf-font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--tf-ink);
  text-wrap: pretty;
}

.tf-meta {
  font: 400 10px var(--tf-font-mono);
  color: var(--tf-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.tf-mono {
  font-family: var(--tf-font-mono);
  font-size: 11px;
  color: var(--tf-muted);
}

.tf-lede {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--tf-ink-soft);
}

.tf-note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--tf-muted);
}

/* mono waar de wet spreekt */
.tf-law {
  padding-left: 8px;
  border-left: 3px solid var(--tf-accent);
  font: 400 11px/1.5 var(--tf-font-mono);
  color: var(--tf-muted);
}

/* ── merkteken ───────────────────────────────────────────────────────── */

.tf-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 700 17px var(--tf-font-display);
  color: var(--tf-ink);
  text-decoration: none;
}

.tf-mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--tf-radius-small);
  background: var(--tf-accent);
}

.tf-mark svg {
  display: block;
}

.tf-wordmark {
  font: 700 19px var(--tf-font-display);
  color: var(--tf-ink);
}

/*
 * Het amber vlak achter "Focus" is de markering van het losse woordmerk. Staat
 * het merkteken ernaast, dan draagt dát het accent en blijft het woord vlak —
 * anders staan er twee amber vlakken naast elkaar om dezelfde aandacht te
 * vragen.
 */
.tf-wordmark em {
  padding: 0 5px 2px;
  border-radius: 6px;
  background: var(--tf-accent);
  color: #26221c;
  font-style: normal;
}

.tf-brand .tf-wordmark em {
  padding: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}

/* ── vlakken ─────────────────────────────────────────────────────────── */

.tf-card {
  border-radius: var(--tf-radius-card);
  background: var(--tf-bg);
}

.tf-panel {
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

.tf-panel-accent {
  border: var(--tf-border) solid var(--tf-accent-line);
  border-radius: var(--tf-radius-card);
  background: var(--tf-accent-tint-soft);
}

.tf-panel-dashed {
  border: var(--tf-border) dashed var(--tf-outline);
  border-radius: var(--tf-radius-card);
  background: var(--tf-surface);
}

/* ── knoppen ─────────────────────────────────────────────────────────── */

.tf-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--tf-hit-comfort);
  padding: 10px 18px;
  border: var(--tf-border) solid transparent;
  border-radius: var(--tf-radius-element);
  background: none;
  font-family: var(--tf-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-ink);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.tf-button-primary {
  border-color: transparent;
  background: var(--tf-accent);
  color: var(--tf-accent-ink);
  font-weight: 700;
}

.tf-button-secondary {
  border-color: var(--tf-outline);
  background: var(--tf-surface);
}

.tf-button-ink {
  border-color: var(--tf-ink);
  background: var(--tf-ink);
  color: var(--tf-bg);
  font-weight: 700;
}

.tf-button-quiet {
  min-height: var(--tf-hit);
  padding: 8px 4px;
  border: none;
  color: var(--tf-muted);
  font-weight: 400;
  font-size: 12px;
  text-decoration: underline;
}

.tf-button-pill {
  border-radius: var(--tf-radius-pill);
}

.tf-button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ── chips ───────────────────────────────────────────────────────────── */

.tf-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--tf-hit);
  padding: 10px 15px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-pill);
  background: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tf-ink);
  cursor: pointer;
}

.tf-chip[aria-pressed="true"] {
  border-color: var(--tf-accent);
  background: var(--tf-accent-tint);
  font-weight: 600;
}

.tf-tag {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: var(--tf-radius-pill);
  background: var(--tf-accent-tint);
  color: var(--tf-ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tf-tag-ink {
  background: var(--tf-ink);
  color: var(--tf-bg);
}

/* ── modusschakelaar (11a) ───────────────────────────────────────────── */

.tf-switch {
  display: flex;
  padding: 3px;
  border-radius: var(--tf-radius-pill);
  background: var(--tf-track);
}

.tf-switch button {
  min-width: 78px;
  min-height: 40px;
  padding: 7px 16px;
  border: none;
  border-radius: var(--tf-radius-pill);
  background: none;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tf-ink);
  cursor: pointer;
}

.tf-switch button[aria-pressed="true"] {
  background: var(--tf-ink);
  color: var(--tf-bg);
  font-weight: 700;
}

/* ── statusregels: woord + vorm + kleur ──────────────────────────────── */

.tf-verdict {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: var(--tf-hit);
  padding: 9px 13px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-element);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--tf-ink);
}

.tf-verdict::before {
  display: grid;
  flex: none;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  content: "";
}

.tf-verdict-good {
  border-color: var(--tf-good);
  background: var(--tf-good-tint);
}

.tf-verdict-good::before {
  background: var(--tf-good);
  content: "\2713";
}

.tf-verdict-bad {
  border-color: var(--tf-bad);
  background: var(--tf-bad-tint);
}

.tf-verdict-bad::before {
  background: var(--tf-bad);
  content: "\2715";
}

/* ── voortgangsbalk ──────────────────────────────────────────────────── */

.tf-track-bar {
  overflow: hidden;
  height: 7px;
  border-radius: 4px;
  background: var(--tf-line-soft);
}

.tf-track-bar > span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--tf-accent);
}

.tf-track-bar > span.at-level {
  background: var(--tf-good);
}

/* ── paginaschil voor de merkschermen ────────────────────────────────── */

.tf-shell {
  width: min(100% - 32px, var(--tf-shell-max, 1100px));
  margin: 0 auto;
  padding: 20px 0 48px;
}

.tf-shell-narrow { --tf-shell-max: 400px; }
.tf-shell-page { --tf-shell-max: 680px; }
.tf-shell-mid { --tf-shell-max: 720px; }
.tf-shell-wide { --tf-shell-max: 820px; }

.tf-topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: var(--tf-border) solid var(--tf-line);
}

.tf-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.tf-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tf-hit);
  padding: 9px 12px;
  border-radius: var(--tf-radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-ink);
  text-decoration: none;
}

.tf-nav a[aria-current="page"] {
  background: var(--tf-track);
}

.tf-nav .tf-nav-cta {
  margin-left: 6px;
}

.tf-nav .tf-nav-cta[aria-current="page"] {
  background: var(--tf-accent);
}

/* De knop verschijnt pas als `menu.js` heeft gedraaid; zonder JavaScript blijft
   het volledige menu gewoon staan. */
.tf-menu-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  min-height: var(--tf-hit);
  padding: 8px 14px;
  border: var(--tf-border) solid var(--tf-outline);
  border-radius: var(--tf-radius-pill);
  background: var(--tf-surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--tf-ink);
  cursor: pointer;
}

.tf-menu-bars {
  position: relative;
  width: 14px;
  height: 2px;
  background: var(--tf-ink);
  border-radius: 2px;
}

.tf-menu-bars::before,
.tf-menu-bars::after {
  position: absolute;
  left: 0;
  width: 14px;
  height: 2px;
  background: var(--tf-ink);
  border-radius: 2px;
  content: "";
}

.tf-menu-bars::before { top: -5px; }
.tf-menu-bars::after { top: 5px; }

@media (max-width: 760px) {
  .tf-topbar[data-collapsible="true"] {
    position: relative;
  }

  .tf-topbar[data-collapsible="true"] .tf-menu-toggle {
    display: inline-flex;
  }

  .tf-topbar[data-collapsible="true"] .tf-nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding: 6px 0 2px;
    border-top: var(--tf-border) solid var(--tf-line);
    margin-top: 4px;
  }

  .tf-topbar[data-collapsible="true"][data-menu-open="true"] .tf-nav {
    display: flex;
  }

  .tf-topbar[data-collapsible="true"] .tf-nav a {
    border-radius: var(--tf-radius-element);
    padding: 11px 12px;
  }

  .tf-topbar[data-collapsible="true"] .tf-nav .tf-nav-cta {
    justify-content: center;
    margin: 6px 0 0;
  }
}

/* ── voettekstnavigatie ──────────────────────────────────────────────── */

.tf-footer-nav {
  display: grid;
  gap: 20px 26px;
  padding-bottom: 18px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.tf-footer-nav h2 {
  margin: 0 0 8px;
  font: 400 10px var(--tf-font-mono);
  color: var(--tf-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.tf-footer-nav ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tf-footer-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  color: var(--tf-ink);
  font-size: 12.5px;
  text-decoration: none;
}

.tf-footer-nav a:hover {
  text-decoration: underline;
}

.tf-footer {
  margin-top: 28px;
  padding-top: 16px;
  border-top: var(--tf-border) solid var(--tf-line);
  color: var(--tf-muted);
  font-size: 11.5px;
  line-height: 1.6;
}

.tf-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tf-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.tf-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  border: 0;
  clip-path: inset(50%);
  white-space: nowrap;
}