/* =====================================================================
   ExamForge — "workbench" theme
   Walnut and oak timber, brass hardware, parchment stock. Every corner is
   square: the whole design language is cut, not moulded.

   Cards carry a graded brown edge — a dark walnut cap on top and a stack of
   progressively lighter laminate lines below — so panels read as sawn stock
   seen slightly from above rather than as floating rectangles.

   NOTE ON TOKEN NAMES: the --green / --blue* names are kept as aliases because
   view files reference them from inline styles. They now resolve to timber and
   brass. New work should use the --wood-* / --brass-* scale below.
   ===================================================================== */
:root{
  /* ---- timber scale: walnut heartwood through pale oak sap ---- */
  --wood-900:#1F1309;
  --wood-800:#2C1B0E;
  --wood-700:#3E2716;
  --wood-600:#54351C;
  --wood-500:#6B4523;
  --wood-400:#87582E;
  --wood-300:#A87643;
  --wood-200:#C69A63;
  --wood-100:#DFBF90;
  --wood-050:#EFDCBC;

  /* ---- brass hardware ---- */
  --brass:#A87B2E;
  --brass-lt:#C9993F;
  --brass-pale:#E8CE93;

  /* ---- paper stock ---- */
  --parch:#EFE6D4;        /* page */
  --parch-lt:#FBF6EA;     /* panels */
  --parch-dk:#E2D5BC;     /* wells, table stripes */

  --ink:#2A1D10;
  --ink-soft:#4A3824;

  /* ---- status: leather, moss, oxblood ---- */
  --ok:#4C6438;
  --ok-bg:#E7EBD9;
  --danger:#8C2F1E;
  --danger-bg:#F4E0DA;
  --warn:#9A6B18;
  --warn-bg:#F6E9CE;

  /* ---- legacy aliases (referenced from inline styles in the views) ---- */
  --green:var(--wood-700);
  --green-dk:var(--wood-800);
  --green-lt:var(--wood-500);
  --blue:var(--brass-pale);
  --blue-dk:var(--wood-500);
  --blue-bg:var(--parch-dk);
  --white:#ffffff;
  /* secondary text — dark enough to clear AA on both parchment tones (5.1:1) */
  --muted:#6F5C3E;
  --line:var(--wood-100);
  --bg:var(--parch);

  /* ---- semantic layer ----
     These are what a theme actually re-points (see themes.css). Every one of
     them resolves to the walnut values above, so the default workbench theme
     renders exactly as it always has; a theme file overrides the meanings
     rather than hunting for hard-coded hexes in the rules below.

     The rule of thumb: a raw hex survives in this file only where the colour
     is NOT a theme decision — the exam paper, which must stay a white sheet
     with black type in every theme, and the white logo tile behind school
     crests drawn for paper. */
  --surface:#FFFDF8;              /* inputs, tables, question rows, modal body */
  --surface-hover:#FFF9EC;
  --on-timber:#F7EEDC;            /* text on any timber/dark surface */
  --on-timber-bright:#FBF3E3;
  --on-timber-dim:#DFCDAE;
  --heading:var(--wood-700);
  --link:var(--wood-500);
  --link-hover:var(--wood-700);
  --label-ink:var(--wood-500);
  --accent-ink:var(--wood-600);   /* outline/ghost button text, pager, tags */
  --bevel:rgba(255,255,255,.85);  /* lit top edge on panels */
  --bevel-soft:rgba(255,255,255,.18);
  --focus-ring:rgba(168,123,46,.22);
  --scrim:rgba(31,19,9,.68);
  --zebra:rgba(198,154,99,.09);
  --row-hover:rgba(168,123,46,.16);
  --brass-dk:#7E5A1C;             /* seated edge under a brass button */
  --danger-lt:#A43A26;
  --danger-dk:#63200F;
  --on-danger:#FBEDE9;
  --ok-ink:#31421F;      --ok-line:#CBD4B4;
  --danger-ink:#6E2415;  --danger-line:#E0C2B9;
  --warn-ink:#5E4413;    --warn-line:#E3D0A6;
  --neutral-bg:#EDE4D3;  --neutral-ink:#5F4C33;

  --shadow:0 10px 22px rgba(43,26,12,.16);
  --shadow-sm:0 4px 10px rgba(43,26,12,.13);
  --radius:0;              /* sharp edges, everywhere */

  --grain:url('../images/wood-grain.svg');
  --fibre:url('../images/paper-fibre.svg');

  --serif:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --sans:'Segoe UI',Roboto,'Helvetica Neue',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}

/* The fibre texture is an OPAQUE mid-grey image, so it must be blended with the
   parchment rather than laid over it — without soft-light it simply paints the
   page grey and every heading loses its background. */
body{
  margin:0;font-family:var(--sans);color:var(--ink);line-height:1.55;
  background-color:var(--parch);
  background-image:var(--fibre);
  background-size:320px 320px;
  background-blend-mode:soft-light;
  background-attachment:fixed;
}

