/* Nextstep4u — design system.
 *
 * Google Sans Flex is the UI face. Google released it under the SIL Open Font
 * License in November 2025, which retired the stand-in Figtree was filling
 * (ADR 0003 and its second revision). It is the ONLY face the site loads for
 * Latin text and for numbers.
 *
 * Meera Inimai sets Tamil and ships weight 400 ONLY, so Tamil is never bold
 * anywhere — the rule at the bottom of the type section enforces that rather
 * than trusting every author to remember it. It stays because Google Sans Flex
 * carries no Tamil glyphs at all: dropping it would not make Tamil match the
 * rest of the page, it would hand Tamil to whatever the phone happens to have.
 *
 * Motion lives here too. Everything is transform/opacity, 120-420ms, and the
 * whole layer collapses under prefers-reduced-motion.
 */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root{
  --blue:#0265E0; --blue-fill:#0265E0; --blue-deep:#0150B4; --blue-bg:#EBF3FE; --blue-line:#C5DAF8; --blue-tint:#F7FBFF;
  --green:#00B696; --green-ink:#00947C; --green-deep:#00695C; --green-bg:#E4F7F3; --green-line:#A8E5D9;
  --amber:#FBBC04; --amber-ink:#B8860B; --amber-deep:#7A5A00; --amber-bg:#FFF7E0; --amber-line:#FBE49B; --amber-tint:#FFFDF5;
  --red:#D93843; --red-bg:#FDECED;

  --ink:#0D1420; --ink-2:#3D4756; --ink-3:#5A6675; --ink-4:#9AA4B2;
  --line:#E4E8EE; --line-2:#EEF1F6; --line-3:#D7DDE6;
  --page:#ffffff; --sunk:#F8FAFC; --chip:#F2F5F9; --shell:#F6F8FB;
  --night:#0D1420; --night-2:#171F2C; --night-3:#263243;

  --shadow-1:0 1px 3px rgba(13,20,32,.06);
  --shadow-2:0 4px 20px rgba(13,20,32,.07);
  --shadow-3:0 12px 34px rgba(2,101,224,.14);

  --r-sm:8px; --r-md:11px; --r-lg:16px; --r-xl:18px;
  --ui:'Google Sans Flex','Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ta:'Meera Inimai','Google Sans Flex',sans-serif;
  /* There is no --mono, and there is no monospaced face on this site.
     Numbers were set in Roboto Mono once; two faces on one screen read as two
     fonts -- a score in one and its label in another -- and the difference was
     most obvious while scrolling past a page of figures. The token was then
     aliased to the UI face, which fixed the look and left twenty-five rules
     still saying "font-family: mono" about text that was not.
     Google Sans Flex sets everything Latin, including every number. What makes
     a column of figures line up, and what stops a countdown shifting width as
     its digits change, is `font-variant-numeric:tabular-nums` -- which this
     face supports -- and not a monospaced family. */

  /* The brand amber as raw channels, so a glow or a tint can be built with
     rgba() without a second copy of the hex drifting away from --amber. */
  --amber-rgb:251,188,4;

  --ease:cubic-bezier(.2,0,0,1);
  --spring:cubic-bezier(.34,1.3,.64,1);
}

/* NO DARK MODE.
 *
 * The dark token set was removed deliberately, not lost. This product is
 * always light: one surface, one set of contrast ratios, one thing to audit.
 * The navy panels -- the report card, the WhatsApp band, the footer -- are
 * DESIGN surfaces built from --night, not a theme. They stay navy in every
 * setting, which is why they are defined above with the other tokens rather
 * than here.
 *
 * If dark mode ever comes back it is a deliberate piece of work, not a
 * media query pasted back in: every pairing has to clear its WCAG threshold
 * again, and the exam surface has its own Paper/Night palette that is
 * separate from the site theme on purpose.
 */

