/* =========================================================================
   SUPER DEAL MAKER -- THE COMPONENTS (Step 105, rule C6). Defined once here;
   every screen uses them. This file holds NO raw values: every colour, size,
   space, radius and shadow is a name from sdm_tokens.css.

   Loaded AFTER Bootstrap, so where the two disagree, this wins. Bootstrap stays
   for its grid and its dropdown behaviour; its colours are overridden below.

   THE PAGE, THEN EACH COMPONENT C6 NAMES, IN ITS ORDER:
     page header (H1 band) · section header (H2 band) · card · table · form
     field · help text · error · button (primary, secondary, danger) · link ·
     badge · empty state · How this works panel · progress meter · upload row
   ========================================================================= */

/* ---- THE PAGE ---------------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-family);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background-color: var(--c-white);
}
/* C4: a line of reading text is never longer than the measure. */
p, li, dd, blockquote { max-width: var(--measure); }
/* C7: nothing makes the page scroll sideways; media shrink to fit. */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
*, *::before, *::after { box-sizing: border-box; }

/* ---- THE PRINTED PAGE (Step 106 Task 14.5) ------------------------------
   The business plan and both readiness reports are laid out by WeasyPrint
   from pages that inline this sheet. Measured (step106_typography.py), the
   plan set its own page -- A4, 5mm -- and the two reports set none, so they
   fell to WeasyPrint's default 19.8mm margins and a 170mm content width
   against the plan's 200mm; and NONE of the three justified its body text
   (0% of body characters). THE CAUSE is that the page and the alignment
   lived in each document's own <style>, not here. They live here now:

     * ONE page for every document that does not set its own (a document's
       own @page comes later and still wins): A4, 34pt -- the side margin of
       the document base (myapp/document_base.html) and the one the PDF
       geometry check holds every document to. NOT the plan's old 5mm: moved
       onto the reports first, 5mm put their text 14pt from the paper's edge
       and the geometry check failed 24 lines -- the plan had the same fault,
       unmeasured, and now takes this page too. Raw `34pt`, not a token:
       `@page` does not inherit from :root, so var() cannot resolve in it;
     * body text justified and hyphenated in print. Hyphenation needs the
       document's language: every document's <html> carries lang.
   On screen nothing changes: a justified line on a 375px phone opens rivers
   between words, and the reader this platform is built for reads it worse. */
@page { size: A4 portrait; margin: 34pt; }
@media print {
  p, li { text-align: justify; hyphens: auto; }
}

/* ---- HEADINGS (R33) ----------------------------------------------------
   H1: brand text on the ink band. H2: ink text on the brand band. H3 and
   below: plain ink, no band. Centred and bold for the two bands. */
/* THE BAND IS THE ONE STEP 91 SETTLED, AND THE OWNER LOOKED AT IT: uppercase,
   letter-spaced, centred, bold. R33 names its two colourways; the size steps
   down one from H1 to H2 so the two are told apart by more than colour.

   `!important` ON THE BAND'S LOOK, AND WHY. R33 is absolute. Pages written
   before Step 105 style their own headings -- an inline dark colour meant for
   a white page, a `.page-title` class with a gradient -- and a page class
   outranks this element rule. The rendered contrast check (Task 3) caught
   the result: dark text on the ink band (1.00:1) and cyan text on the cyan
   band. So the colours, background, type and alignment of a heading band are
   the system's, and nothing a page says can repaint them. Margins stay the
   page's: where a heading sits is layout, not look. */
h1, .page-band, .brand-band {
  font-family: var(--font-family) !important;
  font-size: var(--fs-3) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-body) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  color: var(--c-brand) !important;
  background-color: var(--c-ink) !important;
  background-image: none !important;
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
  border-radius: var(--radius-sm);
  max-width: none;
}
h1 a, .page-band a, .brand-band a { color: var(--c-brand) !important; }

h2, .section-band {
  font-family: var(--font-family) !important;
  font-size: var(--fs-2) !important;
  font-weight: var(--fw-bold) !important;
  line-height: var(--lh-body) !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  text-align: center !important;
  color: var(--c-ink) !important;
  background-color: var(--c-brand) !important;
  background-image: none !important;
  padding: var(--sp-2) var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-3);
  border-radius: var(--radius-sm);
  max-width: none;
}
h2 a, .section-band a { color: var(--c-ink) !important; }

