/* Risk Trainer "blueprint" theme. Light is the default; dark follows the device unless the
   theme switch (theme.js) sets data-theme on <html>. Contrast is checked in
   tests/unit/test_nfr_a11y_theme.py. */

/* Inter v4.1, subset to this unicode-range (docs/decisions.md, 2026-10-29). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Inter-Regular-Latin1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026, U+20AC, U+2122, U+2212; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Inter-SemiBold-Latin1.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026, U+20AC, U+2122, U+2212; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2"); }

:root {
  --bg: #F4F8FB;
  --surface: #FFFFFF;
  --surface2: #EAF1F7;
  --text: #0E1B2A;
  --muted: #46586B;
  --border: #C3D2DF;
  --control: #5E7488;
  --accent: #006A7A;
  --on-accent: #FFFFFF;
  --accent-soft: #DDF1F4;
  --focus: #9A3412;
  --error: #B42318;
  --draft: #8A4B00;
  --draft-bg: #FFF4E5;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --page: 52rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A1520;
    --surface: #0F1E2D;
    --surface2: #13263A;
    --text: #E3EEF6;
    --muted: #9DB2C5;
    --border: #24405A;
    --control: #6F8DA8;
    --accent: #4FD6E8;
    --on-accent: #04131C;
    --accent-soft: #0E3340;
    --focus: #FFBF47;
    --error: #FF8A80;
    --draft: #FFD08A;
    --draft-bg: #33240A;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0A1520;
  --surface: #0F1E2D;
  --surface2: #13263A;
  --text: #E3EEF6;
  --muted: #9DB2C5;
  --border: #24405A;
  --control: #6F8DA8;
  --accent: #4FD6E8;
  --on-accent: #04131C;
  --accent-soft: #0E3340;
  --focus: #FFBF47;
  --error: #FF8A80;
  --draft: #FFD08A;
  --draft-bg: #33240A;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

/* The sticky slot bar must never cover the focused field (WCAG 2.4.11); app.js measures it. */
html:has(.slot-bar) { scroll-padding-top: calc(var(--slot-bar-h, 7rem) + 1rem); }

body {
  margin: 0;
  font: 1rem/1.55 var(--sans);
  color: var(--text);
  background: var(--bg);
  overflow-wrap: anywhere;
}

h1, h2, h3, strong, b, legend { font-weight: 600; }
h1 { line-height: 1.25; }

main, .site-footer, .bq-strip-inner, .masthead-inner, .nav-bar-inner { max-width: var(--page); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
main { padding-top: .5rem; padding-bottom: 2rem; }

a { color: var(--accent); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: var(--surface); color: var(--accent); padding: .5rem; z-index: 10; }

/* R18 banners: unchanged wording, new tokens. */
.banner { padding: .5rem 1rem; text-align: center; font-weight: 600; }
.banner-preview { background: var(--surface2); border-bottom: 1px solid var(--border); }
.banner-draft { background: var(--draft-bg); color: var(--draft); border-bottom: 2px solid var(--draft); }

/* Bearing Quest family strip: a fixed dark ground in both themes, like the masthead. The lockup
   is a full-colour SVG made for a dark ground; the border is decoration only. */
.bq-strip { background: #03080D; border-bottom: 1px solid #1C3A4F; color: #9DB2C5; font-size: .8rem; }
.bq-strip-inner { display: flex; align-items: center; gap: .6rem; padding-top: .3rem; padding-bottom: .3rem; }
.bq-lockup { height: 30px; width: auto; display: block; }

/* Masthead: the same dark blueprint ground in both themes, with its own focus color. */
.masthead {
  --focus: #FFBF47;
  background-color: #071019;
  background-image:
    linear-gradient(rgba(79, 214, 232, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79, 214, 232, 0.07) 1px, transparent 1px);
  background-size: 32px 32px;
  border-bottom: 1px solid #1C3A4F;
  color: #E3EEF6;
}
.site-name { color: #E3EEF6; font-weight: 600; text-decoration: none; }
.site-name:hover { text-decoration: underline; }
.masthead--slim .masthead-inner { display: flex; align-items: center; gap: .6rem; padding-top: .6rem; padding-bottom: .6rem; }
.masthead--slim svg { flex: none; }
.masthead--slim .site-name { font-size: 1.15rem; }
.masthead--full .masthead-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 1.5rem; padding-bottom: 1.5rem; }
.masthead--full .site-name { font-size: clamp(1.6rem, 5vw, 2.2rem); margin-top: .5rem; }
.banner-art { max-width: 100%; height: auto; display: block; }
.tagline { font-family: var(--mono); color: #9DB2C5; margin: .25rem 0 0; }

/* Nav bar under the masthead, with the theme switch. */
.nav-bar { background: var(--surface); border-bottom: 1px solid var(--border); }
.nav-bar-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; padding-top: .4rem; padding-bottom: .4rem; }
.nav-bar ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; }
.nav-bar a { display: inline-block; padding: .6rem 0; }
.theme-switch { display: flex; gap: .25rem; }
.theme-switch[hidden] { display: none; }
.theme-switch button {
  min-height: 44px; min-width: 44px; padding: 0 .75rem; margin: 0;
  font: 500 .85rem var(--mono); color: var(--text); background: var(--surface);
  border: 1px solid var(--control); border-radius: 6px; cursor: pointer;
}
.theme-switch button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.site-footer { color: var(--muted); font-size: .9rem; padding-bottom: 2rem; }
.site-footer p { border-top: 1px solid var(--border); padding-top: 1rem; margin: 0; }

/* Buttons */
.button, .exercise button[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  font: 600 1rem var(--sans); padding: .65rem 1.4rem; border: 0; border-radius: 6px;
  background: var(--accent); color: var(--on-accent); text-decoration: none; cursor: pointer;
}
.exercise button[type="submit"] { margin-top: 1rem; }
.button:hover, .exercise button[type="submit"]:hover { text-decoration: underline; }

/* Home: scenario cards */
.scenario-list { list-style: none; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); }
.scenario-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 4px; padding: 1.1rem; background: var(--surface); }
.scenario-card::before, .scenario-card::after { content: ""; position: absolute; width: 14px; height: 14px; border: 0 solid var(--accent); }
.scenario-card::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.scenario-card::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.scenario-card h3 { margin: 0 0 .5rem; }
.scenario-card > .tag { align-self: flex-start; margin: 0 0 .25rem; }
.scenario-card .button { align-self: flex-start; margin-top: auto; }
.difficulty { display: flex; align-items: center; gap: .5rem; font-family: var(--mono); }
.difficulty-pips { display: inline-flex; gap: 3px; }
.difficulty-pip { width: .55rem; height: .55rem; background: var(--accent); }

