/* tokens.css — design decisions as custom properties.
 * File 1 of the concatenated app bundle (see internal/assets).
 * Establishes the cascade layer order for every file after it.
 *
 * Visual identity: "kareli defter" (light) and "kara tahta" (dark).
 * Light is a squared school notebook: paper ground with a faint blue
 * grid, ink-blue text, a blue ballpoint accent, highlighter yellow and
 * a teacher's red pen. Dark is a classroom blackboard: deep green ground
 * with chalk-dust smudges, chalk-white text and chalk colours. Text pairs
 * aim at WCAG 2.2 AA (4.5:1) and UI boundaries at 3:1; the team audits
 * the exact ratios (T-0104). */

@layer reset, tokens, base, layout, components, themes, utilities;

@layer tokens {
  :root {
    color-scheme: light dark;

    /* Kareli defter. */
    --c-bg: #f6f7f2;
    --c-surface: #ffffff;
    --c-surface-2: #eef2f8;
    --c-text: #1d2742;
    --c-muted: #56607a;
    --c-accent: #2556d4;
    --c-accent-ink: #ffffff;
    --c-accent-soft: #e5ecfc;
    --c-accent-2: #0f766e;
    --c-pen-red: #c3372e;
    --c-correct: #17804f;
    --c-correct-soft: #e0f3e8;
    --c-incorrect: #c3372e;
    --c-incorrect-soft: #fbe7e4;
    --c-warning: #8a5a00;
    --c-focus: #2556d4;
    --c-border: #cdd5e2;
    --c-border-strong: #7d889e;
    --c-hl: #ffe45c;
    --c-hl-mint: #9af0c8;
    --c-hl-pink: #ffb8d2;
    --c-level: var(--c-accent);
    --c-level-soft: var(--c-accent-soft);
    --c-confetti-1: #ffcf33;
    --c-confetti-2: #2556d4;
    --c-confetti-3: #ff6b8b;
    --c-confetti-4: #19b37a;
    --c-lvl-ilkokul: #b4540a;
    --c-lvl-ilkokul-soft: #fdeedd;
    --c-lvl-ortaokul: #2556d4;
    --c-lvl-ortaokul-soft: #e5ecfc;
    --c-lvl-lise: #6d3fc0;
    --c-lvl-lise-soft: #efe7fb;

    /* Notebook paper: a 28px squared grid and the red margin line. */
    --c-grid: rgb(37 86 212 / 0.075);
    --c-margin: rgb(195 55 46 / 0.4);
    --bg-image:
      linear-gradient(var(--c-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
    --bg-size: 28px 28px, 28px 28px;
    --sheet-image:
      linear-gradient(rgb(37 86 212 / 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgb(37 86 212 / 0.05) 1px, transparent 1px);

    --shadow-1: 0 1px 2px rgb(29 39 66 / 0.06), 0 2px 10px rgb(29 39 66 / 0.05);
    --shadow-2: 0 2px 6px rgb(29 39 66 / 0.07), 0 14px 32px rgb(29 39 66 / 0.1);
    --shadow-press: 0 4px 0 rgb(18 52 140);
    --shadow-press-soft: 0 3px 0 var(--c-border);

    --font-text: "MTK Text", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-math: "MTK Math", math;

    /* Type scale. Neutral defaults (home/admin); level themes override. */
    --fs-xs: 0.875rem;
    --fs-s: 1rem;
    --fs-body: 1.125rem;
    --fs-l: 1.25rem;
    --fs-stem: 1.375rem;
    --fs-choice: 1.25rem;
    --fs-h3: 1.3125rem;
    --fs-h2: clamp(1.5rem, 1.25rem + 0.9vw, 1.875rem);
    --fs-h1: clamp(2rem, 1.45rem + 2.4vw, 3.125rem);
    --fs-display: clamp(2.5rem, 1.5rem + 4.4vw, 4.5rem);
    --math-scale: 1.15em;
    --lh-body: 1.6;
    --lh-heading: 1.15;
    --tracking-tight: -0.018em;

    --space-xs: 0.25rem;
    --space-s: 0.5rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2.5rem;
    --space-2xl: 4rem;

    --radius-s: 6px;
    --radius-m: 10px;
    --radius-l: 18px;
    --radius: 14px;
    --radius-pill: 999px;

    /* Motion: short, springy, and off for prefers-reduced-motion. */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-1: 160ms;
    --dur-2: 280ms;
    --dur-3: 560ms;

    --tap: 2.75rem;
    --container: 70rem;
    --column: 47.5rem;
  }

  /* Kara tahta: the OS dark preference, unless the visitor pinned light. */
  @media (prefers-color-scheme: dark) {
    :root {
      --c-bg: #1b2923;
      --c-surface: #22322a;
      --c-surface-2: #2a3c33;
      --c-text: #eef1e8;
      --c-muted: #b4c2b7;
      --c-accent: #9fcbff;
      --c-accent-ink: #12201a;
      --c-accent-soft: rgb(159 203 255 / 0.14);
      --c-accent-2: #8fe0d2;
      --c-pen-red: #ffa194;
      --c-correct: #92e3aa;
      --c-correct-soft: rgb(146 227 170 / 0.13);
      --c-incorrect: #ffa194;
      --c-incorrect-soft: rgb(255 161 148 / 0.13);
      --c-warning: #f5d77a;
      --c-focus: #f5d77a;
      --c-border: rgb(238 241 232 / 0.17);
      --c-border-strong: rgb(238 241 232 / 0.42);
      --c-hl: rgb(245 215 122 / 0.34);
      --c-hl-mint: rgb(146 227 170 / 0.3);
      --c-hl-pink: rgb(255 180 200 / 0.3);
      --c-confetti-1: #f5d77a;
      --c-confetti-2: #9fcbff;
      --c-confetti-3: #ffb4c8;
      --c-confetti-4: #92e3aa;
      --c-lvl-ilkokul: #ffc27a;
      --c-lvl-ilkokul-soft: rgb(255 194 122 / 0.14);
      --c-lvl-ortaokul: #9fcbff;
      --c-lvl-ortaokul-soft: rgb(159 203 255 / 0.14);
      --c-lvl-lise: #cdb4ff;
      --c-lvl-lise-soft: rgb(205 180 255 / 0.14);

      --c-grid: transparent;
      --c-margin: rgb(255 161 148 / 0.28);
      --bg-image:
        radial-gradient(70rem 40rem at 8% -12%, rgb(255 255 255 / 0.06), transparent 62%),
        radial-gradient(55rem 32rem at 105% 18%, rgb(255 255 255 / 0.04), transparent 60%);
      --bg-size: auto, auto;
      --sheet-image:
        radial-gradient(40rem 18rem at 0% 0%, rgb(255 255 255 / 0.035), transparent 70%),
        linear-gradient(transparent, transparent);

      --shadow-1: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 10px rgb(0 0 0 / 0.18);
      --shadow-2: 0 2px 6px rgb(0 0 0 / 0.35), 0 14px 32px rgb(0 0 0 / 0.3);
      --shadow-press: 0 4px 0 rgb(54 95 150);
      --shadow-press-soft: 0 3px 0 rgb(0 0 0 / 0.35);
    }
  }

  /* Explicit cookie overrides win over the media query by specificity. */
  html[data-theme="acik"] {
    color-scheme: light;

    --c-bg: #f6f7f2;
    --c-surface: #ffffff;
    --c-surface-2: #eef2f8;
    --c-text: #1d2742;
    --c-muted: #56607a;
    --c-accent: #2556d4;
    --c-accent-ink: #ffffff;
    --c-accent-soft: #e5ecfc;
    --c-accent-2: #0f766e;
    --c-pen-red: #c3372e;
    --c-correct: #17804f;
    --c-correct-soft: #e0f3e8;
    --c-incorrect: #c3372e;
    --c-incorrect-soft: #fbe7e4;
    --c-warning: #8a5a00;
    --c-focus: #2556d4;
    --c-border: #cdd5e2;
    --c-border-strong: #7d889e;
    --c-hl: #ffe45c;
    --c-hl-mint: #9af0c8;
    --c-hl-pink: #ffb8d2;
    --c-confetti-1: #ffcf33;
    --c-confetti-2: #2556d4;
    --c-confetti-3: #ff6b8b;
    --c-confetti-4: #19b37a;
    --c-lvl-ilkokul: #b4540a;
    --c-lvl-ilkokul-soft: #fdeedd;
    --c-lvl-ortaokul: #2556d4;
    --c-lvl-ortaokul-soft: #e5ecfc;
    --c-lvl-lise: #6d3fc0;
    --c-lvl-lise-soft: #efe7fb;

    --c-grid: rgb(37 86 212 / 0.075);
    --c-margin: rgb(195 55 46 / 0.4);
    --bg-image:
      linear-gradient(var(--c-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--c-grid) 1px, transparent 1px);
    --bg-size: 28px 28px, 28px 28px;
    --sheet-image:
      linear-gradient(rgb(37 86 212 / 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgb(37 86 212 / 0.05) 1px, transparent 1px);

    --shadow-1: 0 1px 2px rgb(29 39 66 / 0.06), 0 2px 10px rgb(29 39 66 / 0.05);
    --shadow-2: 0 2px 6px rgb(29 39 66 / 0.07), 0 14px 32px rgb(29 39 66 / 0.1);
    --shadow-press: 0 4px 0 rgb(18 52 140);
    --shadow-press-soft: 0 3px 0 var(--c-border);
  }

  html[data-theme="koyu"] {
    color-scheme: dark;

    --c-bg: #1b2923;
    --c-surface: #22322a;
    --c-surface-2: #2a3c33;
    --c-text: #eef1e8;
    --c-muted: #b4c2b7;
    --c-accent: #9fcbff;
    --c-accent-ink: #12201a;
    --c-accent-soft: rgb(159 203 255 / 0.14);
    --c-accent-2: #8fe0d2;
    --c-pen-red: #ffa194;
    --c-correct: #92e3aa;
    --c-correct-soft: rgb(146 227 170 / 0.13);
    --c-incorrect: #ffa194;
    --c-incorrect-soft: rgb(255 161 148 / 0.13);
    --c-warning: #f5d77a;
    --c-focus: #f5d77a;
    --c-border: rgb(238 241 232 / 0.17);
    --c-border-strong: rgb(238 241 232 / 0.42);
    --c-hl: rgb(245 215 122 / 0.34);
    --c-hl-mint: rgb(146 227 170 / 0.3);
    --c-hl-pink: rgb(255 180 200 / 0.3);
    --c-confetti-1: #f5d77a;
    --c-confetti-2: #9fcbff;
    --c-confetti-3: #ffb4c8;
    --c-confetti-4: #92e3aa;
    --c-lvl-ilkokul: #ffc27a;
    --c-lvl-ilkokul-soft: rgb(255 194 122 / 0.14);
    --c-lvl-ortaokul: #9fcbff;
    --c-lvl-ortaokul-soft: rgb(159 203 255 / 0.14);
    --c-lvl-lise: #cdb4ff;
    --c-lvl-lise-soft: rgb(205 180 255 / 0.14);

    --c-grid: transparent;
    --c-margin: rgb(255 161 148 / 0.28);
    --bg-image:
      radial-gradient(70rem 40rem at 8% -12%, rgb(255 255 255 / 0.06), transparent 62%),
      radial-gradient(55rem 32rem at 105% 18%, rgb(255 255 255 / 0.04), transparent 60%);
    --bg-size: auto, auto;
    --sheet-image:
      radial-gradient(40rem 18rem at 0% 0%, rgb(255 255 255 / 0.035), transparent 70%),
      linear-gradient(transparent, transparent);

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.35), 0 2px 10px rgb(0 0 0 / 0.18);
    --shadow-2: 0 2px 6px rgb(0 0 0 / 0.35), 0 14px 32px rgb(0 0 0 / 0.3);
    --shadow-press: 0 4px 0 rgb(54 95 150);
    --shadow-press-soft: 0 3px 0 rgb(0 0 0 / 0.35);
  }

  /* Font-size preference. Everything is rem-based, so this scales the page. */
  html[data-fs="m"] {
    font-size: 100%;
  }

  html[data-fs="l"] {
    font-size: 112.5%;
  }

  html[data-fs="xl"] {
    font-size: 125%;
  }
}
/* Self-hosted fonts for matematik.dev (T-0003, T-0105).
 *
 * "MTK Text" is Atkinson Hyperlegible Next (SIL OFL 1.1, see
 * OFL-AtkinsonHyperlegibleNext.txt), subset to latin + latin-ext +
 * punctuation and instanced at 400/700 from the variable font.
 * "MTK Math" is Libertinus Math (SIL OFL 1.1, see OFL-Libertinus.txt),
 * subset to the K-12 math ranges with the MATH table kept.
 * Details and subset commands: README.md in this directory.
 */

@font-face {
  font-family: "MTK Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/text-regular.woff2") format("woff2");
}

@font-face {
  font-family: "MTK Text";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/text-bold.woff2") format("woff2");
}

@font-face {
  font-family: "MTK Math";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/math.woff2") format("woff2");
}
/* base.css — minimal reset plus element defaults.
 * File 3 of the concatenated app bundle (file 2 is SA-D's fonts.css). */

@layer reset {
  *, *::before, *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
  }

  img, svg, video {
    max-width: 100%;
    height: auto;
  }

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

@layer base {
  html {
    text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  /* The page ground: squared notebook paper (light) or a chalk-dusted
     blackboard (dark), both pure CSS gradients from the tokens. */
  body {
    background-color: var(--c-bg);
    background-image: var(--bg-image);
    background-size: var(--bg-size);
    color: var(--c-text);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3, h4 {
    line-height: var(--lh-heading);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    font-weight: 700;
  }

  h1 {
    font-size: var(--fs-h1);
  }

  h2 {
    font-size: var(--fs-h2);
  }

  h3 {
    font-size: var(--fs-h3);
  }

  p, li {
    overflow-wrap: break-word;
    text-wrap: pretty;
  }

  a {
    color: var(--c-accent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
    transition: color var(--dur-1) var(--ease-out);
  }

  a:visited {
    color: var(--c-accent);
  }

  a:hover {
    text-decoration-thickness: 0.14em;
  }

  /* One focus ring everywhere: thick, offset, never removed. */
  :focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
    border-radius: var(--radius-s);
  }

  /* MathML scales with the level theme via --math-scale (default 1.15em). */
  math {
    font-family: var(--font-math);
    font-size: var(--math-scale);
    font-feature-settings: "dtls" off;
  }

  /* Accented identifiers (\widehat{A}) use the dotless glyphs. */
  math .dtls {
    font-feature-settings: "dtls" on;
  }

  ::selection {
    background: var(--c-hl);
    color: var(--c-text);
  }

  hr {
    border: 0;
    border-block-start: 2px dashed var(--c-border);
    margin-block: var(--space-l);
  }

  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }

    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      animation-delay: 0ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}
/* layout.css — page frame: container, header, footer, skip link.
 * File 4 of the concatenated app bundle. Fluid down to 320px; no fixed
 * widths that can force horizontal page scroll at 400% zoom. */

@layer layout {
  .skip-link {
    position: absolute;
    inset-inline-start: var(--space-m);
    top: -100%;
    z-index: 100;
    background: var(--c-text);
    color: var(--c-bg);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-m);
    text-decoration: none;
    font-weight: 700;
  }

  .skip-link:focus-visible {
    top: var(--space-s);
  }

  .container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: max(var(--space-m), env(safe-area-inset-left));
  }

  /* Narrow reading column for question/note content (~65ch). */
  .prose {
    max-width: 65ch;
  }

  /* Centered question column, up to ~760px on desktop. */
  .question-column {
    width: 100%;
    max-width: var(--column);
  }

  /* Header: brand, level tabs, account link and the appearance menu. */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--c-bg) 86%, transparent);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 1px solid var(--c-border);
  }

  .site-header-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-l);
    padding-block: var(--space-s);
  }

  .site-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    font-weight: 700;
    font-size: var(--fs-l);
    letter-spacing: var(--tracking-tight);
    text-decoration: none;
    color: var(--c-text);
    margin-inline-end: auto;
    min-block-size: var(--tap);
  }

  .site-brand:visited {
    color: var(--c-text);
  }

  .brand-mark {
    display: inline-grid;
    place-items: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 0.7rem;
    background: var(--c-accent);
    color: var(--c-accent-ink);
    box-shadow: var(--shadow-press);
    transform: rotate(-4deg);
    transition: transform var(--dur-2) var(--ease-spring);
  }

  .site-brand:hover .brand-mark {
    transform: rotate(4deg) scale(1.06);
  }

  .brand-mark svg {
    inline-size: 1.35rem;
    block-size: 1.35rem;
  }

  .brand-tld {
    color: var(--c-muted);
    font-weight: 400;
  }

  .site-main {
    display: block;
    flex: 1 0 auto;
    padding-block: var(--space-l) var(--space-2xl);
  }

  /* Footer: brand line, links and the licence note. */
  .site-footer {
    border-block-start: 1px solid var(--c-border);
    background: color-mix(in srgb, var(--c-surface) 70%, transparent);
    padding-block: var(--space-xl);
    color: var(--c-muted);
    font-size: var(--fs-s);
  }

  .site-footer-inner {
    display: grid;
    gap: var(--space-m);
  }

  .footer-brand {
    font-weight: 700;
    color: var(--c-text);
    font-size: var(--fs-l);
  }

  .footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-l);
    list-style: none;
    padding: 0;
  }

  .footer-links a {
    color: var(--c-muted);
    display: inline-block;
    min-block-size: var(--tap);
    line-height: var(--tap);
  }

  @media (min-width: 48rem) {
    .site-footer-inner {
      grid-template-columns: auto 1fr;
      align-items: center;
    }

    .footer-note {
      grid-column: 1 / -1;
    }
  }
}
/* components.css — shared building blocks: buttons, header navigation,
 * the appearance menu, highlighter marks, chips, empty states, the error
 * page and the theme demo blocks.
 * File 5 of the concatenated app bundle. Token variables only. */