a{color:var(--link);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline;color:var(--link-hover)}
h1,h2,h3,h4{font-family:var(--serif);color:var(--heading);margin:.2em 0 .5em;
  font-weight:600;letter-spacing:-.01em}
h2{font-size:26px}
h3{font-size:19px}
img{max-width:100%}
hr{border:none;border-top:1px solid var(--wood-100)}

/* a reusable sawn-timber surface */
.timber,.topbar,.footer,.hero,.stat{
  background-color:var(--wood-700);
  background-image:var(--grain);
  background-size:cover;
  background-blend-mode:soft-light;
}

/* ---------------- layout ---------------- */
.container{max-width:1120px;margin:0 auto;padding:0 20px}
.main{padding:30px 0 64px;min-height:60vh}
.main-bare{padding:0;min-height:0}

/* ---------------- top bar ---------------- */
/* A workbench rail: dark walnut, a brass inlay along the bottom, and a hard
   shadow line under it so the bar sits proud of the page. */
.topbar{
  background-color:var(--wood-800);
  color:var(--on-timber);position:sticky;top:0;z-index:50;
  border-bottom:3px solid var(--brass);
  box-shadow:0 1px 0 var(--wood-900),0 3px 0 var(--wood-600),0 10px 22px rgba(31,19,9,.34);
}
.topbar .container{display:flex;align-items:center;gap:16px;height:64px;min-width:0}
.brand{font-family:var(--serif);font-size:23px;font-weight:600;color:var(--on-timber-bright);
  letter-spacing:.02em;display:flex;align-items:center;gap:8px}
.brand span{color:var(--brass-lt)}
.brand:hover{text-decoration:none;color:var(--on-timber-bright)}

/* The admin rail carries eleven items; rather than let a long nav push the page
   sideways it shrinks and, as a last resort, scrolls itself (chrome hidden).
   Below the breakpoint the burger takes over entirely. */
