/* Digital Confidence V2 — "Sage and Linen, pebble spa"
   Pip, 23 Sep 2026. Chosen by Neil 22 Sep. Spec: docs/design/dc-v2-brand-ui-guide.md.

   This is the body of Brand.Css, ready to drop in: same class names as the version it
   replaces, so no page markup has to change. What is new, and only used where the guide
   says so, is .hero-grid / .hero-photo / .pebble-note (home), .cairn (staged journeys)
   and .ai-band (the policy builder band under the hero).

   Three rules that are not negotiable and are easy to undo by accident:
   - NO ITALICS anywhere. Emphasis is weight, colour or size. Neil's standing preference.
   - No alarm red as a score. --dc-red is for genuine errors only.
   - Colour is never the only carrier of meaning: stages keep their names, domains their icons.
*/
:root{
  /* Names keep the estate's --dc- shape so component code stays portable. */
  --dc-ink:#26332d; --dc-ink-soft:#44524b;
  --dc-paper:#f8f5ef; --dc-surface:#fffdf9; --dc-surface-2:#eef3ec;
  --dc-green:#8fb59c; --dc-green-mid:#4c7a62; --dc-green-dark:#3f6b55; --dc-green-soft:#e6f0e8;
  --dc-pebble:#c9c5bd; --dc-sea:#cfe1df; --dc-clay:#e3c8b0;
  --dc-muted:#5f6c65; --dc-line:#e7e1d6; --dc-line-strong:#d3cbbd;
  --dc-amber:#c9a227; --dc-amber-soft:#f6f0da;
  --dc-red:#b5453a; --dc-red-soft:#fbeceb;          /* errors only, never a score */
  --dc-focus:#1b6ec2;
  --dc-r:16px; --dc-r-sm:12px; --dc-r-pill:999px;
  --dc-shadow:0 1px 2px rgba(60,50,30,.04),0 8px 30px rgba(60,50,30,.05);
  --dc-font:"Manrope","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
}

