/* =========================================================
   IZORA — design system
   Charcoal and lime · the mastery scale comes from the brand family
   Every colour is a semantic token; the theme swaps them.
   ========================================================= */

:root{
  /* ---- DARK (default) — charcoal and lime ----
     The mastery scale lives in the brand's own family: red → gold → lime.
     So "strong" moves towards the brand colour — as the student climbs,
     the map turns into the site's own colour. */
  --canvas:      #0a0a0b;
  --band:        #0a0a0b;   /* kept equal to the canvas: one background everywhere */
  --panel:       #141416;
  --panel-2:     #1b1b1e;
  --sunk:        #070708;
  --line:        #2b2b30;
  --line-soft:   #1c1c20;

  --text:        #f2f2f0;
  --text-2:      #c6c6c2;
  --text-3:      #85858a;

  --m-weak:      #ff6a4d;
  --m-mid:       #ffd247;
  --m-strong:    #a8e05f;
  /* brand colour — independent of the mastery scale */
  --brand:       #c6f24e;
  --ai:          #7fd7ff;
  --sky:         #4fd1e0;

  --on-accent:   #17200a;   /* text on filled buttons */
  --glow-1:      rgba(198,242,78,.09);
  --glow-2:      rgba(127,215,255,.07);
  --tint:        rgba(242,242,240,.06);

  /* ---- Derived tones of the scale ----
     These used to be computed with color-mix(). color-mix does not exist
     before Chrome 111, and Android 5/6 phones are stuck on Chrome 106 —
     there the background of the right/wrong option and the empty part of
     the spiral did not show at all. Now every tone is a literal value, so
     the result is the same on every phone. */
  --wash-weak:   rgba(255,106,77,.10);   /* background of a wrong option */
  --wash-strong: rgba(168,224,95,.10);   /* background of the right option */
  --halo-strong: rgba(168,224,95,.18);   /* halo of the panel-bar dot */
  --track-weak:  #5e3a37;                /* the unmastered part in the spiral */
  --track-mid:   #5e5335;

  /* Fonts */
  --font-display: 'Bricolage Grotesque', 'Archivo', 'Helvetica Neue', sans-serif;
  --font-ui: 'DM Sans', 'Segoe UI', system-ui, sans-serif;

  /* Shape */
  --r-card: 32px;
  --r-panel: 24px;
  --r-pill: 999px;
  --r-sm: 14px;

  /* Layout
     The column used to stop at 1560px: on a 24" screen that left 200px of
     empty canvas on each side, on a 27" one over 400px. It keeps growing now,
     and the side padding grows with it so the content never touches the edge.
     Readability is not at risk — the paragraphs have their own 62ch limit. */
  --page: 2120px;
  --gutter: clamp(40px, 4.4vw, 104px);

  color-scheme: dark;
}

:root[data-theme="light"]{
  /* ---- LIGHT — neutral paper, dark lime ----
     Lime is unreadable on white, so in light mode it moves to an olive tone;
     the scale keeps the same order: brick → gold → olive green. */
  --canvas:      #f4f4f2;
  --band:        #f4f4f2;
  --panel:       #ffffff;
  --panel-2:     #fafaf8;
  --sunk:        #f7f7f5;
  --line:        #d8d8d3;
  --line-soft:   #e7e7e2;

  --text:        #17171a;
  --text-2:      #45454a;
  --text-3:      #77777d;

  --m-weak:      #cf3f2a;
  --m-mid:       #a97c00;
  --m-strong:    #4f8c1f;
  --brand:       #5d7a00;
  --ai:          #1d6fa5;
  --sky:         #0f7f96;

  --on-accent:   #f6ffe0;
  --glow-1:      rgba(93,122,0,.09);
  --glow-2:      rgba(29,111,165,.07);
  --tint:        rgba(23,23,26,.05);

  /* on a light background the line colour is pale — the tones are mixed stronger */
  --wash-weak:   rgba(207,63,42,.10);
  --wash-strong: rgba(79,140,31,.10);
  --halo-strong: rgba(79,140,31,.18);
  --track-weak:  #d59e93;
  --track-mid:   #c6b583;
  --track-strong:#a4bb8f;

  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  /* Android Chrome "font boosting" — it enlarges text in narrow columns as it
     sees fit and the same page looks different on two phones. 100% turns it off. */
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--canvas);
  color:var(--text);
  font-family:var(--font-ui);
  font-weight:500;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .35s ease, color .35s ease;
  /* on tap Android lights up a blue frame — it clashes with the design.
     Instead every interactive element provides its own :active state. */
  -webkit-tap-highlight-color:transparent;
}

/* On a touch device :hover "sticks" — the card stays lifted and the row stays
   lit after the finger leaves. So lift/background effects only run on devices
   with a real cursor; on touch it is :active that answers. */
@media (hover:none){
  .btn-primary:hover{ filter:none; transform:none; }
  .btn-ghost:hover{ border-color:var(--line); }
  .flow-step:hover, .gain:hover{ transform:none; }
  .kt-row:hover, .nav-links a:hover{ background:none; }
  .nav-links a:hover:not(.on)::before,
  .nav-links a:hover:not(.on)::after{ color:var(--text-3); }
  .theme-toggle:hover{ border-color:var(--line); background:transparent; }
  .subj-tab:hover{ border-color:var(--line); color:var(--text-2); }
  .nav-auth:hover{ filter:none; }
}
/* immediate feedback under the finger */
@media (hover:none){
  .btn:active{ transform:scale(.97); }
  .opt:active:not(:disabled){ background:var(--tint); border-color:var(--text); }
  .kt-row:active, .nav-links a:active, .subj-tab:active,
  .nav-burger:active, .theme-toggle:active{ background:var(--tint); }
}

body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 600px at 78% -8%, var(--glow-1), transparent 62%),
    radial-gradient(760px 520px at 6% 12%, var(--glow-2), transparent 60%);
}

.wrap{ width:100%; max-width:var(--page); margin:0 auto; padding:0 var(--gutter); position:relative; z-index:1; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

/* ---------- Type ---------- */
.display{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(52px, 10.5vw, 148px);
  line-height:.86; letter-spacing:-.035em; margin:0; text-wrap:balance;
}
.h1{ font-family:var(--font-display); font-weight:800;
  font-size:clamp(36px,5.6vw,74px); line-height:.94; letter-spacing:-.03em; margin:0; }
.h2{ font-family:var(--font-display); font-weight:700;
  font-size:clamp(26px,3vw,40px); line-height:1.02; letter-spacing:-.025em; margin:0; }
.h3{ font-family:var(--font-display); font-weight:700;
  font-size:22px; line-height:1.15; letter-spacing:-.015em; margin:0; }
.lede{ font-size:clamp(17px,1.5vw,21px); line-height:1.5; color:var(--text-2); max-width:62ch; }

/* small, letter-spaced uppercase label */
.mono-tag{
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); font-weight:500;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:14px; color:var(--text-3); letter-spacing:.02em; margin-bottom:20px;
}
.eyebrow::before{ content:"["; color:var(--brand); font-weight:700; }
.eyebrow::after{ content:"]"; color:var(--brand); font-weight:700; }