@layer components {
  /* Buttons. The primary button is a pressable key: it sits on a solid
     bottom edge and sinks into it when pressed. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.7em 1.15em;
    min-block-size: 3rem;
    border: 2px solid var(--c-border);
    border-radius: var(--radius-m);
    background: var(--c-surface);
    color: var(--c-text);
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--shadow-press-soft);
    transition:
      transform var(--dur-1) var(--ease-out),
      box-shadow var(--dur-1) var(--ease-out),
      border-color var(--dur-1) var(--ease-out),
      background-color var(--dur-1) var(--ease-out);
  }

  .btn:visited {
    color: var(--c-text);
  }

  .btn:hover {
    border-color: var(--c-border-strong);
    transform: translateY(-1px);
  }

  .btn:active {
    transform: translateY(3px);
    box-shadow: none;
  }

  .btn-primary,
  .btn-primary:visited {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-accent-ink);
    box-shadow: var(--shadow-press);
  }

  .btn-primary:hover {
    border-color: var(--c-accent);
    filter: brightness(1.06);
  }

  .btn-danger,
  .btn-danger:visited {
    background: var(--c-incorrect);
    border-color: var(--c-incorrect);
    color: var(--c-surface);
  }

  .btn-ghost,
  .btn-ghost:visited {
    border-color: transparent;
    background: transparent;
    color: var(--c-accent);
    box-shadow: none;
    text-decoration: underline;
    min-block-size: 0;
    padding: var(--space-xs) var(--space-s);
  }

  .btn-ghost:hover {
    transform: none;
  }

  .btn-lg {
    font-size: var(--fs-l);
    min-block-size: 3.5rem;
    padding-inline: 1.5em;
  }

  .btn-arrow::after {
    content: "→";
    transition: transform var(--dur-2) var(--ease-spring);
  }

  .btn-arrow:hover::after {
    transform: translateX(4px);
  }

  /* Header level tabs. */
  .level-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
  }

  .level-nav a {
    display: inline-block;
    min-block-size: var(--tap);
    line-height: var(--tap);
    padding-inline: var(--space-m);
    border-radius: var(--radius-pill);
    color: var(--c-text);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--dur-1) var(--ease-out);
  }

  .level-nav a:hover {
    background: var(--c-surface-2);
  }

  .level-nav a[aria-current="true"] {
    background: var(--c-level-soft);
    color: var(--c-level);
  }

  /* The appearance menu: a disclosure, so it needs no JavaScript. */
  .prefs-menu {
    position: relative;
  }

  .prefs-menu > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: var(--tap);
    padding-inline: var(--space-m);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    font-weight: 700;
    cursor: pointer;
  }

  .prefs-menu > summary::-webkit-details-marker {
    display: none;
  }

  .prefs-menu > summary svg {
    inline-size: 1.2rem;
    block-size: 1.2rem;
  }

  .prefs-menu[open] > summary {
    border-color: var(--c-accent);
  }

  .prefs-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + var(--space-s));
    z-index: 60;
    display: grid;
    gap: var(--space-m);
    min-inline-size: 16rem;
    padding: var(--space-m);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-2);
    animation: pop-in var(--dur-2) var(--ease-spring);
    transform-origin: top right;
  }

  .prefs-title {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-muted);
    margin-block-end: var(--space-xs);
  }

  .pref-group {
    display: flex;
    gap: var(--space-xs);
  }

  .pref-group a {
    flex: 1;
    display: inline-block;
    min-inline-size: var(--tap);
    min-block-size: var(--tap);
    line-height: var(--tap);
    text-align: center;
    text-decoration: none;
    color: var(--c-text);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-m);
    padding-inline: var(--space-s);
    font-weight: 700;
  }

  .pref-group a:hover {
    border-color: var(--c-border-strong);
  }

  .pref-group a[aria-current="true"] {
    background: var(--c-text);
    border-color: var(--c-text);
    color: var(--c-bg);
  }

  /* Highlighter: a marker stroke behind the words, drawn in on load. */
  .hl {
    background-image: linear-gradient(
      transparent 58%,
      var(--c-hl) 58%,
      var(--c-hl) 90%,
      transparent 90%
    );
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    padding-inline: 0.08em;
    animation: hl-draw 900ms 200ms var(--ease-out) both;
  }

  .hl-mint {
    --c-hl: var(--c-hl-mint);
  }

  .hl-pink {
    --c-hl: var(--c-hl-pink);
  }

  /* Eyebrow labels above headings. */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-level);
  }

  /* Badges and chips. */
  .badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    font-size: var(--fs-xs);
    font-weight: 700;
    padding: 0.2em 0.65em;
    border-radius: var(--radius-pill);
    background: var(--c-surface-2);
    color: var(--c-muted);
    white-space: nowrap;
  }

  .badge-ready {
    background: var(--c-correct-soft);
    color: var(--c-correct);
  }

  .badge-soon {
    background: var(--c-surface-2);
    color: var(--c-muted);
  }

  /* Difficulty: five pencil dots, the rating filled in. */
  .difficulty {
    display: inline-flex;
    align-items: center;
    gap: 3px;
  }

  .difficulty i {
    inline-size: 0.55rem;
    block-size: 0.55rem;
    border-radius: 50%;
    border: 2px solid var(--c-border-strong);
  }

  .difficulty i.on {
    background: var(--c-level);
    border-color: var(--c-level);
  }

  /* Empty and "hazırlanıyor" states. */
  .empty-state {
    display: grid;
    justify-items: start;
    gap: var(--space-s);
    background: var(--c-surface);
    background-image: var(--sheet-image);
    background-size: 22px 22px;
    border: 2px dashed var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-xl) var(--space-l);
    max-width: 65ch;
  }

  .empty-state-art {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    color: var(--c-level);
    animation: float 4s ease-in-out infinite;
  }

  .empty-state-title {
    font-size: var(--fs-h3);
    font-weight: 700;
  }

  /* Error page: icon + text, never color alone. */
  .error-page {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: var(--space-s);
    padding-block: var(--space-2xl);
  }

  .error-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 5rem;
    block-size: 5rem;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--c-pen-red);
    border: 3px solid var(--c-pen-red);
    border-radius: 50%;
    transform: rotate(-8deg);
    animation: wobble 1.2s var(--ease-spring) both;
  }

  .error-code {
    color: var(--c-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  .error-page h1 {
    margin-block: var(--space-xs);
  }

  .error-page > p {
    max-width: 52ch;
  }

  /* Theme demo blocks (/_dev/tema/*). */
  .demo-section {
    margin-block: var(--space-l);
  }

  .demo-section > h2 {
    margin-block-end: var(--space-s);
    padding-block-end: var(--space-xs);
    border-block-end: 1px solid var(--c-border);
  }

  .type-scale {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-s);
  }

  .type-scale .stem-sample {
    font-size: var(--fs-stem);
  }

  .type-scale .choice-sample {
    font-size: var(--fs-choice);
  }

  .swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: var(--space-s);
    list-style: none;
    padding: 0;
  }

  .swatch {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    overflow: hidden;
  }

  .swatch-chip {
    display: block;
    block-size: 3rem;
  }

  .swatch-chip.is-bg { background: var(--c-bg); }
  .swatch-chip.is-surface { background: var(--c-surface); }
  .swatch-chip.is-text { background: var(--c-text); }
  .swatch-chip.is-muted { background: var(--c-muted); }
  .swatch-chip.is-accent { background: var(--c-accent); }
  .swatch-chip.is-correct { background: var(--c-correct); }
  .swatch-chip.is-incorrect { background: var(--c-incorrect); }
  .swatch-chip.is-border { background: var(--c-border); }

  .swatch-label {
    display: block;
    padding: var(--space-xs) var(--space-s);
    font-size: 1rem;
  }

  .sample-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-m);
    box-shadow: var(--shadow-1);
  }

  .sample-card .stem-sample {
    font-size: var(--fs-stem);
    margin-block-end: var(--space-s);
  }

  .feedback-sample {
    margin-block-start: var(--space-s);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-m);
    border: 1px solid var(--c-border);
  }

  .feedback-sample.correct {
    border-color: var(--c-correct);
  }

  .feedback-sample.incorrect {
    border-color: var(--c-incorrect);
  }

  /* Shared keyframes. */
  @keyframes draw {
    to { stroke-dashoffset: 0; }
  }

  @keyframes hl-draw {
    from { background-size: 0% 100%; }
    to { background-size: 100% 100%; }
  }

  @keyframes pop-in {
    from { opacity: 0; transform: scale(0.94) translateY(-4px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes rise-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes float {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-8px) rotate(3deg); }
  }

  @keyframes wobble {
    0% { transform: rotate(-8deg) scale(0.6); opacity: 0; }
    60% { transform: rotate(6deg) scale(1.08); opacity: 1; }
    100% { transform: rotate(-8deg) scale(1); }
  }
}
/* content.css — concept/question pages: breadcrumb, the notebook sheet
 * (note card and question card), question list cards, the filter form,
 * the optical-form choice bubbles, hint/solution disclosures, the answer
 * line, pagination, outcome lists and error suggestions.
 * Token variables only; no hard-coded colors, sizes or radii. */

