@font-face {
  font-family: "Signage";
  src: url("../fonts/signage-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Signage";
  src: url("../fonts/signage-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;
}
/* Farsi. unicode-range means a reader of the Latin interface never
   downloads these 48KB at all; the browser fetches it only once an Arabic
   codepoint is actually rendered. */
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/vazirmatn-arabic.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF,U+0750-077F,U+08A0-08FF,U+200C-200E,U+2010-2011,
    U+FB50-FDFF,U+FE70-FEFF;
}

:root {
  /* ---------------------------------------------------------- palette ----
     Taken from Norwegian road signage, because that is what the people
     using this are studying. Blue is the informasjonsskilt field, yellow
     the fareskilt field, red its border. Nothing here is decorative: blue
     navigates, yellow marks the road you are on, red and green are only
     ever wrong and right. */
  --paper:      #F1F3F2;   /* a reflective sign face, slightly cool       */
  --paper-2:    #FFFFFF;
  --ink:        #0E1114;
  --ink-soft:   #596067;
  --line:       #D3D8D4;
  --line-hard:  #0E1114;

  --blue:       #0C4DA2;   /* opplysningsskilt                            */
  --blue-deep:  #06356F;
  --red:        #BE1E2D;   /* the triangle's border, and wrong answers    */
  --yellow:     #FFC20E;   /* the warning field, and the road line        */
  --green:      #14803C;

  --ok-bg:      #E2F1E7;
  --no-bg:      #FBE6E8;

  /* Signs are not sharp-cornered and not pill-shaped. Three steps, used
     for three different weights of thing, rather than one radius
     everywhere. */
  --r:          6px;
  --r-lg:       12px;
  --r-sm:       3px;

  /* A fourth-based scale. The jump from body to display is deliberate:
     headings are signage, body is prose, and they should not blur. */
  --step--1: 0.8125rem;
  --step-0:  1.0625rem;
  --step-1:  1.375rem;
  --step-2:  1.75rem;
  --step-3:  2.375rem;

  /* Display is the only face we ship. Body uses whatever the device
     already has, which costs nothing and renders better than a webfont
     at small sizes on every platform. */
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cond: "Signage", "Fira Sans Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
  --pers: "Vazirmatn", system-ui, "Segoe UI", Tahoma, sans-serif;

  --pad: 16px;
  --measure: 34rem;

  /* The yellow line. One device, reused, so the app reads as one thing. */
  --road: 4px;
  --on-accent: #FFFFFF;
}


@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:     #14161A;
    --paper-2:   #1C1F24;
    --ink:       #ECEFEC;
    --ink-soft:  #9BA3A9;
    --line:      #333942;
    --line-hard: #4B535C;
    --blue:      #5AA2E0;
    --blue-deep: #9BCCF2;
    --red:       #F2707F;
    --yellow:    #FFC20E;
    --green:     #4FBF7F;
    --ok-bg:     #15301F;
    --no-bg:     #371A20;
    /* On a dark ground the sign blue has to be lightened to stay visible,
       and white text on that lightened blue falls to about 2.6:1 — under
       the 3:1 floor even for large text. Filled controls therefore take
       dark text here, the way a light accent is handled anywhere. */
    --on-accent: #0B1114;
  }
}
:root[data-theme="dark"] {
  --paper:     #14161A;
  --paper-2:   #1C1F24;
  --ink:       #ECEFEC;
  --ink-soft:  #9BA3A9;
  --line:      #333942;
  --line-hard: #4B535C;
  --blue:      #5AA2E0;
  --blue-deep: #9BCCF2;
  --red:       #F2707F;
  --yellow:    #FFC20E;
  --green:     #4FBF7F;
  --ok-bg:     #15301F;
  --no-bg:     #371A20;
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

html[lang="fa"] body { font-family: var(--pers); line-height: 1.75; }

img { max-width: 100%; height: auto; display: block; border: 0; }

button, input { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 10px 14px;
}
.skip:focus { inset-inline-start: 0; }

/* ---------- top bar ---------- */

.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper);
  /* The yellow line under the bar is the one piece of decoration in the
     app, and it is not decoration: Norwegian centre lines are yellow where
     most of Europe paints them white, so it says where you are. It recurs
     as the progress bar and on the card you are working in. */
  border-bottom: var(--road) solid var(--yellow);
  box-shadow: inset 0 -6px 0 -2px var(--line);
  padding-top: env(safe-area-inset-top);
}
.bar__in {
  max-width: 68rem; margin: 0 auto;
  padding: 8px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
}
.bar__right { display: flex; align-items: center; }

