/* Exam EU: one small, dependency-free stylesheet for three study sites.
   Light theme, mobile first, logical properties for RTL. */

:root {
  --paper: #fbfaf7;
  --surface: #ffffff;
  --ink: #1b1b18;
  --muted: #5c5b54;
  --line: #e2ddd2;
  --line-strong: #c9c2b3;
  --accent: #125e4c;
  --accent-ink: #0b4438;
  --accent-soft: #e9f2ee;
  --accent-line: #b9d6cb;
  --warm: #f6efe1;
  --warm-line: #e6d8bf;
  --danger: #9b2c1f;
  --danger-soft: #fbeceb;
  --ok: #1d6b46;
  --ok-soft: #e8f4ec;
  --focus: #1f5fbf;
  /* Radius scale on the 4px grid, outside in (inner = outer - padding, never
     below 4): surfaces (cards, panels, exam bar and card) 16; the language
     popover 12 with 0.35rem padding, so its items get 12 - 5.6 = 6.4 -> 8;
     controls (buttons, options, inputs, notes, number chips) 8. Controls sit
     16px or more inside a surface, where r = R - p would floor at 4: they keep
     their own 8 so they do not turn sharp. Pills stay fully round. */
  --radius: 16px;
  --radius-menu: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow: 0 1px 0 rgba(27, 27, 24, 0.04);
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --measure: 44rem;
  --wrap: 70rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  /* Raw URLs and long German words ("Regierungschefinnen/Regierungschefs") wrap
     instead of widening the page on a narrow phone. */
  overflow-wrap: break-word;
}

/* Paragraphs, descriptions, list items and answer options avoid a lone last word. */
p, li, dd, blockquote, figcaption, legend, .option > span { text-wrap: pretty; }

[dir="rtl"] body { font-family: "Noto Naskh Arabic", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; }
[lang="ur"] body { font-family: "Noto Nastaliq Urdu", "Geeza Pro", "Segoe UI", Tahoma, sans-serif; }

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

a { color: var(--accent-ink); text-underline-offset: 0.16em; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

.skip {
  position: absolute;
  inset-inline-start: 0.5rem;
  top: -4rem;
  z-index: 50;
  background: var(--ink);
  color: #fff;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
}
.skip:focus { top: 0.5rem; color: #fff; }

/* The hidden attribute wins over a class that sets display, such as .btn. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------- header */

.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  min-height: 4.25rem;
  padding-block: 0.65rem;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--font-serif);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-inline-end: auto;
}
.brand-mark {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  /* Matches the logo's own corner: rx 14 of 64 at 1.9rem is 6.65px. */
  border-radius: 7px;
  flex: none;
}
.brand small {
  display: block;
  font-family: var(--font-sans);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* Nav and language chip wrap as one group pinned to the inline end, so the chip is
   always the last thing on its row and the end-anchored menu below it opens inside
   the viewport. Loose, the chip wrapped to the start edge on phones and narrow
   desktops and its menu opened off-screen. */
.header-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
  margin-inline-start: auto;
}
.header-tools .langmenu { margin-inline-start: auto; }
.site-nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; align-items: center; }
.site-nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 550;
  padding: 0.4rem 0.1rem;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.langmenu { position: relative; }
.langmenu summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  border-radius: var(--radius-pill);
  padding: 0.38rem 0.8rem;
  font-size: 0.88rem;
  font-weight: 600;
  white-space: nowrap;
}
.langmenu summary::-webkit-details-marker { display: none; }
.langmenu summary::after { content: "▾"; font-size: 0.7rem; color: var(--muted); }
.langmenu[open] summary { border-color: var(--accent); }
.langmenu ul {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.4rem);
  z-index: 30;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  min-width: 11rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-menu);
  box-shadow: 0 12px 30px rgba(27, 27, 24, 0.12);
}
.langmenu li a {
  display: block;
  padding: 0.45rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.92rem;
}
.langmenu li a:hover { background: var(--accent-soft); }
.langmenu li a[aria-current="true"] { background: var(--accent-soft); font-weight: 700; }

/* Phones: brand and language chip share the first row and the navigation is
   one row under it that scrolls sideways, running to the screen edges so the
   cut item shows there is more (as the BBC and Guardian phone headers do).
   Wrapped, the six UK links and the chip took three rows: 220 px of header
   before the page began. */
