/* ExamPath shared theme: black-and-white with exam colours on interaction, in dark and light modes.
   Loaded after each page's own <style>, so these rules override the old palette.
   The mode is set by exampath.js as <html data-theme="dark|light">; dark is the fallback. */

:root{
  /* Exam gradients (used as fills, with black text on top, in both modes) */
  --g-ielts:linear-gradient(120deg,#7dd3fc,#c4a1ff);
  --g-sat:linear-gradient(120deg,#ffd54a,#ff5a4d);
  --g-ap:linear-gradient(120deg,#5eea8a,#f2ea4e);
  --g-nc:linear-gradient(120deg,#ff6ec7,#ffa27a);
  --g-act:linear-gradient(120deg,#fb923c,#a855f7);
  --g-toefl:linear-gradient(120deg,#38e0d0,#4a90ff);
  --g-duolingo:linear-gradient(120deg,#bef264,#2dd4bf);
  --g-goethe:linear-gradient(120deg,#8b5cf6,#ec4899);
  --g-topik:linear-gradient(120deg,#6366f1,#fb7185);
  --g-jlpt:linear-gradient(120deg,#fbcfe8,#e11d48);
  /* Light solids for text and borders on dark backgrounds */
  --s-ielts:#a5b4fc; --s-sat:#ffa94d; --s-ap:#b8ec6a; --s-nc:#ff8fb8; --s-act:#d08cc0; --s-toefl:#5cc0e8; --s-duolingo:#8fe3a0; --s-goethe:#c070e0; --s-topik:#b07fc0; --s-jlpt:#f0809a;
  /* Deeper versions for text and borders on a light background */
  --sd-ielts:#4f46e5; --sd-sat:#bc3f0c; --sd-ap:#147839; --sd-nc:#be185d; --sd-act:#9333ea; --sd-toefl:#0f766e; --sd-duolingo:#48750e; --sd-goethe:#7e22ce; --sd-topik:#4338ca; --sd-jlpt:#be123c;
  --gd-ielts:linear-gradient(120deg,#0284c7,#7c3aed);
  --gd-sat:linear-gradient(120deg,#c86d06,#dc2626);
  --gd-ap:linear-gradient(120deg,#149845,#a16207);
  --gd-nc:linear-gradient(120deg,#db2777,#e3550c);
  --gd-act:linear-gradient(120deg,#e3550c,#7e22ce);
  --gd-toefl:linear-gradient(120deg,#0d9488,#2563eb);
  --gd-duolingo:linear-gradient(120deg,#5b930c,#0d9488);
  --gd-goethe:linear-gradient(120deg,#7c3aed,#db2777);
  --gd-topik:linear-gradient(120deg,#4f46e5,#e11d48);
  --gd-jlpt:linear-gradient(120deg,#db2777,#be123c);
}

/* ---------- Dark mode (default) ---------- */
:root:root:root{
  color-scheme:dark;
  --bg:#000; --bg-solid:#000; --surface:rgba(10,10,12,.74); --ink:#fff; --muted:#a8a8b0; --line:rgba(255,255,255,.24);
  --soft:rgba(255,255,255,.06); --glass:rgba(0,0,0,.85);
  --link:#fff; --accent:#fff; --on-accent:#000;
  --tq:var(--s-ielts); --on-tq:#000; --sf:var(--s-sat); --on-sf:#000; --cb:var(--s-ap); --on-cb:#000; --pl:var(--s-nc); --on-pl:#000;
}
/* ---------- Light mode ---------- */
:root:root:root[data-theme="light"]{
  color-scheme:light;
  --bg:#ebebe7; --bg-solid:#fff; --surface:rgba(255,255,255,.9); --ink:#0b0b0d; --muted:#55555d; --line:rgba(0,0,0,.2);
  --soft:rgba(0,0,0,.05); --glass:rgba(255,255,255,.92);
  --link:#0b0b0d; --accent:#0b0b0d; --on-accent:#fff;
  --tq:var(--sd-ielts); --on-tq:#fff; --sf:var(--sd-sat); --on-sf:#fff; --cb:var(--sd-ap); --on-cb:#fff; --pl:var(--sd-nc); --on-pl:#fff;
}

/* On an exam's own pages every accent becomes that exam's colour */
:root:root:root[data-exam="ielts"]{--grad:var(--g-ielts);--gtd:var(--gd-ielts);--sol:var(--s-ielts);--sold:var(--sd-ielts)}
:root:root:root[data-exam="sat"]{--grad:var(--g-sat);--gtd:var(--gd-sat);--sol:var(--s-sat);--sold:var(--sd-sat)}
:root:root:root[data-exam="ap"]{--grad:var(--g-ap);--gtd:var(--gd-ap);--sol:var(--s-ap);--sold:var(--sd-ap)}
:root:root:root[data-exam="nc"]{--grad:var(--g-nc);--gtd:var(--gd-nc);--sol:var(--s-nc);--sold:var(--sd-nc)}
:root:root:root[data-exam="act"]{--grad:var(--g-act);--gtd:var(--gd-act);--sol:var(--s-act);--sold:var(--sd-act)}
:root:root:root[data-exam="toefl"]{--grad:var(--g-toefl);--gtd:var(--gd-toefl);--sol:var(--s-toefl);--sold:var(--sd-toefl)}
:root:root:root[data-exam="duolingo"]{--grad:var(--g-duolingo);--gtd:var(--gd-duolingo);--sol:var(--s-duolingo);--sold:var(--sd-duolingo)}
:root:root:root[data-exam="goethe"]{--grad:var(--g-goethe);--gtd:var(--gd-goethe);--sol:var(--s-goethe);--sold:var(--sd-goethe)}
:root:root:root[data-exam="topik"]{--grad:var(--g-topik);--gtd:var(--gd-topik);--sol:var(--s-topik);--sold:var(--sd-topik)}
:root:root:root[data-exam="jlpt"]{--grad:var(--g-jlpt);--gtd:var(--gd-jlpt);--sol:var(--s-jlpt);--sold:var(--sd-jlpt)}
:root:root:root[data-exam]{--gt:var(--grad);--accent:var(--sol);--link:var(--sol);--tq:var(--sol);--sf:var(--sol);--cb:var(--sol);--pl:var(--sol)}
:root:root:root[data-exam][data-theme="light"]{--gt:var(--gtd);--accent:var(--sold);--link:var(--sold);--tq:var(--sold);--sf:var(--sold);--cb:var(--sold);--pl:var(--sold)}

html{background:var(--bg)}
body{background:transparent!important;color:var(--ink)}
#bgmap{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;display:block}
::selection{background:var(--ink);color:var(--bg)}

/* Frosted panels so text stays readable over the map */
.fact,.row,.resource,.subj,.scale,.est,.step,details,.acc,.site,.mod,.ul,.cres,.prog,.check,.callout,.tw,.next,.start,.badge,.seg,.goal,.tab{
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.subjdlg,.calcdlg{background:var(--bg-solid)!important}

/* ---------- Language buttons and theme toggle (added to the top bar by exampath.js) ---------- */
.bar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.lang-seg{display:inline-flex;border:1.5px solid var(--line);border-radius:999px;padding:3px;background:var(--surface);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.lang-seg button{font:600 .85rem Onest,"Trebuchet MS",sans-serif;border:0;background:none;color:var(--muted);padding:6px 13px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.lang-seg button:hover{color:var(--ink)}
.lang-seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.lang-seg button:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
@media(max-width:640px){.bar .badge{display:none}}
.theme-toggle{width:38px;height:38px;padding:0;border-radius:50%;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);display:inline-grid;place-items:center;cursor:pointer;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .2s,transform .2s}
.theme-toggle:hover{border-color:var(--ink);transform:rotate(15deg)}
.theme-toggle:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle .moon{display:none}
:root[data-theme="light"] .theme-toggle .sun{display:none}
:root[data-theme="light"] .theme-toggle .moon{display:block}

/* ---------- Home page (no data-exam): fully monochrome until hover ---------- */
:root:not([data-exam]) :focus-visible{outline-color:var(--ink)!important}
:root:not([data-exam]) .rk,:root:not([data-exam]) .uni a{color:var(--ink)}
:root:not([data-exam]) .uni a{text-decoration:underline}
:root:not([data-exam]) .prog.on{border-color:var(--line)}
:root:not([data-exam]) .prog.on:hover{border-color:var(--ink)}
:root:not([data-exam]) .ticket{position:relative;isolation:isolate;background:var(--surface);color:var(--ink);--dash:var(--line)}
:root:not([data-exam]) .ticket::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--g);opacity:0;transition:opacity .35s}
:root:not([data-exam]) .ticket:hover,:root:not([data-exam]) .ticket:focus-visible,:root:not([data-exam]) .ticket[aria-pressed="true"]{
  background:var(--surface);color:#000;transform:translateY(-6px);--dash:rgba(0,0,0,.45)}
:root:not([data-exam]) .ticket:hover::before,:root:not([data-exam]) .ticket:focus-visible::before,:root:not([data-exam]) .ticket[aria-pressed="true"]::before{opacity:1}
.t-ielts{--g:var(--g-ielts)}.t-sat{--g:var(--g-sat)}.t-ap{--g:var(--g-ap)}.t-nc{--g:var(--g-nc)}.t-act{--g:var(--g-act)}.t-toefl{--g:var(--g-toefl)}.t-duolingo{--g:var(--g-duolingo)}.t-goethe{--g:var(--g-goethe)}.t-topik{--g:var(--g-topik)}.t-jlpt{--g:var(--g-jlpt)}
:root:not([data-exam]) .ticket .blurb,:root:not([data-exam]) .ticket .stub{color:inherit}
:root:not([data-exam]) .panel{border-top-color:var(--line)}
:root:not([data-exam]) .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* ---------- Exam pages: monochrome with the exam gradient as the accent ---------- */
[data-exam] :is(.button,.chip[aria-pressed="true"],.scores button[aria-pressed="true"],.seg button[aria-pressed="true"],.chip.on,.off,.tab[aria-selected="true"],.fill,.knob,.tag:not(.p),a.chip.link:hover){
  background-image:var(--grad);color:#000}
[data-exam] .step::before{background-image:var(--grad);color:#000}
[data-exam] .intro{border-left-color:transparent;border-image:var(--grad) 1}
[data-exam] .ticket:hover,[data-exam] .ticket[aria-pressed="true"]{background-image:var(--grad);color:#000}
[data-exam] .resource:hover,[data-exam] .subj:hover,[data-exam] .site:hover,[data-exam] .pn a:hover{border-color:var(--accent)}
[data-exam] h1{background:var(--gt);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;width:fit-content;max-width:100%}
/* Russian and Uzbek words are longer than the English headings the display sizes were chosen for */
html[lang="ru"] h1{font-size:clamp(1.45rem,5.2vw,2.7rem)}
html[lang="uz"] h1{font-size:clamp(1.6rem,5.7vw,3rem)}
html[lang="ru"] .ticket .name{font-size:clamp(1.1rem,3.4vw,1.6rem)}
html[lang="uz"] .ticket .name{font-size:clamp(1.2rem,3.6vw,1.75rem)}
html[lang="ru"] h1,html[lang="uz"] h1,html[lang="ru"] .ticket .name,html[lang="uz"] .ticket .name{overflow-wrap:break-word;hyphens:auto}
/* Very narrow phones (320px): grid and flex items may shrink below their longest word instead of stretching the page, and a price row wraps rather than overflows */
.techs>li,ol.steps>li,.feec,.orgc,.org>*,.feeg>*,.tip>*{min-width:0}
main{overflow-wrap:break-word}
.frow{flex-wrap:wrap;row-gap:2px}
/* The "Goal" tips on the IELTS skill pages reuse the .goal pill class, but they are plain boxes: no pointer cursor */
.tip.goal{cursor:default}
/* A dialog title that receives focus when the dialog opens (so a long dialog starts at its top); it is not a control, so no ring */
#dlg-title:focus{outline:none}
/* "Skip to content" link: hidden until it gets keyboard focus (every page has one) */
.skip{position:absolute;top:-100px;left:20px;padding:10px 14px;background:var(--bg-solid);color:var(--ink);border:1.5px solid var(--line);border-radius:8px;font-weight:600;z-index:100}
.skip:focus{top:10px}

/* Accordion titles on the IELTS pages are real h2 headings (so the page outline is h1, h2, h3) but keep the look of the summary text */
details.acc>summary>h2{font:inherit;margin:0;display:inline}