/**
 * ComputingSkillSet.com — Math Trainer Styles
 * Version: 1.0 (2026-09-05)
 *
 * Layers on top of demos/lib/demo-base.css, whose design tokens (--css-*) it uses
 * throughout. Load demo-base.css FIRST.
 *
 * MAINTENANCE RULE: shared by every trainer page. Only additions are safe.
 * Mobile-first: the base rules are the phone layout, media queries widen it.
 *
 * The one place this file departs from the site tokens is the accent palette —
 * a maths drill for kids needs more colour than a CS demo, so four extra hues
 * are defined here rather than in demo-base.css, which stays the site identity.
 */

:root {
  --mt-accent:      #7c3aed;   /* violet — headings, active states            */
  --mt-accent-soft: #ede9fe;
  --mt-warm:        #ea580c;   /* orange — streaks, stars                     */
  --mt-cool:        #0891b2;   /* teal — sliders, secondary highlights        */
  --mt-pink:        #db2777;   /* pink — decorative card icons                */
  --mt-ink:         var(--css-text);
  --mt-tap:         48px;      /* minimum touch target                        */
}

/* --- Shell ---------------------------------------------------------- */

body { padding: 0; background: var(--css-bg); }

.mt-shell {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--css-space-md) var(--css-space-md) var(--css-space-xl);
}

.mt-title {
  font-size: 1.5rem;
  margin: 0 0 var(--css-space-xs);
  color: var(--mt-accent);
  letter-spacing: -0.01em;
}

.mt-intro {
  color: var(--css-text-muted);
  margin: 0 0 var(--css-space-lg);
  font-size: 0.95rem;
}

.mt-siblings {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--css-space-sm);
  justify-content: center;
  margin-top: var(--css-space-xl);
  padding-top: var(--css-space-md);
  border-top: 1px solid var(--css-border);
  font-size: 0.9rem;
}
.mt-siblings span { color: var(--css-text-muted); }
/* A group heading takes a row of its own, so each Stufe's links wrap under it. */
.mt-siblings .mt-siblings__group { flex-basis: 100%; text-align: center; font-size: 0.78rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.1em; margin-top: var(--css-space-sm); }
.mt-siblings a {
  color: var(--mt-accent);
  text-decoration: none;
  border-bottom: 2px solid var(--mt-accent-soft);
  padding-bottom: 1px;
}

.mt-privacy {
  margin: var(--css-space-lg) 0 0;
  font-size: 0.8rem;
  color: var(--css-text-muted);
  text-align: center;
}

/* --- Sound toggle ----------------------------------------------------- *
 * Rendered in two places — beside the page title on the menu, and in the round's
 * top bar — from the same soundBtnHtml(). Sized like .mt-back so the two 34px
 * squares in the bar match; the accent border is the "on" state, since the emoji
 * alone is too small to read as a state change on a phone.
 */

.mt-head {
  display: flex;
  align-items: flex-start;
  gap: var(--css-space-sm);
}
.mt-head .mt-title { flex: 1 1 auto; min-width: 0; }

.mt-sound {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  padding: 0;
  display: grid; place-items: center;
  font-size: 1rem; line-height: 1;
  background: var(--css-surface);
  color: var(--css-text-muted);
  border: 1px solid var(--css-border);
  border-radius: var(--css-radius-md);
  cursor: pointer;
}
.mt-sound[aria-pressed="true"] { border-color: var(--mt-accent); }

/* --- Menu of exercises ---------------------------------------------- */

.mt-menu {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--css-space-sm);
}

@media (min-width: 560px) {
  .mt-menu { grid-template-columns: 1fr 1fr; gap: var(--css-space-md); }
}

/* Section heading inside the menu grid — only rendered when a page uses MT.group(). */
.mt-group {
  grid-column: 1 / -1;
  margin: var(--css-space-md) 0 0;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--css-text-muted);
  border-bottom: 2px solid var(--css-border);
  padding-bottom: var(--css-space-xs);
}
.mt-group:first-child { margin-top: 0; }

.mt-card {
  display: flex;
  align-items: center;
  gap: var(--css-space-md);
  width: 100%;
  min-height: var(--mt-tap);
  padding: var(--css-space-md);
  text-align: left;
  background: var(--css-surface);
  border: 2px solid var(--css-border);
  border-radius: var(--css-radius-lg);
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: border-color var(--css-transition), transform var(--css-transition),
              box-shadow var(--css-transition);
}

.mt-card:active { transform: translateY(1px); }
.mt-card:focus-visible { outline: 3px solid var(--mt-accent); outline-offset: 2px; }