.meta, .signals { display: grid; gap: .3rem; margin: .5rem 0 1rem; }
.meta div, .signals div { display: grid; grid-template-columns: minmax(7rem, 40%) 1fr; gap: .5rem; }
dt { font: 500 .85rem/1.9 var(--mono); color: var(--muted); }
dd { margin: 0; }
dd ul { margin: 0; padding-left: 1.1rem; }

.tag { display: inline-block; border: 1px solid var(--control); border-radius: 999px; padding: 0 .55rem; font: .8rem/1.6 var(--mono); }
.tag-draft { color: var(--draft); background: var(--draft-bg); border-color: var(--draft); font-weight: 500; }

/* Exercise */
.context { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: .25rem 1.1rem 1rem; margin-bottom: 1.25rem; }
.capacity { background: var(--surface2); padding: .75rem; border-left: 4px solid var(--accent); margin-bottom: 0; }

.slot-bar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: .75rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 4px;
  padding: .5rem .75rem; margin: 1rem 0;
}
.slot-status { margin: 0; }
.slot-pips { display: inline-flex; gap: .35rem; flex: none; }
.slot-pips[hidden] { display: none; }
.pip { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--control); }
.pip.is-filled { background: var(--accent); border-color: var(--accent); }

.finding { background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 0 1.1rem 1rem; margin-top: 1.25rem; }
.finding h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; font-size: 1.25rem; }
.finding-id { font: 500 .85rem/1.5 var(--mono); color: var(--on-accent); background: var(--accent); border-radius: 3px; padding: 0 .45rem; }
.signals { background: var(--surface2); border-radius: 4px; padding: .75rem; }

.choices { border: 0; padding: 0; margin: 0 0 1rem; display: grid; gap: .5rem; }
.choices legend { padding: 0; margin-bottom: .5rem; }
.choice {
  display: flex; align-items: center; min-height: 48px; padding-left: .85rem;
  border: 1px solid var(--control); border-radius: 6px; background: var(--surface);
}
.choice input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--accent); }
.choice label { flex: 1; align-self: stretch; display: flex; align-items: center; font-weight: 400; margin: 0; padding: .6rem .85rem; cursor: pointer; }
/* Selected: a 2px accent border, with 1px less padding so the row doesn't shift. */
.choice:has(input:checked) { border: 2px solid var(--accent); padding-left: calc(.85rem - 1px); background: var(--accent-soft); }
.choice:has(input:checked) label { padding: calc(.6rem - 1px) calc(.85rem - 1px); }
.choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.choice input:focus-visible { outline: none; }
.choice:has(input:disabled) { border-style: dashed; }
.choice input:disabled + label { color: var(--muted); text-decoration: line-through; cursor: not-allowed; }

label { display: block; font-weight: 600; margin: .75rem 0 .25rem; }
.hint { font-weight: 400; color: var(--muted); font-size: .9rem; }
select, textarea { width: 100%; font: inherit; padding: .5rem; border: 1px solid var(--control); border-radius: 6px; background: var(--surface); color: var(--text); }
select { min-height: 44px; }

.error-summary { border: 2px solid var(--error); background: var(--surface); padding: 1rem; border-radius: 4px; margin: 1rem 0; }
.error-summary h2 { color: var(--error); margin-top: 0; font-size: 1.15rem; }

/* Results */
.score { font-size: 1.4rem; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; background: var(--surface); }
caption { text-align: left; font-weight: 600; padding: .5rem 0; }
th, td { text-align: left; vertical-align: top; padding: .5rem; border-bottom: 1px solid var(--border); }
.finding-debrief { border-top: 2px solid var(--border); margin-top: 1.5rem; }
.learner-text { background: var(--surface2); padding: .5rem .75rem; border-radius: 6px; white-space: pre-wrap; }
.approver-feedback, .why-not { border-left: 4px solid var(--draft); padding-left: .75rem; }
.peers { columns: 2 12rem; }
code { font-family: var(--mono); }