/* ==========================================================================
   Tokens — light (default) palette. Dark palette redefines the same names
   under prefers-color-scheme and [data-theme="dark"] below.
   ========================================================================== */
:root {
  --ink: #1b2430;
  --ink-soft: #5a5f68;
  --paper: #f3f1ea;
  --panel: #ffffff;
  --panel-raised: #ffffff;
  --line: #d8d4c8;
  --accent: #1d4e6b;
  --accent-rgb: 29, 78, 107;
  --accent-soft: #e4eef2;
  --accent2: #c8763f;
  --good: #2f6b46;
  --good-soft: #eaf3ec;
  --bad: #9c3b2e;
  --bad-soft: #f6e9e7;
  --warn: #b5842a;
  --warn-soft: #faf1de;
  --mono: 'IBM Plex Mono', 'SF Mono', Menlo, monospace;
  --serif: 'Source Serif Pro', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;

  /* Deliberately NOT --ink/--paper: those two swap meaning in dark mode so the
     page inverts correctly, but the exam status bar should stay a dark bar in
     both themes — using --ink/--paper here would flip it to a light bar. */
  --examtop-bg: #1b2430;
  --examtop-fg: #f3f1ea;

  --shadow-sm: 0 1px 2px rgba(var(--accent-rgb), 0.08), 0 1px 1px rgba(var(--accent-rgb), 0.05);
  --shadow-md: 0 6px 18px -6px rgba(var(--accent-rgb), 0.20), 0 2px 6px -2px rgba(var(--accent-rgb), 0.10);
  --shadow-lg: 0 14px 34px -10px rgba(var(--accent-rgb), 0.30), 0 4px 12px -4px rgba(var(--accent-rgb), 0.16);

  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #eceef1;
    --ink-soft: #9aa2ac;
    --paper: #12171e;
    --panel: #1b232c;
    --panel-raised: #212b35;
    --line: #2d3945;
    --accent: #6fa9c9;
    --accent-rgb: 111, 169, 201;
    --accent-soft: rgba(111, 169, 201, 0.14);
    --accent2: #d98f5c;
    --good: #6bbb8a;
    --good-soft: rgba(107, 187, 138, 0.14);
    --bad: #e2907c;
    --bad-soft: rgba(226, 144, 124, 0.14);
    --warn: #e2bd6f;
    --warn-soft: rgba(226, 189, 111, 0.14);
    --examtop-bg: #0a0e13;
    --examtop-fg: #eceef1;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
    --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.30);
    --shadow-lg: 0 14px 34px -10px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.35);
  }
}
:root[data-theme="dark"] {
  --ink: #eceef1;
  --ink-soft: #9aa2ac;
  --paper: #12171e;
  --panel: #1b232c;
  --panel-raised: #212b35;
  --line: #2d3945;
  --accent: #6fa9c9;
  --accent-rgb: 111, 169, 201;
  --accent-soft: rgba(111, 169, 201, 0.14);
  --accent2: #d98f5c;
  --good: #6bbb8a;
  --good-soft: rgba(107, 187, 138, 0.14);
  --bad: #e2907c;
  --bad-soft: rgba(226, 144, 124, 0.14);
  --warn: #e2bd6f;
  --warn-soft: rgba(226, 189, 111, 0.14);
  --examtop-bg: #0a0e13;
  --examtop-fg: #eceef1;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 6px 18px -6px rgba(0, 0, 0, 0.45), 0 2px 6px -2px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 14px 34px -10px rgba(0, 0, 0, 0.55), 0 4px 12px -4px rgba(0, 0, 0, 0.35);
}

* { box-sizing: border-box; }
html { color-scheme: light dark; }

body {
  margin: 0; font-family: var(--sans); color: var(--ink); background: var(--paper); line-height: 1.45;
  min-height: 100vh;
  background-image:
    linear-gradient(rgba(var(--accent-rgb), 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--accent-rgb), 0.055) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  transition: background-color 0.25s var(--ease-spring), color 0.25s var(--ease-spring);
}

/* Theme crossfade: named properties only (never `all`), so toggling light/dark
   fades every surface together instead of the body fading while cards, tags,
   and borders snap. Elements with their own transition list (buttons, options,
   nav cells, clock) fully override this rule per the cascade, so those get the
   same properties added directly to their own declarations below. */