.mt-card__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--css-radius-md);
  background: var(--mt-accent-soft);
  color: var(--mt-accent);
  font-size: 1.25rem;
}

.mt-card:nth-child(4n+2) .mt-card__icon { background:#fee2e2; color: var(--mt-pink); }
.mt-card:nth-child(4n+3) .mt-card__icon { background:#ffedd5; color: var(--mt-warm); }
.mt-card:nth-child(4n+4) .mt-card__icon { background:#cffafe; color: var(--mt-cool); }

.mt-card__body  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-card__title { font-weight: 700; font-size: 1rem; }
.mt-card__sub   { font-size: 0.85rem; color: var(--css-text-muted); }
.mt-card__meta  { font-size: 0.72rem; color: var(--css-text-muted); text-transform: uppercase;
                  letter-spacing: 0.06em; margin-top: 2px; }

/* --- „Zum Ausprobieren“: links to computingskillset.com simulations --- *
 * Looks like a card but is a link out, so it is told apart by the dashed border and
 * the arrow — a child must not expect a round to start. */
.mt-demos { margin-top: var(--css-space-lg); }
.mt-demos__note { margin: var(--css-space-xs) 0 var(--css-space-sm); font-size: 0.85rem;
                  color: var(--css-text-muted); }
.mt-demos__list { display: grid; gap: var(--css-space-sm); }
@media (min-width: 560px) {
  .mt-demos__list { grid-template-columns: 1fr 1fr; gap: var(--css-space-md); }
}
.mt-demo {
  display: flex;
  align-items: center;
  gap: var(--css-space-md);
  min-height: var(--mt-tap);
  padding: var(--css-space-md);
  background: var(--css-surface);
  border: 2px dashed var(--css-border-strong);
  border-radius: var(--css-radius-lg);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--css-transition), box-shadow var(--css-transition);
}
.mt-demo:focus-visible { outline: 3px solid var(--mt-accent); outline-offset: 2px; }
.mt-demo__icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: var(--css-radius-md);
  background: var(--css-surface-raised);
  color: var(--css-text-muted);
  font-size: 1.25rem;
}

/* --- Top bar, progress, status -------------------------------------- */

.mt-bar {
  display: flex;
  align-items: center;
  gap: var(--css-space-sm);
  margin-bottom: var(--css-space-sm);
}

.mt-back {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  font-size: 1.4rem; line-height: 1;
  background: var(--css-surface);
  color: var(--css-text-muted);
  border: 1px solid var(--css-border);
  border-radius: var(--css-radius-md);
  cursor: pointer;
}

.mt-bar__title {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.mt-bar__score {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: var(--css-text-muted);
}

.mt-progress {
  height: 8px;
  background: var(--css-border);
  border-radius: var(--css-radius-xl);
  overflow: hidden;
}
.mt-progress__bar {
  height: 100%;
  background: linear-gradient(90deg, var(--mt-cool), var(--mt-accent));
  transition: width 0.35s ease;
}

.mt-status {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--css-text-muted);
  margin: var(--css-space-sm) 0 var(--css-space-md);
}
.mt-status__right { display: inline-flex; gap: var(--css-space-md); }
.mt-hits   { color: var(--css-success); font-weight: 700; }
.mt-streak { color: var(--mt-warm); font-weight: 700; }

/* --- Question card --------------------------------------------------- */

.mt-q {
  background: var(--css-surface);
  border: 1px solid var(--css-border);
  border-radius: var(--css-radius-lg);
  box-shadow: var(--css-shadow-sm);
  padding: var(--css-space-lg) var(--css-space-md);
}
@media (min-width: 560px) { .mt-q { padding: var(--css-space-xl); } }

.mt-prompt {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  margin-bottom: var(--css-space-sm);
}
@media (min-width: 560px) { .mt-prompt { font-size: 1.9rem; } }

.mt-prompt .mt-op { color: var(--mt-accent); padding: 0 0.12em; }
/* Highlights one character inside a prompt — the minus sign whose role is being asked about. */
.mt-prompt .mt-hl {
  color: var(--mt-warm);
  background: #ffedd5;
  border-radius: var(--css-radius-sm);
  padding: 0 0.12em;
}

.mt-prompt .mt-gap {
  display: inline-block;
  min-width: 2.2em;
  border-bottom: 3px solid var(--mt-accent);
  margin: 0 0.15em;
}

.mt-hint {
  text-align: center;
  color: var(--css-text-muted);
  font-size: 0.9rem;
  margin-bottom: var(--css-space-md);
}

/* The columnar sums are fixed-width blocks; they scroll inside this container rather
   than pushing the page sideways on a narrow phone. */
.mt-aside {
  margin: var(--css-space-md) 0;
  display: flex;
  /* `safe` is load-bearing on a phone. A centred flex item that is WIDER than its
     scrolling box overflows equally to both sides — and the left overflow cannot be
     reached, because scrollLeft stops at 0. A six-column Wertetabelle therefore lost its
     row labels entirely: the first <th> sat at left −30px with the box already scrolled
     fully left. `safe center` falls back to start-alignment exactly when that would
     happen, and changes nothing when the content fits. The plain `center` above it stays
     as the fallback for anything that does not understand the keyword.
     Found 2026-09-06 on zinsen-wachstum; it affected every wide aside on every page. */
  justify-content: center;
  justify-content: safe center;
  overflow-x: auto;
  padding-bottom: var(--css-space-xs);
}

/* --- Columnar arithmetic (schriftliches Rechnen) --------------------- */

.mt-column {
  display: inline-block;
  font-family: var(--css-font-mono);
  font-size: 1.4rem;
  line-height: 1.5;
  background: var(--css-surface-raised);
  border: 1px solid var(--css-border);
  border-radius: var(--css-radius-md);
  padding: var(--css-space-md) var(--css-space-lg);
  white-space: pre;
}
.mt-column__row { display: flex; justify-content: flex-end; gap: 0.6em; }
.mt-column__op  { color: var(--mt-accent); font-weight: 700; }
.mt-column__rule{ border-top: 3px solid var(--mt-ink); margin-top: 0.15em; padding-top: 0.15em; }

@media (max-width: 420px) {
  .mt-column { font-size: 1.15rem; padding: var(--css-space-sm) var(--css-space-md); }
}

/* --- Inputs ---------------------------------------------------------- */

.mt-row    { display: flex; justify-content: center; }
.mt-numwrap{ display: inline-flex; align-items: center; gap: var(--css-space-sm); }

.mt-input {
  width: 6.5em;
  min-height: var(--mt-tap);
  padding: var(--css-space-sm) var(--css-space-md);
  font-family: var(--css-font-mono);
  font-size: 1.35rem;
  text-align: center;
  color: var(--css-text);
  background: var(--css-surface);
  border: 2px solid var(--css-border-strong);
  border-radius: var(--css-radius-md);
  transition: border-color var(--css-transition), box-shadow var(--css-transition);
}
.mt-input--wide { width: 9em; }
.mt-input:focus {
  outline: none;
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 4px var(--mt-accent-soft);
}
.mt-input.is-right { border-color: var(--css-success); background: var(--css-success-bg); }
.mt-input.is-wrong { border-color: var(--css-error);   background: var(--css-error-bg); }
.mt-input:disabled { opacity: 1; }

.mt-unit { font-size: 1.05rem; color: var(--css-text-muted); font-weight: 600; }

.mt-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--css-space-md);
  justify-items: center;
}
@media (min-width: 560px) {
  .mt-fields { grid-auto-flow: column; grid-template-columns: none; }
  /* Fields holding a written-out list stay stacked at every width — a row of them
     would overflow long before the viewport is wide enough to hold it. */
  .mt-fields--stacked { grid-auto-flow: row; grid-template-columns: 1fr; }
}