@layer components {
  /* Screen-reader-only text (choice fieldset legends). */
  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Breadcrumb trail. */
  .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-s);
    list-style: none;
    padding: 0;
    margin-block-end: var(--space-l);
    font-size: var(--fs-s);
    color: var(--c-muted);
  }

  .breadcrumb a {
    color: var(--c-muted);
    text-decoration: none;
  }

  .breadcrumb a:hover {
    color: var(--c-accent);
    text-decoration: underline;
  }

  .breadcrumb li + li::before {
    content: "/";
    margin-inline-end: var(--space-s);
    color: var(--c-border-strong);
  }

  .breadcrumb [aria-current="page"] {
    color: var(--c-text);
    font-weight: 700;
  }

  /* The study column: question, practice and check pages centre their
     header and the question sheet in one reading column. */
  .study {
    max-width: var(--column);
    margin-inline: auto;
  }

  /* The notebook sheet: white paper, faint squares and a red margin. The
     note card and the question card both sit on it. */
  .sheet,
  .note-card {
    --margin-x: 2.75rem;
    position: relative;
    background-color: var(--c-surface);
    background-image:
      linear-gradient(90deg, transparent calc(var(--margin-x) - 1px), var(--c-margin) calc(var(--margin-x) - 1px), var(--c-margin) calc(var(--margin-x) + 1px), transparent calc(var(--margin-x) + 1px)),
      var(--sheet-image);
    background-size: 100% 100%, 24px 24px, 24px 24px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-l) var(--space-l) var(--space-l) calc(var(--margin-x) + var(--space-m));
    box-shadow: var(--shadow-1);
  }

  @media (max-width: 30rem) {
    .sheet,
    .note-card {
      --margin-x: 1.25rem;
      padding-inline: calc(var(--margin-x) + var(--space-s)) var(--space-m);
    }
  }

  /* Concept header. */
  .concept-summary {
    max-width: 60ch;
    font-size: var(--fs-l);
    color: var(--c-muted);
  }

  .concept-grades {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
    list-style: none;
    padding: 0;
    margin-block: var(--space-s) 0;
  }

  .concept-grades a {
    display: inline-block;
    padding: 0.15em 0.7em;
    border-radius: var(--radius-pill);
    background: var(--c-level-soft);
    color: var(--c-level);
    font-weight: 700;
    font-size: var(--fs-s);
    text-decoration: none;
  }

  p.concept-grades {
    color: var(--c-muted);
  }

  .concept-hero {
    display: grid;
    gap: var(--space-m);
    margin-block-end: var(--space-xl);
  }

  .concept-practice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m);
    margin-block: var(--space-l);
  }

  /* Note card blocks: Özet, Kural, Örnek, figure, Dikkat! */
  .note-card {
    max-width: 68ch;
    animation: rise-in var(--dur-3) var(--ease-out) both;
  }

  .note-card .note {
    display: grid;
    gap: var(--space-l);
  }

  .note-card .note > div {
    display: grid;
    gap: var(--space-xs);
  }

  .note-card .note h3 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    font-size: var(--fs-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-level);
  }

  .note-card .summary p {
    font-size: var(--fs-l);
  }

  .note-card .rule {
    font-size: var(--fs-stem);
    background: var(--c-level-soft);
    border-radius: var(--radius-m);
    padding: var(--space-m);
  }

  .note-card .rule h3 {
    color: var(--c-level);
  }

  .note-card .warning {
    position: relative;
    border: 2px solid var(--c-pen-red);
    border-radius: var(--radius-m);
    padding: var(--space-m) var(--space-m) var(--space-m) 3rem;
    color: var(--c-text);
  }

  .note-card .warning::before {
    content: "!";
    position: absolute;
    inset-inline-start: var(--space-m);
    top: var(--space-m);
    display: inline-grid;
    place-items: center;
    inline-size: 1.4rem;
    block-size: 1.4rem;
    border-radius: 50%;
    background: var(--c-pen-red);
    color: var(--c-surface);
    font-weight: 700;
    font-size: var(--fs-xs);
  }

  .note-card .warning h3 {
    color: var(--c-pen-red);
  }

  .note-card ol {
    padding-inline-start: 1.4em;
  }

  .note-updated {
    color: var(--c-muted);
    font-size: var(--fs-xs);
    margin-block-start: var(--space-m);
  }

  /* Question filter form (plain GET, works without JS). */
  .question-filter {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    align-items: end;
    margin-block-end: var(--space-l);
  }

  .question-filter label {
    display: grid;
    gap: var(--space-xs);
    font-size: var(--fs-s);
    font-weight: 700;
  }

  .question-filter select,
  .question-filter button {
    min-block-size: var(--tap);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-m);
    background: var(--c-surface);
    color: var(--c-text);
    padding-inline: var(--space-s);
  }

  .question-filter button {
    background: var(--c-text);
    border-color: var(--c-text);
    color: var(--c-bg);
    font-weight: 700;
    padding-inline: var(--space-m);
    cursor: pointer;
  }

  /* Question cards on concept pages: the whole card is the link. */
  .question-list {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    list-style: none;
    padding: 0;
    counter-reset: q;
  }

  .question-list > li {
    counter-increment: q;
  }

  .question-card {
    position: relative;
    display: grid;
    gap: var(--space-s);
    block-size: 100%;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-l);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
  }

  .question-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: var(--c-level);
  }

  .question-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-m);
    color: var(--c-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
  }

  .question-card-meta::before {
    content: counter(q, decimal-leading-zero);
    font-size: var(--fs-l);
    color: var(--c-level);
  }

  .question-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .question-card-link a {
    font-weight: 700;
    text-decoration: none;
  }

  .question-card-link a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  /* Question page header. */
  .question-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-m);
    color: var(--c-muted);
    font-size: var(--fs-s);
    font-weight: 700;
  }

  .question-column .stem {
    font-size: var(--fs-stem);
    line-height: 1.5;
  }

  .question-column .stem p + p {
    margin-block-start: var(--space-s);
  }

  .question-column .stem figure,
  .question-column .stem svg {
    margin-block: var(--space-m);
  }

  /* Choices: large answer cards with an optical-form bubble that fills in
     when chosen — the way students mark their answer sheets. */
  .choices {
    display: grid;
    gap: var(--space-s);
    border: 0;
    padding: 0;
    margin-block: var(--space-l) var(--space-m);
  }

  .choice {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-m);
    align-items: center;
    min-block-size: 3.5rem;
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    padding: var(--space-s) var(--space-m);
    font-size: var(--fs-choice);
    cursor: pointer;
    box-shadow: var(--shadow-press-soft);
    transition:
      transform var(--dur-1) var(--ease-out),
      border-color var(--dur-1) var(--ease-out),
      background-color var(--dur-1) var(--ease-out),
      box-shadow var(--dur-1) var(--ease-out);
  }

  .choice:hover {
    border-color: var(--c-accent);
    transform: translateY(-2px);
  }

  .choice:active {
    transform: translateY(2px);
    box-shadow: none;
  }

  /* The native radio stays in the tab order but is drawn by the bubble. */
  .choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
  }

  .choice:has(input:focus-visible) {
    outline: 3px solid var(--c-focus);
    outline-offset: 3px;
  }

  .choice-letter {
    display: inline-grid;
    place-items: center;
    inline-size: 2.4rem;
    block-size: 2.4rem;
    border-radius: 50%;
    border: 2px solid var(--c-border-strong);
    font-weight: 700;
    font-size: var(--fs-s);
    color: var(--c-muted);
    transition: background-color var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
  }

  .choice:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
  }

  .choice:has(input:checked) .choice-letter {
    background: var(--c-text);
    border-color: var(--c-text);
    color: var(--c-bg);
    transform: scale(1.08);
    animation: bubble-fill var(--dur-2) var(--ease-spring);
  }

  .choice:has(input:disabled) {
    cursor: default;
  }

  .choice:has(input:disabled):hover {
    transform: none;
    border-color: var(--c-border);
  }

  .choice .misconception {
    grid-column: 1 / -1;
    font-size: var(--fs-body);
    color: var(--c-muted);
    border-inline-start: 4px solid var(--c-border);
    padding-inline-start: var(--space-m);
  }

  /* Matching lists. */
  .matching {
    display: grid;
    gap: var(--space-m);
    margin-block: var(--space-m);
  }

  .match-left,
  .match-right {
    display: grid;
    gap: var(--space-xs);
    margin: 0;
    padding-inline-start: var(--space-l);
  }

  /* Hint and solution disclosures: tabs of paper that unfold. */
  details.solution,
  details.hints {
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    padding: 0 var(--space-m);
    margin-block: var(--space-m);
    transition: border-color var(--dur-2) var(--ease-out);
  }

  details.solution > summary,
  details.hints > summary {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-block-size: 3.25rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
  }

  details.solution > summary::-webkit-details-marker,
  details.hints > summary::-webkit-details-marker {
    display: none;
  }

  details.hints > summary::before,
  details.solution > summary::before {
    display: inline-grid;
    place-items: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    border-radius: 50%;
    font-size: var(--fs-s);
    flex: none;
  }

  details.hints > summary::before {
    content: "?";
    background: var(--c-hl);
    color: var(--c-text);
  }

  details.solution > summary::before {
    content: "✓";
    background: var(--c-correct-soft);
    color: var(--c-correct);
  }

  details.hints > summary::after,
  details.solution > summary::after {
    content: "";
    margin-inline-start: auto;
    inline-size: 0.6rem;
    block-size: 0.6rem;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform var(--dur-2) var(--ease-out);
  }

  details[open].hints > summary::after,
  details[open].solution > summary::after {
    transform: rotate(225deg);
  }

  details[open].solution {
    border-color: var(--c-correct);
  }

  details[open].hints {
    border-color: var(--c-hl);
  }

  /* Unfolding: the body slides in, then each step follows in turn. */
  details[open] > :not(summary) {
    animation: rise-in var(--dur-2) var(--ease-out) both;
  }

  details.solution > ol,
  details.hints > ol {
    margin-block-end: var(--space-m);
  }

  /* Solution steps: numbered dots joined by a pencil line. */
  details.solution > ol {
    list-style: none;
    padding: 0;
    counter-reset: step;
    display: grid;
    gap: var(--space-m);
  }

  details.solution > ol > li {
    counter-increment: step;
    position: relative;
    padding-inline-start: 3rem;
    min-block-size: 2rem;
    animation: step-in var(--dur-3) var(--ease-out) both;
  }

  details.solution > ol > li::before {
    content: counter(step);
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    display: inline-grid;
    place-items: center;
    inline-size: 2rem;
    block-size: 2rem;
    border-radius: 50%;
    background: var(--c-surface);
    border: 2px solid var(--c-correct);
    color: var(--c-correct);
    font-weight: 700;
    font-size: var(--fs-s);
  }

  details.solution > ol > li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-inline-start: calc(1rem - 1px);
    top: 2.1rem;
    bottom: calc(-1 * var(--space-m) + 0.1rem);
    border-inline-start: 2px dashed var(--c-border-strong);
  }

  details.solution > ol > li:nth-child(1) { animation-delay: 80ms; }
  details.solution > ol > li:nth-child(2) { animation-delay: 260ms; }
  details.solution > ol > li:nth-child(3) { animation-delay: 440ms; }
  details.solution > ol > li:nth-child(4) { animation-delay: 620ms; }
  details.solution > ol > li:nth-child(5) { animation-delay: 800ms; }
  details.solution > ol > li:nth-child(n + 6) { animation-delay: 980ms; }

  details.hints > ol {
    padding-inline-start: 1.4em;
  }

  /* "Doğru cevap": the answer, circled in green. */
  .answer-line {
    font-size: var(--fs-choice);
    margin-block: var(--space-xs) var(--space-m);
  }

  .answer-label {
    font-weight: 700;
    color: var(--c-correct);
  }

  .answer-body {
    border: 2px solid var(--c-correct);
    background: var(--c-correct-soft);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    margin-block-end: var(--space-m);
  }

  .answer-list {
    margin-block: 0 var(--space-m);
  }

  .answer-list li::marker {
    color: var(--c-muted);
  }

  /* Neighbour, outcome and grade link lists. */
  .concept-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    list-style: none;
    padding: 0;
  }

  .concept-links a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: var(--tap);
    padding-inline: var(--space-m);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-pill);
    background: var(--c-surface);
    font-weight: 700;
    text-decoration: none;
  }

  .concept-links a:hover {
    border-color: var(--c-accent);
  }

  .badge-active,
  .badge-primary {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    color: var(--c-correct);
    background: var(--c-correct-soft);
    border-radius: var(--radius-pill);
    padding: 0.1em 0.6em;
    margin-inline-start: var(--space-xs);
  }

  .outcome-refs {
    display: grid;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    font-size: var(--fs-s);
  }

  /* Pagination trail. */
  .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    list-style: none;
    padding: 0;
    margin-block-start: var(--space-l);
  }

  .pagination a,
  .pagination [aria-current="page"] {
    display: inline-block;
    min-inline-size: var(--tap);
    min-block-size: var(--tap);
    line-height: calc(var(--tap) - 4px);
    text-align: center;
    text-decoration: none;
    border: 2px solid var(--c-border);
    border-radius: var(--radius-m);
    background: var(--c-surface);
    padding-inline: var(--space-s);
    font-weight: 700;
  }

  .pagination [aria-current="page"] {
    background: var(--c-text);
    border-color: var(--c-text);
    color: var(--c-bg);
  }

  /* Small print under the question. */
  .question-report {
    margin-block-start: var(--space-l);
    font-size: var(--fs-s);
  }

  .question-report a {
    color: var(--c-muted);
  }

  /* Error page suggestion and follow-up lists. */
  .error-suggestions,
  .error-links {
    display: inline-block;
    text-align: start;
    margin-block: var(--space-s) var(--space-m);
  }

  @keyframes bubble-fill {
    0% { transform: scale(0.7); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1.08); }
  }

  @keyframes step-in {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: none; }
  }
}
/* figures.css — styling for the SVG/HTML emitted by internal/render/figure.
 * Member of the concatenated app bundle (see internal/assets); it must stay
 * inside @layer components. Every SVG root carries class="fig fig-<kind>"
 * (e.g. fig-number_line); the table root is table.fig-table. Colors resolve
 * only through design tokens so dark mode and level themes apply. */