h3, h4, h5, h6 {
  font-family: var(--font-family);
  /* INHERIT, not ink: a plain heading takes the text colour of what it sits
     on -- ink on the page (from body), white in a dark panel. An explicit ink
     here put "Quick Actions" ink-on-ink on the investor dashboard (Step 105
     Task 3, the rendered probe). */
  color: inherit;
  background-color: transparent;
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  margin: var(--sp-5) 0 var(--sp-2);
  padding: 0;
  text-align: left;
}
h3 { font-size: var(--fs-3); }
h4, h5, h6 { font-size: var(--fs-2); }

/* ---- CARD -------------------------------------------------------------- */
.sdm-card {
  background-color: var(--c-white);
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4);
  margin: 0 0 var(--sp-4);
}
/* Bootstrap's `.card` (1,035 uses) takes the system's frame but keeps its own
   padding: its `.card-body` already pads, and padding both would double it. */
.card {
  border: var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}
.card-muted { background-color: var(--c-grey-page); }

/* ---- TABLE (C7: scrolls inside its own box on a phone) ----------------- */
table { border-collapse: collapse; width: 100%; }
th, td {
  border: var(--border);
  padding: var(--sp-2) var(--sp-3);
  vertical-align: top;
  text-align: left;
}
th, thead td { background-color: var(--c-grey-page); color: var(--c-ink); font-weight: var(--fw-medium); }
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--sp-4); }

/* ---- FORM FIELD, HELP TEXT, ERROR (C7: one column on a phone) ---------- */
label { display: block; font-weight: var(--fw-medium); margin: var(--sp-3) 0 var(--sp-1); }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=tel], input[type=url], input[type=search],
select, textarea {
  font-family: var(--font-family);
  font-size: var(--fs-2);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background-color: var(--c-white);
  border: var(--border);
  border-radius: var(--radius-sm);
  min-height: var(--target);
  padding: var(--sp-2) var(--sp-3);
  width: 100%;
  max-width: 100%;
}
textarea { min-height: calc(var(--target) * 2); }
input[type=checkbox], input[type=radio] { width: 24px; height: 24px; margin-right: var(--sp-2); }
.help-text, .helptext { display: block; font-size: var(--fs-1); color: var(--c-grey-muted); margin: var(--sp-1) 0 var(--sp-3); }
.error, .errorlist, .field-error {
  color: var(--c-bad);
  font-weight: var(--fw-medium);
  margin: var(--sp-1) 0 var(--sp-3);
  padding: 0;
  list-style: none;
}
.has-error input, .has-error select, .has-error textarea { border: 2px solid var(--c-bad); }