/* A list answer: "1, 2, 3, 4, 6, 8, 12, 24" needs room, and full width on a phone. */
.mt-input--word {
  width: 9em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mt-input--list {
  width: min(100%, 22em);
  text-align: left;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}
.mt-fields--stacked .mt-field { width: 100%; align-items: stretch; }
.mt-fields--stacked .mt-field__label { text-align: left; }
.mt-fields--stacked .mt-numwrap { width: 100%; }
.mt-field { display: flex; flex-direction: column; align-items: center; gap: var(--css-space-xs); }
.mt-field__label {
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--css-text-muted);
}
/* A variable name inside a label keeps its own case. The labels are upper-cased, so
   "Exponent von b" reaches the child as "EXPONENT VON B" — a letter that appears
   nowhere in the question above it. Wrap the variable: <span class="mt-var">b</span>.
   (Added 2026-09-06. The hash this comment changes is deliberate: the previous hash
   was poisoned in Cloudflare by a failed deploy's verification step — see the
   cache-busting section of trainers/README.md — and a new hash is a new URL.) */
.mt-field__label .mt-var { text-transform: none; font-style: italic; }
/* A unit or an abbreviation keeps its case but is not a variable, so no italics: „mm“, „h“,
   „ggT“ upper-cased read as „MM“, „H“, „GGT“ (found 2026-10-12 on the Größen cards). */