.brand {
  display: flex; align-items: center;
  background: none; border: 0; padding: 4px; margin: 0;
  cursor: pointer; color: inherit;
}
.brand__sign { width: 26px; height: 26px; flex: 0 0 auto; }
.brand__name {
  font-family: var(--cond); font-weight: 700;
  font-size: var(--step-1); letter-spacing: 0.01em;
  margin-inline-start: 9px;
}
html[lang="fa"] .brand__name { font-family: var(--pers); font-size: var(--step-0); }

.lang { display: flex; border: 2px solid var(--line-hard); border-radius: var(--r); overflow: hidden; }
.lang__b {
  background: var(--paper-2); border: 0; cursor: pointer;
  padding: 5px 9px; font-size: var(--step--1); font-weight: 500;
  border-inline-start: 1px solid var(--line);
}
.lang__b:first-child { border-inline-start: 0; }
.lang__b[aria-pressed="true"] { background: var(--blue); color: var(--on-accent); }
.lang { border-color: var(--line); }

.clock {
  font-family: var(--cond); font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: var(--step-1);
  border: 2px solid var(--line-hard); border-radius: var(--r);
  padding: 2px 9px; margin-inline-end: 10px;
  background: var(--paper-2);
}
.clock--low { background: var(--red); color: var(--on-accent); border-color: var(--red); }

/* ---------- views ---------- */

.view { max-width: 68rem; margin: 0 auto; padding: 0 var(--pad) 48px; }

/* ---------- home ---------- */

.hero { padding: 36px 0 26px; max-width: var(--measure); }
.hero__count {
  font-family: var(--cond); font-weight: 600; font-size: var(--step-0);
  color: var(--ink-soft); margin: 0 0 10px;
}
html[lang="fa"] .hero__count { font-family: var(--pers); }
.hero__h {
  font-family: var(--cond); font-weight: 700;
  font-size: clamp(2rem, 7vw, 3.1rem); line-height: 1.04;
  margin: 0 0 14px; letter-spacing: -0.005em;
}
html[lang="fa"] .hero__h { font-family: var(--pers); font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.35; }
.hero__p { margin: 0; color: var(--ink-soft); max-width: 30rem; }

.modes { display: grid; gap: 14px; }
@media (min-width: 46rem) { .modes { grid-template-columns: 1fr 1fr; } }

.mode {
  display: flex; align-items: flex-start; text-align: start;
  gap: 14px;
  background: var(--paper-2);
  border: 2px solid var(--line-hard); border-radius: var(--r-lg);
  padding: 18px; cursor: pointer; width: 100%;
}
.mode {
  position: relative;
  overflow: hidden;
  border-color: var(--line);
  transition: border-color 120ms ease, background-color 120ms ease;
}
/* A yellow edge on the mode that is open to you, nothing on the one that
   is not. The state is the decoration. */
