/* Visual identity from DESIGN-AND-BEHAVIOUR.md and the approved prototype: calm, editorial, unhurried. */
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-style: normal; font-display: swap;
  src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-weight: 100 1000; font-style: normal; font-display: swap;
  src: url('/fonts/dm-sans-latin-wght-normal.woff2') format('woff2'); }

:root {
  --bg: #f4f5f0; --paper: #ffffff; --ink: #223b35; --muted: #76817b; --green: #174c3e;
  --green-soft: #eef4ed; --line: #e6e9e1; --gold: #b19c67; --red: #ad4b49; --on-green: #ffffff;
  --rail: #1d4b3e; --rail-ink: #dae4cf; --card-line: #e2e6dc; --panel: #f9faf6;
  --badge: #f0f3eb; --badge-ink: #64784e; --letter-ink: #7b8970; --prompt: #334139; --hover: #f6f8f2;
  --sel-bg: #eff4e9; --sel-line: #809b6c; --ok-bg: #f0f7ee; --ok-line: #b3cfaf; --ok-ink: #2e6138;
  --no-bg: #fcf1ef; --no-line: #e4bfba; --no-ink: #9e4843; --tool: #7d8879; --faint: #9aa18e;
  --disabled-bg: #dce5d5; --disabled-ink: #87947b; --primary-hover: #25634e; --switch: #c4cfb8;
  --head: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --bg: #101916; --paper: #18251f; --ink: #e0e9df; --muted: #a1b1a3; --green: #8bc8aa;
  --green-soft: #25382c; --line: #344338; --gold: #c4af7b; --red: #efa8a1; --on-green: #11271c;
  --rail: #1d3a2e; --rail-ink: #dae4cf; --card-line: #344338; --panel: #19251f;
  --badge: #293a2d; --badge-ink: #c0d7a7; --letter-ink: #b5c6a2; --prompt: #e0e9df; --hover: #25352a;
  --sel-bg: #30452e; --sel-line: #9bbd7e; --ok-bg: #223e2c; --ok-line: #64936a; --ok-ink: #c0e2b8;
  --no-bg: #422b29; --no-line: #a76a60; --no-ink: #f0b8ac; --tool: #b4c5a7; --faint: #9eae98;
  --disabled-bg: #344437; --disabled-ink: #abb7a1; --primary-hover: #a1d3b5; --switch: #65b997;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--body); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; transition: background .18s, transform .18s, border-color .18s; }
button:disabled { cursor: default; }
button:not(:disabled):active { transform: translateY(1px); }
svg { width: 20px; height: 20px; flex-shrink: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

/* Brand */
.brand { display: inline-flex; align-items: center; gap: .3em; color: var(--green); font: 650 28px/1 var(--head); letter-spacing: -.8px; }
.brand-mark, .brand-mark-wrap svg { display: block; width: 1.5em; height: 1.45em; flex: none; }
.brand-mark-wrap { display: inline-flex; }
.brand-name { white-space: nowrap; text-transform: lowercase; }
.eyebrow, .label { margin: 0; font: 700 10px/1.3 var(--head); letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }

/* Theme switch */
.theme-toggle { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 4px 0; color: var(--muted); }
.theme-toggle-label { font-size: 12px; }
.theme-switch { width: 30px; height: 18px; padding: 2px; border-radius: 20px; background: var(--switch); display: block; }
.theme-switch > span { display: block; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0002; transition: transform .18s; }
.theme-toggle[aria-checked='true'] .theme-switch > span { transform: translateX(12px); }
.theme-toggle[aria-checked='true'] .theme-switch { background: #65b997; }

/* Buttons */
.primary, .secondary { border: 1px solid transparent; padding: 12px 22px; border-radius: 8px; font-weight: 500; font-size: 13px;
  display: inline-flex; justify-content: center; align-items: center; gap: 8px; }
.primary { background: var(--green); color: var(--on-green); }
.primary:hover:not(:disabled) { background: var(--primary-hover); }
.primary:disabled { background: var(--disabled-bg); color: var(--disabled-ink); }
.center { text-align: center; }

/* ---------- Home-style pages (home, area, errors) ---------- */
.home-page { min-height: 100dvh; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.home-page::before { content: ''; position: absolute; width: 680px; height: 680px; right: -460px; top: 70px; z-index: -1;
  border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 65px var(--green-soft), 0 0 0 66px var(--line); opacity: .55; }
.home-header { width: min(1180px, 88%); margin: 0 auto; padding: 30px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.home-content { width: min(560px, 90%); margin: auto; padding: 24px 0 40px; }
.home-content.wide { width: min(760px, 92%); }
.home-content > .eyebrow { text-align: center; margin-bottom: 18px; }
.home-content h1 { font: 650 clamp(30px, 5vw, 39px)/1.25 var(--head); letter-spacing: -1.6px; text-align: center; margin: 0; }
.home-content h1 { text-wrap: balance; }
.home-content h1 em { font-style: normal; color: #6e8164; }
:root[data-theme='dark'] .home-content h1 em { color: #b7cc9d; }
.home-intro { text-align: center; line-height: 1.7; color: var(--muted); font-size: 15px; margin: 18px 0 28px; }
.home-menu { display: grid; gap: 12px; }
.menu-card { display: flex; align-items: center; gap: 18px; padding: 20px 22px; min-height: 86px; border: 1px solid var(--line);
  border-radius: 14px; background: var(--panel); text-align: left; }
.menu-card strong { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.menu-card small { display: block; font-size: 12px; color: var(--muted); }
.menu-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--badge); color: var(--letter-ink); flex-shrink: 0; }
.menu-card.primary-card { background: var(--green); color: var(--on-green); border-color: var(--green); box-shadow: 0 8px 22px #174c3e12; }
:root[data-theme='dark'] .menu-card.primary-card { background: #294e39; border-color: #496b4d; color: #e0e9df; }
.primary-card small { color: #bdd0c5; }
.primary-card .menu-icon { background: #ffffff13; color: #d3dfbf; }
.menu-card.soon-card { opacity: .8; }
a.menu-card:hover { background: var(--hover); border-color: #9eaf91; }
.soon { margin-left: auto; font-size: 9px; letter-spacing: 1px; border: 1px solid var(--line); padding: 5px 8px; border-radius: 5px; color: var(--muted); white-space: nowrap; }
.menu-count { margin-left: auto; font: 600 14px var(--head); color: var(--muted); }
.home-section { margin: 34px 0 12px; }
.home-details { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; font-size: 12px; color: var(--faint); margin-top: 20px; }
.home-footer { width: min(1180px, 88%); margin: 0 auto; padding: 22px 0; border-top: 1px solid var(--line); display: flex;
  justify-content: space-between; gap: 12px; font-size: 12px; color: var(--faint); }
.home-footer span:first-child { font: italic 14px Georgia, serif; color: #6c7c62; }
:root[data-theme='dark'] .home-footer span:first-child { color: #b7cc9d; }

.qlist { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.qlist a { display: flex; gap: 14px; align-items: baseline; padding: 13px 16px; border: 1px solid var(--card-line); border-radius: 10px;
  background: var(--paper); font-size: 14px; line-height: 1.55; color: #455046; }
:root[data-theme='dark'] .qlist a { color: #d9e4d9; }
.qlist a:hover { background: var(--hover); border-color: #9eaf91; }
.qlist b { flex-shrink: 0; font: 600 12px var(--head); color: var(--letter-ink); }
.area-card { background: var(--paper); border: 1px solid var(--card-line); border-radius: 18px; padding: 28px; }
.area-card h1 { text-align: left; font-size: 26px; letter-spacing: -1px; margin: 8px 0 4px; }
.area-card .count { margin: 0; color: var(--muted); font-size: 14px; }
.crumbs { margin: 0 0 14px; font-size: 12px; color: var(--faint); }
.crumbs a:hover { color: var(--green); }
.crumbs span[aria-hidden] { margin: 0 6px; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; font-size: 13px; color: var(--muted); }
.pager a { color: var(--green); font-weight: 500; }

/* ---------- Question page ---------- */
.quiz-shell { position: relative; max-width: 1064px; margin: 0 auto; padding: 18px 18px 24px; display: flex; flex-direction: column; gap: 16px; }
.quiz-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.quiz-top .brand { font-size: 24px; }
.top-tools { display: flex; align-items: center; gap: 16px; }
.left-rail { display: none; }
.rail-handle, .info-handle, .scrim { display: none; }
.quiz-main { min-width: 0; display: flex; flex-direction: column; }
.question-card { background: var(--paper); border: 1px solid var(--card-line); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }

.question-toolbar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.question-id { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.question-id span { font-size: 9px; color: var(--muted); letter-spacing: .5px; }
.question-id strong { font: 500 20px/1.1 var(--head); color: #516a42; letter-spacing: -.3px; }
:root[data-theme='dark'] .question-id strong { color: #bacba7; }
.source-badge { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 12px; border-radius: 7px; background: var(--badge);
  font-size: 12px; line-height: 1.4; }
.source-badge b { font-weight: 700; color: var(--badge-ink); padding-right: 10px; border-right: 1px solid var(--line); }
.toolbar-badge { display: flex; order: 3; flex: 1 1 100%; }
.header-badge { display: none; }
.tools { display: flex; align-items: center; gap: 3px; margin-left: auto; }
.icon-button { border: 0; background: transparent; color: var(--tool); width: 32px; height: 32px; display: grid; place-items: center; border-radius: 6px; padding: 5px; }
.icon-button svg { width: 18px; height: 18px; }
.icon-button:hover:not(:disabled):not([aria-disabled='true']) { background: var(--green-soft); color: var(--green); }
.icon-button:disabled, .icon-button[aria-disabled='true'] { opacity: .3; }
.tool-divider { height: 18px; width: 1px; background: var(--line); margin: 0 6px; }

.question-scroll { padding: 26px clamp(18px, 4vw, 42px) 24px; }
.question-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.question-heading .eyebrow { font-size: 9px; letter-spacing: 1.9px; }
.prompt { white-space: pre-wrap; font: 400 16px/1.8 var(--body); letter-spacing: normal; margin: 0 0 26px; color: var(--prompt); }
.options { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.opt { width: 100%; display: flex; align-items: center; gap: 15px; text-align: left; min-height: 54px; padding: 13px 17px;
  background: var(--paper); border: 1px solid var(--card-line); border-radius: 10px; font-size: 14px; line-height: 1.55; color: #455046; }
:root[data-theme='dark'] .opt { color: #d9e4d9; }
.opt:not(:disabled):hover { background: var(--hover); border-color: #9eaf91; }
.opt .letter { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid var(--line); border-radius: 7px;
  font: 650 11px var(--body); flex-shrink: 0; color: var(--letter-ink); }
.opt-text { white-space: pre-wrap; }
.opt[aria-checked='true'] { background: var(--sel-bg); border-color: var(--sel-line); }
.opt[aria-checked='true'] .letter { background: #dfe9d5; color: #42612d; border-color: transparent; }
:root[data-theme='dark'] .opt[aria-checked='true'] .letter { background: #48613b; color: #f0f6e9; }
.opt.correct { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.opt.wrong { background: var(--no-bg); border-color: var(--no-line); color: var(--no-ink); }
.options.done .opt { cursor: default; }
.options.done .opt:not(.correct):not(.wrong) { color: var(--muted); }

.feedback { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; min-height: 46px; }
#result { margin: 0; font-size: 13px; line-height: 1.6; }
#result.ok { color: var(--ok-ink); } #result.no { color: var(--no-ink); }
.next-action { width: 166px; min-width: 166px; height: 46px; margin-left: auto; padding: 0 12px; }

.quiz-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--faint); padding: 4px 4px 0; }
.quiz-bottom .crumbs { margin: 0; }
.quiz-bottom > span { font-style: italic; }

.info-sidebar { display: flex; flex-direction: column; gap: 13px; }
.info-card { border: 1px solid var(--card-line); border-radius: 13px; background: var(--panel); padding: 17px 18px; }
.info-card .label { margin-bottom: 10px; }
.resolution { display: flex; align-items: center; gap: 8px; width: 100%; margin: 4px 0 8px; padding: 10px 11px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--badge); color: var(--badge-ink); font-size: 12px; opacity: .75; }
.resolution svg { width: 16px; height: 16px; }
.resolution .soon { margin-left: auto; padding: 3px 6px; font-size: 8px; }
.info-card dl { margin: 0; }
.info-card dt { font-size: 11px; color: var(--faint); margin-top: 12px; }
.info-card dd { margin: 2px 0 0; font-size: 13px; line-height: 1.6; color: #6d7f5c; }
:root[data-theme='dark'] .info-card dd { color: #b3c6a3; }
.info-card dd.empty { color: var(--faint); }
.info-links { display: grid; gap: 2px; }
.info-links a { padding: 8px 0; font-size: 13px; color: var(--green); border-bottom: 1px solid var(--line); }
.info-links a:last-child { border-bottom: 0; }

/* Mid widths: side bars become overlays opened by hover, click on the handle, or keyboard focus. */
@media (min-width: 850px) and (max-width: 1539px) {
  .quiz-shell { padding: 20px 52px 24px; }
  .toolbar-badge { display: none; }
  .left-rail, .info-sidebar { position: fixed; z-index: 5; transition: transform .25s; }
  .left-rail { display: block; top: 50%; left: 0; width: 228px; padding: 20px 18px; border-radius: 0 16px 16px 0;
    background: var(--rail); transform: translate(-200px, -50%); }
  .left-rail .brand { display: none; }
  .left-rail:hover, .left-rail:focus-within, .quiz-shell.rail-open .left-rail { transform: translate(0, -50%); }
  .rail-handle { display: block; position: absolute; right: 9px; top: 50%; height: 26px; width: 3px; padding: 0; border: 0;
    border-radius: 3px; background: #b6c6a7; transform: translateY(-50%); }
  .info-sidebar { top: 16px; bottom: 16px; right: 0; width: 310px; padding: 12px 12px 12px 40px; transform: translateX(282px);
    background: var(--bg); border: 1px solid var(--line); border-right: 0; border-radius: 15px 0 0 15px; overflow-y: auto; }
  .info-sidebar:hover, .info-sidebar:focus-within, .quiz-shell.info-open .info-sidebar { transform: translateX(0); }
  .info-handle { display: flex; align-items: center; justify-content: center; position: fixed; z-index: 5; right: 0; top: calc(50% - 75px);
    height: 150px; width: 28px; padding: 4px; border: 0; border-radius: 12px 0 0 12px; background: var(--green); color: var(--on-green); }
  .scrim { display: block; position: fixed; inset: 0; z-index: 4; background: #1b302833; backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
  .quiz-shell:has(.left-rail:hover, .left-rail:focus-within, .info-sidebar:hover, .info-sidebar:focus-within) .scrim,
  .quiz-shell.rail-open .scrim, .quiz-shell.info-open .scrim { opacity: 1; visibility: visible; }
  .header-badge { display: block; max-width: 460px; }
  .question-scroll { padding: 24px 28px; }
}

/* Wide: three columns, rail on the left, panel on the right. */
@media (min-width: 1540px) {
  .quiz-shell { display: grid; grid-template-columns: 200px minmax(0, 960px) 280px; gap: 24px; max-width: 1536px; padding: 24px; align-items: start; }
  .quiz-top, .header-badge { display: none; }
  .left-rail { display: block; position: sticky; top: 24px; padding: 22px 16px; border-radius: 16px; background: var(--rail); }
  .left-rail .brand { display: flex; justify-content: center; color: #f1f5e9; font-size: 22px; letter-spacing: -.6px; margin: 2px 0 18px; }
  .toolbar-badge { display: flex; order: 0; flex: 1 1 auto; }
  .question-toolbar { padding: 15px 24px; min-height: 86px; flex-wrap: nowrap; }
  .question-scroll { padding: 27px 42px 24px; }
  .prompt { font-size: 18px; }
  .opt { font-size: 15px; padding: 15px 19px; }
  .quiz-bottom { grid-column: 2; }
  .info-sidebar { position: sticky; top: 24px; }
  .info-card { padding: 18px; }
  .info-card dd, .resolution, .info-links a { font-size: 14px; }
}
.rail-nav { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid #ffffff1c; }
.rail-nav a, .rail-nav .rail-item { display: flex; align-items: center; gap: 12px; padding: 11px 6px; border-radius: 6px; color: var(--rail-ink);
  font-size: 15px; line-height: 1.4; }
.rail-nav a:hover { background: #ffffff0c; }
.rail-nav svg { width: 26px; height: 26px; }
.rail-item { opacity: .6; }
.rail-item .soon { color: var(--rail-ink); border-color: #ffffff30; margin-left: auto; font-size: 8px; padding: 3px 6px; }
.left-rail .theme-toggle { width: 100%; justify-content: space-between; margin-top: 8px; padding: 14px 6px 6px; border-top: 1px solid #ffffff24;
  color: var(--rail-ink); font-size: 15px; }
.left-rail .theme-toggle-label { font-size: 15px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.menu-arrow { margin-left: auto; width: 18px; height: 18px; color: var(--muted); }
.primary-card .menu-arrow { color: #d3dfbf; }
.qlist b { min-width: 84px; white-space: nowrap; }

/* Links to the study areas in the footer of the home and area pages */
.footer-areas { width: min(1180px, 88%); margin: 0 auto; padding: 8px 0 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 13px; color: var(--faint); }
.footer-areas span { font: 700 10px var(--head); letter-spacing: 1.6px; text-transform: uppercase; }
.footer-areas a { color: var(--muted); }
.footer-areas a:hover { color: var(--green); text-decoration: underline; }