@layer components {
  svg.fig {
    display: block;
    max-width: 100%;
    height: auto;
    margin: var(--space-m) auto;
  }

  svg.fig text {
    font-family: var(--font-text);
    font-size: 12px;
    fill: var(--c-text);
  }

  /* Axes, grid and ticks (number_line, coordinate_plane, bar_chart). */
  svg.fig .fig-axis {
    fill: none;
    stroke: var(--c-text);
  }

  svg.fig .fig-grid {
    fill: none;
    stroke: var(--c-border);
    opacity: 0.4;
  }

  svg.fig .fig-tick {
    stroke: var(--c-text);
  }

  svg.fig .fig-tick-label {
    font-size: 11px;
    fill: var(--c-muted);
  }

  /* Points, segments, curves and their labels. */
  svg.fig .fig-point {
    fill: var(--c-accent);
    stroke: none;
  }

  svg.fig .fig-seg {
    fill: none;
    stroke: var(--c-text);
  }

  svg.fig .fig-curve {
    fill: none;
  }

  svg.fig .fig-c1 { stroke: var(--c-accent); }
  svg.fig .fig-c2 { stroke: var(--c-accent-2); }
  svg.fig .fig-c3 { stroke: var(--c-correct); }
  svg.fig .fig-c4 { stroke: var(--c-incorrect); }
  svg.fig .fig-c5 { stroke: var(--c-muted); }
  svg.fig .fig-c6 { stroke: var(--c-text); }

  svg.fig .fig-label {
    fill: var(--c-text);
  }

  svg.fig .fig-value {
    font-size: 11px;
    font-weight: 600;
    fill: var(--c-text);
  }

  svg.fig .fig-legend {
    fill: var(--c-text);
  }

  svg.fig .fig-caption {
    fill: var(--c-muted);
  }

  /* Fraction model cells; .fig-fill comes after .fig-cell so the shaded
   * fill wins at equal specificity while keeping the cell stroke. */
  svg.fig .fig-cell {
    fill: var(--c-surface);
    stroke: var(--c-border);
  }

  svg.fig .fig-fill {
    fill: var(--c-accent);
  }

  /* Geometry construction markers. */
  svg.fig .fig-arc {
    fill: none;
    stroke: var(--c-accent-2);
  }

  svg.fig .fig-angle {
    fill: none;
    stroke: var(--c-accent);
  }

  /* Bar and pie fills cycle fig-s1..fig-s6; separators stay legible in
   * both schemes. */
  svg.fig .fig-bar {
    stroke: var(--c-border);
  }

  svg.fig .fig-slice {
    stroke: var(--c-bg);
  }

  svg.fig .fig-swatch {
    stroke: var(--c-border);
  }

  svg.fig .fig-s1 { fill: var(--c-accent); }
  svg.fig .fig-s2 { fill: var(--c-accent-2); }
  svg.fig .fig-s3 { fill: var(--c-correct); }
  svg.fig .fig-s4 { fill: var(--c-incorrect); }
  svg.fig .fig-s5 { fill: var(--c-muted); }
  svg.fig .fig-s6 { fill: var(--c-border); }

  /* Semantic tables (kind "table"). */
  table.fig-table {
    border-collapse: collapse;
    margin: var(--space-m) auto;
    font-size: 1rem;
  }

  table.fig-table caption {
    padding-block-end: var(--space-s);
    font-weight: 600;
    color: var(--c-text);
  }

  table.fig-table th,
  table.fig-table td {
    padding: var(--space-xs) var(--space-s);
    border: 1px solid var(--c-border);
    text-align: start;
  }

  table.fig-table th {
    background-color: var(--c-surface);
    color: var(--c-text);
  }
}
/* nav.css — navigation pages: home, level, grade, theme, curriculum
 * browsers, exam maps and static pages. Token variables only. */

@layer components {
  .lede {
    font-size: var(--fs-l);
    color: var(--c-muted);
    max-width: 60ch;
  }

  .muted {
    color: var(--c-muted);
  }

  .count-line {
    color: var(--c-muted);
    font-size: var(--fs-s);
  }

  .status {
    color: var(--c-accent-2);
    font-size: var(--fs-body);
  }

  .page-head {
    display: grid;
    gap: var(--space-s);
    margin-block-end: var(--space-xl);
  }

  .section {
    margin-block: var(--space-2xl) 0;
  }

  .section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-s) var(--space-m);
    margin-block-end: var(--space-l);
  }

  .level-cards,
  .grade-cards,
  .grade-links,
  .recent-list,
  .exam-links,
  .theme-list,
  .concept-chips,
  .framework-list,
  .version-list,
  .program-grades,
  .content-frame,
  .key-terms,
  .skills,
  .steps-row {
    list-style: none;
    padding-left: 0;
  }

  /* Home hero: the promise, the first step, and a floating notebook. */
  .hero {
    display: grid;
    gap: var(--space-xl);
    align-items: center;
    padding-block: var(--space-xl) var(--space-l);
  }

  .hero-copy {
    display: grid;
    gap: var(--space-m);
    justify-items: start;
    animation: rise-in var(--dur-3) var(--ease-out) both;
  }

  .hero-title {
    font-size: var(--fs-display);
    line-height: 1.04;
    letter-spacing: -0.03em;
  }

  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    margin-block-start: var(--space-s);
  }

  .hero-art {
    justify-self: center;
    inline-size: min(100%, 26rem);
    color: var(--c-text);
    animation: float 6s ease-in-out infinite;
  }

  .hero-art .sheet {
    fill: var(--c-surface);
    stroke: var(--c-border-strong);
  }

  .hero-art .grid-line {
    stroke: var(--c-grid);
  }

  .hero-art .margin-line {
    stroke: var(--c-margin);
  }

  .hero-art .ink {
    fill: var(--c-text);
  }

  .hero-art .ink-accent {
    fill: var(--c-accent);
  }

  .hero-art .stroke-accent {
    stroke: var(--c-accent);
    fill: none;
  }

  .hero-art .stroke-correct {
    stroke: var(--c-correct);
    fill: none;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: draw 700ms 900ms var(--ease-out) forwards;
  }

  .hero-art .marker {
    fill: var(--c-hl);
  }

  .hero-art .pencil-body {
    fill: var(--c-confetti-1);
  }

  .hero-art .pencil-tip {
    fill: var(--c-text);
  }

  .hero-art .sparkle {
    fill: var(--c-confetti-3);
    transform-origin: center;
    transform-box: fill-box;
    animation: twinkle 2.4s ease-in-out infinite;
  }

  .hero-art .sparkle:nth-of-type(2) {
    fill: var(--c-confetti-2);
    animation-delay: 0.8s;
  }

  @media (min-width: 56rem) {
    .hero {
      grid-template-columns: 1.15fr 0.85fr;
      padding-block: var(--space-2xl) var(--space-xl);
    }
  }

  /* "How it works": three numbered notebook steps (a real sequence). */
  .steps-row {
    display: grid;
    gap: var(--space-m);
    counter-reset: step;
  }

  .steps-row li {
    counter-increment: step;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xs) var(--space-m);
    align-items: start;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-l);
    box-shadow: var(--shadow-1);
  }

  .steps-row li::before {
    content: counter(step);
    grid-row: span 2;
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: 50%;
    border: 2px solid var(--c-level);
    color: var(--c-level);
    font-weight: 700;
    font-size: var(--fs-l);
  }

  .steps-row h3 {
    font-size: var(--fs-l);
  }

  .steps-row p {
    color: var(--c-muted);
  }

  @media (min-width: 48rem) {
    .steps-row {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* Level cards: notebook covers with a coloured spine. */
  .level-cards {
    display: grid;
    gap: var(--space-l);
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  }

  .level-card {
    position: relative;
    display: grid;
    gap: var(--space-m);
    align-content: start;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-l) var(--space-l) var(--space-l) calc(var(--space-l) + 0.75rem);
    box-shadow: var(--shadow-1);
    overflow: hidden;
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }

  .level-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: 0.75rem;
    background: var(--c-level);
  }

  .level-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
  }

  .level-card h3 {
    font-size: var(--fs-h2);
  }

  .level-card h3 a {
    color: var(--c-text);
    text-decoration: none;
  }

  .level-card h3 a:hover {
    color: var(--c-level);
  }

  .level-card .level-range {
    color: var(--c-muted);
    font-size: var(--fs-s);
  }

  .level-card.is-ilkokul { --c-level: var(--c-lvl-ilkokul); --c-level-soft: var(--c-lvl-ilkokul-soft); }
  .level-card.is-ortaokul { --c-level: var(--c-lvl-ortaokul); --c-level-soft: var(--c-lvl-ortaokul-soft); }
  .level-card.is-lise { --c-level: var(--c-lvl-lise); --c-level-soft: var(--c-lvl-lise-soft); }

  .grade-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  .grade-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-block-size: var(--tap);
    padding-inline: var(--space-m);
    border-radius: var(--radius-pill);
    border: 2px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-muted);
    font-weight: 700;
    text-decoration: none;
    transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  }

  .grade-chip:visited {
    color: var(--c-muted);
  }

  .grade-chip:hover {
    border-color: var(--c-border-strong);
    transform: translateY(-1px);
  }

  .grade-chip.is-ready,
  .grade-chip.is-ready:visited {
    border-color: var(--c-level);
    background: var(--c-level-soft);
    color: var(--c-level);
  }

  .grade-chip.is-ready::after {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: 50%;
    background: var(--c-correct);
    box-shadow: 0 0 0 3px var(--c-correct-soft);
  }

  /* Grade cards on level pages. */
  .grade-cards {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }

  .grade-card {
    display: grid;
    justify-items: start;
    align-content: start;
    gap: var(--space-s);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-l);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  }

  .grade-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
  }

  .grade-card h3 a {
    color: var(--c-text);
    text-decoration: none;
  }

  .grade-card.is-soon {
    background: transparent;
    box-shadow: none;
    border-style: dashed;
  }

  .grade-card.is-soon:hover {
    transform: none;
  }

  /* Theme cards on grade pages: numbered like notebook chapters. */
  .theme-list {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    counter-reset: none;
  }

  .theme-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-xs) var(--space-m);
    align-items: start;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-l);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
    animation: rise-in var(--dur-3) var(--ease-out) both;
  }

  .theme-item:nth-child(2) { animation-delay: 60ms; }
  .theme-item:nth-child(3) { animation-delay: 120ms; }
  .theme-item:nth-child(4) { animation-delay: 180ms; }
  .theme-item:nth-child(5) { animation-delay: 240ms; }
  .theme-item:nth-child(n + 6) { animation-delay: 300ms; }

  .theme-item:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
    border-color: var(--c-level);
  }

  .theme-item.is-soon {
    opacity: 0.78;
  }

  .theme-number {
    grid-row: span 2;
    display: inline-grid;
    place-items: center;
    inline-size: 3rem;
    block-size: 3rem;
    border-radius: 0.9rem;
    background: var(--c-level-soft);
    color: var(--c-level);
    font-weight: 700;
    font-size: var(--fs-l);
    transform: rotate(-3deg);
  }

  .theme-item h3 {
    font-size: var(--fs-l);
  }

  /* The whole card is the link target; the heading link stretches. */
  .theme-item h3 a {
    color: var(--c-text);
    text-decoration: none;
  }

  .theme-item h3 a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }

  .theme-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  /* Recent items on the home page. */
  .recent-list {
    display: grid;
    gap: var(--space-s);
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  }

  .recent-list li {
    display: grid;
    gap: var(--space-xs);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-m);
  }

  .recent-list a {
    font-weight: 700;
  }

  .recent-kind,
  .recent-grade {
    color: var(--c-muted);
    font-size: var(--fs-xs);
  }

  /* Theme page: outcome cards with concept chips. */
  .outcome-list {
    display: grid;
    gap: var(--space-m);
    padding-left: 0;
    list-style: none;
  }

  .outcome-item {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-l);
    box-shadow: var(--shadow-1);
    display: grid;
    gap: var(--space-s);
  }

  .outcome-code {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--c-level);
    background: var(--c-level-soft);
    border-radius: var(--radius-s);
    padding: 0.15em 0.55em;
    text-decoration: none;
    justify-self: start;
  }

  .outcome-text {
    font-size: var(--fs-l);
  }

  .concept-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  /* Concept chips look like sticky notes. */
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    min-block-size: var(--tap);
    background: var(--c-hl);
    color: var(--c-text);
    border-radius: var(--radius-s);
    padding: var(--space-xs) var(--space-m);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 2px 3px 0 rgb(0 0 0 / 0.08);
    transform: rotate(-1deg);
    transition: transform var(--dur-1) var(--ease-spring);
  }

  .chip:visited {
    color: var(--c-text);
  }

  .concept-chips li:nth-child(even) .chip {
    background: var(--c-hl-mint);
    transform: rotate(1deg);
  }

  .concept-chips li:nth-child(3n) .chip {
    background: var(--c-hl-pink);
  }

  .chip:hover {
    transform: rotate(0deg) scale(1.04);
  }

  .chip.is-soon {
    background: var(--c-surface-2);
    color: var(--c-muted);
    box-shadow: none;
  }

  .chip-count {
    font-size: var(--fs-xs);
    font-weight: 700;
    opacity: 0.75;
  }

  /* Curriculum browsers. */
  .framework-item {
    margin-bottom: var(--space-xl);
  }

  .version-list > li {
    margin-bottom: var(--space-m);
  }

  .program-grades {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  .program-theme,
  .exam-scope {
    margin-bottom: var(--space-xl);
  }

  .components {
    padding-left: var(--space-l);
  }

  .components li {
    margin-bottom: var(--space-s);
  }

  .component-label {
    font-weight: bold;
    margin-right: var(--space-xs);
  }

  .content-frame li,
  .key-terms li,
  .skills li {
    margin-bottom: var(--space-xs);
  }

  .static-prose {
    max-width: 65ch;
  }

  .static-prose h2 {
    margin-top: var(--space-l);
  }

  @keyframes twinkle {
    0%, 100% { transform: scale(0.6) rotate(0deg); opacity: 0.4; }
    50% { transform: scale(1.15) rotate(25deg); opacity: 1; }
  }
}
/* practice.css — practice sessions and single-question checks: the study
 * header with its segmented progress ruler, answer controls (text inputs,
 * true/false radios, inline blank inputs, matching selects), the verdict
 * banner with its effects (confetti and a drawn tick for a correct answer,
 * a gentle shake and the teacher's note for a wrong one), navigation and
 * the end-of-session summary with stars.
 *
 * Every effect is CSS only: no JavaScript, no inline styles, and nothing
 * moves under prefers-reduced-motion (base.css stops all animation).
 * Token variables only; no hard-coded colors, sizes or radii. */

