/* Er. Tayari design system: tokens, base styles and every app screen.
   The static pages (/guide/, /faq/, /chapter/N/, /notes/) load this file plus css/pages.css.
   Colour pairs are checked by tools/check-contrast.js; keep its TOKENS in step with :root. */

/* ---------- tokens ---------- */
:root{
  /* The site's one colour set. Every screen uses these; check them with tools/check-contrast.js. */
  --paper:#F6F8FB;        /* quiet backgrounds, hover rows */
  --surface:#FFFFFF;      /* page and cards */
  --tint:#F2F5F9;         /* tags, table heads, photo placeholder */
  --track:#E9EDF2;        /* empty part of score and progress bars */
  --ink:#121B29;          /* primary text */
  --ink-2:#555E6C;        /* secondary text */
  --line:#DDE2E8;         /* hairlines, borders */
  --line-soft:#EEF1F5;    /* dividers inside a group */
  --line-strong:#B9C6D6;  /* hover borders, radio rings, placeholders */
  --blueprint:#204E90;    /* the brand blue: headers, primary buttons, links */
  --blueprint-2:#E4EFFF;  /* soft blue: selected and highlighted backgrounds */
  --exam-bar:var(--blueprint);
  --on-blue:#FFFFFF;      /* text on the brand blue */
  --on-blue-2:#C8D9F2;    /* quieter text on the brand blue */
  --strength:#197037;     /* strengths, correct answers, Passed */
  --strength-bg:#E6F4EC;
  --strength-wash:#F3FAF5;/* very light green for a whole tile */
  --grow:#855A08;         /* room to grow, a wrong choice, Not yet */
  --grow-bg:#FBF1DC;
  --error:#B3261E;        /* validation errors only */
  --on-primary:#FFFFFF;   /* label on a primary button */
  --scrim:rgba(18,27,41,.55);
  --font:"IBM Plex Sans","IBM Plex Sans Devanagari",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
/* Dark mode is switched off for now (owner's choice): the site is light everywhere.
   To bring it back later, wrap these values in @media (prefers-color-scheme:dark){:root{...}} again. */
:root[data-theme="dark"]{
  --paper:#0E1626; --surface:#152036; --ink:#E6ECF5; --ink-2:#A3B1C6; --line:#26344D;
  --blueprint:#7FB0EE; --blueprint-2:#1B2C47; --exam-bar:#173E73;
  --strength:#6CC79A; --strength-bg:#16352A; --grow:#E5B85C; --grow-bg:#3A2E14;
  --error:#F2B8B5; --on-primary:#0E1626; --scrim:rgba(0,0,0,.6);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6}
body.in-exam{background:var(--surface)}
h1,h2,h3{margin:0;line-height:1.25;font-weight:600}
p{margin:0 0 12px}
a{color:var(--blueprint);text-underline-offset:3px}
button,input{font:inherit;color:inherit}
[hidden]{display:none !important}
:focus-visible{outline:3px solid var(--blueprint);outline-offset:2px;border-radius:4px}
.num,table{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:8px;top:-60px;z-index:200;background:var(--surface);color:var(--blueprint);padding:10px 14px;border-radius:8px}
.skip:focus{top:8px}
.muted{color:var(--ink-2)}
.small{font-size:14px}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* ---------- buttons, badges, notices ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 20px;
  border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--blueprint);
  font-size:16px;font-weight:500;text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s,opacity .15s}
