/* 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. */

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

@layer tokens {
  /* Light scheme is the default. Values aim at 4.5:1 for text pairs and 3:1
   * for UI boundaries; the team audits exact ratios (T-0104). */
  :root {
    color-scheme: light dark;

    --c-bg: #ffffff;
    --c-surface: #f3f5f7;
    --c-text: #1b1f24;
    --c-muted: #4e565f;
    --c-accent: #1d4ed8;
    --c-accent-2: #0e7490;
    --c-correct: #15803d;
    --c-incorrect: #b91c1c;
    --c-warning: #9a6a00;
    --c-focus: #1d4ed8;
    --c-border: #6b7280;

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

    /* Neutral defaults (home/admin); level themes override these. */
    --fs-body: 1.125rem;
    --fs-stem: 1.375rem;
    --fs-choice: 1.25rem;
    --math-scale: 1.15em;
    --lh-body: 1.6;
    --lh-heading: 1.25;

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

    --radius-s: 4px;
    --radius-m: 8px;
    --radius-l: 12px;
    --radius: 10px;

    --shadow-1: 0 1px 2px rgb(16 24 40 / 0.08);
  }

  /* OS dark preference, unless the visitor pinned the light scheme. */
  @media (prefers-color-scheme: dark) {
    :root {
      --c-bg: #10141a;
      --c-surface: #1a2029;
      --c-text: #eef1f5;
      --c-muted: #aeb6c2;
      --c-accent: #93c5fd;
      --c-accent-2: #67e8f9;
      --c-correct: #4ade80;
      --c-incorrect: #f87171;
      --c-warning: #fbbf24;
      --c-focus: #93c5fd;
      --c-border: #8b939f;

      --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    }
  }

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

    --c-bg: #ffffff;
    --c-surface: #f3f5f7;
    --c-text: #1b1f24;
    --c-muted: #4e565f;
    --c-accent: #1d4ed8;
    --c-accent-2: #0e7490;
    --c-correct: #15803d;
    --c-incorrect: #b91c1c;
    --c-warning: #9a6a00;
    --c-focus: #1d4ed8;
    --c-border: #6b7280;

    --shadow-1: 0 1px 2px rgb(16 24 40 / 0.08);
  }

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

    --c-bg: #10141a;
    --c-surface: #1a2029;
    --c-text: #eef1f5;
    --c-muted: #aeb6c2;
    --c-accent: #93c5fd;
    --c-accent-2: #67e8f9;
    --c-correct: #4ade80;
    --c-incorrect: #f87171;
    --c-warning: #fbbf24;
    --c-focus: #93c5fd;
    --c-border: #8b939f;

    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
  }

  /* 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%;
  }

  body {
    background: var(--c-bg);
    color: var(--c-text);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
  }

  h1, h2, h3, h4 {
    line-height: var(--lh-heading);
    text-wrap: balance;
  }

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

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

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

  :focus-visible {
    outline: 3px solid var(--c-focus);
    outline-offset: 2px;
    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);
  }

  ::selection {
    background: var(--c-accent);
    color: var(--c-bg);
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms;
      animation-iteration-count: 1;
      transition-duration: 0.01ms;
      scroll-behavior: auto;
    }
  }
}
/* 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;
  }

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

  .container {
    width: 100%;
    max-width: 60rem;
    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: 47.5rem;
    margin-inline: auto;
  }

  .site-header {
    background: var(--c-surface);
    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 {
    font-weight: 700;
    text-decoration: none;
    color: var(--c-text);
    margin-inline-end: auto;
  }

  .site-main {
    display: block;
    padding-block: var(--space-l);
  }

  .site-footer {
    border-block-start: 1px solid var(--c-border);
    padding-block: var(--space-l);
    color: var(--c-muted);
    font-size: 1rem;
  }
}
/* components.css — header nav, preference links, error page and the level
 * theme demo blocks. Real content components arrive in Phase 2.
 * File 5 of the concatenated app bundle. */

