/* TaleemParakh visual system (Lane B, M15, 2026-10-15).
   Colours: generated tokens below, from content/pages/palettes.json (three options sampled from the Branding images;
   the active one is a one-line choice). Status colours (danger, caution, ok, info, wait, unknown) are reserved for
   results, always come with a word and an icon, and never reuse a brand colour: the brand green can never read
   as "verified". Type: Lora (headings, wordmark) and Figtree (text) for English, Noto Nastaliq Urdu for Urdu,
   all self-hosted under the SIL OFL. Space: a 4 and 8 px scale. Logical properties throughout, so RTL mirrors.
   Motion: 150 to 200 ms colour changes only, none under prefers-reduced-motion. */
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("fonts/lora-latin.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Nastaliq Urdu"; src: url("fonts/nastaliq-urdu.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

/* tokens:start (generated from content/pages/palettes.json by scripts/build-pages.mjs; do not edit by hand) */
/* Palette option 3: Stone and Sage. Measured contrast: audits/agent-logs/laneB-ui-2026-10-15.log.md and the palette sheet. */
:root {
  --bg: #f1f0eb;
  --surface: #fcfbf8;
  --surface-2: #e6e4dc;
  --text: #1b1f1c;
  --muted: #4d544e;
  --line: #d4d0c5;
  --line-strong: #7b7e74;
  --brand: #2f4b40;
  --brand-strong: #1f352c;
  --brand-ink: #fcfbf8;
  --brand-soft: #dfe7e1;
  --brand-soft-ink: #21372d;
  --accent: #676b38;
  --accent-ink: #55592c;
  --accent-soft: #ebebd8;
  --focus: #676b38;
  --sage: #6b7f72;
  --danger-bg: #fbeae7;
  --danger-line: #b3261e;
  --danger-ink: #8c1d18;
  --caution-bg: #fdf0d5;
  --caution-line: #a15c00;
  --caution-ink: #653900;
  --ok-bg: #e7f2d8;
  --ok-line: #3d7a1c;
  --ok-ink: #26520f;
  --info-bg: #e5eff9;
  --info-line: #1f5f99;
  --info-ink: #144472;
  --wait-bg: #efedf8;
  --wait-line: #5b4fa0;
  --wait-ink: #3f347c;
  --unknown-bg: #eef0f2;
  --unknown-line: #5f6b76;
  --unknown-ink: #36414b;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #151612;
    --surface: #1e1f1b;
    --surface-2: #292b25;
    --text: #eeede7;
    --muted: #b3b6ac;
    --line: #383a33;
    --line-strong: #7f8377;
    --brand: #adc6b6;
    --brand-strong: #c9dbcf;
    --brand-ink: #131512;
    --brand-soft: #2a3830;
    --brand-soft-ink: #dbe8df;
    --accent: #c9cb95;
    --accent-ink: #d3d5a3;
    --accent-soft: #2b2c1d;
    --focus: #d3d5a3;
    --sage: #8ea595;
    --danger-bg: #3a1714;
    --danger-line: #f2b8b5;
    --danger-ink: #f9dedc;
    --caution-bg: #3a2a0a;
    --caution-line: #f5c56b;
    --caution-ink: #ffe6b3;
    --ok-bg: #1a2e10;
    --ok-line: #a8dd6e;
    --ok-ink: #e0f5c8;
    --info-bg: #102a40;
    --info-line: #8cc4f0;
    --info-ink: #d4e9fa;
    --wait-bg: #241f3d;
    --wait-line: #b9b0f0;
    --wait-ink: #e2defb;
    --unknown-bg: #232a31;
    --unknown-line: #a9b6c3;
    --unknown-ink: #dbe3ea;
    color-scheme: dark;
  }
}
/* tokens:end */

:root {
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-ur: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Noto Naskh Arabic", "Geeza Pro", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-body: 1.0625rem; --fs-lead: 1.125rem;
  --fs-h3: 1.0625rem; --fs-h2: 1.25rem; --fs-h1: clamp(1.5rem, 1.3rem + .9vw, 1.875rem); --fs-display: clamp(1.75rem, 1.45rem + 1.4vw, 2.25rem);
  --lh-body: 1.55; --lh-tight: 1.25;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --radius: 12px; --radius-sm: 8px; --radius-pill: 999px;
  --measure: 66ch; --content: 760px;
  --rail: 0px; --tabbar-h: 68px;
  --speed: 160ms;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E");
  --arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5'/%3E%3C/svg%3E");
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: var(--fs-body)/var(--lh-body) var(--font); }
html[lang="ur"] body, [lang="ur"] { font-family: var(--font-ur); line-height: 2.05; }
html[lang="ur"] body { font-size: 1.0625rem; }
html[lang="ur"] input, html[lang="ur"] textarea, html[lang="ur"] select, html[lang="ur"] button { line-height: 1.7; }
[lang="en"] { font-family: var(--font); }
a { color: var(--brand); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
/* Headings and main get focus from the app after a route change, so screen readers start there; they are not controls. */
:is(h1, main, section)[tabindex="-1"]:focus { outline: none; }
img, svg { max-width: 100%; }
.i { flex: none; display: inline-block; vertical-align: middle; }
[dir="rtl"] .i-dir { transform: scaleX(-1); }
h1, h2, h3 { color: var(--text); text-wrap: balance; font-family: var(--font-display); font-weight: 600; }
html[lang="ur"] :is(h1, h2, h3) { font-family: var(--font-ur); font-weight: 700; line-height: 1.9; letter-spacing: 0; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); margin: 0 0 var(--sp-2); letter-spacing: -.01em; }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); margin: var(--sp-6) 0 var(--sp-2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); margin: var(--sp-4) 0 var(--sp-1); font-family: var(--font); font-weight: 700; }
p { margin: var(--sp-2) 0; }
.help, .muted, .lead { color: var(--muted); }
.lead { font-size: var(--fs-lead); max-width: var(--measure); margin-top: 0; }
.help { max-width: var(--measure); }
.small { font-size: var(--fs-sm); }
.wrap { max-width: var(--content); margin: 0 auto; padding-inline: var(--sp-4); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
bdi.ltr, .ltr { direction: ltr; unicode-bidi: isolate; }

.skip { position: absolute; inset-inline-start: var(--sp-2); top: var(--sp-2); width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; z-index: 30; }
.skip:focus { width: auto; height: auto; clip-path: none; background: var(--surface); color: var(--brand); border: 2px solid var(--brand); border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); font-weight: 600; }