/* ---------- Wordmark ---------- */
/* The name IS the logo: "izora" in lowercase Baloo 2, shipped as outlines
   rather than live text. Two reasons for the outlines: a page translator
   rewrites text nodes but never path data, so the name stays "izora" on a
   translated page, and the shape is already final before the webfont lands —
   no flash of a fallback logo. The word is one flat colour and no letter is
   singled out; --s is the only size knob, and the word draws at .8 of it. */
.mark{
  display:block; height:.8em; width:auto;
  font-size:var(--s); --s:26px;
  color:var(--text);
}
.mark-lg{ --s:44px; }

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:var(--r-pill); padding:14px 26px;
  font-size:16px; font-weight:500; cursor:pointer;
  border:1px solid transparent; transition:.2s ease; white-space:nowrap;
}
.btn-primary{ background:var(--brand); color:var(--on-accent); border-color:var(--brand); }
.btn-primary:hover{ filter:brightness(1.1); transform:translateY(-1px); }
/* a light passes over the button on hover — the same idea as the one climbing
   the spiral, so the two motions on the page belong to each other */
.btn-primary::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%);
  transform:translateX(-120%); opacity:0;
}
@media (hover:hover){
  .btn-primary:hover::after{ animation:btnSheen .75s cubic-bezier(.3,0,.3,1); }
}
@keyframes btnSheen{
  from{ transform:translateX(-120%); opacity:.9 }
  to  { transform:translateX(120%);  opacity:0 }
}
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--text); }
.btn-sm{ padding:9px 18px; font-size:14px; }
.btn:disabled{ opacity:.4; cursor:default; transform:none; }

/* ---------- Nav ---------- */
/* Fully transparent at the top — it reads as part of the page.
   On scroll the backdrop arrives softly; to avoid a hard edge both the blur
   and the colour are melted downwards with a mask. */
.nav{ position:sticky; top:0; z-index:40; padding:18px 0 14px; }
.nav::before{
  content:""; position:absolute; left:0; right:0; top:0; bottom:-30px;
  pointer-events:none; opacity:0; transition:opacity .35s ease;
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  /* solid over the bar's own height, then a 30px soft fade below */
  background:linear-gradient(to bottom, var(--canvas) 0%, var(--canvas) 68%, transparent 100%);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
  mask-image:linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
}
.nav.stuck::before{ opacity:1; }
.nav-inner{ position:relative; }
/* no frame, no background — it sits on the page's own edge */
.nav-inner{ display:flex; align-items:center; gap:18px; padding:2px 0; }
.brand{ display:flex; align-items:center; }
.nav-links{ display:flex; gap:2px; margin-left:auto; }
/* The brackets come from .eyebrow — the site already sets labels [like this].
   At rest the bracket is pale; on hover and on the current page it turns brand
   colour: instead of a background pill, the bracket itself points at the target. */
.nav-links a{ padding:8px 10px; border-radius:var(--r-pill); font-size:15px; color:var(--text-2);
  white-space:nowrap; transition:.18s; }
.nav-links a::before,
.nav-links a::after{
  color:var(--text-3); font-weight:700; transition:color .18s;
}
.nav-links a::before{ content:"["; margin-right:5px; }
.nav-links a::after{ content:"]"; margin-left:5px; }
.nav-links a:hover{ color:var(--text); }
.nav-links a:hover::before,
.nav-links a:hover::after{ color:var(--brand); }
/* the shape does not change — only the colour comes alive, so it never reads as a pill */
.nav-auth:hover{ filter:brightness(1.15); }
/* Account button — plain text like the links, not a filled pill.
   The brackets differ: links are [like this], the account is {like this}.
   A different bracket marks different work — one navigates, one acts on the account. */
.nav-auth{
  background:none; border:0; padding:8px 10px;
  font-family:inherit; font-size:15px; font-weight:500; color:var(--brand);
  white-space:nowrap; cursor:pointer; transition:.18s;
}
.nav-auth::before,
.nav-auth::after{ color:var(--brand); font-weight:700; }
.nav-auth::before{ content:"{"; margin-right:5px; }
.nav-auth::after { content:"}"; margin-left:5px; }

.nav-burger{ display:none; margin-left:auto; background:none; border:1px solid var(--line);
  color:var(--text); border-radius:var(--r-pill); padding:8px 14px; font-size:14px; cursor:pointer; }