@layer components {
  /* Study header: title, then the progress ruler and the score. */
  .study-head {
    display: grid;
    gap: var(--space-s);
    margin-block-end: var(--space-l);
  }

  .study-head h1 {
    font-size: var(--fs-h2);
  }

  .practice-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-m);
    color: var(--c-muted);
    font-size: var(--fs-s);
    font-weight: 700;
  }

  .practice-score {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--c-text);
  }

  .practice-score::before {
    content: "★";
    color: var(--c-confetti-1);
    font-size: 1.15em;
  }

  /* "+1" rises from the score after a correct answer. */
  .score-pop {
    position: absolute;
    inset-inline-start: 100%;
    top: -0.4rem;
    margin-inline-start: var(--space-xs);
    color: var(--c-correct);
    font-weight: 700;
    animation: score-pop 1.1s var(--ease-out) both;
  }

  /* The progress ruler: one tick per question. */
  .progress-steps {
    display: flex;
    gap: 4px;
    list-style: none;
    padding: 0;
    flex: 1 1 12rem;
    max-inline-size: 26rem;
  }

  .progress-steps li {
    flex: 1;
    block-size: 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--c-border);
  }

  .progress-steps li.is-done {
    background: var(--c-level);
  }

  .progress-steps li.is-current {
    background: var(--c-level);
    opacity: 0.45;
    animation: pulse 1.6s ease-in-out infinite;
  }

  .progress-steps li.is-correct {
    background: var(--c-correct);
    animation: tick-pop var(--dur-3) var(--ease-spring) both;
  }

  .progress-steps li.is-incorrect {
    background: var(--c-incorrect);
    animation: tick-pop var(--dur-3) var(--ease-spring) both;
  }

  .practice-notice {
    border-inline-start: 4px solid var(--c-accent);
    padding: var(--space-s) var(--space-m);
    background: var(--c-accent-soft);
    border-radius: var(--radius-s);
    max-width: 65ch;
  }

  /* The question sheet animates in on every new question. */
  .question-sheet {
    animation: sheet-in var(--dur-3) var(--ease-out) both;
  }

  /* Single text answer (numeric, expression) and fallback blank inputs. */
  .answer-field {
    display: grid;
    gap: var(--space-xs);
    max-width: 24rem;
    margin-block: var(--space-l) 0;
  }

  .answer-field label {
    font-weight: 700;
  }

  .answer-field input[type="text"],
  .blank-input {
    font: inherit;
    font-size: var(--fs-choice);
    color: var(--c-text);
    background: var(--c-surface);
    border: 2px solid var(--c-border-strong);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    min-block-size: 3.25rem;
    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
  }

  .answer-field input[type="text"]:focus,
  .blank-input:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 4px var(--c-accent-soft);
    outline: none;
  }

  .blank-input {
    min-inline-size: 8ch;
    max-inline-size: 100%;
    font-size: inherit;
    padding: var(--space-xs) var(--space-s);
    min-block-size: 2.75rem;
  }

  /* Doğru/Yanlış: two big cards instead of small radios. */
  .true-false {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-s);
    border: 0;
    padding: 0;
    margin-block: var(--space-l) 0;
  }

  .true-false legend {
    grid-column: 1 / -1;
    font-weight: 700;
    margin-block-end: var(--space-s);
  }

  .true-false label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-s);
    min-block-size: 3.5rem;
    font-size: var(--fs-choice);
    font-weight: 700;
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    background: var(--c-surface);
    box-shadow: var(--shadow-press-soft);
    cursor: pointer;
    transition: transform var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
  }

  .true-false label:hover {
    border-color: var(--c-accent);
    transform: translateY(-2px);
  }

  .true-false label:has(input:checked) {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
  }

  .true-false input[type="radio"] {
    inline-size: 1.4rem;
    block-size: 1.4rem;
    accent-color: var(--c-accent);
  }

  /* Matching: one select per left item. */
  .match-answers {
    display: grid;
    gap: var(--space-s);
    margin-block: var(--space-l) 0;
  }

  .match-field {
    display: grid;
    gap: var(--space-xs);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
  }

  .match-field select {
    font: inherit;
    color: var(--c-text);
    background: var(--c-surface);
    border: 2px solid var(--c-border-strong);
    border-radius: var(--radius-m);
    padding: var(--space-xs) var(--space-s);
    min-block-size: var(--tap);
    max-width: 100%;
  }

  /* Submit row and the Sonraki/Tekrar dene navigation forms. */
  .practice-submit {
    margin-block: var(--space-l) 0;
  }

  .practice-submit .btn {
    min-inline-size: 12rem;
  }

  .practice-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    margin-block: var(--space-l) 0;
  }

  .practice-nav form {
    margin: 0;
  }

  /* After the verdict: the chosen answer turns green or red. The banner
     sits before the question sheet, so a sibling selector reaches it. */
  .feedback-correct ~ .question-column .choice:has(input:checked),
  .feedback-correct ~ .question-column .true-false label:has(input:checked) {
    border-color: var(--c-correct);
    background: var(--c-correct-soft);
  }

  .feedback-correct ~ .question-column .choice:has(input:checked) .choice-letter {
    background: var(--c-correct);
    border-color: var(--c-correct);
    color: var(--c-surface);
  }

  .feedback-incorrect ~ .question-column .choice:has(input:checked) {
    border-color: var(--c-incorrect);
    background: var(--c-incorrect-soft);
    animation: shake 460ms var(--ease-out) 1;
  }

  .feedback-incorrect ~ .question-column .choice:has(input:checked) .choice-letter {
    background: var(--c-incorrect);
    border-color: var(--c-incorrect);
    color: var(--c-surface);
  }

  /* The verdict banner. */
  .feedback {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-m);
    align-items: start;
    border: 2px solid var(--c-border);
    border-radius: var(--radius-l);
    background: var(--c-surface);
    padding: var(--space-l);
    margin: 0 0 var(--space-l);
    box-shadow: var(--shadow-2);
    animation: banner-in var(--dur-3) var(--ease-spring) both;
  }

  .feedback-correct {
    border-color: var(--c-correct);
    background: linear-gradient(135deg, var(--c-correct-soft), var(--c-surface) 70%);
  }

  .feedback-incorrect {
    border-color: var(--c-incorrect);
    background: linear-gradient(135deg, var(--c-incorrect-soft), var(--c-surface) 70%);
    animation: banner-in var(--dur-3) var(--ease-spring) both, shake 520ms 260ms var(--ease-out) 1;
  }

  .feedback-invalid {
    border-color: var(--c-accent);
    background: linear-gradient(135deg, var(--c-accent-soft), var(--c-surface) 70%);
  }

  .feedback-icon {
    display: inline-grid;
    place-items: center;
    inline-size: 3.25rem;
    block-size: 3.25rem;
    border-radius: 50%;
    color: var(--c-surface);
    font-weight: 700;
    font-size: var(--fs-h3);
    animation: icon-pop var(--dur-3) 120ms var(--ease-spring) both;
  }

  .feedback-correct .feedback-icon {
    background: var(--c-correct);
  }

  .feedback-incorrect .feedback-icon {
    background: var(--c-incorrect);
  }

  .feedback-invalid .feedback-icon {
    background: var(--c-accent);
  }

  .feedback-icon svg {
    inline-size: 1.8rem;
    block-size: 1.8rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* The tick and the cross are drawn like a pen stroke. */
  .feedback-icon path {
    stroke-dasharray: 32;
    stroke-dashoffset: 32;
    animation: draw 520ms 380ms var(--ease-out) forwards;
  }

  .feedback-body {
    display: grid;
    gap: var(--space-s);
    min-inline-size: 0;
  }

  .feedback-title {
    font-weight: 700;
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    margin: 0;
  }

  .feedback-correct .feedback-title {
    color: var(--c-correct);
  }

  .feedback-incorrect .feedback-title {
    color: var(--c-incorrect);
  }

  .feedback-sub,
  .feedback-note {
    color: var(--c-muted);
    margin: 0;
  }

  .feedback-tip {
    margin: 0;
  }

  /* The teacher's note: the misconception, written in red pen. */
  .teacher-note {
    position: relative;
    border: 2px dashed var(--c-pen-red);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    background: var(--c-surface);
    transform: rotate(-0.4deg);
    animation: rise-in var(--dur-3) 300ms var(--ease-out) both;
  }

  .teacher-note-label {
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-pen-red);
  }

  .feedback-misconception {
    margin: 0;
  }

  .feedback-items {
    margin: 0;
    padding-inline-start: 0;
    list-style: none;
    display: grid;
    gap: var(--space-xs);
  }

  .feedback-items li {
    display: flex;
    gap: var(--space-s);
  }

  .feedback-items .ok {
    color: var(--c-correct);
    font-weight: 700;
  }

  .feedback-items .no {
    color: var(--c-incorrect);
    font-weight: 700;
  }

  .feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin: var(--space-xs) 0 0;
  }

  /* Confetti: a burst of paper bits from the banner, CSS only. */
  .confetti {
    position: absolute;
    inset-inline-start: 2.6rem;
    top: 2.6rem;
    inline-size: 0;
    block-size: 0;
    pointer-events: none;
  }

  .confetti i {
    position: absolute;
    inline-size: 0.55rem;
    block-size: 0.85rem;
    border-radius: 2px;
    background: var(--c-confetti-1);
    opacity: 0;
    animation: confetti 1.15s var(--ease-out) forwards;
  }

  .confetti i:nth-child(4n + 2) { background: var(--c-confetti-2); }
  .confetti i:nth-child(4n + 3) { background: var(--c-confetti-3); border-radius: 50%; block-size: 0.55rem; }
  .confetti i:nth-child(4n + 4) { background: var(--c-confetti-4); }

  .confetti i:nth-child(1) { --dx: -7.5rem; --dy: -4.5rem; --r: -260deg; }
  .confetti i:nth-child(2) { --dx: -4rem; --dy: -6.5rem; --r: 210deg; animation-delay: 30ms; }
  .confetti i:nth-child(3) { --dx: 0.5rem; --dy: -7.5rem; --r: -180deg; animation-delay: 50ms; }
  .confetti i:nth-child(4) { --dx: 4.5rem; --dy: -6rem; --r: 300deg; animation-delay: 20ms; }
  .confetti i:nth-child(5) { --dx: 8rem; --dy: -3.5rem; --r: -220deg; animation-delay: 60ms; }
  .confetti i:nth-child(6) { --dx: 10rem; --dy: 0.5rem; --r: 240deg; animation-delay: 40ms; }
  .confetti i:nth-child(7) { --dx: 7rem; --dy: 3.5rem; --r: -300deg; animation-delay: 70ms; }
  .confetti i:nth-child(8) { --dx: 2.5rem; --dy: 5rem; --r: 180deg; animation-delay: 30ms; }
  .confetti i:nth-child(9) { --dx: -3rem; --dy: 4.5rem; --r: -200deg; animation-delay: 80ms; }
  .confetti i:nth-child(10) { --dx: -6.5rem; --dy: 2rem; --r: 260deg; animation-delay: 50ms; }
  .confetti i:nth-child(11) { --dx: 12rem; --dy: -5rem; --r: -150deg; animation-delay: 90ms; }
  .confetti i:nth-child(12) { --dx: 14rem; --dy: -1rem; --r: 330deg; animation-delay: 110ms; }
  .confetti i:nth-child(13) { --dx: -9rem; --dy: -1rem; --r: 200deg; animation-delay: 100ms; }
  .confetti i:nth-child(14) { --dx: 5.5rem; --dy: -8.5rem; --r: -280deg; animation-delay: 120ms; }

  /* Summary page: the score with up to three stars. */
  .summary-card {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--space-m);
    text-align: center;
    background: var(--c-surface);
    border: 2px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-xl) var(--space-l);
    box-shadow: var(--shadow-2);
    animation: banner-in var(--dur-3) var(--ease-spring) both;
  }

  .summary-card .confetti {
    inset-inline-start: 50%;
    top: 4rem;
  }

  .stars {
    display: flex;
    gap: var(--space-s);
    font-size: 2.75rem;
    line-height: 1;
  }

  .stars span {
    color: var(--c-border);
  }

  .stars span.on {
    color: var(--c-confetti-1);
    text-shadow: 0 2px 0 rgb(0 0 0 / 0.12);
    animation: star-pop var(--dur-3) var(--ease-spring) both;
  }

  .stars span.on:nth-child(2) { animation-delay: 220ms; }
  .stars span.on:nth-child(3) { animation-delay: 440ms; }

  .summary-score {
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.03em;
  }

  .summary-score small {
    font-size: 0.4em;
    color: var(--c-muted);
    letter-spacing: 0;
  }

  .practice-summary-meta {
    color: var(--c-muted);
  }

  .summary-message {
    font-size: var(--fs-l);
    max-width: 40ch;
  }

  .practice-nav-links {
    justify-content: center;
  }

  @keyframes banner-in {
    from { opacity: 0; transform: translateY(-10px) scale(0.98); }
    to { opacity: 1; transform: none; }
  }

  @keyframes sheet-in {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: none; }
  }

  @keyframes icon-pop {
    from { transform: scale(0.3) rotate(-25deg); opacity: 0; }
    to { transform: none; opacity: 1; }
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
  }

  @keyframes confetti {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.6); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1); }
  }

  @keyframes score-pop {
    0% { opacity: 0; transform: translateY(6px) scale(0.6); }
    25% { opacity: 1; transform: translateY(-4px) scale(1.15); }
    100% { opacity: 0; transform: translateY(-22px) scale(1); }
  }

  @keyframes tick-pop {
    0% { transform: scaleY(0.4); }
    60% { transform: scaleY(1.6); }
    100% { transform: scaleY(1); }
  }

  @keyframes pulse {
    0%, 100% { opacity: 0.35; }
    50% { opacity: 0.8; }
  }

  @keyframes star-pop {
    0% { transform: scale(0) rotate(-45deg); }
    70% { transform: scale(1.3) rotate(8deg); }
    100% { transform: scale(1) rotate(0deg); }
  }
}
@layer components {
  /* Report and contact forms (T-0403). Fields reuse the shared
     .form-field/.form-hint/.form-error/.form-actions and .btn styles;
     only form-specific layout lives here. */

  .fb-lead {
    color: var(--c-muted);
    max-width: 60ch;
  }

  /* The form sits on a notebook sheet like the question cards. */
  .fb-form {
    max-width: 44rem;
    display: grid;
    gap: var(--space-m);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-1);
    padding: var(--space-l);
    margin-block-start: var(--space-m);
  }

  .fb-form .form-field {
    margin: 0;
    max-width: none;
  }

  .fb-form fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
  }

  .fb-form legend {
    font-weight: 700;
    padding: 0;
    margin-bottom: var(--space-s);
  }

  .fb-form fieldset .form-error {
    flex-basis: 100%;
  }

  /* Topic and reason options: pill "bubbles", filled when chosen.
     Two classes beat the shared ".form-field label" block rule. */
  .fb-form .fb-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    min-height: 44px;
    margin: 0;
    padding: 0.35em 1em 0.35em 0.7em;
    border: 2px solid var(--c-border-strong);
    border-radius: var(--radius-pill);
    background: var(--c-bg);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  }

  .fb-form .fb-radio:hover {
    border-color: var(--c-accent);
  }

  .fb-form .fb-radio:has(input:checked) {
    background: var(--c-accent-soft);
    border-color: var(--c-accent);
  }

  .fb-form .fb-radio:has(input:focus-visible) {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
  }

  .fb-radio input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--c-accent);
    flex: none;
  }

  .fb-optional {
    font-weight: 400;
    color: var(--c-muted);
  }

  /* Error summary above the form, announced via role="alert". */
  .fb-errors {
    border: 2px solid var(--c-incorrect);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    margin: var(--space-m) 0;
    max-width: 44rem;
  }

  .fb-errors p {
    margin: var(--space-xs) 0;
  }

  .fb-errors ul {
    margin: var(--space-xs) 0;
    padding-left: var(--space-m);
  }

  /* Honeypot: off-screen but rendered, so naive bots fill it while
     humans and keyboard users never reach it. Never display:none. */
  .fb-honeypot {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }

  /* ALTCHA widget spacing. */
  .fb-altcha {
    margin-top: var(--space-s);
  }

  /* Thank-you note, shared by the page and the htmx fragment. */
  .fb-thanks {
    max-width: 44rem;
    border: 2px solid var(--c-correct);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    margin-top: var(--space-m);
  }

  .fb-thanks h1 {
    margin-top: 0;
  }
}
/* search.css — the server-rendered search page (/ara): the query form
 * with its filter selects, the htmx suggestions dropdown, the grouped
 * results, the degraded banner and the shared search tips.
 * Token variables only; no hard-coded colors, sizes or radii. */