.mt-field__label .mt-keep { text-transform: none; }

/* --- Option buttons -------------------------------------------------- */

.mt-options { display: grid; gap: var(--css-space-sm); }
.mt-options--single { grid-template-columns: 1fr; }
.mt-options--multi  { grid-template-columns: 1fr; }
@media (min-width: 480px) {
  .mt-options--multi  { grid-template-columns: 1fr 1fr; }
  .mt-options--single { grid-template-columns: 1fr 1fr; }
}
.mt-options--compare { grid-template-columns: repeat(3, 1fr); max-width: 340px; margin: 0 auto; }

.mt-opt {
  display: flex;
  align-items: center;
  gap: var(--css-space-sm);
  min-height: var(--mt-tap);
  padding: var(--css-space-sm) var(--css-space-md);
  font-family: var(--css-font-sans);
  font-size: 1.05rem;
  text-align: left;
  color: var(--css-text);
  background: var(--css-surface);
  border: 2px solid var(--css-border-strong);
  border-radius: var(--css-radius-md);
  cursor: pointer;
  transition: border-color var(--css-transition), background var(--css-transition);
}
.mt-opt:focus-visible { outline: 3px solid var(--mt-accent); outline-offset: 2px; }
.mt-opt.is-sel   { border-color: var(--mt-accent); background: var(--mt-accent-soft); }
.mt-opt.is-right { border-color: var(--css-success); background: var(--css-success-bg); }
.mt-opt.is-wrong { border-color: var(--css-error);   background: var(--css-error-bg); }
.mt-opt:disabled { cursor: default; }

.mt-opt--sym {
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  font-family: var(--css-font-mono);
  min-height: 64px;
}

.mt-opt__box {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border: 2px solid var(--css-border-strong);
  border-radius: var(--css-radius-sm);
  background: var(--css-surface);
}
.mt-opt.is-sel   .mt-opt__box { border-color: var(--mt-accent); background: var(--mt-accent); }
.mt-opt.is-right .mt-opt__box { border-color: var(--css-success); background: var(--css-success); }
.mt-opt__text { font-family: var(--css-font-mono); }
.mt-opt__label { min-width: 0; }

/* --- Slider / number line -------------------------------------------- */

.mt-slider { padding: var(--css-space-md) var(--css-space-xs) 0; }

.mt-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 10px;
  border-radius: var(--css-radius-xl);
  background: linear-gradient(90deg, var(--mt-cool), var(--mt-accent));
  outline: none;
}
.mt-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--css-surface);
  border: 4px solid var(--mt-accent);
  box-shadow: var(--css-shadow-md);
  cursor: grab;
}
.mt-range::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--css-surface);
  border: 4px solid var(--mt-accent);
  box-shadow: var(--css-shadow-md);
  cursor: grab;
}
.mt-range:disabled { filter: grayscale(0.4); }

.mt-scale { position: relative; height: 34px; margin-top: var(--css-space-xs); }
.mt-tick  { position: absolute; transform: translateX(-50%); text-align: center; }
.mt-tick i { display: block; width: 2px; height: 8px; background: var(--css-border-strong); margin: 0 auto; }
.mt-tick b { display: block; font-size: 0.75rem; color: var(--css-text-muted); font-weight: 600; }

.mt-readout { text-align: center; font-size: 1.05rem; margin-top: var(--css-space-sm); }
.mt-readout strong { font-family: var(--css-font-mono); color: var(--mt-accent); font-size: 1.3rem; }

/* --- Fractions -------------------------------------------------------- */

.mt-frac {
  display: inline-flex;
  flex-direction: column;
  vertical-align: middle;
  text-align: center;
  line-height: 1.05;
  margin: 0 0.15em;
  font-size: 0.72em;
}
.mt-frac__n { border-bottom: 2px solid currentColor; padding: 0 0.25em; }
.mt-frac__d { padding: 0 0.25em; }

/* --- Feedback --------------------------------------------------------- */