/* theme toggle */
.theme-toggle{
  width:38px; height:38px; flex:none; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--text);
  display:grid; place-items:center; cursor:pointer; transition:.2s;
}
.theme-toggle:hover{ border-color:var(--text); background:var(--tint); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .ico-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .ico-sun{ display:block; }
:root[data-theme="light"] .theme-toggle .ico-moon{ display:none; }

/* ---------- Hero ---------- */
.hero{ padding:48px 0 34px; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:52px; align-items:center; }
.hero .display .accent{ color:var(--brand); }
.hero .display .outline{ -webkit-text-stroke:2px var(--text); color:transparent; }
.hero-sub{ margin-top:28px; }
.hero-actions{ display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.cta-note{ margin-top:18px; font-size:14px; color:var(--text-3); }

/* =========================================================
   KNOWLEDGE TABLE — the rows are a table, the left gutter is a graph
   Dependencies are drawn in lanes like a git graph; a continuous pulse
   runs along the lines. The motion is the core of the section.
   ========================================================= */
.graph{ position:relative; }
.kt-head{
  display:grid; grid-template-columns:var(--kt-cols); align-items:center;
  gap:0 18px; padding:0 4px 12px; border-bottom:1px solid var(--line);
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
}
.graph{ --kt-cols:104px minmax(0,1fr) 160px 150px 54px; }
.kt-body{ position:relative; }
.graph-edges{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:visible; }

.kt-row{
  position:relative; z-index:2; display:grid; grid-template-columns:var(--kt-cols);
  align-items:center; gap:0 18px; width:100%; text-align:left;
  background:none; border:0; border-bottom:1px solid var(--line-soft);
  padding:13px 4px; color:var(--text); font-family:inherit; cursor:pointer;
  transition:background .2s, opacity .25s;
}
.kt-row:last-child{ border-bottom:0; }
.kt-row:hover{ background:var(--tint); }
.kt-gutter{ height:100%; }
.kt-name{ font-size:15px; line-height:1.3; font-weight:500; }
.kt-strand{ font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--text-3); }
.kt-bar{ height:5px; border-radius:var(--r-pill); background:var(--line-soft); overflow:hidden; display:block; }
.kt-bar i{ display:block; height:100%; width:0; border-radius:var(--r-pill);
  transition:width .7s cubic-bezier(.2,.8,.25,1), background .4s; }
.kt-val{ font-size:12.5px; color:var(--text-3); text-align:right; font-variant-numeric:tabular-nums; }
.kt-row.locked .kt-name{ color:var(--text-3); font-weight:400; }
.kt-row.locked .kt-strand{ opacity:.6; }
.kt-row.picked{ background:var(--tint); }
.kt-row.picked .kt-name{ text-decoration:underline; text-underline-offset:4px; }
.kt-row.active .kt-name{ color:var(--ai); }

/* focus mode — while hovering one row */
.graph.focus .kt-row{ opacity:.42; }
.graph.focus .kt-row.near{ opacity:1; }

/* ---- graph gutter ---- */
.gedge{ fill:none; stroke:var(--line); stroke-width:1.6; transition:stroke .25s; }
.gedge.hot{ stroke:var(--ai); stroke-width:2.2; }
.graph.focus .gedge:not(.hot), .graph.focus .gflow:not(.hot){ opacity:.12; }
.gdot{ fill:var(--panel); stroke:var(--line); stroke-width:2; transition:.3s; }
.gdot.weak  { stroke:var(--m-weak); }
.gdot.mid   { stroke:var(--m-mid);    fill:var(--m-mid); }
.gdot.strong{ stroke:var(--m-strong); fill:var(--m-strong); }
.gdot.locked{ stroke:var(--text-3); stroke-dasharray:2 2; fill:transparent; }

/* ---- Pulse running along the lines ----
   Kept calm: slow, thin and pale. In the earlier version every edge blinked
   on the same 2.6-second loop — it was too much. Now the loop is long, the
   pulses are spaced apart, and the row background blinking is gone entirely.
   Attention only rises when the cursor is over a row. */
.gflow{
  fill:none; stroke:var(--ai); stroke-width:1.8; stroke-linecap:round;
  stroke-dasharray:6 94; stroke-dashoffset:100;
  animation:ktFlow 7s linear infinite;
  opacity:.32;
}
@keyframes ktFlow{
  0%   { stroke-dashoffset:100; opacity:0 }
  10%  { opacity:.32 }
  55%  { opacity:.32 }
  70%  { stroke-dashoffset:0;   opacity:0 }
  100% { stroke-dashoffset:0;   opacity:0 }
}
.gflow.hot{ stroke:var(--m-strong); stroke-width:3; opacity:1;
  animation-duration:1.6s; }

/* In the hero the knowledge network is not a card — it sits straight on the canvas. */
.kmap{ padding:4px 0 0; position:relative; }
..subj-tabs{ display:flex; gap:8px; flex-wrap:wrap; }
.subj-tab{ border:1px solid var(--line); background:transparent; color:var(--text-2);
  border-radius:var(--r-pill); padding:9px 20px; font-size:14.5px; cursor:pointer; transition:.2s; }
.subj-tab:hover{ border-color:var(--text); color:var(--text); }
.subj-tab.on{ background:var(--text); color:var(--canvas); border-color:var(--text); }

.unlock{ margin:0 0 16px; font-size:13.5px; color:var(--m-strong);
  border:1px dashed var(--m-strong); border-radius:var(--r-pill); padding:8px 15px; display:inline-block; }

.qlist{ margin:0 0 20px; padding-left:22px; font-size:16.5px; line-height:1.6; color:var(--text-2); }
.qlist li{ padding:1px 0; }

@media (prefers-reduced-motion:reduce){
  .gflow{ animation:none; opacity:0; }
}

/* ---------- Sections ---------- */
.section{ padding:76px 0; border-top:1px solid var(--line-soft); }
.section-band{ background:var(--band); }
.section-head{ max-width:900px; margin-bottom:34px; }
.section-head .lede{ margin-top:20px; }
/* ---------- How it works ----------
   The heading and the argument sit side by side, the four stages run under
   them as one line: a rail behind the numbers ties the cards together, so they
   read as a sequence and not as four unrelated boxes. */
.flow-head{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:24px 56px; align-items:start; margin-bottom:42px; }
.flow-head .lede{ margin:0; }
/* smaller than the page's .h1: this heading lives in a half-width column and
   at 74px the dash fell onto a line of its own */
.flow-title{ font-family:var(--font-display); font-weight:800; margin:0;
  font-size:clamp(31px,4.1vw,58px); line-height:.98; letter-spacing:-.03em; }

.compare{ list-style:none; margin:26px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
.compare li{ display:flex; align-items:baseline; gap:14px; padding:14px 18px;
  border:1px solid var(--line); border-radius:var(--r-panel); background:var(--panel);
  font-size:14.5px; line-height:1.45; color:var(--text-2); }
.compare b{ font-family:var(--font-display); font-weight:700; font-size:14px;
  letter-spacing:.02em; flex:none; width:58px; }
.compare-book{ opacity:.72; }
.compare-book b{ color:var(--text-3); }
.compare-izora{ border-color:var(--brand); background:
  linear-gradient(0deg, var(--glow-1), var(--glow-1)), var(--panel); }
.compare-izora b{ color:var(--brand); }
.compare-izora span{ color:var(--text); }

.flow{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.flow-step{ position:relative; padding:26px 26px 24px; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r-card);
  display:flex; flex-direction:column; gap:11px;
  transition:transform .3s cubic-bezier(.2,.8,.25,1), border-color .3s ease; }
.flow-step:hover{ transform:translateY(-4px); border-color:var(--c,var(--line)); }
/* the rail: it leaves the card on the right and meets the next icon */
.flow-step::after{ content:""; position:absolute; top:48px; left:100%; width:14px;
  border-top:1px dashed var(--line); }
.flow-step:last-child::after{ display:none; }

/* a thin line icon in the stage's own colour, with the stage number beside it */
.flow-ico{ width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center;
  color:var(--c,var(--text)); border:1px solid currentColor;
  transition:background .3s ease, transform .45s cubic-bezier(.2,.8,.25,1); }
.flow-ico svg{ width:22px; height:22px; }
.flow-n{ position:absolute; top:28px; right:26px;
  font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:.06em; color:var(--text-3); transition:color .3s ease; }
.flow-step:hover .flow-n{ color:var(--c,var(--text-3)); }
.flow-step h3{ margin:0; }
.flow-step p{ margin:0; color:var(--text-2); font-size:14.5px; line-height:1.5; }

/* each icon answers the hover in its own way — the motion says what the stage does */
@media (hover:hover){
  .flow-step:hover .flow-ico{ background:var(--tint); }
  .flow-step:nth-child(1):hover .flow-ico{ transform:scale(1.08); }
  .flow-step:nth-child(2):hover .flow-ico{ transform:translateY(-3px); }
  .flow-step:nth-child(3):hover .flow-ico{ transform:translateX(3px); }
  .flow-step:nth-child(4):hover .flow-ico{ transform:rotate(-150deg); }
}

/* =========================================================
   DEMO — one question, one screen
   ========================================================= */
.demo{ display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr); gap:16px; align-items:start; }
.panel{ border:1px solid var(--line); border-radius:var(--r-card); background:var(--panel); overflow:hidden; }
.panel-bar{ display:flex; align-items:center; gap:12px; padding:16px 24px; border-bottom:1px solid var(--line-soft); }
.panel-bar .h3{ font-size:16px; }
.pip{ width:8px; height:8px; border-radius:50%; background:var(--m-strong);
  box-shadow:0 0 0 4px var(--halo-strong); }

/* session tally — NOT a fixed count, just a running history */
.tally{ margin-left:auto; display:flex; align-items:center; gap:14px; min-width:0; }
.tally-dots{ display:flex; gap:4px; min-width:0; }
/* The dots were a fixed 16px: ten questions did not fit the bar on a 360px
   screen and the last two were cut off at the edge of the panel — the student
   could not see their latest answers. Now each dot shares the space and 16px
   is only the upper bound. */
.tdot{ flex:1 1 16px; max-width:16px; min-width:5px; height:4px;
  border-radius:var(--r-pill); background:var(--line-soft); transition:background .3s; }
.tdot.ok{ background:var(--m-strong); }
.tdot.no{ background:var(--m-weak); }
@keyframes pop{ from{ transform:scale(0); } to{ transform:scale(1); } }

.qstage{ padding:30px 32px 32px; min-height:470px; display:flex; flex-direction:column; }
.qstage.out{ opacity:0; transform:translateY(-10px); transition:opacity .22s ease, transform .22s ease; }
.qstage.in{ animation:rise .42s cubic-bezier(.2,.8,.25,1) both; }
@keyframes rise{ from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;} }