/* ---------- app shell: header, side rail (720 px and up) or bottom tab bar (phones) ---------- */
.env-banner { grid-area: env; position: sticky; top: 0; z-index: 25; margin: 0; padding: var(--sp-1) var(--sp-3); text-align: center;
  background: var(--caution-bg); color: var(--caution-ink); border-bottom: 1px solid var(--caution-line); font-size: var(--fs-xs); font-weight: 600; }
.env-banner:empty { display: none; }
.top { grid-area: top; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 60px; padding-block: var(--sp-2); }
.app .top-row { max-width: none; padding-inline: var(--sp-4); }
.brand { display: flex; gap: var(--sp-3); align-items: center; min-width: 0; color: inherit; text-decoration: none; }
.brand .mark { width: 40px; height: 30px; flex: none; }
.name { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; line-height: 1.2; color: var(--brand); white-space: nowrap; }
.name b { font-weight: 700; }
.name .wm-en { font-family: var(--font-display); }
.wm-ur { font-family: var(--font-ur); font-weight: 700; font-size: 1.2rem; line-height: 1.7; }
html[lang="ur"] .wm-en, html:not([lang="ur"]) .wm-ur { display: none; }
.tagline { margin: 0; color: var(--muted); font-size: var(--fs-xs); line-height: 1.4; }
html[lang="ur"] .tagline { line-height: 1.9; }
.top-actions { display: flex; align-items: center; gap: var(--sp-2); flex: none; }
.lang, .top-btn { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 44px; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); border-radius: var(--radius-pill); padding: 4px 14px; font: inherit; font-size: var(--fs-sm); cursor: pointer; text-decoration: none;
  transition: background-color var(--speed), border-color var(--speed); }
.lang:hover, .top-btn:hover { background: var(--surface-2); border-color: var(--brand); }
html[lang="en"] .lang { font-family: "Jameel Noori Nastaleeq", "Urdu Typesetting", "Noto Naskh Arabic", "Geeza Pro", var(--font); }
html[lang="ur"] .lang { font-family: var(--font); }

/* Main navigation: four tabs, icon plus label always. Active = filled background, bold label, 3 px bar, aria-current. */
.tabbar { grid-area: rail; z-index: 15; background: var(--surface); }
.tabbar ul { list-style: none; margin: 0; padding: 0; display: grid; }
.tabbar a { position: relative; display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--muted); font-weight: 500;
  border-radius: var(--radius-sm); transition: background-color var(--speed), color var(--speed); }
