/* =====================================================================
   electronicity.space — design system
   A space for CBT exam mock tests.

   One stylesheet, every page. The visual language is a circuit board:
   traces, pads, vias, pin strips, LED bar graphs, datasheet spec blocks.
   Nothing here is decoration for its own sake — each component below
   replaces a generic element that would have said nothing about what
   this site is.
   ===================================================================== */

/* ---------------------------------------------------------------------
   TOKENS
   Volt indigo is the exam accent and carries every page. Signal cyan is
   the second brand colour — it sits in the wordmark and marks a few
   things that are not the exam itself, and it never leads a page.
   --------------------------------------------------------------------- */
:root{
  --void:#0B1020;          /* board substrate — dark panels, the CBT bar */
  --void-2:#131A30;        /* raised dark */
  --paper:#F6F7FB;         /* page ground */
  --card:#FFFFFF;          /* raised surfaces */

  --volt:#4C4CF5;          /* USS accent — indigo */
  --volt-ink:#3A38C9;      /* volt, dark enough for text on white */
  --spark:#0AA6C7;         /* second brand colour — cyan */
  --spark-ink:#087F99;

  --pass:#0E9F6E;          /* correct answers, success */
  --pass-soft:rgba(14,159,110,.08);
  --warn:#D98704;          /* flagged, time running low */
  --warn-soft:rgba(217,135,4,.10);
  --danger:#D93A45;        /* wrong answers, seen-but-unanswered */
  --danger-soft:rgba(217,58,69,.07);

  --ink:#0F1424;           /* body headings */
  --ink-soft:#4E5A73;      /* body text */
  --ink-faint:#8794AB;     /* technical labels, captions */
  --line:#E3E7EF;          /* hairlines on light */
  --line-2:#EFF2F7;        /* faintest rules */
  --line-void:rgba(255,255,255,.13);
  --on-void:#F2F5FC;
  --on-void-soft:#9DA9C4;

  --r:12px;                /* corner radius */
  --r-sm:8px;
  --r-lg:18px;
  --shadow:0 1px 2px rgba(15,20,36,.04), 0 8px 24px -12px rgba(15,20,36,.14);
  --shadow-lg:0 2px 6px rgba(15,20,36,.05), 0 24px 48px -20px rgba(15,20,36,.22);

  --accent:var(--volt);           /* the page's leading accent */
  --accent-ink:var(--volt-ink);
  --accent-soft:rgba(76,76,245,.07);
  --max:1180px;
}

/* The exam palette. Kept as a class rather than folded into :root so a second
   exam can be added later by defining its own class and nothing else. */
.uss{ --accent:var(--volt);  --accent-ink:var(--volt-ink);  --accent-soft:rgba(76,76,245,.07); }

/* ---------------------------------------------------------------------
   RESET & BASE
   --------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:15.5px;line-height:1.62;color:var(--ink-soft);background:var(--paper);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:'cv02','cv03','cv04';
}
h1,h2,h3,h4,h5{font-family:'Space Grotesk',system-ui,sans-serif;font-weight:600;
  color:var(--ink);letter-spacing:-.02em;line-height:1.18}
h1{font-size:clamp(30px,5.2vw,50px);font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(23px,3.4vw,33px)}
h3{font-size:19px}
h4{font-size:16px}
p{max-width:68ch}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit}
hr{border:0;border-top:1px solid var(--line)}
/* A component that sets its own display (flex, grid) silently overrides the
   hidden attribute's display:none, so a hidden element stays on screen. This
   is the rule that makes hidden actually mean hidden. */
[hidden]{display:none!important}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px}

/* Monospace marks anything that would be printed on a board or a datasheet:
   a question code, a timer, a paper reference, a units line. Never prose. */
