/* ============================================================
   styles.css — shared design system for the Test Portal
   ============================================================
   Single source of truth for the visual language used by the
   admin, the taker portal, and the quiz engine. Each page links
   this file, then adds only its own page-specific layout.

   Tokens use the canonical names (--surface, --text, --accent…).
   The quiz engine historically used a different vocabulary
   (--ink, --paper, --card…); those are provided here as aliases
   so its existing styles keep working against the same palette.
   ============================================================ */

:root{
  /* Neutrals — cool off-white with a faint green bias */
  --bg:#F4F7F5; --surface:#FFFFFF; --surface-2:#FAFBFA; --surface-3:#F1F4F2;
  --border:#E4E9E5; --border-strong:#D3DAD5;
  --text:#16211C; --muted:#5F6B65; --faint:#8A948E;
  /* Accent — pine green */
  --accent:#147A57; --accent-hover:#0F6146; --accent-soft:#E4F1EB; --on-accent:#FFFFFF;
  /* Semantic status */
  --amber-bg:#FBF0DA; --amber-tx:#946213;
  --slate-bg:#EDF0F2; --slate-tx:#586572;
  --rose-bg:#FBE8E6; --rose-tx:#B0463B;
  /* Elevation */
  --shadow-sm:0 1px 2px rgba(20,40,30,.06), 0 1px 3px rgba(20,40,30,.04);
  --shadow-md:0 4px 12px -4px rgba(20,40,30,.12), 0 2px 6px -2px rgba(20,40,30,.08);
  --shadow-lg:0 24px 60px -20px rgba(20,40,30,.4);
  /* Type */
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* ---- Quiz-engine aliases (map old names to the shared palette) ---- */
  --ink:var(--text); --ink-soft:var(--muted); --paper:var(--bg); --paper-line:var(--border);
  --card:var(--surface); --accent-calm:var(--accent); --accent-warn:var(--amber-tx);
  --accent-alert:var(--rose-tx); --serif:var(--sans);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0E1411; --surface:#161D19; --surface-2:#1A221D; --surface-3:#202A24;
    --border:#26302A; --border-strong:#334038;
    --text:#E9EEEB; --muted:#9BA8A1; --faint:#71807A;
    --accent:#3FB488; --accent-hover:#57C79A; --accent-soft:#173028; --on-accent:#08130E;
    --amber-bg:#33280F; --amber-tx:#E4B463; --slate-bg:#222B31; --slate-tx:#9FB0BC;
    --rose-bg:#331E1C; --rose-tx:#E39189;
    --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 6px 18px -6px rgba(0,0,0,.5);
    --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  }
}
:root[data-theme="light"]{
  --bg:#F4F7F5; --surface:#FFFFFF; --surface-2:#FAFBFA; --surface-3:#F1F4F2;
  --border:#E4E9E5; --border-strong:#D3DAD5; --text:#16211C; --muted:#5F6B65; --faint:#8A948E;
  --accent:#147A57; --accent-hover:#0F6146; --accent-soft:#E4F1EB; --on-accent:#FFFFFF;
  --amber-bg:#FBF0DA; --amber-tx:#946213; --slate-bg:#EDF0F2; --slate-tx:#586572; --rose-bg:#FBE8E6; --rose-tx:#B0463B;
  --shadow-sm:0 1px 2px rgba(20,40,30,.06), 0 1px 3px rgba(20,40,30,.04);
  --shadow-md:0 4px 12px -4px rgba(20,40,30,.12), 0 2px 6px -2px rgba(20,40,30,.08);
  --shadow-lg:0 24px 60px -20px rgba(20,40,30,.4);
}
:root[data-theme="dark"]{
  --bg:#0E1411; --surface:#161D19; --surface-2:#1A221D; --surface-3:#202A24;
  --border:#26302A; --border-strong:#334038; --text:#E9EEEB; --muted:#9BA8A1; --faint:#71807A;
  --accent:#3FB488; --accent-hover:#57C79A; --accent-soft:#173028; --on-accent:#08130E;
  --amber-bg:#33280F; --amber-tx:#E4B463; --slate-bg:#222B31; --slate-tx:#9FB0BC; --rose-bg:#331E1C; --rose-tx:#E39189;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 6px 18px -6px rgba(0,0,0,.5); --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
}

/* ============================================================
   Base
   ============================================================ */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
.hidden{display:none !important;}
.tnum{font-variant-numeric:tabular-nums;}

/* ============================================================
   Toasts  (JS: toast(message, type) in ui.js)
   ============================================================ */