.tabbar a:hover { background: var(--surface-2); color: var(--text); }
.tabbar a[aria-current="page"] { background: var(--brand-soft); color: var(--brand-soft-ink); font-weight: 700; }
.tabbar a[aria-current="page"] .i { stroke-width: 2.25; }
.tabbar a[aria-current="page"]::after { content: ""; position: absolute; background: var(--brand); border-radius: 3px; }

@media (max-width: 719.98px) {
  .tabbar { position: fixed; inset-inline: 0; bottom: 0; border-top: 1px solid var(--line); padding: 6px var(--sp-2) calc(6px + env(safe-area-inset-bottom)); }
  .tabbar ul { grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); }
  .tabbar a { flex-direction: column; gap: 2px; justify-content: center; min-height: 56px; padding: 6px 2px 8px; font-size: .8125rem; line-height: 1.2; text-align: center; }
  html[lang="ur"] .tabbar a { font-size: .875rem; line-height: 1.5; padding-block: 2px 8px; }
  .tabbar a[aria-current="page"]::after { inset-inline: 28%; bottom: 0; height: 3px; }
  body.app { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); }
  .tagline { display: none; }
}
@media (min-width: 720px) {
  body.app { --rail: 104px; display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto;
    grid-template-areas: "env env" "top top" "rail main" "rail foot"; min-height: 100vh; }
  .app > main { grid-area: main; } .app > .foot { grid-area: foot; }
  .tabbar { align-self: stretch; border-inline-end: 1px solid var(--line); padding: var(--sp-4) var(--sp-2); }
  .tabbar ul { gap: var(--sp-1); position: sticky; top: calc(61px + var(--sp-4)); }
  .tabbar a { flex-direction: column; gap: var(--sp-1); min-height: 64px; padding: var(--sp-2) var(--sp-1); font-size: .8125rem; text-align: center; justify-content: center; }
  html[lang="ur"] .tabbar a { font-size: .875rem; line-height: 1.6; }
  .tabbar a[aria-current="page"]::after { inset-block: 10px; inset-inline-start: -8px; width: 3px; }
}
@media (min-width: 1024px) {
  body.app { --rail: 224px; }
  .tabbar { padding: var(--sp-5) var(--sp-3); }
  .tabbar a { flex-direction: row; justify-content: flex-start; min-height: 48px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); text-align: start; }
  .tabbar a[aria-current="page"]::after { inset-inline-start: -12px; }
}

/* Account menu (header): native details element, keyboard friendly. */
.menu { position: relative; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list { position: absolute; inset-inline-end: 0; top: calc(100% + 6px); min-width: 220px; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: var(--sp-1); z-index: 30; display: grid; }
.menu-list a, .menu-list button { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: var(--sp-2) var(--sp-3); border: 0; background: none;
  color: var(--text); font: inherit; text-decoration: none; border-radius: var(--radius-sm); cursor: pointer; text-align: start; width: 100%; }
.menu-list a:hover, .menu-list button:hover { background: var(--surface-2); }
@media (max-width: 479.98px) { .top-btn .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } .top-btn { padding-inline: 10px; } }

/* ---------- page structure ---------- */
main { padding-block: var(--sp-5) var(--sp-7); }
.app > main, .app > .foot { width: 100%; max-width: calc(var(--content) + 2 * var(--sp-4)); margin-inline: auto; padding-inline: var(--sp-4); }
@media (min-width: 720px) { .app > main, .app > .foot { padding-inline: var(--sp-6); max-width: calc(var(--content) + 2 * var(--sp-6)); } }
@media (min-width: 1024px) { .app > main { padding-top: var(--sp-6); } }
.page-head { margin-bottom: var(--sp-5); }
.page-head h1 { margin-bottom: var(--sp-1); }
.page-head .lead { margin: 0; }
.eyebrow { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); font-weight: 600; color: var(--muted); letter-spacing: .02em; }
.section-title { font-family: var(--font); font-size: var(--fs-sm); font-weight: 700; color: var(--muted); margin: var(--sp-6) 0 var(--sp-3); letter-spacing: .02em; }
html[lang="ur"] .section-title { font-family: var(--font-ur); }
.panel > h1:first-child { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }
.row.end { justify-content: flex-end; }
.row input { flex: 1; min-width: 0; }
.grid-2 { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4); }
@media (min-width: 560px) { .card { padding: var(--sp-5); } }
.card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; }
.card h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-lead); }
.card-link { display: block; color: inherit; text-decoration: none; transition: border-color var(--speed); }
.card-link:hover { border-color: var(--brand); }
.card-link:hover h2, .card-link:hover h3 { text-decoration: underline; text-underline-offset: .2em; }
.cards { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-3); }
.notice { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin: 0 0 var(--sp-5); font-size: var(--fs-sm); color: var(--muted); }
.notice .i { color: var(--accent); margin-top: 2px; }
.notice p { margin: 0; }
.notice strong { color: var(--text); }
.meta { color: var(--muted); font-size: var(--fs-sm); }
.kv { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0; }
.kv dt { font-weight: 600; color: var(--muted); font-size: var(--fs-sm); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 479.98px) { .kv { grid-template-columns: 1fr; gap: 0; } .kv dd { margin-bottom: var(--sp-3); } }
.mono, code { font-family: var(--font-mono); font-size: .875em; overflow-wrap: anywhere; }
.mono { white-space: pre-wrap; }
code { background: var(--surface-2); color: var(--text); padding: 1px 6px; border-radius: 4px; }
pre.mono { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: var(--sp-3); max-height: 28rem; overflow: auto; margin: var(--sp-2) 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-5) 0; }