@media (max-width: 47.99rem) {
  .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.3rem 0.75rem;
    min-height: 0;
    padding-block: 0.55rem 0;
  }
  .header-tools { display: contents; }
  /* The name shrinks on the narrowest phones so "Einbürgerungstest" fits next to the chip. */
  .brand { align-items: center; font-size: clamp(0.95rem, 4.6vw, 1.12rem); line-height: 1.2; margin-inline-end: 0; min-width: 0; }
  .brand > span { overflow-wrap: anywhere; }
  .brand small { display: none; }
  .brand-mark { width: 1.75rem; height: 1.75rem; border-radius: 6px; }
  .header-tools .langmenu { grid-column: 2; grid-row: 1; margin-inline-start: 0; }
  .langmenu summary { padding: 0.32rem 0.7rem; }
  .site-nav {
    grid-column: 1 / -1;
    flex-wrap: nowrap;
    gap: 1.1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem));
    padding-inline: clamp(1rem, 4vw, 2rem);
    scroll-padding-inline: clamp(1rem, 4vw, 2rem);
    /* The end padding fades, so a link that happens to end right at the
       screen edge still shows that the row goes on; scrolled to its end,
       the fade falls on empty padding. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - clamp(1rem, 4vw, 2rem)), rgb(0 0 0 / 0.25));
    mask-image: linear-gradient(to right, #000 calc(100% - clamp(1rem, 4vw, 2rem)), rgb(0 0 0 / 0.25));
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a { padding-block: 0.5rem 0.55rem; }
  [dir="rtl"] .site-nav {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - clamp(1rem, 4vw, 2rem)), rgb(0 0 0 / 0.25));
    mask-image: linear-gradient(to left, #000 calc(100% - clamp(1rem, 4vw, 2rem)), rgb(0 0 0 / 0.25));
  }
}

/* --------------------------------------------------------------- banners */