/* ── base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  background:var(--page);color:var(--ink);font-family:var(--ui);
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:var(--blue);text-decoration:none;transition:color .14s var(--ease);}
a:hover{color:var(--blue-deep);}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit;}
img,svg{display:block;max-width:100%;}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:4px;}
::selection{background:var(--blue-bg);color:var(--ink);}
::-webkit-scrollbar{width:11px;height:11px;}
::-webkit-scrollbar-thumb{background:var(--line-3);border-radius:8px;border:3px solid transparent;background-clip:padding-box;}
::-webkit-scrollbar-track{background:transparent;}

/* ── type ───────────────────────────────────────────────────────────────── */
h1{font-size:clamp(1.9rem,1.3rem+2.2vw,3.1rem);line-height:1.08;letter-spacing:-.025em;font-weight:700;text-wrap:balance;}
h2{font-size:clamp(1.45rem,1.1rem+1.3vw,2.13rem);line-height:1.15;letter-spacing:-.02em;font-weight:700;text-wrap:balance;}
h3{font-size:1.19rem;line-height:1.35;letter-spacing:-.01em;font-weight:600;}
p{text-wrap:pretty;}
.lede{font-size:1.09rem;line-height:1.6;color:var(--ink-2);max-width:34em;}
.sub{color:var(--ink-3);font-size:.94rem;}
.dim{color:var(--ink-4);}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);}
.m{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1;}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.02em;}

/* Tamil. Meera Inimai has ONE weight, so any bold here would be a browser
   synthesising it — which looks broken beside real Google Sans Flex bold.
   Hierarchy in
   Tamil comes from size and colour instead. */
.ta,[lang="ta"]{font-family:var(--ta);font-weight:400!important;line-height:1.8;}

/* ── layout ─────────────────────────────────────────────────────────────── */
.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}
.wrap.tight{max-width:1000px;}
.wrap.slim{max-width:840px;}
.sec{padding:76px 0;}
.sec.sm{padding:48px 0;}
.row{display:flex;align-items:center;gap:14px;}
.row.top{align-items:flex-start;}
.spacer{flex:1;}
.grid{display:grid;gap:16px;}
.g2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g4{grid-template-columns:repeat(4,minmax(0,1fr));}
.stack{display:flex;flex-direction:column;gap:12px;}

/* ── site chrome ────────────────────────────────────────────────────────── */
.topbar{
  background:var(--night);color:#fff;font-size:.85rem;font-weight:600;
  padding:10px 32px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
}
.topbar a{color:var(--amber);}
header.site{
  position:sticky;top:0;z-index:40;background:var(--page);
  background:color-mix(in srgb,var(--page) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
}
header.site .inner{max-width:1200px;margin:0 auto;padding:0 32px;height:68px;display:flex;align-items:center;gap:30px;}
/* The brand mark. An image of the real logo, with the CSS wordmark behind it
   as the fallback -- site.js unhides the letters only if the file fails to
   load. Height-constrained with width auto, so the artwork's aspect ratio is
   whatever it is and the header does not need redesigning when it changes. */
.mark{display:flex;align-items:center;flex:none;}
.mark-img{height:30px;width:auto;display:block;}
.mark-text{display:flex;align-items:baseline;gap:1px;font-weight:800;font-size:1.31rem;letter-spacing:-.035em;}
.mark-text[hidden]{display:none;}
.mark .b{color:var(--blue);} .mark .f{color:var(--amber);font-size:1.15em;} .mark .u{color:var(--green);}

/* Smaller in the footer and the app sidebar than in the header, where it is
   the first thing on the page. */
footer.site .mark-img{height:26px;}
.side .mark-img{height:26px;}

nav.main{display:flex;gap:26px;}
nav.main a{position:relative;font-size:.91rem;font-weight:500;color:var(--ink-2);padding:4px 0;}
nav.main a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease);
}
nav.main a:hover{color:var(--blue);}
nav.main a:hover::after,nav.main a[aria-current="page"]::after{transform:scaleX(1);}
nav.main a[aria-current="page"]{color:var(--blue);font-weight:600;}

