/* ============================================================
   EXAMUST — design tokens
   A soft pastel school system: cream paper, lime / lavender /
   peach accents, generous radii, no hard edges anywhere.
   Every colour in the product resolves back to this file.
   ============================================================ */

:root{
  /* --- paper ------------------------------------------------ */
  --cream:#FBFAF6;
  --cream-2:#F5F4EE;
  --paper:#FFFFFF;

  /* --- pastels (sampled from the reference design) ---------- */
  --lime:#DCF48F;
  --lime-soft:#EFF9CE;
  --lime-line:#CFEA79;
  --lime-ink:#5C7A1E;

  --lav:#CFCDF6;
  --lav-soft:#EDECFC;
  --lav-line:#BFBCF0;
  --lav-ink:#5B51C9;

  --peach:#FAE3C6;
  --peach-soft:#FDF2E5;
  --peach-line:#F3D2AA;
  --peach-ink:#9A6B2C;

  --sky:#D9E9F8;
  --sky-soft:#EDF4FC;
  --sky-ink:#3F6B96;

  --rose:#FBDDE0;
  --rose-soft:#FDEDEF;
  --rose-ink:#B0596A;

  /* --- type ------------------------------------------------- */
  --ink:#26262F;
  --ink-2:#43434F;
  --muted:#8B8B99;
  --line:#EDEBE3;
  --line-2:#E2DFD4;

  /* --- the one accent -------------------------------------- */
  --accent:#6F67D6;
  --accent-d:#5A52C2;
  --accent-soft:var(--lav-soft);

  /* --- shape ------------------------------------------------ */
  --r-xl:32px;
  --r-lg:26px;
  --r:20px;
  --r-sm:14px;
  --pill:999px;

  --shadow:0 16px 40px rgba(122,118,96,.12);
  --shadow-sm:0 6px 18px rgba(122,118,96,.09);
  --shadow-lift:0 20px 46px rgba(122,118,96,.16);

  /* --- fonts ------------------------------------------------ */
  --f:"Nunito","Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --dev:"Noto Sans Devanagari","Nirmala UI","Devanagari Sangam MN";

  /* --- rhythm ----------------------------------------------- */
  --gut:18px;
  --sec:44px;

  /* The paper's question-number palette: six buttons, five gaps, two paddings.
     The column and the grid inside it are both sized from this, so they cannot
     drift apart and push the numbers outside the panel. */
  --pal-w:calc(6 * 34px + 5 * 6px + 2 * 14px);   /* 262px */
}

@media (min-width:721px){
  :root{ --gut:22px; --sec:76px; }
}

/* Wide screens get their sides back. This used to live in landing.css, which
   only index.html loads — so the landing breathed at 54px while every other
   page stayed pinned at 22px and the whole shell jumped inward the moment you
   left the front page. The rhythm is chrome, so it belongs with the tokens. */
@media (min-width:1240px){
  :root{ --gut:clamp(34px,3.6vw,72px) }
}

/* ============================================================
   Reset — small, deliberate, mobile first
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink-2);
  font-family:var(--f-body),var(--dev);font-size:15px;line-height:1.6;font-weight:450;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:12px}
.hi{font-family:var(--dev),var(--f-body)}
[hidden]{display:none!important}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ============================================================
   CONTENT GUARD
   Driven by web/js/guard.js, which is where the reasoning lives.
   The short version: copying, printing and reading-in-one-tab-while-
   typing-into-another are all stopped. A photograph is not stoppable
   by any web page, and is no longer answered at all — there was a
   watermark over the question and it cost every honest reader more
   than it cost the few it was aimed at. The note at the top of
   guard.js says why it went.

   So what is left here is the part that is invisible when it is
   working: nothing selects, nothing prints, and nothing is on screen
   when this is not the window in front.
   ============================================================ */