.nav{display:flex;gap:1px;margin-left:auto;align-items:center;flex-wrap:nowrap;
  min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{display:none}
.nav a{color:var(--on-timber-dim);padding:9px 10px;font-size:12px;font-weight:600;white-space:nowrap;
  text-transform:uppercase;letter-spacing:.045em;border-top:2px solid transparent}
.brand{flex:0 0 auto}
.nav a:hover{background:rgba(255,255,255,.07);color:var(--on-timber-bright);text-decoration:none}
.nav a.active{background:rgba(0,0,0,.28);color:var(--on-timber-bright);border-top-color:var(--brass-lt)}
.nav .pill{background:var(--brass);color:var(--wood-900);font-weight:700;
  border-top-color:var(--brass-lt)}
.nav .pill:hover{background:var(--brass-lt);color:var(--wood-900)}
/* badges riding in the nav shouldn't inherit the uppercase tracking */
.nav a .badge{text-transform:none;letter-spacing:0;margin-left:4px;vertical-align:1px}

.wallet-chip{background:var(--wood-900);color:var(--brass-lt);padding:7px 13px;
  font-weight:700;font-size:12.5px;letter-spacing:.05em;
  border:1px solid var(--wood-600);border-left:3px solid var(--brass)}
a.wallet-chip:hover{text-decoration:none;background:var(--wood-900);color:var(--brass-pale);
  filter:brightness(.8)}
.nav-wallet{margin-left:auto}

/* ---------------- theme picker ---------------- */
/* A brass toggle on the workbench rail. It is a <details> wrapping plain
   forms, so it still switches themes with scripting off; the script only
   closes it again. */
/* Exactly one auto margin may push the right-hand group, or the free space is
   split between them and the controls drift into the middle of the rail. The
   wallet chip claims it when it is present; otherwise the picker does. */
.theme-picker{position:relative;flex:0 0 auto;margin-left:auto}
.nav-wallet ~ .theme-picker{margin-left:8px}
.theme-picker ~ .nav{margin-left:0}
.theme-picker summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;
  padding:6px 10px;background:rgba(0,0,0,.26);border:1px solid var(--wood-600);
  color:var(--on-timber-dim);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
.theme-picker summary::-webkit-details-marker{display:none}
.theme-picker summary::marker{content:""}
.theme-picker summary:hover{background:rgba(0,0,0,.42);color:var(--on-timber-bright)}
.theme-picker[open] summary{background:rgba(0,0,0,.5);border-color:var(--brass);
  color:var(--on-timber-bright)}
.tp-dot{width:11px;height:11px;display:inline-block;border:1px solid rgba(255,255,255,.4)}

.tp-panel{
  position:absolute;right:0;top:calc(100% + 9px);width:296px;z-index:80;
  background:var(--parch-lt);border:1px solid var(--wood-600);
  border-top:3px solid var(--brass);box-shadow:var(--shadow);padding:10px 10px 4px;
}
.tp-panel form{margin:0}
.tp-head{margin:0 0 6px;font-family:var(--serif);font-size:15px;color:var(--heading)}
.tp-group{margin:9px 0 4px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.tp-opt{
  width:100%;display:flex;align-items:center;gap:10px;background:transparent;border:none;
  cursor:pointer;padding:7px 8px;text-align:left;font:inherit;color:var(--ink);
}
.tp-opt:hover{background:var(--parch-dk)}
.tp-opt.on{background:var(--parch-dk);box-shadow:inset 3px 0 0 var(--brass)}
.tp-chips{display:flex;gap:2px;flex:0 0 auto}
.tp-chips i{width:12px;height:24px;display:block;border:1px solid rgba(0,0,0,.25)}
.tp-text{flex:1;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.tp-text b{font-family:var(--serif);font-size:13.5px;font-weight:600;color:var(--heading)}
.tp-text em{font-style:normal;font-size:11px;color:var(--muted)}
.tp-tick{color:var(--brass);font-weight:700}
.tp-foot{margin:8px 0 6px;padding-top:8px;border-top:1px solid var(--wood-100);
  font-size:11.5px;color:var(--muted)}

/* Settings page: the same options, laid out to be browsed rather than flicked */
.tp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:2px}
.tp-grid .tp-opt{border:1px solid var(--wood-100);background:var(--surface)}
.tp-grid .tp-opt.on{background:var(--parch-dk);border-color:var(--brass)}

@media(max-width:1080px){
  .tp-name{display:none}
  .theme-picker{margin-left:auto;order:-1}
  .tp-panel{width:min(296px,calc(100vw - 28px))}
}

/* A standing control on the rail — the admin portal switch. Brass, so it reads
   as hardware rather than as one more nav link. */
.rail-pill{
  flex:0 0 auto;margin-left:8px;background:var(--brass);color:var(--wood-900);
  border:1px solid var(--brass-lt);padding:7px 12px;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
.rail-pill:hover{background:var(--brass-lt);color:var(--wood-900);text-decoration:none}

/* Below this the rail cannot hold brand + wallet + pill + theme + menu, so the
   pill steps aside and the copy in the menu footer takes over. Exactly one of
   the two is ever visible. */
.nm-narrow-only{display:none}
@media(max-width:620px){
  .rail-pill{display:none}
  .nm-narrow-only{display:inline-block}
}

/* ---------------- collapsed navigation ---------------- */
/* Members and admins carry ten-plus sections, which no rail holds; both get
   this drop-down at every width. The closed control names the section you are
   in, so the rail still answers "where am I" without being opened. */
.menu{position:relative;flex:0 0 auto;margin-left:8px}
.menu summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  padding:7px 12px;background:rgba(0,0,0,.26);border:1px solid var(--wood-600);
  color:var(--on-timber-dim);font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
.menu summary::-webkit-details-marker{display:none}
.menu summary::marker{content:""}
.menu summary svg{fill:currentColor;flex:0 0 auto}
.menu summary:hover{background:rgba(0,0,0,.42);color:var(--on-timber-bright)}
.menu[open] summary{background:rgba(0,0,0,.5);border-color:var(--brass);
  color:var(--on-timber-bright)}

.nm-panel{
  position:absolute;right:0;top:calc(100% + 9px);width:252px;z-index:80;
  background:var(--parch-lt);border:1px solid var(--wood-600);
  border-top:3px solid var(--brass);box-shadow:var(--shadow);padding:8px;
}
.nm-group{margin:10px 0 3px;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted)}
.nm-group:first-child{margin-top:2px}
.nm-item{display:flex;align-items:center;gap:8px;padding:8px 10px;
  color:var(--ink);font-size:13.5px}
.nm-item:hover{background:var(--parch-dk);color:var(--heading);text-decoration:none}
.nm-item.on{background:var(--parch-dk);color:var(--heading);font-weight:600;
  box-shadow:inset 3px 0 0 var(--brass)}
.nm-item .badge{margin-left:auto}
.nm-foot{display:flex;gap:6px;margin-top:10px;padding-top:9px;
  border-top:1px solid var(--wood-100)}
.nm-foot .btn{flex:1;text-align:center}

@media(max-width:560px){
  .nm-cur{display:none}
  .nm-panel{width:min(252px,calc(100vw - 24px))}
}

/* hamburger */
.nav-toggle{display:none}
.nav-burger{display:none;cursor:pointer;width:42px;height:38px;margin-left:auto;
  align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18)}
.nav-burger:hover{background:rgba(255,255,255,.10)}
.nav-burger span,.nav-burger span::before,.nav-burger span::after{content:"";display:block;
  width:22px;height:2px;background:var(--on-timber-dim);position:relative;transition:.2s}
.nav-burger span::before{position:absolute;top:-7px}
.nav-burger span::after{position:absolute;top:7px}

@media(max-width:1080px){
  .nav-burger{display:flex}
  .nav{position:absolute;top:64px;left:0;right:0;margin:0;overflow:visible;
    background-color:var(--wood-800);background-image:var(--grain);
    background-size:cover;background-blend-mode:soft-light;
    flex-direction:column;align-items:stretch;gap:0;padding:8px 12px 14px;
    border-bottom:3px solid var(--brass);
    box-shadow:0 16px 30px rgba(31,19,9,.4);display:none}
  .nav-toggle:checked ~ .nav{display:flex}
  .nav a{padding:12px 10px;font-size:13px;border-top:none;
    border-left:3px solid transparent}
  .nav a.active{border-left-color:var(--brass-lt)}
  .nav .pill{text-align:center;margin-top:8px;border-left-color:var(--brass-lt)}
  .nav-toggle:checked ~ .nav-burger span{background:transparent}
  .nav-toggle:checked ~ .nav-burger span::before{top:0;transform:rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span::after{top:0;transform:rotate(-45deg)}
}

/* ---------------- cards / panels ---------------- */
/* The signature edge: walnut cap on top, three laminate lines stepping lighter
   down the bottom edge, hairline oak on the sides. */
.card{
  background:var(--parch-lt);
  border:1px solid var(--wood-100);
  border-top:3px solid var(--wood-600);
  padding:22px;margin-bottom:22px;position:relative;
  box-shadow:
    inset 0 1px 0 var(--bevel),
    0 1px 0 var(--wood-050),
    0 2px 0 var(--wood-200),
    0 3px 0 var(--wood-400),
    0 12px 22px rgba(43,26,12,.15);
}
.card h2,.card h3{margin-top:0}
/* nested cards (batch tiles, subject tiles inside a card) stay quiet */
.card .card{box-shadow:0 1px 0 var(--wood-200),0 2px 0 var(--wood-400);}

.grid{display:grid;gap:20px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------------- buttons ---------------- */
/* Cut, not moulded: square, a lit top bevel and a dark seated bottom edge that
   collapses when pressed. */
.btn{
  display:inline-block;background:var(--wood-600);color:var(--on-timber);border:none;
  padding:11px 20px;font-family:var(--sans);font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.07em;cursor:pointer;
  box-shadow:inset 0 1px 0 var(--bevel-soft),0 2px 0 var(--wood-800);
  transition:background .14s,box-shadow .1s,transform .1s;
}
.btn:hover{background:var(--wood-500);text-decoration:none;color:var(--on-timber-bright)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 var(--wood-800)}
.btn.blue{background:var(--brass);color:var(--wood-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 2px 0 var(--brass-dk)}
.btn.blue:hover{background:var(--brass-lt);color:var(--wood-900)}
.btn.blue:active{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 var(--brass-dk)}
.btn.outline{background:transparent;color:var(--accent-ink);
  border:1.5px solid var(--wood-400);box-shadow:none}
.btn.outline:hover{background:var(--wood-600);color:var(--on-timber);border-color:var(--wood-600)}
.btn.outline:active{transform:translateY(1px)}
.btn.ghost{background:var(--parch-dk);color:var(--accent-ink);
  box-shadow:inset 0 1px 0 var(--bevel),0 2px 0 var(--wood-200)}
.btn.ghost:hover{background:var(--wood-050);color:var(--heading)}
.btn.danger{background:var(--danger);color:var(--on-danger);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 var(--danger-dk)}
.btn.danger:hover{background:var(--danger-lt);color:#fff}
.btn.sm{padding:6px 12px;font-size:11.5px;letter-spacing:.06em}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 var(--wood-800)}

/* ---------------- forms ---------------- */
label{display:block;font-weight:700;font-size:11px;margin:14px 0 5px;
  color:var(--label-ink);text-transform:uppercase;letter-spacing:.09em}
input,select,textarea{
  width:100%;padding:10px 12px;border:1px solid var(--wood-200);
  font-size:14px;font-family:inherit;color:var(--ink);
  background:var(--surface);box-shadow:inset 0 2px 3px rgba(84,53,28,.09);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass);
  box-shadow:inset 0 2px 3px rgba(84,53,28,.07),0 0 0 3px var(--focus-ring)}
input[type=file]{padding:8px 10px;background:var(--parch-dk);box-shadow:none;font-size:13px}
/* Logo swatch: white tile, because school crests are usually drawn for paper
   and a transparent PNG would disappear against the parchment. */
.logo-preview{display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--wood-200);border-top:3px solid var(--wood-400);
  padding:14px;margin-bottom:8px;min-height:96px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 var(--wood-100)}
.logo-preview[hidden]{display:none}
.logo-preview img{max-height:104px;max-width:100%;object-fit:contain}
input[type=checkbox]{width:auto;box-shadow:none;accent-color:var(--wood-500)}
.form-narrow{max-width:430px;margin:0 auto}

/* ---------------- alerts ---------------- */
/* A stamped notice pasted to the board: heavy left rule, square corners. */
.alert{padding:13px 16px;margin-bottom:18px;font-size:14px;
  border:1px solid var(--wood-100);border-left:5px solid;
  box-shadow:0 2px 0 var(--wood-100)}
.alert.ok{background:var(--ok-bg);border-left-color:var(--ok);color:var(--ok-ink);border-color:var(--ok-line)}
.alert.err{background:var(--danger-bg);border-left-color:var(--danger);color:var(--danger-ink);border-color:var(--danger-line)}
.alert.info{background:var(--warn-bg);border-left-color:var(--brass);color:var(--warn-ink);border-color:var(--warn-line)}

/* ---------------- tables ---------------- */
/* Ledger ruling: walnut header capped in brass, warm alternating stock. */
.table{width:100%;border-collapse:collapse;font-size:13.5px;
  background:var(--surface);border:1px solid var(--wood-200)}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--wood-050)}