.mono{font-family:'JetBrains Mono','IBM Plex Mono',ui-monospace,monospace;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500}
.muted{color:var(--ink-faint)}
.small-note{font-size:12.5px;color:var(--ink-faint);line-height:1.55}
.center{text-align:center}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 22px}
.stack>*+*{margin-top:14px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

section{padding:clamp(46px,7vw,86px) 0}

/* ---------------------------------------------------------------------
   BRAND LAYER — the signature surfaces
   --------------------------------------------------------------------- */

/* .board — dark PCB substrate ruled with a trace grid and via pads.
   The most recognisable Electronicity surface. Used for the big
   statements: the hero, the exam call to action, the credibility panel. */
.board{
  position:relative;background:var(--void);color:var(--on-void);
  border-radius:var(--r-lg);overflow:hidden;isolation:isolate;
}
.board::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:34px 34px;
}
/* the via pads — small rings where a trace changes layer */
.board::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.16) 1.4px,transparent 1.6px);
  background-size:102px 102px;background-position:17px 17px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 40%,#000 40%,transparent 100%);
}
.board h1,.board h2,.board h3{color:#fff}
.board p{color:var(--on-void-soft)}
.board a{color:#fff}

/* .protoboard — the light counterpart. White with a faint perfboard dot
   grid. Behind the hero drawing, the scorecard and the test setup card. */
.protoboard{
  background:var(--card);
  background-image:radial-gradient(circle,rgba(15,20,36,.055) 1px,transparent 1.2px);
  background-size:22px 22px;
  border:1px solid var(--line);border-radius:var(--r-lg);
}

/* .rail — a section divider drawn as a power rail: a node, a monospaced
   label, then a trace running to the edge. Replaces a plain heading. */
.rail{
  display:flex;align-items:center;gap:12px;
  font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;
}
.rail::before{
  content:"";width:9px;height:9px;border-radius:50%;flex:0 0 auto;
  background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);
}
.rail::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.board .rail{color:var(--on-void-soft)}
.board .rail::after{background:linear-gradient(90deg,var(--line-void),transparent)}

/* .pins — a strip of pin marks, like the header on an IC.
   Sits under the question number in the exam. */
.pins{display:flex;gap:4px;align-items:flex-end;height:10px}
.pins i{width:2px;height:6px;background:var(--line);border-radius:1px;display:block}
.pins i:nth-child(5n+1){height:10px;background:var(--ink-faint)}

/* .bargraph — progress as an LED bar graph rather than a bar.
   Lit segments stand taller than dark ones. */
.bargraph{display:flex;gap:3px;align-items:flex-end;height:20px}
.bargraph i{flex:1;height:9px;background:var(--line);border-radius:2px;display:block;transition:.2s}
.bargraph i.on{height:20px;background:var(--accent)}

/* .callout — a technical note attached the way an annotation is attached
   to a schematic: a node, a leader line, then the text. */
.callout{position:relative;padding-left:26px;color:var(--ink-soft);font-size:14px;line-height:1.6}
.callout::before{content:"";position:absolute;left:4px;top:9px;width:7px;height:7px;
  border-radius:50%;border:2px solid var(--accent);background:var(--card)}
.callout::after{content:"";position:absolute;left:7.5px;top:18px;bottom:6px;
  width:1px;background:var(--line)}
.callout b{color:var(--ink);font-weight:600}

/* .specblock — labelled fields in a bordered grid, the way a datasheet
   states its parameters. Used for exam metadata and the scorecard tally. */
.specblock{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--card)}
.specblock div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 15px;border-bottom:1px solid var(--line-2)}
.specblock div:last-child{border-bottom:0}
.specblock span{font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}
.specblock strong{font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--ink);font-weight:600}

/* .ref — the monospaced reference tag: an exam code, a paper number,
   a topic key. The equivalent of a component designator on a board. */
.ref{display:inline-flex;align-items:center;gap:6px;
  font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;font-weight:500;
  color:var(--accent-ink);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:5px;padding:4px 9px;white-space:nowrap}