.qcue{
  display:inline-flex; align-items:center; gap:9px; align-self:flex-start;
  border:1px dashed var(--line); border-radius:var(--r-pill);
  padding:7px 15px; font-size:13px; color:var(--text-3); margin-bottom:22px;
}
.qcue b{ color:var(--ai); font-weight:500; }
/* a topic the demo bank has no question for — the same line answers the tap */
.qcue-note{ border-style:solid; border-color:var(--line); color:var(--text-2); }

.qhead{ display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.subject-chip{ padding:4px 12px; border-radius:var(--r-pill); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; border:1px solid currentColor; }
.topic-name{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); }

.qtext{ font-size:21px; line-height:1.42; margin:0 0 22px; letter-spacing:-.005em; }

.options{ display:flex; flex-direction:column; gap:10px; }
.opt{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  background:transparent; border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-pill); padding:14px 20px; font-size:16px; font-weight:500;
  cursor:pointer; transition:.16s;
}
.opt:hover:not(:disabled){ border-color:var(--text); background:var(--tint); }
.opt:disabled{ cursor:default; }
.opt-k{ width:27px; height:27px; flex:none; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-size:12.5px; color:var(--text-3); }
.opt.correct{ border-color:var(--m-strong); background:var(--wash-strong); }
.opt.correct .opt-k{ border-color:var(--m-strong); color:var(--m-strong); }
.opt.wrong{ border-color:var(--m-weak); background:var(--wash-weak); }
.opt.wrong .opt-k{ border-color:var(--m-weak); color:var(--m-weak); }
.opt-flag{ margin-left:auto; font-size:12.5px; color:var(--text-3); }

.after{ margin-top:22px; animation:rise .4s cubic-bezier(.2,.8,.25,1) both; }
.verdict{ display:flex; align-items:center; gap:10px; font-size:15px; margin-bottom:16px; }
.verdict .badge{ font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  padding:4px 11px; border-radius:var(--r-pill); border:1px solid currentColor; }
.verdict .delta{ color:var(--text-3); font-size:13.5px; }

.explain{ border-left:2px solid var(--ai); padding:2px 0 2px 16px; }
.explain h4{ margin:0 0 8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ai); font-weight:500; }
.explain p{ margin:0; color:var(--text-2); font-size:15.5px; line-height:1.58; }

.qhint{ margin-top:auto; padding-top:26px; display:flex; align-items:center; gap:9px;
  font-size:13.5px; color:var(--text-3); }
.qhint::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--text-3); flex:none; opacity:.6; }

.qfoot{ margin-top:auto; padding-top:26px; display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
.selfx{ display:flex; gap:10px; align-items:center; flex:1; min-width:260px; }
.selfx input{
  flex:1; background:var(--sunk); border:1px solid var(--line); color:var(--text);
  border-radius:var(--r-pill); padding:12px 18px; font-family:inherit; font-size:15px; font-weight:500;
}
.selfx input::placeholder{ color:var(--text-3); }
.selfx input:focus{ outline:none; border-color:var(--ai); }
.beta{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--ai);
  border:1px solid var(--ai); border-radius:var(--r-pill); padding:3px 9px; flex:none; }

/* short description in the footer */
.group-note{ font-size:13.5px; color:var(--text-3); margin:auto 0 0; }

/* =========================================================
   LIVE MAP — the spiral and one real question beside it
   The section is the product in miniature: answer, and the step of the topic
   the question belongs to moves at once. The card is built in js/home.js and
   reuses the question styles above (.qtext, .options, .explain).
   ========================================================= */
/* The columns are top-aligned on purpose: when the explanation opens, the
   question column grows downwards and the spiral stays exactly where it was.
   Centred, the whole map slid down by half the new height on every answer. */
.live{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(22px,3vw,46px); align-items:start; padding:clamp(22px,3vw,38px); }
.live-map{ --sp-bg:var(--panel); min-width:0; }
.live-map .sp-stage{ max-width:min(500px, 100%); }
.live-map .sp-hint{ max-width:500px; margin-inline:auto; }

.live-q{ min-width:0; }
.live-stage{ max-width:920px; }
.live-stage{ display:flex; flex-direction:column; min-height:452px;
  will-change:opacity, transform; }
/* The outgoing card leaves upwards and the next one arrives from the same
   place, so the two halves read as one movement. They used to travel in
   opposite directions, which looked like a jump. */