*, *::before, *::after {
  transition: background-color 0.25s var(--ease-spring), border-color 0.25s var(--ease-spring), color 0.25s var(--ease-spring);
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

.fe-wrap { max-width: 880px; margin: 0 auto; padding: 28px 20px 60px; }
.fe-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
h1.fe-title { font-family: var(--serif); font-size: 30px; font-weight: 600; margin: 0 0 4px; letter-spacing: -0.01em; }
.fe-sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 28px; }

/* ---------- Surfaces / depth system ---------- */
.fe-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
}
/* Signature: drafting-corner tick mark, top-left of every card */
.fe-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 14px; height: 14px;
  border-top: 2px solid var(--accent2);
  border-left: 2px solid var(--accent2);
  border-radius: 4px 0 0 0;
  opacity: 0.55;
  pointer-events: none;
}

/* ---------- Buttons ---------- */
.fe-btn {
  font-family: var(--sans); font-weight: 600; font-size: 14px;
  background: var(--accent); color: #fff; border: none; border-radius: 3px;
  padding: 11px 20px; cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease-spring), box-shadow 0.15s var(--ease-spring), background-color 0.15s var(--ease-spring), border-color 0.15s var(--ease-spring), color 0.15s var(--ease-spring);
}
.fe-btn:hover { background: #163d54; box-shadow: var(--shadow-md); transform: translateY(-1px); }
.fe-btn:active { transform: translateY(0) scale(0.98); box-shadow: var(--shadow-sm); }
.fe-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; }
.fe-btn.secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); box-shadow: none; }
.fe-btn.secondary:hover { background: var(--accent-soft); transform: translateY(-1px); }
.fe-btn.danger { background: transparent; color: var(--bad); border: 1px solid var(--bad); box-shadow: none; }
.fe-btn.danger:hover { background: var(--bad-soft); }
.fe-btn.small { padding: 7px 12px; font-size: 12px; }

.fe-btn:focus-visible,
.fe-opt:focus-visible,
.fe-navcell:focus-visible,
.fe-arealabel:focus-within,
.fe-theme-toggle:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

.fe-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.fe-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.fe-field label { font-size: 12px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.fe-field select, .fe-field input[type=number] {
  font-family: var(--mono); font-size: 14px; padding: 9px 10px; border: 1px solid var(--line);
  border-radius: 2px; background: var(--panel); color: var(--ink);
}
.fe-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.fe-arealist { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow-y: auto; }
.fe-arealabel { display: flex; align-items: center; gap: 8px; font-size: 13.5px; padding: 6px 4px; cursor: pointer; border-radius: 2px; transition: background-color 0.15s var(--ease-spring); }
.fe-arealabel:hover { background: var(--accent-soft); }
.fe-tag.tier-1 { background: var(--bad-soft); color: var(--bad); }
.fe-tag.tier-2 { background: var(--warn-soft); color: var(--warn); }
.fe-tag.tier-3 { background: var(--good-soft); color: var(--good); }

.fe-checkrow { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; margin-top: 4px; }

/* ---------- Theme toggle ---------- */
.fe-theme-toggle {
  position: fixed; top: 16px; right: 16px; z-index: 20;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--line); color: var(--ink);
  font-size: 16px; cursor: pointer; box-shadow: var(--shadow-md);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s var(--ease-spring), background-color 0.25s var(--ease-spring), border-color 0.25s var(--ease-spring), color 0.25s var(--ease-spring);
}
.fe-theme-toggle:hover { transform: scale(1.06); }
.fe-theme-toggle:active { transform: scale(0.95); }

/* ---------- Exam header (floating) ---------- */
.fe-examtop {
  position: sticky; top: 0; background: var(--examtop-bg); color: var(--examtop-fg); padding: 10px 20px;
  display: flex; justify-content: space-between; align-items: center; border-radius: 4px;
  margin-bottom: 18px; font-family: var(--mono); font-size: 13px; z-index: 5;
  box-shadow: var(--shadow-lg);
  gap: 10px; flex-wrap: wrap;
}
.fe-clock { font-size: 20px; font-weight: 600; letter-spacing: 0.03em; transition: color 0.6s var(--ease-spring); }
.fe-clock.warn { color: var(--warn); }
.fe-clock.low { color: var(--bad); animation: fe-pulse 2.4s ease-in-out infinite; }
@keyframes fe-pulse { 50% { opacity: 0.6; } }