@layer components {
  /* Query form: the search field rows the input with its submit button,
   * the suggestions box anchors below it. */
  .search-form {
    display: grid;
    gap: var(--space-m);
    max-width: 65ch;
  }

  .search-field {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-s);
    margin: 0;
  }

  .search-field label {
    font-weight: 700;
  }

  .search-field input[type="search"] {
    font: inherit;
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    padding: var(--space-xs) var(--space-s);
    min-height: 44px;
    flex: 1 1 24ch;
  }

  /* Suggestions dropdown: the htmx target under the input. Empty by
   * default; rows link to the matching pages. */
  .search-oneriler:empty {
    display: none;
  }

  .oneriler-liste {
    list-style: none;
    margin: 0;
    padding: var(--space-xs);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
  }

  .oneriler-liste a {
    display: flex;
    gap: var(--space-s);
    align-items: baseline;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    text-decoration: none;
  }

  .oneriler-liste a:hover {
    text-decoration: underline;
  }

  .oneriler-tur {
    color: var(--c-muted);
    font-size: 0.875rem;
    min-inline-size: 8ch;
  }

  .oneriler-bos {
    color: var(--c-muted);
    margin: 0;
  }

  /* Filter selects share one row and wrap on narrow screens. */
  .search-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-m);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    padding: var(--space-m);
  }

  .search-filters label {
    display: grid;
    gap: var(--space-xs);
    font-weight: 700;
  }

  .search-filters select {
    font: inherit;
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    padding: var(--space-xs) var(--space-s);
    min-height: 44px;
  }

  /* Degraded banner, empty states and the result count. */
  .search-banner {
    border-inline-start: 4px solid var(--c-accent);
    padding: var(--space-s) var(--space-m);
    background: var(--c-surface);
    border-radius: var(--radius-s);
    max-width: 65ch;
  }

  .search-hint,
  .search-empty,
  .search-count {
    max-width: 65ch;
  }

  .search-count {
    font-weight: 700;
  }

  /* Result groups: one section per kind with linked hit titles. */
  .search-group {
    max-width: 75ch;
  }

  .search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-m);
  }

  .search-hit {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    padding: var(--space-m);
    background: var(--c-surface);
  }

  .search-hit h3 {
    margin: 0;
    font-size: 1.125rem;
  }

  .search-hit-meta {
    color: var(--c-muted);
    font-size: 0.875rem;
    margin: var(--space-xs) 0 0;
  }

  .search-hit-snippet {
    margin: var(--space-s) 0 0;
  }

  .search-hit em,
  .oneriler-liste em {
    font-style: normal;
    font-weight: 700;
  }

  /* Shared search tips on the initial, empty and degraded pages. */
  .search-tips {
    max-width: 65ch;
  }
}
/* data.css — the /veri/ open-data page: dataset file cards with
 * download links and schema tables. Token variables only. */

@layer components {
  .data-file {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-m);
    margin-top: var(--space-l);
  }

  .data-file h3 {
    margin-top: 0;
  }

  .data-download {
    font-weight: 700;
    overflow-wrap: anywhere;
  }

  .data-schema {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-body);
  }

  .data-schema caption {
    text-align: left;
    font-weight: 700;
    padding-bottom: var(--space-s);
  }

  .data-schema th,
  .data-schema td {
    text-align: left;
    padding: var(--space-s);
    border-bottom: 1px solid var(--c-border);
    vertical-align: top;
  }

  .data-schema thead th {
    border-bottom-width: 2px;
  }

  .data-schema code {
    overflow-wrap: anywhere;
  }
}
/* account.css — the student account pages (/kayit, /giris, /hesap and
 * below): form layout, one-shot notices, settings sections, the progress
 * mastery bars and history table, and the header fragment.
 * Fields reuse the shared .form-field/.form-hint/.form-error/.form-actions
 * and .btn styles; only account-specific layout lives here.
 * Token variables only; no hard-coded colors, sizes or radii. */

@layer components {
  /* Lead paragraph under the page heading. */
  .account-lead {
    color: var(--c-muted);
    max-width: 60ch;
  }

  /* Forms: single column, comfortably narrow. */
  .account-form {
    max-width: 44rem;
    display: grid;
    gap: var(--space-m);
  }

  /* Legal acceptance line on the sign-up form. */
  .account-legal {
    max-width: 60ch;
  }

  /* Secondary link under a form. */
  .account-alt {
    margin-block-start: var(--space-m);
  }

  /* Success notice: bordered box with text, never color alone. */
  .account-ok {
    border: 2px solid var(--c-correct);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    max-width: 44rem;
  }

  /* Informational notice (unverified address, missing password). */
  .account-notice {
    border: 1px solid var(--c-border);
    border-inline-start-width: 4px;
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    max-width: 44rem;
  }

  /* Link lists (alternate logins, data links). */
  .account-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-xs);
    max-width: 44rem;
  }

  .account-links a {
    display: inline-block;
    min-block-size: 2.75rem;
    line-height: 2.75rem;
  }

  .account-danger-link {
    color: var(--c-incorrect);
  }

  /* Settings sections, divided by rules. */
  .account-section {
    margin-block: var(--space-l);
    padding-block-start: var(--space-m);
    border-block-start: 1px solid var(--c-border);
    max-width: 60rem;
  }

  .account-section > h2 {
    margin-block-end: var(--space-s);
  }

  /* Big-touch checkbox labels (delete, consent). */
  .account-check {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-height: 44px;
    cursor: pointer;
  }

  .account-check input {
    width: 1.25rem;
    height: 1.25rem;
    accent-color: var(--c-accent);
    flex: none;
  }

  /* Legal document list on the re-acceptance page. */
  .account-docs {
    list-style: none;
    margin: 0 0 var(--space-m) 0;
    padding: 0;
    display: grid;
    gap: var(--space-xs);
    max-width: 44rem;
  }

  .account-docs li {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
    align-items: baseline;
  }

  .account-docs a {
    display: inline-block;
    min-block-size: 2.75rem;
    line-height: 2.75rem;
  }

  .account-doc-version {
    color: var(--c-muted);
  }

  /* Deletion summary list. */
  .account-delete-list {
    max-width: 60ch;
  }

  /* Mastery rows: concept link, attempt count, bar and percent. */
  .mastery-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-s);
  }

  .mastery-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--space-xs) var(--space-s);
    align-items: center;
  }

  .mastery-row a {
    display: inline-block;
    min-block-size: 2.75rem;
    line-height: 2.75rem;
    font-weight: 700;
    text-decoration: none;
  }

  .mastery-row a:hover {
    text-decoration: underline;
  }

  .mastery-meta {
    color: var(--c-muted);
    grid-column: 2;
    grid-row: 1;
  }

  /* Native gauge: CSP-safe (no inline width) and announced by
   * assistive technology; the adjacent percent is the text fallback. */
  .mastery-bar {
    display: block;
    grid-column: 1;
    grid-row: 2;
    inline-size: 100%;
    block-size: 1rem;
  }

  .mastery-percent {
    grid-column: 2;
    grid-row: 2;
    font-variant-numeric: tabular-nums;
  }

  /* Attempt history table. */
  .progress-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 60rem;
  }

  .progress-table th,
  .progress-table td {
    text-align: start;
    padding: var(--space-xs) var(--space-s);
    border-block-end: 1px solid var(--c-border);
  }

  .progress-table th {
    font-weight: 700;
  }

  .verdict {
    font-weight: 700;
  }

  .verdict-correct {
    color: var(--c-correct);
  }

  .verdict-incorrect {
    color: var(--c-incorrect);
  }

  /* History pager. */
  .account-pager {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    align-items: center;
    margin-block-start: var(--space-m);
  }

  .account-pager a {
    display: inline-block;
    min-block-size: 2.75rem;
    line-height: 2.75rem;
  }

  /* Header fragment snippet. */
  .account-fragment {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: baseline;
  }

  .account-fragment a {
    display: inline-block;
    min-block-size: 2.75rem;
    line-height: 2.75rem;
  }
}
/* legal.css — legal pages (/gizlilik, /kullanim-kosullari): version
 * line, stored-body prose, and the cross-document link.
 * Token variables only; no hard-coded colors, sizes or radii. */