/* ---- BUTTON: primary, secondary, danger (R33: brand, ink text, NOT bold) - */
.btn-primary, .brand-go, .sdm-button, button, input[type=submit], input[type=button],
.cta-button, .submit-button {
  display: inline-block;
  font-family: var(--font-family);
  font-size: var(--fs-2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  text-align: center;
  text-decoration: none;
  min-height: var(--target);
  padding: var(--sp-3) var(--sp-5);
  margin: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  color: var(--c-ink);
  background-color: var(--c-brand);
  background-image: none;
  border: var(--border-width) solid var(--c-ink);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.btn-primary:link, .btn-primary:visited, .brand-go:link, .brand-go:visited { color: var(--c-ink); }
.btn-secondary, .brand-leave {
  display: inline-block;
  font-family: var(--font-family);
  font-size: var(--fs-2);
  font-weight: var(--fw-regular);
  text-align: center;
  text-decoration: none;
  min-height: var(--target);
  padding: var(--sp-3) var(--sp-5);
  margin: var(--sp-1) var(--sp-2) var(--sp-1) 0;
  color: var(--c-ink);
  background-color: var(--c-white);
  border: var(--border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.btn-secondary:link, .btn-secondary:visited, .brand-leave:link, .brand-leave:visited { color: var(--c-ink); }
.btn-danger {
  color: var(--c-white);
  background-color: var(--c-bad);
  border-color: var(--c-bad);
}
.btn-danger:link, .btn-danger:visited { color: var(--c-white); }

/* ---- STEP 108 TASK 6: WHERE A BUTTON SITS, AND WHERE ITS LABEL SITS -------- */
/* 6.4. THE LABEL IS CENTRED ACROSS AND DOWN. An <a> or <button> drawn as a
   button is a flex box that centres its words; `gap` stands in for the space
   a flex box drops between a word and a <span> beside it. An <input>'s label
   is drawn by the browser, centred down already; text-align centres it across. */
a.btn-primary, a.brand-go, a.sdm-button, a.btn-secondary, a.brand-leave, a.btn-danger,
a.cta-button, a.submit-button, button.btn-primary, button.btn-secondary, button.btn-danger,
button.sdm-button, button:not([class]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .25em;
  text-align: center;
  vertical-align: middle;
}
input[type=submit], input[type=button], input[type=reset] { text-align: center; }

/* 6.2 / 6.3. A ROW OF PAGE- OR CARD-LEVEL ACTIONS, CENTRED. What a table that
   held nothing but a button became (step108_buttons_markup.py), and any line
   of buttons a page wants centred. */
.action-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2) var(--sp-3);
  margin: var(--sp-4) 0;
  text-align: center;
}
.action-row > *, .action-row form > * { margin-left: 0; margin-right: 0; }

/* 6.3. A BLOCK THAT HOLDS NOTHING BUT BUTTONS centres them -- in the page, or
   in the card it sits in -- and a form that is only a button centres it.
   Blocks with words in them are not touched (an action in a list row or a
   sentence stays where it is), nor is a row of a data table: `td` is not in
   the list. `:has()` -- where a browser lacks it, the buttons simply stay
   where they were. */
:is(p, div, section, li, footer.card-footer):has(> :is(a.btn-primary, a.btn-secondary, a.brand-go, a.brand-leave, a.btn-danger, button, input[type=submit])):not(:has(> :not(a.btn-primary, a.btn-secondary, a.brand-go, a.brand-leave, a.btn-danger, button, input[type=submit], input[type=hidden], br, script, style))):not(.dd-nav, .dd-nav-steps, .area-head, .navbar, nav) {
  text-align: center;
}
form:not(:has(:not(a.btn-primary, a.btn-secondary, a.brand-go, a.brand-leave, a.btn-danger, button, input[type=submit], input[type=hidden], br, span))) {
  text-align: center;
}
/* BOOTSTRAP'S COLOUR UTILITIES, still in 42 places (15 bg-*, 27 text-*), each onto the palette
   colour it means. Bootstrap's own: its blue as text 3.98:1, its green as text
   3.13:1, white on its blue 3.98:1 -- all fail C3. The primary
   colour is the brand, which is never text (R33), so text-primary is ink and
   bg-primary carries ink text. Bootstrap marks these !important; so do we,
   and this sheet loads after it. Step 105 Task 3.3. */
.bg-primary, .bg-primary.text-white { background-color: var(--c-brand) !important; color: var(--c-ink) !important; }
.bg-success { background-color: var(--c-ok) !important; }
.bg-warning, .bg-warning.text-white { background-color: var(--c-warn) !important; color: var(--c-ink) !important; }
.bg-danger { background-color: var(--c-bad) !important; }
.bg-secondary { background-color: var(--c-grey-muted) !important; }
.bg-dark { background-color: var(--c-ink) !important; }
.text-primary, .text-warning { color: var(--c-ink) !important; }
.text-success { color: var(--c-ok) !important; }
.text-danger { color: var(--c-bad) !important; }
.text-muted { color: var(--c-grey-muted) !important; }
/* TRAFFIC LIGHT TONES (law 4), from `|score_tone`: ready / almost / not-yet.
   As TEXT the almost tone is ink -- yellow text on white is unreadable --
   and the light is carried by the bar or badge beside it. As a FILL, all
   three colours. Step 105 Task 3.3. */
.tone-text-ready { color: var(--c-ok) !important; }
.tone-text-almost { color: var(--c-ink) !important; }
.tone-text-not-yet { color: var(--c-bad) !important; }
.tone-fill-ready { background-color: var(--c-ok) !important; }
.tone-fill-almost { background-color: var(--c-warn) !important; }
.tone-fill-not-yet { background-color: var(--c-bad) !important; }
/* A READINESS BAND IN A FUNDER'S TABLE, from `{% band_tone %}` /
   `{% reader_band_tone %}`: a tone NAME, never a colour computed in a tag.
   Dark text on every fill. Step 105 Task 9. */
.band-cell { padding: var(--sp-1) var(--sp-2); text-align: center;
             font-weight: var(--fw-bold); color: var(--c-ink); }
.band-cell a { color: var(--c-ink); }
.band-fill-excellent { background-color: var(--c-band-excellent); }
.band-fill-good { background-color: var(--c-band-good); }
.band-fill-average { background-color: var(--c-band-average); }
.band-fill-below-average { background-color: var(--c-band-below-average); }
.band-fill-poor { background-color: var(--c-band-poor); }
.band-fill-unverified { background-color: var(--c-band-unverified); }
/* ---- A PUBLIC PAGE: one readable column, a lead line (Step 105 Task 4) --- */
.sdm-page { max-width: 820px; margin: 0 auto; padding: var(--sp-4); }
.lead { font-size: var(--fs-3); line-height: var(--lh-body); }
.sdm-list { padding-left: var(--sp-5); }
/* Cards side by side where there is room, one column on a phone (C7). */
.sdm-grid { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: 0 0 var(--sp-4); }
.sdm-grid > * { flex: 1 1 220px; margin: 0; }
.sdm-list li { margin: 0 0 var(--sp-2); }

/* ---- CLAUSES: numbered legal text, 1. and 1.1. (the privacy policy) -----
   The numbers were drawn by the page's own counters; they are the system's
   now, so the numbers a person reads did not change (Step 105 Task 4). */
.clauses { counter-reset: clause; }
.clauses h2 { counter-reset: subclause; text-align: left !important; }
.clauses h2::before { counter-increment: clause; content: counter(clause) ". "; }
.clauses h3::before { counter-increment: subclause; content: counter(clause) "." counter(subclause) ". "; }

/* ---- PATH STEP: one row of the guided road (CLAUDE.md s13) --------------
   Now: the one to do, framed. Done: ticked. Skipped: can still be done.
   Locked: VISIBLE BUT GREYED, with the one line that unlocks it. The mark
   before each is text, not colour alone. */
.path-step {
  display: block;
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-2);
  background-color: var(--c-white);
  color: var(--c-ink);
}
.path-step--now { border: var(--border-strong); font-weight: var(--fw-medium); }
.path-step--done { background-color: var(--c-grey-page); }
.path-step--locked { background-color: var(--c-grey-page); color: var(--c-grey-muted); }
.path-step .path-why { display: block; font-size: var(--fs-1); color: var(--c-grey-muted); margin-top: var(--sp-1); }
.path-step .path-mark { display: inline-block; min-width: 1.5em; font-weight: var(--fw-bold); }

/* TEXT BUTTON: a button that reads as a link -- the "Not sure" answer on a
   one-question screen (law 2). Ink and underlined like every link (T71),
   still a 48px target (law 8). Added in Step 105 Task 3.3 for
   training/screens/ask.html, whose blue-link button had no component. */
button.sdm-text-button, .sdm-text-button {
  min-height: var(--target);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-2);
  font-weight: var(--fw-regular);
  color: var(--c-ink);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
}
button.sdm-text-button:hover, .sdm-text-button:hover { color: var(--c-ink); background: var(--c-grey-page); }
/* Bootstrap's other variants, still in 17 places: each takes the look of the
   one of the three it means. btn-outline-warning was yellow on white, 1.63:1
   (Step 105 Task 3, the training probe); btn-success is a primary action. */