.table th{
  background-color:var(--wood-700);background-image:var(--grain);
  background-size:cover;background-blend-mode:soft-light;
  color:var(--on-timber);font-weight:700;font-size:11px;text-transform:uppercase;
  letter-spacing:.09em;border-bottom:3px solid var(--brass);
}
.table tr:nth-child(even) td{background:var(--zebra)}
.table tr:hover td{background:var(--row-hover)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table td:first-child,.table th:first-child{border-left:none}

/* Wide report tables scroll inside their own panel rather than dragging the
   whole page sideways on a phone. Scoped to narrow viewports so desktop
   panels keep their laminate edge uninterrupted. */
@media(max-width:880px){
  .card{overflow-x:auto}
  .table{min-width:520px}
}

/* ---------------- badges ---------------- */
/* Stamped tags, not pills. */
.badge{display:inline-block;padding:2px 8px;font-size:11px;font-weight:700;
  letter-spacing:.05em;border:1px solid;text-transform:uppercase}
.badge.green{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.badge.blue{background:var(--parch-dk);color:var(--accent-ink);border-color:var(--wood-200)}
/* --muted sits at 4.34:1 on this tint — one notch darker clears AA */
.badge.gray{background:var(--neutral-bg);color:var(--neutral-ink);border-color:var(--wood-100)}
.badge.red{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-line)}

/* ---------------- pager ---------------- */
.pager{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:20px}
.pager .pg{padding:7px 15px;border:1px solid var(--wood-200);background:var(--parch-lt);
  color:var(--accent-ink);font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;box-shadow:0 2px 0 var(--wood-100)}
.pager .pg:hover{background:var(--wood-600);color:var(--on-timber);text-decoration:none;border-color:var(--wood-600)}
.pager .pg.disabled{opacity:.4;pointer-events:none}
.pager .pg-info{color:var(--muted);font-size:12.5px;letter-spacing:.03em}

/* ---------------- hero (landing) ---------------- */
.hero{position:relative;color:var(--on-timber);padding:92px 0;text-align:center;overflow:hidden;
  background-color:var(--wood-700);
  border-bottom:4px solid var(--brass);
  box-shadow:inset 0 0 120px rgba(20,11,4,.55);
}
/* deepen the corners so the plank has weight */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 42%,rgba(0,0,0,0) 30%,rgba(20,11,4,.55) 100%)}
.hero .container{position:relative;z-index:2}
.hero h1{color:var(--on-timber-bright);font-size:46px;margin:0 0 14px;line-height:1.12;
  text-shadow:0 2px 10px rgba(0,0,0,.5)}