/* Self-hosted, same origin: no Google Fonts, no GDPR question. One variable file per
   subset covers 400-800. Falls back to Segoe UI, which is what the estate renders in today. */
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/assets/fonts/manrope-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Manrope"; font-style:normal; font-weight:400 800; font-display:swap;
  src:url("/assets/fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2C60-2C7F,U+A720-A7FF;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--dc-paper);color:var(--dc-ink);font-family:var(--dc-font);
     font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
i,em,cite,address{font-style:normal}          /* the no-italics rule, enforced in one line */
a{color:var(--dc-green-dark);text-underline-offset:2px}
a:hover{color:var(--dc-green-mid)}
:focus-visible{outline:3px solid var(--dc-focus);outline-offset:2px;border-radius:3px}
img,svg{max-width:100%}

/* ---- shell ------------------------------------------------------------
   The header is linen now, not deep green, so the product reads as a calm room
   rather than a dashboard. That means the GREEN wordmark, not the white one:
   /brand/logo-green.png (from TECGOV artwork/DocumentLogo.png). The white logo.png
   stays for dark surfaces and email. */
.dc-top{background:var(--dc-paper);color:var(--dc-ink);border-bottom:1px solid #ebe5da}
.dc-top a{color:var(--dc-ink);text-decoration:none}
.dc-top-in{max-width:1120px;margin:0 auto;padding:16px 20px;display:flex;gap:18px;
           align-items:center;flex-wrap:wrap}
.dc-brand{display:flex;gap:10px;align-items:center;font-weight:700;letter-spacing:-.01em;
          font-size:17px;color:var(--dc-ink)}
.dc-brand .dc-mark{color:var(--dc-green-dark);flex:none}
.dc-brand img{height:24px;width:auto;max-width:100%;display:block}
.dc-nav{display:flex;gap:18px;align-items:center;margin-left:auto;font-size:14.5px;flex-wrap:wrap}
.dc-nav a{padding:4px 0;border-bottom:2px solid transparent}
.dc-nav a:hover,.dc-nav a[aria-current=page]{border-bottom-color:var(--dc-green)}
.dc-who{font-size:13px;color:var(--dc-muted)}

main{max-width:1120px;margin:0 auto;padding:34px 20px 84px;display:flex;
     flex-direction:column;gap:26px}
main.wide{max-width:1280px}
main.narrow{max-width:780px}

h1{margin:0 0 8px;font-size:clamp(26px,3.4vw,38px);letter-spacing:-.028em;line-height:1.14;font-weight:700}
h2{margin:0 0 10px;font-size:21px;letter-spacing:-.02em;font-weight:700}
h3{margin:0 0 6px;font-size:16px;font-weight:650}
.dc-eyebrow{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
            color:#7b8a6e;font-weight:700;margin:0 0 10px}
.dc-sub{color:var(--dc-muted);margin:0;font-size:15px;max-width:70ch}
.dc-lead{font-size:16.5px;line-height:1.55;max-width:48ch;color:var(--dc-ink-soft)}
.dc-lead .soft{color:var(--dc-green-mid)}   /* second sentence of a headline. Never italic. */
p{max-width:72ch}
.muted{color:var(--dc-muted)}
.small{font-size:13px}
.tabular{font-variant-numeric:tabular-nums}

header.dc-page{border-bottom:1px solid var(--dc-line);padding-bottom:18px}
footer.dc-foot{border-top:1px solid var(--dc-line);padding-top:18px;color:var(--dc-muted);
               font-size:12.5px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
/* V1's free resources (blog, documents, how-tos) and the free checks: their own row, above the small print. */
.dc-foot-res{flex-basis:100%;display:flex;gap:14px;flex-wrap:wrap;font-size:13.5px;font-weight:600}

/* ---- home hero --------------------------------------------------------
   Two columns on desktop, stacked on a phone. The photo is the V1 pebbles image
   (Pixabay, free for commercial use), served from /brand/. It is decoration with
   meaning, so it keeps real alt text and never carries words. */
.dc-hero{background:
  radial-gradient(120% 90% at 100% 0%,#e7efe6 0%,rgba(231,239,230,0) 60%),
  radial-gradient(90% 80% at 0% 100%,#f3e8da 0%,rgba(243,232,218,0) 60%);
  border-radius:0 0 28px 28px;padding:8px 0 28px;margin:0 0 6px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center}
.hero-photo{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/10;
            box-shadow:0 18px 50px rgba(60,70,70,.14)}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:52% 50%;display:block}
.pebble-note{position:absolute;left:16px;top:16px;background:rgba(255,253,249,.88);
             border-radius:16px;padding:10px 14px;font-size:12.5px;color:var(--dc-ink-soft);
             max-width:230px;line-height:1.45;backdrop-filter:blur(6px)}
.pebble-note b{display:block;color:var(--dc-ink);font-size:13px}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .hero-photo{aspect-ratio:16/9}}
@media print{.dc-hero,.hero-photo{display:none}}

/* The AI policy builder band, directly under the hero (Madge, 23 Sep). */
.ai-band{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:linear-gradient(120deg,#e7f1ef,#eef3ec);border:1px solid var(--dc-sea);
  border-radius:20px;padding:20px 24px}
.ai-band h2{margin-bottom:4px}
.ai-band .btn{white-space:normal}

/* ---- surfaces --------------------------------------------------------- */
.card{background:var(--dc-surface);border:1px solid var(--dc-line);border-radius:var(--dc-r);
      padding:20px 22px;box-shadow:var(--dc-shadow)}
.card.tight{padding:15px 17px}
.card.flat{box-shadow:none}
.card > :last-child{margin-bottom:0}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.grid.three{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.grid.domains{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.between{display:flex;justify-content:space-between;gap:16px;align-items:baseline;flex-wrap:wrap}
.stack{display:flex;flex-direction:column;gap:16px}

/* ---- stage and domain colour ------------------------------------------
   Recoloured so nothing reads as an alarm. The lowest stage is stone, the second
   is clay: a school at "Finding your feet" has not failed anything. */
.stage{display:inline-flex;gap:7px;align-items:center;font-size:12px;font-weight:700;
       letter-spacing:.02em;padding:4px 11px 4px 9px;border-radius:var(--dc-r-pill);
       background:var(--dc-surface-2);color:var(--dc-ink);border:1px solid var(--dc-line-strong)}
.stage i{font-size:11px}
.stage[data-stage="0"]{background:#f1eee8;border-color:#ddd7cb;color:#5d5a52}
.stage[data-stage="1"]{background:#f6ebe1;border-color:#e3c8b0;color:#7f4f2c}
.stage[data-stage="2"]{background:#f6f0da;border-color:#e0d19b;color:#6c5a14}
.stage[data-stage="3"]{background:#e6f0e8;border-color:#b3d0bc;color:#2f6147}
.stage[data-stage="4"]{background:var(--dc-green-dark);border-color:var(--dc-green-dark);color:#fff}

/* Domain accents, calmed. Security leaves red for terracotta; see Vocabulary.cs. */
.domain-card{position:relative;padding-left:22px;overflow:hidden}
.domain-card::before{content:"";position:absolute;inset:0 auto 0 0;width:7px;
                     background:var(--dc-accent,var(--dc-green))}
.domain-head{display:flex;gap:10px;align-items:flex-start}
.domain-head i{color:var(--dc-accent,var(--dc-green));font-size:17px;width:20px;
               text-align:center;margin-top:3px;flex:none}
.domain-head h3{margin:0;font-size:16px}
.domain-next{margin-top:12px;padding-top:12px;border-top:1px dashed var(--dc-line);font-size:13.5px}
.domain-next b{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
               color:var(--dc-muted);margin-bottom:3px}
.trend{font-size:12px;font-weight:700}
.trend.up{color:var(--dc-green-dark)} .trend.down{color:#a8674a} .trend.flat{color:var(--dc-muted)}

/* ---- statistics ------------------------------------------------------- */
.stat{background:var(--dc-surface);border:1px solid var(--dc-line);border-radius:var(--dc-r);padding:17px 19px}
.stat b{display:block;font-size:32px;line-height:1.1;font-variant-numeric:tabular-nums;
        letter-spacing:-.03em;margin-bottom:2px}
.stat span{font-size:12.5px;color:var(--dc-muted)}

.scale{display:flex;gap:3px;margin:8px 0 0}
.scale i{flex:1;height:7px;border-radius:3px;background:var(--dc-line);display:block}
.scale i.on{background:var(--dc-accent,var(--dc-green))}

/* ---- the pebble cairn -------------------------------------------------
   Replaces the progress bar on staged journeys. A filled base stone for where you
   are, dashed outlines above for what is to come. Always beside a text label,
   never alone, and always aria-hidden: the words carry the meaning. */
.cairn{display:flex;align-items:flex-end;gap:10px;margin:0 0 16px}
.cairn svg{flex:none}
.cairn span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:#7b8a6e}

/* ---- forms ------------------------------------------------------------ */
label{display:block;font-weight:650;font-size:14.5px;margin-bottom:5px}
label .hint{display:block;font-weight:400;font-size:13px;color:var(--dc-muted);margin-top:3px}
label + .hint{display:block;font-size:13px;color:var(--dc-muted);margin:-2px 0 6px}
label:has(+ .hint){margin-bottom:2px}
input[type=text],input[type=email],input[type=number],input[type=search],input[type=date],
select,textarea{
  width:100%;padding:11px 13px;border:1px solid var(--dc-line-strong);border-radius:var(--dc-r-sm);
  font:inherit;font-size:15px;background:var(--dc-surface);color:var(--dc-ink)}
textarea{min-height:96px;resize:vertical}
fieldset{border:0;margin:0;padding:0}
legend{padding:0;font-weight:650}

/* One option per row, the whole row clickable. */
.opt{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border:1px solid var(--dc-line);
     border-radius:var(--dc-r-sm);background:var(--dc-surface);cursor:pointer;margin-bottom:8px;
     transition:border-color .12s,background .12s}
.opt:hover{border-color:var(--dc-green);background:var(--dc-surface-2)}
.opt input{margin:3px 0 0;flex:none;width:17px;height:17px;accent-color:var(--dc-green-dark)}
.opt .t{font-weight:650;font-size:15px}
.opt .h{display:block;font-weight:400;font-size:13.5px;color:var(--dc-muted);margin-top:3px}
.opt:has(input:checked){border-color:var(--dc-green-dark);background:var(--dc-green-soft);
                        box-shadow:inset 0 0 0 1px var(--dc-green-dark)}
.opt .suggested{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;
                text-transform:uppercase;color:var(--dc-green-dark);background:var(--dc-green-soft);
                border:1px solid #9fd6b8;border-radius:var(--dc-r-pill);padding:1px 7px;margin-left:7px;
                vertical-align:1px}

details.guide{margin:10px 0 0;border:1px solid var(--dc-line);border-radius:var(--dc-r-sm);
              background:var(--dc-surface-2)}
details.guide summary{cursor:pointer;padding:10px 14px;font-size:13.5px;font-weight:650;
                      color:var(--dc-green-dark);list-style:none}
details.guide summary::-webkit-details-marker{display:none}
details.guide summary::before{content:"\f059";font-family:"Font Awesome 7 Pro","Font Awesome 6 Pro",sans-serif;
                              font-weight:400;margin-right:7px}
details.guide[open] summary{border-bottom:1px solid var(--dc-line)}
details.guide .body{padding:12px 14px;font-size:14px;color:var(--dc-ink-soft)}
details.guide .body p{max-width:62ch}

/* ---- buttons ---------------------------------------------------------- */
.btn{display:inline-flex;gap:8px;align-items:center;justify-content:center;
     padding:11px 20px;border:1px solid transparent;border-radius:var(--dc-r-pill);
     background:var(--dc-green-dark);color:#fff;font:inherit;font-size:15px;font-weight:650;
     cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:#345943;color:#fff}
.btn.quiet{background:transparent;color:var(--dc-green-dark);border-color:var(--dc-line-strong)}
.btn.quiet:hover{background:var(--dc-surface-2);border-color:var(--dc-green)}
.btn.link{background:none;border:0;color:var(--dc-green-dark);padding:8px 0;text-decoration:underline}
.btn.small{padding:7px 15px;font-size:13.5px}
.btn[disabled],.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed}

/* ---- messages ---------------------------------------------------------
   .bad is for a genuine error (a failed save, a broken form), never for a score. */
.note{border-radius:var(--dc-r-sm);padding:13px 16px;font-size:14.5px;border:1px solid}
.note.good{background:var(--dc-green-soft);border-color:#b3d0bc;color:#2f6147}
.note.warn{background:#f6ebe1;border-color:var(--dc-clay);color:#7f4f2c}
.note.bad{background:var(--dc-red-soft);border-color:#eebbb6;color:#8f2019}
.note.info{background:var(--dc-surface-2);border-color:#bcdfcc;color:var(--dc-ink-soft)}
.note p{margin:6px 0 0}
.note > :first-child{margin-top:0}

/* ---- tables ----------------------------------------------------------- */
.scroll{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th{text-align:left;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
   color:var(--dc-muted);padding:0 12px 9px 0;font-weight:700}
td{padding:12px 12px 12px 0;border-top:1px solid var(--dc-line);vertical-align:top}

/* ---- the question spine ----------------------------------------------- */
.spine{display:flex;gap:4px;align-items:center;margin-bottom:4px}
.spine i{flex:1;height:5px;border-radius:3px;background:var(--dc-line)}
.spine i.done{background:var(--dc-green)}
.spine i.here{background:var(--dc-green-dark)}
.spine-text{font-size:12.5px;color:var(--dc-muted);display:flex;justify-content:space-between;gap:12px}

/* ---- responsive ------------------------------------------------------- */
@media(max-width:640px){
  body{font-size:15.5px}
  main{padding:22px 16px 64px;gap:20px}
  .card{padding:16px 17px}
  .dc-nav{gap:12px;font-size:14px;width:100%;margin-left:0}
  .ai-band{padding:16px 18px}
  td,th{padding-right:8px}
}

/* ---- dark mode --------------------------------------------------------
   Light surfaces with dark text invert acceptably, but a declared dark theme is
   better than leaving it to the client. Guarded so an explicit light choice wins. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --dc-ink:#e7ece8; --dc-ink-soft:#c3cdc7;
    --dc-paper:#171d1a; --dc-surface:#1e2622; --dc-surface-2:#222b26;
    --dc-green:#8fb59c; --dc-green-mid:#9cc6ac; --dc-green-dark:#4f8268; --dc-green-soft:#233129;
    --dc-pebble:#6f6d67; --dc-sea:#2b3a38; --dc-clay:#8d6f57;
    --dc-muted:#a4b0a9; --dc-line:#2c352f; --dc-line-strong:#3d4740;
    --dc-red-soft:#3a2321; --dc-amber-soft:#332d1c;
    --dc-shadow:0 1px 2px rgba(0,0,0,.3),0 8px 30px rgba(0,0,0,.28);
  }
  :root:not([data-theme="light"]) .dc-top{background:#141a17;border-bottom-color:#2c352f}
  :root:not([data-theme="light"]) .dc-top a,
  :root:not([data-theme="light"]) .dc-brand{color:var(--dc-ink)}
  :root:not([data-theme="light"]) .dc-brand img{filter:brightness(1.9) saturate(.85)}
  :root:not([data-theme="light"]) .dc-hero{background:linear-gradient(160deg,#1d2723,#171d1a)}
  :root:not([data-theme="light"]) .hero-photo img{filter:brightness(.85)}
  :root:not([data-theme="light"]) .ai-band{background:#1f2a27;border-color:#2b3a38}
  :root:not([data-theme="light"]) .btn{color:#0f1512}
  :root:not([data-theme="light"]) .btn:hover{background:#5d9478;color:#0f1512}
  :root:not([data-theme="light"]) .stage[data-stage="0"]{background:#262b27;border-color:#39403a;color:#c8cfc9}
  :root:not([data-theme="light"]) .stage[data-stage="1"]{background:#31261f;border-color:#5b4432;color:#e5c3a4}
  :root:not([data-theme="light"]) .stage[data-stage="2"]{background:#312d1c;border-color:#5b5330;color:#e2d69b}
  :root:not([data-theme="light"]) .stage[data-stage="3"]{background:#223028;border-color:#3d5e4a;color:#a9d6bb}
  :root:not([data-theme="light"]) .stage[data-stage="4"]{background:#4f8268;border-color:#4f8268;color:#0f1512}
}

/* ---- print: this IS the board pack ------------------------------------ */
@media print{
  :root{--dc-shadow:none;--dc-paper:#fff;--dc-surface:#fff;--dc-surface-2:#f4f4f2}
  body{background:#fff;font-size:11.5pt;color:#000}
  .dc-top,.dc-nav,.no-print,.btn,.ai-band{display:none !important}
  main{max-width:none;padding:0;gap:14px}
  .card{break-inside:avoid;border-color:#bbb;box-shadow:none}
  .domain-card{break-inside:avoid}
  .grid.domains{grid-template-columns:1fr 1fr}
  /* Protect the PIECES, not the whole (Pip, 23 Sep). break-inside:avoid on a card taller than a
     page cannot be honoured, so the browser breaks it wherever it lands — which cut a bullet
     through the middle of its own line at the second page boundary. Lists must be allowed to
     break; their items must not. */
  ul,ol{break-inside:auto}
  li,p,tr,.domain-next{break-inside:avoid}
  h1,h2,h3{break-after:avoid}
  p{orphans:2;widows:2}
  /* A tinted block of text greys out in a photocopy and costs toner for nothing. */
  details.guide{background:#fff;border-color:#bbb}
  details.guide[open] summary{border-bottom-color:#bbb}
  .stage{border:1px solid #666 !important;background:#fff !important;color:#000 !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .print-foot{display:block !important;position:fixed;bottom:0;left:0;right:0;
              font-size:9pt;color:#555;border-top:1px solid #ccc;padding-top:4px}
  @page{margin:16mm 14mm 20mm}
}
.print-foot{display:none}

/* =======================================================================
   Page-level components — previously scattered as page-scoped <style> blocks
   and inline styles. Gathered here so one token change moves the whole
   product. See docs/design/dc-v2-pages.md for what each one is for.
   ======================================================================= */

/* ---- .opt, used as a plain row rather than a choice -------------------
   Members, join requests and school search results reuse .opt for layout.
   .static cancels the affordances so they do not need inline cursor styles. */
.opt.static{cursor:default}
.opt.static:hover{border-color:var(--dc-line);background:var(--dc-surface)}
.opt.static:has(input:checked){border-color:var(--dc-line);background:var(--dc-surface);box-shadow:none}

/* ---- linked tool cards ------------------------------------------------ */
.tool-card{text-decoration:none;color:inherit;display:block}
.tool-card h3{color:var(--dc-green-dark)}
.tool-card h3::after{content:" \2192"}          /* the arrow says "this is a destination" */
.tool-card:hover{border-color:var(--dc-green);background:var(--dc-surface-2)}
.tool-card:hover h3{color:var(--dc-green-mid)}
.soon{display:inline-flex;gap:6px;align-items:center;font-size:11.5px;font-weight:700;
      padding:3px 10px;border-radius:var(--dc-r-pill);background:var(--dc-surface-2);
      border:1px solid var(--dc-line-strong);color:var(--dc-muted)}

/* ---- prices ----------------------------------------------------------- */
.stat-price{margin:0 0 10px}
.stat-price b{display:block;font-size:30px;line-height:1.1;letter-spacing:-.03em;
              font-variant-numeric:tabular-nums}
.stat-price span{display:block;font-size:13px;color:var(--dc-muted);margin-top:2px}
.card.chosen{border:2px solid var(--dc-green-dark)}   /* the recommended tier, not an inline style */

/* ---- a page header that carries its area's accent --------------------- */
header.dc-page.accent{border-left:6px solid var(--dc-accent,var(--dc-green));padding-left:14px}

/* ---- the question h1 -------------------------------------------------- */
h1.question{font-size:clamp(20px,2.6vw,26px);margin:0 0 6px}

/* ---- standard status chips -------------------------------------------
   One definition, tokenised. Previously hardcoded twice, in StandardsPages
   and AuditPages. No RAG red: a standard not yet met is not a failure. */
.std-status{display:inline-block;font-size:11.5px;font-weight:700;padding:3px 10px;
            border-radius:var(--dc-r-pill);border:1px solid}
.std-status[data-status=met]{background:#e6f0e8;border-color:#b3d0bc;color:#2f6147}
.std-status[data-status=partly]{background:#f6f0da;border-color:#e0d19b;color:#6c5a14}
.std-status[data-status=notmet]{background:#f6ebe1;border-color:#e3c8b0;color:#7f4f2c}
.std-status[data-status=notknown]{background:#eaf1f2;border-color:#cfe1df;color:#3f6169}
.std-status[data-status=na]{background:#f1eee8;border-color:#ddd7cb;color:#5d5a52}
.std-list{list-style:none;margin:0;padding:0}
.std-row{display:flex;gap:10px;align-items:baseline;justify-content:space-between;
         padding:8px 0;border-top:1px solid var(--dc-line);flex-wrap:wrap}
.std-row:first-child{border-top:0}

/* ---- benchmark -------------------------------------------------------- */
.bm-bands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 16px}
.bm-band{border:1px solid var(--dc-line);border-radius:var(--dc-r-sm);padding:12px 14px;
         background:var(--dc-surface);text-align:center}
.bm-band b{display:block;font-size:26px;line-height:1.1;letter-spacing:-.03em}
.bm-band span{display:block;font-size:12.5px;color:var(--dc-muted);margin-top:2px}
.bm-band .here{display:none;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
            color:var(--dc-green-dark);margin-top:6px}
.bm-band.on{border-color:var(--dc-green-dark);background:var(--dc-green-soft);
            box-shadow:inset 0 0 0 1px var(--dc-green-dark)}
.bm-band.on .here{display:block}
/* Decoration only: the band name and "You are here" carry the state. */
.bm-band[data-band="1"] b{color:#4c8b8b}
.bm-band[data-band="2"] b{color:#6d9b80}
.bm-band[data-band="3"] b{color:#b08442}
.bm-band[data-band="4"] b{color:#a8674a}
.bm-bars{display:flex;flex-direction:column;gap:10px;margin:14px 0 0}
.bm-bar-row{display:flex;gap:12px;align-items:center}
.bm-bar-label{flex:none;width:190px;font-size:13.5px;color:var(--dc-ink-soft)}
.bm-bar{flex:1;height:18px;background:var(--dc-surface-2);border-radius:var(--dc-r-pill);overflow:hidden}
.bm-bar i{display:block;height:100%;background:var(--dc-green-dark);border-radius:var(--dc-r-pill)}
/* The hatch is the only difference that survives a greyscale photocopy. */
.bm-bar i.have{background:repeating-linear-gradient(45deg,#c9a06d 0 6px,#e3c8b0 6px 12px)}
.bm-bar-val{flex:none;width:72px;text-align:right;font-size:13.5px}
@media(max-width:640px){
  .bm-bands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bm-bar-label{width:120px;font-size:12.5px}
}

/* ---- the audit record's sign-off block -------------------------------- */
.signoff td.signline{border-bottom:1px solid #999;height:34px;min-width:120px}
.signoff tr{break-inside:avoid}        /* never split a signature row across pages */

/* ---- imported HTML: the DfE's wording, and wiki articles --------------
   Arbitrary markup lands inside these two, so they are styled defensively.
   A token change can look broken here without anyone noticing. */
.dfe h4{margin:14px 0 4px;font-size:14.5px}
.dfe p,.dfe li{font-size:14px;color:var(--dc-ink-soft)}
.dfe ul,.dfe ol{margin:0 0 10px;padding-left:20px}
.dfe table{font-size:13.5px}
.article{max-width:none}
.article h2{margin:22px 0 8px}
.article h3,.article h4{margin:16px 0 6px}
.article p,.article li{max-width:72ch}
.article ul,.article ol{padding-left:22px}
.article blockquote{margin:14px 0;padding:10px 16px;border-left:4px solid var(--dc-green);
                    background:var(--dc-surface-2);border-radius:0 var(--dc-r-sm) var(--dc-r-sm) 0}
.article pre{background:var(--dc-surface-2);border:1px solid var(--dc-line);border-radius:var(--dc-r-sm);
             padding:12px 14px;overflow-x:auto;font-size:13.5px}
.article table{margin:12px 0}

/* ---- admin ------------------------------------------------------------
   The one place colour was the only carrier of meaning. The row keeps its
   tint, but the chip is what actually says it. */
tr.needs-review{background:var(--dc-amber-soft)}
.needs-review-chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;
                   border-radius:var(--dc-r-pill);background:#f6f0da;border:1px solid #e0d19b;color:#6c5a14}

/* ---- added while applying the sheet to the pages (Claude, 23 Sep) ---------
   Three rules the page markup needs and the sheet did not carry. Told to Pip
   so they land in docs/design/dc-v2-brand.css rather than drifting apart. */
h1 .soft{color:var(--dc-green-mid)}           /* the headline's second sentence */
.std-row a{flex:1;min-width:220px}            /* the standard's name takes the row */
.article li{margin:4px 0}                     /* imported wiki lists were set solid */
/* The one section a governor has to act on, tinted so it is findable in a printed pack. */
.card.decision{background:var(--dc-sea);border-color:#bcd5d3}

/* ---- the governor's shared page (Pip's review, 23 Sep) ----------------
   A BarePage has no navigation, so the 48-character lead measure meant for a
   signed-in page wraps to four short lines and splits "26 of / 50 standards". */
body:not(:has(.dc-top)) .dc-lead{max-width:60ch}

/* Below 520 the question page's three actions read as three equal choices.
   Order them by what the reader is most likely to want. */
@media(max-width:520px){
  form.card .between{flex-direction:column;align-items:stretch;gap:12px}
  form.card .between > span:first-child{order:3;text-align:center}
  form.card .between .row{order:1;flex-direction:column-reverse;align-items:stretch;gap:10px}
  form.card .between .row .btn{width:100%}
}

/* The end of a page: a line, its actions and a quieter afterthought, held together so the page
   finishes deliberately instead of trailing off down the main column's 26px gaps (Pip, 24 Sep). */
.close-out{display:flex;flex-direction:column;gap:10px}
.close-out > *{margin:0}

/* The five stages, explained. The icon is a progressively filling circle, so the scale carries in
   shape as well as in words — it is not decoration and it is not a colour key. */
ol.stages li{margin:6px 0}
ol.stages i{color:var(--dc-green-dark);width:18px;margin-right:6px}

/* ---- audit records (audits rewrite, 21 Oct) ------------------------------ */
.doc-status b{font-size:15px}
.governor-summary{border-left:4px solid var(--dc-green-dark)}
.governor-summary p{max-width:72ch}
.card.draft{border-style:dashed}
table.actions td:first-child{width:28px;color:var(--dc-muted)}
.told table td:first-child{width:62%}
@media print{.doc-status,.governor-summary{break-inside:avoid}.told{break-before:page}}