@layer components {
  /* Version line under the heading. */
  .legal-version {
    color: var(--c-muted);
    margin-block: 0 var(--space-m);
  }

  /* Stored body prose: same readable measure as the static pages. */
  .legal-body {
    max-width: 65ch;
  }

  .legal-body h2 {
    margin-top: var(--space-l);
  }

  /* The "HUKUKİ ONAY BEKLİYOR" banner renders as a blockquote from the
   * stored Markdown; surface it as a notice box. */
  .legal-body blockquote {
    margin-inline: 0;
    padding: var(--space-m);
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
  }

  .legal-body blockquote p {
    margin-block: 0;
  }

  /* Cross-link to the other legal document. */
  .legal-other {
    margin-top: var(--space-l);
    color: var(--c-muted);
  }
}
@layer components {
  /* Admin chrome: left navigation plus content. The nav collapses to a
     horizontal strip on narrow screens. Neutral theme, same tokens. */
  .admin-shell {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: var(--space-l);
    align-items: start;
  }

  .admin-nav {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    position: sticky;
    top: var(--space-m);
  }

  .admin-brand {
    font-weight: 700;
    margin: 0 0 var(--space-s);
  }

  .admin-brand a {
    color: var(--c-text);
    text-decoration: none;
  }

  .admin-nav ul {
    list-style: none;
    margin: 0 0 var(--space-m);
    padding: 0;
    display: grid;
    gap: var(--space-xs);
  }

  .admin-nav ul a {
    display: block;
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-s);
    color: var(--c-text);
    text-decoration: none;
  }

  .admin-nav ul a[aria-current="page"] {
    background: var(--c-bg);
    outline: 2px solid var(--c-focus);
    outline-offset: -2px;
    font-weight: 700;
  }

  .admin-user {
    border-top: 1px solid var(--c-border);
    padding-top: var(--space-s);
  }

  .admin-user-email {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .admin-user-role {
    margin: 0 0 var(--space-s);
    color: var(--c-muted);
  }

  .admin-main {
    min-width: 0;
  }

  .admin-main > h1 {
    margin-top: 0;
  }

  /* Breadcrumbs: inline trail with separators. */
  .admin-crumbs ol {
    list-style: none;
    margin: 0 0 var(--space-m);
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    color: var(--c-muted);
  }

  .admin-crumbs li + li::before {
    content: "›";
    margin-right: var(--space-xs);
  }

  /* Flash messages: one-shot status after a redirect. */
  .flash {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    margin: 0 0 var(--space-m);
  }

  .flash-ok {
    border-color: var(--c-correct);
  }

  .flash-hata {
    border-color: var(--c-incorrect);
  }

  /* Buttons live in components.css (shared with the public site). */

  /* Data tables with sortable headers and row actions. */
  .admin-table-wrap {
    overflow-x: auto;
  }

  .admin-table {
    width: 100%;
    border-collapse: collapse;
  }

  .admin-table th,
  .admin-table td {
    text-align: left;
    padding: var(--space-s);
    border-bottom: 1px solid var(--c-border);
    vertical-align: top;
  }

  .admin-table thead th {
    border-bottom-width: 2px;
  }

  .admin-table th[aria-sort] a {
    color: var(--c-text);
  }

  /* Status pills: text plus tint, never colour alone. */
  .pill {
    display: inline-block;
    white-space: nowrap;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: 0 var(--space-s);
    font-size: 0.875rem;
  }

  .pill-draft {
    border-style: dashed;
  }

  .pill-review {
    border-color: var(--c-accent);
  }

  .pill-changes {
    border-color: var(--c-incorrect);
  }

  .pill-published {
    border-color: var(--c-correct);
  }

  .pill-archived {
    color: var(--c-muted);
  }

  .ai-badge {
    display: inline-block;
    border: 1px solid var(--c-accent-2);
    border-radius: var(--radius-s);
    padding: 0 var(--space-xs);
    font-size: 0.875rem;
    font-weight: 700;
  }

  /* Forms: shared field, hint and error styles (also used by the auth
     pages, which ship in the same bundle). */
  .form-field {
    margin: 0 0 var(--space-m);
    max-width: 40rem;
  }

  .form-field label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--space-xs);
  }

  .form-field input[type="text"],
  .form-field input[type="email"],
  .form-field input[type="password"],
  .form-field input[type="number"],
  .form-field input[type="search"],
  .form-field select,
  .form-field textarea {
    width: 100%;
    font: inherit;
    color: var(--c-text);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    padding: var(--space-xs) var(--space-s);
    min-height: 44px;
  }

  .form-field textarea {
    min-height: 8rem;
  }

  .form-field input[aria-invalid="true"],
  .form-field select[aria-invalid="true"],
  .form-field textarea[aria-invalid="true"] {
    border-color: var(--c-incorrect);
    border-width: 2px;
  }

  .form-hint {
    margin: var(--space-xs) 0 0;
    color: var(--c-muted);
  }

  .form-error {
    margin: var(--space-xs) 0 0;
    color: var(--c-incorrect);
    font-weight: 700;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
    margin-top: var(--space-m);
  }

  /* Filter bars above tables: inline form, works without JS. */
  .admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: end;
    margin-bottom: var(--space-m);
  }

  .admin-filters .form-field {
    margin: 0;
    min-width: 10rem;
  }

  /* Pagination. */
  .admin-pagination ul {
    list-style: none;
    margin: var(--space-m) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
  }

  .admin-pagination a,
  .admin-pagination span {
    display: inline-block;
    min-width: 44px;
    min-height: 44px;
    line-height: 44px;
    text-align: center;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-s);
    text-decoration: none;
  }

  .admin-pagination span[aria-current="page"] {
    font-weight: 700;
    border-width: 2px;
    border-color: var(--c-focus);
  }

  /* Confirmation step. */
  .admin-confirm {
    max-width: 40rem;
  }

  .admin-confirm-detail {
    color: var(--c-muted);
  }

  .admin-confirm form {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    align-items: center;
  }

  /* Empty lists (scoped: the public pages style .empty-state in
     components.css). */
  .admin-shell .empty-state {
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-l);
    text-align: center;
    color: var(--c-muted);
  }

  .admin-shell .empty-state-title {
    color: var(--c-text);
    font-weight: 700;
    margin: 0 0 var(--space-xs);
  }

  /* htmx indicators (includeIndicatorStyles is off, so these are ours). */
  .htmx-indicator {
    opacity: 0;
  }

  .htmx-request .htmx-indicator {
    opacity: 1;
  }

  @media (max-width: 56rem) {
    .admin-shell {
      grid-template-columns: 1fr;
    }

    .admin-nav {
      position: static;
    }

    .admin-nav ul {
      display: flex;
      flex-wrap: wrap;
    }
  }
}
@layer components {
  /* API clients, users and agent docs (SA-D, T-0309). Shared admin
     chrome (.admin-table, .pill, .form-*, .btn-*, .admin-filters,
     .admin-pagination) comes from admin.css; only area extras live here. */

  /* Extra pill tints: live, revoked and pending states. */
  .pill-live {
    border-color: var(--c-correct);
  }

  .pill-revoked {
    color: var(--c-muted);
    border-style: dashed;
  }

  .pill-pending {
    border-color: var(--c-accent-2);
  }

  /* Key IDs and scope lists in tables. */
  .admin-key-id {
    font-size: 0.875rem;
    overflow-wrap: anywhere;
  }

  .admin-scopes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .admin-scopes code {
    font-size: 0.875rem;
  }

  /* Scope checkboxes on the creation form. */
  .admin-scope-form {
    list-style: none;
    margin: 0 0 var(--space-s);
    padding: 0;
    display: grid;
    gap: var(--space-xs);
  }

  .admin-scope-form label {
    display: block;
    font-weight: 400;
  }

  /* Show-once secret box. */
  .admin-secret {
    border: 2px solid var(--c-incorrect);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    max-width: 40rem;
    margin-bottom: var(--space-m);
  }

  .admin-secret input[readonly] {
    font-family: monospace;
    overflow-wrap: anywhere;
  }

  /* Copyable agent prompt. */
  .admin-prompt {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    max-width: 70ch;
  }

  /* Rendered agent guide: readable line length. */
  .admin-doc {
    max-width: 70ch;
  }

  .admin-doc pre {
    overflow-x: auto;
  }

  /* Stacked row actions in the users table. */
  .admin-row-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    align-items: flex-start;
  }

  .admin-row-actions form {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
    margin: 0;
  }

  .admin-inline-label {
    display: inline-flex;
    gap: var(--space-xs);
    align-items: center;
    font-weight: 400;
  }
}
@layer components {
  /* Curriculum status pills. The base .pill lives in admin.css; pending
     reuses the accounts area's .pill-pending (same "awaiting" meaning). */
  .pill-active {
    border-color: var(--c-correct);
  }

  .pill-retired {
    color: var(--c-muted);
  }

  .pill-approved {
    border-color: var(--c-correct);
  }

  .pill-rejected {
    border-color: var(--c-incorrect);
  }

  /* Inline action rows above page content. */
  .admin-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-s) var(--space-m);
    margin-block-end: var(--space-m);
  }

  .admin-search-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-s) var(--space-m);
  }

  .admin-muted {
    color: var(--c-muted);
  }

  .admin-visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* Definition lists of page facts. */
  .admin-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-xs) var(--space-m);
    margin-block-end: var(--space-m);
  }

  .admin-meta dt {
    font-weight: 600;
  }

  .admin-meta dd {
    margin: 0;
  }

  /* The part_of navigation tree as nested lists. */
  .admin-tree,
  .admin-tree ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .admin-tree ul {
    margin-inline-start: var(--space-l);
    border-inline-start: 1px solid var(--c-border);
    padding-inline-start: var(--space-m);
  }

  .admin-tree li {
    margin-block: var(--space-xs);
  }

  .admin-tree a {
    margin-inline-end: var(--space-s);
  }

  /* Flat result and slug lists. */
  .admin-results,
  .admin-list {
    list-style: none;
    margin: 0 0 var(--space-m);
    padding: 0;
  }

  .admin-results li,
  .admin-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-xs) var(--space-s);
    padding-block: var(--space-xs);
    border-block-end: 1px solid var(--c-surface);
  }

  /* Narrow forms. */
  .admin-form {
    max-inline-size: 40rem;
  }

  .admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-m);
  }

  /* Import problem lists. */
  .admin-errors {
    border: 1px solid var(--c-incorrect);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    margin-block-end: var(--space-m);
  }

  .admin-errors ul {
    margin: 0;
    padding-inline-start: var(--space-l);
  }

  .admin-import-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-l);
  }

  /* Mapping editor: outcomes beside concept search. */
  .admin-map-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(14rem, 2fr);
    gap: var(--space-l);
    align-items: start;
  }

  @media (max-width: 60rem) {
    .admin-map-grid {
      grid-template-columns: 1fr;
    }
  }

  .admin-outcome-card {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    margin-block-end: var(--space-m);
  }

  .admin-outcome-card h3 {
    margin-block: 0 var(--space-xs);
  }

  .admin-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin: 0 0 var(--space-s);
    padding: 0;
  }

  .admin-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-l);
    padding: var(--space-xs) var(--space-s);
  }

  .admin-chip form {
    display: inline;
  }

  .admin-chip-form {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: var(--space-s);
  }
}
@layer components {
  /* Question/note editor (T-0307). */

  .admin-editor-form {
    display: grid;
    gap: 1rem;
    max-width: 60rem;
  }

  .admin-editor-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }

  .admin-inline-form {
    display: inline;
  }

  .admin-type-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: baseline;
    margin-bottom: 0.25rem;
  }

  .admin-type-current {
    font-weight: 700;
    text-decoration: underline;
  }

  .admin-section {
    border-top: 1px solid var(--c-border);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
  }

  .admin-slot {
    border: 1px solid var(--c-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem 1rem;
    margin: 0 0 0.75rem;
  }

  .admin-concept-row {
    display: grid;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
  }

  .admin-check {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0.25rem 0;
  }

  .admin-errors {
    border: 2px solid var(--c-incorrect);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
  }

  .admin-preview-errors {
    border: 2px solid var(--c-warning);
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    margin-bottom: 1rem;
  }

  .admin-save-ok {
    color: var(--c-correct);
  }

  .admin-save-err {
    color: var(--c-incorrect);
    font-weight: 700;
  }

  .admin-diff-lines {
    font-family: ui-monospace, monospace;
    font-size: 0.875rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }

  .admin-diff-del {
    background: color-mix(in srgb, var(--c-incorrect) 12%, transparent);
  }

  .admin-diff-add {
    background: color-mix(in srgb, var(--c-correct) 12%, transparent);
  }

  .admin-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    align-items: end;
    margin-bottom: 1rem;
  }

  .admin-list-head {
    margin-bottom: 0.5rem;
  }
}
@layer components {
  .admin-review-count {
    margin-block: 0 1rem;
  }

  .admin-review-table td {
    vertical-align: top;
  }

  .admin-review-meta {
    display: block;
    font-size: 0.875rem;
    opacity: 0.85;
  }

  .admin-review-excerpt {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
  }

  .admin-review-prov {
    display: block;
    font-size: 0.875rem;
  }

  .admin-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .admin-review-head .admin-review-meta {
    display: inline;
  }

  .admin-review-render {
    border: 1px solid var(--c-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
  }

  .admin-review-answer {
    margin-bottom: 1.5rem;
  }

  .admin-review-dl > div {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.5rem;
    padding-block: 0.25rem;
  }

  .admin-review-dl dt {
    font-weight: 600;
  }

  .admin-review-dl dd {
    margin: 0;
  }

  .admin-review-tags,
  .admin-review-reviews,
  .admin-review-decide {
    margin-bottom: 1.5rem;
  }

  .admin-review-checklist {
    border: 1px solid var(--c-border);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
  }

  .form-check {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    padding-block: 0.25rem;
  }

  .form-check input {
    margin-top: 0.25rem;
  }

  .admin-review-closed {
    font-weight: 600;
  }

  /* Bulk review: one card per pending item, a batch checklist. */
  .admin-bulk-items {
    list-style: none;
    margin: 0 0 var(--space-l);
    padding: 0;
    display: grid;
    gap: var(--space-m);
  }

  .admin-bulk-item {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-m);
  }

  .admin-bulk-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s);
    margin-bottom: var(--space-s);
  }

  .admin-bulk-head input[type="checkbox"] {
    inline-size: 1.25rem;
    block-size: 1.25rem;
  }

  .admin-bulk-meta,
  .admin-bulk-note {
    color: var(--c-muted);
    font-size: 0.9em;
  }

  .admin-bulk-meta {
    margin-left: var(--space-s);
  }

  .admin-bulk-detail {
    margin-left: auto;
  }

  .admin-bulk-activate {
    margin: 0 0 var(--space-m);
  }
}
@layer components {
  /* Dashboard cards. */
  .admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
  }

  .admin-card {
    border: 1px solid var(--c-border);
    border-radius: 0.5rem;
    padding: 1rem;
  }

  .admin-card h2 {
    font-size: 1rem;
    margin: 0 0 0.5rem;
  }

  .admin-card-number {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
  }

  .admin-card-detail {
    color: var(--c-muted);
    margin: 0.25rem 0 0.75rem;
  }

  .admin-card .admin-table {
    margin: 0;
  }

  /* "Yakında" badge: the neutral pill tone on top of the .pill base. */
  .admin-soon {
    background: var(--c-surface);
    color: var(--c-muted);
  }

  /* Per-grade coverage bars: text plus bar, never colour alone. */
  .admin-coverage-bar {
    display: inline-block;
    width: 4rem;
    height: 0.5rem;
    border-radius: 0.25rem;
    background: var(--c-surface);
    vertical-align: middle;
    margin-right: 0.5rem;
  }

  .admin-coverage-fill {
    display: block;
    height: 100%;
    border-radius: 0.25rem;
    background: var(--c-accent);
  }

  /* Coverage bar widths, one class per percent point. The dashboard
     template sets these instead of an inline style so the markup stays
     CSP-safe (docs/frontend/principles.md rule 5); the computed width
     matches the old style="width:N%" exactly. */
  .admin-w0{width:0%}.admin-w1{width:1%}.admin-w2{width:2%}.admin-w3{width:3%}.admin-w4{width:4%}
  .admin-w5{width:5%}.admin-w6{width:6%}.admin-w7{width:7%}.admin-w8{width:8%}.admin-w9{width:9%}
  .admin-w10{width:10%}.admin-w11{width:11%}.admin-w12{width:12%}.admin-w13{width:13%}.admin-w14{width:14%}
  .admin-w15{width:15%}.admin-w16{width:16%}.admin-w17{width:17%}.admin-w18{width:18%}.admin-w19{width:19%}
  .admin-w20{width:20%}.admin-w21{width:21%}.admin-w22{width:22%}.admin-w23{width:23%}.admin-w24{width:24%}
  .admin-w25{width:25%}.admin-w26{width:26%}.admin-w27{width:27%}.admin-w28{width:28%}.admin-w29{width:29%}
  .admin-w30{width:30%}.admin-w31{width:31%}.admin-w32{width:32%}.admin-w33{width:33%}.admin-w34{width:34%}
  .admin-w35{width:35%}.admin-w36{width:36%}.admin-w37{width:37%}.admin-w38{width:38%}.admin-w39{width:39%}
  .admin-w40{width:40%}.admin-w41{width:41%}.admin-w42{width:42%}.admin-w43{width:43%}.admin-w44{width:44%}
  .admin-w45{width:45%}.admin-w46{width:46%}.admin-w47{width:47%}.admin-w48{width:48%}.admin-w49{width:49%}
  .admin-w50{width:50%}.admin-w51{width:51%}.admin-w52{width:52%}.admin-w53{width:53%}.admin-w54{width:54%}
  .admin-w55{width:55%}.admin-w56{width:56%}.admin-w57{width:57%}.admin-w58{width:58%}.admin-w59{width:59%}
  .admin-w60{width:60%}.admin-w61{width:61%}.admin-w62{width:62%}.admin-w63{width:63%}.admin-w64{width:64%}
  .admin-w65{width:65%}.admin-w66{width:66%}.admin-w67{width:67%}.admin-w68{width:68%}.admin-w69{width:69%}
  .admin-w70{width:70%}.admin-w71{width:71%}.admin-w72{width:72%}.admin-w73{width:73%}.admin-w74{width:74%}
  .admin-w75{width:75%}.admin-w76{width:76%}.admin-w77{width:77%}.admin-w78{width:78%}.admin-w79{width:79%}
  .admin-w80{width:80%}.admin-w81{width:81%}.admin-w82{width:82%}.admin-w83{width:83%}.admin-w84{width:84%}
  .admin-w85{width:85%}.admin-w86{width:86%}.admin-w87{width:87%}.admin-w88{width:88%}.admin-w89{width:89%}
  .admin-w90{width:90%}.admin-w91{width:91%}.admin-w92{width:92%}.admin-w93{width:93%}.admin-w94{width:94%}
  .admin-w95{width:95%}.admin-w96{width:96%}.admin-w97{width:97%}.admin-w98{width:98%}.admin-w99{width:99%}
  .admin-w100{width:100%}

  /* Recent-activity list. */
  .admin-activity {
    list-style: none;
    margin: 0 0 0.75rem;
    padding: 0;
  }

  .admin-activity li {
    padding: 0.25rem 0;
    border-top: 1px solid var(--c-border);
  }

  .admin-activity li:first-child {
    border-top: none;
  }

  .admin-activity-time {
    color: var(--c-muted);
    margin-right: 0.5rem;
    white-space: nowrap;
  }

  .admin-activity-actor {
    color: var(--c-muted);
    margin-left: 0.5rem;
    overflow-wrap: anywhere;
  }

  /* Inline per-flag rule form inside the flags table. */
  .admin-flag-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
  }

  .admin-flag-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Audit diff summaries: allow long tokens to wrap inside the cell. */
  .admin-audit-diff code {
    overflow-wrap: anywhere;
  }

  /* Inbox (T-0404): report and contact lists, detail pages. */
  .admin-inbox-count {
    color: var(--c-muted);
  }

  .admin-inbox-group {
    margin-top: 1.5rem;
  }

  .admin-inbox-group-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 1.1rem;
  }

  .admin-inbox-open {
    font-size: 0.875rem;
    font-weight: normal;
    color: var(--c-muted);
  }

  .admin-inbox-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
  }

  .admin-inbox-meta {
    color: var(--c-muted);
    font-size: 0.875rem;
  }

  .admin-inbox-cat {
    white-space: nowrap;
    font-size: 0.875rem;
  }

  .admin-inbox-source {
    white-space: nowrap;
    font-size: 0.75rem;
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-l, 0.5rem);
    padding: 0 0.4rem;
    margin-left: 0.4rem;
  }

  .admin-inbox-message,
  .admin-inbox-fix,
  .admin-inbox-links,
  .admin-inbox-prov,
  .admin-inbox-sender,
  .admin-inbox-decide {
    margin-top: 1.5rem;
  }

  .admin-inbox-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
  }

  .admin-inbox-dl > div {
    display: grid;
    grid-template-columns: 10rem 1fr;
    gap: 0.5rem;
    padding: 0.25rem 0;
  }

  .admin-inbox-dl dt {
    font-weight: bold;
  }

  .admin-inbox-dl dd {
    margin: 0;
    overflow-wrap: anywhere;
  }

  /* KVKK deadline flag: bordered banner, red pill when overdue. */
  .admin-inbox-kvkk {
    margin-top: 1rem;
    border: 2px solid var(--c-accent);
    border-radius: var(--radius-l, 0.5rem);
    padding: 0.75rem 1rem;
  }

  .admin-inbox-kvkk h2 {
    margin: 0 0 0.25rem;
    font-size: 1rem;
  }

  .admin-inbox-kvkk p {
    margin: 0;
  }

  .admin-inbox-kvkk-flag {
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: bold;
    border: 1px solid var(--c-accent);
    border-radius: var(--radius-l, 0.5rem);
    padding: 0 0.4rem;
    margin-left: 0.4rem;
  }

  .admin-inbox-kvkk-ok {
    border-color: var(--c-correct);
    margin-left: 0.5rem;
  }

  .admin-inbox-kvkk-overdue {
    border-color: var(--c-incorrect);
    color: var(--c-incorrect);
    font-weight: bold;
    margin-left: 0.5rem;
  }

  /* Data bundles: intro, per-row import forms, import result. */
  .admin-intro {
    max-width: 65ch;
    margin: 0 0 var(--space-l);
  }

  .admin-bundle-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }

  .admin-result-error {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 24rem;
    overflow: auto;
  }

  .admin-result-next {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
  }
}
/* widgets.css — shared interactive-widget styles (T-0701).
 * Every <mtk-…> element renders a figure plus a no-JS fallback fieldset;
 * the per-widget sheets under components/widgets/ hold the rest. */