.hero h1 span{color:var(--brass-lt)}
.hero p{font-size:17.5px;color:var(--on-timber-dim);max-width:660px;margin:0 auto 28px}

/* section heading with rules either side of the title.
   overflow:hidden keeps the flanking rules from widening the page once the
   title grows long enough to fill a narrow viewport. */
.section-head{text-align:center;margin:52px 0 24px;overflow:hidden}
/* h1 is matched alongside h2 because the page-level heading of a sub-page
   (How it works, Subjects) sits in one of these bands, and it should carry the
   same flanking rules as any other section title. */
.section-head h1,.section-head h2{margin:0;display:inline-block;position:relative;padding:0 18px}
.section-head h1::before,.section-head h1::after,
.section-head h2::before,.section-head h2::after{content:"";position:absolute;top:50%;
  width:46px;height:1px;background:var(--wood-300)}
.section-head h1::before,.section-head h2::before{right:100%}
.section-head h1::after,.section-head h2::after{left:100%}
.section-head p{color:var(--muted);margin:8px 0 0}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:820px){.features{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.features{grid-template-columns:1fr}}
/* Four-across variant for the four-step row; folds to 2 then 1 in step with
   the base grid's breakpoints so the two never disagree at a given width. */
.features.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.features.cols-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.features.cols-4{grid-template-columns:1fr}}