.btn-outline-warning, .btn-outline-info, .btn-outline-primary,
.btn-outline-warning:link, .btn-outline-info:link, .btn-outline-primary:link {
  color: var(--c-ink);
  background-color: var(--c-white);
  border: var(--border-strong);
}
.btn-outline-danger, .btn-outline-danger:link {
  color: var(--c-bad);
  background-color: var(--c-white);
  border: var(--border-width) solid var(--c-bad);
}
.btn-success, .btn-warning, .btn-success:link, .btn-warning:link {
  color: var(--c-ink);
  background-color: var(--c-brand);
  border: var(--border-width) solid var(--c-ink);
  font-weight: var(--fw-regular);
}
/* C8: hover, focus (a ring, not only a colour), disabled -- for every control */
.btn-primary:hover, .brand-go:hover, button:hover, input[type=submit]:hover,
.cta-button:hover, .submit-button:hover {
  color: var(--c-brand);
  background-color: var(--c-ink);
}
.btn-secondary:hover, .brand-leave:hover { background-color: var(--c-grey-page); }
.btn-danger:hover { color: var(--c-white); background-color: var(--c-ink); border-color: var(--c-ink); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
button:disabled, input:disabled, select:disabled, textarea:disabled,
.btn-primary[aria-disabled=true], .btn-secondary[aria-disabled=true] {
  color: var(--c-grey-muted);
  background-color: var(--c-grey-page);
  border-color: var(--c-grey-line);
  cursor: not-allowed;
}

/* ---- LINK -------------------------------------------------------------- */
/* A BARE `a`, ON PURPOSE (Step 89 Task 12, T71). `a:link` would sit at
   specificity (0,1,1) and outrank a page's own `.btn-primary` (0,1,0), turning
   every button-shaped link back into a text link. At (0,0,1) any class wins. */
a { color: var(--c-ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
/* on the ink band, links take the brand colour (12.87:1) */
/* Only the footers this sheet PUTS on the ink (see THE FRAME below). A bare
   `footer a` also caught a page's own white `<footer>` -- "Back to top" on the
   post-investment dashboard, cyan on white, 1.54:1 (Step 105 Task 3 probe). */
.on-ink a, .on-ink a:link, .on-ink a:visited,
footer.footer a, footer.footer a:link, footer.footer a:visited,
footer.bg-dark a, footer.bg-dark a:link, footer.bg-dark a:visited { color: var(--c-brand); }

/* ---- BADGE (state only, C2) -------------------------------------------- */
.badge {
  display: inline-block;
  font-size: var(--fs-1);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  background-color: var(--c-grey-page);
  border: var(--border);
}
.badge-ok, .band-ready { color: var(--c-white); background-color: var(--c-ok); border-color: var(--c-ok); }
.badge-warn, .band-almost { color: var(--c-ink); background-color: var(--c-warn); border-color: var(--c-warn); }
.badge-bad, .band-not-yet { color: var(--c-white); background-color: var(--c-bad); border-color: var(--c-bad); }

/* ---- AREA CARDS: a readiness lens and its parts (Step 106 T220) ---------- */
/* listing/_lens_boxes.html, on both readiness screens. Was a copy of the same
   ~20 rules in each page's own <style>, with red written into the markup. */
.area-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(350px, 100%), 1fr));
  gap: var(--sp-5); margin: var(--sp-5) 0; }