.mt-feedback {
  display: none;
  margin-top: var(--css-space-md);
  padding: var(--css-space-sm) var(--css-space-md);
  border-radius: var(--css-radius-md);
  border-left: 5px solid transparent;
  font-weight: 600;
}
.mt-feedback.is-on { display: block; }
.mt-feedback--correct { background: var(--css-success-bg); color:#166534; border-left-color: var(--css-success); }
.mt-feedback--wrong   { background: var(--css-error-bg);   color:#991b1b; border-left-color: var(--css-error); }
.mt-feedback--info    { background: var(--css-info-bg);    color:#1e40af; border-left-color: var(--css-info); }
.mt-sol  { display: block; margin-top: 2px; font-weight: 700; }
.mt-note { font-weight: 500; font-size: 0.9rem; margin-top: 2px; }

/* --- Actions ---------------------------------------------------------- */

.mt-actions {
  display: flex;
  gap: var(--css-space-sm);
  margin-top: var(--css-space-lg);
}

.mt-btn {
  flex: 1 1 auto;
  min-height: var(--mt-tap);
  padding: var(--css-space-sm) var(--css-space-lg);
  font-family: var(--css-font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--css-text-on-primary);
  background: var(--mt-accent);
  border: 2px solid var(--mt-accent);
  border-radius: var(--css-radius-md);
  cursor: pointer;
  transition: background var(--css-transition), transform var(--css-transition);
}
.mt-btn:active { transform: translateY(1px); }
.mt-btn:focus-visible { outline: 3px solid var(--mt-cool); outline-offset: 2px; }
.mt-btn--ghost {
  flex: 0 1 auto;
  background: transparent;
  color: var(--css-text-muted);
  border-color: var(--css-border-strong);
}

/* --- Result screen ---------------------------------------------------- */

.mt-result {
  background: var(--css-surface);
  border: 1px solid var(--css-border);
  border-radius: var(--css-radius-lg);
  box-shadow: var(--css-shadow-md);
  padding: var(--css-space-xl) var(--css-space-md);
  text-align: center;
}

.mt-stars { font-size: 2.6rem; letter-spacing: 0.1em; line-height: 1; }
.mt-stars span    { color: var(--css-border-strong); }
.mt-stars span.on { color: var(--mt-warm); }

.mt-result__score {
  font-size: 3rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--mt-accent);
  margin-top: var(--css-space-sm);
}
.mt-result__praise { color: var(--css-text-muted); margin: 0 0 var(--css-space-lg); }

.mt-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--css-space-sm);
  margin-bottom: var(--css-space-md);
}
.mt-stats div {
  background: var(--css-surface-raised);
  border-radius: var(--css-radius-md);
  padding: var(--css-space-sm);
}
.mt-stats span   { display: block; font-size: 0.72rem; text-transform: uppercase;
                   letter-spacing: 0.06em; color: var(--css-text-muted); }
.mt-stats strong { display: block; font-size: 1.2rem; font-variant-numeric: tabular-nums; }

.mt-review { text-align: left; margin-top: var(--css-space-md); }
.mt-review summary {
  cursor: pointer; font-weight: 700; color: var(--mt-accent);
  padding: var(--css-space-sm); border-radius: var(--css-radius-md);
}
.mt-review ul { list-style: none; padding: 0; margin: var(--css-space-sm) 0 0; }
.mt-review li {
  display: flex; flex-wrap: wrap; gap: var(--css-space-sm);
  justify-content: space-between;
  padding: var(--css-space-sm);
  border-bottom: 1px solid var(--css-border);
  font-size: 0.95rem;
}
.mt-review__q { color: var(--css-text-muted); }
.mt-review__a { font-weight: 700; color: var(--css-success); }

/* --- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --- Data, charts and diagrams (Daten und Diagramme) -------------------
   Added 2026-09-06 for the daten-diagramme trainer. Additions only — nothing
   above this line was touched, so every other page renders exactly as before.

   Charts are inline SVG written by the page, not a library: the constraint is
   no build step and no CDN, and a bar chart is forty lines of geometry. Colour
   comes from the classes below rather than fill attributes so the palette stays
   in one file. */