.notice-strip {
  background: var(--warm);
  border-bottom: 1px solid var(--warm-line);
  font-size: 0.84rem;
  color: #4d4433;
}
.notice-strip .wrap { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; padding-block: 0.45rem; }
.notice-strip strong { color: #3d3423; }

main { display: block; }
.page { padding-block: clamp(1.6rem, 4vw, 3.2rem) 3.5rem; }

/* ------------------------------------------------------------------ hero */

.hero { padding-block: clamp(1.2rem, 5vw, 3.4rem) 2rem; }
.eyebrow {
  display: inline-block;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7rem;
}
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
/* Same as clamp(2.1rem, 5.2vw, 3.55rem) from 360 px up; below that the heading scales
   down so a long word such as "Einbürgerungstest?" still fits on one line. */
h1 {
  font-size: clamp(1.75rem, max(min(9.33vw, 2.1rem), 5.2vw), 3.55rem);
  font-weight: 700;
  hyphens: auto;
  hyphenate-limit-chars: 12 5 5;
}
h2 { font-size: clamp(1.45rem, 2.8vw, 2.05rem); margin-top: 2.4rem; }
h3 { font-size: 1.28rem; }
h4 { font-size: 1.05rem; }
.lede { font-size: clamp(1.05rem, 2.2vw, 1.24rem); color: var(--muted); max-width: 42rem; margin: 0 0 1.4rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-block: 1.3rem 0.8rem; }
.hero-meta { font-size: 0.87rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font: inherit;
  font-weight: 650;
  font-size: 0.98rem;
  padding: 0.72rem 1.1rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn:hover { background: var(--accent-ink); color: #fff; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent-line); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn.small { padding: 0.45rem 0.75rem; font-size: 0.88rem; }

/* ----------------------------------------------------------------- cards */

/* Single-column tracks use minmax(0, 1fr): a plain 1fr track grows to the longest
   unbreakable word or URL inside it and pushes the page wider than the phone. */
.grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 44rem) { .grid.two { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .grid.three { grid-template-columns: repeat(3, 1fr); } }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.2rem;
  box-shadow: var(--shadow);
}
.card h3, .card .card-title { margin-bottom: 0.35rem; }
/* A card title right under the page H1 is an h2 that looks like the h3 of a home card. */
.card h2.card-title { font-size: 1.28rem; margin-top: 0; }
.card p { margin: 0.25rem 0 0; color: var(--muted); font-size: 0.95rem; }
.faq details.card { margin-bottom: 0.6rem; }
.faq summary { cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--muted); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary :is(h2, h3) { display: inline; margin: 0; font-size: 1rem; }
.faq details[open] summary { margin-bottom: 0.35rem; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--accent-line); background: #fff; }
/* 404 page: one card per site language, each in its own direction. */
.not-found { list-style: none; padding: 0; margin: 1.4rem 0 0; max-width: var(--measure); }
.not-found .card p.not-found-text { margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 650; }
.card .meta { margin-top: 0.7rem; font-size: 0.8rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.4rem 0.9rem; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.badge.warm { background: var(--warm); color: #6a4b16; }
.badge.plain { background: #f0eee8; color: var(--muted); }

.stats { display: flex; flex-wrap: wrap; gap: 1.4rem 2.4rem; margin-block: 1.6rem 0.4rem; }
.stat strong { display: block; font-family: var(--font-serif); font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat span { font-size: 0.85rem; color: var(--muted); }

/* ------------------------------------------------------------ breadcrumbs */

.breadcrumbs { font-size: 0.84rem; color: var(--muted); margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 0.35rem; }
/* A crumb longer than the row, such as a full IT topic name, ends in an ellipsis;
   the template puts the full label in its title. */
.breadcrumbs > :not([aria-hidden]) { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumbs span[aria-hidden] { color: var(--line-strong); }

/* ------------------------------------------------------------------ study */

.study-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; margin-top: 1.6rem; }
@media (max-width: 61.99rem) {
  /* On a phone, read the explanation in your language before the long source text. */
  .study-grid .explain { order: -1; }
}
@media (min-width: 62rem) { .study-grid { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); align-items: start; } }

.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.5vw, 1.5rem);
}
.panel-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.8rem;
}
.official { border-inline-start: 4px solid var(--line-strong); }
.explain { background: var(--accent-soft); border-color: var(--accent-line); }
.explain .panel-label { color: var(--accent-ink); }

.prose { max-width: var(--measure); }
/* An explanation keeps a readable line length inside a wide answer panel. */
.why { max-width: var(--measure); }
.prose p { margin: 0 0 0.9rem; }
/* A handbook subheading: an h2 under the page H1, sized as a run-in heading. */
.prose .block-head { margin: 1.4rem 0 0.45rem; font-size: 1.02rem; }
.prose ul, .prose ol { margin: 0 0 1rem; padding-inline-start: 1.3rem; }
.prose li { margin-bottom: 0.3rem; }
.prose blockquote {
  margin: 1rem 0;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--warm-line);
  color: #433c2c;
  font-family: var(--font-serif);
  white-space: pre-line;
}
/* The official passage that proves one of our FR answers, with its source line. */
.cite { margin: 0; max-width: var(--measure); }
.cite blockquote {
  margin: 0 0 0.35rem;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--warm-line);
  color: #433c2c;
  font-family: var(--font-serif);
  text-align: start;
}
.cite figcaption a { overflow-wrap: anywhere; }
.cite figcaption bdi { white-space: nowrap; }
/* A handbook table wider than a phone scrolls inside its own box, not the page. */
.prose .table-wrap { overflow-x: auto; margin: 0.8rem 0 1.2rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.prose td, .prose th { border: 1px solid var(--line); padding: 0.45rem 0.55rem; text-align: start; vertical-align: top; font-variant-numeric: tabular-nums; }
.prose .checklist { list-style: none; padding-inline-start: 0; }
.prose .checklist li { padding-inline-start: 1.6rem; position: relative; }
.prose .checklist li::before { content: "✓"; position: absolute; inset-inline-start: 0; color: var(--accent); font-weight: 800; }
.prose .aside { background: var(--warm); border: 1px solid var(--warm-line); border-radius: var(--radius-sm); padding: 0.9rem 1rem; margin: 1rem 0; }
.prose .aside p:last-child { margin-bottom: 0; }
.prose.privacy h2 { margin: 1.9rem 0 0.5rem; font-size: 1.12rem; }
.prose.privacy h2:first-child { margin-top: 0; }
/* A guide's source list: quotations and long URLs, set smaller than the text. */
.prose .sources { font-size: 0.9rem; overflow-wrap: anywhere; }
.prose code { font-size: 0.88em; }

.fallback-note, .format-note, .picture-note {
  margin-top: 0.8rem;
  font-size: 0.85rem;
  color: #6a4b16;
  background: var(--warm);
  border: 1px solid var(--warm-line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
}

.copyright-note { margin-top: 1.2rem; font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--line); padding-top: 0.8rem; }

/* ------------------------------------------------------------------ quiz */

.quiz { margin-top: 1.2rem; }
.quiz-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.8rem; }
.quiz-head h3 { margin: 0; font-size: 1.12rem; }
.quiz-progress { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.question { border-top: 1px solid var(--line); padding-top: 1rem; margin-top: 1rem; }
.question:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.question legend, .question .qtext { font-weight: 650; margin-bottom: 0.7rem; }
/* min-inline-size: 0 overrides the fieldset default of min-content, which a long URL option widens. */
.question fieldset { border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.option {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  width: 100%;
  text-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.62rem 0.7rem;
  margin-bottom: 0.45rem;
  font: inherit;
  font-size: 0.96rem;
  cursor: pointer;
}
.option:hover { border-color: var(--line-strong); background: #fffdf9; }
.option input { margin-top: 0.28rem; accent-color: var(--accent); }
/* Flex items default to min-width: auto (their longest word); 0 lets a long URL wrap. */
.option > span { min-width: 0; }
.option.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.option.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.option.is-wrong { border-color: var(--danger); background: var(--danger-soft); }
.option[disabled] { cursor: default; }
.quiz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-top: 0.7rem; }
.feedback { margin-top: 0.6rem; font-size: 0.93rem; border-radius: var(--radius-sm); padding: 0.6rem 0.75rem; display: none; }
.feedback.show { display: block; }
.feedback.good { background: var(--ok-soft); border: 1px solid #b9dcc6; color: #174a31; }
.feedback.bad { background: var(--danger-soft); border: 1px solid #ecc4bf; color: #6f2117; }
.feedback p { margin: 0.2rem 0 0; }
.feedback .feedback-answer { font-weight: 600; }

/* ------------------------------------------------------------------ exam */

.exam-shell { max-width: 52rem; margin-inline: auto; }
.exam-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(251, 250, 247, 0.96);
  backdrop-filter: blur(6px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.65rem 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 1rem;
}
.timer { font-variant-numeric: tabular-nums; font-weight: 750; font-size: 1.05rem; }
.timer.low { color: var(--danger); }
.exam-progress { font-size: 0.84rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.exam-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.6rem);
}
/* The official picture of an IT statement in the mock exam: its own size, at
   most 18rem tall so the options stay close on a phone. */
.exam-img { display: block; width: auto; max-height: 18rem; margin-bottom: 0.9rem; }
.review-list .exam-img { max-height: 8rem; margin-bottom: 0.4rem; }
.exam-q { font-family: var(--font-sans); font-weight: 650; font-size: 1.08rem; line-height: 1.5; max-width: 46rem; }
/* A question page whose H1 carries the official question text: sized for a
   sentence, not a page name, and long German compounds may break. */
.q-head { font-size: clamp(1.35rem, 3.4vw, 2.15rem); max-width: 46rem; overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
.q-head ~ .panel > :first-child { margin-top: 0; }
/* In a right-to-left page the left-to-right official question starts its own
   line, so its words never interleave with the label (FR). */
[dir="rtl"] .q-head-split > [dir="ltr"] { display: block; text-align: left; }
.exam-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.45rem; margin-top: 0.9rem; }
.qgrid { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 1rem; }
.qgrid button {
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font: inherit;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.qgrid button.answered { background: var(--accent-soft); border-color: var(--accent-line); }
.qgrid button.current { outline: 2px solid var(--accent); outline-offset: 1px; }
.exam-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; margin-top: 1rem; }
.result { border-inline-start: 5px solid var(--accent); }
.result.fail { border-inline-start-color: var(--danger); }
.review-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.review-list li { border-top: 1px solid var(--line); padding: 0.8rem 0; }
.review-list .ok { color: var(--ok); font-weight: 700; }
.review-list .no { color: var(--danger); font-weight: 700; }

/* ------------------------------------------------- progress on this device */

/* A count line sits under the H1 (or the topic count) on the H1's edge. */
.progress-line { margin: 0 0 1rem; font-variant-numeric: tabular-nums; }
.topic-count:has(+ .progress-line) { margin-bottom: 0.2rem; }
.progress-panel h2 { font-size: 1.28rem; margin-bottom: 0.4rem; }
.data-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1rem; }
.data-actions p { margin: 0; }
/* A count inside a button keeps the button at its own height. */
.btn .badge { font-variant-numeric: tabular-nums; line-height: 1.4; padding-block: 0.05rem; }
.history-list { list-style: none; padding: 0; margin: 0.8rem 0 0; font-variant-numeric: tabular-nums; }
.history-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 1rem; border-top: 1px solid var(--line); padding: 0.55rem 0; }
.history-list time { min-width: 7.5rem; }
.history-list .history-score { min-width: 3.5rem; font-weight: 650; }
.history-list .ok { color: var(--ok); font-weight: 650; }
.history-list .no { color: var(--danger); font-weight: 650; }
.history-list .history-time { color: var(--muted); margin-inline-start: auto; }

/* ----------------------------------------------------------------- lists */

.list { list-style: none; padding: 0; margin: 0; }
.list li { border-top: 1px solid var(--line); }
.list li:first-child { border-top: 0; }
.list a {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  padding: 0.72rem 0.1rem;
  text-decoration: none;
  color: var(--ink);
}
.list a > span { min-width: 0; }
.list a:hover { color: var(--accent-ink); }
.list .meta { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.section-list { counter-reset: sec; }
.section-list a::before { counter-increment: sec; content: counter(sec) "."; color: var(--muted); font-variant-numeric: tabular-nums; margin-inline-end: 0.5rem; }

.pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; margin-top: 1.4rem; }
.pager a { font-size: 0.9rem; }
/* Numbered page links: square targets that wrap, the current page filled. */
.pager-numbers { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.8rem; }
.pager-numbers a, .pager-numbers strong {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.25rem; height: 2.25rem; padding-inline: 0.3rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-variant-numeric: tabular-nums; text-decoration: none; color: var(--ink); background: var(--surface);
}
.pager-numbers a:hover { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-ink); }
.pager-numbers strong { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* A question on a hub page: its label links the question page. */
.q-label { margin: 0 0 0.3rem; color: var(--muted); }
.q-label + .exam-q { margin-top: 0; }
.q-label a { color: var(--muted); font-weight: 600; }
.q-label a:hover { color: var(--accent-ink); }
.q-options { margin-bottom: 0; }

/* Compact grid of hub links, such as the 16 federal states on the DE home. */
.link-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: 0.15rem 1.2rem; }
.link-grid a { display: block; padding: 0.45rem 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); overflow-wrap: anywhere; }
.link-grid a:hover { color: var(--accent-ink); border-bottom-color: var(--accent-line); }