/* Column layout so every card fills its grid row to the same height and the
   text sits flush at the top regardless of how much copy each one carries. */
.feature{display:flex;flex-direction:column;background:var(--parch-lt);padding:24px;text-align:left;
  border:1px solid var(--wood-100);border-top:3px solid var(--brass);
  box-shadow:0 1px 0 var(--wood-050),0 2px 0 var(--wood-200),0 3px 0 var(--wood-400),
             0 12px 22px rgba(43,26,12,.14)}
.feature .ic{font-size:26px;filter:saturate(.72)}
.feature h3{margin:10px 0 6px}
.feature p{margin:0;color:var(--muted);font-size:14px}

/* The step number as a struck-brass token rather than a loose digit, sized to
   read as a sibling of the emoji icons on the feature cards above it. */
.step-badge{width:40px;height:40px;font-size:18px;filter:none;
  background-color:var(--wood-700);background-image:var(--grain);
  background-size:cover;background-blend-mode:soft-light;
  color:var(--brass-pale);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;border:1px solid var(--wood-900)}

/* use cases */
.usecases{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
@media(max-width:900px){.usecases{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.usecases{grid-template-columns:1fr}}
.usecase{background:var(--parch-lt);border:1px solid var(--wood-100);
  border-left:3px solid var(--wood-500);padding:22px;
  box-shadow:0 2px 0 var(--wood-200),0 8px 16px rgba(43,26,12,.12)}
.usecase .ic{width:44px;height:44px;
  background-color:var(--wood-600);background-image:var(--grain);
  background-size:cover;background-blend-mode:soft-light;
  color:var(--brass-pale);display:flex;align-items:center;justify-content:center;
  font-size:21px;margin-bottom:12px;border:1px solid var(--wood-800)}
.usecase h3{margin:0 0 6px;font-size:17px}
.usecase p{margin:0;color:var(--muted);font-size:14px}

.cta-band{background:var(--parch-dk);border:1px solid var(--wood-200);
  border-top:3px solid var(--wood-600);text-align:center;padding:32px;margin-top:44px;
  box-shadow:0 2px 0 var(--wood-200),0 3px 0 var(--wood-400)}

/* how-it-works steps */
.steps{list-style:none;margin:0;padding:0;position:relative}
.steps::before{content:"";position:absolute;left:19px;top:12px;bottom:12px;width:1px;
  background:var(--wood-300)}
.step{display:flex;gap:18px;align-items:flex-start;margin-bottom:16px;position:relative}
.step-num{flex:0 0 40px;width:40px;height:40px;
  background-color:var(--wood-700);background-image:var(--grain);
  background-size:cover;background-blend-mode:soft-light;
  color:var(--brass-pale);display:flex;align-items:center;justify-content:center;
  font-family:var(--serif);font-weight:700;font-size:17px;position:relative;z-index:1;
  border:1px solid var(--wood-900);box-shadow:0 0 0 4px var(--parch)}
.step-card{flex:1;background:var(--parch-lt);border:1px solid var(--wood-100);
  border-left:3px solid var(--wood-400);padding:16px 20px;
  box-shadow:0 2px 0 var(--wood-100),0 6px 14px rgba(43,26,12,.11)}
.step-card h2{margin:0 0 6px;font-size:17px}
.step-card p{margin:0 0 10px;color:var(--ink-soft);font-size:14.5px}
.step-ic{margin-right:5px}

/* ---------------- subject / dashboard cards ---------------- */
.subj{display:flex;flex-direction:column;gap:8px}
.subj .code{font-size:11px;color:var(--label-ink);font-weight:700;letter-spacing:.12em;
  text-transform:uppercase}
.subj .meta{color:var(--muted);font-size:13px}

/* A branded block of end-grain with the figure stamped in brass. */
.stat{display:flex;flex-direction:column;align-items:center;justify-content:center;
  background-color:var(--wood-700);color:var(--on-timber);padding:20px 18px;text-align:center;
  border:1px solid var(--wood-900);border-top:3px solid var(--brass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 2px 0 var(--wood-800),
             0 10px 20px rgba(43,26,12,.22)}
.stat .n{font-family:var(--serif);font-size:34px;font-weight:700;color:var(--brass-pale);
  line-height:1.1;font-variant-numeric:tabular-nums}
.stat .l{font-size:11px;color:var(--on-timber-dim);text-transform:uppercase;letter-spacing:.09em;
  margin-top:4px}

/* ---------------- exam builder ---------------- */
.builder{display:grid;grid-template-columns:1fr 370px;gap:22px;align-items:start}
/* grid items default to min-width:auto, so a wide question row would stretch
   the track past the viewport instead of scrolling inside its own card */
.builder > *{min-width:0}
@media(max-width:880px){.builder{grid-template-columns:1fr}
  .builder #bank{max-height:none}}
.builder #bank{max-height:calc(100vh - 240px);overflow-y:auto;padding-right:6px}

.qrow{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;
  border:1px solid var(--wood-100);border-left:3px solid var(--wood-200);
  margin-bottom:9px;background:var(--surface);transition:border-color .12s,background .12s}
.qrow:hover{border-left-color:var(--brass);background:var(--surface-hover)}
.qrow .sum{flex:1;min-width:0}
.qrow .mk{color:var(--accent-ink);font-weight:700;white-space:nowrap;
  font-variant-numeric:tabular-nums}
.selected-list .qrow{cursor:grab;border-left:3px solid var(--brass)}
.selected-list .qrow.dragging{opacity:.35}
.handle{color:var(--wood-300);cursor:grab;font-size:17px;user-select:none}
.qrow .preview-btn{white-space:nowrap}

/* preview modal */
.modal{position:fixed;inset:0;z-index:100;background:var(--scrim);
  display:flex;align-items:center;justify-content:center;padding:18px}
.modal[hidden]{display:none}
.modal-box{background:var(--parch-lt);width:min(840px,100%);max-height:90vh;
  display:flex;flex-direction:column;border:1px solid var(--wood-600);
  border-top:4px solid var(--brass);
  box-shadow:0 24px 60px rgba(15,9,3,.55)}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;border-bottom:1px solid var(--wood-100);color:var(--heading);
  font-family:var(--serif);background:var(--parch-dk)}
.modal-x{background:none;border:none;font-size:25px;line-height:1;cursor:pointer;
  color:var(--wood-400);padding:0 4px}
.modal-x:hover{color:var(--danger)}
.modal-body{padding:18px;overflow:auto;background:var(--surface)}
.modal-body img{display:block;max-width:100%;margin-left:auto}
.modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:12px 18px;
  border-top:1px solid var(--wood-100);background:var(--parch-dk)}

.summary-bar{position:static}
.selected-list{max-height:300px;overflow-y:auto;padding-right:6px}

/* warm, square scrollbars inside the builder panes */
.builder #bank::-webkit-scrollbar,.selected-list::-webkit-scrollbar{width:10px}
.builder #bank::-webkit-scrollbar-track,.selected-list::-webkit-scrollbar-track{background:var(--parch-dk)}
.builder #bank::-webkit-scrollbar-thumb,.selected-list::-webkit-scrollbar-thumb{
  background:var(--wood-300);border:2px solid var(--parch-dk)}
.builder #bank::-webkit-scrollbar-thumb:hover,.selected-list::-webkit-scrollbar-thumb:hover{
  background:var(--wood-500)}