@layer components {
  .level-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    list-style: none;
    padding: 0;
  }

  .level-nav a {
    display: inline-block;
    min-block-size: 2.75rem;
    line-height: 2.75rem;
    text-decoration: none;
  }

  .level-nav a[aria-current="true"] {
    color: var(--c-text);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .prefs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    align-items: center;
  }

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

  .pref-group a {
    display: inline-block;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    line-height: 2.75rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding-inline: var(--space-s);
  }

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

  /* Error page: icon + text, never color alone. */
  .error-page {
    text-align: center;
    padding-block: var(--space-xl);
  }

  .error-icon {
    display: inline-block;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    line-height: 3.5rem;
    font-size: 2rem;
    font-weight: 700;
    border: 3px solid var(--c-border);
    border-radius: 50%;
  }

  .error-code {
    color: var(--c-muted);
    letter-spacing: 0.1em;
    margin-block-start: var(--space-s);
  }

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

  /* 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);
  }
}
/* content.css — concept/question pages: breadcrumb, note card, question
 * cards, filter form, choice fieldset, hint/solution disclosures, 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;
    gap: var(--space-xs) var(--space-s);
    list-style: none;
    padding: 0;
    margin-block-end: var(--space-m);
    font-size: 1rem;
    color: var(--c-muted);
  }

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

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

  /* Concept header. */
  .concept-summary {
    max-width: 65ch;
  }

  .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;
  }

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

  /* Note card: wraps the stored note fragment. */
  .note-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-m) var(--space-l);
    box-shadow: var(--shadow-1);
    max-width: 65ch;
  }

  .note-card .note h3 {
    margin-block: var(--space-m) var(--space-xs);
  }

  .note-card .note h3:first-child {
    margin-block-start: 0;
  }

  .note-card .rule {
    font-size: var(--fs-stem);
  }

  .note-card .warning {
    border-inline-start: 4px solid var(--c-incorrect);
    padding-inline-start: var(--space-m);
    margin-block-start: var(--space-m);
  }

  .note-updated {
    color: var(--c-muted);
    font-size: 1rem;
    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-m);
  }

  .question-filter label {
    display: grid;
    gap: var(--space-xs);
    font-size: 1rem;
  }

  .question-filter select,
  .question-filter button {
    min-block-size: 2.75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    background: var(--c-bg);
    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);
  }

  /* Question cards on concept pages. */
  .question-list {
    display: grid;
    gap: var(--space-m);
    list-style: none;
    padding: 0;
  }

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

  .question-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    color: var(--c-muted);
    font-size: 1rem;
    margin-block-end: var(--space-xs);
  }

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

  .question-card-link {
    margin-block-start: var(--space-s);
  }

  /* Question page header. */
  .question-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-m);
    color: var(--c-muted);
  }

  .question-column .stem {
    font-size: var(--fs-stem);
    max-width: 65ch;
  }

  /* Choice fieldset: large tappable radio cards. */
  .choices {
    display: grid;
    gap: var(--space-s);
    border: 0;
    padding: 0;
    margin-block: var(--space-m);
    max-width: 65ch;
  }

  .choice {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: var(--space-s);
    align-items: start;
    min-block-size: 2.75rem;
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-s) var(--space-m);
    font-size: var(--fs-choice);
    cursor: pointer;
  }

  .choice input[type="radio"] {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    margin-block-start: 0.2rem;
    accent-color: var(--c-accent);
  }

  .choice-letter {
    display: inline-block;
    min-inline-size: 2rem;
    block-size: 2rem;
    line-height: 2rem;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
  }

  .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);
    max-width: 65ch;
  }

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

  /* Hint/solution disclosures. */
  details.solution,
  details.hints {
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-s) var(--space-m);
    margin-block: var(--space-s);
    max-width: 65ch;
  }

  details.solution > summary,
  details.hints > summary {
    min-block-size: 2.75rem;
    line-height: 2.75rem;
    font-weight: 700;
    cursor: pointer;
  }

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

  /* "Doğru cevap" summary opening the solution. */
  .answer-line {
    font-size: var(--fs-choice);
    margin-block: var(--space-s);
  }

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

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

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

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

  /* Neighbour, outcome and grade link lists. */
  .concept-links,
  .outcome-list {
    display: grid;
    gap: var(--space-xs);
    padding-inline-start: var(--space-l);
  }

  .badge-active,
  .badge-primary {
    display: inline-block;
    font-size: 1rem;
    color: var(--c-muted);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding-inline: var(--space-s);
    margin-inline-start: var(--space-xs);
  }

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

  .pagination a,
  .pagination [aria-current="page"] {
    display: inline-block;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    line-height: 2.75rem;
    text-align: center;
    text-decoration: none;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding-inline: var(--space-s);
  }

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

  /* 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);
  }
}
/* 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-body);
    color: var(--c-muted);
    max-width: 65ch;
  }

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

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

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

  .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 {
    list-style: none;
    padding-left: 0;
  }

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

  .level-card,
  .grade-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-m);
  }

  .level-card h3,
  .grade-card h3 {
    margin-top: 0;
  }

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

  .grade-cards {
    display: grid;
    gap: var(--space-m);
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  }

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

  .recent-kind,
  .recent-grade {
    color: var(--c-muted);
    font-size: var(--fs-body);
    margin-left: var(--space-s);
  }

  .theme-list .theme-item,
  .outcome-list .outcome-item {
    margin-bottom: var(--space-l);
  }

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

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

  .chip {
    display: inline-block;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-xs) var(--space-s);
  }

  .concept-chips .count-line {
    margin-left: var(--space-xs);
  }

  .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);
  }

  .empty-state {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--space-l);
    max-width: 65ch;
  }

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

  .static-prose h2 {
    margin-top: var(--space-l);
  }
}
/* practice.css — practice sessions and single-question checks: progress,
 * restart notices, answer controls (text inputs, true/false radios,
 * inline blank inputs, matching selects), navigation forms and the
 * summary. The shared verdict banner (.feedback) is styled elsewhere;
 * this sheet never touches it.
 * Token variables only; no hard-coded colors, sizes or radii. */