.ref.plain{color:var(--ink-faint);background:transparent;border-color:var(--line)}
.ref.pass{color:#0A7B55;background:var(--pass-soft);border-color:rgba(14,159,110,.28)}
.ref.warn{color:#9A6003;background:var(--warn-soft);border-color:rgba(217,135,4,.3)}

/* .schematic — hand-drafted technical SVG illustrations share one line
   vocabulary so every drawing on the site looks drawn by the same hand. */
.schematic .ink{stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.schematic .thin{stroke:var(--ink-faint);stroke-width:.9;fill:none}
.schematic .dash{stroke:var(--ink-faint);stroke-width:.9;fill:none;stroke-dasharray:4 3}
.schematic .accent{stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.schematic .fill-a{fill:var(--accent-soft);stroke:none}
.schematic .node{fill:var(--accent);stroke:none}
.schematic .lbl{font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:8px;
  letter-spacing:.1em;fill:var(--ink-faint);text-transform:uppercase}
.schematic-frame{border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  padding:18px}
.fig{font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:12px}

/* ---------------------------------------------------------------------
   NAV & FOOTER
   --------------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:60;background:rgba(246,247,251,.86);
  backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--max);margin:0 auto;padding:0 22px;height:62px;
  display:flex;align-items:center;justify-content:space-between;gap:18px}
/* min-width:0 matters: a flex item will not shrink below its content width
   without it, so the wordmark pushed the burger off the right edge of a
   390px phone rather than giving up space. */
.wordmark{display:flex;align-items:center;gap:9px;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:16.5px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
  min-width:0;flex:0 1 auto;white-space:nowrap}
.wordmark:hover{text-decoration:none}
.wordmark svg{flex:0 0 auto}
.wordmark .dot{color:var(--accent)}
.nav-links{display:flex;align-items:center;gap:4px}
.nav-links a{padding:8px 12px;border-radius:var(--r-sm);font-size:14.5px;font-weight:500;
  color:var(--ink-soft);text-decoration:none;transition:.14s}
.nav-links a:hover{background:var(--card);color:var(--ink);text-decoration:none}
.nav-links a.on{color:var(--accent-ink);background:var(--accent-soft)}
.nav-right{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.burger{display:none;width:40px;height:40px;flex:0 0 auto;border:1px solid var(--line);background:var(--card);
  border-radius:var(--r-sm);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger i{width:16px;height:1.6px;background:var(--ink);display:block;border-radius:2px}
@media (max-width:480px){
  .nav-in{padding:0 14px;gap:10px}
  .wordmark{font-size:15px}
  .wrap,.wrap-narrow{padding:0 16px}
}
@media (max-width:880px){
  .nav-links{position:fixed;inset:62px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--card);border-bottom:1px solid var(--line);padding:10px 16px 18px;
    gap:2px;display:none;box-shadow:var(--shadow-lg)}
  .nav-links.open{display:flex}
  .nav-links a{padding:12px 14px;font-size:15.5px}
  .burger{display:flex}
}

.foot{background:var(--void);color:var(--on-void-soft);padding:52px 0 30px;margin-top:60px}
.foot .wordmark{color:#fff}
.foot-grid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:34px}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot h5{font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--on-void-soft);font-weight:500;margin-bottom:12px}
.foot a{color:var(--on-void-soft);font-size:14px;text-decoration:none;display:block;padding:3.5px 0}
.foot a:hover{color:#fff;text-decoration:none}
.foot-base{margin-top:38px;padding-top:20px;border-top:1px solid var(--line-void);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px}
.tagline{color:var(--accent);font-family:'JetBrains Mono','IBM Plex Mono',monospace;
  font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;margin-top:10px}

/* ---------------------------------------------------------------------
   BUTTONS
   --------------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:var(--r-sm);border:1px solid transparent;
  background:var(--accent);color:#fff;font-size:14.5px;font-weight:600;font-family:inherit;
  cursor:pointer;transition:.15s;text-decoration:none;white-space:nowrap;line-height:1.3}
.btn:hover{filter:brightness(1.08);text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;filter:none}
.btn.lg{padding:14px 26px;font-size:15.5px}
.btn.sm{padding:8px 14px;font-size:13.5px}
.btn.ghost{background:var(--card);color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink-faint);filter:none}
.btn.dark{background:var(--void)}
.btn.pass{background:var(--pass)}
.btn.danger{background:var(--danger)}
.btn.line{background:transparent;color:var(--accent-ink);border-color:currentColor}
.btn.line:hover{background:var(--accent-soft);filter:none}
.board .btn.ghost{background:transparent;color:#fff;border-color:var(--line-void)}
.board .btn.ghost:hover{background:rgba(255,255,255,.08)}

/* ---------------------------------------------------------------------
   CARDS, GRIDS, ALERTS, FORMS
   --------------------------------------------------------------------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.card.hover{transition:.18s}
.card.hover:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:var(--shadow);transform:translateY(-2px)}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}

.alert{display:none;padding:13px 16px;border-radius:var(--r-sm);font-size:14px;line-height:1.55;
  border:1px solid;margin-bottom:14px}
.alert.show{display:block}
.alert.ok{background:var(--pass-soft);border-color:rgba(14,159,110,.3);color:#0A7B55}
.alert.info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 28%,transparent);
  color:var(--accent-ink)}
.alert.warn{background:var(--warn-soft);border-color:rgba(217,135,4,.32);color:#8A5602}
.alert.error{background:var(--danger-soft);border-color:rgba(217,58,69,.3);color:#A8262F}

label{display:block;font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;margin-bottom:6px}
input[type=text],input[type=email],input[type=number],input[type=password],input[type=url],
input[type=search],select,textarea{
  width:100%;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--card);font-size:15px;color:var(--ink);transition:.14s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:110px;line-height:1.6}
.field{margin-bottom:16px}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:500;
  padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:11px 12px;border-bottom:1px solid var(--line-2);vertical-align:top}
tr:last-child td{border-bottom:0}

/* progress bar used by the admin's uploads */
.pbar{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.pbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s}

/* ---------------------------------------------------------------------
   EXAM / TOPIC CARDS
   --------------------------------------------------------------------- */
.exam-card{display:block;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:24px;text-decoration:none;color:inherit;transition:.18s;
  position:relative;overflow:hidden}
.exam-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);
  opacity:0;transition:.18s}
.exam-card:hover{text-decoration:none;transform:translateY(-3px);box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
.exam-card:hover::before{opacity:1}
.exam-card h3{margin:12px 0 7px}
.exam-card p{font-size:14px;color:var(--ink-soft);margin-bottom:14px}
.exam-card .go{font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);font-weight:500}

.topic-card{display:flex;flex-direction:column;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;text-decoration:none;
  color:inherit;transition:.16s}
.topic-card:hover{text-decoration:none;border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  box-shadow:var(--shadow);transform:translateY(-2px)}
.topic-card .t{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:16px;color:var(--ink)}
.topic-card .d{font-size:13.5px;color:var(--ink-soft);line-height:1.5;flex:1}
.topic-card .m{display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)}

/* ---------------------------------------------------------------------
   AUTH CHIP (ec-auth.js)
   --------------------------------------------------------------------- */
.authchip{display:flex;align-items:center;gap:9px}
.authchip .av{width:30px;height:30px;border-radius:50%;background:var(--void);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;
  font-weight:700;font-size:12.5px;overflow:hidden;flex:0 0 auto}
.authchip .av img{width:100%;height:100%;object-fit:cover}
.authchip .nm{font-size:13.5px;font-weight:500;color:var(--ink);max-width:130px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.authchip button{background:none;border:0;padding:0;font-size:12.5px;color:var(--ink-faint);
  cursor:pointer;text-align:left}
.authchip button:hover{color:var(--danger)}
.authchip .tag{font-size:12.5px;color:var(--ink-faint);display:flex;gap:5px;align-items:baseline}
.authchip .tag a{color:var(--warn);font-weight:600;text-decoration:none}
.authchip .tag a:hover{text-decoration:underline}

/* =====================================================================
   REVISION PAGES
   =====================================================================
   These are read on a phone, standing up, in the minutes before a class.
   A seven-screen scroll with no way to reach the middle of it is useless
   in that situation, so a revision page collapses to its headings and
   carries its own navigation.
   ===================================================================== */

/* --- the jump bar: sticky under the site nav, scrolls sideways --- */
.jumpbar{position:sticky;top:62px;z-index:50;background:rgba(246,247,251,.95);
  backdrop-filter:saturate(180%) blur(10px);-webkit-backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line)}
.jb-in{max-width:var(--max);margin:0 auto;padding:9px 22px;display:flex;gap:7px;
  overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;-ms-overflow-style:none}
.jb-in::-webkit-scrollbar{display:none}
.jb-in a{flex:0 0 auto;padding:9px 14px;border:1px solid var(--line);background:var(--card);
  border-radius:99px;font-size:13px;font-weight:600;color:var(--ink-soft);white-space:nowrap;
  text-decoration:none;transition:.14s}
.jb-in a:hover{border-color:var(--ink-faint);text-decoration:none}
.jb-in a.on{background:var(--accent);border-color:var(--accent);color:#fff}

/* --- a collapsible section ---
   Built on <details>, so it opens and closes with no JavaScript at all and
   keyboard and screen-reader behaviour comes for free. */
details.sec{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:12px;overflow:hidden;scroll-margin-top:118px}
details.sec>summary{list-style:none;cursor:pointer;padding:17px 20px;display:flex;
  align-items:center;gap:14px;min-height:56px;
  font-family:'Space Grotesk','Noto Sans Malayalam',sans-serif;font-weight:600;
  font-size:17px;line-height:1.35;color:var(--ink);transition:.13s}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary::marker{content:""}
details.sec>summary:hover{background:var(--paper)}
details.sec>summary::after{content:"";margin-left:auto;flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid var(--ink-faint);border-bottom:2px solid var(--ink-faint);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .18s}
details.sec[open]>summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
details.sec[open]>summary{border-bottom:1px solid var(--line-2)}
.sec-body{padding:18px 20px 22px}
.sec-body>*:first-child{margin-top:0}

/* --- back to top --- */
.totop{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:60;
  width:46px;height:46px;border-radius:50%;background:var(--void);color:#fff;border:0;
  cursor:pointer;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.2s;
  display:flex;align-items:center;justify-content:center;font-size:19px;line-height:1}
.totop.show{opacity:1;pointer-events:auto}

/* --- prev / next topic --- */
.prevnext{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:28px}
.prevnext a{display:flex;flex-direction:column;justify-content:center;gap:5px;
  padding:16px 18px;min-height:72px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);text-decoration:none;color:inherit;transition:.16s}
.prevnext a:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  text-decoration:none;box-shadow:var(--shadow)}
.prevnext .lbl{font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint)}
.prevnext .t{font-family:'Space Grotesk','Noto Sans Malayalam',sans-serif;font-weight:600;
  font-size:15px;color:var(--ink);line-height:1.3}