/* ---------------- the exam paper itself ----------------
   Deliberately untouched by the theme: a question paper must read as a clean
   white document on screen and on paper. The timber stops at the frame. */
/* The cover and the question sheet are the same sheet of paper: identical
   max-width AND identical padding, so their text columns line up on screen
   exactly as they will on the printed page. Change one, change both. */
.cover,.exam-sheet{max-width:780px;margin:0 auto;padding:44px;background:#fff;
  border:1px solid #C9BEA8;
  box-shadow:0 2px 0 var(--wood-100),0 14px 30px rgba(43,26,12,.20)}
.cover{font-family:'Times New Roman',Georgia,serif;font-size:14pt;color:#111}
.cover .logo-wrap{display:flex;margin-bottom:14px}
.cover .logo-wrap.center{justify-content:center}
.cover .logo-wrap.left{justify-content:flex-start}
.cover .logo-wrap.right{justify-content:flex-end}
.cover .logo-wrap img{max-height:90px}
.cover .inst{text-align:center;font-size:20pt;font-weight:bold}
.cover .doctype{text-align:center;font-size:17pt;margin:6px 0 18px;letter-spacing:2px;
  text-transform:uppercase}
.cover .fields{width:100%;border-collapse:collapse;margin:18px 0}
.cover .fields td{border:1px solid #333;padding:10px 12px;font-size:14pt}
.cover .instr{border:1px solid #333;padding:14px;margin-top:14px;font-size:14pt}
.cover .instr h4{margin:0 0 8px;color:#000;font-family:'Times New Roman',Georgia,serif}

.exam-q{display:flex;gap:10px;margin-bottom:22px;align-items:flex-start}
.exam-q .qnum{flex:0 0 26px;font-weight:bold;font-size:14pt;text-align:right;padding-top:10px;
  font-family:'Times New Roman',Georgia,serif;color:#111}
.exam-q .qbody{flex:1;min-width:0}
.exam-q .qbody img{display:block;margin-left:auto;max-width:100%}

/* ---------------- faq ---------------- */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);background:var(--parch-lt)}
/* A flex row puts the marker first, on the left of the question, instead of the
   old absolutely-positioned "+" on the right. list-style:none plus both marker
   pseudo-elements suppress the browser's native disclosure triangle, which is
   what was stacking a second arrow above the text in some engines. */
.faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;
  gap:12px;padding:16px 18px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::marker{content:""}
.faq-item summary::before{content:"+";flex:0 0 1em;font-size:22px;line-height:1;
  color:var(--accent-ink);text-align:center}
.faq-item[open] summary::before{content:"–"}
.faq-item summary h3{margin:0;font-size:17px;font-weight:600}
.faq-item summary:hover{background:var(--surface-hover)}
.faq-item > p{margin:0;padding:0 18px 18px;color:var(--ink-soft);max-width:70ch}

/* ---------------- footer ---------------- */
.footer{background-color:var(--wood-900);color:var(--on-timber-dim);padding:34px 0 24px;font-size:13px;
  margin-top:48px;border-top:3px solid var(--brass)}
.footer a{color:var(--brass-lt)}
.footer a:hover{color:var(--brass-pale)}
.foot-nav{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:26px}
@media(max-width:700px){.foot-nav{grid-template-columns:1fr;gap:20px}}
.foot-col{display:flex;flex-direction:column;gap:7px;min-width:0}
.foot-col a{text-decoration:none}
.foot-col a:hover{text-decoration:underline}
.foot-h{margin:0 0 4px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-timber);font-weight:700}
.foot-blurb{margin:0;max-width:36ch;line-height:1.6}
.foot-legal{margin:24px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);
  line-height:1.6}

/* ---------------- preview watermark ---------------- */
.preview-wrap{position:relative}
.preview-watermark{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden;
  display:flex;flex-wrap:wrap;gap:46px 60px;transform:rotate(-30deg) scale(1.4);
  transform-origin:center;opacity:.15;user-select:none}
.preview-watermark span{color:var(--wood-700);font-weight:800;font-size:18px;
  white-space:nowrap;letter-spacing:1px}

/* ---------------- analytics report (admin) ---------------- */
.an-head{margin-bottom:6px}
.an-sub{color:var(--muted);margin:0 0 16px;max-width:62ch}
.an-crumb{font-size:13px;color:var(--muted);margin:0 0 10px}
.an-filter{
  display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center;justify-content:space-between;
  background:var(--parch-lt);border:1px solid var(--wood-200);border-top:3px solid var(--brass);
  padding:12px 14px;margin-bottom:22px;
  box-shadow:0 2px 0 var(--wood-100)}
.an-presets{display:flex;flex-wrap:wrap;gap:6px}
.an-filter .btn.on,.an-presets .btn.on{
  background:var(--wood-700);color:var(--on-timber);border-color:var(--wood-700)}
.an-dates{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.an-dates label{margin:0;font-size:10px}
.an-dates input[type=date]{width:auto;min-width:148px;padding:7px 10px}
.an-kpis{margin-bottom:22px}
.an-kpis .stat .l{display:flex;flex-direction:column;align-items:center;gap:2px}
.an-delta{font-size:10px;letter-spacing:.04em;font-weight:700}
.an-delta.up{color:#C5D9A8}
.an-delta.down{color:#E8B4A8}
.an-delta.flat{color:var(--on-timber-dim)}
.an-split{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}
@media(max-width:820px){.an-split{grid-template-columns:1fr}}
.an-chart-card canvas{max-width:100%}
.an-empty{color:var(--muted);font-size:14px;margin:8px 0}
.an-bar{display:block;height:8px;background:var(--parch-dk);border:1px solid var(--wood-100);
  min-width:64px}
.an-bar > span{display:block;height:100%;background:var(--brass);min-width:2px}
.an-path{font-family:ui-monospace,Consolas,monospace;font-size:12px;word-break:break-all}
.an-email{color:var(--muted);font-size:12px;font-weight:400}
.an-userhead{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start;
  justify-content:space-between;margin-bottom:14px}
.an-userhead h3{margin:0 0 4px}
.an-userhead p{margin:0;color:var(--muted);font-size:14px}
.an-search{display:flex;gap:8px;align-items:center}
.an-search input[type=search]{width:220px;padding:7px 10px;margin:0}
.an-product{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 18px;
  font-size:14px;color:var(--ink-soft)}
.an-product b{color:var(--heading);font-variant-numeric:tabular-nums}

@media print{
  .topbar,.footer,.no-print{display:none!important}
  .preview-wrap{display:none!important}
  body{background:#fff}                 /* drops the fibre image too */
  /* on paper the sheet IS the page — drop the on-screen frame and let the
     printer's own margins define the text column */
  .cover,.exam-sheet{box-shadow:none;border:none;margin:0;padding:0;max-width:none}
  .page-break{page-break-after:always}
}