.live-stage.out{ opacity:0; transform:translateY(-10px);
  transition:opacity .19s ease, transform .19s cubic-bezier(.4,0,1,1); }
.live-stage.in{ animation:liveIn .4s cubic-bezier(.2,.8,.25,1) both; }
@keyframes liveIn{
  from{ opacity:0; transform:translateY(-10px) }
  to  { opacity:1; transform:none }
}
/* the options come in one after another — the card fills itself */
.live-stage.in .opt{ animation:liveOpt .34s cubic-bezier(.2,.8,.25,1) both;
  animation-delay:calc(.10s + var(--oi,0) * .045s); }
@keyframes liveOpt{
  from{ opacity:0; transform:translateY(7px) }
  to  { opacity:1; transform:none }
}
/* after the answer the options that were neither picked nor right step back —
   the explanation arrives without the card growing by half a screen */
.live-stage .options.answered .opt:not(.correct):not(.wrong){
  padding:7px 17px; font-size:13px; opacity:.5;
}
.live-stage .options.answered .opt:not(.correct):not(.wrong) .opt-k{
  width:20px; height:20px; font-size:10.5px;
}
.live-stage .qtext{ font-size:19px; margin-bottom:18px; }
.live-stage .after{ margin-top:18px; }
.live-stage .explain p{ font-size:14.5px; line-height:1.55; }

.live-head{ display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap; margin-bottom:26px; }
/* deliberately smaller than the section above it: two big stacked headings in a
   row made the two sections look like the same block twice */
.live-title{ font-family:var(--font-display); font-weight:700; margin:0;
  font-size:clamp(27px,3.6vw,50px); line-height:1.04; letter-spacing:-.028em; }

@media (max-width:1020px){
  .live{ grid-template-columns:1fr; }
  /* on one column the map goes second: the question is what the visitor came for */
  .live-map{ order:2; }
  /* the reserved height was there to keep the map from sliding on a wide
     screen; in one column it is just empty space */
  .live-stage{ min-height:0; }
}