/* ---------- controls ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin: var(--sp-4) 0; }
label { font-weight: 600; }
.hint { font-size: var(--fs-sm); color: var(--muted); margin: 0; font-weight: 400; }
fieldset label, label:has(input[type=checkbox]), label:has(input[type=radio]) { font-weight: 400; display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-2) 0; }
input[type=radio], input[type=checkbox] { margin: .2em 0 0; width: 22px; height: 22px; flex: none; accent-color: var(--brand); }
input[type=text], input[type=search], input[type=email], input[type=number], textarea, select {
  width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 10px 14px; min-height: 52px; transition: border-color var(--speed); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
input:hover, textarea:hover, select:hover { border-color: var(--brand); }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--brand); outline-offset: 1px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger-line); border-width: 2px; }
.field-error { color: var(--danger-ink); background: var(--danger-bg); border-radius: var(--radius-sm); padding: 4px 10px; font-size: var(--fs-sm); margin: 0; }
textarea { resize: vertical; }
input[type=text], input[type=search], textarea { unicode-bidi: plaintext; }
input.code-input { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: .4em; text-align: center; direction: ltr; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-2) var(--sp-4); margin: var(--sp-3) 0; background: var(--surface); min-width: 0; }
legend { font-weight: 600; padding: 0 var(--sp-1); }

button, .btn { font: inherit; min-height: 48px; border-radius: var(--radius-sm); padding: var(--sp-2) 18px; cursor: pointer; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--text); display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); text-decoration: none; font-weight: 600;
  transition: background-color var(--speed), border-color var(--speed); }
button:hover, .btn:hover { background: var(--surface-2); }
button.primary, .btn.primary, .cta { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
button.primary:hover, .btn.primary:hover, .cta:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--brand-ink); }
.btn.quiet, button.quiet { background: none; border-color: transparent; color: var(--brand); padding-inline: var(--sp-2); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.btn.quiet:hover, button.quiet:hover { background: var(--surface-2); }
.btn.danger, button.danger { border-color: var(--danger-line); color: var(--danger-ink); background: var(--surface); }
.btn.danger:hover, button.danger:hover { background: var(--danger-bg); }
button.danger.solid { background: var(--danger-line); color: var(--surface); }
button.secondary { margin-top: var(--sp-2); }
button.wide, .btn.wide { width: 100%; }
button[disabled], button[aria-busy="true"] { opacity: .6; cursor: not-allowed; }
.actions { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-5); }
.actions > .primary { width: 100%; }
@media (min-width: 720px) { .actions { flex-direction: row; align-items: center; flex-wrap: wrap; } .actions > .primary { width: auto; min-width: 220px; } }
.linklike { background: none; border: 0; padding: 0; min-height: 0; color: var(--brand); text-decoration: underline; cursor: pointer; font: inherit; font-weight: 400; display: inline; }
.linklike:hover { background: none; }

/* ---------- Check: tool switcher (different shape from the main tabs: filled brand when chosen) ---------- */
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: 0 0 var(--sp-5); }
@media (min-width: 600px) { .seg { grid-template-columns: repeat(4, 1fr); } }
.seg button { flex-direction: column; gap: 6px; min-height: 76px; padding: var(--sp-3) var(--sp-2); border-radius: var(--radius); font-weight: 600; font-size: var(--fs-sm);
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); line-height: 1.25; text-align: center; }
.seg button .i { color: var(--brand); }
.seg button:hover { border-color: var(--brand); background: var(--surface); }
.seg button[aria-selected="true"] { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 700; }
.seg button[aria-selected="true"] .i { color: var(--brand-ink); }
html[lang="ur"] .seg button { line-height: 1.6; font-size: .95rem; }