.area-card { background-color: var(--c-white); border: var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); overflow: hidden; }
.area-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-2); background-color: var(--c-brand); color: var(--c-ink); padding: var(--sp-4) var(--sp-5); }
.area-title { margin: 0; font-size: var(--fs-2); font-weight: var(--fw-bold); color: var(--c-ink); }
.area-why, .area-todo { margin: var(--sp-3) var(--sp-5); }
.area-parts { list-style: none; margin: 0; padding: 0; }
.area-parts li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-2); min-height: var(--target); padding: var(--sp-2) var(--sp-5);
  border-top: var(--border); font-size: var(--fs-2); }

/* ---- DD SCREEN NAVIGATION (Step 108 Task 3) ------------------------------ */
/* listing/_dd_header.html, on all 69 DD screens: Back to the report, where the
   screen sits, Previous and Next. Each a plain ink link at the touch size. */
.dd-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-2) var(--sp-4); margin: 0 0 var(--sp-4); font-size: var(--fs-2); }
.dd-nav a { display: inline-flex; align-items: center; min-height: var(--target); }
.dd-nav-where { color: var(--c-grey-muted); }
.dd-nav-steps { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); }

/* ---- A QUESTION LINE THAT OPENS ITS ANSWER (Step 108 Task 4) -------------- */
/* listing/_dd_answers.html: the whole line is one link to the edit screen at
   that question. It must not read as a text link -- no underline, ink text --
   and says it is clickable by the cursor and a lift on hover. The keyboard
   gets the same lift and the system's focus ring. */