.mode::before {
  content: "";
  position: absolute; inset-block: 0; inset-inline-start: 0;
  width: var(--road);
  background: var(--yellow);
}
.mode[aria-disabled="true"]::before { background: var(--line); }
.mode:hover { background: var(--paper); border-color: var(--line-hard); }
.mode[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.mode[aria-disabled="true"]:hover { border-color: var(--line); background: var(--paper-2); }
.mode__sign { flex: 0 0 auto; width: 48px; }
.mode__sign svg { width: 48px; height: 48px; display: block; }
.mode__body { display: block; }
.mode__t {
  display: block; font-family: var(--cond); font-weight: 700;
  font-size: var(--step-2); line-height: 1.1; margin-bottom: 5px;
}
html[lang="fa"] .mode__t { font-family: var(--pers); font-size: var(--step-1); }
.mode__d { display: block; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.45; }
.mode__meta {
  display: block; margin-top: 9px; font-size: var(--step--1); font-weight: 600;
  color: var(--blue);
}

.access {
  margin-top: 30px; padding-top: 22px;
  border-top: 2px solid var(--line);
  max-width: var(--measure);
}
.access__state { margin: 0 0 14px; font-size: var(--step--1); color: var(--ink-soft); }
.access__state b { color: var(--ink); }
.access__lab { display: block; font-size: var(--step--1); font-weight: 600; margin-bottom: 6px; }
.access__row { display: flex; gap: 8px; }
.access__in {
  flex: 1 1 auto; min-width: 0;
  background: var(--paper-2);
  border: 2px solid var(--line-hard); border-radius: var(--r);
  padding: 8px 10px;
}
.access__err { color: var(--red); font-size: var(--step--1); margin: 8px 0 0; font-weight: 600; }
.access__help { color: var(--ink-soft); font-size: var(--step--1); margin: 10px 0 0; }
.access__help a { color: var(--blue); }
.access__reset {
  margin-top: 18px; background: none; border: 0; padding: 0;
  color: var(--ink-soft); font-size: var(--step--1);
  text-decoration: underline; cursor: pointer;
}

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

.quiz { display: block; padding-top: 20px; }
@media (min-width: 60rem) {
  .quiz { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 32px; align-items: start; }
}
.quiz__main { min-width: 0; max-width: 40rem; }

.track { margin-bottom: 16px; }
.track__n {
  font-family: var(--cond); font-weight: 700; font-size: var(--step-1);
  font-variant-numeric: tabular-nums; margin: 0 0 7px;
}
html[lang="fa"] .track__n { font-family: var(--pers); }
.track__sep { color: var(--ink-soft); margin: 0 3px; }
/* The road you have covered. Same yellow, same weight as the line under
   the top bar: one device, used in the two places progress is shown.
   Square ends, because a road marking has square ends. */
.track__bar {
  height: var(--road); background: var(--line); overflow: hidden;
}
.track__fill {
  display: block; height: 100%; width: 0;
  background: var(--yellow);
  transition: width 220ms ease;
}

.card {
  background: var(--paper-2);
  border: 2px solid var(--line-hard); border-radius: var(--r-lg);
  padding: 20px;
}
.card__q {
  font-size: var(--step-1); font-weight: 600; line-height: 1.35;
  margin: 0 0 16px;
}
.card__fig { margin: 0 0 16px; }
.card__fig img {
  width: 100%; max-width: 20rem;
  border: 2px solid var(--line); border-radius: var(--r);
  background: #fff;
}

.choices { display: grid; gap: 9px; }

.ch {
  display: flex; align-items: flex-start; gap: 11px;
  width: 100%; text-align: start;
  background: var(--paper);
  border: 2px solid var(--line); border-radius: var(--r);
  padding: 11px 13px; cursor: pointer;
}
.ch:hover { border-color: var(--line-hard); }
.ch__k {
  flex: 0 0 auto;
  width: 1.6em; height: 1.6em;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid currentColor; border-radius: var(--r);
  font-family: var(--cond); font-weight: 700; font-size: var(--step-0);
  line-height: 1;
}
html[lang="fa"] .ch__k { font-family: var(--sans); }
.ch__t { flex: 1 1 auto; min-width: 0; }

.ch[aria-pressed="true"] { border-color: var(--line-hard); background: var(--paper-2); }
.ch[aria-pressed="true"] .ch__k { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.ch--ok { border-color: var(--green); background: var(--ok-bg); }
.ch--ok .ch__k { background: var(--green); color: var(--on-accent); border-color: var(--green); }
.ch--no { border-color: var(--red); background: var(--no-bg); }
.ch--no .ch__k { background: var(--red); color: var(--on-accent); border-color: var(--red); }
.ch--locked { cursor: default; }
.ch--locked:hover { border-color: inherit; }

.verdict {
  margin: 16px 0 0; padding: 11px 13px;
  border-radius: var(--r); font-weight: 600;
  border: 2px solid transparent;
}
.verdict--ok { background: var(--ok-bg); border-color: var(--green); color: var(--green); }
.verdict--no { background: var(--no-bg); border-color: var(--red); color: var(--red); }

.extras { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.panel {
  margin-top: 12px; padding: 14px;
  background: var(--paper-2);
  border: 2px solid var(--line); border-radius: var(--r);
}
.panel--why { border-inline-start: 6px solid var(--blue); }
.panel__x { margin: 0; }

.gloss { margin: 0; display: grid; gap: 12px; }
.gloss__row { border-top: 1px solid var(--line); padding-top: 9px; }
.gloss__row:first-child { border-top: 0; padding-top: 0; }
.gloss__l {
  display: block; font-size: var(--step--1); color: var(--ink-soft);
  margin-bottom: 1px;
}
.gloss__v { display: block; font-weight: 600; unicode-bidi: isolate; }
/* Each term keeps its own dir so bidi orders it correctly, but all of them
   align to the page's start edge so the list scans as one column. */
html[dir="ltr"] .gloss__v { text-align: left; }
html[dir="rtl"] .gloss__v { text-align: right; }
.gloss__v--fa { font-family: var(--pers); }
.gloss__v--lat { font-family: var(--sans); }

.nav { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; align-items: center; }

.btn {
  background: var(--paper-2); color: var(--ink);
  border: 2px solid var(--line-hard); border-radius: var(--r);
  padding: 9px 15px; cursor: pointer;
  font-family: var(--cond); font-weight: 600;
  font-size: var(--step-0); letter-spacing: 0.01em;
  transition: background-color 120ms ease, border-color 120ms ease;
}
html[lang="fa"] .btn { font-family: var(--pers); font-size: var(--step--1); }
.btn:hover { background: var(--paper); }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* The primary action is sign blue. Near-black read as a system dialog
   button and gave the app no voice of its own. */
.btn--solid { background: var(--blue); color: var(--on-accent); border-color: var(--blue); }
.btn--solid:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--quiet { border-color: var(--line); font-weight: 500; }
.btn--finish { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }
.btn--finish:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.btn--flag { color: var(--ink-soft); }
.nav .btn--quiet { margin-inline-start: auto; }

/* ---------- side navigator ---------- */

.side { display: none; }
@media (min-width: 60rem) {
  .side { display: block; position: sticky; top: 76px; }
}
.side__h {
  font-family: var(--cond); font-weight: 700; font-size: var(--step-0);
  margin: 0 0 10px;
}
html[lang="fa"] .side__h { font-family: var(--pers); }
.grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.gc {
  aspect-ratio: 1 / 1; min-height: 2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2);
  border: 2px solid var(--line); border-radius: 3px;
  font-size: var(--step--1); font-weight: 600; cursor: pointer;
  font-variant-numeric: tabular-nums; padding: 0;
}
.gc--done { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }
.gc--here { border-color: var(--ink); border-width: 3px; }
.gc--ok { background: var(--green); border-color: var(--green); color: var(--on-accent); }
.gc--no { background: var(--red); border-color: var(--red); color: var(--on-accent); }

.legend { margin: 14px 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.legend div { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.legend i {
  width: 13px; height: 13px; border-radius: 3px; flex: 0 0 auto;
  border: 2px solid var(--line); background: var(--paper-2);
}
.legend i.done { background: var(--blue); border-color: var(--blue); }
.legend i.ok { background: var(--green); border-color: var(--green); }
.legend i.no { background: var(--red); border-color: var(--red); }

/* ---------- result ---------- */

.result { padding: 36px 0; max-width: 40rem; }
.score {
  border: 2px solid var(--line-hard); border-radius: var(--r-lg);
  padding: 22px; background: var(--paper-2); margin-bottom: 22px;
}
.score--pass { border-color: var(--green); }
.score--fail { border-color: var(--red); }
.score__v {
  font-family: var(--cond); font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 4rem); line-height: 1; margin: 0;
  font-variant-numeric: tabular-nums;
}
html[lang="fa"] .score__v { font-family: var(--pers); }
.score__of { font-size: 0.45em; color: var(--ink-soft); font-weight: 600; }
.score__verdict {
  font-family: var(--cond); font-weight: 700; font-size: var(--step-2);
  margin: 10px 0 4px;
}
html[lang="fa"] .score__verdict { font-family: var(--pers); font-size: var(--step-1); }
.score--pass .score__verdict { color: var(--green); }
.score--fail .score__verdict { color: var(--red); }
.score__sub { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }
.score__stats { display: flex; flex-wrap: wrap; gap: 20px; margin: 18px 0 0; padding: 0; list-style: none; }
.score__stats div { font-size: var(--step--1); }
.score__stats b { display: block; font-family: var(--cond); font-size: var(--step-2); font-weight: 700; }
html[lang="fa"] .score__stats b { font-family: var(--pers); }
.result__acts { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------- sheet (dialog) ---------- */

.sheet {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(10, 12, 14, 0.5);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
@media (min-width: 40rem) { .sheet { align-items: center; padding: var(--pad); } }
.sheet__box {
  background: var(--paper-2); color: var(--ink);
  border: 2px solid var(--line-hard);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  padding: 20px; width: 100%; max-width: 30rem;
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
}
@media (min-width: 40rem) { .sheet__box { border-radius: var(--r-lg); padding-bottom: 20px; } }
.sheet__h {
  font-family: var(--cond); font-weight: 700; font-size: var(--step-2);
  margin: 0 0 9px; line-height: 1.1;
}
html[lang="fa"] .sheet__h { font-family: var(--pers); font-size: var(--step-1); }
.sheet__body { margin-bottom: 18px; color: var(--ink-soft); font-size: var(--step--1); }
.sheet__body p { margin: 0 0 9px; }
.sheet__body a { color: var(--blue); }
.sheet__body code {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 3px; padding: 1px 5px; font-size: 0.9em;
}
.sheet__acts { display: flex; flex-wrap: wrap; gap: 9px; }

/* ---------- review list ---------- */

.rev { margin-top: 26px; }
.rev__h {
  font-family: var(--cond); font-weight: 700; font-size: var(--step-1);
  margin: 0 0 12px;
}
html[lang="fa"] .rev__h { font-family: var(--pers); }
.rev__i {
  border: 2px solid var(--line); border-radius: var(--r);
  padding: 14px; margin-bottom: 10px; background: var(--paper-2);
}
.rev__i--no { border-inline-start: 6px solid var(--red); }
.rev__i--ok { border-inline-start: 6px solid var(--green); }
.rev__n { font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 5px; font-weight: 600; }
.rev__q { margin: 0 0 10px; font-weight: 600; }
.rev__a { margin: 0; font-size: var(--step--1); }
.rev__a span { color: var(--ink-soft); }

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

@media print { .bar, .nav, .extras, .side, .sheet { display: none !important; } }

/* `hidden` must beat the display rules above it */
[hidden] { display: none !important; }

/* On a tall-enough desktop window the sign must not push the choices out of
   view, so cap it harder there than on a phone. */
@media (min-width: 60rem) {
  .card__fig img { max-width: 16rem; }
}

/* ==========================================================================
   MOBILE
   The audience is overwhelmingly on phones, often studying one-handed on the
   metro. Below 60rem the navigation leaves the document flow and pins to the
   bottom of the viewport, and the question grid - which used to exist only in
   the desktop sidebar - becomes reachable from there.
   ========================================================================== */

/* Every control meets the 44px minimum touch target on a phone. */
@media (max-width: 59.99rem) {

  .lang__b { padding: 11px 12px; min-height: 44px; min-width: 44px; }
  .bar__in { padding: 6px var(--pad); }

  /* The brand name is the first thing to go when the clock needs the room. */
  @media (max-width: 24rem) {
    .brand__name { display: none; }
  }

  /* Navigation pins to the bottom, always under the thumb. The quiz view adds
     padding so the last choice is never hidden behind it. */
  .view--quiz { padding-bottom: 0; }
  .quiz__main { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }

  .nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 25;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 10px var(--pad);
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
    background: var(--paper);
    border-top: 2px solid var(--line-hard);
  }
  .nav .btn { min-height: 44px; flex: 1 1 auto; }
  .nav .btn--count { flex: 0 0 auto; min-width: 5.5rem; }
  /* Save-and-exit loses its label on a phone and keeps only its mark, so the
     two controls that matter get the width. */
  .nav .btn--quiet {
    margin-inline-start: 0;
    flex: 0 0 auto;
    min-width: 44px;
    padding-inline: 12px;
    font-size: 0;
  }
  .nav .btn--quiet::before { content: "\2715"; font-size: 1.0625rem; }

  .card { padding: 16px; }
  .ch { padding: 13px; min-height: 48px; }
  .extras .btn { min-height: 44px; }
}

/* iOS resizes the viewport as the address bar hides, which makes a bottom bar
   jump. dvh tracks the visible viewport; the vh line above is the fallback. */
@supports (height: 100dvh) {
  @media (max-width: 59.99rem) {
    .sheet { height: 100vh; height: 100dvh; }
  }
}

/* The sign is capped so the four choices stay on screen with it. */
@media (max-width: 59.99rem) {
  .card__fig img { max-width: 100%; max-height: 38vh; width: auto; margin-inline: auto; }
}

.card__zoom {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  cursor: zoom-in;
}

/* Full-screen image viewer, so a dense junction diagram is actually readable
   on a 360px screen. */
.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 10, 12, 0.94);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.lightbox img {
  max-width: 100%; max-height: 90vh; width: auto;
  background: #fff; border-radius: var(--r);
}
.lightbox__x {
  position: absolute; top: calc(12px + env(safe-area-inset-top)); inset-inline-end: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  border: 0; font-size: 1.25rem; cursor: pointer;
}

/* The question grid inside the bottom sheet on phones. */
.sheet .grid { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.sheet .gc { min-height: 44px; font-size: var(--step-0); }
.sheet__body--grid { max-height: 46vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* Grid cells on the desktop sidebar stay compact but clickable. */
@media (min-width: 60rem) {
  .btn--count { display: none; }
}

/* ==========================================================================
   MOBILE, second pass: fitting the two bars
   ========================================================================== */

/* The three language names plus the clock overflow a 390px bar, so below
   34rem the names shorten to codes. The control stays in the same place and
   keeps its full tap target. */
.lang__ab { display: none; }
@media (max-width: 34rem) {
  .lang__full { display: none; }
  .lang__ab { display: inline; }
  .lang__b { padding-inline: 14px; }
  .clock { font-size: var(--step-0); padding: 2px 7px; margin-inline-end: 8px; }
}

/* Five controls do not fit across the bottom of a phone. Previous, the
   counter and Next are what you need on every question; Hand in appears only
   on the last one (and from the question grid), and Save-and-exit drops
   entirely because the logo already goes home and progress saves itself. */
@media (max-width: 59.99rem) {
  .nav .btn--quiet { display: none; }
  .nav:not(.nav--last) .btn--finish { display: none; }
  .nav--last .btn--finish { flex: 1 1 auto; }
  .quiz__main { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
}

/* ==========================================================================
   BUYING
   ========================================================================== */

.buy {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  width: 100%; min-height: 54px;
  margin-bottom: 22px; padding: 14px 18px;
  background: var(--blue); color: var(--on-accent);
  border: 2px solid var(--blue); border-radius: var(--r-lg);
  cursor: pointer; text-align: center;
  transition: background-color 120ms ease;
}
.buy:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.buy__t { font-family: var(--cond); font-weight: 700; font-size: var(--step-1); }
html[lang="fa"] .buy__t { font-family: var(--pers); font-size: var(--step-0); }
.buy__from { font-size: var(--step--1); opacity: 0.85; }

.access__have { margin: 0 0 10px; font-size: var(--step--1); color: var(--ink-soft); }

/* The three plans. A row per plan: what you get, what it costs, and the
   per-day figure, which is the number that actually decides it. */
.plans { display: grid; gap: 10px; margin: 0 0 16px; }
.plan {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 60px;
  padding: 13px 15px; text-align: start;
  background: var(--paper);
  border: 2px solid var(--line); border-radius: var(--r);
  cursor: pointer;
}
.plan:hover { border-color: var(--line-hard); }
.plan__d { flex: 1 1 auto; min-width: 0; }
.plan__n { display: block; font-weight: 700; font-size: var(--step-0); }
.plan__r { display: block; font-size: var(--step--1); color: var(--ink-soft); margin-top: 1px; }
.plan__p {
  flex: 0 0 auto;
  font-family: var(--cond); font-weight: 700; font-size: var(--step-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
html[lang="fa"] .plan__p { font-family: var(--pers); font-size: var(--step-1); }

@media (max-width: 59.99rem) {
  .plan { min-height: 64px; }
  .buy { min-height: 56px; }
}

/* A plan whose Stripe link is not set yet: the price is still worth seeing,
   but it must not look clickable. */
.plan--soon { opacity: 0.55; cursor: not-allowed; }
.plan--soon:hover { border-color: var(--line); }

/* A quiet text button, for the fallback into manual code entry. */
.linkish {
  background: none; border: 0; padding: 0; margin-top: 4px;
  color: var(--blue); font-size: var(--step--1);
  text-decoration: underline; cursor: pointer;
}
.sheet .access__row { margin-bottom: 4px; }
.sheet .access__in { width: 100%; }

/* Mistake-report form inside the sheet. */
.report__in {
  width: 100%; margin: 8px 0 4px; padding: 10px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--line-hard); border-radius: var(--r);
  font: inherit; font-size: var(--step-0); resize: vertical;
}
/* Honeypot: off-screen for bots to find, never seen or focused by a person. */
.report__pot {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}

/* Which account you are signed in as, under the Buy button. */
.access__acct { margin: 0 0 6px; font-size: var(--step--1); color: var(--ink-soft); }

/* Account links under the Buy button: sign in/out, erasure, legal. */
.access__links { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.access__links .linkish { min-height: 32px; }

/* Required acceptance appears over the original, visible homepage. */
.legal-page { max-width: 42rem; margin: 0 auto; padding: 32px var(--pad) 64px; overflow-wrap: anywhere; }
body.terms-open { overflow: hidden; }
.terms-gate { width: calc(100% - 32px); max-width: 36rem; max-height: calc(100vh - 32px); margin: auto; padding: 0; overflow-y: auto; border: 2px solid var(--line-hard); border-radius: var(--r-lg); color: var(--ink); background: var(--paper); }
.terms-gate::backdrop { background: rgba(15, 20, 25, .48); }
.terms-gate__box { padding: 28px; overflow-wrap: anywhere; }
.terms-gate #termsLanguage { width: fit-content; margin-inline-start: auto; }
.terms-gate h1 { margin-block: 16px; }
.legal-page #legalSections p { line-height: 1.85; }
.legal-page #legalSections section { margin-block: 38px; }
.legal-caution { border-top: 2px solid var(--line-hard); padding-block-start: 20px; }
@media (max-width: 544px) { .terms-gate__box { padding: 20px; } }
.terms-gate h1, .legal-page h1 { font-family: var(--cond); font-size: var(--step-3); line-height: 1.12; }
.terms-gate p, .legal-page p { line-height: 1.65; }
.terms-gate__brand { font-weight: 700; color: var(--blue); }
.terms-gate__links, .terms-gate__actions, .legal-nav { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
.terms-gate__links a, .legal-nav a, .legal-nav button { display: inline-flex; align-items: center; min-height: 44px; }
.terms-gate__notice { padding: 16px; border: 2px solid var(--line-hard); border-radius: var(--r); background: var(--paper); }
.legal-check { display: flex; align-items: flex-start; gap: 12px; margin: 20px 0 8px; min-height: 44px; cursor: pointer; line-height: 1.6; }
.legal-check input { flex: 0 0 22px; width: 22px; height: 22px; margin: 2px 0; accent-color: var(--blue); }
.legal-small { color: var(--ink-soft); font-size: var(--step--1); }
.legal-page section { margin-block: 28px; }
.legal-page h2 { font-family: var(--cond); font-size: var(--step-2); line-height: 1.2; }
.legal-page dt { font-weight: 700; margin-block-start: 12px; }
.legal-page dd { margin-inline-start: 0; }
.legal-nav { margin-block: 16px; }
.legal-nav button { font: inherit; padding: 0 12px; border: 1px solid var(--line-hard); border-radius: var(--r); background: var(--paper); color: var(--ink); cursor: pointer; }
.legal-nav [aria-pressed="true"], .legal-nav [aria-current="page"] { font-weight: 700; text-decoration: underline; }
.purchase-total { font-weight: 700; font-size: var(--step-1); }

.terms-gate__links a, .legal-page a { color: var(--blue); text-underline-offset: .18em; }

/* Account navigation mirrors naturally with the document direction. */
body { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
body > #main { flex: 1 0 auto; }
.bar__in { gap: 12px; }
.bar__right { flex: 1; min-width: 0; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.bar__right .clock { margin-inline-end: 0; }
.bar__auth { flex: 0 0 auto; min-height: 44px; padding: 8px 14px; border: 2px solid var(--blue); border-radius: var(--r); background: var(--blue); color: var(--on-accent); font-size: var(--step--1); font-weight: 600; cursor: pointer; }
.bar__auth:hover { background: var(--blue-deep); border-color: var(--blue-deep); }
.site-footer { flex-shrink: 0; padding: 20px var(--pad) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 24px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--blue); text-underline-offset: .18em; }
@media (max-width: 544px) {
  .bar .brand__name { display: none; }
  .bar__right { gap: 8px; }
  .bar__auth { padding-inline: 10px; }
}

.auth-form { display: flex; flex-direction: column; gap: 10px; }
.auth-tabs { display: flex; gap: 10px; margin-bottom: 16px; }
.auth-field { font-weight: 600; margin-top: 8px; }
.auth-form .access__in { width: 100%; min-width: 0; }
.auth-form .linkish { align-self: flex-start; min-height: 44px; text-align: start; }
.auth-success { border-inline-start: 4px solid var(--green); padding: 12px; background: var(--ok-bg); }

.sheet__box { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; }
.sheet__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.sheet__h, .sheet__acts { flex-shrink: 0; }

/* ============================================================== auth sheet ==
   The sign-in dialog. Every rule here exists because the markup it styles
   had none, which is why the links ran together and the sheet outgrew the
   screen. One column, one rhythm, one primary action. */

/* On a phone the dialog used to run edge to edge, which left its border and
   every field inside pressed against the side of the screen, and put them
   under the rounded corners on a modern handset. Float it instead, with a
   gutter that grows to the safe area in landscape. Above 40rem the dialog is
   already centred with its own padding, so this applies below that only. */
@media (max-width: 39.99rem) {
  .sheet {
    padding: 0 max(12px, env(safe-area-inset-left)) 0 max(12px, env(safe-area-inset-right));
  }
  .sheet__box {
    border-radius: var(--r-lg);
    margin-bottom: max(12px, env(safe-area-inset-bottom));
    padding: 14px;
  }
}

/* The box is already a flex column whose body scrolls, so the action row
   stays put while the form moves under it. Give that row an edge, otherwise
   a form cut off mid-sentence looks broken rather than scrollable. */
.sheet__acts {
  padding-top: 10px;
  border-top: 2px solid var(--line);
}
.sheet__body { padding-bottom: 2px; }

.sheet__body .auth-intro { margin: 0 0 10px; }

/* ---- segmented control ---- */
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 0 0 12px;
  padding: 2px;
  border: 2px solid var(--line-hard);
  border-radius: var(--r);
  background: var(--paper);
}
.auth-tab {
  min-height: 32px;
  padding: 5px 10px;
  border: 0;
  border-radius: 2px;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.auth-tab:hover { color: var(--ink); }
.auth-tab--on { background: var(--ink); color: var(--paper); }
.auth-tab--on:hover { color: var(--paper); }

/* ---- social ---- */
.auth-social { margin: 0 0 10px; }

.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1 1 auto;
  border-top: 2px solid var(--line);
}

.btn--google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  padding: 6px 12px;
}
.btn--google .gmark { flex: 0 0 auto; }
/* A fixed-colour logo: never mirrored or recoloured with the interface. */
[dir="rtl"] .btn--google .gmark { transform: none; }
.btn--google[disabled] { opacity: 0.6; cursor: default; }

/* ---- fields ---- */
.auth-form { display: block; }

.auth-field { margin: 0 0 10px; }
.auth-field__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 3px;
}
.auth-field__label {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink);
}

.sheet .auth-input {
  display: block;
  width: 100%;
  min-height: 38px;
  padding: 6px 10px;
  color: var(--ink);
  font: inherit;
  /* 16px exactly: anything smaller makes iOS Safari zoom in on focus, which
     is what makes a form look like it has burst its margins. The height
     comes down through padding instead. */
  font-size: 16px;
  line-height: 1.25;
}
.sheet .auth-input:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 1px;
}

/* Reveal toggle, on the label's line so it is clearly part of the field. */
.auth-toggle {
  flex: 0 0 auto;
  /* Vertical padding only, cancelled by a vertical margin: the hit area
     grows without the text crossing the field's right edge. */
  padding: 7px 0;
  margin: -7px 0;
  border: 0;
  background: none;
  color: var(--blue);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
}
.auth-toggle:hover { text-decoration: underline; }

.sheet__body .auth-hint {
  margin: -8px 0 16px;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.sheet .auth-check { margin: 0 0 6px; min-height: 34px; }

/* ---- secondary links ---- */
.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin: 0;
}
.auth-links .linkish {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin: 0;
}

/* Boilerplate links: still links, but quieter than the actions above them. */
.sheet__body .auth-fine a {
  display: inline-block;
  padding: 6px 0;
  color: var(--ink-soft);
  text-decoration: underline;
}
.sheet__body .auth-fine a:hover { color: var(--ink); }
.sheet__body .auth-fine {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: var(--step--1);
}

.auth-success {
  margin: 0 0 12px;
  color: var(--green);
  font-weight: 600;
}

/* The sheet's own actions: the primary one takes the room it deserves. */
.sheet__acts #authSubmit { flex: 1 1 auto; min-height: 40px; padding: 7px 14px; }
.sheet__acts #authSubmit + .btn { min-height: 40px; padding: 7px 14px; }

/* The sign-in sheet is given wider side padding than the other sheets, so the
   fields and the Google button stand clear of the dialog's edge instead of
   running the full width of it. Horizontal only: the dialog is already as
   tall as it should be. Applied by sheetRoomy() in app.js, and it must come
   after the width-specific .sheet__box rules above to win on equal
   specificity. On a very narrow phone the gutter gives way to the content. */
.sheet__box--roomy { padding-inline: 30px; }
@media (max-width: 22.5rem) { .sheet__box--roomy { padding-inline: 18px; } }

/* ============================================================== account ====
   What you have and what you paid for it. A status block that states the
   answer in one line, then the receipts underneath. */

.acct-who { margin: 0 0 16px; color: var(--ink-soft); }

.sheet__body .acct-head {
  margin: 18px 0 8px;
  font-family: var(--cond);
  font-weight: 700;
  font-size: var(--step-1);
}
.sheet__body .acct-head:first-of-type { margin-top: 0; }

.acct-stat {
  padding: 12px 14px;
  border: 2px solid var(--line-hard);
  border-radius: var(--r);
  background: var(--paper);
}
/* An active subscription is the one thing here worth colouring. */
.acct-stat--on { border-color: var(--green); background: var(--ok-bg); }
.acct-stat__t { margin: 0; font-weight: 700; }
.acct-stat__s { margin: 4px 0 0; color: var(--ink-soft); font-size: var(--step--1); }

.acct-note { margin: 8px 0 0; color: var(--ink-soft); font-size: var(--step--1); }

.acct-hist { margin: 0; padding: 0; list-style: none; }
.acct-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 2px solid var(--line);
}
.acct-row:last-child { border-bottom: 0; }
/* Refunded or revoked: still shown, because it is their record, but it is
   not something they can use. */
.acct-row--off { color: var(--ink-soft); }
.acct-row--off .acct-row__p { text-decoration: line-through; }

.acct-row__m { min-width: 0; }
.acct-row__p { display: block; font-weight: 600; }
.acct-row__d { display: block; color: var(--ink-soft); font-size: var(--step--1); }
.acct-row__a { flex: 0 0 auto; text-align: end; }
.acct-row__sum { display: block; font-weight: 700; white-space: nowrap; }
.acct-row__st { display: block; color: var(--ink-soft); font-size: var(--step--1); }

.acct-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 2px solid var(--line);
}
/* Deletion is reachable but never the obvious thing to press. */
.acct-del { color: var(--red); }