/* ---------- status: chips and result boxes (word + icon + colour, never colour alone) ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: var(--radius-pill); border: 1px solid; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }
.chip .i { width: 16px; height: 16px; }
.chip.ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.chip.danger { background: var(--danger-bg); color: var(--danger-ink); border-color: var(--danger-line); }
.chip.caution { background: var(--caution-bg); color: var(--caution-ink); border-color: var(--caution-line); }
.chip.info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.chip.wait { background: var(--wait-bg); color: var(--wait-ink); border-color: var(--wait-line); }
.chip.unknown { background: var(--unknown-bg); color: var(--unknown-ink); border-color: var(--unknown-line); }
.chip.plain { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.badge { display: inline-block; background: var(--surface-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px var(--sp-3); font-size: var(--fs-sm); }
.count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); font-size: var(--fs-xs); font-weight: 700; border: 1px solid var(--line); }

.result { border: 1px solid; border-inline-start-width: 5px; border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin: var(--sp-4) 0 var(--sp-3); list-style: none; }
.result .level { margin: 0; display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-sm); }
.result .level-icon { flex: none; width: 22px; height: 22px; color: var(--status-line); }
.result .headline { margin: var(--sp-1) 0; font-weight: 600; overflow-wrap: anywhere; }
.result p { margin: 6px 0; }
.danger { --status-line: var(--danger-line); }
.result.danger, .callout-danger { background: var(--danger-bg); border-color: var(--danger-line); color: var(--danger-ink); }
.caution { --status-line: var(--caution-line); }
.result.caution, .callout-caution { background: var(--caution-bg); border-color: var(--caution-line); color: var(--caution-ink); }
/* "No obvious warning sign" stays neutral, never green: the public checks can never approve anything (review C-2). */
.ok, .unknown { --status-line: var(--unknown-line); }
.result.ok, .result.unknown { background: var(--unknown-bg); border-color: var(--unknown-line); color: var(--unknown-ink); }
/* Only a published university confirmation in the portal uses the green status. */
.result.confirmed { --status-line: var(--ok-line); background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.result.wait { --status-line: var(--wait-line); background: var(--wait-bg); border-color: var(--wait-line); color: var(--wait-ink); }
.result.info, .callout-info { --status-line: var(--info-line); background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.result a, .callout a { color: inherit; }
.flags { margin: var(--sp-2) 0 0; padding-inline-start: 20px; }
.flags li { margin: 6px 0; }
.flags .sev-high { font-weight: 600; }
.excerpt { unicode-bidi: plaintext; display: block; font-weight: 400; font-style: italic; opacity: .9; font-size: .9rem; overflow-wrap: anywhere; }
.results { list-style: none; padding: 0; margin: var(--sp-4) 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.results > .result:not(:has(.level)) { display: grid; grid-template-columns: 22px 1fr; column-gap: 10px; }
.results > .result:not(:has(.level))::before { content: ""; grid-row: 1 / span 4; width: 22px; height: 22px; margin-top: 3px; }
.results > .result:not(:has(.level)) > * { grid-column: 2; }
.result:not(:has(.level))::before, .callout::before { background-color: var(--status-line); -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.danger, .callout-danger { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.4 3.5h7.2l4.9 4.9v7.2l-4.9 4.9H8.4l-4.9-4.9V8.4z'/%3E%3Cpath d='M12 8v5'/%3E%3Ccircle cx='12' cy='16.2' r='.6' fill='%23000'/%3E%3C/svg%3E"); }
.caution, .callout-caution { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.2 3 17.2A2 2 0 0 0 4.7 20h14.6a2 2 0 0 0 1.7-2.8L13.7 4.2a2 2 0 0 0-3.4 0z'/%3E%3Cpath d='M12 9.5v4'/%3E%3Ccircle cx='12' cy='16.7' r='.6' fill='%23000'/%3E%3C/svg%3E"); }
.ok { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='m15 15 5 5'/%3E%3C/svg%3E"); }
.unknown { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.25'/%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 0 1 4.8 1c0 1.7-2.4 2.2-2.4 3.8'/%3E%3Ccircle cx='12' cy='17' r='.6' fill='%23000'/%3E%3C/svg%3E"); }
.callout-info, .result.info { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.25'/%3E%3Cpath d='M12 11v5.5'/%3E%3Ccircle cx='12' cy='7.8' r='.6' fill='%23000'/%3E%3C/svg%3E"); }

/* ---------- public checks ---------- */
.card .badge { margin: var(--sp-1) 0; }
.card details { margin: var(--sp-2) 0; border-top: 1px solid var(--line); padding-top: var(--sp-1); }
.warn { color: var(--caution-ink); background: var(--caution-bg); border-inline-start: 3px solid var(--caution-line); border-radius: var(--radius-sm); padding: 6px 10px; }
details summary { cursor: pointer; color: var(--brand); padding: var(--sp-2) 0; min-height: 44px; display: flex; align-items: center; gap: var(--sp-2); font-weight: 600; }
details summary:hover { text-decoration: underline; text-underline-offset: .2em; }
.other { margin-top: var(--sp-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-1) var(--sp-4); }
.other ul { padding-inline-start: 20px; }
.other li { margin: var(--sp-2) 0; }
.selected { font-size: var(--fs-sm); color: var(--muted); }
.safe { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.safe h3 { margin: var(--sp-1) 0; }
.safe ol { margin: var(--sp-1) 0; padding-inline-start: 22px; }
.safe li { margin: 6px 0; }
.tool-intro { display: flex; gap: var(--sp-3); align-items: flex-start; }
.tool-intro > .i { color: var(--brand); margin-top: 6px; }

/* ---------- Help: helplines as call cards ---------- */
.helpbox { margin-top: var(--sp-6); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-4) var(--sp-3); }
.helpbox:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.helpbox h2 { margin-top: 0; display: flex; align-items: center; gap: var(--sp-2); }
.helpbox ul { padding-inline-start: 20px; }
.helpbox li { margin: var(--sp-2) 0; }
.lines { list-style: none; padding: 0; margin: var(--sp-3) 0; display: grid; gap: var(--sp-2); }
.lines li { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.lines li > .i { color: var(--brand); margin-top: 3px; }
.lines li.urgent { border-color: var(--danger-line); border-inline-start-width: 5px; }
.lines li.urgent > .i { color: var(--danger-line); }
.link-list { list-style: none; padding: 0; margin: var(--sp-2) 0; border-top: 1px solid var(--line); }
.link-list li { border-bottom: 1px solid var(--line); }
.link-list a { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-1); min-height: 52px; text-decoration: none; font-weight: 600; }
.link-list a::after { content: ""; flex: none; width: 18px; height: 18px; background: var(--muted); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; }
[dir="rtl"] .link-list a::after { transform: scaleX(-1); }
.link-list a:hover { background: var(--surface); }

/* ---------- News ---------- */
.news-list { list-style: none; padding: 0; margin: var(--sp-3) 0; display: grid; gap: var(--sp-3); }
.news-item .outlet { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin: 0; }
.news-item h2 { font-family: var(--font); font-size: var(--fs-lead); font-weight: 700; margin: var(--sp-1) 0; line-height: 1.35; }
.news-item .protect { margin: var(--sp-3) 0 0; padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--text); font-size: var(--fs-sm); }
.news-item .protect b { display: block; margin-bottom: 2px; }

/* ---------- states: loading, empty, error, offline ---------- */
.skeleton { color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: var(--sp-5) var(--sp-4); }
.empty { text-align: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-6) var(--sp-4); }
.empty > .i { color: var(--sage); width: 40px; height: 40px; }
.empty h2 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-lead); }
.empty p { color: var(--muted); max-width: 46ch; margin-inline: auto; }
.empty .actions { justify-content: center; }
.state-error { display: flex; gap: var(--sp-3); align-items: flex-start; }

/* ---------- Home: request cards ---------- */
.req { display: grid; gap: var(--sp-2); }
.req h2 { font-family: var(--font); font-size: var(--fs-lead); font-weight: 700; margin: 0; }
.req .what { margin: 0; color: var(--muted); }
.req .step-line { display: flex; gap: var(--sp-2); align-items: center; margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.req .step-line .i { color: var(--brand); }
.req-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.mini-steps { display: flex; gap: 4px; margin: var(--sp-1) 0 0; padding: 0; list-style: none; }
.mini-steps li { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.mini-steps li.done { background: var(--brand); }
.mini-steps li.now { background: var(--accent); }

/* ---------- the 7-step pipeline ---------- */
.pipeline { list-style: none; margin: var(--sp-3) 0; padding: 0; }
.pipeline li { position: relative; display: grid; grid-template-columns: 36px 1fr; column-gap: var(--sp-3); padding-bottom: var(--sp-4); }
.pipeline li::before { content: ""; position: absolute; inset-inline-start: 17px; top: 36px; bottom: 0; width: 2px; background: var(--line); }
.pipeline li:last-child::before { display: none; }
.pipeline li.done::before { background: var(--brand); }
.pipeline .dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: var(--fs-sm); border: 2px solid var(--line-strong); color: var(--muted); background: var(--surface); z-index: 1; }
.pipeline .done .dot { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pipeline .now .dot { border-color: var(--brand); color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.pipeline .label { margin: 6px 0 0; font-weight: 500; }
.pipeline .todo .label { color: var(--muted); }
.pipeline .now .label { font-weight: 700; }
.pipeline .state { font-size: var(--fs-xs); font-weight: 600; color: var(--muted); margin-inline-start: var(--sp-2); }
.pipeline .now-box { grid-column: 2; margin-top: var(--sp-2); background: var(--surface); border: 1px solid var(--brand); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.pipeline .now-box p { margin: 0 0 var(--sp-2); }
.pipeline .now-box .actions { margin-top: var(--sp-2); }
.stopped { border: 1px solid var(--line-strong); border-inline-start: 5px solid var(--caution-line); background: var(--surface); border-radius: var(--radius); padding: var(--sp-4); margin: var(--sp-3) 0; }
.stopped h3 { margin-top: 0; display: flex; gap: var(--sp-2); align-items: center; }
.stopped h3 .i { color: var(--caution-line); }

/* ---------- wizard (one question per screen) ---------- */
.wizard-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.wizard-top .eyebrow { margin: 0; }
progress.steps-bar { width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--surface-2); margin: 0 0 var(--sp-5); overflow: hidden; -webkit-appearance: none; appearance: none; }
progress.steps-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 4px; }
progress.steps-bar::-webkit-progress-value { background: var(--brand); border-radius: 4px; }
progress.steps-bar::-moz-progress-bar { background: var(--brand); border-radius: 4px; }
.tick-cards { display: grid; gap: var(--sp-2); margin: var(--sp-3) 0; }
.tick-card { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4) !important; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; min-height: 64px; }
.tick-card:hover { border-color: var(--brand); }
.tick-card:has(input:checked) { border: 2px solid var(--brand); background: var(--brand-soft); color: var(--brand-soft-ink); }
.tick-card b { display: block; font-weight: 700; }
.tick-card span span { color: var(--muted); font-size: var(--fs-sm); }
.tick-card:has(input:checked) span span { color: var(--brand-soft-ink); }
.pick-list { list-style: none; padding: 0; margin: var(--sp-2) 0; display: grid; gap: var(--sp-2); max-height: 22rem; overflow: auto; }
.pick-list button { width: 100%; justify-content: flex-start; text-align: start; font-weight: 500; }
.pick-list button[aria-pressed="true"] { border: 2px solid var(--brand); background: var(--brand-soft); color: var(--brand-soft-ink); font-weight: 700; }
.review-list { margin: var(--sp-2) 0; }
.review-list dt { margin-top: var(--sp-3); }

/* ---------- privacy notice and account ---------- */
.privacy h2 { margin-top: var(--sp-5); }
.privacy p { max-width: var(--measure); }
.action-list { list-style: none; padding: 0; margin: var(--sp-3) 0; display: grid; gap: var(--sp-2); }
.action-list a, .action-list button { width: 100%; justify-content: flex-start; min-height: 56px; padding: var(--sp-3) var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 600; text-align: start; }
.action-list a:hover, .action-list button:hover { border-color: var(--brand); background: var(--surface); }
.action-list .i { color: var(--brand); }
.action-list .danger-row, .action-list .danger-row .i { color: var(--danger-ink); }
.action-list .danger-row:hover { border-color: var(--danger-line); }

/* ---------- static guide pages (scripts/build-pages.mjs) ---------- */
.breadcrumb { font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--sp-3); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-1) 0; }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb li + li::before { content: ""; width: 14px; height: 14px; margin-inline: 6px; background: var(--muted); -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb [aria-current] { color: var(--text); }
[dir="rtl"] .breadcrumb li + li::before, [dir="rtl"] .cta::after { transform: scaleX(-1); }
.guide { max-width: var(--measure); }
.guide h1 { font-size: var(--fs-display); margin: var(--sp-2) 0 var(--sp-4); }
.guide h2 { margin-top: var(--sp-6); }
.guide p, .guide li { max-width: var(--measure); }
.guide .answer { font-size: var(--fs-lead); line-height: 1.6; background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: var(--radius); padding: var(--sp-4); margin: 0 0 var(--sp-5); }
html[lang="ur"] .guide .answer { line-height: 2.1; }
.steps ol { list-style: none; counter-reset: step; padding: 0; margin: var(--sp-3) 0; }
.steps li { counter-increment: step; position: relative; padding-inline-start: 46px; margin: 0 0 var(--sp-4); min-height: 32px; }
.steps li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--surface); color: var(--brand); border: 2px solid var(--brand); display: grid; place-items: center; font: 700 var(--fs-sm)/1 var(--font); }
[lang="ur"] .steps li::before { content: counter(step, persian); font-family: var(--font-ur); line-height: 1; }
.callout { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; border: 1px solid; border-inline-start-width: 5px; border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); margin: var(--sp-5) 0; }
.callout::before { content: ""; grid-row: 1 / span 6; width: 22px; height: 22px; margin-top: 3px; }
.callout > * { grid-column: 2; margin: var(--sp-1) 0; }
.callout > :is(h2, h3, strong:first-child) { margin-top: 0; font-size: var(--fs-body); color: inherit; }
.callout-title { font-weight: 700; }
.sources { margin-top: var(--sp-6); padding-top: var(--sp-3); border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.sources h2 { font-size: var(--fs-body); margin-top: var(--sp-2); }
.sources ul { padding-inline-start: 20px; }
.sources li { margin: 6px 0; overflow-wrap: anywhere; }
.checked { color: var(--muted); font-size: var(--fs-sm); }
.checked time { color: var(--text); font-weight: 600; }
.related { margin-top: var(--sp-6); }
.related h2 { font-size: var(--fs-body); }
.related ul { list-style: none; padding: 0; margin: var(--sp-2) 0; border-top: 1px solid var(--line); }
.related li { border-bottom: 1px solid var(--line); }
.related a { display: block; padding: var(--sp-3) 0; min-height: 44px; }
.cta { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; margin: var(--sp-5) 0; padding: var(--sp-2) 20px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; transition: background-color var(--speed); border: 1px solid var(--brand); }
.cta::after { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--arrow) center / contain no-repeat; mask: var(--arrow) center / contain no-repeat; }
.guide-list { list-style: none; padding: 0; margin: var(--sp-4) 0; display: grid; gap: var(--sp-2); }
.guide-list li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color var(--speed); }
.guide-list li:hover { border-color: var(--brand); }
.guide-list a { display: block; padding: var(--sp-3) var(--sp-4) 0; font-weight: 700; font-size: var(--fs-lead); text-decoration: none; }
.guide-list a:hover { text-decoration: underline; }
.guide-list p { margin: var(--sp-1) 0 0; padding: 0 var(--sp-4) var(--sp-3); color: var(--muted); font-size: var(--fs-sm); max-width: var(--measure); }
.prose p, .prose li { max-width: var(--measure); }
.prose li { margin: 6px 0; }

/* ---------- update bar (new version waiting) ---------- */
.update-bar { position: fixed; inset-inline: var(--sp-3); bottom: calc(var(--tabbar-h) + var(--sp-3) + env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: var(--sp-3);
  justify-content: space-between; flex-wrap: wrap; background: var(--surface); color: var(--text); border: 1px solid var(--brand); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); }
.update-bar p { margin: 0; font-weight: 600; }
@media (min-width: 720px) { .update-bar { inset-inline: auto var(--sp-5); bottom: var(--sp-5); max-width: 420px; } }

/* ---------- footer ---------- */
.foot { padding-block: var(--sp-4) var(--sp-6); font-size: var(--fs-sm); border-top: 1px solid var(--line); color: var(--muted); }
.foot p { margin: var(--sp-1) 0; }
.foot a { color: var(--brand); }
.dedication { color: var(--muted); font-family: var(--font-display); font-size: var(--fs-sm); display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3) !important; }
.dedication::before { content: ""; width: 24px; height: 1px; background: var(--accent); }
html[lang="ur"] .dedication { font-family: var(--font-ur); }
html[lang="ur"] .dedication [lang="en"], html:not([lang="ur"]) .dedication [lang="ur"] { display: none; }

/* ---------- tables (support pages) ---------- */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { text-align: start; padding: var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { color: var(--muted); font-weight: 600; }
.timeline { list-style: none; padding-inline-start: 0; border-inline-start: 2px solid var(--line); }
.timeline li { padding: var(--sp-1) var(--sp-3); position: relative; }
.timeline li::before { content: ""; position: absolute; inset-inline-start: -6px; top: .9em; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); }
.hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- motion and print ---------- */
@media (max-width: 420px) { .wrap { padding-inline: 14px; } .row:not(.chips) { flex-direction: column; align-items: stretch; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .top { position: static; } .tabbar, .lang, .skip, .top-actions { display: none; } body.app { display: block; padding: 0; } }
.prose a, .helpbox a, .about a, main p a { overflow-wrap: anywhere; }