.btn:hover{background:var(--blueprint-2);border-color:var(--blueprint)}
.btn.primary{background:var(--blueprint);border-color:var(--blueprint);color:var(--on-primary);font-weight:600}
.btn.primary:hover{opacity:.9}
.btn.large{min-height:52px;padding:0 28px;font-size:18px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.linkbtn{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;
  color:var(--blueprint);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.badge{display:inline-block;padding:1px 10px;border-radius:999px;background:var(--blueprint-2);
  color:var(--blueprint);font-size:14px;font-weight:500;white-space:nowrap}
.badge.ok{background:var(--strength-bg);color:var(--strength)}
.notice{margin:0 0 16px;padding:10px 14px;border-radius:12px;background:var(--blueprint-2);font-size:14px}
.notice.warn{background:var(--grow-bg)}

/* ---------- site chrome ---------- */
.wordmark{font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--ink);text-decoration:none;white-space:nowrap}
.wordmark .dot{color:var(--blueprint)}
/* the site top bar and footer of the app screens use the home page's .lv-top and .lv-foot */
#siteFooter.sitefoot-lv{margin-top:48px;background:transparent}
.page{max-width:720px;margin:0 auto;padding:0 16px 48px}
.sitefoot{max-width:720px;margin:0 auto;padding:20px 16px 32px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.sitefoot p{margin:0}
.loading{padding:48px 0;color:var(--ink-2)}

/* ---------- 5.1 home (design C, measured from the Lovable reference) ----------
   Light only: #home pins the light colours even when the device is in dark mode.
   Container 1152px with 20px side padding, IBM Plex Sans, weights 400/500/600. */
#home,.lv-page{
  /* design C names, kept for the .lv-* rules; they point to the site's one colour set */
  --lv-ink:var(--ink); --lv-muted:var(--ink-2); --lv-blue:var(--blueprint); --lv-on-blue:var(--on-blue); --lv-blue-text:var(--on-blue-2);
  --lv-soft:var(--blueprint-2); --lv-line:var(--line); --lv-radio:var(--line-strong); --lv-green:var(--strength);
  --lv-amber:var(--grow); --lv-amber-bg:var(--grow-bg); --lv-list-bg:var(--paper);
  color-scheme:light;
  background:#FFFFFF; color:var(--lv-ink); font-size:16px; line-height:24px;
}
body.home-view,body.lv-body{background:#FFFFFF}
:is(#home,.lv-page) :focus-visible{outline:3px solid var(--lv-blue);outline-offset:2px;border-radius:6px}
:is(#home,.lv-page) :is(.lv-band,.lv-big,.lv-cta) :focus-visible{outline-color:var(--lv-blue-text)}
:is(#home,.lv-page) :is(h1,h2,h3){font-weight:600;margin:0}
:is(#home,.lv-page) p{margin:0}
:is(#home,.lv-page) svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lv-wrap{max-width:1152px;margin:0 auto;padding:0 20px}

/* blue band: top bar + hero */
.lv-band{background:var(--lv-blue);color:var(--lv-on-blue)}
.lv-top{display:flex;justify-content:space-between;align-items:center;height:56px}
.lv-wordmark{font-size:18px;line-height:28px;font-weight:600;color:var(--lv-on-blue);text-decoration:none}
.lv-wordmark span{color:var(--lv-blue-text)}
.lv-nav{display:flex}
.lv-nav a{display:flex;align-items:center;height:44px;padding:0 12px;font-size:14px;line-height:20px;color:var(--lv-on-blue);text-decoration:none}
.lv-nav a:hover{text-decoration:underline;text-underline-offset:3px}
.lv-hero{padding-top:40px;padding-bottom:96px}
.lv-hero h1{font-size:96px;line-height:100.8px;letter-spacing:-2.4px}
.lv-sub{max-width:672px;margin-top:24px !important;font-size:22px;line-height:32px;color:var(--lv-blue-text)}

/* the white branch card */
.lv-pick{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px;padding:28px;border-radius:20px;background:#FFFFFF;color:var(--lv-ink)}
.lv-pick-left{flex:1;min-width:0;max-width:640px}
.lv-pick-meta{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;line-height:20px;font-weight:500;color:var(--lv-muted)}
.lv-avail{color:var(--lv-green)}
.lv-combo{position:relative;margin-top:4px}
.lv-combo-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:4px 8px;margin-left:-8px;border:0;border-radius:12px;background:transparent;color:var(--lv-ink);font:inherit;text-align:left;cursor:pointer;transition:background-color .15s}
.lv-combo-btn:hover,.lv-combo-btn[aria-expanded="true"]{background:var(--lv-soft)}
.lv-combo-text{min-width:0;display:flex;align-items:baseline;gap:10px}
.lv-combo-name{font-size:28px;line-height:40px;font-weight:600;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lv-combo-code{flex:none;font-size:18px;line-height:28px;color:var(--lv-muted);font-variant-numeric:tabular-nums}
.lv-chev{flex:none;width:20px;height:20px;margin-left:auto;color:var(--lv-muted);transition:transform .15s}
.lv-combo-btn[aria-expanded="true"] .lv-chev{transform:rotate(180deg)}
.lv-listbox{position:absolute;top:calc(100% + 8px);left:-8px;z-index:30;width:calc(100% + 8px);max-height:304px;overflow-y:auto;padding:6px;border:1px solid var(--lv-line);border-radius:16px;background:var(--lv-list-bg);box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}
.lv-group{padding:8px 12px 4px;font-size:12px;line-height:16px;font-weight:500;color:var(--lv-muted)}
.lv-opt{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:10px;cursor:pointer}
.lv-opt .tick{flex:none;width:16px;height:16px;color:var(--lv-blue)}
.lv-opt .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:20px}
.lv-opt .cd{font-size:12px;line-height:16px;color:var(--lv-muted);font-variant-numeric:tabular-nums}
.lv-opt[aria-selected="true"]{background:var(--lv-soft)}
.lv-opt[aria-selected="true"] .nm{font-weight:500}
.lv-opt.active:not([aria-selected="true"]){background:var(--paper)}
.lv-opt[aria-disabled="true"]{cursor:default}
.lv-opt[aria-disabled="true"] .nm{color:var(--lv-muted)}
.lv-pill{flex:none;display:inline-block;padding:2px 8px;border-radius:999px;background:var(--lv-amber-bg);color:var(--lv-amber);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0}
.lv-note{margin-top:8px !important;font-size:14px;line-height:20px;color:var(--lv-muted)}
.lv-link{padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--lv-blue);cursor:pointer}
.lv-link:hover{text-decoration:underline;text-underline-offset:3px}
#home .notify-form label{color:var(--lv-ink)}
.lv-btn,.lv-btn-white{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;border-radius:12px;font-weight:500;text-decoration:none;transition:opacity .15s}
.lv-btn:hover,.lv-btn-white:hover{opacity:.92}
.lv-btn svg,.lv-btn-white svg{width:16px;height:16px}
.lv-btn{height:56px;padding:0 28px;font-size:18px;line-height:28px;background:var(--lv-blue);color:var(--lv-on-blue)}
.lv-btn-white{height:48px;padding:0 20px;font-size:16px;line-height:24px;background:var(--lv-on-blue);color:var(--lv-blue)}
.lv-btn-white.lv-btn-lg{height:56px;padding:0 28px;font-size:18px;line-height:28px}

/* exactly like the real exam */
.lv-exam{background:var(--lv-soft)}
.lv-exam-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:center;padding-top:96px;padding-bottom:96px}
.lv-exam h2{font-size:56px;line-height:60px;letter-spacing:-1.5px}
.lv-stats{display:grid;grid-template-columns:1fr 1fr;gap:32px 24px;margin:40px 0 0}
.lv-stats div{display:flex;flex-direction:column-reverse}
.lv-stats dd{margin:0;font-size:48px;line-height:48px;font-weight:600;color:var(--lv-blue);font-variant-numeric:tabular-nums}
.lv-stats dt{margin-top:4px;color:var(--lv-muted)}
.lv-screen{margin:0;overflow:hidden;border:1px solid var(--lv-line);border-radius:16px;background:#FFFFFF;box-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1)}
.lv-screen-bar{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--lv-blue);color:var(--lv-on-blue);font-size:14px;line-height:20px;font-weight:500}
.lv-clock{display:flex;align-items:center;gap:6px;font-weight:600;font-variant-numeric:tabular-nums}
.lv-clock svg{width:16px;height:16px}
.lv-screen-meta{display:flex;justify-content:space-between;padding:8px 16px;border-bottom:1px solid var(--lv-line);font-size:12px;line-height:16px;color:var(--lv-muted)}
.lv-screen-body{padding:16px}
.lv-q{font-size:14px;line-height:20px;font-weight:500}
.lv-q span{color:var(--lv-muted)}
.lv-screen ul{list-style:none;margin:12px 0 0;padding:0}
.lv-screen li{display:flex;align-items:center;gap:12px;margin-bottom:8px;padding:8px 12px;border:1px solid var(--lv-line);border-radius:10px;font-size:14px;line-height:20px}
.lv-screen li:last-child{margin-bottom:0}
.lv-screen li.sel{background:var(--lv-soft);border-color:var(--lv-blue)}
.lv-radio{flex:none;display:grid;place-items:center;width:16px;height:16px;border:2px solid var(--lv-radio);border-radius:50%}
.lv-screen li.sel .lv-radio{border-color:var(--lv-blue)}
.lv-radio span{width:8px;height:8px;border-radius:50%;background:var(--lv-blue)}

/* how it works */
.lv-how{padding-top:96px;padding-bottom:96px}
.lv-how h2,.lv-get h2{font-size:48px;line-height:48px;letter-spacing:-1.2px}
.lv-how ol{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:40px 0 0;padding:0}
.lv-how li{padding-top:20px;border-top:4px solid var(--lv-blue)}
.lv-how li > span{display:block;font-size:48px;line-height:48px;font-weight:600;color:var(--lv-blue)}
.lv-how h3{margin-top:12px !important;font-size:22px;line-height:28px}
.lv-how li p{margin-top:4px !important;color:var(--lv-muted)}

/* what you get */
.lv-get{padding-bottom:96px}
.lv-bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.lv-big{grid-column:span 2;grid-row:span 2;padding:40px;border-radius:20px;background:var(--lv-blue);color:var(--lv-on-blue)}
.lv-k{font-size:14px;line-height:20px;font-weight:500;color:var(--lv-blue-text)}
.lv-big h3{margin-top:8px !important;font-size:48px;line-height:48px}
.lv-big p:not(.lv-k){max-width:448px;margin-top:16px !important;font-size:18px;line-height:28px;color:var(--lv-blue-text)}
.lv-big .lv-btn-white{margin-top:32px}
.lv-card{padding:24px;border:1px solid var(--lv-line);border-radius:20px}
.lv-card h3{display:flex;align-items:center;gap:8px;font-size:18px;line-height:28px}
.lv-card p{margin-top:4px !important;font-size:14px;line-height:20px;color:var(--lv-muted)}
.lv-card p.lv-num{margin-top:0 !important;font-size:28px;line-height:36px;font-weight:600;color:var(--lv-blue)}

/* questions before you start */
.lv-faq{padding-bottom:96px}
.lv-faq-grid{display:grid;grid-template-columns:1fr 2fr;gap:32px}
.lv-faq h2{font-size:36px;line-height:40px;letter-spacing:-.9px}
.lv-faq-all{display:inline-flex;align-items:center;min-height:44px;margin-top:12px;font-size:16px;font-weight:500;color:var(--lv-blue);text-decoration:none}
.lv-faq-all:hover{text-decoration:underline;text-underline-offset:3px}
.lv-faq-list{border-top:1px solid var(--line-soft)}
.lv-faq-list details{border-bottom:1px solid var(--line-soft)}
.lv-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 4px;font-size:18px;line-height:26px;font-weight:500;cursor:pointer;list-style:none}
.lv-faq-list summary::-webkit-details-marker{display:none}
.lv-faq-list summary:hover{color:var(--lv-blue)}
.lv-faq-chev{flex:none;width:20px;height:20px;color:var(--lv-muted);transition:transform .15s}
.lv-faq-list details[open] .lv-faq-chev{transform:rotate(180deg)}
.lv-faq-list details p{margin:0 0 18px !important;padding:0 36px 0 4px;font-size:16px;line-height:26px;color:var(--lv-muted)}

/* free resources */
.lv-res{border-top:1px solid var(--lv-line)}
.lv-res-grid{display:grid;grid-template-columns:1fr 2fr;gap:32px;padding-top:96px;padding-bottom:96px}
.lv-res h2{font-size:36px;line-height:40px;letter-spacing:-.9px}
.lv-res-links{display:flex;flex-direction:column;margin-top:16px}
.lv-res-links a{display:flex;align-items:center;height:44px;font-size:18px;line-height:28px;font-weight:500;color:var(--lv-blue);text-decoration:none}
.lv-res-links a:hover{text-decoration:underline;text-underline-offset:3px}
.lv-res h3{font-size:14px;line-height:20px;font-weight:500;color:var(--lv-muted)}
.lv-chapters{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;margin:8px 0 0;padding:0}
.lv-chapters li{border-bottom:1px solid var(--lv-line)}
.lv-chapters a{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 0;font-size:14px;line-height:20px;color:var(--lv-ink);text-decoration:none}
.lv-chapters a:hover{color:var(--lv-blue)}
.lv-chapters span{flex:none;width:24px;color:var(--lv-muted);font-variant-numeric:tabular-nums}

/* final call */
.lv-cta{background:var(--lv-blue);color:var(--lv-on-blue)}
.lv-cta .lv-wrap{padding-top:96px;padding-bottom:96px}
.lv-cta h2{font-size:72px;line-height:90px;letter-spacing:-1.8px}
.lv-cta .lv-btn-white{margin-top:32px}

/* footer */
.lv-foot{border-top:1px solid var(--lv-line)}
.lv-foot-in{display:flex;justify-content:space-between;gap:16px;padding-top:32px;padding-bottom:32px;font-size:14px;line-height:20px;color:var(--lv-muted)}
.lv-foot-in > div{max-width:448px}
.lv-foot-mark{font-size:16px;line-height:24px;font-weight:600;letter-spacing:-.4px;color:var(--lv-ink);text-decoration:none}
.lv-foot-mark span{color:var(--lv-blue)}
.lv-foot-in p{margin-top:8px !important}
.lv-foot-in nav{display:flex;gap:4px;align-self:center}
.lv-foot-in nav a{display:flex;align-items:center;height:44px;padding:0 8px;color:var(--lv-muted);text-decoration:none}
.lv-foot-in nav a:hover{color:var(--lv-ink)}

/* desktop first for now; narrow screens only need to stay usable */
@media (max-width:900px){
  .lv-hero h1{font-size:56px;line-height:60px;letter-spacing:-1.4px}
  .lv-pick{flex-direction:column;align-items:stretch}
  .lv-combo-name{font-size:22px;line-height:30px}
  .lv-exam-grid,.lv-res-grid,.lv-faq-grid{grid-template-columns:1fr}
  .lv-how ol,.lv-bento,.lv-chapters{grid-template-columns:1fr}
  .lv-big{grid-column:auto;grid-row:auto}
  .lv-exam h2,.lv-cta h2{font-size:36px;line-height:46px}
  .lv-foot-in{flex-direction:column}
}

/* "Get notified" form (home page and /notes/) */
.notify{font-size:14px}
.notify-form label{display:block;margin:8px 0 4px;font-weight:500;color:var(--ink)}
.notify-row{display:flex;gap:8px;max-width:420px}
.notify-row input{flex:1;min-width:0;min-height:44px;padding:0 12px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink)}
.notify-form select{width:100%;max-width:420px;min-height:44px;margin-bottom:4px;padding:0 10px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink);font:inherit}
.notify-row .btn{border-radius:12px}
.notify-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.notify-note{max-width:420px;margin:8px 0 0 !important;font-size:12px;line-height:18px;color:var(--ink-2)}
.notify .field-error{margin:6px 0 0;font-size:14px;color:var(--error)}
.notify-done{margin:10px 0 0;color:var(--strength);font-weight:500}
.field-error{margin:6px 0 0;color:var(--error)}

/* ---------- 5.2 branch home ---------- */
  background:var(--surface);border:1px solid var(--line);border-radius:10px;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color .15s,border-color .15s}
.back{margin:8px 0 0;font-size:14px}
.lock{flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- 5.3 test screen ---------- */
.exambar{position:sticky;top:0;z-index:50;background:var(--exam-bar);color:#fff}
.exambar :focus-visible{outline-color:#fff}
.exambar .in{max-width:1150px;margin:0 auto;min-height:72px;padding:8px 12px;display:flex;align-items:center;gap:16px}
/* left: who and what, plus the Questions tool (and Full screen, shown only after Esc) */
.ex-left{min-width:0;display:flex;flex-direction:column;gap:2px}
.ex-name{display:none;align-items:center;gap:12px}
.ex-left .wordmark{font-size:16px;color:#fff}
.ex-left .wordmark .dot{color:var(--on-blue-2)}
.ex-sep{width:1px;height:18px;background:rgba(255,255,255,.45)}
.ex-title{font-size:18px;font-weight:600}
.ex-branch{display:none;margin:0;font-size:14px;color:var(--on-blue-2)}
.answered{margin:0;font-size:14px;font-variant-numeric:tabular-nums;color:var(--on-blue-2)}
/* right: time and progress (as on the real exam), then the photo */
.ex-right{flex:none;margin-left:auto;display:flex;align-items:center;gap:12px}
.timerbox{text-align:right}
.timer{font-size:18px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;line-height:1.2}
.late-dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#F2C46B;vertical-align:middle}
/* the timer is the one thing to read at a glance: a small label above it, the answered count below, both quiet */
.remain{display:none;font-size:12px;line-height:16px;white-space:nowrap;color:var(--on-blue-2)}
.ex-tools{display:flex;gap:6px;margin-top:4px}
.ex-tool{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border:0;border-radius:6px;background:rgba(255,255,255,.14);color:#fff;font-size:14px;font-weight:500;cursor:pointer;transition:background-color .15s}
.ex-tool:hover{background:rgba(255,255,255,.24)}
.ex-tool svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ex-tool[hidden]{display:none}
.photo{flex:none;width:48px;height:56px;padding:0;border:0;border-radius:4px;background:var(--tint);overflow:hidden;cursor:pointer;display:grid;place-items:center}
.photo img{width:100%;height:100%;object-fit:cover}
.photo svg{width:34px;height:34px;fill:var(--line-strong)}

.exam{max-width:860px;margin:0 auto;padding:8px 16px 32px}
.q{padding:20px 0;scroll-margin-top:124px}
.qtext{margin:0 0 10px;font-size:16px;font-weight:500;line-height:1.5}
.tag{display:block;margin-top:4px;font-size:14px;font-weight:400;color:var(--ink-2)}
.opt{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin-top:4px;padding:9px 12px;border:1px solid transparent;border-radius:8px;cursor:pointer;
  transition:background-color .15s,border-color .15s}
.opt input{flex:none;width:18px;height:18px;margin:3px 0 0;accent-color:var(--blueprint)}
.opt.locked{cursor:default}
.opt.locked:hover{background:transparent}
.opt.correct,.opt.correct:hover{background:var(--strength-bg);border-color:var(--strength)}
.opt.chosen,.opt.chosen:hover{background:var(--grow-bg);border-color:var(--grow)}
.opt .mark-label{margin-left:auto;flex:none;font-size:14px;font-weight:500}
.opt.correct .mark-label{color:var(--strength)}
.opt.chosen .mark-label{color:var(--grow)}
.explain{margin-top:12px;padding:10px 14px;border-left:3px solid var(--blueprint);border-radius:0 8px 8px 0;background:var(--blueprint-2)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:24px 0 8px}
.pageinfo{font-size:14px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.totop{margin:4px 0 0;text-align:center;font-size:14px}

/* question navigator (inside a modal) */
.legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin:8px 0 16px;font-size:14px;color:var(--ink-2)}
.legend b{margin-left:2px;color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}
.key{display:inline-block;width:14px;height:14px;margin-right:6px;border:1px solid var(--line-strong);border-radius:4px;vertical-align:-2px}
.key.ans{background:var(--blueprint);border-color:var(--blueprint)}
/* Questions popup: one group per page, ten numbers to a row */
.qpage{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;align-items:start;padding:10px 0}
.qpage + .qpage{border-top:1px solid var(--line-soft)}
.qpage h3{padding-top:6px;font-size:14px;line-height:20px;font-weight:600}
.qpage h3 span{display:block;font-size:12px;line-height:18px;font-weight:400;color:var(--ink-2)}
.qpage.cur h3,.qpage.cur h3 span{color:var(--blueprint)}
.qgrid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
@media (max-width:560px){.qpage{grid-template-columns:1fr;gap:6px}.qgrid{grid-template-columns:repeat(auto-fill,minmax(44px,1fr))}}
.qgrid button{min-height:44px;padding:0;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink-2);font-size:14px;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .15s}
.qgrid button:hover{border-color:var(--blueprint)}
.qgrid button.ans{background:var(--blueprint);border-color:var(--blueprint);color:var(--on-primary);font-weight:600}
.shortcuts{margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.shortcuts b{color:var(--ink);font-weight:500}

/* ---------- 5.4 result ---------- */
.summary{margin:16px 0 4px;font-size:18px}
.subrow td{font-size:14px;color:var(--ink-2)}
.subrow td:first-child{padding-left:28px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:32px}

/* ---------- 5.5 practice ---------- */

/* ---------- modal (paywall, submit confirmation, question navigator) ---------- */
.overlay{position:fixed;inset:0;z-index:100;display:grid;grid-template-columns:minmax(0,440px);justify-content:center;align-content:center;padding:16px;background:var(--scrim);overflow:auto}
.overlay.wide{grid-template-columns:minmax(0,680px)}
.modal{position:relative;max-height:calc(100vh - 32px);padding:28px 28px 24px;overflow:auto;background:var(--surface);border:0;border-radius:20px;box-shadow:0 20px 40px -12px rgba(18,27,41,.28)}
.modal h2{font-size:22px}
.modal label{display:block;margin-bottom:4px;font-size:14px;font-weight:500}
.modal :is(input[type="text"],input[type="email"]){width:100%;min-width:0;min-height:48px;padding:0 14px;border:1px solid var(--line-strong);border-radius:12px;background:var(--surface);color:var(--ink)}
.msg{min-height:22px;margin:6px 0 0;font-size:14px}
.msg.ok{color:var(--strength)}
.msg.err{color:var(--error)}
.modal-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.modal-actions .btn{flex:1 1 130px;min-height:48px;border-radius:12px;font-weight:500}

/* ---------- wider screens ---------- */
@media (min-width:600px){
  .modal{padding:28px}
}
@media (min-width:720px){
}
@media (min-width:800px){
  .exambar .in{padding:12px 16px;min-height:112px}
  .ex-name{display:flex}
  .ex-branch{display:block}
  .ex-left{gap:4px}
  .answered{font-size:14px}
  .ex-right{gap:20px}
  .timer{font-size:36px;line-height:40px;letter-spacing:-.5px}
  .remain{display:block}
  .photo{width:68px;height:84px}
  .photo svg{width:42px;height:42px}
}

/* ---------- classic branch home ----------
   The first live site's font, colours and tile layout, used on the branch home only
   (body.classic is set by js/app.js while that screen is shown). Light only. */
body.classic{
  --paper:#FFFFFF;
  color-scheme:light;
}
body.classic h1,body.classic h2,body.classic h3{font-weight:600}
body.classic .btn{border-radius:4px}
.classic-head{background:var(--blueprint);color:#fff}
.classic-head .in{max-width:1150px;margin:0 auto;padding:18px 16px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px}
.classic-head .brand{display:flex;align-items:center;gap:14px;min-width:0}
.classic-head .logo{flex:none;width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center}
.classic-head h1{font-size:22px;font-weight:600;color:#fff}
.classic-head p{margin:2px 0 6px;font-size:14px}
.planbadge{display:inline-block;border:0;color:inherit;font-family:inherit;padding:2px 12px;border-radius:999px;background:rgba(255,255,255,.2);font-size:14px}
.classic-head .change{margin-left:10px;color:#fff;font-size:14px;display:inline-block;padding:11px 0}
.classic-head .right{display:flex;align-items:center;gap:16px;margin-left:auto}
/* the candidate's progress on the right of the header (no timer: no test is running here) */
.cprog{text-align:right}
.cprog-l{font-size:14px;opacity:.85}
.cprog-big{font-size:28px;font-weight:600;line-height:1.15;font-variant-numeric:tabular-nums}
.cprog-big span{font-size:16px;font-weight:400;opacity:.85}
.cprog-note{margin-top:2px;font-size:14px;opacity:.85}
/* once a mock test reaches the pass mark: a light pill, readable on the blue header */
.cprog-pass{display:inline-block;margin-left:4px;padding:0 8px;border-radius:999px;background:var(--strength-bg);color:var(--strength);font-size:12px;line-height:18px;font-weight:600}
.cphoto-wrap{display:flex;flex-direction:column;align-items:center;gap:4px}
.cphoto-cap{font-size:12px;opacity:.85}
.cphoto{flex:none;width:64px;height:76px;padding:0;border:0;border-radius:4px;background:var(--tint);overflow:hidden;display:grid;place-items:center;cursor:pointer}
.cphoto img{width:100%;height:100%;object-fit:cover}
.dash{max-width:1150px;margin:0 auto;padding:28px 16px 40px}
.dash h2{font-size:22px;color:var(--blueprint)}
.dash h2.section{margin-top:36px}
.dash .sub{margin:6px 0 16px;font-size:16px;color:var(--ink)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.tile{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;width:100%;min-height:150px;padding:18px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);text-align:left;text-decoration:none;font-family:inherit}
.tile h3{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:0 0 8px;font-size:18px;color:var(--blueprint)}
.tile .meta{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.tile .btn{width:100%;margin-top:14px}
.tile.locked{background:var(--paper);cursor:pointer}
.tile.locked h3{color:var(--ink-2);justify-content:flex-start}
.tile.locked:hover{border-color:var(--blueprint)}
.tile.done{background:var(--strength-wash)}
.tile.soon h3{color:var(--ink-2)}
.pill{flex:none;padding:2px 9px;border-radius:999px;background:var(--blueprint-2);color:var(--blueprint);font-size:12px;font-weight:700;letter-spacing:.02em}
.pill.free{background:var(--strength-bg);color:var(--strength)}
.tile.next{background:var(--blueprint-2);border:2px solid var(--blueprint);padding:17px}
.upnext{display:inline-block;margin-bottom:6px;font-size:12px;font-weight:700;color:var(--blueprint);letter-spacing:.02em}
.result-line{display:flex;align-items:center;gap:6px;margin:0;font-size:14px;font-weight:600;color:var(--ink-2)}
.result-line.pass{color:var(--strength)}
.result-line svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.tile .score{display:flex;align-items:baseline;gap:6px;margin:4px 0 0;font-variant-numeric:tabular-nums}
.tile .score b{font-size:36px;line-height:1.1;color:var(--blueprint)}
.tile .score span{font-size:16px;color:var(--ink-2)}
.rules{margin-top:32px;padding:14px 16px;border:1px solid var(--line);border-radius:6px;background:var(--paper);font-size:14px}
.rules ul{margin:6px 0 0;padding-left:20px}
@media (max-width:520px){
  .classic-head h1{font-size:18px}
  .classic-head .logo{width:44px;height:44px}
  .cprog-big{font-size:22px}
  .cphoto{width:48px;height:56px}
  .dash h2{font-size:22px}
}

/* ---------- 5.4 result, in the home page's style ----------
   Content and order as before (the "Exam score(s)" table mirrors the real exam). Ideas kept from
   the Lovable /c/result reference: the mark large in the table, strengths and room to grow as
   scannable rows with the score on the right, score bars beside the score, chapters that open
   to their subtopics, and a quiet (not primary) unlock button. Fewer boxes than the reference. */
.rs{padding:48px 0 0;background:transparent}
.rs-demo{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:32px;padding:4px;border:1px dashed var(--lv-line);border-radius:12px;font-size:14px;line-height:20px}
.rs-demo span{padding:0 8px;color:var(--lv-muted)}
.rs-demo button{min-height:36px;padding:0 12px;border:0;border-radius:8px;background:none;font:inherit;color:var(--lv-ink);cursor:pointer}
.rs-demo button[aria-pressed="true"]{background:var(--lv-soft);color:var(--lv-blue);font-weight:500}
.rs-cheer{font-size:16px;line-height:24px;font-weight:500;color:var(--lv-blue)}
.rs-title{margin-top:4px !important;font-size:36px;line-height:44px;letter-spacing:-.9px}
.rs-table{width:100%;margin-top:24px;border-collapse:separate;border-spacing:0;border:1px solid var(--lv-line);border-radius:12px;overflow:hidden}
.rs-table th,.rs-table td{padding:12px 20px;text-align:left}
.rs-table th{background:var(--tint);font-size:14px;line-height:20px;font-weight:500;color:var(--lv-muted)}
.rs-table td{border-top:1px solid var(--lv-line);font-size:16px;line-height:24px;vertical-align:middle}
.rs-table .rs-mark{width:1%;text-align:right;white-space:nowrap}
.rs-table td.rs-mark{font-size:28px;line-height:36px;font-weight:600}
.rs-summary{margin-top:20px !important;font-size:18px;line-height:28px}
.rs-summary b{font-weight:600}
.rs-verdict{display:inline-block;margin-left:6px;padding:2px 12px;border-radius:999px;background:var(--lv-amber-bg);color:var(--lv-amber);font-size:16px;line-height:24px;font-weight:600}
.rs-verdict.pass{background:var(--strength-bg);color:var(--lv-green)}
.rs-note{margin-top:8px !important;font-size:14px;line-height:20px;color:var(--lv-muted)}
.rs-time{display:flex;align-items:center;gap:8px}
.rs-time svg{flex:none;width:16px;height:16px}
.rs-group{margin-top:48px}
.rs-group h2{display:flex;align-items:center;gap:8px;font-size:22px;line-height:30px;letter-spacing:-.4px}
.rs-group h2 svg{flex:none;width:20px;height:20px}
.rs-s h2{color:var(--lv-green)}
.rs-g h2{color:var(--lv-amber)}
.rs-hint{margin-top:4px !important;font-size:14px;line-height:20px;color:var(--lv-muted)}
.rs-list{list-style:none;margin:12px 0 0;padding:0;border-top:1px solid var(--lv-line)}
.rs-list li{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0 12px 16px;border-bottom:1px solid var(--lv-line);border-left:3px solid}
.rs-s .rs-list li{border-left-color:var(--lv-green)}
.rs-g .rs-list li{border-left-color:var(--lv-amber)}
.rs-name{font-size:16px;line-height:24px;font-weight:500}
.rs-chno{display:block;font-size:12px;line-height:16px;font-weight:400;color:var(--lv-muted)}
.rs-score{flex:none;font-weight:600;font-variant-numeric:tabular-nums}
.rs-s .rs-score{color:var(--lv-green)}
.rs-g .rs-score{color:var(--lv-amber)}
.rs-ins-head{display:flex;justify-content:space-between;margin-top:16px;padding:0 0 8px;border-bottom:1px solid var(--lv-line);font-size:12px;line-height:16px;font-weight:500;color:var(--lv-muted)}
.rs-ins summary,.rs-row,.rs-subs li{display:flex;align-items:center;gap:16px;font-variant-numeric:tabular-nums}
.rs-ins summary,.rs-row{min-height:52px;padding:8px 0;border-bottom:1px solid var(--lv-line);font-size:16px;line-height:24px}
.rs-ins summary{cursor:pointer;list-style:none}
.rs-ins summary::-webkit-details-marker{display:none}
.rs-ins summary:hover .rs-t{color:var(--lv-blue)}
.rs-t{flex:1;display:flex;min-width:0}
.rs-n{flex:none;min-width:32px;color:var(--lv-muted)}
.rs-bar{flex:none;width:96px;height:6px;border-radius:3px;background:var(--track);overflow:hidden}
.rs-bar span{display:block;height:100%;background:var(--lv-blue)}
.rs-sc{flex:none;min-width:40px;text-align:right;font-weight:600}
.rs-chev{flex:none;width:18px;height:18px;color:var(--lv-muted);transition:transform .15s}
.rs-ins details[open] .rs-chev{transform:rotate(180deg)}
.rs-row{padding-right:34px}
.rs-subs{list-style:none;margin:0;padding:4px 34px 12px 32px;border-bottom:1px solid var(--lv-line)}
.rs-subs li{padding:8px 0;font-size:14px;line-height:20px;color:var(--lv-muted)}
.rs-subs li + li{border-top:1px solid var(--line-soft)}
.rs-subs .rs-n{min-width:36px}
.rs-subs .rs-bar{width:80px}
.rs-subs .rs-bar span{background:var(--blueprint);opacity:.6}
.rs-subs .rs-sc{color:var(--lv-ink);font-weight:500}
.rs-lock{position:relative}
.rs-blur{filter:blur(5px);opacity:.7;pointer-events:none;user-select:none;max-height:320px;overflow:hidden}
.rs-lockover{position:absolute;inset:0;display:grid;place-items:center}
.rs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border:1px solid var(--lv-line);border-radius:12px;background:#FFFFFF;color:var(--lv-blue);font:inherit;font-weight:500;cursor:pointer;transition:background-color .15s,border-color .15s}
.rs-btn:hover{border-color:var(--line-strong);background:var(--paper)}
.rs-btn svg{flex:none;width:16px;height:16px}
.rs-btn.primary{border-color:var(--lv-blue);background:var(--lv-blue);color:var(--lv-on-blue)}
.rs-btn.primary:hover{opacity:.92}
.rs-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:32px;border-top:1px solid var(--lv-line)}
.rs-more{margin-top:12px !important}
.rs-more .lv-link{display:inline-flex;align-items:center;gap:8px;min-height:44px}
.rs-more svg{width:16px;height:16px}
/* the result and practice screens have a white top bar, so the eye goes to the score or the question */
body.rs-whitebar #topBar{background:#FFFFFF;border-bottom:1px solid var(--lv-line)}
body.rs-whitebar #topBar .lv-wordmark{color:var(--lv-ink)}
body.rs-whitebar #topBar .lv-wordmark span{color:var(--lv-blue)}
body.rs-whitebar #topBar .lv-nav a{color:var(--lv-muted)}
body.rs-whitebar #topBar .lv-nav a:hover{color:var(--lv-ink)}

/* ---------- 5.5 chapter practice, in the home page's style ----------
   From the Lovable /c/practice reference: one question, progress bar, radio rows like the test
   screen, feedback like the chapter pages. Fewer lines than the reference, grey subtopic tag as
   on the chapter pages, and a large score on "Practice complete". */
.pr{padding:12px 0 0;background:transparent}
.pr-back .lv-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;line-height:20px;font-weight:400;color:var(--lv-muted)}
.pr-back .lv-link:hover{color:var(--lv-ink)}
.pr-back svg{width:16px;height:16px}
.pr-title{margin-top:4px !important;font-size:22px;line-height:32px;letter-spacing:-.5px}
.pr-progress{display:flex;align-items:center;gap:16px;margin-top:12px}
.pr-count{flex:none;font-size:14px;line-height:20px;color:var(--lv-muted);font-variant-numeric:tabular-nums}
.pr-track{flex:1;height:4px;border-radius:2px;background:var(--track);overflow:hidden}
.pr-track span{display:block;height:100%;background:var(--lv-blue);transition:width .15s}
.pr-q{margin-top:28px}
.pr-tag{display:inline-block;padding:4px 10px;border-radius:10px;background:var(--tint);font-size:12px;line-height:16px;color:var(--lv-muted)}
.pr-qtext{margin-top:12px !important;font-size:18px;line-height:30px;font-weight:500}
.pr-opts{display:grid;gap:8px;margin-top:16px}
.pr-opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:11px 16px;border:1px solid var(--lv-line);border-radius:12px;font-size:16px;line-height:24px;cursor:pointer;transition:background-color .15s,border-color .15s}
.pr-opt:hover{border-color:var(--line-strong)}
.pr-opt input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--lv-blue)}
.pr-l{flex:none;font-weight:500;color:var(--lv-muted)}
.pr-t{flex:1;min-width:0}
.pr-mark{flex:none;display:inline-flex;align-items:center;gap:4px;font-size:14px;line-height:20px;font-weight:500}
.pr-mark svg{width:16px;height:16px}
.pr-opt:has(input:disabled){cursor:default}
.pr-opt:has(input:disabled):hover{border-color:var(--lv-line)}
.pr-opt.is-right,.pr-opt.is-right:hover{background:var(--strength-bg);border-color:var(--lv-green)}
.pr-opt.is-right :is(.pr-l,.pr-mark){color:var(--lv-green)}
.pr-opt.is-chosen,.pr-opt.is-chosen:hover{background:var(--grow-bg);border-color:var(--grow)}
.pr-opt.is-chosen :is(.pr-l,.pr-mark){color:var(--lv-amber)}
.pr-fb{flex:1;min-width:0;padding-left:16px;border-left:2px solid;font-size:16px;line-height:24px;color:var(--lv-muted)}
.pr-fb.ok{border-color:var(--lv-green)}
.pr-fb.no{border-color:var(--lv-amber)}
.pr-verdict{font-weight:600}
.pr-fb.ok .pr-verdict{color:var(--lv-green)}
.pr-fb.no .pr-verdict{color:var(--lv-amber)}
.pr-fb p + p{margin-top:2px !important}
/* the explanation and Next share one row, so a whole question fits on a laptop screen */
.pr-foot{display:flex;align-items:center;gap:24px;margin-top:20px}
.pr-foot .rs-btn{flex:none;margin-left:auto}
.rs-btn:disabled{opacity:.45;cursor:not-allowed}
.pr-done{padding-top:64px}
.pr-done .pr-title{margin-top:0 !important;font-size:36px;line-height:44px;letter-spacing:-.9px}
.pr-score{margin-top:24px !important;font-size:22px;line-height:28px;color:var(--lv-muted);font-variant-numeric:tabular-nums}
.pr-score b{font-size:56px;line-height:56px;font-weight:600;letter-spacing:-1.4px;color:var(--lv-ink)}
.pr-sum{margin-top:12px !important;font-size:18px;line-height:28px}
.pr-done .rs-actions{margin-top:32px}

/* ---------- review answers, in the home page's style ----------
   From the Lovable /c/review reference: filter with counts and "Back to score" stuck to the top,
   status pill, options and explanation like chapter practice (.pr-opt, .pr-fb), slimmer rows
   because nothing is chosen here. */
.rv{padding:32px 0 0;background:transparent}
.rv-title{font-size:36px;line-height:44px;letter-spacing:-.9px}
.rv-sub{margin-top:8px !important;font-size:16px;line-height:24px;color:var(--ink-2)}
/* filters on the left, Back to score on the right: one compact row that stays at the top */
.rv-bar{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-top:20px;padding:8px 0;border-bottom:1px solid var(--line);background:var(--surface)}
.rv-bar .pr-back{order:2}
.rv-filters{display:flex;flex-wrap:wrap;gap:8px}
.rv-filters button{min-height:44px;padding:0 16px;border:1px solid transparent;border-radius:999px;background:none;font:inherit;font-size:14px;line-height:20px;color:var(--ink-2);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color .15s,color .15s}
.rv-filters button:hover:not(:disabled){background:var(--paper);color:var(--ink)}
.rv-filters button[aria-pressed="true"]{background:var(--blueprint-2);color:var(--blueprint);font-weight:500}
.rv-filters button:disabled{opacity:.45;cursor:not-allowed}
.rv-q{padding:28px 0;border-bottom:1px solid var(--line-soft);scroll-margin-top:120px}
.rv-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.rv-n{font-size:16px;line-height:24px;font-weight:600;font-variant-numeric:tabular-nums}
.rv-pill{padding:2px 10px;border-radius:999px;font-size:12px;line-height:18px;font-weight:600}
.rv-pill.right{background:var(--strength-bg);color:var(--strength)}
.rv-pill.wrong{background:var(--grow-bg);color:var(--grow)}
.rv-pill.none{background:var(--tint);color:var(--ink-2)}
.rv-meta .pr-tag{margin-left:auto}
.rv-qtext{margin-top:12px !important;font-size:18px;line-height:28px;font-weight:500}
.rv .pr-opts{gap:6px;margin-top:14px}
.rv-opt{min-height:44px;padding:9px 16px;cursor:default}
.rv-opt:hover{border-color:var(--line)}
.rv .pr-fb{margin-top:14px}
.pr-fb.na{border-color:var(--line-strong)}
.pr-fb b{font-weight:600;color:var(--ink)}
.rv-empty{padding:48px 0;color:var(--ink-2);text-align:center}
.rv .rs-actions{margin-top:32px;border-top:0;padding-top:0}
/* on a phone the filter wraps to two rows; it scrolls away there instead of covering the list */
@media (max-width:600px){.rv-bar{position:static}}
/* review is a long list read later, so the right and chosen options get a lighter tint than in
   practice (where the feedback comes the moment an answer is chosen); border and label stay */
.rv .pr-opt.is-right{background:color-mix(in srgb,var(--strength-bg) 45%,var(--surface))}
.rv .pr-opt.is-chosen{background:color-mix(in srgb,var(--grow-bg) 45%,var(--surface))}

/* ---------- Exam Pass popup, in the home page's style ---------- */
.pw-x{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:none;color:var(--ink-2);cursor:pointer}
.pw-x:hover{background:var(--paper);color:var(--ink)}
.pw-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.pw-title{font-size:22px;line-height:30px;padding-right:40px}
.pw-price{display:flex;align-items:center;gap:12px;margin:12px 0 0;font-variant-numeric:tabular-nums}
.pw-price b{font-size:36px;line-height:44px;font-weight:600;letter-spacing:-.9px}
.pw-soon{padding:2px 10px;border-radius:999px;background:var(--grow-bg);color:var(--grow);font-size:12px;line-height:18px;font-weight:600}
.pw-note{margin:4px 0 0;font-size:14px;line-height:20px;color:var(--ink-2)}
.pw-list{list-style:none;margin:20px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.pw-list li{display:flex;align-items:flex-start;gap:10px;font-size:16px;line-height:24px}
.pw-list li + li{margin-top:10px}
.pw-list svg{flex:none;width:18px;height:18px;margin-top:3px;fill:none;stroke:var(--strength);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.pw-info{margin:20px 0 0;padding-left:14px;border-left:2px solid var(--line-strong);font-size:14px;line-height:22px;color:var(--ink-2)}
.pw-info b{color:var(--ink);font-weight:600}

/* with a mouse the question numbers can be shorter (touch screens keep 44px) */
@media (pointer:fine){.qgrid button{min-height:36px}}

/* ---------- Submit popup ---------- */
.sb-counts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.sb-counts p{margin:0;padding:14px 16px;border-radius:12px;background:var(--paper)}
.sb-counts b{display:block;font-size:28px;line-height:36px;font-weight:600;font-variant-numeric:tabular-nums}
.sb-counts span{font-size:14px;line-height:20px;color:var(--ink-2)}
.sb-counts p.open{background:var(--grow-bg)}
.sb-counts p.open :is(b,span){color:var(--grow)}
.sb-note{margin:16px 0 0;font-size:16px;line-height:24px;color:var(--ink-2)}

/* ---------- "The questions did not load" ---------- */
.er{padding-top:64px;padding-bottom:32px}
.er-text{margin-top:12px !important;font-size:18px;line-height:28px;color:var(--ink-2)}
.er-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:28px}
.er-actions .lv-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}

/* ---------- phones (up to 600px wide) ----------
   One place for the small-screen layout of every app screen. */
@media (max-width:600px){
  /* test header: Questions on the left, timer and photo on the right, the answered count on its
     own line below (the timer box and the right group dissolve into the header row) */
  .exambar .in{flex-wrap:wrap;row-gap:2px;min-height:0;padding:8px 16px}
  .ex-right,.timerbox{display:contents}
  .ex-left{order:1}
  .ex-tools{margin-top:0}
  .ex-tool{white-space:nowrap}
  /* Full screen shows on iPhones (no full-screen support there): icon only, so the row fits */
  #fsBtn{font-size:0;gap:0;padding:0 10px}
  #fsBtn svg{width:16px;height:16px}
  .timer{order:2;margin-left:auto;font-size:22px}
  .photo{order:3;width:36px;height:44px}
  .photo svg{width:26px;height:26px}
  .answered{order:4;flex-basis:100%;font-size:14px}

  /* site top bar on app screens: one line, no wrapping words; the guide link waits for wider screens */
  #topBar .lv-wordmark{white-space:nowrap}
  #topBar .lv-nav a{padding:0 8px;white-space:nowrap}
  #topBar .lv-nav a[href="/guide/"]{display:none}

  /* home: the long branch name may take two lines instead of being cut */
  .lv-combo-name{white-space:normal;overflow:visible}
  .lv-stats dd{font-size:36px;line-height:40px}

  /* branch home: two compact tiles to a row instead of one tall tile */
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tile{min-height:0;padding:14px}
  .tile.next{padding:13px}
  .tile h3{font-size:16px;flex-wrap:wrap}
  .tile .meta{font-size:14px}
  .tile .score b{font-size:28px}

  /* practice and review: "Correct answer" / "Your answer" sits under the option text, so the
     text keeps the full width; in practice the explanation comes first, then a full-width Next */
  .pr-opt{flex-wrap:wrap;row-gap:2px}
  .pr-mark{flex-basis:100%;padding-left:58px}
  .pr-foot{flex-direction:column;align-items:stretch;gap:16px}
  .pr-foot .rs-btn{margin-left:0}
  .pr-qtext{font-size:18px;line-height:28px}

  /* review: the filter stays one row and scrolls sideways */
  .rv-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .rv-filters::-webkit-scrollbar{display:none}
  .rv-filters button{flex:none;white-space:nowrap}
  .rv-meta .pr-tag{margin-left:0}

  /* result: the summary pill and chapter rows keep breathing room */
  .rs-title,.rv-title{font-size:28px;line-height:36px}
  .rs-actions{flex-direction:column;align-items:stretch}
  .rs-actions .rs-btn{width:100%}
}

/* ---------- Exam Pass popup: offer, pay, waiting, code (section 5.7 in js/app.js) ---------- */
/* the badge looks small, but its tap area is 44px tall */
button.planbadge{position:relative;cursor:pointer}
button.planbadge::after{content:"";position:absolute;inset:-9px -6px}
button.planbadge:hover{background:rgba(255,255,255,.3)}
.pw-price s{font-size:18px;color:var(--ink-2)}
.pw-text{margin:12px 0 0;font-size:16px;line-height:24px;color:var(--ink-2)}
.pw-text b{color:var(--ink);font-weight:600}
.pw-small{margin:12px 0 0;font-size:12px;line-height:18px;color:var(--ink-2)}
.pw-small a,.pw-text a{color:var(--blueprint);text-underline-offset:3px}
.pw-link{padding:0;border:0;background:none;font:inherit;font-weight:500;color:var(--blueprint);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pw-alt{margin:14px 0 0;text-align:center;font-size:14px}
.pw-alt .pw-link{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.pw-alt .pw-link:hover{text-decoration:underline}
.pw label{margin-top:14px}
.pw .msg{min-height:0}
.pw .msg:empty{display:none}
.pw-tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;margin-top:16px;padding:4px;border-radius:12px;background:var(--tint)}
.pw-tabs button{min-height:44px;border:0;border-radius:10px;background:none;font:inherit;font-size:14px;font-weight:500;color:var(--ink-2);cursor:pointer}
.pw-tabs button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px rgba(18,27,41,.1)}
.pw-pay{display:flex;align-items:center;gap:16px;margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:12px}
.pw-qr{flex:none;width:132px;height:132px;border-radius:8px}
.pw-qr-empty{display:grid;place-items:center;border:2px dashed var(--line-strong);background:var(--paper);font-size:12px;color:var(--ink-2)}
.pw-pay dl{margin:0;min-width:0;font-size:14px;line-height:20px}
.pw-pay dt{color:var(--ink-2);font-size:12px;line-height:16px}
.pw-pay dd{margin:0 0 8px;font-weight:600;font-variant-numeric:tabular-nums;word-break:break-word}
.pw-pay dd:last-child{margin-bottom:0}
.pw-codebox{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0 0;padding:12px 16px;border-radius:12px;background:var(--strength-bg)}
.pw-codebox span{font-size:14px;color:var(--strength)}
.pw-codebox b{font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;font-size:18px;letter-spacing:.04em}
.notice .pw-link{display:inline-flex;align-items:center;min-height:44px;margin:-12px 0 -12px 4px}
@media (max-width:420px){
  .pw-pay{flex-direction:column;align-items:flex-start}
}
.pw-terms{text-align:center}
.pw-qrlink{flex:none;display:block;border-radius:8px}
.pw-pay .pw-qr{width:168px;height:168px}
/* how to pay: scan with the phone on a computer; save the QR on a touch screen (the phone cannot scan itself) */
.pw-how{margin-top:8px}
.pw-how-touch{display:none}
@media (pointer:coarse){.pw-how-touch{display:block}.pw-how-desk{display:none}}
/* a list item holds its icon and one text span, so words and a bold email flow as one sentence */
.pw-email{overflow-wrap:anywhere}
.pw-help{margin-top:6px}