.theme{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--page);}
.theme button{font-size:.72rem;font-weight:600;color:var(--ink-4);padding:5px 11px;border-radius:999px;transition:background .16s,color .16s;}
.theme button[aria-pressed="true"]{background:var(--blue-fill);color:#fff;}

/* Language, built to look like a sibling of the theme switch rather than a
   feature bolted on. The Tamil label is set at 400 like all Tamil on the site;
   the weight difference against the EN label beside it is deliberate and is
   the reason the two are sized separately. */
.lang{display:inline-flex;border:1px solid var(--line);border-radius:999px;padding:2px;background:var(--page);}
.lang button{font-size:.72rem;font-weight:600;color:var(--ink-4);padding:5px 11px;border-radius:999px;transition:background .16s,color .16s;}
.lang button[lang="ta"]{font-family:var(--ta);font-weight:400;font-size:.84rem;padding:3px 11px;}
.lang button[aria-pressed="true"]{background:var(--blue-fill);color:#fff;}
.lang button:focus-visible{outline:2px solid var(--blue);outline-offset:2px;}
@media(max-width:820px){.theme{display:none;}}

footer.site{background:var(--sunk);border-top:1px solid var(--line);margin-top:auto;}
footer.site .cols{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:40px;padding:52px 0 36px;}
footer.site h4{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;}
/* Scoped away from .mark: this rule used to hit the three spans inside the
   wordmark too, stacking the logo into a column at the foot of every page. */
footer.site .col > a,footer.site .col > span{display:block;font-size:.88rem;color:var(--ink-3);margin-bottom:9px;}
footer.site .col .mark{display:flex;margin-bottom:0;}
footer.site .col .mark span{display:inline;margin-bottom:0;font-size:inherit;color:inherit;}
/* The column rule above turns block-level children into stacked rows; the
   logo is not one of those. */
footer.site .col .mark-img{display:block;margin-bottom:0;}
footer.site .base{padding:0 0 36px;font-size:.79rem;color:var(--ink-4);}

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:12px 22px;border-radius:var(--r-md);
  font-size:.95rem;font-weight:600;text-align:center;white-space:nowrap;
  background:var(--blue-fill);color:#fff;border:1px solid var(--blue-fill);
  transition:background .16s var(--ease),transform .16s var(--spring),box-shadow .16s var(--ease),border-color .16s;
  box-shadow:0 1px 2px rgba(2,101,224,.28);
}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(2,101,224,.28);}
.btn:active{transform:translateY(0) scale(.985);}
.btn.ghost{background:var(--page);color:var(--ink);border-color:var(--line-3);box-shadow:none;}
.btn.ghost:hover{border-color:var(--blue);color:var(--blue);background:var(--page);}
.btn.soft{background:var(--chip);color:var(--ink);border-color:transparent;box-shadow:none;}
.btn.soft:hover{background:var(--blue-bg);color:var(--blue);}
.btn.gold{background:var(--amber);border-color:var(--amber);color:#0D1420;box-shadow:0 1px 2px rgba(251,188,4,.35);}
.btn.gold:hover{filter:brightness(.94);color:#0D1420;box-shadow:0 4px 14px rgba(251,188,4,.35);}
.btn.tint{background:var(--blue-bg);color:var(--blue);border-color:transparent;box-shadow:none;}
.btn.tint:hover{background:var(--blue-line);color:var(--blue-deep);}
.btn.danger{background:var(--red-bg);color:var(--red);border-color:transparent;box-shadow:none;}
.btn.lg{min-height:54px;padding:16px 30px;font-size:1.03rem;border-radius:12px;}
.btn.sm{min-height:38px;padding:9px 16px;font-size:.85rem;border-radius:9px;}
.btn.wide{width:100%;}
.btn[disabled],.btn.off{background:var(--chip);color:var(--ink-4);border-color:var(--line);box-shadow:none;cursor:not-allowed;pointer-events:none;}

/* ── surfaces ───────────────────────────────────────────────────────────── */
.card{background:var(--page);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;}
.card.pad-sm{padding:18px;}
.card.lift{transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease);}
.card.lift:hover{border-color:var(--blue-line);box-shadow:var(--shadow-2);transform:translateY(-2px);}
.card.hero{border:2px solid var(--blue);box-shadow:var(--shadow-3);}
.card.gold{border:2px solid var(--amber);background:var(--amber-tint);}
.card.dark{background:var(--night);border-color:transparent;color:#fff;}
.card.dark .sub,.card.dark p{color:#9AA4B2;}
.panel{background:var(--page);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;}
.panel .head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;font-weight:600;}

.note{border-radius:var(--r-md);padding:16px 18px;font-size:.92rem;line-height:1.55;background:var(--blue-bg);border:1px solid var(--blue-line);}
.note b{display:block;margin-bottom:3px;}
.note.good{background:var(--green-bg);border-color:var(--green-line);color:var(--green-deep);}
.note.warn{background:var(--amber-bg);border-color:var(--amber-line);color:var(--amber-deep);}
.note.bad{background:var(--red-bg);border-color:transparent;color:var(--red);}

.tag{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:6px;background:var(--chip);color:var(--ink-3);}
.tag.blue{background:var(--blue-bg);color:var(--blue);}
.tag.green{background:var(--green-bg);color:var(--green-ink);}
.tag.amber{background:var(--amber-bg);color:var(--amber-deep);}
.tag.red{background:var(--red-bg);color:var(--red);}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:.82rem;font-weight:500;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:var(--page);transition:background .16s,border-color .16s,color .16s;}
.pill.on{background:var(--ink);border-color:var(--ink);color:var(--page);font-weight:600;}
.pill:hover{border-color:var(--blue-line);}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none;}