.area-parts li.dd-q { padding: 0; }
.dd-q-line, .dd-q-line:link, .dd-q-line:visited, .dd-q-line:hover, .dd-q-line:focus {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: var(--sp-2); width: 100%; min-height: var(--target); padding: var(--sp-2) var(--sp-5);
  color: var(--c-ink); text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.dd-q-line:hover, .dd-q-line:focus-visible {
  transform: translateY(-2px);
  background-color: var(--c-grey-page);
  box-shadow: var(--shadow-card);
}
.dd-q-line:focus-visible { outline: none; box-shadow: var(--shadow-card), var(--focus-ring); }
/* the answer it lands on sits clear of the sticky navigation bar */
.form-row input, .form-row select, .form-row textarea, #from-your-plan { scroll-margin-top: var(--sp-16); }

/* ---- A DD TOPIC'S LESSON (Step 108 Task 5) --------------------------------- */
/* listing/_dd_guidance.html: text in a card, the handbook as a download. */
.dd-guide { background-color: var(--c-white); border: var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-card); padding: 0 var(--sp-5) var(--sp-4); margin: var(--sp-6) 0 var(--sp-4);
  font-size: var(--fs-2); line-height: var(--lh-body); }
.dd-guide > h2 { margin: 0 calc(-1 * var(--sp-5)) var(--sp-3); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.dd-guide-questions { padding-left: var(--sp-6); }
.dd-guide-questions li { margin: 0 0 var(--sp-3); }
.dd-guide-questions p { margin: 0 0 var(--sp-1); }
/* a screen's name is read aloud and matched to the report: never hyphenated */
.keep-together { white-space: nowrap; hyphens: manual; -webkit-hyphens: manual; }

/* ---- EMPTY STATE, LOADING, ERROR PANEL (C9) ----------------------------- */
.empty-state {
  background-color: var(--c-grey-page);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6) var(--sp-4);
  margin: 0 0 var(--sp-4);
  text-align: center;
}
.empty-state p { margin-left: auto; margin-right: auto; }
.working { color: var(--c-grey-muted); }
.working::before { content: "\2026 "; }
.panel-error {
  border-left: 4px solid var(--c-bad);
  background-color: var(--c-grey-page);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-4);
}

/* ---- THE HOW THIS WORKS PANEL ------------------------------------------ */
details.how-this-works {
  background-color: var(--c-grey-page);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin: var(--sp-6) 0 var(--sp-4);
}
details.how-this-works > summary {
  min-height: var(--target);
  display: flex;
  align-items: center;
  font-weight: var(--fw-medium);
  cursor: pointer;
}

/* ---- PROGRESS METER ----------------------------------------------------- */
.progress-meter { margin: 0 0 var(--sp-4); }
.progress-meter progress, progress.progress-meter {
  width: 100%;
  height: 12px;
  accent-color: var(--c-ink);
}
.progress-meter .progress-words { font-size: var(--fs-1); color: var(--c-grey-muted); }

/* ---- FILE UPLOAD ROW ---------------------------------------------------- */
.upload-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  border: var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-3);
}
.upload-row .upload-name { flex: 1 1 200px; font-weight: var(--fw-medium); }
.upload-row .upload-state { font-size: var(--fs-1); color: var(--c-grey-muted); }

/* ---- THE FRAME: navigation and footer, on the ink token ------------------
   Bootstrap's `.bg-dark` is its own grey; the frame is the H1 band's ink.
   The navigation's own controls (the phone menu toggle, the dropdown arrows,
   a dismiss cross) are NOT buttons in the C6 sense and must not become brand
   pills, so the element rule above is undone for them here. */