/* ---------- Feature rows ---------- */
.gains{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.gain{ border:1px solid var(--line); border-radius:var(--r-card); padding:26px 28px;
  background:var(--panel); display:flex; flex-direction:column; gap:11px;
  transition:transform .3s cubic-bezier(.2,.8,.25,1), border-color .3s ease; }
.gain:hover{ transform:translateY(-4px); border-color:var(--c,var(--line)); }
.gain p{ margin:0; color:var(--text-2); font-size:15px; line-height:1.55; }
.gain h3{ margin:0; font-size:19px; line-height:1.25; }
.gain-ico{ width:44px; height:44px; border-radius:var(--r-pill); display:grid; place-items:center;
  color:var(--c,var(--text)); border:1px solid currentColor; margin-bottom:3px;
  transition:background .3s ease, transform .45s cubic-bezier(.2,.8,.25,1); }
.gain-ico svg{ width:22px; height:22px; }
@media (hover:hover){
  .gain:hover .gain-ico{ background:var(--tint); transform:scale(1.07); }
}
.tool-label{ color:var(--c,var(--text-3)); font-family:var(--font-display); font-weight:700; font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; }

/* ---------- Marquee ---------- */
.marquee{ overflow:hidden; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:22px 0; white-space:nowrap; }
.marquee-track{ display:inline-flex; gap:44px; animation:slide 34s linear infinite; }
.marquee span{ font-family:var(--font-display); font-weight:700; font-size:26px;
  letter-spacing:-.02em; color:var(--line); }
.marquee span em{ font-style:normal; color:var(--text); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* ---------- CTA ---------- */
.cta{ border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(24px,2.6vw,34px) clamp(24px,3vw,40px);
  background:radial-gradient(700px 320px at 88% 8%, var(--glow-1), transparent 65%), var(--panel);
  display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
/* it sits directly under the three cards — same grid gap, so the four blocks
   read as one closing composition */
.gains + .cta{ margin-top:14px; }
.cta-text{ min-width:0; }
.cta-text p{ margin:8px 0 0; color:var(--text-2); font-size:15.5px; }
.cta-act{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
@media (max-width:760px){
  .cta{ flex-direction:column; align-items:flex-start; }
}

/* ---------- Account: nav button and sign-in dialog (js/auth.js) ---------- */
.nav-auth[hidden]{ display:none; }

.auth-dlg{ margin:auto; padding:0; border:1px solid var(--line); border-radius:var(--r-panel);
  background:var(--panel); color:var(--text); width:min(460px, calc(100vw - 32px)); }
.auth-dlg::backdrop{ background:rgba(0,0,0,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.auth-box{ position:relative; padding:30px 28px 28px; }
.auth-box h3{ font-family:var(--font-display); font-weight:800; font-size:26px; letter-spacing:-.02em;
  line-height:1.1; margin:0 44px 12px 0; }
.auth-box p{ margin:0 0 10px; color:var(--text-2); font-size:15px; line-height:1.55; }
.auth-box b{ color:var(--text); font-weight:500; overflow-wrap:anywhere; }
.auth-row{ display:flex; gap:10px; margin-top:18px; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line-soft); padding:40px 0 32px; margin-top:28px; }
.foot-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot-col h5{ margin:0 0 12px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); font-weight:500; }
.foot-col a{ display:block; color:var(--text-2); font-size:15px; padding:4px 0; }
.foot-col a:hover{ color:var(--text); }
.foot-col .foot-soon{ display:block; color:var(--text-3); font-size:15px; padding:4px 0; }
.foot-bottom{ margin-top:32px; padding-top:24px; border-top:1px solid var(--line-soft);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px; color:var(--text-3); }

/* ---------- Reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.25,1);
  transition-delay:calc(var(--i,0) * 80ms); }
.reveal.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .demo{ grid-template-columns:1fr; }
  .flow{ grid-template-columns:repeat(2,1fr); }
  .flow-step::after{ display:none; }
  .flow-head{ grid-template-columns:1fr; gap:20px; }
  .gains{ grid-template-columns:1fr; }
}
/* The narrow band just above the burger (1081–1240px): the full row fits, but
   only just. The gaps between items tighten so "Daxil ol" and "Yazıl" do not
   get pushed against the edge. */
@media (min-width:1081px) and (max-width:1240px){
  .nav-inner{ gap:12px; }
  .nav-links a{ padding:8px 8px; }
}

/* The bar switched to the burger at 900px, but the full row (mark + five links
   + theme + "Daxil ol" + "Yazıl") did not fit there anyway — at 901px the page
   scrolled sideways. The brackets widened the links a little further. The
   threshold is now the page's own layout threshold: burger below 1080px. */
@media (max-width:1080px){
  .nav-links{ display:none; }
  .nav-burger{ display:block; }
  /* burger open — js/exam.js and js/practice.js put an "open" class on .nav.
     The box is positioned against .nav-inner, which is already inside .wrap's
     padding: giving left/right another --gutter would indent the menu twice as
     far as the rest of the page. Hence 0 — the edges line up with the text.
     `top` was a fixed 76px too and overlapped whenever the bar's height changed;
     with calc it always sits right under the bar. */
  .nav.open .nav-links{ display:flex; position:absolute; top:calc(100% + 10px); left:0; right:0;
    flex-direction:column; background:var(--panel); border:1px solid var(--line);
    border-radius:20px; padding:10px; box-shadow:0 18px 40px rgba(0,0,0,.28); }
  .nav.open .nav-links a{ padding:13px 16px; font-size:16px; display:flex; align-items:center; }
  /* in the column the closing bracket is pulled to the right edge — otherwise
     the edge steps in and out with the length of each name */
  .nav.open .nav-links a::after{ margin-left:auto; }
}
@media (max-width:900px){
  .graph{ --kt-cols:88px minmax(0,1fr) 120px 54px; }
  .kt-strand{ display:none; }
}
@media (max-width:680px){
  :root{ --gutter:18px; }
  /* On a phone the hero spiral is 430px of decoration above the fold, and the
     same map is live a screen below. The text gets the space instead. */
  .kmap{ display:none; }
  .flow-step{ padding:22px 22px 20px; }
  .gain{ padding:22px 22px 20px; }
  .flow-n{ top:24px; right:22px; }
  /* four one-line columns made the footer as tall as a section */
  .foot-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; }
  .foot-col:first-child{ grid-column:1 / -1; }
  footer{ padding:32px 0 26px; }
  /* On a narrow screen the mastery bar goes — the number says the same thing
     more compactly. The mock-exam panel's own columns (.graph-tight) are fixed
     further down in the "NARROW SCREEN" section: it is declared after this one
     and would override the value set here. */
  .graph{ --kt-cols:64px minmax(0,1fr) 46px; }
  .kt-bar{ display:none; }
  /* when the bar goes its heading must go too, or an empty column is left */
  .kt-head span:nth-child(3){ display:none; }
  .gd-rows{ gap:24px; }
  .nav-inner{ padding:2px 0; gap:10px; }
  .flow{ grid-template-columns:1fr; }
  .section{ padding:56px 0; }
  .hero .display .outline{ -webkit-text-stroke-width:1.5px; }
  .qstage{ padding:24px 20px 26px; min-height:0; }
  .qtext{ font-size:19px; }
  .panel-bar{ padding:14px 18px; }
}
@media (max-width:560px){
  .mark{ --s:20px; }
  .nav-burger{ padding:8px 12px; }
  /* with the "Daxil ol" button the bar did not fit 375px */
  .nav-inner{ gap:6px; }
  .nav-auth{ padding:8px 8px; }
}
/* =========================================================
   PHONE — general adjustments
   Most of the traffic from Azerbaijan is Android, often from small screens
   like 360×640. The rules here take that width as the base size and bring
   the elements up to finger size.
   ========================================================= */

/* ---- panel bar ---- */
/* .h3 is a 22px display font: "Izora · sınaq" breaks into two lines on a
   narrow screen, the tally drops below it and the bar becomes 97px tall. Here
   the bar stays on one line, the heading tightens and the tally takes the rest. */
@media (max-width:680px){
  /* "Sessiya ən zəif mövzudan başlayır → Üstlü və loqarifmik funksiyalar" was
     forced onto one line: the topic name broke into three lines and the box
     looked tall and messy. On a narrow screen the name gets its own line. */
  .qcue{ flex-wrap:wrap; gap:4px 9px; }

  .panel-bar{ padding:13px 16px; gap:10px; }
  .panel-bar .h3{ font-size:15px; white-space:nowrap; flex:none; }
  .tally{ gap:8px; flex:1; }
  .tally .mono-tag{
    font-size:10px; letter-spacing:.1em; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .tally-dots{ flex:1; justify-content:flex-end; }
}
/* on the narrowest screens the topic name gives up its space — the dots carry the same information */
@media (max-width:420px){
  .tally .mono-tag{ display:none; }
}

/* ---- finger size ----
   On a device without a cursor the targets are at least 44px. The buttons used
   to be 31–39px: on older phones with imprecise sensors a mis-tap was routine.
   The look does not change — only the padding grows. */
@media (pointer:coarse){
  .brand{ min-height:44px; }   /* the mark is a "home page" link too */
  .nav-auth{ min-height:44px; }
  .btn{ min-height:46px; }
  .btn-sm{ min-height:44px; padding:11px 20px; }
  .nav-burger{ min-height:44px; padding:11px 18px; }
  .theme-toggle{ width:44px; height:44px; }
  .subj-tab{ min-height:44px; padding:11px 20px; }
  .view-tab{ min-height:42px; padding:11px 18px; }
  .opt{ min-height:50px; }
  .foot-col a, .foot-col .foot-soon{ padding:10px 0; }
  .kt-row{ padding:15px 4px; }
  .sp-lg{ padding:11px 2px; }
  /* the .graph-tight rows are NOT here — that selector is declared after this
     file, in the "NARROW SCREEN" section, and would override this one. */
}
/* The block above raises .btn-sm's side padding to 20px and used to override the
   12px rule written for narrow screens — the bar stopped fitting again.
   The height stays 44px, only the width tightens. */
/* Back link — used on the practice and topic pages.
   It lived in css/practice.css, but subject.html does not load that file: there
   the link was left completely unstyled. A shared file is the right place. */
.practice-back{
  display:inline-block; margin-bottom:8px;
  font-size:13px; color:var(--text-3); transition:color .18s;
}
@media (hover:hover){ .practice-back:hover{ color:var(--text); } }
@media (pointer:coarse){
  /* the line was 20px — vertical padding does not move the text, it grows the target */
  .practice-back{ padding:12px 6px; margin:-12px -6px 0; }
}

/* The "Daxil ol" text link on the home page — it was 19px. */
@media (pointer:coarse){
  .cta-signin{ display:inline-block; padding:12px 6px; margin:-12px -6px; }
}

@media (pointer:coarse) and (max-width:560px){
  .nav-auth{ padding:11px 10px; min-height:44px; }
  .nav-burger{ padding:11px 15px; }
}

/* ---- text input ----
   On Android some browsers zoom the page in when a field smaller than 16px is
   focused, and never zoom back out. Every field is kept at 16px. */
@media (max-width:900px){
  .selfx input{ font-size:16px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  html{ scroll-behavior:auto; }
}

/* =========================================================
   MOCK-EXAM RESULT
   ========================================================= */
.qstage.result{ justify-content:flex-start; }
.res-eyebrow{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); margin-bottom:20px; }
.res-head{ display:flex; align-items:flex-start; gap:26px; flex-wrap:wrap;
  padding-bottom:26px; border-bottom:1px solid var(--line-soft); margin-bottom:26px; }
.res-score{ font-family:var(--font-display); font-weight:800; font-size:68px;
  line-height:.85; letter-spacing:-.04em; color:var(--m-strong); }
.res-score span{ color:var(--text-3); font-size:30px; }
.res-line{ margin:0; flex:1; min-width:240px; font-size:16px;
  line-height:1.5; color:var(--text-2); padding-top:6px; }

.res-chart{ display:flex; flex-direction:column; gap:9px; margin-bottom:28px; }
.res-row{ display:grid; grid-template-columns:minmax(0,1fr) 132px 40px;
  align-items:center; gap:16px; font-size:14px; }
.res-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.res-track{ display:flex; gap:4px; }
.res-track i{ flex:1; height:8px; border-radius:2px; }
.res-track i.ok{ background:var(--m-strong); }
.res-track i.no{ background:var(--m-weak); }
.res-val{ font-size:12.5px; color:var(--text-3); text-align:right;
  font-variant-numeric:tabular-nums; }

.res-cols{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.res-col h5{ margin:0 0 10px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:500; }
.res-col.good h5{ color:var(--m-strong); }
.res-col.bad  h5{ color:var(--m-weak); }
.res-col ul{ margin:0; padding-left:18px; font-size:14.5px; line-height:1.75; color:var(--text-2); }
.res-col .muted{ margin:0; font-size:14px; color:var(--text-3); }
@media (max-width:680px){
  .res-cols{ grid-template-columns:1fr; }
  /* a 132px bar + a 40px number left ~96px for the topic name on a phone:
     "Triqonometrik funksiyalar" and "Triqonometrik tənliklər" both showed up
     as "Triqonometri..." — the result became unreadable. The bar tightens and
     the name wraps to a second line instead of being cut. */
  .res-row{ grid-template-columns:minmax(0,1fr) 72px 34px; gap:10px; align-items:center; }
  .res-name{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }
  .res-track i{ height:7px; }
}

/* Two sets of the bar: a guest sees the pitch, a student sees the app.
   The choice follows `data-auth` and is ready at first paint. */
:root[data-auth="in"]  .nav-out{ display:none; }
:root[data-auth="out"] .nav-in { display:none; }

/* current page in the nav — the bracket lights up, the background stays light */
.nav-links a.on{ color:var(--text); background:var(--tint); }
.nav-links a.on::before,
.nav-links a.on::after{ color:var(--brand); }

/* =========================================================
   MOCK-EXAM PAGE — a screen-fitting, non-scrolling layout
   On a wide screen the network sits next to the question; on a narrow one it
   is hidden until the exam ends, then trades places with the result.
   ========================================================= */
/* dvh does not exist before Chrome 108. Without the fallback `height` drops out
   but `overflow:hidden` stays and the browser passes it to the viewport — on an
   Android 5/6 phone the page did not scroll at all and half the question was
   unreachable. The two lines are written in order: an old browser takes the
   first, a new one the second. */
body.page-fit{ height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
/* While the gate is closed the page holds only the sign-in pitch — the
   screen-locked layout does not apply there, or the text gets cut (see
   css/onboard.css). */
:root[data-gate="closed"] body.page-fit,
:root[data-gate="anon"]   body.page-fit{ height:auto; overflow:visible; display:block; }
body.page-fit::before{ position:fixed; }
/* NOT `static`: z-index only works on a positioned element, so a menu opened
   from a static bar stayed UNDER the page's `.wrap{z-index:1}` content — the
   names ran across the question. `relative` does not change the layout (the bar
   still does not stick), but it turns z-index on. */
.page-fit .nav{ flex:none; position:relative; z-index:40; padding:14px 0 10px; }
.page-fit .nav::before{ display:none; }

.fit-main{ flex:1; min-height:0; display:flex; }
.fit-wrap{ flex:1; display:flex; flex-direction:column; min-height:0; padding-bottom:22px; }

.fit-head{ flex:none; display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap; padding:4px 0 16px; }
.fit-title{ font-family:var(--font-display); font-weight:800; margin:0;
  font-size:clamp(21px, 2.3vw, 33px); line-height:1.05; letter-spacing:-.03em; }

/* There are two states. While the exam runs only the question is on screen —
   the thin progress strip above takes the network's place. After the tenth
   answer `body.test-done` is added: the network opens and sits beside the
   result. With the question alone the full 1560px is too wide, so the area
   tightens. These belong to the exam only (`.exam-fit`): the practice page uses
   the same `page-fit` layout but keeps its map open the whole time. */
.fit-grid{ flex:1; min-height:0; display:grid;
  grid-template-columns:minmax(0,1fr); gap:14px; }
body.test-done .fit-grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); }

.exam-fit .fit-wrap{ max-width:1180px; transition:max-width .45s cubic-bezier(.2,.8,.25,1); }
body.test-done .fit-wrap{ max-width:var(--page); }

.exam-fit #graphPanel{ display:none; }
body.test-done #graphPanel{ display:flex; flex-direction:column; }
body.test-done #progStrip{ display:none; }

/* ---------- Progress strip ----------
   Under the question panel's own heading, one line tall: a small spiral +
   how many topics are open + the overall mastery percentage.
   The spiral is read-only here — the numbers in its centre are unreadable at
   this size so they are hidden, and the touch bands are turned off too. */
.prog{
  flex:none; display:flex; align-items:center; gap:14px;
  padding:10px 24px 11px; border-bottom:1px solid var(--line-soft);
}
.prog-sp{ width:52px; flex:none; }
.prog-sp .sp-stage{ max-width:52px; }
.prog-sp .sp-hub, .prog-sp .sp-hit, .prog-sp .sp-next{ display:none; }
.prog-open{
  min-width:0; font-size:13.5px; font-weight:500; letter-spacing:-.005em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.prog-pct{
  margin-left:auto; flex:none; font-family:var(--font-display); font-weight:800;
  font-size:24px; line-height:1; letter-spacing:-.03em;
  color:var(--m-strong); font-variant-numeric:tabular-nums;
}
.fit-panel{ min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.fit-panel .panel-bar{ flex:none; }
.fit-panel .qstage{ flex:1; min-height:0; overflow:auto; padding:18px 24px 20px;
  overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.fit-panel .qstage::-webkit-scrollbar{ width:7px; }
.fit-panel .qstage::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }

/* network panel — tight rows so 17 topics fit the screen */
.graph-tight{ flex:1; min-height:0; overflow:auto; padding:12px 20px 16px;
  overscroll-behavior:contain;
  --kt-cols:70px minmax(0,1fr) 92px 38px;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.graph-tight::-webkit-scrollbar{ width:7px; }
.graph-tight::-webkit-scrollbar-thumb{ background:var(--line); border-radius:99px; }
.graph-tight .kt-head{ padding-bottom:8px; font-size:9.5px; }
.graph-tight .kt-row{ padding:5px 2px; gap:0 12px; }
.graph-tight .kt-name{ font-size:12.5px; line-height:1.25; }
.graph-tight .kt-strand{ display:none; }
.graph-tight .kt-bar{ height:4px; }
.graph-tight .kt-val{ font-size:11px; }

/* on the exam page the question's own area gets narrower */
.page-fit .qcue{ margin-bottom:12px; padding:5px 13px; font-size:12.5px; }
.page-fit .qtext{ font-size:17.5px; margin-bottom:14px; line-height:1.38; }
.page-fit .options{ gap:8px; }
.page-fit .opt{ padding:11px 17px; font-size:15px; }
.page-fit .after{ margin-top:13px; }
/* After the answer, options that are neither picked nor correct shrink:
   nothing is lost, but the explanation fits on screen. */
.page-fit .options.answered .opt:not(.correct):not(.wrong){
  padding:4px 17px; font-size:12.5px; opacity:.45;
}
.page-fit .options.answered .opt:not(.correct):not(.wrong) .opt-k{
  width:19px; height:19px; font-size:10.5px;
}
.page-fit .explain p{ font-size:14px; line-height:1.48; }
.page-fit .explain{ padding-left:14px; }
.page-fit .explain h4{ margin-bottom:5px; }
.page-fit .qhead{ margin-bottom:10px; }
/* long questions: text on the left, options on the right */
.qsplit{ display:block; }
.qcol{ min-width:0; }
@media (min-width:1081px){
  .page-fit .qsplit.wide{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
    gap:26px; align-items:start; }
  .page-fit .qsplit.wide .qtext{ font-size:16px; line-height:1.45; }
  .page-fit .qsplit.wide .qlist{ font-size:14.5px; line-height:1.45; margin-bottom:0; }
}
.page-fit .qlist{ font-size:15px; line-height:1.45; margin-bottom:14px; padding-left:20px; }
.page-fit .qfoot{ padding-top:13px; }
.page-fit .res-score{ font-size:46px; }
.page-fit .res-head{ padding-bottom:14px; margin-bottom:14px; gap:20px; }
.page-fit .res-eyebrow{ margin-bottom:12px; }
.page-fit .res-chart{ gap:5px; margin-bottom:18px; }
.page-fit .res-row{ font-size:13px; }
.page-fit .res-track i{ height:7px; }
.page-fit .res-col ul{ font-size:13.5px; line-height:1.55; }
.page-fit .res-line{ font-size:15px; }

/* =========================================================
   NARROW SCREEN — the "fits the screen" layout is turned off here
   On a wide screen the question and the network sit side by side and the page
   does not scroll. On a phone that model fails: a long question + five options
   + the explanation do not fit in 640px, so qstage became a box that scrolled
   inside itself — the student answered and "SƏHV", the explanation and "Növbəti
   sual" stayed below the fold, as if nothing had happened.
   So below 1080px the page turns into an ordinary single-column page that
   scrolls itself, with the network alive under the question.
   ========================================================= */
@media (max-width:1080px){
  body.page-fit{ height:auto; overflow:visible; display:block; }
  /* The bar stays `static` (the main .page-fit rule). It was `sticky` for a
     while and text passing under it showed through: in the page-fit layout
     `.nav::before` — the bar's backdrop — is switched off. Besides, on a 640px
     screen 64px of permanent space is worth more to the question. */
  .fit-main{ display:block; }
  .fit-wrap{ display:block; padding-bottom:40px; }
  .fit-grid{ display:block; }

  .exam-fit .fit-wrap{ max-width:var(--page); }   /* on a narrow screen it is a single column anyway */

  /* the panels do not scroll inside themselves — they grow with the content */
  .fit-panel{ display:block; overflow:visible; }
  /* stay a plain block when it opens too — `display:flex` would break the column layout */
  body.test-done #graphPanel{ display:block; }
  .fit-panel + .fit-panel{ margin-top:14px; }
  .fit-panel .qstage{ overflow:visible; padding:22px 20px 24px; }
  .graph-tight{ overflow:visible; padding:14px 18px 20px; }

  /* The tight columns (70/1fr/92/38 = 200px fixed) were meant for the wide
     panel. On a 360px phone ~100px was left for the topic name and "Funksiyalar
     və qrafiklər" broke into three lines. Here the sizes join the home page's
     network and the name gets all the remaining width. */
  .graph-tight{ --kt-cols:88px minmax(0,1fr) 120px 54px; }
  /* the row is a button too (topic choice) — brought up to 44px for a finger */
  .graph-tight .kt-row{ padding:13px 2px; }
  .graph-tight .kt-name{ font-size:14px; line-height:1.3; }
  .graph-tight .kt-val{ font-size:12.5px; }
  .graph-tight .kt-head{ font-size:10.5px; }

  /* the tightened typography was for wide screens — on a phone the readable size returns */
  .page-fit .qtext{ font-size:19px; line-height:1.42; margin-bottom:18px; }
  .page-fit .opt{ padding:14px 18px; font-size:16px; }
  .page-fit .options{ gap:10px; }
  .page-fit .explain p{ font-size:15px; line-height:1.55; }
  .page-fit .after{ margin-top:18px; }
  /* after the answer the other options fade but stay at a readable size:
     dropping to 12.5px on a narrow screen made the option text unrecognisable */
  .page-fit .options.answered .opt:not(.correct):not(.wrong){
    padding:11px 18px; font-size:14.5px; opacity:.5;
  }
  .page-fit .options.answered .opt:not(.correct):not(.wrong) .opt-k{
    width:23px; height:23px; font-size:11.5px;
  }
}

/* phone: the bar is hidden anyway (the 680px rule above), drop the column too */
@media (max-width:680px){
  .graph-tight{ --kt-cols:64px minmax(0,1fr) 46px; }
}

/* on very short screens tighten the header — only while the layout stays locked */
@media (max-height:720px) and (min-width:1081px){
  .fit-head{ padding:0 0 12px; }
  .fit-head .eyebrow{ display:none; }
  .page-fit .nav{ padding:10px 0 8px; }
}