/* ── stats ──────────────────────────────────────────────────────────────── */
.stat{background:var(--page);border:1px solid var(--line);border-radius:13px;padding:18px;}
.stat .v{font-size:1.6rem;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.025em;}
.stat .k{font-size:.78rem;color:var(--ink-3);margin-top:7px;}
.stat .d{font-size:.75rem;font-weight:600;margin-top:6px;}
.stat .d.up{color:var(--green-ink);} .stat .d.down{color:var(--red);} .stat .d.hold{color:var(--amber-ink);}

.bar{height:8px;border-radius:5px;background:var(--line-2);overflow:hidden;}
.bar i{display:block;height:100%;border-radius:5px;background:var(--blue);width:0;transition:width .9s var(--ease);}
.bar.split{display:flex;}
.bar.split i{border-radius:0;transition:width .9s var(--ease);}

/* ── tables ─────────────────────────────────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-size:.9rem;}
.tbl thead th{
  text-align:left;padding:12px 18px;background:var(--sunk);border-bottom:1px solid var(--line);
  font-size:.71rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-4);white-space:nowrap;
}
.tbl td{padding:14px 18px;border-bottom:1px solid var(--line-2);vertical-align:middle;}
.tbl tbody tr{transition:background .14s;}
.tbl tbody tr:hover{background:var(--sunk);}
.tbl tbody tr:last-child td{border-bottom:none;}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;}

/* ── forms ──────────────────────────────────────────────────────────────── */
.field{display:block;margin-bottom:16px;}
.field > span{display:block;font-size:.8rem;font-weight:600;margin-bottom:7px;}
.input{
  width:100%;min-height:48px;border:1px solid var(--line-3);border-radius:10px;
  padding:12px 15px;background:var(--page);transition:border-color .16s,box-shadow .16s;
}
.input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-bg);}
.opt-row{
  display:flex;align-items:center;gap:14px;border:1px solid var(--line);border-radius:12px;
  padding:15px 17px;min-height:58px;cursor:pointer;background:var(--page);
  transition:border-color .16s var(--ease),background .16s var(--ease),transform .16s var(--spring);
}
.opt-row:hover{border-color:var(--blue-line);}
.opt-row.on{border:2px solid var(--blue);background:var(--blue-tint);padding:14px 16px;}
.radio{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--line-3);flex:none;transition:border .16s;}
.opt-row.on .radio{border:6px solid var(--blue);background:var(--page);}
.switch{width:42px;height:24px;border-radius:12px;background:var(--line-3);padding:3px;display:flex;flex:none;transition:background .2s var(--ease);}
.switch i{width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .2s var(--spring);}
.switch.on{background:var(--blue);}
.switch.on i{transform:translateX(18px);}