@layer components {
  /* Progress line and restart notice. */
  .practice-progress {
    color: var(--c-muted);
    font-size: 1rem;
  }

  .practice-notice {
    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;
  }

  /* Single text answer (numeric, expression) and fallback blank inputs. */
  .answer-field {
    display: grid;
    gap: var(--space-xs);
    max-width: 40ch;
  }

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

  .answer-field input[type="text"] {
    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;
  }

  /* Inline blank inputs inside the stored stem. */
  .blank-input {
    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;
    min-inline-size: 8ch;
    max-inline-size: 100%;
  }

  /* Doğru/Yanlış radios. */
  .true-false {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-l);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-s) var(--space-m);
    max-width: 65ch;
  }

  .true-false legend {
    font-weight: 700;
    padding-inline: var(--space-xs);
  }

  .true-false label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-s);
    min-height: 44px;
    font-size: var(--fs-choice);
  }

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

  /* Matching: one select per left item. */
  .match-answers {
    display: grid;
    gap: var(--space-s);
    max-width: 65ch;
  }

  .match-field {
    display: grid;
    gap: var(--space-xs);
  }

  .match-field 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;
    max-width: 40ch;
  }

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

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

  .practice-nav form {
    margin: 0;
  }

  /* Summary page. */
  .practice-score {
    font-size: var(--fs-stem);
    font-weight: 700;
  }

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

  /* Shared verdict banner (components.Feedback): icon + text, never
     colour alone. Correct is green-bordered, incorrect red-bordered,
     invalid input accent-bordered. */
  .feedback {
    border: 1px solid var(--c-border);
    border-inline-start-width: 4px;
    border-radius: var(--radius-s);
    background: var(--c-surface);
    padding: var(--space-s) var(--space-m);
    margin: var(--space-m) 0;
    max-width: 65ch;
  }

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

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

  .feedback-invalid {
    border-inline-start-color: var(--c-accent);
  }

  .feedback-title {
    font-weight: 700;
    margin: 0 0 var(--space-xs);
  }

  .feedback-misconception,
  .feedback-tip {
    margin: 0 0 var(--space-xs);
  }

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

  .feedback-items {
    margin: 0 0 var(--space-xs);
    padding-inline-start: var(--space-m);
  }

  .feedback-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s);
    margin: var(--space-s) 0 0;
  }
}
@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;
  }

  .fb-form {
    max-width: 44rem;
    display: grid;
    gap: var(--space-m);
  }

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

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

  .fb-radio {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    min-height: 44px;
    cursor: pointer;
  }

  .fb-radio input {
    width: 1.25rem;
    height: 1.25rem;
    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. */
  .btn {
    display: inline-block;
    font: inherit;
    line-height: var(--lh-body);
    padding: var(--space-xs) var(--space-m);
    min-height: 44px;
    border: 1px solid var(--c-border);
    border-radius: var(--radius-m);
    background: var(--c-bg);
    color: var(--c-text);
    text-decoration: none;
    cursor: pointer;
  }

  .btn-primary {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: var(--c-bg);
  }

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

  .btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--c-accent);
    text-decoration: underline;
    min-height: 0;
    padding: var(--space-xs) var(--space-s);
  }

  /* 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. */
  .empty-state {
    border: 1px dashed var(--c-border);
    border-radius: var(--radius-m);
    padding: var(--space-l);
    text-align: center;
    color: var(--c-muted);
  }

  .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;
  }
}
@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;
  }
}
/* 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, colourful, big touch targets, rounded.
 * File 6 of the concatenated app bundle. Token overrides only. */