/* ============================================================
   CLAY  ·  the one recipe for a moulded piece

   The landing page's icons, the footer's socials, the numbers
   on a paper's strip — everywhere a small coloured thing has to
   read as an OBJECT rather than as a printed rectangle.

   Four layers, not one: a hard white lip along the very top
   edge is what makes a surface read as moulded rather than
   printed; the soft sheen under it is the light falling off;
   the dark inner bottom is the thickness of the material; the
   outer shadow lifts the whole thing off the page.

   AS PROPERTIES, NOT AS A CLASS, and in tokens.css, which every
   page loads. The recipe used to live in landing.css inside a
   selector list — and the footer's social pieces were in that
   list, so on ten pages out of eleven they rendered flat. A
   look that belongs to the product cannot live in one page's
   stylesheet. Any sheet can now say `box-shadow:var(--clay)`.
   ============================================================ */
:root{
  --clay:
    inset 0 2.5px 0 rgba(255,255,255,.85),
    inset 0 7px 10px -6px rgba(255,255,255,.55),
    inset 0 -5px 9px -3px rgba(74,64,102,.30),
    0 8px 16px -6px rgba(74,64,102,.45),
    0 2px 4px -1px rgba(74,64,102,.22);
  /* Smaller pieces need less lift, or fifty of them in a row read as a heap
     of buttons rather than a row of numbers. */
  --clay-sm:
    inset 0 1.5px 0 rgba(255,255,255,.7),
    inset 0 4px 6px -4px rgba(255,255,255,.5),
    inset 0 -3px 6px -2px rgba(74,64,102,.26),
    0 3px 7px -3px rgba(74,64,102,.34),
    0 1px 2px -1px rgba(74,64,102,.2);
  /* Pressed: the lip flattens and the piece sinks toward the page. */
  --clay-in:
    inset 0 2px 5px rgba(74,64,102,.30),
    inset 0 -1px 0 rgba(255,255,255,.45),
    0 1px 3px -2px rgba(74,64,102,.3);
  /* The lit face — a soft sheen across the top third, not a hard band. */
  --clay-sheen:
    radial-gradient(120% 80% at 28% 8%,rgba(255,255,255,.62),rgba(255,255,255,0) 52%),
    linear-gradient(168deg,rgba(255,255,255,.34),rgba(255,255,255,0) 62%);
  /* Dialled down, for a dark piece where a white sheen would be a smear. */
  --clay-sheen-dark:
    radial-gradient(120% 80% at 28% 8%,rgba(255,255,255,.30),rgba(255,255,255,0) 52%),
    linear-gradient(168deg,rgba(255,255,255,.14),rgba(255,255,255,0) 62%);
}

/* Nothing on a guarded page is selectable except what the candidate is
   typing themselves. Selection is how a copy starts, so it ends here. */
body.guarded{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
body.guarded input,body.guarded textarea,body.guarded [contenteditable]{
  user-select:text;-webkit-user-select:text;-webkit-touch-callout:default}

/* The cover, for when this is not the window in front. */
#shield{position:fixed;inset:0;z-index:900;display:none;place-items:center;padding:24px;
  background:rgba(251,250,246,.985);
  backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px)}
body.shielded #shield{display:grid}
#shield .sh-in{max-width:34ch;text-align:center}
#shield b{display:block;font-family:var(--f);font-size:19px;font-weight:800;
  color:var(--ink);margin-bottom:8px}
#shield span{font-size:14px;line-height:1.6;color:var(--ink-2)}

/* Printing and Save-as-PDF, on every guarded page rather than only the
   desk — sit.html and doc.html show the same paid material and used to
   print perfectly. */
@media print{
  body.guarded>*,body.desk-open>*{display:none!important}
  body.guarded::after,body.desk-open::after{display:block;padding:60px 24px;text-align:center;
    font-family:system-ui,sans-serif;font-size:15px;font-weight:600;color:#26262F;
    content:"Examust study content cannot be printed."}
}