.prevnext .next{text-align:right}
.prevnext .spacer{border:1px dashed var(--line);background:transparent;box-shadow:none;
  cursor:default;pointer-events:none;opacity:.55}

/* --- quick-reference pages: dense, scannable rows --- */
.qref{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.qref div{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:11px 15px;background:var(--card);font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.qref div b,.qref div strong{color:var(--ink);font-weight:600}
.qref .k{flex:0 0 auto;max-width:52%}
.qref .v{text-align:right}
@media(max-width:520px){
  .qref div{flex-direction:column;gap:3px}
  .qref .k{max-width:100%}
  .qref .v{text-align:left}
}

/* a numbered timeline, for history */
.tline{position:relative;padding-left:26px}
.tline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:1px;background:var(--line)}
.tline div{position:relative;padding:0 0 16px}
.tline div::before{content:"";position:absolute;left:-23px;top:7px;width:9px;height:9px;
  border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tline .yr{font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:11px;
  letter-spacing:.1em;color:var(--accent-ink);font-weight:600}
.tline .ev{font-size:14.5px;color:var(--ink-soft);line-height:1.55;margin-top:2px}
.tline .ev b{color:var(--ink)}

/* =====================================================================
   PHONE
   ===================================================================== */
@media (max-width:640px){
  /* a section heading is a tap target before it is a heading */
  details.sec>summary{padding:16px 16px;font-size:16px;min-height:60px}
  .sec-body{padding:16px 16px 20px}
  .jb-in{padding:8px 16px}
  .jumpbar{top:62px}

  /* the hero on a revision page costs a third of the first screen for
     nothing — the student already knows which topic they tapped */
  .revhero{padding-top:22px!important;padding-bottom:8px!important}
  .revhero h1{font-size:26px}

  /* tap targets: 44px is the smallest a thumb reliably hits */
  .foot a{padding:11px 0}
  .nav-links a{min-height:46px;display:flex;align-items:center}
  /* the chip is a name over a sign-out link inside a 62px bar — a 44px
     min-height pushed it past the bar's edge, so the target is padded
     and the padding cancelled in layout instead */
  .authchip button,.authchip .tag a{padding:11px 8px;margin:-11px -8px;
    display:inline-flex;align-items:center}
  .btn.sm{padding:11px 16px;min-height:44px}
  a.ref{min-height:40px;display:inline-flex;align-items:center}
  .revhero .ref{padding:9px 12px}
  /* A link inside flowing prose or a table cell cannot take real padding without
     pushing the line — or the whole row — apart. The padding is hit-testable and
     the matching negative margin cancels it in layout, so the finger target grows
     to ~45px without moving a pixel on screen. */
  .wrap p a:not(.btn):not(.ref):not(.wordmark),.sec-body li a,.tblwrap td a,
  p.callout a,.abar-in a,dialog.guestdlg .gd-foot a{display:inline-block;padding:11px 6px;margin:-11px -6px}
  /* the admin bar is not prose, so its links can take the wider target */
  .abar-in a{padding-left:10px;padding-right:10px;margin-left:-10px;margin-right:-10px}
  .wordmark{min-height:44px}
  .prevnext{grid-template-columns:1fr}
  .prevnext .next{text-align:left}
}

/* --- reference tables stack into labelled rows rather than scroll ---
   A three-column table squeezed into 360px is unreadable, and a sideways
   scroll inside a vertical scroll is worse. Below this width each row
   becomes its own little block with the column name against each value.
   Two-column tables are already key-and-value, so they stay as they are. */
@media (max-width:560px){
  .tblwrap.stack table,.tblwrap.stack tbody,.tblwrap.stack tr,.tblwrap.stack td{
    display:block;width:100%}
  .tblwrap.stack thead{display:none}
  .tblwrap.stack tr{border-bottom:1px solid var(--line);padding:9px 0}
  .tblwrap.stack tr:last-child{border-bottom:0}
  .tblwrap.stack td{border:0;padding:3px 13px;display:flex;gap:10px;align-items:baseline}
  .tblwrap.stack td::before{content:attr(data-h);flex:0 0 34%;
    font-family:'JetBrains Mono','IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--ink-faint);padding-top:2px}
  .tblwrap.stack td:first-child{font-weight:600;color:var(--ink)}
  /* A two-column table stays a table, but a long Malayalam idiom will not
     shrink on its own — without this it pushes the table into a sideways
     scroll on a 360px screen. */
  .tblwrap td,.tblwrap th{padding-left:10px;padding-right:10px;overflow-wrap:anywhere}
}

/* --- revision index: group counts and phone-compact cards ---
   The count sits at the right of the summary, so the disclosure arrow gives up
   its `margin-left:auto` and simply follows it. */
details.sec>summary .cnt{margin-left:auto;font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);
  font-weight:500;white-space:nowrap}
details.sec>summary.withcnt::after{margin-left:12px}
.revindex .sec-body{padding-top:14px}
.revindex .topic-card{margin:0}
@media(max-width:640px){
  details.sec>summary .cnt{font-size:9px;letter-spacing:.1em}
  .revindex .topic-card{padding:14px 16px;min-height:0}
  .revindex .topic-card .d{display:-webkit-box;-webkit-line-clamp:2;
    -webkit-box-orient:vertical;overflow:hidden}
}

/* =====================================================================
   THE GUEST POP-UP (ec-guest.js)
   =====================================================================
   Opens over whatever page the student pressed Write exam on, so the exam
   is one box away rather than a page away. Built as a native <dialog> for
   the focus trap and the Escape key; the .nomodal class is the fallback
   for a browser old enough not to have showModal().
   ===================================================================== */
dialog.guestdlg{position:fixed;inset:0;margin:auto;border:0;padding:0;background:transparent;
  max-width:min(94vw,470px);width:100%;max-height:92vh;color:var(--ink)}
dialog.guestdlg::backdrop{background:rgba(11,16,32,.62);backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px)}
dialog.guestdlg.nomodal{position:fixed;inset:auto 0 0 0;margin:auto;top:50%;
  transform:translateY(-50%);z-index:999;box-shadow:0 0 0 100vmax rgba(11,16,32,.62)}
dialog.guestdlg form{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(22px,4vw,32px);box-shadow:0 24px 60px rgba(11,16,32,.28)}
dialog.guestdlg h2{font-size:clamp(21px,4vw,26px);margin:0 0 8px;line-height:1.25}
dialog.guestdlg .gd-sub{font-size:15px;color:var(--ink-soft);margin:0 0 20px;line-height:1.6}
dialog.guestdlg .gd-row{display:flex;gap:10px;flex-wrap:wrap}
dialog.guestdlg .gd-row input{flex:1 1 190px;min-width:0}
dialog.guestdlg .gd-note{font-size:13px;color:var(--ink-faint);margin:14px 0 0;line-height:1.6}
dialog.guestdlg .alert{margin-top:14px}
dialog.guestdlg .gd-foot{border-top:1px solid var(--line);margin-top:20px;padding-top:15px}
dialog.guestdlg .gd-foot p{font-size:13.5px;color:var(--ink-soft);margin:0;line-height:1.65}
dialog.guestdlg .gd-x{position:absolute;top:10px;right:12px;width:38px;height:38px;border:0;
  background:none;font-size:23px;line-height:1;color:var(--ink-faint);cursor:pointer;
  border-radius:50%}
dialog.guestdlg .gd-x:hover{background:var(--paper);color:var(--ink)}
@media (max-width:640px){
  dialog.guestdlg{max-width:100%}
  dialog.guestdlg .gd-row .btn{width:100%}
  dialog.guestdlg .gd-x{width:44px;height:44px}
}