.mt-svg {
  display: block;
  max-width: 100%;
  height: auto;
  font-family: var(--css-font-sans);
}
.mt-svg text            { fill: var(--mt-ink); font-size: 12px; font-weight: 600; }
.mt-svg .mt-svg__muted  { fill: var(--css-text-muted); font-size: 11px; font-weight: 500; }
.mt-svg .mt-svg__cat    { font-size: 11px; font-weight: 600; }
.mt-svg .mt-svg__edge   { fill: var(--mt-accent); font-size: 11px; font-weight: 700; }
.mt-svg .mt-svg__in     { fill: #fff; font-size: 11px; font-weight: 700; }
.mt-svg .mt-svg__axis   { stroke: var(--css-border-strong); stroke-width: 2; }
.mt-svg .mt-svg__grid   { stroke: var(--css-border); stroke-width: 1; }
.mt-svg .mt-svg__link   { stroke: var(--css-border-strong); stroke-width: 2; fill: none; }
.mt-svg .mt-svg__seg    { stroke: var(--css-surface); stroke-width: 2; }

/* Five hues, cycled by index. Enough for any frequency table a 12-year-old meets. */
.mt-svg .mt-c0 { fill: var(--mt-accent); }
.mt-svg .mt-c1 { fill: var(--mt-cool); }
.mt-svg .mt-c2 { fill: var(--mt-warm); }
.mt-svg .mt-c3 { fill: var(--mt-pink); }
.mt-svg .mt-c4 { fill: #16a34a; }

/* Frequency tables. Two or three columns, read top to bottom — the shape a
   schoolbook uses, and the one that survives a phone screen. */
.mt-table {
  border-collapse: collapse;
  font-size: 0.95rem;
  background: var(--css-surface-raised);
}
.mt-table th, .mt-table td {
  border: 1px solid var(--css-border);
  padding: 6px 14px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mt-table th { background: var(--mt-accent-soft); color: var(--mt-accent); font-weight: 700; }
.mt-table th:first-child, .mt-table td:first-child { text-align: left; }
.mt-table .is-hl { background: var(--mt-accent-soft); font-weight: 700; }
/* A cross table has four or five columns, not two: at 14 px of padding a Vierfeldertafel was 415 px
   wide and a 3 × 3 Kreuztabelle 492 px, both scrolled sideways inside a 330-px box (375 px, 2026-10-13). */
.mt-table--tight { font-size: 0.85rem; }
.mt-table--tight th, .mt-table--tight td { padding: 4px 6px; }

/* An Urliste — the raw answers in the order they were collected. */
.mt-data {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  max-width: 540px;
}
.mt-data__cap { flex: 1 0 100%; text-align: center; font-size: 0.85rem;
                color: var(--css-text-muted); }
.mt-data span:not(.mt-data__cap) {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--css-surface-raised);
  border: 1px solid var(--css-border);
  font-family: var(--css-font-mono);
  font-size: 0.9rem;
}

/* Piktogramm: one symbol stands for several things, and the key says how many. */
.mt-picto {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 14px;
  align-items: center;
  text-align: left;
}
.mt-picto__key   { grid-column: 1 / -1; font-size: 0.85rem; color: var(--css-text-muted); }
.mt-picto__label { font-weight: 600; font-size: 0.95rem; white-space: nowrap; }
.mt-picto__syms  { font-size: 1.2rem; letter-spacing: 0.18em; line-height: 1.5; }

/* --- Written-out numbers and numerals (zahlen-runden) ------------------ */

.mt-word {
  max-width: 30ch;
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: center;
  overflow-wrap: anywhere;      /* „vierhundertzweiundzwanzigtausendsechzig“ */
}

.mt-roman {
  font-family: var(--css-font-mono);
  font-size: 2.1rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mt-accent);
}

/* --- Geometry figures (winkel-figuren) --------------------------------- */

.mt-svg .mt-svg__leg   { stroke: var(--mt-accent); stroke-width: 3; stroke-linecap: round; }
.mt-svg .mt-svg__line  { stroke: var(--css-text); stroke-width: 2; }
/* A hidden edge in a Schrägriss: dashed and muted, so the solid reads as a solid.
   An SVG <line> defaults to stroke:none, so a MISSING class here does not fall back to
   a visible line — it silently deletes the edge. Added 2026-09-06 for prismen-pyramiden. */
.mt-svg .mt-svg__hidden { stroke: var(--css-text-muted); stroke-width: 1.5;
                          stroke-dasharray: 5 4; fill: none; }
.mt-svg .mt-svg__arc   { stroke: var(--mt-warm); stroke-width: 2.5; fill: none; }
.mt-svg .mt-svg__pt    { fill: var(--mt-accent); }
.mt-svg .mt-svg__shape { fill: var(--mt-accent-soft); stroke: var(--mt-accent); stroke-width: 2.5;
                         stroke-linejoin: round; }

/* --- Zufallsgeräte und Liniendiagramme (zufall-wahrscheinlichkeit) ------
   Added 2026-09-06. Additions only; nothing above this line was touched.

   The mt-c0..4 palette above is five distinguishable hues with no meaning
   attached — right for a frequency table, wrong the moment the QUESTION
   names a colour. „In einem Sackerl liegen 4 rote Kugeln“ beside a picture
   of four accent-coloured circles is a drawing that contradicts its own
   prompt, and no gate on these pages can look at a drawing. So these six
   are fixed hex values on purpose: they are the colour word in the text,
   not a theme decision. Weiß carries a stroke, or it disappears against
   the surface. */
.mt-svg .mt-f-rot     { fill: #dc2626; }
.mt-svg .mt-f-blau    { fill: #2563eb; }
.mt-svg .mt-f-gruen   { fill: #16a34a; }
.mt-svg .mt-f-gelb    { fill: #eab308; }
.mt-svg .mt-f-weiss   { fill: #ffffff; stroke: var(--css-border-strong); stroke-width: 1.5; }
.mt-svg .mt-f-schwarz { fill: #1f2937; }

/* The Glücksrad pointer, and the line of a Liniendiagramm. A <polyline> defaults
   to fill:black, which paints the area under the line — fill:none is required,
   not cosmetic. */
.mt-svg .mt-svg__ptr    { fill: var(--css-text); }
.mt-svg .mt-svg__series { fill: none; stroke: var(--mt-accent); stroke-width: 2.5;
                          stroke-linejoin: round; stroke-linecap: round; }

/* --- Sentence widgets: pick, paint, gaps (2026-09-19, Grammatik pages) ---
   Colours for painted units come from the page (grammatik/lib/grammatik.css): a badge
   carries a class, and the same class on a unit gives it that badge's colour. This
   file only knows neutral selection states. */

.mt-sent {
  font-size: 1.25rem;
  line-height: 2.6;
  text-align: left;
  padding: var(--css-space-sm) 0;
}
.mt-seg { white-space: nowrap; }
.mt-sent--word { text-align: center; font-size: 1.6rem; }
.mt-sent--word .mt-unit { margin: 0 1px; }
.mt-word, .mt-punct { padding: 0 .05em; }
/* button.mt-unit, not .mt-unit: the label beside a number field („cm“, „€“) is a span.mt-unit too, and this
   rule drew it as a 44-px bordered box that looked like a button, on every maths page from 2026-09-19 to
   2026-10-13 (seen at 375 px on reelle-zahlen). (0,1,1) still loses to every .mt-unit.is-… state rule below. */
/* Key strip under a number-pad box: „−“, „/“ and „,“, which an iPhone's decimal pad lacks (2026-10-15).
   Hidden where a real keyboard exists. 44 px targets; touch-action stops a double tap from zooming. */
.mt-keys { display: flex; justify-content: center; gap: 10px; margin: 10px 0 2px; }
.mt-key {
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  min-width: 56px;
  min-height: 44px;
  color: var(--css-text);
  background: var(--css-surface);
  border: 2px solid var(--css-border-strong);
  border-radius: var(--css-radius-md);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.mt-key:active { background: var(--mt-accent-soft); border-color: var(--mt-accent); }
.mt-key:disabled { opacity: .45; cursor: default; }
@media (hover: hover) and (pointer: fine) { .mt-keys { display: none; } }

button.mt-unit {
  position: relative;
  font: inherit;
  line-height: 1.4;
  color: var(--css-text);
  background: var(--css-surface);
  border: 2px solid var(--css-border-strong);
  border-radius: var(--css-radius-md);
  padding: .15em .4em;
  min-height: 44px;
  cursor: pointer;
  white-space: normal;
  touch-action: manipulation;
}
.mt-unit:focus-visible { outline: 3px solid var(--mt-accent); outline-offset: 2px; }
.mt-unit.is-sel { border-color: var(--mt-accent); background: var(--mt-accent-soft); }
.mt-unit:disabled { cursor: default; }
.mt-unit.is-right  { border-color: var(--css-success); background: var(--css-success-bg); }
.mt-unit.is-missed { border-color: var(--css-success); border-style: dashed; }
.mt-unit.is-wrong  { border-color: var(--css-error); background: var(--css-error-bg); }
/* A painted unit shows its label as a small tag on the frame, so the answer never
   depends on telling two colours apart. */
.mt-unit[data-tag]::before {
  content: attr(data-tag);
  position: absolute;
  top: -.85em; left: .35em;
  font-size: .6rem; font-weight: 700; line-height: 1.2;
  padding: 0 .3em;
  border-radius: 3px;
  background: var(--css-surface);
  border: 1px solid currentColor;
}
.mt-unit.is-painted.is-wrong { outline: 3px solid var(--css-error); outline-offset: 2px; }
.mt-unit.is-painted.is-right { outline: 3px solid var(--css-success); outline-offset: 2px; }

.mt-none-row { margin-top: var(--css-space-sm); }
.mt-none {
  font: inherit; font-size: .95rem;
  min-height: var(--mt-tap);
  padding: var(--css-space-xs) var(--css-space-md);
  background: var(--css-surface); color: var(--css-text-muted);
  border: 2px dashed var(--css-border-strong); border-radius: var(--css-radius-md);
  cursor: pointer;
}
.mt-none.is-sel    { border-style: solid; border-color: var(--mt-accent); color: var(--mt-accent); background: var(--mt-accent-soft); }
.mt-none.is-right  { border-style: solid; border-color: var(--css-success); background: var(--css-success-bg); color: var(--css-text); }
.mt-none.is-missed { border-color: var(--css-success); color: var(--css-text); }
.mt-none.is-wrong  { border-style: solid; border-color: var(--css-error); background: var(--css-error-bg); }

.mt-palette {
  display: flex; flex-wrap: wrap; gap: var(--css-space-sm);
  margin-bottom: var(--css-space-sm);
}
.mt-badge {
  font: inherit; font-size: .9rem; font-weight: 600;
  min-height: 40px;
  padding: .2em .8em;
  border: 2px solid currentColor;
  border-radius: var(--css-radius-md);
  background: var(--css-surface);
  cursor: grab;
  touch-action: none;           /* the badge is a drag handle, not a scroll surface */
  user-select: none; -webkit-user-select: none;
}
.mt-badge.is-active { box-shadow: 0 0 0 3px var(--css-surface), 0 0 0 5px currentColor; }
.mt-badge:disabled { cursor: default; opacity: .6; }
.mt-badge--ghost {
  position: fixed; z-index: 1000; pointer-events: none;
  transform: translate(-50%, -120%);
  box-shadow: var(--css-shadow-md);
}

.mt-sent--gaps { line-height: 2.4; }
.mt-gap {
  display: inline-block;
  vertical-align: middle;
  width: 22px; height: 40px;
  margin: 0 1px;
  padding: 0;
  background: none; border: none;
  cursor: pointer;
  touch-action: manipulation;
}
.mt-gap i {
  display: block; width: 3px; height: 100%; margin: 0 auto;
  border-radius: 2px;
  background: var(--css-border);
}
.mt-gap:focus-visible { outline: 3px solid var(--mt-accent); outline-offset: 1px; }
.mt-gap.is-sel i    { background: var(--mt-accent); width: 4px; }
.mt-gap.is-right i  { background: var(--css-success); width: 4px; }
.mt-gap.is-missed i { background: repeating-linear-gradient(var(--css-success) 0 5px, transparent 5px 9px); width: 4px; }
.mt-gap.is-wrong i  { background: var(--css-error); width: 4px; }

.mt-count { white-space: nowrap; }
.mt-count-off .mt-count { display: none; }

/* --- Hover, and ONLY where a real pointer exists -----------------------------
   A touch screen keeps :hover on the element it last tapped. That made a tapped
   Satzglied-Grenze stay grey until the NEXT tap moved the hover away, so every
   separator turned purple one tap late (kid test, 2026-09-20) — the hover rule
   outranks .mt-gap.is-sel (0,3,1 against 0,2,1) and simply won. Two guards:
   the media query, so touch devices get no hover styling at all, and :not() on
   the state classes, so a selected or graded element is never greyed on a desktop
   either. Keep both when adding a hover rule here. */
@media (hover: hover) and (pointer: fine) {
  .mt-siblings a:hover { border-bottom-color: var(--mt-accent); }
  .mt-sound:hover { border-color: var(--mt-accent); }
  .mt-card:hover  { border-color: var(--mt-accent); box-shadow: var(--css-shadow-md); }
  .mt-demo:hover  { border-color: var(--mt-accent); box-shadow: var(--css-shadow-md); }
  .mt-back:hover { color: var(--mt-accent); border-color: var(--mt-accent); }
  .mt-opt:not(.is-sel):hover:not(:disabled) { border-color: var(--mt-accent); }
  .mt-btn:hover  { background: #6d28d9; border-color: #6d28d9; }
  .mt-btn--ghost:hover { background: var(--css-surface-raised); color: var(--mt-accent);
                         border-color: var(--mt-accent); }
  .mt-review summary:hover { background: var(--mt-accent-soft); }
  .mt-unit:not(.is-sel):not(.is-painted):hover:not(:disabled) { border-color: var(--mt-accent); }
  .mt-gap:not(.is-sel):not(.is-right):not(.is-wrong):not(.is-missed):hover:not(:disabled) i { background: var(--css-border-strong); }
}