@layer components {
  /* Widget root: stack figure and fallback inputs with breathing room. */
  mtk-number-line,
  mtk-fraction-shade,
  mtk-coordinate-point,
  mtk-drag-match {
    display: block;
    margin-block: var(--space-m);
  }

  /* Server figure: responsive SVG, never overflowing its column. */
  .mtk-fallback-fig svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Fallback fieldset: plain grouping, readable without JS. */
  .mtk-fallback-inputs {
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    margin-block-start: var(--space-s);
  }

  .mtk-fallback-inputs legend {
    font-weight: 600;
    padding-inline: var(--space-xs);
  }

  .mtk-fallback-inputs label {
    display: inline-block;
    margin: var(--space-xs) var(--space-s) var(--space-xs) 0;
  }

  .mtk-fallback-inputs input,
  .mtk-fallback-inputs select {
    font: inherit;
  }

  .mtk-fallback-inputs input[type="number"] {
    max-width: 7rem;
  }

  /* Text equivalent that follows the widget in study contexts. */
  .fallback {
    margin-block-start: var(--space-m);
  }
}
/* number_line_place.css — <mtk-number-line> widget styles.
 * When enhanced, the fallback radio inputs hide while the server SVG
 * stays visible with the draggable point. Token variables only. */

@layer components {
  /* Hide the fallback radios once the widget enhances; the hidden
   * input carries the answer instead. The SVG figure stays visible. */
  mtk-number-line[data-enhanced] .mtk-fallback-inputs {
    display: none;
  }

  mtk-number-line .mtk-fallback-fig svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  /* Horizontal drag belongs to the widget; vertical page scroll still works. */
  mtk-number-line[data-enhanced] .mtk-fallback-fig svg {
    touch-action: pan-y;
  }

  /* Draggable handle. Positioned via cx/cy attributes (CSP-safe). */
  .mtk-nl-handle {
    cursor: grab;
    touch-action: none;
    outline: none;
  }

  .mtk-nl-handle:active {
    cursor: grabbing;
  }

  /* Invisible fat hit area so pointer and touch targets stay generous. */
  .mtk-nl-halo {
    fill: transparent;
    pointer-events: all;
  }

  .mtk-nl-dot {
    fill: var(--c-accent);
    stroke: var(--c-bg);
    stroke-width: 2;
    transition: fill 0.15s ease;
  }

  .mtk-nl-handle:hover .mtk-nl-dot {
    fill: var(--c-text);
  }

  /* Visible keyboard focus: outline plus a focus-colored ring. */
  .mtk-nl-handle:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 4px;
  }

  .mtk-nl-handle:focus-visible .mtk-nl-dot {
    stroke: var(--c-focus);
    stroke-width: 3;
  }

  @media (prefers-reduced-motion: reduce) {
    .mtk-nl-dot {
      transition: none;
    }
  }
}
/* <mtk-fraction-shade> tap-to-shade styles. All hooks use the mtk-fs- prefix. */
mtk-fraction-shade {
  display: block;
}

mtk-fraction-shade svg {
  max-width: 100%;
  height: auto;
}

/* Hide the fallback checkboxes once enhanced; the SVG figure stays visible. */
mtk-fraction-shade[data-enhanced] .mtk-fallback-inputs {
  display: none;
}

/* Interactive parts (classes are added by the module on enhance). */
mtk-fraction-shade .mtk-fs-part {
  cursor: pointer;
  transition: fill 120ms ease-in-out;
}

mtk-fraction-shade .mtk-fs-part:hover {
  stroke: var(--c-accent);
}

mtk-fraction-shade .mtk-fs-part:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
  stroke: var(--c-focus);
  stroke-width: 3;
}

mtk-fraction-shade .mtk-fs-shaded {
  fill: var(--c-accent);
}

/* Visually hidden live region announcing the current fraction. */
mtk-fraction-shade .mtk-fs-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  mtk-fraction-shade .mtk-fs-part {
    transition: none;
  }
}
/* Styles for <mtk-coordinate-point> (coordinate_point widget).
   Only mtk-cp-* classes are defined here; the mtk-fallback-*
   selectors refer to server-rendered fallback markup. */

/* When enhanced, the numeric fallback inputs are replaced by the
   interactive grid, but the server SVG stays visible. */
mtk-coordinate-point[data-enhanced] .mtk-fallback-inputs {
  display: none;
}

mtk-coordinate-point[data-enhanced] .mtk-fallback-fig {
  display: block;
}

.mtk-cp-grid {
  cursor: crosshair;
  touch-action: manipulation;
  max-width: 100%;
  height: auto;
}

.mtk-cp-grid:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 2px;
}

.mtk-cp-point {
  fill: var(--c-accent);
  stroke: var(--c-bg);
  stroke-width: 2;
}

.mtk-cp-cursor {
  fill: none;
  stroke: var(--c-focus);
  stroke-width: 2;
  stroke-dasharray: 4 2;
  pointer-events: none;
}

/* Visually hidden live region and keyboard hint. */
.mtk-cp-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .mtk-cp-grid,
  .mtk-cp-point,
  .mtk-cp-cursor {
    transition: none;
    animation: none;
  }
}
/* drag_match.css — <mtk-drag-match> widget styles.
 * When enhanced, the fallback selects hide and the chip/target board
 * takes over. Token variables only. */

@layer components {
  mtk-drag-match {
    display: block;
  }

  /* Hide the fallback selects once the widget enhances; the hidden
   * inputs carry the answer instead. */
  mtk-drag-match[data-enhanced] .mtk-fallback-inputs {
    display: none;
  }

  .mtk-dm-help {
    color: var(--c-muted);
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
  }

  .mtk-dm-board {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
  }

  /* Narrow screens (down to 320px): stack the columns. */
  @media (max-width: 30rem) {
    .mtk-dm-board {
      grid-template-columns: 1fr;
    }
  }

  .mtk-dm-col-title {
    font-weight: 700;
    margin: 0 0 0.5rem;
  }

  .mtk-dm-items,
  .mtk-dm-targets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Item chips. Dragging belongs to the widget (touch-action: none)
   * so touch drags never scroll the page. */
  .mtk-dm-chip {
    display: block;
    width: 100%;
    min-height: 44px;
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    background: var(--c-surface);
    color: var(--c-text);
    border: 2px solid var(--c-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font: inherit;
    text-align: start;
    transition: border-color 0.15s ease, background-color 0.15s ease;
  }

  .mtk-dm-chip:hover {
    border-color: var(--c-text);
  }

  .mtk-dm-chip:active {
    cursor: grabbing;
  }

  /* Paired chips keep the item label; the pairing itself is announced
   * and shown inside the target. Accent border, not green: paired is
   * not the same as correct. */
  .mtk-dm-chip.mtk-dm-is-paired {
    border-color: var(--c-accent);
  }

  /* The picked-up chip stays in place (no moving clone: CSP-safe) and
   * is marked with a dashed outline until it is dropped or cancelled. */
  .mtk-dm-chip.mtk-dm-is-picked {
    outline: 2px dashed var(--c-accent);
    outline-offset: 2px;
  }

  .mtk-dm-target {
    border: 2px dashed var(--c-border);
    border-radius: var(--radius);
    background: var(--c-bg);
    padding: 0.25rem;
    transition: border-color 0.15s ease;
  }

  /* Drop target under the pointer while dragging. */
  .mtk-dm-target.mtk-dm-is-over {
    border-style: solid;
    border-color: var(--c-accent);
  }

  .mtk-dm-target-btn {
    display: block;
    width: 100%;
    min-height: 44px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font: inherit;
    text-align: start;
    transition: border-color 0.15s ease;
  }

  .mtk-dm-target-btn:hover {
    border-color: var(--c-text);
  }

  .mtk-dm-target-name {
    display: block;
    font-weight: 700;
  }

  /* Shown only while an item is picked up. */
  .mtk-dm-target-hint {
    display: none;
    font-size: 0.85rem;
    color: var(--c-muted);
  }

  mtk-drag-match.mtk-dm-is-picking .mtk-dm-target-hint {
    display: block;
  }

  .mtk-dm-paired {
    list-style: none;
    margin: 0.25rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .mtk-dm-paired:empty {
    min-height: 0.5rem;
  }

  .mtk-dm-paired-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem 0.25rem 0.5rem;
  }

  .mtk-dm-unpair {
    flex: none;
    min-height: 32px;
    cursor: pointer;
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: 0.25rem 0.75rem;
    font: inherit;
    font-size: 0.85rem;
    transition: border-color 0.15s ease;
  }

  .mtk-dm-unpair:hover {
    border-color: var(--c-text);
  }

  /* Visible keyboard focus everywhere. Never removed. */
  .mtk-dm-chip:focus-visible,
  .mtk-dm-target-btn:focus-visible,
  .mtk-dm-unpair:focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
  }

  /* Visually hidden live region for Turkish announcements. */
  .mtk-dm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    .mtk-dm-chip,
    .mtk-dm-target,
    .mtk-dm-target-btn,
    .mtk-dm-unpair {
      transition: none;
      animation: none;
    }
  }
}
/* ilkokul.css — friendly and big: the largest type, roomy spacing and
 * rounded shapes, with the orange level colour.
 * Token overrides only; light/dark come from the --c-lvl-* tokens. */

@layer themes {
  body[data-level="ilkokul"] {
    --c-level: var(--c-lvl-ilkokul);
    --c-level-soft: var(--c-lvl-ilkokul-soft);

    --fs-body: 1.25rem;
    --fs-stem: 1.75rem;
    --fs-choice: 1.5rem;
    --math-scale: 1.25em;
    --lh-body: 1.7;

    --space-m: 1.125rem;
    --space-l: 1.75rem;
    --space-xl: 2.75rem;

    --radius: 18px;
    --radius-m: 14px;
    --radius-l: 24px;
  }
}
/* ortaokul.css — balanced and energetic, with the blue level colour.
 * Token overrides only; light/dark come from the --c-lvl-* tokens. */

@layer themes {
  body[data-level="ortaokul"] {
    --c-level: var(--c-lvl-ortaokul);
    --c-level-soft: var(--c-lvl-ortaokul-soft);

    --fs-body: 1.125rem;
    --fs-stem: 1.5rem;
    --fs-choice: 1.3125rem;
    --math-scale: 1.18em;
    --lh-body: 1.6;

    --radius: 14px;
  }
}
/* lise.css — calm and focused: denser type and tighter shapes, with the
 * violet level colour.
 * Token overrides only; light/dark come from the --c-lvl-* tokens. */

@layer themes {
  body[data-level="lise"] {
    --c-level: var(--c-lvl-lise);
    --c-level-soft: var(--c-lvl-lise-soft);

    --fs-body: 1.125rem;
    --fs-stem: 1.375rem;
    --fs-choice: 1.25rem;
    --math-scale: 1.12em;
    --lh-body: 1.6;

    --radius: 10px;
    --radius-m: 8px;
    --radius-l: 14px;
  }
}