.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 1rem 0 1.2rem; }
.filters select, .filters input {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  /* A long option (an FR list name) shrinks the control, not the page. */
  max-width: 100%;
  min-width: 0;
}
.tag-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.tag-row .badge { font-weight: 600; }

/* ----------------------------------------------------------------- about */

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
@media (min-width: 56rem) { .about-grid { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.source-list { list-style: none; padding: 0; margin: 0.6rem 0 0; }
.source-list li { padding: 0.55rem 0; border-top: 1px solid var(--line); }
.source-list li:first-child { border-top: 0; }
.source-list a { font-weight: 600; }
.source-list small { display: block; color: var(--muted); }

/* ---------------------------------------------------------- contact form */

/* One column at every width: each label sits on its control's start edge and
   every control spans the column. Inputs stay at 17px so iOS does not zoom. */
.contact-form { max-width: var(--measure); margin-top: 1.2rem; }
.field { margin-bottom: 1.2rem; }
.field label { display: block; font-weight: 650; margin-bottom: 0.35rem; }
.field-optional { font-weight: 400; color: var(--muted); }
.field input, .field textarea {
  display: block;
  width: 100%;
  min-height: 2.75rem;
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
}
.field textarea { min-height: 12rem; line-height: 1.5; resize: vertical; }
.field input:focus, .field textarea:focus { border-color: var(--accent); }
.field [aria-invalid="true"] { border-color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger); }
.field-error { margin: 0 0 0.35rem; color: var(--danger); font-weight: 600; font-size: 0.93rem; }
.error-summary {
  margin-bottom: 1.6rem;
  padding: 1rem 1.1rem;
  background: var(--danger-soft);
  border: 1px solid var(--danger);
  border-inline-start-width: 4px;
  border-radius: var(--radius-sm);
}
.error-summary:focus-visible { border-radius: var(--radius-sm); }
.error-summary h2 { margin: 0 0 0.4rem; font-family: var(--font-sans); font-size: 1.05rem; letter-spacing: 0; color: var(--danger); }
.error-summary p { margin: 0; }
.error-summary ul { margin: 0.5rem 0 0; padding-inline-start: 1.2rem; }
.error-summary a { color: var(--danger); font-weight: 600; }
/* The honeypot: off screen, out of the tab order and hidden from assistive tech. */
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.form-actions .btn { min-height: 2.75rem; }
.form-actions p { margin: 0; }

/* ------------------------------------------------------------- ad slot */

/* Reserved space so a later ad insertion does not shift the layout.
   Disabled by default; the build only renders a slot when ads.enabled=true. */
.ad-slot {
  min-height: 280px;
  margin-block: 1.6rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: #f6f4ee;
}
@media (min-width: 60rem) { .ad-slot { min-height: 250px; } }

/* ---------------------------------------------------------------- footer */

.site-footer { border-top: 1px solid var(--line); background: #f4f1ea; margin-top: 2rem; }
.disclaimer {
  grid-column: 1 / -1;
  padding: 1rem 1.1rem;
  background: var(--warm);
  border: 1px solid var(--warm-line);
  border-inline-start: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  color: #3d3423;
}
.disclaimer h2 {
  margin: 0 0 0.4rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.disclaimer p { margin: 0 0 0.45rem; font-size: 0.92rem; line-height: 1.75; max-width: 48rem; }
.disclaimer .disclaimer-answer { font-weight: 600; color: #3d3423; }
.disclaimer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem 1.2rem; margin: 0.2rem 0 0; padding: 0; font-size: 0.92rem; line-height: 1.8; }
[lang="ur"] .disclaimer p, [lang="ur"] .disclaimer-links, [lang="ur"] .disclaimer h2 { line-height: 2.1; }
.disclaimer-links a { color: var(--accent-ink); font-weight: 600; }
.analytics-note { margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--muted); }
.footer-inner { padding-block: 2rem 2.4rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
@media (min-width: 52rem) { .footer-inner { grid-template-columns: 1.2fr 1fr 1fr; gap: 2rem; } }
.site-footer h2 { font-family: var(--font-sans); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-top: 0; margin-bottom: 0.5rem; }
.site-footer p, .site-footer li { font-size: 0.86rem; color: var(--muted); margin: 0 0 0.35rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer a { color: var(--ink); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
/* The legal notice, contact and editorial policy labels are in another language than many footers: keep each in one piece. */
.site-footer .legal-link, .site-footer .contact-link, .site-footer .editorial-link { white-space: nowrap; }
.footer-bottom { border-top: 1px solid var(--line); padding-block: 0.9rem 1.4rem; font-size: 0.78rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; justify-content: space-between; }

/* -------------------------------------------------------------- utilities */

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 0.6rem; }
.mt-2 { margin-top: 1.2rem; }
.mt-3 { margin-top: 2rem; }
.muted { color: var(--muted); }
.small { font-size: 0.86rem; }
.center { text-align: center; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 2rem 0; }

/* Continuous corners where the browser has them (Chrome and Edge 139+); others
   keep the plain border-radius. Pills, and the logo whose corner is drawn in
   the SVG, stay round. */
@supports (corner-shape: superellipse(1.25)) {
  :where(*) { corner-shape: superellipse(1.25); }
  .langmenu summary, .badge, .brand-mark { corner-shape: round; }
}

@media (prefers-reduced-motion: no-preference) {
  .card, .option, .btn, .site-nav a { transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease; }
}

@media print {
  .site-header, .site-footer, .hero-actions, .langmenu, .ad-slot, .quiz-actions { display: none !important; }
  .study-grid { display: block; }
  .panel { break-inside: avoid; }
}