/* Plays once per freshly-inserted question card (CSS animations restart on
   insertion; app.js only adds this class when state.current actually changed,
   so selecting an option or flagging doesn't replay it). */
@keyframes fe-q-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fe-q-enter { animation: fe-q-enter 0.22s var(--ease-spring); }

.fe-qmeta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 8px; flex-wrap: wrap; }
.fe-qnum { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.fe-tag { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; background: var(--accent-soft); color: var(--accent); padding: 3px 8px; border-radius: 2px; }
.fe-qtext { font-size: 17px; margin-bottom: 20px; line-height: 1.6; }
.fe-qtext sup, .fe-qtext sub, .fe-opt sup, .fe-opt sub, .fe-hint sup, .fe-hint sub { font-size: 0.7em; }
.katex-display { overflow-x: auto; overflow-y: hidden; padding: 2px 0; }
.fe-sqrt { white-space: nowrap; }
.fe-sqrt-arg { border-top: 1.5px solid currentColor; padding: 0 3px 0 1px; margin-left: 1px; }

.fe-qimage-wrap {
  background: #fff; border: 1px solid var(--line); border-radius: 4px;
  padding: 12px; margin: 4px 0 20px; display: inline-block; max-width: 100%;
}
.fe-qimage { display: block; max-width: 100%; height: auto; }

.fe-table-wrap { overflow-x: auto; margin: 12px 0; }
.fe-table { border-collapse: collapse; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.fe-table th, .fe-table td { border: 1px solid var(--line); padding: 6px 12px; text-align: right; }
.fe-table th:first-child, .fe-table td:first-child { text-align: left; }
.fe-table thead th { background: var(--panel); color: var(--ink-soft); font-weight: 600; text-align: center; }
.fe-table thead th:first-child { text-align: left; }

.fe-opt {
  display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 3px; margin-bottom: 8px; cursor: pointer; font-size: 14.5px;
  background: var(--panel);
  transition: border-color 0.15s var(--ease-spring), background-color 0.15s var(--ease-spring), transform 0.1s var(--ease-spring), color 0.25s var(--ease-spring);
}
.fe-opt:hover { border-color: var(--accent); }
.fe-opt:active { transform: scale(0.995); }
.fe-opt.selected { border-color: var(--accent); background: var(--accent-soft); }
.fe-opt .fe-optkey { font-family: var(--mono); font-weight: 700; color: var(--accent); flex-shrink: 0; width: 18px; }
.fe-opt.correct { border-color: var(--good); background: var(--good-soft); }
.fe-opt.incorrect { border-color: var(--bad); background: var(--bad-soft); }
.fe-checkbox { font-size: 15px; flex-shrink: 0; width: 18px; color: var(--accent); }

.fe-fillblank { margin-bottom: 4px; }
.fe-blank-input {
  font-family: var(--mono); font-size: 18px; padding: 12px 14px; width: 100%; max-width: 280px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel); color: var(--ink);
  transition: border-color 0.15s var(--ease-spring);
}
.fe-blank-input:focus { border-color: var(--accent); outline: none; }
.fe-fillblank-review { font-size: 14px; display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.fe-fillblank-review strong { font-family: var(--mono); }

.fe-navgrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin: 14px 0; }
.fe-navcell {
  font-family: var(--mono); font-size: 12px; text-align: center; padding: 7px 0; border: 1px solid var(--line);
  border-radius: 2px; cursor: pointer; background: var(--panel); color: var(--ink);
  transition: border-color 0.15s var(--ease-spring), transform 0.1s var(--ease-spring), background-color 0.25s var(--ease-spring), color 0.25s var(--ease-spring);
}
.fe-navcell:hover { border-color: var(--accent); transform: translateY(-1px); }
.fe-navcell.answered { background: var(--accent-soft); border-color: var(--accent); }
.fe-navcell.flagged { border-color: var(--warn); background: var(--warn-soft); }
.fe-navcell.current { outline: 2px solid var(--ink); outline-offset: 1px; }

.fe-panel-title { font-family: var(--serif); font-size: 19px; margin: 0 0 10px; }
.fe-scorebig { font-family: var(--serif); font-size: 46px; margin: 6px 0; }
.fe-catrow { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; gap: 10px; }
.fe-catrow:last-child { border-bottom: none; }
.fe-bar-track { flex: 1; height: 7px; background: var(--accent-soft); border-radius: 4px; margin: 0 12px; overflow: hidden; }
.fe-bar-fill { height: 100%; background: var(--accent); transition: width 0.4s var(--ease-spring); }
.fe-bar-fill.low { background: var(--bad); }
.fe-bar-fill.mid { background: var(--warn); }

.fe-hint { font-size: 12px; color: var(--ink-soft); margin-top: 4px; display: inline-block; }
.fe-histrow { display: flex; justify-content: space-between; align-items: center; font-size: 13px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-family: var(--mono); gap: 10px; flex-wrap: wrap; }
.fe-kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line); border-radius: 3px; padding: 1px 5px; background: var(--panel-raised); }