@layer themes {
  body[data-level="ilkokul"] {
    --c-accent: #c2410c;
    --c-focus: #c2410c;

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

    --space-m: 1.25rem;
    --space-l: 2rem;
    --space-xl: 3rem;

    --radius: 16px;
    --radius-m: 12px;
    --radius-l: 20px;
  }

  @media (prefers-color-scheme: dark) {
    body[data-level="ilkokul"] {
      --c-accent: #fdba74;
      --c-focus: #fdba74;
    }
  }

  html[data-theme="acik"] body[data-level="ilkokul"] {
    --c-accent: #c2410c;
    --c-focus: #c2410c;
  }

  html[data-theme="koyu"] body[data-level="ilkokul"] {
    --c-accent: #fdba74;
    --c-focus: #fdba74;
  }
}
/* ortaokul.css — balanced, energetic, two accent colors.
 * File 7 of the concatenated app bundle. Token overrides only. */

@layer themes {
  body[data-level="ortaokul"] {
    --c-accent: #1d4ed8;
    --c-accent-2: #0e7490;
    --c-focus: #1d4ed8;

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

    --radius: 10px;
  }

  @media (prefers-color-scheme: dark) {
    body[data-level="ortaokul"] {
      --c-accent: #93c5fd;
      --c-accent-2: #67e8f9;
      --c-focus: #93c5fd;
    }
  }

  html[data-theme="acik"] body[data-level="ortaokul"] {
    --c-accent: #1d4ed8;
    --c-accent-2: #0e7490;
    --c-focus: #1d4ed8;
  }

  html[data-theme="koyu"] body[data-level="ortaokul"] {
    --c-accent: #93c5fd;
    --c-accent-2: #67e8f9;
    --c-focus: #93c5fd;
  }
}
/* lise.css — calm, dense, focused, muted palette, tighter spacing.
 * File 8 of the concatenated app bundle. Token overrides only. */

@layer themes {
  body[data-level="lise"] {
    --c-accent: #475569;
    --c-focus: #475569;

    --fs-body: 1.125rem;
    --fs-stem: 1.3125rem;
    --fs-choice: 1.1875rem;
    --math-scale: 1.1em;
    --lh-body: 1.6;

    --space-m: 0.75rem;
    --space-l: 1.25rem;
    --space-xl: 2rem;

    --radius: 6px;
    --radius-m: 6px;
    --radius-l: 8px;
  }

  @media (prefers-color-scheme: dark) {
    body[data-level="lise"] {
      --c-accent: #b6c2d2;
      --c-focus: #b6c2d2;
    }
  }

  html[data-theme="acik"] body[data-level="lise"] {
    --c-accent: #475569;
    --c-focus: #475569;
  }

  html[data-theme="koyu"] body[data-level="lise"] {
    --c-accent: #b6c2d2;
    --c-focus: #b6c2d2;
  }
}