/* cra-assistent — a small, readable stylesheet for a reference tool.
   Government-adjacent reference material: prioritise legibility and scannable
   structure over decoration. Works in light and dark. */

:root {
  --bg: #fbfaf8;
  --surface: #ffffff;
  --ink: #1b1c1e;
  --ink-soft: #52565c;
  --line: #dcd9d4;
  --accent: #8c2b1f;      /* CRA-adjacent red, used sparingly */
  --accent-soft: #f6ece9;
  --note-bg: #fdf8e9;
  --note-line: #e2d3a3;
  --radius: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --surface: #1f2125;
    --ink: #eceef1;
    --ink-soft: #a6adb6;
    --line: #33363c;
    --accent: #e8836f;
    --accent-soft: #2c2320;
    --note-bg: #262218;
    --note-line: #4d452e;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* ---------- header ---------- */
.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.brand {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}

.site-header nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

.site-header nav a {
  color: var(--ink-soft);
  text-decoration: none;
  font-size: 0.94rem;
}

.site-header nav a:hover,
.site-header nav a:focus-visible { color: var(--accent); text-decoration: underline; }

/* ---------- layout ---------- */
main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0 0 0.6rem; letter-spacing: -0.02em; }
h2 { font-size: 1.2rem; margin: 2.5rem 0 1rem; letter-spacing: -0.01em; }
h3 { font-size: 1.02rem; margin: 0 0 0.35rem; }

.lede { font-size: 1.06rem; color: var(--ink-soft); max-width: 46rem; margin: 0 0 0.9rem; }

.scope {
  display: inline-block;
  margin: 0;
  padding: 0.4rem 0.75rem;
  background: var(--accent-soft);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ---------- numbered step list ---------- */
.step-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; }

.step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.15rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.step-n {
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.step-body p { margin: 0 0 0.6rem; color: var(--ink-soft); font-size: 0.95rem; }

.step-cta { color: var(--accent); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
.step-cta:hover, .step-cta:focus-visible { text-decoration: underline; }

/* ---------- disclaimer ---------- */
.disclaimer {
  max-width: 62rem;
  margin: 0 auto 2.5rem;
  padding: 0.9rem 1.15rem;
  background: var(--note-bg);
  border: 1px solid var(--note-line);
  border-radius: var(--radius);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--ink-soft);
}

.disclaimer strong { color: var(--ink); }

/* Wide content (limit tables, cited passages) scrolls in its own box rather
   than forcing the page to scroll sideways. */
.scroll-x { overflow-x: auto; }

@media (max-width: 34rem) {
  main { padding: 1.75rem 1rem 3rem; }
  .step { flex-direction: column; gap: 0.6rem; }
}

/* ---------- tutorials ---------- */

.crumb { margin: 0 0 1rem; font-size: 0.9rem; }
.crumb a { color: var(--ink-soft); text-decoration: none; }
.crumb a:hover { color: var(--accent); text-decoration: underline; }

.counts { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 1.25rem; font-size: 0.9rem; color: var(--ink-soft); }
.count strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* Banners. The warn variant carries the unverified message and must stay
   visually loud — it is the main safeguard on drafted content. */
.banner {
  padding: 0.9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid;
  margin: 0 0 1.75rem;
  font-size: 0.93rem;
  line-height: 1.55;
}
.banner-warn { background: var(--note-bg); border-color: var(--note-line); }
.banner-warn strong { display: block; margin-bottom: 0.25rem; color: var(--ink); }
.banner-ok { background: var(--accent-soft); border-color: var(--line); }
.banner code { font-size: 0.88em; background: rgba(128,128,128,0.15); padding: 0.1em 0.35em; border-radius: 4px; }

.tutorial-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }

.tutorial-card {
  padding: 1.05rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tutorial-head { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: baseline; justify-content: space-between; }
.tutorial-head h1, .tutorial-head h2 { margin: 0; font-size: 1.05rem; }
.tutorial-head h1 { font-size: 1.6rem; }
.tutorial-head a { color: var(--ink); text-decoration: none; }
.tutorial-head a:hover { color: var(--accent); text-decoration: underline; }

.tutorial-summary { margin: 0.45rem 0 0; color: var(--ink-soft); font-size: 0.93rem; }
.fact-line { margin: 0.45rem 0 0; font-size: 0.86rem; color: var(--ink-soft); }

.badge {
  flex: none;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.badge-verified { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.badge-draft    { background: #b8791a; border-color: #b8791a; color: #fff; }
.badge-review   { background: #4a5aa8; border-color: #4a5aa8; color: #fff; }
.badge-stub     { background: transparent; }

.overview-box {
  padding: 1.15rem 1.3rem;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 0 0 1.5rem;
}
.overview-box h2 { margin-top: 0; }

.prose-section { margin: 0 0 1.5rem; }
.prose { white-space: pre-wrap; font-size: 0.96rem; }
.empty { color: var(--ink-soft); font-style: italic; }

/* ---------- fact checklist ---------- */
.facts, .verify-box {
  margin-top: 2.5rem;
  padding: 1.25rem 1.35rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.facts h2, .verify-box h2 { margin-top: 0; }
.facts-intro { color: var(--ink-soft); font-size: 0.92rem; }

.fact-list { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.fact { padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: var(--radius); }
.fact-ok { border-left: 3px solid #1f7a4d; }

.fact-type {
  display: inline-block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 0.3rem;
}
.fact-claim { margin: 0; font-size: 0.95rem; }
.fact-note, .fact-src { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

.fact-form { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.fact-form input { flex: 1 1 14rem; }

input[type="url"], input[type="text"] {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  min-width: 0;
}
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

button {
  padding: 0.45rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
button:hover { filter: brightness(1.1); }

.verify-box form { display: grid; gap: 0.75rem; max-width: 32rem; }
.verify-box label { display: grid; gap: 0.3rem; font-size: 0.88rem; color: var(--ink-soft); }
.verify-box button { justify-self: start; }
.blocked { color: var(--ink-soft); font-size: 0.93rem; margin: 0; }

/* ---------- curriculum: lines of business and levels ---------- */
.lob { margin: 0 0 2.5rem; }
.lob-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  border-bottom: 2px solid var(--line); padding-bottom: 0.4rem;
}
.lob-head h2 { margin: 0; font-size: 1.3rem; }
.lob-progress {
  font-size: 0.85rem; color: var(--ink-soft); font-variant-numeric: tabular-nums;
}
.lob-summary { color: var(--ink-soft); font-size: 0.94rem; margin: 0.6rem 0 1rem; max-width: 46rem; }

.level-band { margin: 0 0 1.25rem; }
.level-h {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft); margin: 0 0 0.5rem;
}
.tutorial-card.is-done { border-left: 3px solid var(--accent); }
.tutorial-card h4 { margin: 0; font-size: 1.02rem; }
.card-meta {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--ink-soft);
}
.pill {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.76rem; border: 1px solid var(--line);
}
.pill-done { background: var(--accent-soft); border-color: var(--accent); }
.pill-wip { background: var(--note-bg); border-color: var(--note-line); }

/* ---------- prerequisites ---------- */
.prereqs {
  margin: 0 0 1.25rem; padding: 0.9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.prereqs h2 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.prereq-list { margin: 0; padding-left: 1.1rem; font-size: 0.92rem; }
.prereq-list li { margin: 0.2rem 0; }
.crumb-sep { color: var(--ink-soft); margin: 0 0.35rem; }

/* ---------- teaching examples (DEC-009) ----------
   An invented figure must never read as a quoted CRA figure. The flag is not
   decoration: it is what makes a worked example safe to publish. */
.prose-section.is-example {
  border-left: 3px solid var(--note-line); padding-left: 1rem;
}
.example-flag {
  background: var(--note-bg); border: 1px solid var(--note-line);
  border-radius: var(--radius); padding: 0.6rem 0.8rem;
  font-size: 0.88rem; margin: 0 0 0.8rem;
}

/* ---------- learner progress ---------- */
.progress-box {
  margin-top: 2rem; padding: 1.1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.progress-box h2 { margin: 0 0 0.35rem; font-size: 1rem; }
.progress-note { margin: 0 0 0.8rem; font-size: 0.87rem; color: var(--ink-soft); }
.progress-form { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.progress-btn {
  padding: 0.4rem 0.9rem; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bg); color: var(--ink); font-size: 0.9rem; cursor: pointer;
}
.progress-btn.is-current {
  background: var(--accent-soft); border-color: var(--accent); font-weight: 600;
}

/* ---------- reading list (/sources) ----------
   Derived from the claims on every request, never stored — see app/sources.py.
   The layout follows the tutorial index so the two read as one tool. */
.pub-group { margin: 0 0 2rem; }
.pub-group > h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }

.pub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.pub-card {
  padding: 0.9rem 1.1rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.pub-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.pub-ref {
  margin: 0; font-size: 1.02rem; letter-spacing: 0.01em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.pub-doc { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--ink-soft); }

.pub-detail, .unsourced-group { margin-top: 0.6rem; font-size: 0.9rem; }
.pub-detail > summary, .unsourced-group > summary {
  cursor: pointer; color: var(--ink-soft);
}
.unsourced-group {
  padding: 0.6rem 0.9rem; margin-top: 0.5rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}

.claim-list { margin: 0.6rem 0 0; padding-left: 1.1rem; }
.claim { margin: 0.45rem 0; line-height: 1.5; }
/* A confirmed claim is marked, not hidden: the reading list is about what is
   still outstanding, but the document is worth loading either way. */
.claim.is-confirmed { color: var(--ink-soft); }
.claim-src {
  display: inline-block; margin-left: 0.4rem;
  font-size: 0.82rem; color: var(--ink-soft);
}

/* ---------- curriculum search ----------
   The reveal rule below is the mechanism, not decoration: while #search-results
   holds anything the curriculum is hidden, and clearing the box empties it and
   brings the curriculum back. No JavaScript of ours is involved, which is why
   the fragment for an empty query must be byte-empty. */
#search-results:not(:empty) ~ .curriculum { display: none; }

.search-form { display: flex; gap: 0.5rem; margin: 0 0 1rem; }
.search-input {
  flex: 1; min-width: 0; padding: 0.5rem 0.75rem;
  font: inherit; font-size: 0.95rem;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.search-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.search-btn {
  padding: 0.5rem 1rem; font: inherit; font-size: 0.9rem; cursor: pointer;
  color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: var(--radius);
}

.search-count {
  margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--ink-soft);
}
.search-clear { margin-left: 0.5rem; font-size: 0.85rem; }
.search-hits { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.search-hits h3 { margin: 0; font-size: 1.02rem; }
.hit-where {
  margin: 0.25rem 0 0; font-size: 0.82rem; color: var(--ink-soft);
}
/* The matched claim is quoted curriculum text, and the curriculum is
   unverified — so it reads as an excerpt, never as an answer. */
.hit-claim {
  margin: 0.45rem 0 0; padding-left: 0.7rem; font-size: 0.9rem;
  color: var(--ink-soft); border-left: 2px solid var(--line);
}

/* ---------- jump index ---------- */
.jump-index {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin: 0 0 1.5rem; padding: 0.6rem 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.jump-link {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.3rem 0.7rem; font-size: 0.86rem; text-decoration: none;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
}
.jump-link:hover { border-color: var(--accent); }
.jump-count { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Anchored headings must not slide under the sticky strip. */
.lob { scroll-margin-top: 4rem; }

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

/* ---------- state filters ----------
   Two rows, never merged. Learner progress and content status are independent
   in the schema (completing a tutorial never verifies it), and a single row of
   mixed chips would imply they are one axis. */
.filters { margin: 0 0 1rem; display: grid; gap: 0.5rem; }
.filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.filter-label {
  font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--ink-soft); min-width: 8.5rem;
}
.chip {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  padding: 0.25rem 0.65rem; font-size: 0.85rem; text-decoration: none;
  color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 999px;
}
.chip:hover { border-color: var(--accent); }
.chip.is-active {
  background: var(--accent-soft); border-color: var(--accent); font-weight: 600;
}
/* Kept visible at zero rather than hidden — "Verified 0" is the most useful
   thing this page can say about the curriculum right now. */
.chip.is-zero { opacity: 0.55; }
.chip-n { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.chip.is-active .chip-n { color: inherit; }

.filter-state { margin: 0 0 1rem; font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- quizzes ---------- */
/* Right and wrong are distinguished by mark, position and wording as well as
   colour — a result page that only encodes correctness in green and red is
   unreadable to a colourblind learner, and this one carries the marks (✓ / ✗)
   and an explicit "you chose this" for that reason. */

.quiz-steps { margin: 0.5rem 0 0; padding-left: 1.3rem; font-size: 0.92rem; }
.quiz-steps li { margin-bottom: 0.35rem; }

.quiz-form { margin-top: 1.5rem; }

.quiz-q {
  margin: 0 0 1.4rem; padding: 1.1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.quiz-q legend {
  padding: 0 0.4rem; font-weight: 600; font-size: 1rem; line-height: 1.45;
}
.quiz-n {
  display: inline-block; min-width: 1.5rem; margin-right: 0.35rem;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.quiz-hint { margin: 0.2rem 0 0.7rem; font-size: 0.85rem; color: var(--ink-soft); }

.quiz-opt {
  display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.45rem 0.5rem; border-radius: var(--radius); cursor: pointer;
}
.quiz-opt:hover { background: var(--accent-soft); }
.quiz-opt input { margin-top: 0.25rem; flex: none; }

.quiz-unconfirmed {
  margin: 0.7rem 0 0; padding: 0.4rem 0.6rem;
  background: var(--note-bg); border: 1px solid var(--note-line);
  border-radius: var(--radius); font-size: 0.82rem; color: var(--ink-soft);
}

.quiz-submit { margin-top: 1.5rem; }
.quiz-submit button {
  padding: 0.55rem 1.4rem; border: 1px solid var(--accent); border-radius: var(--radius);
  background: var(--accent); color: #fff; font-size: 0.95rem; cursor: pointer;
}
.quiz-submit .progress-note { margin-top: 0.6rem; margin-bottom: 0; }

/* ---------- quiz result ---------- */
.quiz-result {
  margin: 0 0 1.4rem; padding: 1.1rem 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-left-width: 4px; border-radius: var(--radius);
}
.quiz-result.is-right { border-left-color: #2f7d4f; }
.quiz-result.is-wrong { border-left-color: var(--accent); }
.quiz-result h2 { margin: 0 0 0.8rem; font-size: 1rem; line-height: 1.5; font-weight: 600; }

.quiz-opts { list-style: none; margin: 0 0 0.9rem; padding: 0; }
.quiz-opt-r {
  display: flex; gap: 0.55rem; align-items: baseline;
  padding: 0.35rem 0.5rem; border-radius: var(--radius); font-size: 0.93rem;
}
.opt-mark { flex: none; width: 1rem; font-weight: 700; }
.quiz-opt-r.opt-key { background: var(--accent-soft); font-weight: 600; }
.quiz-opt-r.opt-key .opt-mark { color: #2f7d4f; }
.quiz-opt-r.opt-wrong .opt-mark { color: var(--accent); }
.quiz-opt-r.opt-wrong .opt-body { text-decoration: line-through; opacity: 0.75; }
.opt-note { font-size: 0.78rem; color: var(--ink-soft); font-style: italic; }

.quiz-why { border-top: 1px solid var(--line); padding-top: 0.7rem; }
.quiz-why h3 { margin: 0 0 0.3rem; font-size: 0.82rem; text-transform: uppercase;
               letter-spacing: 0.04em; color: var(--ink-soft); }
.quiz-why p { margin: 0; font-size: 0.93rem; }

/* ---------- the annotation beside learner progress ---------- */
.quiz-record {
  margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--line);
  font-size: 0.88rem;
}
.quiz-record-none { color: var(--ink-soft); }