/* ---------- Banner (resume-session prompt) ---------- */
.fe-banner {
  border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 4px;
  padding: 16px 20px; margin-bottom: 18px; display: flex; justify-content: space-between;
  align-items: center; gap: 14px; flex-wrap: wrap; box-shadow: var(--shadow-sm);
}
.fe-banner.warn { border-color: var(--bad); background: var(--bad-soft); color: var(--bad); }

/* ---------- Modal (floating layer — highest in depth system) ---------- */
.fe-modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 14, 18, 0.55); backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.fe-modal {
  background: var(--panel-raised); border-radius: 6px; padding: 28px; max-width: 440px; width: 100%;
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.fe-modal p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* ---------- Analytics dashboard ---------- */
.fe-dash-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.fe-stat-card { padding: 18px 20px; margin-bottom: 0; }
.fe-stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 8px; }
.fe-stat-value { font-family: var(--serif); font-size: 30px; }

.fe-card a, .fe-hint a { color: var(--accent); }

.fe-heatmap-wrap { display: flex; gap: 8px; align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
.fe-heatmap-daylabels { display: flex; flex-direction: column; gap: 3px; font-family: var(--mono); font-size: 10px; color: var(--ink-soft); flex: 0 0 auto; padding-top: 1px; }
.fe-heatmap-daylabels span { height: 13px; line-height: 13px; }
.fe-heatmap { display: flex; gap: 3px; }
.fe-heat-col { display: flex; flex-direction: column; gap: 3px; }
.fe-heat-cell {
  width: 13px; height: 13px; border-radius: 2px; background: var(--line); display: inline-block;
  transition: background-color 0.25s var(--ease-spring);
}
.fe-heat-cell.good { background: var(--accent); }
.fe-heat-cell.mid { background: var(--warn); }
.fe-heat-cell.low { background: var(--bad); }
.fe-heat-cell.future { background: transparent; }
.fe-heatmap-legend { align-items: center; gap: 5px; margin-top: 10px; }

/* ---------- Footer ---------- */
.fe-footer {
  text-align: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-soft);
  padding: 20px 20px 28px;
  margin-top: 8px;
  border-top: 1px dashed var(--line);
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .fe-wrap { padding: 20px 14px 50px; }
  h1.fe-title { font-size: 24px; }
  .fe-grid2 { grid-template-columns: 1fr; }
  .fe-navgrid { grid-template-columns: repeat(6, 1fr); }
  .fe-dash-stats { grid-template-columns: repeat(2, 1fr); }
  .fe-examtop { flex-direction: row; font-size: 12px; padding: 9px 14px; }
  .fe-clock { font-size: 17px; }
  .fe-scorebig { font-size: 34px; }
  .fe-card { padding: 18px; }
  .fe-theme-toggle { top: 10px; right: 10px; width: 34px; height: 34px; }
}

/* ---------- Print (study review) ---------- */
@media print {
  .fe-theme-toggle, .fe-examtop, #fe-navgrid, .fe-btn { display: none !important; }
  body { background: #fff; }
  .fe-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}