.toast-wrap{position:fixed;bottom:22px;right:22px;z-index:400;display:flex;flex-direction:column;gap:10px;max-width:360px;}
.toast{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
  padding:12px 15px;box-shadow:var(--shadow-md);font-size:13.5px;line-height:1.45;color:var(--text);
  animation:toastIn .18s ease;border-radius:0;}
.toast.error{border-left-color:var(--rose-tx);}
@keyframes toastIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* ============================================================
   Confirm dialog  (JS: confirmDialog(opts) in ui.js)
   ============================================================ */
.confirm-overlay{position:fixed;inset:0;background:rgba(15,25,20,.5);display:flex;align-items:center;
  justify-content:center;padding:24px;z-index:410;}
.confirm-box{background:var(--surface);border:1px solid var(--border);max-width:410px;width:100%;padding:22px;
  box-shadow:var(--shadow-lg);border-radius:0;}
.confirm-title{font-family:var(--sans);font-size:17px;font-weight:700;margin-bottom:8px;color:var(--text);}
.confirm-msg{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:18px;}
.confirm-actions{display:flex;justify-content:flex-end;gap:10px;}
.cbtn{font-family:var(--sans);font-size:13.5px;font-weight:600;padding:9px 16px;border:1px solid var(--border-strong);
  background:var(--surface);color:var(--text);cursor:pointer;border-radius:0;}
.cbtn.ok{background:var(--accent);color:#fff;border-color:var(--accent);}
.cbtn.ok.danger{background:#C4453A;border-color:#C4453A;}

/* ============================================================
   Buttons  —  canonical primary / ghost / danger / small
   ------------------------------------------------------------
   Works with either markup convention:
     <button class="primary">   (admin, quiz engine)
     <button class="btn primary">  (taker portal)
   The base look is applied only to the variant selectors, so
   page-specific utility buttons (.link-btn, .go, .nav-item,
   .icon-btn, bare <button>) are left untouched.
   ============================================================ */
.btn,
button.primary, button.ghost, button.danger{
  font-family:var(--sans); font-size:13.5px; font-weight:600; line-height:1.3;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  padding:9px 15px; border:1px solid transparent; border-radius:0;
  background:var(--surface-3); color:var(--text); cursor:pointer;
  transition:background .12s ease, border-color .12s ease, color .12s ease;
}
button.primary, .btn.primary{ background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
button.primary:hover, .btn.primary:hover{ background:var(--accent-hover); border-color:var(--accent-hover); }
button.ghost, .btn.ghost{ background:var(--surface); color:var(--text); border-color:var(--border-strong); }
button.ghost:hover, .btn.ghost:hover{ background:var(--surface-3); }
button.danger, .btn.danger{ background:var(--surface); color:var(--rose-tx); border-color:var(--rose-tx); }
button.danger:hover, .btn.danger:hover{ background:var(--rose-bg); }
button.small, .btn.small{ padding:6px 10px; font-size:12px; gap:5px; }
button.primary:disabled, button.ghost:disabled, button.danger:disabled, .btn:disabled{ opacity:.6; cursor:not-allowed; }
/* Keyboard focus ring + a subtle press, applied only to the variants. */
.btn:focus-visible,
button.primary:focus-visible, button.ghost:focus-visible, button.danger:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
.btn:not(:disabled):active,
button.primary:not(:disabled):active, button.ghost:not(:disabled):active, button.danger:not(:disabled):active{
  transform:translateY(1px);
}

/* ============================================================
   Form fields  —  canonical text inputs, textarea, select
   ------------------------------------------------------------
   The look is shared; per-page spacing (field margins) stays in
   each page so form layouts are unaffected.
   ============================================================ */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=datetime-local], input[type=date], input[type=search], input[type=url],
textarea, select{
  width:100%; border:1px solid var(--border); background:var(--surface-2);
  padding:10px 12px; font-family:var(--sans); font-size:14px; color:var(--text);
  border-radius:0;
}
input:focus, textarea:focus, select:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);
}
textarea{ min-height:70px; resize:vertical; line-height:1.5; }
input::placeholder, textarea::placeholder{ color:var(--faint); opacity:1; }

/* ============================================================
   Grading result tags  —  <span class="tag correct|incorrect|ungraded">
   ------------------------------------------------------------
   Colors only, so each review context keeps its own base type
   (the portal uses sans, the engine uses mono). Variant names are
   grading-specific and never collide with status pills (.tag.open…).
   ============================================================ */
.tag.correct{ background:var(--accent-soft); color:var(--accent); }
.tag.incorrect{ background:var(--rose-bg); color:var(--rose-tx); }
.tag.ungraded{ background:var(--slate-bg); color:var(--slate-tx); }

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion:reduce){
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}