/* ── app shell (signed-in surfaces) ─────────────────────────────────────── */
.shell{display:grid;grid-template-columns:238px 1fr;min-height:100vh;background:var(--shell);}
.side{background:var(--page);border-right:1px solid var(--line);padding:20px 14px;display:flex;flex-direction:column;gap:18px;}
.side.dark{background:var(--night);border-color:transparent;}
.side nav{display:flex;flex-direction:column;gap:2px;}
.side nav a{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:9px;
  font-size:.87rem;font-weight:500;color:var(--ink-2);transition:background .16s,color .16s;
}
.side nav a:hover{background:var(--chip);color:var(--ink);}
.side nav a[aria-current="page"]{background:var(--blue-fill);color:#fff;font-weight:600;}
.side.dark nav a{color:#9AA4B2;}
.side.dark nav a:hover{background:var(--night-2);color:#fff;}
.side.dark nav a[aria-current="page"]{background:var(--blue-fill);color:#fff;}
.side .grp{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4);padding:14px 12px 5px;}
.appbar{height:62px;border-bottom:1px solid var(--line);background:var(--page);padding:0 26px;display:flex;align-items:center;gap:18px;}
.appmain{min-width:0;display:flex;flex-direction:column;}
.appbody{padding:26px;overflow:auto;}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--blue-fill);color:#fff;font-size:.8rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}

/* ── motion ─────────────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@keyframes fade{from{opacity:0;}to{opacity:1;}}
@keyframes pop{from{opacity:0;transform:scale(.94);}to{opacity:1;transform:none;}}
@keyframes growY{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes blink{0%,100%{opacity:1;}50%{opacity:.25;}}
@keyframes shimmer{from{background-position:-380px 0;}to{background-position:380px 0;}}
@keyframes drift{from{transform:translate3d(0,0,0);}to{transform:translate3d(0,-14px,0);}}

/* Reveal on scroll. JS adds .in when the element enters the viewport; without
   JS the element is simply visible, so nothing is ever hidden by a failure. */
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease);transition-delay:var(--d,0ms);}
.rv.in{opacity:1;transform:none;}
.rise{animation:rise .5s var(--ease) both;animation-delay:var(--d,0ms);}
.pop{animation:pop .34s var(--spring) both;animation-delay:var(--d,0ms);}
.blink{animation:blink 1.8s infinite;}
.col-grow{transform-origin:bottom;animation:growY .55s var(--ease) both;animation-delay:var(--d,0ms);}
.float{animation:drift 4.5s ease-in-out infinite alternate;}
.skel{background:linear-gradient(90deg,var(--line-2) 25%,var(--chip) 50%,var(--line-2) 75%);background-size:760px 100%;animation:shimmer 1.5s infinite linear;border-radius:6px;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  .rv{opacity:1;transform:none;}
}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:980px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .g3{grid-template-columns:1fr;}
  .shell{grid-template-columns:1fr;}
  .side{display:none;}
  footer.site .cols{grid-template-columns:1fr 1fr;gap:28px;}
}
@media (max-width:720px){
  body{font-size:15px;}
  .wrap{padding:0 18px;}
  .sec{padding:48px 0;}
  .g2,.g4{grid-template-columns:1fr;}
  header.site .inner{padding:0 18px;height:58px;gap:14px;}
  nav.main{display:none;}
  .appbody{padding:16px;}
  .card{padding:18px;}
  footer.site .cols{grid-template-columns:1fr;}
}

/* Bottom tab bar. Appears at exactly the width the side rail disappears, so
   there is never a band with no navigation at all. */
.tabbar{display:none;}
@media (max-width:980px){
  .tabbar{
    display:grid;grid-template-columns:repeat(4,1fr);position:sticky;bottom:0;z-index:30;
    background:var(--page);border-top:1px solid var(--line);
  }
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:9px 0 11px;font-size:.68rem;color:var(--ink-4);font-weight:500;}
  .tabbar a[aria-current="page"]{color:var(--blue);font-weight:600;}
  body{padding-bottom:0;}
}