.navbar.bg-dark, footer.footer, footer.bg-dark { background-color: var(--c-ink) !important; color: var(--c-white); }
.navbar-dark .site-nav .nav-link, .navbar-dark .navbar-nav .nav-link { color: var(--c-white) !important; }
.navbar-dark .site-nav .nav-link:hover, .navbar-dark .site-nav .nav-link:focus { color: var(--c-brand) !important; }
.dropdown-menu a, .dropdown-menu a:link, .dropdown-menu a:visited { color: var(--c-ink); text-decoration: none; }
.site-frame-nav { font-weight: var(--fw-bold); }
/* The acting-as-a-client banner: the brand band with ink text (R33). */
.banner-client-mode {
  background-color: var(--c-brand);
  color: var(--c-ink);
  padding: var(--sp-3);
  text-align: center;
  font-weight: var(--fw-medium);
}
.banner-client-mode a { color: var(--c-ink); margin-left: var(--sp-5); text-decoration: underline; }
.navbar-toggler, .nav-more, button.close, .dropdown-toggle.nav-more {
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: var(--radius-sm);
  min-height: var(--target);
  min-width: var(--target);
  margin: 0;
  padding: 0 var(--sp-2);
  color: var(--c-white);
}
.navbar-toggler:hover, .nav-more:hover { color: var(--c-brand); background-color: transparent; }
.messages, .messagelist { list-style: none; padding: 0; margin: 0 0 var(--sp-4); }
.messagelist li, .messages li {
  max-width: none;
  padding: var(--sp-3) var(--sp-4);
  margin: 0 0 var(--sp-2);
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--c-ink);
  background-color: var(--c-grey-page);
}
.messagelist li.success, .messages li.success { border-left-color: var(--c-ok); }
.messagelist li.warning, .messages li.warning { border-left-color: var(--c-warn); }
.messagelist li.error, .messages li.error { border-left-color: var(--c-bad); }

/* ---- THE STYLE GUIDE'S OWN SAMPLES (/styleguide/) -----------------------
   A swatch or a space bar takes its value from the token it shows, so the
   style guide has no style attribute and no colour of its own. */
.swatch { display: inline-block; width: var(--sp-12); height: var(--sp-8); border: var(--border); border-radius: var(--radius-sm); }
.swatch--brand { background-color: var(--c-brand); }
.swatch--ink { background-color: var(--c-ink); }
.swatch--white { background-color: var(--c-white); }
.swatch--grey-line { background-color: var(--c-grey-line); }
.swatch--grey-muted { background-color: var(--c-grey-muted); }
.swatch--grey-page { background-color: var(--c-grey-page); }
.swatch--ok { background-color: var(--c-ok); }
.swatch--warn { background-color: var(--c-warn); }
.swatch--bad { background-color: var(--c-bad); }
.sg-type--1 { font-size: var(--fs-1); }
.sg-type--2 { font-size: var(--fs-2); }
.sg-type--3 { font-size: var(--fs-3); }
.sg-space { display: inline-block; height: var(--sp-3); background-color: var(--c-ink); }
.sg-space--sp-0 { width: 0; }
.sg-space--sp-1 { width: var(--sp-1); }
.sg-space--sp-2 { width: var(--sp-2); }
.sg-space--sp-3 { width: var(--sp-3); }
.sg-space--sp-4 { width: var(--sp-4); }
.sg-space--sp-5 { width: var(--sp-5); }
.sg-space--sp-6 { width: var(--sp-6); }
.sg-space--sp-8 { width: var(--sp-8); }
.sg-space--sp-10 { width: var(--sp-10); }
.sg-space--sp-12 { width: var(--sp-12); }
.sg-space--sp-16 { width: var(--sp-16); }
.sg-form { max-width: 480px; }

/* ---- THE PHONE (C7) ---------------------------------------------------- */
@media (max-width: 480px) {
  .btn-primary, .btn-secondary, .brand-go, .brand-leave, button, input[type=submit] { width: 100%; margin-right: 0; }
  /* ...but not the navigation's own controls: a full-width menu toggle
     pushed itself onto a line below the logo (seen in Task 3's pictures). */
  .navbar-toggler, .nav-more, button.close { width: auto; }
  th, td { padding: var(--sp-2); }
}

/* ---- THE READINESS LENSES (Step 106, R41/R42) --------------------------- */
/* A lens's row never splits across a printed page: the first picture of the
   funding report put "Financial structure, affordability and security" on
   page 4 and its score on page 3. Scoped to the lens section, so no other
   document's page count moves. */
.lens-report tr, .lens-report h3, .lens-report h4 { break-inside: avoid; page-break-inside: avoid; }
.lens-report h3, .lens-report h4 { break-after: avoid; page-break-after: avoid; }