/* © 2026 Catchment Ltd. All rights reserved.
 * "Catchment" visual identity — shared skin for the Catchment platform.
 * Re-skin only: presentation layer. Does not alter any tool logic, maths,
 * PDF export, methodology/IO logging, compliance banner, save or legal feature.
 * Brand: product UI reads "Catchment"; Catchment Ltd remains the legal entity;
 * domain remains catchment.co.uk.
 * Added 2026-06-18 (Phase 1 — foundation + proof templates).
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Libre+Franklin:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;0,8..60,700;1,8..60,500;1,8..60,600&display=swap');

/* ============================ Tokens ============================ */
:root {
  /* Catchment palette */
  --cat-green:        #1F4D3D;   /* primary */
  --cat-green-hover:  #163A2D;
  --cat-ink:          #16271F;   /* dark band */
  --cat-bright:       #41C58A;   /* on dark only */
  --cat-success:      #1F8A5B;
  --cat-clay:         #8A5E33;   /* eyebrows, tags */
  --cat-clay-rule:    #C9A06A;
  --cat-paper:        #FCFBF7;   /* page bg */
  --cat-panel:        #F6F2E9;   /* band/panel bg */
  --cat-card:         #FFFFFF;
  --cat-body:         #5d584e;
  --cat-body-2:       #6b675d;
  --cat-muted:        #6B6457; /* was #857F71 (3.6–4.0:1, below WCAG AA on small text); darkened to ~5:1 for AA */
  --cat-label:        #6f6a5c;
  --cat-hairline:     #ECE7DC;
  --cat-card-border:  #E5E0D3;
  --cat-inner-rule:   #F0EBE0;
  --cat-input-border: #E0DBCF;
  --cat-divider:      #D8CFBE;
  --cat-ok-bg:#EAF2EC; --cat-ok-border:#CFE2D5; --cat-ok-text:#15623F;
  --cat-warn-bg:#FBEFE6; --cat-warn-border:#E8C9AD; --cat-warn-text:#92400E;
  --cat-on-dark:#B8C4BC; --cat-on-dark-2:#9FB0A6; --cat-on-dark-3:#9FC2AE;

  --cat-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --cat-sans:  'Libre Franklin', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cat-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --cat-shadow: 0 18px 40px -22px rgba(22,39,31,.26);

  /* ---- Re-point the existing Catchment tokens onto the Catchment palette
     so every var()-based colour across the suite shifts to the new identity. ---- */
  --suds-slate-950: var(--cat-ink);     /* primary headings / dark surfaces */
  --suds-slate-900: #21372C;
  --suds-slate-700: #3c463f;
  --suds-slate-600: var(--cat-body);    /* secondary text */
  --suds-slate-500: var(--cat-muted);   /* muted text */
  --suds-slate-400: var(--cat-label);
  --suds-slate-300: var(--cat-divider); /* borders on dark */
  --suds-slate-200: var(--cat-card-border);
  --suds-slate-100: var(--cat-inner-rule);
  --suds-slate-50:  var(--cat-panel);   /* secondary background */

  --suds-copper-900: #5c3e22;
  --suds-copper-800: #6e4b29;
  --suds-copper-700: var(--cat-clay);   /* accent (eyebrows, links, tags) */
  --suds-copper-500: var(--cat-clay-rule);
  --suds-copper-300: var(--cat-clay-rule);
  --suds-copper-50:  var(--cat-panel);  /* clay tint backgrounds → warm panel */
  --suds-copper-edge: var(--cat-card-border);

  --suds-success-700: var(--cat-ok-text);
  --suds-success-500: var(--cat-success);
  --suds-success-50:  var(--cat-ok-bg);
  --suds-success-900: var(--cat-ok-text);
  --suds-danger-700: #B91C1C; --suds-danger-500: #C2410C; --suds-danger-50: var(--cat-warn-bg);
  --suds-warning-700: var(--cat-warn-text); --suds-warning-500: #C98A3C; --suds-warning-50: var(--cat-warn-bg);
  --suds-info-700: var(--cat-green); --suds-info-50: var(--cat-ok-bg);

  --suds-surface: var(--cat-card);
  --suds-surface-muted: var(--cat-panel);
  --suds-surface-dark: var(--cat-ink);

  /* Category accents collapse to the single green accent (Catchment rule:
     one green accent per page; category conveyed by tag + icon, not colour). */
  --suds-cat-appraisal: var(--cat-green); --suds-cat-component: var(--cat-green);
  --suds-cat-storage: var(--cat-green); --suds-cat-hydraulic: var(--cat-green);
  --suds-cat-compliance: var(--cat-green); --suds-cat-delivery: var(--cat-green);

  --suds-font-sans: var(--cat-sans);
}

/* ============================ Type ============================ */
body { background: var(--cat-paper) !important; color: var(--cat-body) !important;
  font-family: var(--cat-sans) !important; line-height: 1.65; }
body, input, select, textarea, button, label, p, span, div, a, li, td, th, small {
  font-family: var(--cat-sans) !important; }
h1,
h2,
h3,
h4,
.qs-tool-title,
.scape-band-title,
.standards-title,
.result-value,
.result-card .value {
  font-family: var(--cat-serif) !important;
  letter-spacing: -0.4px; font-weight: 600; }
/* WO-04 (2026-07-17, design-review defect 1b): ink is a LIGHT-GROUND colour.
   The old rule painted every heading ink !important, which rendered
   ink-on-navy (≈1.1:1) wherever a page put a heading on a dark band without
   out-specifying it (hub Outfall band). Dark-ground containers are excluded
   here via :where() — zero added specificity, so every existing override
   keeps exactly the weight it had — and given a light default below (no
   !important, so pages can refine). */
h1:not(:where(.cat-on-dark, .scape-band, .standards-strip, .hero-stats, .cat-ink, .cx-outfall, .cx-standards, .cx-stdslim) *),
h2:not(:where(.cat-on-dark, .scape-band, .standards-strip, .hero-stats, .cat-ink, .cx-outfall, .cx-standards, .cx-stdslim) *),
h3:not(:where(.cat-on-dark, .scape-band, .standards-strip, .hero-stats, .cat-ink, .cx-outfall, .cx-standards, .cx-stdslim) *),
h4:not(:where(.cat-on-dark, .scape-band, .standards-strip, .hero-stats, .cat-ink, .cx-outfall, .cx-standards, .cx-stdslim) *),
.qs-tool-title:not(:where(.cat-on-dark, .scape-band, .standards-strip, .hero-stats, .cat-ink, .cx-outfall, .cx-standards, .cx-stdslim) *),
.scape-band-title:not(:where(.cat-on-dark, .scape-band, .standards-strip, .hero-stats, .cat-ink, .cx-outfall, .cx-standards, .cx-stdslim) *),
.standards-title:not(:where(.cat-on-dark, .scape-band, .standards-strip, .hero-stats, .cat-ink, .cx-outfall, .cx-standards, .cx-stdslim) *),
.result-value:not(:where(.cat-on-dark, .scape-band, .standards-strip, .hero-stats, .cat-ink, .cx-outfall, .cx-standards, .cx-stdslim) *),
.result-card .value:not(:where(.cat-on-dark, .scape-band, .standards-strip, .hero-stats, .cat-ink, .cx-outfall, .cx-standards, .cx-stdslim) *) {
  color: var(--cat-ink) !important; }
/* Dark-ground heading default: light, and visibly so (≥4.5:1 on every dark
   band token). Plain rule, not !important — pages refine freely. */
.cat-on-dark h1, .cat-on-dark h2, .cat-on-dark h3, .cat-on-dark h4,
.cx-outfall h1, .cx-outfall h2, .cx-outfall h3,
.cx-standards h1, .cx-standards h2, .cx-standards h3,
.cx-stdslim h1, .cx-stdslim h2, .cx-stdslim h3 {
  color: #fff; }
/* WO-05 Item 1 (2026-07-17, owner): eyebrows/kickers leave the teletype mono —
   ONE chip/eyebrow role suite-wide: house UI sans, 600, uppercase, 0.07em.
   Mono is reserved for data/figures (values, formulas, code-like refs). */
.qs-tool-eyebrow,
.scape-band-eyebrow,
.eyebrow,
.mc-tag,
.stat-label,
.mc-title {
  font-family: var(--cat-sans) !important; text-transform: uppercase;
  letter-spacing: 0.07em !important; color: var(--cat-clay) !important; font-weight: 600; }
/* WO-03 (2026-07-13) — hub type-role allowlist (WO-01 §4.2 / R7).
   The universal sans rule above was tuned for the legacy tool pages; the hub's
   cx-* role classes were never allowlisted, so its mono/serif roles rendered
   sans (audit cycle-20260713-original-WO-conformance, D1). These selectors are
   class-scoped: the classes appear ONLY on SuDS_Pro_Suite.html, so tool-page
   rendering is untouched. Family only — each role keeps its own page-declared
   size/colour (e.g. the white QBAR display value on the green result panel). */
.cx-value-h,
/* WO-04 elevation roles (hero straps, plate role lines, serif full stops) */
.cx-suitesub,
.cx-suitecard .sub,
.cx-suitebar h1 .dot,
.of-strap,
.of-hero h1 .dot,
.ph-step .t {
  font-family: var(--cat-serif) !important; }
/* WO-05 Item 1: the mono allowlist now carries ONLY data/figure + drawing-
   chrome roles (formulas, computed values, sheet bars, title blocks, drawing
   callout numbers, step numbers). Chip/eyebrow roles moved to the shared
   sans chip system (late block, end of file). */
.cx-mono,
.cx-plate .sheetbar,
.cx-plate .sheetbar span,
.of-titleblock,
.of-titleblock .k,
.of-titleblock .v,
.of-mod .no,
.of-drawing .bar,
.of-drawing .bar span,
.ph-step .no {
  font-family: var(--cat-mono) !important; }

/* ============================ Brand mark — "Basin" ============================ */
.cat-mark { width: 30px; height: 30px; border: none; border-radius: 0;
  background: url('assets/brand/quinnsite-mark-q.png') center / contain no-repeat;
  display: inline-block; flex: 0 0 auto; }
.cat-mark-lockup { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.cat-word { display: flex; flex-direction: column; line-height: 1.05; }
.cat-word b { font-family: var(--cat-serif); font-weight: 700; font-size: 20px; color: var(--qs-ink-green, #0F211E); letter-spacing: -0.3px; }
.cat-word span { font-family: var(--cat-mono); font-size: 9.5px; letter-spacing: 1.6px; color: var(--cat-label); text-transform: uppercase; }
/* Dark grounds: the mark sits on its own paper disc (A5 — dark grounds use dark
   cuts, never inverted light marks; until dark cuts are supplied at usable
   resolution, the light cut keeps a light ground of its own). */
.cat-on-dark .cat-mark, .scape-band .cat-mark, .standards-strip .cat-mark, footer.cat-ink .cat-mark {
  border: none; border-radius: 50%; background-color: #FCFBF7;
  background-image: url('assets/brand/quinnsite-mark-q.png');
  background-repeat: no-repeat; background-position: center; background-size: 72% auto; }

/* ============================ Nav ============================ */
.qs-navbar, .navbar {
  background: #FFFFFF !important; -webkit-backdrop-filter: none; backdrop-filter: none !important; /* WO-260718 A2: solid white, blur none */
  border-bottom: 1px solid var(--cat-divider, #D8CFBE) !important; height: 74px !important; box-shadow: none !important; }
.qs-nav-container, .nav-container { max-width: 1240px !important; padding: 0 40px !important; }
.qs-nav-links a, .nav-links a { color: var(--cat-body) !important; font-weight: 500; text-decoration: none; }
.qs-nav-links a:hover, .nav-links a:hover { color: var(--cat-ink) !important;
  text-decoration: underline; text-decoration-color: var(--cat-clay-rule); text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
/* The CTA / back button → filled green */
.qs-nav-cta, .nav-cta {
  background: var(--cat-green) !important; color: #fff !important; border-radius: 8px !important;
  font-weight: 600; border: none !important; }
.qs-nav-cta:hover, .nav-cta:hover { background: var(--cat-green-hover) !important; transform: none !important; text-decoration: none !important; }

/* ============================ Cards ============================ */
.tool-card, .card, .result-card, .content-card, .standard-card, .panel {
  background: var(--cat-card) !important; border: 1px solid var(--cat-card-border) !important;
  border-radius: 13px !important; }
.tool-card:hover {
  transform: translateY(-3px); border-color: var(--cat-divider) !important; box-shadow: var(--cat-shadow) !important; }

/* ============================ Buttons ============================ */
.btn-primary, .btn-calculate, button.btn-primary {
  background: var(--cat-green) !important; color: #fff !important; border: none !important; border-radius: 8px !important; font-weight: 600; }
.btn-primary:hover { background: var(--cat-green-hover) !important; }
.btn-secondary, .btn-ghost { background: transparent !important; color: var(--cat-green) !important;
  border: 1px solid var(--cat-card-border) !important; border-radius: 8px !important; }
/* Worked-example launcher (suds-edu) → Catchment green, not the legacy teal */
.suds-we-trigger { background: var(--cat-green) !important; color: #fff !important;
  border: 1px solid var(--cat-green) !important; }
.suds-we-trigger:hover { background: var(--cat-green-hover) !important; }
/* The "Worked example" nav CTA only fits the full desktop nav at ≥1081px.
   Between ~860–1080px the inline nav has no room and the CTA was clipping off
   the right edge of the viewport on calculator pages. Hide it below 1081px
   (consistent with how it's already hidden on mobile); worked examples remain
   reachable via the on-page "Why this calculation" / worked-example widget. */
@media (max-width: 1100px) { .suds-we-trigger { display: none !important; } }
/* Footer copyright / nav-meta text + links were #9b9484 on paper #f6f2e9 =
   2.70:1 (fails WCAG AA 4.5 and the 3:1 audit bar). Darken to a muted-but-
   legible warm grey (~5.3:1) across all footer variants, site-wide. */
footer.cat-foot .cat-foot-meta, footer.cat-foot .cat-foot-meta a,
.pr-footer-meta, .pr-footer-meta span, .pr-footer-meta a,
.qs-foot-bottom, .qs-foot-bottom a {
  color: #6b6457 !important;
}

/* ============================ Result card / callouts (tool pages) ============================ */
.sv-inline-disclaimer { background: var(--cat-green, #1F4D3D) !important; border: none !important; color: #fff !important; border-radius: 12px !important; padding: 14px 20px !important; }
.sv-inline-disclaimer strong, .sv-inline-disclaimer .sv-meth { color: #fff !important; }
.sv-inline-disclaimer a { color: #fff !important; text-decoration: underline !important; }
/* Disclaimer modal: beat each calculator's generic button{...!important} rule
   (specificity 0,2,1) with 0,3,0 so the primary CTA is Catchment green. */
.sv-modal .sv-actions .sv-btn-primary { background: var(--cat-green) !important; color: #fff !important; }
.sv-modal .sv-actions .sv-btn-primary:not(:disabled):hover { background: var(--cat-green-hover) !important; }
.sv-modal .sv-ack-row input[type="checkbox"] { accent-color: var(--cat-green) !important; }
.compliance-pass, .badge-success, .badge-ok { background: var(--cat-ok-bg) !important; color: var(--cat-ok-text) !important; border-color: var(--cat-ok-border) !important; }
.compliance-warning, .badge-warn, .badge-fail { background: var(--cat-warn-bg) !important; color: var(--cat-warn-text) !important; border-color: var(--cat-warn-border) !important; }

/* ============================ Dark bands ============================ */
.scape-band, .standards-strip, .hero-stats, footer.cat-ink, .footer.cat-ink { background: var(--cat-ink) !important; }
.standards-strip * { color: #fff !important; }
.scape-band-title { color: #fff !important; }
.scape-band-sub { color: var(--cat-on-dark) !important; }
.standard-badge { border: 1px solid rgba(255,255,255,.13) !important; background: rgba(255,255,255,.03) !important; }

/* ============================ Sliders ============================ */
.result-value, [class*="result"] .value { font-variant-numeric: tabular-nums; }

/* ============================ Eyebrow lead rule ============================ */
/* WO-06 Item 4: .cat-eyebrow rules removed — class unused in every page/script
   (verified by grep); its dash ::before was the last teletype rule. */

/* ============================ A11y / motion / focus ============================ */
:focus-visible { outline: 2px solid var(--cat-green) !important; outline-offset: 3px; }
html { scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* =========================================================================
   QA PASS (2026-06-19) — neutralise legacy per-tool accent variables and
   normalise deep components the reskin missed. Presentation only.
   Root cause: each tool's inline :root defines --qs-copper / --qs-blue / etc.
   to a different legacy hue (copper/teal/slate/emerald), and a generic
   button{background:var(--qs-copper)} rule then paints modal buttons, export
   buttons, burgers, etc. off-brand. We re-point those vars to Catchment here
   (this :root is last in the cascade, so it wins). ========================= */
:root {
  --qs-copper: var(--cat-green); --qs-copper-light: var(--cat-green); --qs-copper-glow: rgba(31,77,61,.30);
  --qs-accent: var(--cat-green); --qs-accent-strong: var(--cat-ink); --qs-accent-soft: var(--cat-panel);
  --qs-blue: var(--cat-green); --qs-blue-soft: var(--cat-panel);
  --qs-green: var(--cat-success); --qs-green-light: var(--cat-success);
  --qs-red: #B91C1C; --qs-yellow: var(--cat-warn-text);
  --qs-text: var(--cat-ink); --qs-muted: var(--cat-muted); --qs-soft: var(--cat-body);
  --suds-slate-800: #21372C;   /* burger bars referenced this; was falling back to old slate */
  --qs-text-secondary: var(--cat-muted);   /* footer text used this legacy var */
  --qs-text-muted: var(--cat-label);
}
/* QA pass 2 (2026-06-19): beat high-specificity page rules that survived.
   Edu modal title is an <h2> caught by page `h2{font-family:'Libre Franklin'!important}`,
   and the modal secondary/close buttons are caught by a 6-:not() button rule
   (specificity 0,6,1) that forces white text. Out-specify with class repetition. */
.suds-we-modal-title.suds-we-modal-title.suds-we-modal-title {
  font-family: var(--cat-serif) !important; color: var(--cat-ink) !important; }
.suds-we-modal-btn-secondary.suds-we-modal-btn-secondary.suds-we-modal-btn-secondary.suds-we-modal-btn-secondary.suds-we-modal-btn-secondary.suds-we-modal-btn-secondary.suds-we-modal-btn-secondary {
  background: transparent !important; color: var(--cat-green) !important; border: 1px solid var(--cat-card-border) !important; }
.suds-we-modal-close.suds-we-modal-close.suds-we-modal-close.suds-we-modal-close.suds-we-modal-close.suds-we-modal-close.suds-we-modal-close {
  background: transparent !important; color: var(--cat-muted) !important; border: none !important; }
/* Per-page literal-hex residue (raw hexes in inline styles the token repoint can't reach) */
/* Help "?" icons / field-help: green fill + WHITE glyph for contrast + consistency
   (legibility fix — was clay-on-green ~1.3:1, failed WCAG). */
.help-icon, .field-help, .info-icon, [class*="help-icon"] {
  background: var(--cat-green) !important;
  border-color: var(--cat-green) !important;
  color: #ffffff !important;
}
.help-icon:hover, .field-help:hover, .info-icon:hover { color: #ffffff !important; }
.qs-footer-disclaimer { border-top-color: var(--cat-hairline) !important; }
.todo, .tc-callout { background: var(--cat-warn-bg) !important; border-left-color: var(--cat-warn-border) !important; color: var(--cat-warn-text) !important; }
.label-note, .input-suffix, .summary-label, .summary-unit, .three-d-controls { color: var(--cat-muted) !important; }
.breadcrumb { color: var(--cat-muted) !important; }
.breadcrumb a { color: var(--cat-clay) !important; }

/* =========================================================================
   FLOW POLISH (2026-06-19) — de-block the tool flow to the design's airy
   single-panel look. PRESENTATION ONLY: no markup/ids/scripts/maths changed,
   only borders/shadows/spacing. The blockiness came from heavy 1.5px borders +
   resting shadows + bordered boxes nested inside bordered panels. ========== */
/* Panels flat at rest (hover lift kept on interactive cards elsewhere) */
.step-content,
.card,
.panel,
.content-card,
.calculation-box,
.results-section,
.results-panel,
.input-section,
.form-section,
.compliance-card,
.info-card,
.standard-card,
.result-card {
  box-shadow: none !important;
  border: 1px solid var(--cat-card-border) !important;
  border-radius: 14px !important;
}
/* More air inside and between top-level panels */
.step-content, .card, .panel, .content-card { padding: 26px 28px !important; margin-bottom: 20px !important; }
/* De-nest: a box inside a panel becomes a plain region — structure via spacing, not another border */
/* Specificity boosted 2026-07-03 (WO-01 R1 "borders never touch"): the legacy
   per-page qs card rule ((0,6,0) specificity) was re-bordering nested cards and
   producing DOUBLE borders inside step panels (flagged by Michael on Detention
   Basin). The repeated-class selectors below tie it at (0,6,0)+ and win on
   cascade order since this sheet loads last. */
.step-content .card.card.card.card.card, .card .card.card.card.card.card, .panel .card.card.card.card.card,
.step-content .calculation-box.calculation-box.calculation-box.calculation-box.calculation-box,
.card .calculation-box.calculation-box.calculation-box.calculation-box.calculation-box,
.step-content .input-section.input-section.input-section.input-section.input-section,
.card .input-section.input-section.input-section.input-section.input-section,
.content-card .content-card.content-card.content-card.content-card.content-card,
.step-content .info-card.info-card.info-card.info-card.info-card,
.card .info-card.info-card.info-card.info-card.info-card,
.results-section .summary-card.summary-card.summary-card.summary-card.summary-card,
.results-grid > .card.card.card.card.card {
  border: none !important; box-shadow: none !important; background: transparent !important;
  padding: 0 !important; margin-bottom: 14px !important; border-radius: 0 !important;
}
/* Section headings: hairline divider rather than a heavy bar */
.section-title, .panel > h2, .panel-title { border-bottom: 1px solid var(--cat-inner-rule) !important; padding-bottom: 10px !important; margin-bottom: 18px !important; }
/* Inputs lighter + consistent (not range/checkbox/radio) */
input:not([type=range]):not([type=checkbox]):not([type=radio]), select, textarea {
  border: 1px solid var(--cat-input-border) !important; border-radius: 10px !important; }
.form-group, .input-group, .form-row { margin-bottom: 18px !important; }
/* Sliders → reference look: soft track, white thumb with green ring */
input[type=range] { height: 4px !important; background: #DCE3DD !important; border-radius: 4px !important; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--cat-green); box-shadow: 0 1px 4px rgba(22,39,31,.3); cursor: pointer; }
input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--cat-green); cursor: pointer; }
/* Tables: hairline rows, no heavy gridlines */
table th { background: var(--cat-panel) !important; border-bottom: 1px solid var(--cat-card-border) !important; }
table td { border-bottom: 1px solid var(--cat-inner-rule) !important; }

/* (2026-06-19 stepper flow/de-block patch REMOVED — WO-07a unified .qs-stepper component, end of file) */

/* (2026-06-20 active-step colour harmonisation REMOVED — WO-07a unified .qs-stepper component) */

/* ---- Terms & Conditions hero: white title on a light rebrand background ----
   The Terms page kept a legacy dark-hero override (.tc-hero .tc-title{color:#fff!important},
   .tc-hero p{color:slate-300!important}) but the rebrand switched the hero bg to the
   light panel → the title and intro were near-invisible. Privacy/Cookie heroes already
   render dark-on-panel; bring Terms in line. (0,3,0 beats the legacy 0,2,0 rules.) */
.tc-hero.tc-hero .tc-title, .tc-hero.tc-hero h1 { color: var(--cat-ink) !important; }
.tc-hero.tc-hero .tc-sub, .tc-hero.tc-hero p,
.tc-hero.tc-hero .tc-meta, .tc-hero.tc-hero .tc-meta * { color: var(--cat-body) !important; }
.tc-hero.tc-hero .tc-meta span strong { color: var(--cat-ink) !important; }

/* Button placement: Back/secondary left, primary right; consistent gaps.
   (space-between is correct for both Back+Next rows and the Pipe step-nav stepper.) */
.button-group, .step-nav, .form-actions, .nav-buttons, .actions, .btn-group {
  display: flex !important; justify-content: space-between !important; align-items: center !important;
  gap: 12px !important; flex-wrap: wrap !important; margin-top: 24px !important;
}
.btn-secondary, .btn-ghost { background: transparent !important; color: var(--cat-green) !important; border: 1px solid var(--cat-card-border) !important; }
.btn-primary, .btn-calculate, button.btn-primary { background: var(--cat-green) !important; color: #fff !important; border: none !important; }
/* Worked-example modal: title is a <div> (serif rule didn't reach it); neutralise its buttons */
.suds-we-modal-title { font-family: var(--cat-serif) !important; color: var(--cat-ink) !important; }

/* =========================================================================
   AESTHETIC AUDIT FIXES (2026-06-20) — multi-agent suite-wide audit.
   All presentation-only; no maths/JS logic touched. ========================= */

/* (A) Section/step headings rendered in Inter (sans) on tool pages because of a
   legacy inline `h2{font-family:'Libre Franklin'!important}` + `.step-title{color:slate}`.
   Brand headings are Source Serif 4 in ink. Force serif + ink across headings and
   the tool heading classes. (KB section headings are already serif — unaffected.) */
/* High specificity (html body … = 0,1,3 / 0,1,2) to beat the legacy inline
   `h2:not(.qs-tool-title){font-family:'Libre Franklin'!important}` (0,1,1) and the
   universal `…,div,…{font-family:'Libre Franklin'!important}` rules on tool pages. */
html body h2:not(.qs-tool-title):not([class*="eyebrow"]):not([class*="mono"]),
html body .step-title, html body .panel-title, html body .qs-tool-title,
html body .section-title, html body .card-title, html body .panel h2, html body .step-content h2 {
  font-family: var(--cat-serif, 'Source Serif 4', Georgia, serif) !important;
}
html body .step-title, html body .panel-title, html body .qs-tool-title { color: var(--cat-ink) !important; }

/* (B) Top-bar CTA ("Back to Catchment" / "Browse tools") was copper on tool pages
   (.qs-nav-cta{background:var(--suds-copper-700)}). Force Catchment green. */
/* "Browse tools" top-bar CTA: white pill with green text + green outline (sits on
   the light translucent navbar). */
/* "Browse tools" CTA: hub green with white text (consistent everywhere). */
.qs-nav-cta, .qs-nav-cta.cat-nav-cta, .qs-nav-links a.qs-nav-cta, a.qs-nav-cta {
  background: var(--cat-green, #1F4D3D) !important; color: #fff !important;
  border: 1px solid var(--cat-green, #1F4D3D) !important;
}
.qs-nav-cta:hover, .qs-nav-cta.cat-nav-cta:hover, .qs-nav-links a.qs-nav-cta:hover, a.qs-nav-cta:hover {
  background: var(--cat-green-hover, #163A2D) !important; color: #fff !important;
}
/* Pricing/Settings/Projects nav CTA → green + white too */
.pr-cta, .pr-links a.pr-cta {
  background: var(--cat-green, #1F4D3D) !important; color: #fff !important;
  border: 1px solid var(--cat-green, #1F4D3D) !important;
}
.pr-cta:hover, .pr-links a.pr-cta:hover { background: var(--cat-green-hover, #163A2D) !important; color: #fff !important; }

/* Hub CTA pair: solid green "Browse" + neutral-outlined "Design journey".
   WO-03 (2026-07-13): ghost border restored to the WO-01 §7 secondary spec
   (#D9D3C5 neutral, green text) — the green-outline skin had no record (D6). */
.cx-btn { border: 1px solid var(--cat-green, #1F4D3D) !important; }
.cx-btn-ghost { background: #fff !important; color: var(--cat-green, #1F4D3D) !important; border: 1px solid #D9D3C5 !important; }
.cx-btn-ghost:hover { background: var(--cat-panel, #F6F2E9) !important; color: var(--cat-green, #1F4D3D) !important; }

/* Hub standards section: clickable source cards + section heading (on dark band). */
.cx-standards .cx-standards-h { font-family: var(--cat-serif, 'Source Serif 4', serif) !important; font-size: clamp(22px, 2.6vw, 28px); font-weight: 700; color: #fff !important; margin: 0 0 10px; }
.cx-standards a.cx-std { display: flex; flex-direction: column; gap: 4px; text-decoration: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.cx-standards a.cx-std:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.38) !important; background: rgba(255,255,255,.07) !important; }
.cx-standards .cx-std .desc { font-size: 11.5px; line-height: 1.45; color: rgba(255,255,255,.62); margin-top: 2px; }
.cx-standards .cx-std .cx-std-go { font-family: var(--cat-mono, monospace); font-size: 9.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--cat-bright, #41C58A); margin-top: 8px; }
/* Homepage "Browse tools": solid hub green with white text. Higher specificity
   (.cx-nav-links a.cx-nav-cta = 0,2,1) to beat the page's .cx-nav-links a colour. */
.cx-nav-cta, .cx-nav-links a.cx-nav-cta, a.cx-nav-cta {
  background: var(--cat-green, #1F4D3D) !important; color: #fff !important;
  border: 1px solid var(--cat-green, #1F4D3D) !important;
}
.cx-nav-cta:hover, .cx-nav-links a.cx-nav-cta:hover, a.cx-nav-cta:hover {
  background: var(--cat-green-hover, #163A2D) !important; color: #fff !important;
}

/* Remove the small mono "kicker" labels that sit above page/section titles
   (e.g. "Your work", "Plans & pricing", "Knowledge Base", "Legal · …") — per request. */
.pr-eyebrow, .ph-eyebrow, .st-eyebrow, .tc-eyebrow, .pp-eyebrow, .cp-eyebrow,
.hero-eyebrow, .cx-eyebrow, .cx-next-eyebrow, .qs-tool-eyebrow { display: none !important; }
/* WO-04 exception: the suite-home identity HERO eyebrow ("QUINNSITE · SUITE 01
   · LIVE IN BETA") is part of the owner-approved mock-1 composition — it is a
   brand line, not a page kicker. Scoped to the hero only; every legacy kicker
   above stays removed. */
.cx-hero .cx-eyebrow { display: flex !important; }

/* Brand lockup: the "UK Sustainable Drainage" subtitle was removed, so vertically
   centre the "Catchment" wordmark against the circular Basin mark. */
.cat-mark-lockup { align-items: center !important; }
/* Stray desktop hamburger: .cat-nav-burger renders at all widths on some tool
   pages — hide it on desktop (it's the mobile toggle). */
@media (min-width: 769px) { .cat-nav-burger { display: none !important; } }
/* (active-ring patch REMOVED — WO-07a unified .qs-stepper component) */
/* (progress-step recolour REMOVED — WO-07a: no .progress-step markup ships; dead rule) */
/* The QS reset rule `button:not(.tab-btn)…{color:#fff !important}` (specificity
   0,6,1) doesn't exclude secondary/reset/outline buttons or inactive step buttons,
   forcing white text onto their light backgrounds (illegible). Restore readable
   dark-green text with a higher-specificity override; leave ACTIVE step buttons
   (green bg / white text) untouched. */
.btn-secondary.btn-secondary.btn-secondary.btn-secondary.btn-secondary.btn-secondary.btn-secondary.btn-secondary,
.btn-reset.btn-reset.btn-reset.btn-reset.btn-reset.btn-reset.btn-reset.btn-reset,
.reset-btn.reset-btn.reset-btn.reset-btn.reset-btn.reset-btn.reset-btn.reset-btn,
.btn-outline.btn-outline.btn-outline.btn-outline.btn-outline.btn-outline.btn-outline.btn-outline,
.btn-clear.btn-clear.btn-clear.btn-clear.btn-clear.btn-clear.btn-clear.btn-clear,
.step-btn.step-btn.step-btn.step-btn.step-btn.step-btn.step-btn.step-btn:not(.active):not(.completed) {
  color: var(--cat-green, #1F4D3D) !important;
}
/* Ghost buttons (transparent "Reset" / "Export PDF") were forced white-on-white
   with their border stripped — restore readable text and a subtle outline. */
.btn-ghost.btn-ghost.btn-ghost.btn-ghost.btn-ghost.btn-ghost.btn-ghost.btn-ghost {
  color: var(--cat-green, #1F4D3D) !important;
  background: transparent !important;
  border: 1px solid rgba(31, 77, 61, 0.30) !important;
}
/* Unselected toggle buttons (discount-rate picker) were white-on-light-clay. */
.discount-btn.discount-btn.discount-btn.discount-btn.discount-btn.discount-btn.discount-btn.discount-btn:not(.active):not(.selected) {
  color: var(--cat-green, #1F4D3D) !important;
}

/* Mobile overflow (masked by body{overflow-x:hidden}, so content was clipped not
   scrolled): step indicators with 4-6 steps and certain footers didn't wrap.
   Force them to wrap/break within the viewport. */
@media (max-width: 768px) {
  /* (768px stepper wrap REMOVED — WO-07a .qs-stepper compresses, end of file) */
  .step-indicator, .wizard-steps, .steps-container {
    flex-wrap: wrap !important; row-gap: 12px !important;
  }
  .step-indicator > .step-item, .step-indicator > .step,
  .wizard-steps > .wizard-step, .steps-container > .step {
    flex: 1 1 28% !important; min-width: 80px !important;
  }
  /* Step/stage button & tab strips that overflowed: let them scroll horizontally. */
  .tabs {
    flex-wrap: wrap !important; max-width: 100% !important;
  }
  .stage-tab, .step-btn { max-width: 100% !important; }
  /* KB bespoke nav: long "Back to Knowledge" CTA overflowed the nowrap bar. */
  .nav-container { flex-wrap: wrap !important; }
  .nav-container .nav-cta { max-width: 100% !important; }
  .tc-footer,
  .tc-footer-left,
  .tc-footer-links,
  .qs-foot-bottom,
  .qs-foot-bottom.cat-foot-meta,
  .cat-foot-meta {
    flex-wrap: wrap !important; white-space: normal !important;
    word-break: break-word !important; overflow-wrap: anywhere !important;
  }
  /* Wide data tables overflowed mobile (clipped) — let any table scroll in place. */
  table {
    display: block !important; width: 100% !important; max-width: 100% !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch !important;
  }
  /* The 3 KB reference tables sit in .table-wrapper (its own scroll container).
     An existing rule (table:not(.no-mobile-scroll):not(.compliance-table), spec 0,2,1)
     forces display:block + width:100%, which crushes the 5-6 columns. Override with
     higher specificity: keep them REAL tables with a readable min-width so the wrapper
     scrolls horizontally and columns stay legible. */
  .table-wrapper { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .table-wrapper table:not(.compliance-table):not(.no-mobile-scroll) {
    display: table !important; width: auto !important; max-width: none !important;
    min-width: 600px !important; overflow-x: visible !important;
  }
}

/* Settings logo upload: keep the native file control inside its dashed drop box
   on narrow mobile widths. */
.st-drop input[type="file"] {
  max-width: 100% !important; box-sizing: border-box !important; font-size: 13px;
}

/* Harmonise legal-page prose rhythm so Terms / Privacy / Cookie read identically
   (they previously diverged: line-height 1.7 vs 1.75, para 12 vs 14, li 6 vs 8). */
.tc-body p, .pp-body p, .cp-body p { line-height: 1.75 !important; margin-bottom: 14px !important; }
.tc-body li, .pp-body li, .cp-body li { line-height: 1.7 !important; margin-bottom: 8px !important; }
.tc-body h2, .pp-body h2, .cp-body h2 { font-weight: 700 !important; }

/* Result-highlight cards (S2 .storage-card, Maintenance .cost-card) declared a dark
   slate bg + white text, but the global [class*="card"] rule repainted them white
   !important leaving white-on-white. Restore as on-brand green result cards. */
.storage-card.storage-card.storage-card.storage-card,
.cost-card.cost-card.cost-card.cost-card {
  background: var(--cat-green, #1F4D3D) !important;
  border: 1px solid var(--cat-green, #1F4D3D) !important;
  color: #fff !important;
}
.storage-card.storage-card.storage-card *,
.cost-card.cost-card.cost-card * { color: #fff !important; }

/* S2 nests the injected view-toggle inside a space-between .wizard-steps flex row,
   which squeezes it to ~2px on mobile. Give it its own full-width row above the
   steps so it stays a usable horizontal pill. */
@media (max-width: 768px) {
  .wizard-steps > .suds-viewtoggle, .wizard-steps .suds-viewtoggle {
    flex: 0 0 100% !important; width: 100% !important;
    order: -1; min-width: 0 !important; overflow: visible !important;
  }
}

/* WO-06 Item 4: the WO-05 tool-navbar mark-force block retired — nav lockups
   are now a single image (.qs-lockup); no .cat-mark spans remain in navbars. */
/* Keep the Basin mark the hub dark green EVERYWHERE — including dark footers/bands
   (was rendering bright green on .cat-on-dark). One consistent brand green. */
/* WO-03 (2026-07-13, D7): .cx-footer removed from this dark-ground list — every
   .cx-footer in the suite (hub + gateways) is light sand #F6F2E9, so its mark
   must carry the light-ground identity (green ring + orange water). */
footer.cat-ink .cat-mark, .cx-standards .cat-mark, .scape-band .cat-mark, .standards-strip .cat-mark,
.cx-foot-mark .cx-mark.cx-mark, .footer .cx-mark.cx-mark, .cx-standards .cx-mark.cx-mark {
  border: none !important; border-radius: 50% !important; background-color: #FCFBF7 !important;
  background-image: url('assets/brand/quinnsite-mark-q.png') !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 72% auto !important;
}
.cat-word { justify-content: center !important; }
.cat-word span:empty { display: none !important; } /* hide residual empty subtitle slots; populated taglines (e.g. homepage "Your SuDS toolkit") show */

/* ---- Project selector bar (injected by SuDSDB.injectProjectSelector) ----
   The engine renders it with legacy slate/copper inline styles; rebrand to
   Catchment (our !important beats its non-important inline styles). ---- */
.suds-project-selector-auto { max-width: 1200px; margin: 26px auto 0; padding: 0 40px; }

/* 2026-06-28: the tool header carried padding-top:64px to clear the fixed nav,
   but the nav is now cleared by the body padding (beta-banner offset). That left
   a large empty gap above the icon/eyebrow ("text hidden above the title"). Tighten. */
.qs-tool-header { padding-top: 22px !important; }

/* ============================================================================
   GOLD-STANDARD HEADER ZONE — full-bleed cream banner (2026-06-28, Michael)
   Pages diverged: some had a cream header band, some white; some inset, some
   full-width. Force ONE flagship treatment on every tool page: a seamless
   cream banner that runs edge-to-edge, with content aligned to the 1200 grid.
   ============================================================================ */
/* The "Home / Component Design / …" breadcrumb = full-width CREAM banner. */
.cat-crumb {
  background: var(--cat-panel, #F6F2E9) !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 15px max(40px, calc(50vw - 560px)) 15px !important;
  border-top: 1px solid var(--cat-hairline, #ECE7DC) !important;
  border-bottom: 1px solid var(--cat-card-border, #E5E0D3) !important;
  box-sizing: border-box !important;
  margin-top: 14px !important;
  margin-bottom: 0 !important;
}
/* Everything UNDER the banner (icon / eyebrow / title / subtitle / toggle) = WHITE,
   contained as before. Force transparent to override any page-level cream. */
.qs-tool-header.cat-tool-head,
.qs-tool-header {
  background: transparent !important;
  width: auto !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  padding-top: 28px !important;
  border: none !important;
}
.suds-project-selector-auto { margin: 22px auto 0 !important; }
.suds-project-bar { background: var(--cat-panel, #F6F2E9) !important; border: 1px solid var(--cat-card-border, #E5E0D3) !important; font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important; border-radius: 10px !important; }
.suds-project-bar label { color: var(--cat-ink, #16271F) !important; font-weight: 600 !important; }
#suds-project-select { border: 1px solid var(--cat-input-border, #E0DBCF) !important; color: var(--cat-ink, #16271F) !important; background: #fff !important; border-radius: 8px !important; }
#suds-project-new { background: var(--cat-green, #1F4D3D) !important; color: #fff !important; border-radius: 8px !important; }
#suds-project-new:hover { background: var(--cat-green-hover, #163A2D) !important; }
#suds-project-more { background: #fff !important; color: var(--cat-green, #1F4D3D) !important; border: 1px solid var(--cat-card-border, #E5E0D3) !important; border-radius: 8px !important; }
.suds-pm-item { color: var(--cat-ink, #16271F) !important; }
.suds-pm-item:hover { background: var(--cat-panel, #F6F2E9) !important; }
.suds-pm-danger { color: #B91C1C !important; }

/* ---- Site-wide Beta banner (injected by suds-beta-banner.js) ----
   WO-260718 A1: masthead member — panel ground, ink text, live dot, clay
   link. Dismissal/offset logic untouched (chrome only). ---- */
.suds-beta-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1200;
  background: var(--cat-panel, #F6F2E9); color: var(--cat-ink, #16271F);
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif);
  border-bottom: 1px solid var(--cat-card-border, #E5E0D3);
  box-shadow: none;
}
.suds-beta-inner {
  max-width: 1240px; margin: 0 auto; padding: 8px 44px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  gap: 12px; position: relative; min-height: 24px;
}
.suds-beta-msg { font-size: 13px; line-height: 1.4; color: var(--cat-ink, #16271F); }
.suds-beta-msg::before {
  content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cat-success, #1F8A5B); margin-right: 8px; vertical-align: 1px;
}
.suds-beta-link { color: var(--cat-clay, #8A5E33); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.suds-beta-link:hover { color: var(--cat-ink, #16271F); }
.suds-beta-bar .suds-beta-close {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 28px !important; min-width: 28px !important; max-width: 28px !important; flex: 0 0 auto !important;
  height: 28px; border: 0; background: transparent; cursor: pointer;
  color: var(--cat-muted, #6B6457); font-size: 22px; line-height: 1; border-radius: 6px;
}
.suds-beta-close:hover { color: var(--cat-ink, #16271F); background: rgba(22,39,31,.06); }
/* WO-260718 B1 (belt-and-braces: this file loads after suds-mobile-fixes.css,
   so the 28px trio above would otherwise clobber the 44px tap target) */
@media (max-width: 880px) {
  .suds-beta-bar .suds-beta-close { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px; }
}
@media (max-width: 600px) {
  .suds-beta-inner { padding: 7px 40px 7px 14px; gap: 8px; align-items: flex-start; }
  .suds-beta-msg { font-size: 12px; }
}

/* (C) Pill-tab steppers (Lifecycle, S1_S7, Exceedance): inactive pills had a copper
   border + low-contrast upcoming-step labels. Use a subtle card border and readable
   ink label; the active pill is already green (handled above). */
.step-btn { border-color: var(--cat-card-border) !important; }
.step-btn:not(.active) { color: var(--cat-ink) !important; background: #fff !important; }
.step-btn:hover:not(.active) { background: var(--cat-panel) !important; }

/* (D) A few legacy/self-contained pages set `body{font-family:'Libre Franklin'!important}`
   in their own inline <style> (loaded after this file), so the brand body rule
   lost the tiebreak. Win with higher specificity (html body = 0,0,2). */
html body { font-family: var(--cat-sans, 'Libre Franklin', system-ui, sans-serif) !important; }

/* (E) — AMENDED WO-05 Item 1 (2026-07-17, owner): eyebrows/kickers are the
   house UI SANS chip role now (600, uppercase, 0.07em), NOT teletype mono.
   High specificity (html body … = 0,1,2) beats the legacy per-page
   `.qs-tool-eyebrow{font-family:'Libre Franklin'!important}` rules. Standards CODES
   (.std-card-code, e.g. "BS 8582") are code-like refs and stay mono. */
html body .eyebrow, html body [class*="eyebrow"], html body .qs-tool-eyebrow,
html body .kt-eyebrow, html body .tc-eyebrow, html body .scape-band-eyebrow {
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important;
  font-weight: 600 !important; letter-spacing: 0.07em !important;
}
html body .std-card-code {
  font-family: var(--cat-mono, 'IBM Plex Mono', ui-monospace, monospace) !important;
}
.suds-we-modal-close { background: transparent !important; color: var(--cat-muted) !important; border: none !important; }
.suds-we-modal-btn-secondary { background: transparent !important; color: var(--cat-green) !important; border: 1px solid var(--cat-card-border) !important; }
/* Steps / One-page view toggle (injected by suds-nav.js on every wizard tool):
   the inactive button inherited white text from the page's generic
   button{color:white!important} mega-rule (0,6,1) → invisible "One page" label.
   Beat it with class-repetition specificity (0,8,x). Active pill stays ink+white. */
.suds-viewtoggle.suds-viewtoggle.suds-viewtoggle.suds-viewtoggle.suds-viewtoggle.suds-viewtoggle.suds-viewtoggle button:not(.active) {
  color: var(--cat-green) !important; background: transparent !important;
}
.suds-viewtoggle.suds-viewtoggle.suds-viewtoggle.suds-viewtoggle.suds-viewtoggle.suds-viewtoggle.suds-viewtoggle button.active {
  color: #fff !important; background: var(--cat-ink) !important;
}
/* Success / export buttons → Catchment green */
.btn-success, .btn-export { background: var(--cat-green) !important; color: #fff !important; border: none !important; }
/* Higher-specificity / alternate primary-button classes some tools use
   (.qs-button-primary on WFD; .btn.btn-primary stacking on Tree_Pit etc.) → green. */
.qs-button-primary, .qs-button.qs-button-primary,
.btn.btn-primary, .btn.btn-calculate, .primary-btn, .calculate-btn, .submit-btn {
  background: var(--cat-green) !important; color: #fff !important; border: none !important;
}
.qs-button-primary:hover, .btn.btn-primary:hover, .primary-btn:hover { background: var(--cat-green-hover) !important; }
/* PASS text → Catchment success text (not bright emerald) */
.compliance-item.pass, .compliance-pass, .status-pass { color: var(--cat-ok-text) !important; }
/* Old blue "info-box" → warm Catchment panel */
.info-box { background: var(--cat-panel) !important; border-color: var(--cat-card-border) !important; color: var(--cat-body) !important; }
.info-box strong, .info-box b, .info-box a { color: var(--cat-ink) !important; }
.info-box a { color: var(--cat-clay) !important; }
/* Toggle / segmented buttons (e.g. BRE rainfall mode) → green active, ghost inactive */
.rainfall-mode-btn { background: transparent !important; color: var(--cat-green) !important; border-color: var(--cat-card-border) !important; }
.rainfall-mode-btn.active { background: var(--cat-green) !important; color: #fff !important; border-color: var(--cat-green) !important; }
/* Exceedance bespoke step nav → Catchment step pattern (clay active) */
.step-btn { background: var(--cat-panel) !important; color: var(--cat-body) !important; border-color: var(--cat-card-border) !important; }
.step-btn.active { background: var(--cat-clay) !important; color: #fff !important; border-color: var(--cat-clay) !important; }
/* Result labels → muted Catchment, not slate */
.result-label { color: var(--cat-muted) !important; }
/* Burger bars → ink (belt-and-braces over the slate-800 token) */
.qs-nav-burger-bar { background: var(--cat-ink) !important; }
/* Nav breakpoint: links hide ≤880 but burger showed only ≤768 → 769–880 had NO nav.
   Show the burger across the whole ≤880 range to close the dead-zone. */
@media (max-width: 880px) {
  .qs-nav-links { display: none !important; }
  .qs-nav-container .qs-nav-burger {
    display: inline-flex !important; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 44px !important; height: 44px !important; padding: 10px !important;
    margin-left: auto !important; background: transparent !important; border: 0 !important; cursor: pointer;
  }
}

/* ================================================================
   CALCULATOR CHROME UNIFICATION  (audit P1-4)
   Each calculator ships its own legacy palette, so callout/section
   accents differed tool-to-tool (copper left-borders on FRA &
   Greenfield .calc-section; blue guidance boxes on Pipe Sizing;
   cyan .alert on Sediment Forebay). These rules force ONE Catchment
   treatment across every tool: neutral warm panels, a single green
   informational accent, semantic warn/ok only where meaningful.
   Appended last so it wins on equal specificity; !important beats
   the per-tool inline rules.
   ================================================================ */

/* --- Generic informational callouts / section panels → green accent --- */
.calc-section,
.info-box,
.help-panel,
.method-note,
.section-block,
.summary-item,
.override-section,
.recommendations-box,
.alert.info,
.alert-info,
[class*="alert"] .info,
.callout,
[class*="guidance"],
[class*="section-block"],
[class*="help-panel"],
[class*="-note"]:not(.required-note) {
  background: var(--cat-panel) !important;
  border: 1px solid var(--cat-card-border) !important;
  /* band 08: the green left-edge accent treatment was removed (2026-07-03,
     per Michael — it rendered as a broken sliver on rounded corners) */
  color: var(--cat-body) !important;
  border-radius: 12px !important;
}
/* Headings / emphasised text / values inside those callouts → ink/green, not copper/blue/cyan */
.calc-section h3,
.calc-section h4,
.info-box strong,
.method-note strong,
.recommendations-box h4,
.callout strong,
[class*="guidance"] strong,
.help-panel strong,
.section-block h3,
.section-block h4,
.alert-info,
.alert-info h4,
.alert.info {
  color: var(--cat-ink) !important;
}
.summary-item-value, .summary-item-label,
.recommendation-list li, .recommendation-list li:before {
  color: var(--cat-green) !important;
}

/* --- Warning callouts → clay/amber semantic set --- */
.alert.warning, .alert-warning, .warning-box, [class*="warn"] {
  background: var(--cat-warn-bg) !important;
  border: 1px solid var(--cat-warn-border) !important;
  border-left: 4px solid var(--cat-clay) !important;
  color: var(--cat-warn-text) !important;
  border-radius: 12px !important;
}
.alert-warning strong, .warning-box strong, [class*="warn"] strong { color: var(--cat-warn-text) !important; }

/* --- Success callouts → green semantic set --- */
.alert.success, .alert-success {
  background: var(--cat-ok-bg) !important;
  border: 1px solid var(--cat-ok-border) !important;
  border-left: 4px solid var(--cat-success) !important;
  color: var(--cat-ok-text) !important;
  border-radius: 12px !important;
}

/* --- Errors keep red, but unify shape --- */
.alert.error, .alert-error {
  border-left: 4px solid #B91C1C !important; border-radius: 12px !important;
}

/* --- Small inline info icons (circled-i etc.) → match the green "?" help icons --- */
.info-icon,
[class*="info-icon"] {
  background: var(--cat-green) !important;
  border-color: var(--cat-green) !important;
  color: #ffffff !important;
  stroke: #ffffff !important;
}
.info-icon svg, [class*="info-icon"] svg { stroke: #ffffff !important; }

/* --- Selected radio/material cards: green accent, not copper --- */
label.selected,
input[type="radio"]:checked + label {
  border-color: var(--cat-green) !important;
}
input[type="radio"], input[type="checkbox"] { accent-color: var(--cat-green) !important; }

/* --- P1-4 sweep: bespoke classes the block above didn't match (per-tool audit) --- */
/* Copper callout panels not covered by the generic set */
.results-intro, .info:not(.info-icon):not(.info-box) {
  background: var(--cat-panel) !important;
  border: 1px solid var(--cat-card-border) !important;
  /* band 08: left-edge accent removed 2026-07-03 (see note above) */
  color: var(--cat-body) !important;
  border-radius: 12px !important;
}
.results-intro strong, .info:not(.info-icon):not(.info-box) strong { color: var(--cat-ink) !important; }
/* Slate headings/labels inside tool chrome → ink */
.control-title,
.chart-title,
.panel-title,
.qs-card-title { color: var(--cat-ink) !important; }
.step-desc, .qs-wizard-label, .qs-label { color: var(--cat-body) !important; }
/* Standard (S1–S7) badges lost their fill to a near-white override → white-on-white.
   Restore as solid green badges with white glyphs. */
.standard-badge { background: var(--cat-green) !important; background-color: var(--cat-green) !important; color: #ffffff !important; }
/* Brand wordmark text leaking slate in some tool navbars → ink */
.cat-word, .cat-word b, .qs-nav-brand .cat-word, .cat-mark-lockup .cat-word { color: var(--qs-ink-green, #0F211E) !important; }

/* ================================================================
   P1-6  Calculator forms: single column by default
   The brief calls for a clean single-column feel; tools paired
   unrelated fields two-up (.form-row / .form-grid = 1fr 1fr at
   desktop). Force single column on desktop too so no row pairs
   unrelated inputs and layout is consistent tool-to-tool. Genuine
   paired values (length × width etc.) simply stack — acceptable and
   tidy. A tool can opt a row back into two-up with .pair / .two-up.
   (Mobile is already single-column at ≤768.)
   ================================================================ */
@media (min-width: 769px) {
  .form-row:not(.pair):not(.two-up):not(.surface-row),
  .form-grid:not(.pair):not(.two-up) {
    grid-template-columns: 1fr !important;
  }
}

/* ================================================================
   FIELD-FRAME SEARCH / FILTER PILLS — single border, not double
   ----------------------------------------------------------------
   .cx-search / .cx-filter are pill wrappers that ARE the field frame
   (4-sided border + radius) with an input inside. The suite-wide input
   border rule was re-drawing a border on that inner input, producing a
   visible double border. The inner field must be borderless; focus is
   shown on the wrapper instead. (Dividers like .notes-field/.hierarchy-
   details use border-top only and are intentionally untouched.)
   ================================================================ */
.cx-search input:not([type=checkbox]):not([type=radio]):not([type=range]),
.cx-filter input:not([type=checkbox]):not([type=radio]):not([type=range]) {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
.cx-search:focus-within, .cx-filter:focus-within {
  border-color: var(--cat-green, #1F4D3D) !important;
  box-shadow: 0 0 0 3px rgba(31, 77, 61, 0.12) !important;
}

/* ================================================================
   SELECTABLE TOGGLE / OPTION / STATUS BUTTONS — visible selected state
   ----------------------------------------------------------------
   The suite-wide button paint (an injected inline rule of the form
   `button:not(.tab-btn):not(.tab-button):not([class*="tab"])
   :not(.step-circle):not(.accordion-header):not(.qs-nav-cta)`,
   specificity 0-6-1) forces EVERY bare <button> green with white text.
   That silently erased the selected/unselected distinction on choice
   controls — drain-type, rainfall-method, geotextile (Filter Drain),
   rainfall-method (Permeable Paving), pipe-size options (Pipe Sizing),
   and the compliant / non-compliant / N-A status buttons (Treatment
   Train). Users could not see which option was active.

   This sheet loads AFTER those inline styles, so a rule of EQUAL
   specificity (0-6-1) wins on source order; the `.active`/state rules
   below are 0-7-1 and win outright. Selectors mirror the injected
   :not() chain to reach 0-6-1. No markup or JS is touched.
   ================================================================ */

/* Inactive base — neutral, legible (was green-on-green / white-on-white) */
button.toggle-btn:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta),
button.surface-btn:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta),
button.pipe-option-btn:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta),
button.rainfall-mode-btn:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta) {
  background: #FFFFFF !important;
  color: var(--cat-ink, #16271F) !important;
  border: 1px solid var(--cat-input-border, #E0DBCF) !important;
  box-shadow: none !important;
}

/* Active/selected — clearly distinct (Catchment green) */
button.toggle-btn.active:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta),
button.surface-btn.active:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta),
button.pipe-option-btn.active:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta),
button.rainfall-mode-btn.active:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta) {
  background: var(--cat-primary, #1F4D3D) !important;
  color: #FFFFFF !important;
  border-color: var(--cat-primary, #1F4D3D) !important;
  box-shadow: 0 2px 8px rgba(31, 77, 61, 0.25) !important;
}

/* Treatment Train compliance status buttons — restore semantic colours
   (these convey compliant=green / non-compliant=red / N-A=grey, which the
   suite paint had flattened to a single colour on a compliance checklist). */
button.status-btn:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta) {
  background: #FFFFFF !important;
  color: var(--cat-ink, #16271F) !important;
  border: 1px solid var(--cat-input-border, #E0DBCF) !important;
  box-shadow: none !important;
}
button.status-btn.compliant:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta) {
  background: #10B981 !important; color: #FFFFFF !important; border-color: #10B981 !important;
}
button.status-btn.non-compliant:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta) {
  background: #EF4444 !important; color: #FFFFFF !important; border-color: #EF4444 !important;
}
button.status-btn.na:not(.tab-btn):not(.tab-button):not(.step-circle):not(.accordion-header):not(.qs-nav-cta) {
  background: #94A3B8 !important; color: #FFFFFF !important; border-color: #64748B !important;
}

/* 2026-06-28: Some wizards (Groundwater, Orifice, Constructed Wetlands) use an
   EMPTY `.progress-step` bar inside `.progress-bar`. The shared calculator-chrome
   rule grouped `.progress-step` with `.step-circle` and forced 46px circle sizing,
   so flex:1 stretched them into empty pill-bars that looked broken. Render them as
   a slim segmented progress bar instead. `.progress-bar .progress-step` (0-2-0)
   beats the inline `.progress-step` (0-1-0) rule. */
.progress-bar { display: flex !important; gap: 8px !important; padding: 0 !important; align-items: center !important; }
.progress-bar::before { display: none !important; }
.progress-bar .progress-step { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; height: 8px !important; border-radius: 4px !important; background: var(--suds-slate-200, #E2E8F0) !important; box-shadow: none !important; cursor: pointer !important; }
.progress-bar .progress-step.active { background: #1F4D3D !important; }
.progress-bar .progress-step.completed { background: var(--suds-success-500, #10B981) !important; }

/* 2026-06-28: On tools with chart SVGs (Orifice, Retention_Pond) the page's
   generic `svg{width:100%;min-height:400px}` also caught the injected 30px hero
   tool icon and blew it up to fill the column. Lock the hero icon to its size. */
.cat-tool-ic svg { width: 30px !important; height: 30px !important; min-height: 0 !important; }

/* 2026-06-28: Help-icon consistency (Michael). All field help triggers must be a
   green circle with a white "?". Two systems existed: .help-icon (beige + dark,
   some EMPTY with only a title/tooltip and no visible glyph) and .field-help
   (copper). Unify colour + shape; fill the empty ones with a "?" via :empty. */
.help-icon, .field-help {
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  width: 18px !important; height: 18px !important; min-width: 18px !important; border-radius: 50% !important;
  background: #1F4D3D !important; color: #fff !important;
  font-size: 0.7rem !important; font-weight: 700 !important; line-height: 1 !important;
  cursor: help; vertical-align: middle; padding: 0 !important;
}
.help-icon:empty::before, .field-help:empty::before { content: "?"; }

/* 2026-06-28: Steps/One-page toggle now sits directly below the tool subtitle
   (moved out of the stepper row), left-aligned, with an even gap above and below. */
.suds-viewtoggle { display: inline-flex !important; float: none !important; background: #fff !important; border: 1px solid var(--cat-card-border, #E5E0D3) !important; border-radius: 9px !important; padding: 3px !important; gap: 3px !important; }
/* Compact segmented control — was inheriting the big primary-button padding (oversized). */
.suds-viewtoggle button:not(.qs-nav-cta):not(.btn-primary):not(.cx-btn):not(.pr-btn):not(.tab-btn):not(.step-circle) {
  padding: 7px 15px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important;
  border: none !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: var(--cat-muted, #6B6457) !important;
  box-shadow: none !important;
  min-height: 0 !important;
  transform: none !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
}
.suds-viewtoggle button.active:not(.qs-nav-cta):not(.btn-primary):not(.cx-btn):not(.pr-btn):not(.tab-btn) { background: var(--cat-green, #1F4D3D) !important; color: #fff !important; box-shadow: none !important; }
.suds-viewtoggle button:not(.active):not(.qs-nav-cta):not(.btn-primary):not(.cx-btn):not(.pr-btn):hover { color: var(--cat-ink, #16271F) !important; background: var(--cat-panel, #F6F2E9) !important; }
.qs-tool-subtitle + .suds-viewtoggle, .cat-tool-subtitle + .suds-viewtoggle {
  margin: 20px 0 2px !important;
}

/* (2026-06-28 gold-layout forcing REMOVED — WO-07a unified .qs-stepper component) */

/* ============================================================
   UNIVERSAL NAVBAR NORMALISATION  (2026-06-29)
   One consistent top bar across all six legacy nav systems
   (cx-nav · qs-navbar · ph-nav · pr-nav · plain navbar · st-nav).
   Geometry + brand lockup + links + CTA forced identical.
   This file loads last, so these win. No page bodies touched.
   ============================================================ */
.cx-nav, .qs-navbar, .pr-nav, nav.navbar, .st-nav {
  background: #FFFFFF !important; /* WO-260718 A2 (acceptance 7.1: computed white on all templates; this later block would otherwise re-impose paper) */
  /* WO-05 Item 4 (owner): warm paper ground + FIRMER bottom hairline */
  border-bottom: 1px solid var(--cat-divider, #D8CFBE) !important;
  box-shadow: none !important;
  height: 68px !important; min-height: 68px !important; max-height: 68px !important; padding: 0 !important;
}
/* Inner container — scoped under wrapper so it beats per-page inline nav CSS.
   Fixed height + vertical centring => every bar is identical regardless of content. */
.cx-nav .cx-nav-inner,
.qs-navbar .qs-nav-container,
.pr-nav .pr-nav-in,
nav.navbar .nav-container,
.st-nav .st-nav-in {
  max-width: 1200px !important; margin: 0 auto !important;
  padding: 0 40px !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important;
  display: flex !important; align-items: center !important; justify-content: space-between !important;
  gap: 24px !important; box-sizing: border-box !important;
}
/* Brand lockup — circular mark + "Catchment", vertically centred */
.qs-nav-brand,
.cx-lockup,
.cat-mark-lockup,
.nav-brand,
.st-nav-in > a[aria-label*="home"],
.pr-nav-in > a[aria-label*="home"] {
  display: inline-flex !important; align-items: center !important; gap: 11px !important;
}
.cat-word, .cx-word { display: flex !important; flex-direction: column !important; justify-content: center !important; }
/* Links row — desktop layout only; mobile keeps each page's own burger collapse */
.cx-nav .cx-nav-links > a:not([class*="cta"]),
.qs-navbar .qs-nav-links > a:not([class*="cta"]),
.qs-navbar .cat-nav-links > a:not([class*="cta"]),
.pr-nav .pr-links > a:not([class*="cta"]),
nav.navbar .nav-links > a:not([class*="cta"]),
.st-nav .st-links > a:not([class*="cta"]) {
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important;
  font-size: 14px !important; font-weight: 500 !important; line-height: 1 !important;
  color: var(--cat-ink, #16271F) !important; text-decoration: none !important;
  padding: 0 !important; margin: 0 !important; background: none !important; border: none !important;
  min-height: 0 !important; border-radius: 0 !important; height: auto !important;
}
.cx-nav .cx-nav-links > a.active,
.cx-nav .cx-nav-links > a.cx-active,
.qs-navbar .qs-nav-links > a.active,
.pr-nav .pr-links > a.active,
nav.navbar .nav-links > a.active,
nav.navbar .nav-links > a.cx-active,
.st-nav .st-links > a.active {
  font-weight: 700 !important; color: var(--cat-ink, #16271F) !important; background: none !important;
}
/* Divider between primary links and Projects/Plans/CTA */
.cat-nav-div, .cx-nav-sep {
  width: 1px !important; height: 20px !important; flex: 0 0 1px !important;
  background: var(--cat-card-border, #E5E0D3) !important; display: inline-block !important;
  padding: 0 !important; margin: 0 !important;
}
/* "Browse tools" CTA pill — identical everywhere (scoped for specificity) */
.cx-nav .cx-nav-cta,
.qs-navbar .qs-nav-cta,
.qs-navbar .cat-nav-cta,
.pr-nav .pr-cta,
.pr-nav .cat-nav-cta,
nav.navbar .cx-nav-cta,
nav.navbar .cat-nav-cta,
.st-nav .cat-nav-cta {
  background: var(--cat-green, #1F4D3D) !important; color: #fff !important;
  border: none !important; border-radius: 9px !important; padding: 11px 20px !important;
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important;
  font-weight: 600 !important; font-size: 14px !important; line-height: 1 !important;
  text-decoration: none !important; display: inline-flex !important; align-items: center !important;
  min-height: 0 !important; height: auto !important; white-space: nowrap !important;
}
.cx-nav .cx-nav-cta:hover,
.qs-navbar .qs-nav-cta:hover,
.qs-navbar .cat-nav-cta:hover,
.pr-nav .pr-cta:hover,
.pr-nav .cat-nav-cta:hover,
nav.navbar .cx-nav-cta:hover,
nav.navbar .cat-nav-cta:hover,
.st-nav .cat-nav-cta:hover {
  background: var(--cat-green-hover, #163A2D) !important; color: #fff !important;
}
/* Plain-navbar pages (KB S-series, NOTICES) style .nav-links a as buttons, which
   was flattening the injected pill. Higher-specificity override restores the pill. */
nav.navbar .nav-links a.cat-nav-cta, nav.navbar .nav-links a.cx-nav-cta,
nav.navbar .nav-links > a.cat-nav-cta, nav.navbar .nav-links > a.cx-nav-cta {
  background: var(--cat-green, #1F4D3D) !important; color: #fff !important;
  border: 1px solid var(--cat-green, #1F4D3D) !important; border-radius: 9px !important;
  padding: 10px 18px !important; font-weight: 600 !important; font-size: 14px !important;
  gap: 0 !important; line-height: 1 !important;
}
/* Keep all mobile burgers/checkboxes out of the desktop bar so space-between stays 2-up */
@media (min-width: 861px) {
  .cat-nav-burger,
  .st-burger,
  .pr-burger,
  .cx-burger,
  .qs-nav-burger,
  .nav-burger,
  #catNavToggle,
  #prnav,
  #cnav { display: none !important; }
  .ph-drop, .st-drop { display: none !important; }
  /* Desktop link row (kept out of mobile so the burger collapse still works) */
  .cx-nav .cx-nav-links,
  .qs-navbar .qs-nav-links,
  .qs-navbar .cat-nav-links,
  .pr-nav .pr-links,
  nav.navbar .nav-links,
  .st-nav .st-links {
    display: flex !important; align-items: center !important; gap: 24px !important;
  }
}
/* 2026-07-16 aesthetic audit: the 68px hard clamp above let the mobile bar's
   wrapped second row (pill CTA + burger) paint OUTSIDE the white band, over the
   page H1 (caught at 375px on Catchment.html and the hub). At mobile widths the
   bar must be allowed to GROW so a wrapped row stays inside the bar; tighter
   padding/gap and a slimmer pill keep most pages to a single row. */
@media (max-width: 860px) {
  .cx-nav, .qs-navbar, .pr-nav, nav.navbar, .st-nav {
    height: auto !important; min-height: 68px !important; max-height: none !important;
  }
  .cx-nav .cx-nav-inner,
  .qs-navbar .qs-nav-container,
  .pr-nav .pr-nav-in,
  nav.navbar .nav-container,
  .st-nav .st-nav-in {
    height: auto !important; min-height: 68px !important; max-height: none !important;
    flex-wrap: wrap !important; padding: 8px 20px !important; gap: 8px 12px !important;
  }
  nav .qs-nav-open,
  .cx-nav .cx-nav-cta,
  .qs-navbar .qs-nav-cta,
  .qs-navbar .cat-nav-cta,
  .pr-nav .pr-cta,
  .pr-nav .cat-nav-cta,
  nav.navbar .cx-nav-cta,
  nav.navbar .cat-nav-cta,
  .st-nav .cat-nav-cta {
    padding: 9px 14px !important; font-size: 13px !important;
  }
}


/* WO-01 R4 "centre in depth" (2026-07-03 sweep): stat/result cards must centre
   their content vertically — grid-stretched cards were leaving content pinned
   to the top (caught on BRE365: 25px above vs 44px below). Enforce the band-09
   treatment everywhere: label/value/unit stack centred in the card's depth. */
html body .result-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}


/* 2026-07-03 (Michael): page-footer disclaimer strips are green cards with white
   text — padded and centred in depth, no bunching, no left-edge accent. */
html body .ph-note[class], html body .pr-foot-note[class] {
  background: var(--cat-green, #1F4D3D) !important;
  border: none !important;
  border-left: none !important;
  border-radius: 12px !important;
  color: #fff !important;
  padding: 16px 22px !important;
  line-height: 1.65 !important;
}
html body .ph-note[class] strong, html body .pr-foot-note[class] strong { color: #fff !important; }
html body .ph-note[class] a, html body .pr-foot-note[class] a { color: #fff !important; text-decoration: underline !important; }


/* ============================================================
   2026-07-03 consistency pass (Michael's pre-launch review):
   ============================================================ */
/* 1. Layout containers are LAYOUT, not panels — no white boxing/radius around
   whole tools (flagged on Pipe Sizing). The paper token shows through. */
html body .container, html body .page-container, html body .main-container {
  background: transparent !important; border-radius: 0 !important; border: none !important; box-shadow: none !important;
}
/* 2. No inflated top gap between the header block and the first card
   (flagged on Pipe Sizing: .content carried 40px padding-top). */
.container > .content { padding-top: 0 !important; }
/* 3. Step panels always carry the token border — never a dark/green outline
   ("black border to tool", flagged on Pipe Sizing active step). Specificity
   boosted above per-page .step.active rules. */
html body .step-content.step-content.step-content {
  border: 1px solid var(--cat-card-border, #E5E0D3) !important;
}
/* 4. Pill steppers with inline labels (wizard-steps / step-nav families):
   the horizontal connector line rendered THROUGH the labels (flagged on
   Sediment Forebay). These steppers read as pills — no connector bar. */
.wizard-steps::before, .step-nav::before { display: none !important; content: none !important; }

/* 2026-07-03: breadcrumb band must read full-bleed even where page structure
   nests it inside .container (flagged on Pipe Sizing after container un-boxing). */
.container .cat-crumb { width: 100vw; margin-left: calc(50% - 50vw); }

/* 2026-07-03: the injected Steps/One-page toggle must render identically on
   every page — some legacy pages uppercase all buttons (flagged on
   Construction Phase). */
.suds-viewtoggle button { text-transform: none !important; letter-spacing: 0 !important; }

/* 2026-07-03: page ground is ALWAYS the paper token (§4.1) — a few legacy pages
   forced a pure-white body (flagged on Project Manager). And project-bar
   controls never inherit page-level text-transforms. */
html body { background: var(--cat-paper, #FCFBF7) !important; }
.suds-project-bar button, .suds-project-bar select, .suds-project-bar label { text-transform: none !important; letter-spacing: 0 !important; }

/* (2026-07-03 #3 step-nav centring REMOVED — WO-07a unified .qs-stepper component) */

/* ============================================================
   2026-07-03 enhancement #5 — shared print stylesheet.
   Guarantees the §4 tokens in print the way this sheet does on screen:
   ink on white, bordered cards, no chrome, no page breaks inside panels.
   ============================================================ */
@media print {
  html body { background: #fff !important; padding-top: 0 !important; }
  /* .suds-beta-bar is the class the injected promo bar actually carries
     (suds-beta-banner.js); the legacy -banner selector matched nothing, so the
     fixed bar printed over the header on every page. Keep both. */
  .suds-beta-banner, .suds-beta-bar, .cat-tool-nav, .qs-navbar, .suds-project-bar, .cat-crumb,
  .suds-viewtoggle, .sg-fab, #sudsGuideHost, .help-btn-floating, .button-group,
  .btn-primary, .btn-secondary, button:not(.no-print-keep), .suds-we-modal,
  footer .qs-foot-bottom a { display: none !important; }
  .card, .step-content, .panel, .content-card, .calculation-box, .results-panel {
    border: 1px solid #E5E0D3 !important; box-shadow: none !important;
    break-inside: avoid !important; page-break-inside: avoid !important;
  }
  .step-content { display: block !important; } /* print shows all steps */
  h1, h2, h3, .section-title { color: #16271F !important; }
  a { color: #16271F !important; text-decoration: none !important; }
}

/* 2026-07-03 enhancement #6 — standard results empty state (roll-out of the
   reference pattern): quiet sand callout, centred in depth, no bare strings. */
/* #6 continued: the tools' existing `.placeholder` empty states adopt the same
   treatment via CSS alone — JS reset paths recreate .placeholder, so no markup
   or logic changes are needed. */
.panel .placeholder, .card .placeholder, [id$="Results"] .placeholder, .results-section .placeholder {
  background: var(--cat-panel, #F6F2E9) !important;
  border: 1px solid var(--cat-card-border, #E5E0D3) !important;
  border-radius: 12px !important;
  padding: 22px 24px !important;
  text-align: center !important;
  color: var(--cat-muted, #6B6457) !important;
  font-size: 0.9rem !important;
  min-height: 66px;
  display: flex !important; flex-direction: column !important; justify-content: center !important;
}
.panel .placeholder strong, .card .placeholder strong, [id$="Results"] .placeholder strong { color: var(--cat-ink, #16271F) !important; }

/* 2026-07-03 enhancement #12 — glossary hover-cards: quiet dotted underline on
   known terms in labels/section titles; definition on hover/focus. */
.suds-gloss {
  border-bottom: 1px dotted var(--cat-clay-rule, #C9A06A);
  cursor: help; position: relative;
}
.suds-gloss:hover::after, .suds-gloss:focus::after {
  content: attr(data-glossdef);
  position: absolute; bottom: 130%; left: 0;
  width: 300px; max-width: 70vw;
  background: var(--cat-ink, #16271F); color: #fff;
  font-size: 12px; line-height: 1.5; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  padding: 10px 13px; border-radius: 10px;
  box-shadow: 0 8px 24px -6px rgba(22,39,31,.4);
  z-index: 1200; white-space: normal;
}

/* (2026-07-04 CX#6 mobile label rule REMOVED — folded into the WO-07a .qs-stepper mobile spec) */

/* 2026-07-04 — "Save to project" confirmation state: the button itself confirms
   the save (green fill, tick) then returns to rest. No extra components. */
.suds-save-btn-done, button.suds-save-btn-done, .btn-secondary.suds-save-btn-done {
  background: var(--cat-green, #1F4D3D) !important;
  color: #fff !important;
  border-color: var(--cat-green, #1F4D3D) !important;
}

/* ---- Beta gate (suds-beta-gate.js) ---- */
body.suds-gate-locked { overflow: hidden; }
.suds-gate-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(252, 251, 247, 0.78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.suds-gate-card {
  background: #FCFBF7; border: 1px solid var(--cat-card-border, #E5E0D3);
  border-radius: 14px; box-shadow: 0 18px 48px rgba(22, 39, 31, 0.14);
  max-width: 460px; width: 100%; padding: 32px 32px 28px; text-align: left;
}
.suds-gate-eyebrow {
  font-family: 'Libre Franklin', sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--cat-clay, #8A5E33); margin-bottom: 10px;
}
.suds-gate-title {
  font-family: 'Source Serif 4', Georgia, serif; font-size: 26px; line-height: 1.15;
  color: var(--cat-ink, #16271F); margin: 0 0 10px;
}
.suds-gate-copy {
  font-family: 'Libre Franklin', sans-serif; font-size: 14.5px; line-height: 1.55;
  color: #47443C; margin: 0 0 18px;
}
.suds-gate-label {
  display: block; font-family: 'Libre Franklin', sans-serif; font-size: 12.5px;
  font-weight: 600; color: var(--cat-ink, #16271F); margin-bottom: 6px;
}
.suds-gate-row { display: flex; gap: 8px; flex-wrap: wrap; } /* 2026-07-19: wrap so email field keeps its room */
.suds-gate-input {
  flex: 1 1 200px; min-width: 0; padding: 10px 12px; font-size: 14px;
  font-family: 'Libre Franklin', sans-serif; color: var(--cat-ink, #16271F);
  background: #fff; border: 1px solid #E0DACD; border-radius: 9px;
}
.suds-gate-input:focus { outline: 2px solid var(--cat-green, #1F4D3D); outline-offset: 1px; }
.suds-gate-btn {
  flex: 0 0 auto; padding: 10px 18px; border: none; border-radius: 9px;
  background: var(--cat-green, #1F4D3D); color: #fff; cursor: pointer;
  font-family: 'Libre Franklin', sans-serif; font-size: 14px; font-weight: 600;
}
.suds-gate-btn:hover { background: var(--cat-green-hover, #173A2D); }
.suds-gate-msg {
  font-family: 'Libre Franklin', sans-serif; font-size: 12.5px;
  color: var(--cat-clay, #8A5E33); margin-top: 8px; min-height: 16px;
}
.suds-gate-done {
  font-family: 'Libre Franklin', sans-serif; font-size: 14px; font-weight: 600;
  color: var(--cat-green, #1F4D3D); padding: 6px 0;
}
.suds-gate-links {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--cat-hairline, #ECE7DC);
  font-family: 'Libre Franklin', sans-serif; font-size: 13.5px;
  display: flex; gap: 10px; align-items: center;
}
.suds-gate-links a { color: var(--cat-green, #1F4D3D); font-weight: 600; text-decoration: none; }
.suds-gate-links a:hover { text-decoration: underline; }
/* 2026-07-19: positive "LIVE" chip for the six beta-live tools (pairs with AFTER BETA) */
.suds-gate-chip.suds-gate-chip.suds-gate-chip-live {
  color: var(--cat-green, #1F4D3D) !important;
  background: var(--cat-ok-bg, #EAF2EC) !important;
  border-color: var(--cat-success, #1F8A5B) !important;
}
.suds-gate-chip {
  display: inline-block; vertical-align: middle; margin-left: 2px;
  font-family: 'Libre Franklin', sans-serif; font-weight: 600; text-transform: uppercase;
  font-size: 9.5px; letter-spacing: 0.06em;
  color: var(--cat-clay, #8A5E33); background: var(--cat-sand, #F4EFE4);
  border: 1px solid var(--cat-card-border, #E5E0D3); border-radius: 999px;
  padding: 2px 8px; white-space: nowrap;
}

body.suds-gate-locked .session-restore-banner,
body.suds-gate-locked .suds-save-nudge { display: none !important; }

/* ---- Quinnsite wordmark accent ("site") ----
   Robust against sub-label span styling (.cat-word span / .cx-word span set
   tiny mono uppercase with !important on some pages). Tool navbars carry a
   legacy fake cat-on-dark class on a LIGHT bar, so the dark (mint) treatment
   is scoped to genuinely dark grounds only. */
.cat-word b .qs-site, .cx-word b .qs-site {
  font-family: inherit !important; font-size: inherit !important;
  font-weight: inherit !important; letter-spacing: inherit !important;
  text-transform: none !important; line-height: inherit !important;
  margin: 0 !important; display: inline !important;
  color: inherit !important;
}
/* WO-260712 A3 (2026-07-15): the two-tone accent retires — "site" inherits the
   deep-green wordmark colour on every ground. */
footer.cat-ink .cat-word b .qs-site,
.scape-band .cat-word b .qs-site, .standards-strip .cat-word b .qs-site { color: inherit !important; }

/* ============================================================
   WO-02 (2026-07-12) — SUITE-FIRST NAV: the "Catchment ▾" dropdown.
   Structure (built by normalizeNav in suds-nav.js, static on the hub):
     .cat-dd > a.cat-dd-parent  (destination: hub #tools)
             > .cat-dd-menu    (Overview · Design Journey · Knowledge · UK Standards)
   CSS-only disclosure: hover / :focus-within on desktop; inside the mobile
   burger panels the menu renders as an always-open labelled, indented group.
   Desktop breakpoints mirror each nav family's own burger breakpoint:
   cx/qs/cat ≤880 · pr/plain-navbar ≤768 · ph/st ≤640.
   ============================================================ */
/* Base = mobile presentation (labelled group). */
.cat-dd { display: flex; flex-direction: column; align-items: stretch; position: relative; }
.cat-dd > a.cat-dd-parent {
  display: inline-flex !important; align-items: center; gap: 7px;
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: var(--cat-ink, #16271F) !important; text-decoration: none !important;
  background: none !important; border-radius: 0 !important;
}
.cat-dd > a.cat-dd-parent.active { font-weight: 700 !important; }
.cat-dd > a.cat-dd-parent::after {
  content: ""; width: 6px; height: 6px; flex: 0 0 auto; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.cat-dd-menu { display: flex; flex-direction: column; }
.cat-dd-menu a {
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important;
  font-size: 14px !important; font-weight: 500 !important;
  color: var(--cat-body, #5d584e) !important; text-decoration: none !important;
}
.cat-dd-menu a:hover { color: var(--cat-ink, #16271F) !important; }
/* Indent the group inside every burger/drawer panel. */
.cat-dd .cat-dd-menu a { padding-left: 18px !important; }
/* Injected-burger (plain navbar) open panel: match its 24px link inset + indent. */
#navbar.nav-open .nav-links .cat-dd-menu a { padding-left: 44px !important; }
/* Dividers are meaningless in the stacked drawer lists. */
.ph-drop .cat-nav-div, .st-drop .cat-nav-div, .ph-drop .cx-nav-sep, .st-drop .cx-nav-sep { display: none !important; }
/* The ph/st drawer panels style only direct-child links; give dropdown rows the same hit area. */
.ph-drop .cat-dd-menu a, .st-drop .cat-dd-menu a, .ph-drop a.cat-dd-parent, .st-drop a.cat-dd-parent {
  display: flex !important; align-items: center; min-height: 44px; padding-right: 24px;
}
.ph-drop a.cat-dd-parent, .st-drop a.cat-dd-parent { padding-left: 24px; }
.ph-drop .cat-dd-menu a, .st-drop .cat-dd-menu a { padding-left: 44px !important; }

/* Desktop dropdown mode (per-family breakpoints). */
@media (min-width: 861px) {
  .cx-nav-links .cat-dd, .qs-nav-links .cat-dd, .cat-nav-links .cat-dd {
    flex-direction: row; align-items: center;
  }
  .cx-nav-links .cat-dd-menu, .qs-nav-links .cat-dd-menu, .cat-nav-links .cat-dd-menu {
    position: absolute; top: calc(100% + 14px); left: -14px; z-index: 1100;
    min-width: 214px; display: none; flex-direction: column; gap: 2px;
    background: var(--cat-paper, #FCFBF7); border: 1px solid var(--cat-card-border, #E5E0D3);
    border-radius: 12px; padding: 8px; box-shadow: 0 18px 40px -18px rgba(22, 39, 31, .30);
  }
  .cx-nav-links .cat-dd-menu::before, .qs-nav-links .cat-dd-menu::before, .cat-nav-links .cat-dd-menu::before {
    content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px; /* hover bridge */
  }
  .cx-nav-links .cat-dd:hover .cat-dd-menu, .cx-nav-links .cat-dd:focus-within .cat-dd-menu,
  .qs-nav-links .cat-dd:hover .cat-dd-menu, .qs-nav-links .cat-dd:focus-within .cat-dd-menu,
  .cat-nav-links .cat-dd:hover .cat-dd-menu, .cat-nav-links .cat-dd:focus-within .cat-dd-menu { display: flex; }
  .cx-nav-links .cat-dd-menu a, .qs-nav-links .cat-dd-menu a, .cat-nav-links .cat-dd-menu a {
    padding: 9px 12px !important; border-radius: 8px; border-bottom: none !important;
  }
  .cx-nav-links .cat-dd-menu a:hover, .qs-nav-links .cat-dd-menu a:hover, .cat-nav-links .cat-dd-menu a:hover {
    background: var(--cat-panel, #F6F2E9); text-decoration: none !important;
  }
}
@media (min-width: 769px) {
  .pr-links .cat-dd, nav.navbar:not(.cx-nav) .nav-links .cat-dd {
    flex-direction: row; align-items: center;
  }
  .pr-links .cat-dd-menu, nav.navbar:not(.cx-nav) .nav-links .cat-dd-menu {
    position: absolute; top: calc(100% + 14px); left: -14px; z-index: 1100;
    min-width: 214px; display: none; flex-direction: column; gap: 2px;
    background: var(--cat-paper, #FCFBF7); border: 1px solid var(--cat-card-border, #E5E0D3);
    border-radius: 12px; padding: 8px; box-shadow: 0 18px 40px -18px rgba(22, 39, 31, .30);
  }
  .pr-links .cat-dd-menu::before, nav.navbar:not(.cx-nav) .nav-links .cat-dd-menu::before {
    content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
  }
  .pr-links .cat-dd:hover .cat-dd-menu, .pr-links .cat-dd:focus-within .cat-dd-menu,
  nav.navbar:not(.cx-nav) .nav-links .cat-dd:hover .cat-dd-menu,
  nav.navbar:not(.cx-nav) .nav-links .cat-dd:focus-within .cat-dd-menu { display: flex; }
  .pr-links .cat-dd-menu a, nav.navbar:not(.cx-nav) .nav-links .cat-dd-menu a {
    padding: 9px 12px !important; border-radius: 8px; border-bottom: none !important;
  }
  .pr-links .cat-dd-menu a:hover, nav.navbar:not(.cx-nav) .nav-links .cat-dd-menu a:hover {
    background: var(--cat-panel, #F6F2E9); text-decoration: none !important;
  }
}
@media (min-width: 641px) {
  .ph-links .cat-dd, .st-links .cat-dd { flex-direction: row; align-items: center; }
  .ph-links .cat-dd-menu, .st-links .cat-dd-menu {
    position: absolute; top: calc(100% + 14px); left: -14px; z-index: 1100;
    min-width: 214px; display: none; flex-direction: column; gap: 2px;
    background: var(--cat-paper, #FCFBF7); border: 1px solid var(--cat-card-border, #E5E0D3);
    border-radius: 12px; padding: 8px; box-shadow: 0 18px 40px -18px rgba(22, 39, 31, .30);
  }
  .ph-links .cat-dd-menu::before, .st-links .cat-dd-menu::before {
    content: ""; position: absolute; top: -16px; left: 0; right: 0; height: 16px;
  }
  .ph-links .cat-dd:hover .cat-dd-menu, .ph-links .cat-dd:focus-within .cat-dd-menu,
  .st-links .cat-dd:hover .cat-dd-menu, .st-links .cat-dd:focus-within .cat-dd-menu { display: flex; }
  .ph-links .cat-dd-menu a, .st-links .cat-dd-menu a {
    padding: 9px 12px !important; border-radius: 8px; border-bottom: none !important;
  }
  .ph-links .cat-dd-menu a:hover, .st-links .cat-dd-menu a:hover {
    background: var(--cat-panel, #F6F2E9); text-decoration: none !important;
  }
  /* Desktop mode: the always-open drawer indent must not apply. */
  .ph-links .cat-dd .cat-dd-menu a, .st-links .cat-dd .cat-dd-menu a { padding-left: 12px !important; }
}
@media (min-width: 769px) {
  .pr-links .cat-dd .cat-dd-menu a, nav.navbar:not(.cx-nav) .nav-links .cat-dd .cat-dd-menu a { padding-left: 12px !important; }
}
@media (min-width: 861px) {
  .cx-nav-links .cat-dd .cat-dd-menu a, .qs-nav-links .cat-dd .cat-dd-menu a, .cat-nav-links .cat-dd .cat-dd-menu a { padding-left: 12px !important; }
}
/* WO-04 polish tranche (2026-07-17): consistent 2px focus rings suite-wide —
   green on paper, clay on dark grounds (green vanishes on ink/navy). */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cat-green, #1F4D3D); outline-offset: 3px; }
.cat-on-dark a:focus-visible, .cat-on-dark button:focus-visible, .cat-on-dark input:focus-visible,
.cx-outfall a:focus-visible, .cx-outfall button:focus-visible, .cx-outfall input:focus-visible,
.cx-standards a:focus-visible, .cx-stdslim a:focus-visible {
  outline-color: var(--cat-clay-rule, #C9A06A); }

/* Suite-context pills (Projects strip — mirrors the Pricing selector). */
.suite-strip { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.suite-pill-on {
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif); font-size: 13.5px; font-weight: 600;
  color: #fff; background: var(--cat-green, #1F4D3D); border-radius: 999px; padding: 7px 18px;
}
.suite-pill-off {
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif); font-size: 13.5px; font-weight: 600;
  color: #A39E90; background: var(--cat-sand, #F4EFE4); border: 1px solid var(--cat-card-border, #E5E0D3);
  border-radius: 999px; padding: 7px 18px;
}


/* ================================================================
   WO-260712 REV D · A1/A4 (2026-07-15) — confirmed identity adoption.
   Every brand-mark instance renders the supplied contour-Q cut
   (assets/brand/quinnsite-mark-q.png, extracted exact — do not edit).
   Heritage orange is retired from UI. Late block: wins page-local
   .cx-mark gradient styles at equal importance by source order.
   ================================================================ */
:root { --qs-ink-green:#0F211E; --qs-moss:#2A4640; --qs-navy:#091E31;
  --qs-navy-accent:#1D4A73; --qs-navy-mid:#4E7DA3; --qs-navy-soft:#7FA8C9;
  --qs-aubergine:#372B46; --qs-teal:#3A6162; --qs-stone:#D0CDC7;
  --qs-paper:#FCFBF7; --qs-ink:#16271F; }
/* WO-05 Item 4 (2026-07-17, owner): the header ships on the warm paper token
   suite-wide (closes the REV D white-backing open decision) with a firmer
   bottom hairline. Beats page-local nav rules by specificity. */
nav.cx-nav.navbar { background: #FFFFFF !important; backdrop-filter: none !important; } /* WO-260718 A2: white ground */
.cx-mark, .cat-mark {
  border: none !important; border-radius: 0 !important;
  background: url('assets/brand/quinnsite-mark-q.png') center / contain no-repeat !important;
}
.cat-on-dark .cat-mark, .scape-band .cat-mark, .standards-strip .cat-mark, footer.cat-ink .cat-mark,
.cx-standards .cat-mark, .cx-foot-mark .cx-mark.cx-mark, .footer .cx-mark.cx-mark,
.cx-standards .cx-mark.cx-mark {
  border: none !important; border-radius: 50% !important; background-color: #FCFBF7 !important;
  background-image: url('assets/brand/quinnsite-mark-q.png') !important;
  background-repeat: no-repeat !important; background-position: center !important;
  background-size: 72% auto !important;
}


/* ================================================================
   WO-260712 REV D · B2/G2 (2026-07-15) — Plate-01 primary nav.
   Suite links first with status dots; Knowledge / Plans / Sign in;
   the "Open Catchment" pill lives OUTSIDE the collapsible group so
   it stays visible beside the burger on mobile (375px acceptance).
   Supersedes the WO-02 dropdown pattern (retired by normalizeNav).
   ================================================================ */
/* status dots */
nav a.qs-nav-cat, nav a.qs-nav-of { display: inline-flex !important; align-items: center; }
/* WO-260718 A3: the supplied suite marks replace the colour circles —
   never recolour or redraw the cuts */
nav a.qs-nav-cat::before, nav a.qs-nav-of::before {
  content: ""; width: 18px; height: 18px; border-radius: 0; flex: 0 0 auto;
  display: inline-block; margin-right: 8px;
  background: center / contain no-repeat;
}
nav a.qs-nav-cat::before { background-image: url('assets/brand/catchment-mark.png'); }
nav a.qs-nav-of::before  { background-image: url('assets/brand/outfall-mark.png'); }
nav a.qs-nav-cat.active  { font-weight: 700 !important; color: var(--cat-ink, #16271F) !important; }
/* Outfall year tag (CSS content so link text stays "Outfall") */
/* WO-260718 A4: "2027" is a baseline micro-chip, not a superscript */
nav a.qs-nav-of::after {
  content: "2027"; font-family: var(--cat-sans, 'Libre Franklin', sans-serif);
  font-size: 9px; font-weight: 600; letter-spacing: .06em; color: var(--cat-muted, #6B6457);
  border: 1px solid var(--cat-input-border, #E0DBCF); border-radius: 999px; padding: 1.5px 6px;
  margin-left: 7px; line-height: 1.3;
}
/* links group hugs the right edge so the bar reads lockup … links · CTA */
nav .cx-nav-links, nav .qs-nav-links, nav .cat-nav-links, nav .nav-links,
nav .pr-links, nav .ph-links, nav .st-links { margin-left: auto; }
/* the pill CTA, now a direct child of the nav container */
nav .qs-nav-open {
  flex: 0 0 auto; margin-left: 18px; white-space: nowrap;
  font-size: 13.5px !important; font-weight: 600 !important; color: #fff !important;
  background: var(--cat-green, #1F4D3D) !important; border: none !important;
  padding: 10px 18px !important; border-radius: 999px !important; text-decoration: none !important;
}
nav .qs-nav-open:hover { background: var(--cat-green-hover, #163A2D) !important; }
@media (max-width: 520px) {
  nav .qs-nav-open { padding: 8px 12px !important; font-size: 12px !important; margin-left: 10px; }
  nav .cat-mark-lockup .cat-word b, nav .cx-lockup .cx-word b { font-size: 17px !important; }
}
/* inside the mobile burger panel, suite links first is DOM order; keep the
   divider hidden there and give links comfortable tap targets */
@media (max-width: 880px) {
  nav .nav-links .cat-nav-div, nav .cx-nav-links .cx-nav-sep { display: none; }
}

/* ============================================================
   SUITE SUB-TABS (2026-07-16, Michael's suite-homes directive) —
   the Catchment suite area row: Tools · Design Journey · Knowledge ·
   UK Standards. Rendered statically on Catchment.html (Tools active),
   SuDS_Design_Journey.html (Design Journey active) and
   SuDS_Knowledge_Gateway.html (Knowledge active) so the suite reads
   as one place. KB_Standards_Index is reachable as the fourth tab.
   ============================================================ */
.cat-subtabs-wrap { max-width: 1200px; margin: 22px auto 0; padding: 0 40px; }
.cat-subtabs-wrap.w960 { max-width: 960px; }
.cat-subtabs-wrap.flush { max-width: none; margin: 26px 0 0; padding: 0; }
.cat-subtabs {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--cat-hairline, #ECE7DC);
}
.cat-subtabs a {
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  color: var(--cat-body, #5d584e) !important; text-decoration: none !important;
  padding: 10px 14px !important; margin-bottom: -1px;
  border: none !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; background: none !important; display: inline-flex !important;
  align-items: center;
}
.cat-subtabs a:hover { color: var(--cat-ink, #16271F) !important; }
.cat-subtabs a.active {
  color: var(--cat-green, #1F4D3D) !important;
  border-bottom-color: var(--cat-green, #1F4D3D) !important;
}
@media (max-width: 768px) {
  .cat-subtabs-wrap { padding: 0 20px; }
  .cat-subtabs-wrap.flush { padding: 0; }
  .cat-subtabs a { padding: 9px 10px !important; font-size: 13px !important; }
}


/* ================================================================
   WO-05 Item 1 (2026-07-17, owner) — ONE CHIP/EYEBROW TYPE ROLE.
   The owner dislikes the wide-tracked teletype mono on UI labels
   ("IN DEVELOPMENT · 2027", "41 TOOLS", "6 LIVE IN BETA", "COMING
   2027", "MOST USED"…). Canonical role, suite-wide: house UI sans,
   11px, weight 600, uppercase, letter-spacing 0.07em; pill chips get
   consistent padding + full radius. Mono remains ONLY for data and
   figures (QBAR values, formulas, code-like refs, drawing chrome,
   PDF spec untouched). Late block + !important beats page-inline
   mono declarations (hub / Catchment / Outfall / Pricing / Projects).
   ================================================================ */
.cx-suitechip,
.cx-suitecard .status,
.cx-suitecard .chip,
.cx-eyebrow,
.cx-eyebrow .live,
.of-eyebrow,
.cx-mostused .lab,
.cx-recent .lab,
.cx-cat-start,
.cx-footer-col h4,
.cx-bsi,
.cx-std-go,
.of-fine,
.of-gate .right h3,
.ph-eyebrow,
.pr-eyebrow,
.pr-flag,
.pr-name .tag,
.pr-founder,
.pr-feats li.head,
.pr-trust,
.pr-roadmap-eyebrow,
.pr-road-chip,
.pr-betanote b,
.pr-manning .fr-role,
.pr-pay-label,
.suds-gate-chip,
.suds-gate-eyebrow,
.cx-outfall .status,
.qs-tool-eyebrow,
.scape-band-eyebrow,
.mc-tag,
.stat-label,
.cat-cat-tag {
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important;
  font-weight: 600 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}
/* the pill-form chips: one size, one padding, one radius */
.cx-suitechip,
.cx-suitecard .status,
.cx-suitecard .chip,
.cx-outfall .status,
.pr-road-chip,
.cx-cat-start {
  font-size: 11px !important; border-radius: 999px !important; padding: 6px 13px !important;
}
/* the flat eyebrow/label form: same face, no box */
.cx-eyebrow, .of-eyebrow, .cx-mostused .lab, .cx-recent .lab,
.cx-footer-col h4, .cx-bsi { font-size: 11px !important; }
/* KB page-injected labels join the role (600 / 0.07em; family already sans) */
.kb-toc-title, .kb-next-title { font-weight: 600 !important; letter-spacing: 0.07em !important; }
.cx-std-go { font-size: 10.5px !important; } /* WO-260718 B11: micro-type floor */

/* ================================================================
   WO-06 Item 1 (2026-07-17, owner) — FINAL BRAND LOCKUP.
   The owner supplied the finished artwork ("Quinnsite Logo NEW AND
   FINAL.png", 16 Jul 2026): a COMPLETE lockup — the contour-Q roundel
   IS the first letter, baseline-locked, tail sweeping under the "u",
   followed by "uinnsite" in the deep-green serif. The WO-05 rebuilt
   symbol+live-text lockup retires; every lockup now ships the single
   supplied image (assets/brand/quinnsite-logo-final.png — background
   keyed out, nothing redrawn; cut + optimised from the supplied file).
   Kerning is therefore the artist's own — the exact fix the owner
   asked for ("the Q ... needs to form part of the logo text").
   Dark-ground standalone marks keep their paper-disc treatment above
   (A5), now carrying the re-cut FINAL Q (same filename,
   quinnsite-mark-q.png). aria-labels untouched: "Quinnsite home".
   ================================================================ */
.cat-mark-lockup, .cx-lockup, a.auth-home { gap: 0 !important; align-items: center !important; }
.qs-lockup { height: 30px; width: auto; display: block; }
.qs-lockup.sm { height: 24px; }


/* ================================================================
   WO-260718 (2026-07-18) — pre-launch polish appendix.
   ================================================================ */
/* B7(ii): the methodology ref beside the category eyebrow is a mono chip,
   suite-wide (all 41 tool heads change together). Text untouched. */
.cat-method-chip {
  font-family: var(--cat-mono, 'IBM Plex Mono', ui-monospace, Menlo, monospace) !important;
  font-size: 10.5px !important; letter-spacing: 1.4px !important; text-transform: uppercase !important;
  color: var(--cat-muted, #6B6457) !important; border: 1px solid var(--cat-input-border, #E0DBCF) !important;
  background: #fff !important; border-radius: 5px !important; padding: 3px 8px !important;
  white-space: nowrap !important;
}
/* B2: keep tool-card title + AFTER BETA badge on one line (all six category pages) */
.cx-card-top { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.suds-gate-chip { white-space: nowrap; }
/* B4: footer link wrap — fixes "Back to / suite" splitting on Outfall + Projects */
.cx-footer-bottom a, .qs-foot-bottom a, .footer-inner a, .pr-footer-meta a { white-space: nowrap; }
/* B8 + A9: round clay point on the eight dotted serif h1s (page-token clay rule;
   the serif full stop renders square — this is the standing round-point rule).
   Never on tool titles, result values, or inside sentences. */
h1 .dot, .cx-h2 .dot {
  display: inline-block; overflow: hidden; width: .13em; height: .13em; border-radius: 50%;
  background: var(--cat-clay-rule, #C9A06A); color: transparent; margin-left: .06em;
}
/* A5: sign-in divider (account zone) — belt-and-braces beside the inline-at-creation
   styles set by normalizeNav() */
@media (min-width: 769px) {
  nav a.qs-nav-signin { border-left: 1px solid #E0DBCF !important; padding-left: 26px !important; }
}
/* B1 follow-through: the universal-normalisation CTA rules above set
   min-height:0 !important at higher specificity than the B1 block in
   suds-mobile-fixes.css (which loads before this file). Re-assert the 44px
   floor at winning specificity, mobile only. */
@media (max-width: 880px) {
  .cx-nav .cx-nav-cta.qs-nav-open, .qs-navbar .qs-nav-cta.qs-nav-open,
  .qs-navbar .cat-nav-cta.qs-nav-open, .pr-nav .pr-cta.qs-nav-open,
  .pr-nav .cat-nav-cta.qs-nav-open, nav.navbar .cx-nav-cta.qs-nav-open,
  nav.navbar .cat-nav-cta.qs-nav-open, .st-nav .cat-nav-cta.qs-nav-open,
  nav .qs-nav-open {
    min-height: 44px !important; display: inline-flex !important; align-items: center !important;
  }
}

/* =========================================================================
   WO-07a (2026-07-18) — UNIFIED STEPPER ("journey rail"): ONE dialect suite-wide.
   suds-nav.js normalizeStepper() tags the legacy markup (eight dialects — see
   its header) with .qs-stepper / .qs-step / .qs-step-tile / .qs-step-label and
   keeps .is-active/.is-done synced with each page's own .active/.completed
   toggles. THIS BLOCK IS THE SINGLE SOURCE OF STEPPER PRESENTATION: it replaces
   the removed 2026-06-19/20/28 + 2026-07-03/04 patch systems and neutralises
   per-page legacy stepper CSS via the established late-!important pattern.
   Selector class-counts are deliberately high (house precedent: the ×8
   .btn-secondary chain) because several tool pages ship :not()-chained reset
   mega-rules up to (0,6,1)+!important that would otherwise re-pad the step units
   (caught live on Lifecycle's .step-btn buttons).
   Spec: group horizontally CENTRED in its card; connected hairline rail THROUGH
   tile centres; 40px rounded-square tiles with serif numerals; active = deep
   Catchment green; completed = quiet green; labels in house sans below;
   ≤480px: 32px tiles, rail preserved, only the active label shown.
   ========================================================================= */
.qs-stepper.qs-stepper.qs-stepper.qs-stepper {
  display: flex !important; flex-wrap: nowrap !important;
  justify-content: center !important; align-items: flex-start !important;
  gap: 0 !important; width: 100% !important; max-width: 820px !important;
  margin: 10px auto 26px !important; padding: 0 !important;
  background: transparent !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  position: relative !important; overflow: visible !important;
  float: none !important; text-align: center !important; min-height: 0 !important;
}
/* kill legacy container-level rails (e.g. .wizard-steps::before edge-to-edge) */
.qs-stepper.qs-stepper.qs-stepper.qs-stepper::before, .qs-stepper.qs-stepper.qs-stepper.qs-stepper::after { content: none !important; display: none !important; }
/* 2026-07-19: each step is a 2-row GRID (was a flex column) so the rail can be
   drawn as a row-1 item vertically centred on the TILE ROW's own centreline —
   geometry, not a magic top offset. Row 1 = rails + tile (align-items centre),
   row 2 = label. A taller tile (e.g. a page rule catching the active state)
   re-centres its rails automatically, and labels can never push tiles off the
   rail line. */
.qs-stepper.qs-stepper.qs-stepper > .qs-step.qs-step.qs-step.qs-step.qs-step {
  flex: 1 1 0 !important; max-width: 176px !important; min-width: 0 !important;
  width: auto !important; height: auto !important;
  display: grid !important; grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important; grid-auto-flow: row !important;
  justify-items: center !important; align-items: center !important;
  justify-content: center !important;
  text-align: center !important; gap: 8px !important; position: relative !important;
  background: transparent !important; border: none !important;
  box-shadow: none !important; border-radius: 0 !important;
  margin: 0 !important; padding: 0 6px !important;
  opacity: 1 !important; text-transform: none !important; letter-spacing: 0 !important;
  transform: none !important; cursor: pointer;
  overflow: visible !important; min-height: 0 !important;
}
/* rail: two half-segments per step, each a STATIC grid item in row 1 with
   align-self:center — the segment's centre is the tile row's centre BY
   CONSTRUCTION (2026-07-19; replaces the fixed top:19px offset, which could
   miss a tile whose height escapes the 40px pin, e.g. the active state).
   Each segment spans from the step's outer edge (the -6px margin cancels the
   6px side padding) to 24px short of the row centre (20px tile half + 4px
   air): outer/2 - 24 = 50% of the content box - 18px. Adjacent halves meet at
   the flex boundary, so the line reads as ONE connected hairline through the
   tile centres, and can never paint across a tile. */
.qs-stepper.qs-stepper.qs-stepper > .qs-step.qs-step.qs-step.qs-step.qs-step::before, .qs-stepper.qs-stepper.qs-stepper > .qs-step.qs-step.qs-step.qs-step.qs-step::after { content: none !important; display: none !important; }
.qs-stepper.qs-stepper.qs-stepper > .qs-step.qs-step.qs-step.qs-step.qs-step:not(:first-child)::before {
  content: '' !important; display: block !important; position: static !important;
  grid-row: 1 !important; grid-column: 1 !important;
  align-self: center !important; justify-self: start !important;
  height: 2px !important; width: calc(50% + 6px) !important; /* 2026-07-19: reach tile centre — gap-free rail */
  margin: 0 0 0 -6px !important; padding: 0 !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  background: var(--cat-divider, #D8CFBE) !important;
  border: none !important; transform: none !important; z-index: 0 !important;
}
.qs-stepper.qs-stepper.qs-stepper > .qs-step.qs-step.qs-step.qs-step.qs-step:not(:last-child)::after {
  content: '' !important; display: block !important; position: static !important;
  grid-row: 1 !important; grid-column: 1 !important;
  align-self: center !important; justify-self: end !important;
  height: 2px !important; width: calc(50% + 6px) !important; /* 2026-07-19: reach tile centre — gap-free rail */
  margin: 0 -6px 0 0 !important; padding: 0 !important;
  top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
  background: var(--cat-divider, #D8CFBE) !important;
  border: none !important; transform: none !important; z-index: 0 !important;
}
/* progress tint: the walked portion of the rail reads quiet green */
.qs-stepper.qs-stepper.qs-stepper > .qs-step.qs-step.qs-step.qs-step.qs-step.is-done:not(:first-child)::before,
.qs-stepper.qs-stepper.qs-stepper > .qs-step.qs-step.qs-step.qs-step.qs-step.is-active:not(:first-child)::before,
.qs-stepper.qs-stepper.qs-stepper > .qs-step.qs-step.qs-step.qs-step.qs-step.is-done:not(:last-child)::after {
  background: var(--cat-success, #1F8A5B) !important;
}
.qs-stepper.qs-stepper.qs-stepper .qs-step-tile.qs-step-tile.qs-step-tile.qs-step-tile.qs-step-tile {
  box-sizing: border-box !important;
  grid-row: 1 !important; grid-column: 1 !important;
  align-self: center !important; justify-self: center !important;
  width: 40px !important; height: 40px !important; min-width: 40px !important;
  max-width: 40px !important; min-height: 40px !important; max-height: 40px !important;
  border-radius: 12px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--cat-card, #FFFFFF) !important;
  border: 1.5px solid var(--cat-card-border, #E5E0D3) !important;
  color: var(--cat-ink, #16271F) !important;
  font-family: var(--cat-serif, 'Source Serif 4', Georgia, serif) !important;
  font-size: 17px !important; font-weight: 600 !important; line-height: 1 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  position: relative !important; z-index: 1 !important;
  margin: 0 !important; padding: 0 !important; float: none !important;
  box-shadow: none !important; opacity: 1 !important; transform: none !important;
  transition: background .15s, border-color .15s, color .15s;
}
/* completed: quiet green — visited, not shouting */
.qs-stepper.qs-stepper .qs-step.is-done .qs-step-tile.qs-step-tile.qs-step-tile.qs-step-tile.qs-step-tile:not(.active) {
  background: var(--cat-ok-bg, #EAF2EC) !important;
  border-color: var(--cat-success, #1F8A5B) !important;
  color: var(--cat-success, #1F8A5B) !important;
}
/* active: deep Catchment green (works off the page's own .active OR our sync) */
.qs-stepper.qs-stepper .qs-step.is-active .qs-step-tile.qs-step-tile.qs-step-tile.qs-step-tile.qs-step-tile,
.qs-stepper.qs-stepper.qs-stepper .qs-step-tile.qs-step-tile.qs-step-tile.qs-step-tile.qs-step-tile.active {
  background: var(--cat-green, #1F4D3D) !important;
  border-color: var(--cat-green, #1F4D3D) !important;
  color: #FFFFFF !important; box-shadow: none !important; transform: none !important;
}
.qs-stepper.qs-stepper.qs-stepper .qs-step-label.qs-step-label.qs-step-label.qs-step-label.qs-step-label {
  grid-row: 2 !important; grid-column: 1 !important;
  align-self: start !important; justify-self: center !important;
  font-family: var(--cat-sans, 'Libre Franklin', -apple-system, sans-serif) !important;
  font-size: 12px !important; font-weight: 600 !important;
  letter-spacing: .01em !important; line-height: 1.35 !important;
  color: var(--cat-muted, #6B6457) !important;
  text-transform: none !important; text-align: center !important;
  max-width: 150px !important; margin: 0 !important; padding: 0 !important;
  background: transparent !important; border: none !important; opacity: 1 !important;
  white-space: normal !important; overflow: visible !important;
}
.qs-stepper.qs-stepper .qs-step.is-done .qs-step-label.qs-step-label.qs-step-label.qs-step-label.qs-step-label {
  color: var(--cat-ink, #16271F) !important; font-weight: 600 !important;
}
.qs-stepper.qs-stepper .qs-step.is-active .qs-step-label.qs-step-label.qs-step-label.qs-step-label.qs-step-label,
.qs-stepper.qs-stepper.qs-stepper .qs-step-label.qs-step-label.qs-step-label.qs-step-label.qs-step-label.active {
  color: var(--cat-green, #1F4D3D) !important; font-weight: 700 !important;
}
/* legacy connector/spacer elements consumed by the normaliser */
.qs-stepper .qs-step-ghost { display: none !important; }
/* ≤480px: compress — smaller tiles, rail follows, only the active label shows
   (carries forward the 2026-07-04 CX#6 decision inside the unified component) */
@media (max-width: 480px) {
  .qs-stepper.qs-stepper.qs-stepper .qs-step-tile.qs-step-tile.qs-step-tile.qs-step-tile.qs-step-tile {
    width: 32px !important; height: 32px !important; min-width: 32px !important;
    max-width: 32px !important; min-height: 32px !important; max-height: 32px !important;
    border-radius: 10px !important; font-size: 14px !important;
  }
  /* rails follow the 32px tiles: stop 20px short of the row centre (16px tile
     half + 4px air) — outer/2 - 20 = 50% of the content box - 14px; vertical
     centring is inherited from the row-1 align-self:center construction */
  .qs-stepper.qs-stepper.qs-stepper > .qs-step.qs-step.qs-step.qs-step.qs-step:not(:first-child)::before,
  .qs-stepper.qs-stepper.qs-stepper > .qs-step.qs-step.qs-step.qs-step.qs-step:not(:last-child)::after { width: calc(50% + 6px) !important; /* 2026-07-19: reach tile centre (32px tiles) — gap-free */ }
  .qs-stepper.qs-stepper.qs-stepper .qs-step-label.qs-step-label.qs-step-label.qs-step-label.qs-step-label { display: none !important; }
  .qs-stepper.qs-stepper .qs-step.is-active .qs-step-label.qs-step-label.qs-step-label.qs-step-label.qs-step-label,
  .qs-stepper.qs-stepper.qs-stepper .qs-step-label.qs-step-label.qs-step-label.qs-step-label.qs-step-label.active { display: block !important; }
}

/* WO-07a P1 (F-4): visible Calculate control for one-page mode (Swale/RWH — see
   suds-nav.js initOnePageCalc). Hidden in Steps mode and in print/PDF. */
.suds-onepage-calc { display: none; }
body.suds-onepage .suds-onepage-calc {
  display: inline-flex; align-items: center; justify-content: center;
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 900; /* under Manning FAB/panel */
  background: var(--cat-green, #1F4D3D); color: #fff;
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif);
  font-size: 14px; font-weight: 700; letter-spacing: .01em;
  border: none; border-radius: 999px; padding: 12px 26px; min-height: 44px;
  box-shadow: 0 10px 24px -10px rgba(22, 39, 31, .45); cursor: pointer;
  text-transform: none;
}
body.suds-onepage .suds-onepage-calc:hover { background: var(--cat-green-hover, #163A2D); }
@media print { .suds-onepage-calc { display: none !important; } }

/* =========================================================================
   WO-07 (2026-07-18) — results-region standard components.
   .cat-reset-row: house placement for the previously floating "Reset
   Calculator" buttons (they rendered orphaned between </script> and the
   footer on 10 pages, or nested inside a result tile's TITLE on Detention/
   Permeable/BRE365/Climate/Soakaway). Right-aligned, page-width row.
   .cat-export-fields: PDF filename + engineer's notes fields extracted from
   INSIDE flex button rows (they rendered as squashed flex children).
   ========================================================================= */
.cat-reset-row {
  max-width: 1140px; margin: 0 auto 18px; padding: 0 16px;
  display: flex; justify-content: flex-end;
}
.cat-export-fields { margin: 6px 0 14px; }
.cat-export-fields .form-group { margin-bottom: 12px !important; }
.cat-export-fields input[type=text] { max-width: 420px; }
/* guard: a form-group must never render as a flex child of a button row */
.button-group .form-group, .nav-buttons .form-group, .btn-group .form-group {
  flex: 1 1 100% !important; width: 100% !important;
}

/* WO-07 (2026-07-18) owner defect (b) — pill/chip breathing room. The owner's
   screenshot caught pill text touching its border (Pricing founder row). Floor
   every small pill/badge at 6px 14px horizontal air. The nav "2027" micro-chip
   (nav a.qs-nav-of::after) is deliberately excluded — it is a superscript-scale
   marker, not a text pill (judgment call, logged in the WO-07 cycle file). */
.pr-founder.pr-founder, .pr-flag.pr-flag, .pr-road-chip.pr-road-chip,
.suds-gate-chip.suds-gate-chip, .tc-section-num.tc-section-num,
.st-team.st-team, .badge.badge,
.cx-suitecard .status.status, .cx-suitecard .chip.chip,
.cx-outfall .status.status, .cx-suitechip.cx-suitechip, .cx-cat-start.cx-cat-start,
.lpn-toc-list a {
  padding: 6px 14px !important;
}
.pr-founder-note.pr-founder-note { padding: 2px 4px; line-height: 1.5; }

/* WO-07 — validation error state (Soakaway HH:MM:SS guard et al.) */
input.input-error, textarea.input-error {
  border-color: var(--cat-danger, #B4372F) !important;
  box-shadow: 0 0 0 3px rgba(180, 55, 47, .12) !important;
}

/* WO-07 (2026-07-18) — result tile ANATOMY: several tool pages ship a greedy
   per-page card rule ([class*="card"]:not([class*="nav"])…) that borders every
   element whose class merely CONTAINS "card" — including .result-card-title /
   -value / -unit / -label — so each tile rendered as three nested boxes
   (caught on the Detention step-5 render). One tile = ONE box: internals flat. */
.result-card .result-card-title.result-card-title, .result-card .result-card-value.result-card-value,
.result-card .result-card-unit.result-card-unit, .result-card .result-card-label.result-card-label,
.result-card-title.result-card-title, .result-card-value.result-card-value,
.result-card-unit.result-card-unit, .result-card-label.result-card-label {
  border: none !important; background: transparent !important;
  box-shadow: none !important; border-radius: 0 !important; padding: 0 !important;
}

/* WO-07 (2026-07-18) owner defect (c) — edu module SINGLE-BORDER system.
   Per-page greedy rules ([class*="panel"] card treatment; generic button
   boxing) were re-bordering .suds-edu-panel and .suds-edu-tab INSIDE the
   already-bordered .suds-edu-accordion — the doubled lower rule the owner
   caught on BRE Soakaway's "Why this calculation". The accordion owns the
   only outer border; tabs bar owns the only divider; internals stay flat. */
.suds-edu-accordion .suds-edu-panel.suds-edu-panel {
  border: none !important; box-shadow: none !important; border-radius: 0 !important;
  background: transparent !important; margin: 0 !important;
}
.suds-edu-accordion .suds-edu-tabs.suds-edu-tabs {
  border: none !important; border-bottom: 1px solid var(--suds-slate-200, #E5E0D3) !important;
  border-radius: 0 !important; background: transparent !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important;
}
.suds-edu-accordion .suds-edu-tab.suds-edu-tab {
  border: none !important; border-bottom: 2px solid transparent !important;
  border-radius: 0 !important; background: none !important; box-shadow: none !important;
  transform: none !important; text-transform: none !important; letter-spacing: 0 !important;
}
.suds-edu-accordion .suds-edu-tab.suds-edu-tab:hover { background: var(--suds-slate-50, #F6F2E9) !important; }
.suds-edu-accordion .suds-edu-tab.suds-edu-tab.active {
  border-bottom-color: var(--suds-copper-700, #8A5E33) !important;
  background: var(--suds-surface, #FFFFFF) !important;
}

/* WO-08 (2026-07-19) F-8 — session-restore prompt re-seated as a bottom toast.
   Per-page CSS pins .session-restore-banner fixed at top:0 (z 10000), where it
   collides with the beta bar (z 1200) and the fixed nav. The shared layer owns
   placement: bottom-centre house card, no top-edge competition. Double-class
   selector out-specifies the per-page single-class !important rules. */
.session-restore-banner.session-restore-banner {
  top: auto !important; bottom: 22px !important;
  left: 50% !important; right: auto !important;
  width: max-content !important; max-width: min(92vw, 620px) !important;
  transform: translateX(-50%) !important;
  animation: none !important;
  border: 1px solid var(--cat-card-border, #E5E0D3) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  color: var(--cat-ink, #16271F) !important;
  box-shadow: 0 10px 30px rgba(22, 39, 31, 0.14) !important;
  padding: 12px 18px !important;
  z-index: 1190 !important; /* under the beta bar and any modal backdrop */
}
.session-restore-banner.session-restore-banner.hiding {
  animation: none !important; opacity: 0 !important; transition: opacity 0.25s ease !important;
}
.session-restore-banner.session-restore-banner .btn-restore {
  background: var(--cat-green, #1F4D3D) !important; color: #FFFFFF !important;
}
.session-restore-banner.session-restore-banner .btn-dismiss {
  background: transparent !important; color: var(--cat-green, #1F4D3D) !important;
  border: 1px solid var(--cat-card-border, #E5E0D3) !important;
}

/* WO-08 (2026-07-19) F-12 — BRE Soakaway crate UI.
   (a) Custom void-ratio rows: labelled inline row, number field sits with its
   label instead of floating detached (page-wide width:100% input rule beaten
   here). (b) Calculation-summary rows: label and value in a two-column flex
   row so a long label can wrap WITHOUT the right-aligned value interleaving
   mid-label ("…base 5.600 m² excluded per BRE 365):"). */
.qs-void-custom {
  display: flex !important; align-items: center !important;
  gap: 10px !important; flex-wrap: wrap !important;
}
.qs-void-custom label {
  margin: 0 !important; display: inline-flex !important;
  align-items: center !important; gap: 4px !important;
}
.qs-void-custom input[type="number"] {
  width: 110px !important; min-width: 0 !important; flex: 0 0 auto !important;
}
.calculation-summary-item {
  display: flex !important; justify-content: space-between !important;
  align-items: baseline !important; gap: 16px !important;
}
.calculation-summary-item .calculation-summary-label { flex: 1 1 auto !important; }
.calculation-summary-item .calculation-summary-value {
  flex: 0 0 auto !important; white-space: nowrap !important; text-align: right !important;
}

/* =========================================================================
   WO-08 (2026-07-19) F-2 — FORM-SYSTEM ELEVATION (suite-wide, house fields).
   Root cause of the "Inter" fields: 33 tool pages define a late per-page
   :root { --qs-font:'Inter',... } that out-cascades the earlier repoint.
   suds-catchment.css is linked AFTER every page <style>, so this :root wins.
   Field anatomy: white ground, hairline token border, house radius, green
   focus ring. html-body prefix + matched :not() chain out-specifies the
   per-page 7-attribute input rules. Presentation only. ==================== */
:root { --qs-font: var(--cat-sans, 'Libre Franklin', sans-serif); }

html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not(.sg-root *),
html body select:not(.sg-root *),
html body textarea:not(.sg-root *) {
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important;
  color: var(--cat-ink, #16271F) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--cat-card-border, #E5E0D3) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
html body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="color"]):not(.sg-root *):focus,
html body select:not(.sg-root *):focus,
html body textarea:not(.sg-root *):focus {
  border-color: var(--cat-green, #1F4D3D) !important;
  box-shadow: 0 0 0 3px rgba(31, 77, 61, 0.13) !important;
  outline: none !important;
}
html body input::placeholder, html body textarea::placeholder {
  color: var(--cat-label, #8a8475) !important; font-weight: 400 !important;
}
/* Labels: house sans, warm body ink (beats per-page pale-slate label rules) */
html body label:not(.sg-root *) {
  font-family: var(--cat-sans, 'Libre Franklin', sans-serif) !important;
  color: var(--cat-body, #5d584e) !important;
}
/* Checkbox / radio accent onto house green */
html body input[type="checkbox"], html body input[type="radio"] {
  accent-color: var(--cat-green, #1F4D3D) !important;
}
/* Legacy beige "Project Information" sub-panels (inline-styled slate-50
   divs on 28 tool pages) -> house panel tone + token hairline. */
html body div[style*="--suds-slate-50"][style*="border-radius"] {
  background: var(--cat-panel, #F6F2E9) !important;
  border: 1px solid var(--cat-card-border, #E5E0D3) !important;
}

/* =========================================================================
   WO-08 (2026-07-19) F-6 — KB ARTICLE INTERIOR ELEVATION (18 pages, scoped
   by body.kb-article). Measure discipline, serif hierarchy, house cards,
   styled sub-headings and bullets. KB search/TOC untouched. ================ */
body.kb-article main .container { max-width: 1020px !important; }
body.kb-article main [class*="card"] {
  background: #FFFFFF !important;
  border: 1px solid var(--cat-card-border, #E5E0D3) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(22, 39, 31, 0.03) !important;
  padding: 30px 34px !important;
}
body.kb-article main h2, body.kb-article main h3 {
  font-family: var(--cat-serif, 'Source Serif 4', serif) !important;
  color: var(--cat-ink, #16271F) !important;
  letter-spacing: -0.2px !important;
}
body.kb-article main [class*="card"] p,
body.kb-article main [class*="card"] li {
  max-width: 72ch;
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--cat-body, #5d584e) !important;
}
body.kb-article main [class*="card"] p { margin-bottom: 0.9em !important; }
/* Bold-black inline pseudo-headings ("Compliance Thresholds:") become true
   sub-heads when they are the sole child of their paragraph. */
body.kb-article main [class*="card"] p > strong:only-child {
  display: block;
  font-family: var(--cat-serif, 'Source Serif 4', serif);
  font-size: 1.02rem;
  color: var(--cat-ink, #16271F);
  margin-top: 1.15em;
}
body.kb-article main [class*="card"] strong { color: var(--cat-ink, #16271F); }
body.kb-article main [class*="card"] ul,
body.kb-article main [class*="card"] ol {
  padding-left: 1.3em !important; margin: 0.5em 0 1em !important;
}
body.kb-article main [class*="card"] li { margin-bottom: 0.45em !important; }
body.kb-article main [class*="card"] li::marker { color: var(--cat-clay, #8A5E33); }
body.kb-article main [class*="card"] a { color: var(--cat-green, #1F4D3D); }
@media (max-width: 700px) {
  body.kb-article main [class*="card"] { padding: 20px 18px !important; }
}

/* =========================================================================
   WO-08 (2026-07-19) VISUAL PASS — callout & result-tile house systems.
   1) Callouts: the legacy per-page .alert families still carried saturated
      cyan/blue fills and 3-4px accent stripes (accents also swept at source).
      House: quiet panel grounds, token hairlines, semantic tints only.
   2) Result tiles: peach/beige legacy tile fills (Constructed Wetlands,
      S1-S7 et al.) unify on white + hairline like the Detention standard. */
html body .alert, html body [class*="alert-"] {
  border: 1px solid var(--cat-card-border, #E5E0D3) !important;
  border-left-width: 1px !important;
  border-radius: 12px !important;
  background: var(--cat-panel, #F6F2E9) !important;
  color: var(--cat-body, #5d584e) !important;
}
html body .alert-success, html body .alert.success {
  background: #EAF0EC !important; border-color: #C7D8CC !important;
  color: var(--cat-green, #1F4D3D) !important;
}
html body .alert-warning, html body .alert.warning {
  background: var(--cat-warn-bg, #FBEFE6) !important;
  border-color: var(--cat-warn-border, #E8C9AD) !important;
  color: var(--cat-warn-text, #92400E) !important;
}
html body .alert-error, html body .alert-danger, html body .alert.error {
  background: #FBEDEA !important; border-color: #E7C2BA !important; color: #8C2F23 !important;
}
html body .result-card {
  background: #FFFFFF !important;
  border: 1px solid var(--cat-card-border, #E5E0D3) !important;
}

/* WO-08 (2026-07-19) VISUAL PASS — mobile guards found by the 375px sweep. */
@media (max-width: 640px) {
  /* Action rows on final steps pushed the page to 433px (Filter Drain,
     Constructed Wetlands) — rows wrap instead of overflowing. */
  html body .nav-buttons-group, html body .nav-buttons,
  html body .button-group, html body .btn-group, html body .action-buttons {
    flex-wrap: wrap !important; max-width: 100% !important;
  }
  /* Wide data tables scroll inside their card instead of pushing the page
     (KB Codes Reference reference table, Wetlands stage table). */
  html body main table, html body .container table,
  html body .card table, html body .step-content table {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%;
  }
  /* Gateway footer copy ran to 382px on the cx template. */
  html body .cx-footer-copy { white-space: normal !important; overflow-wrap: anywhere; }
}

/* 2026-07-19 owner: stepper centred in DEPTH within its card (was 35/51 imbalance).
   Root cause: the WO-07a base rule's vertical margins (10px/26px, (0,4,0) chain +
   !important) beat the first-draft zeroing rule below at (0,2,0), so the flex card
   centred the stepper's MARGIN box and preserved the 16px sag. The zeroing now
   matches the base chain's specificity, and normalizeStepper() (suds-nav.js)
   guarantees every tool's stepper sits in a .card.cat-stepper-card (tags the
   authored wrapper card, wraps the eight card-less dialect pages). */
.cat-stepper-card{display:flex !important;flex-direction:column;align-items:center;justify-content:center}
.cat-stepper-card .qs-stepper.qs-stepper.qs-stepper.qs-stepper{margin-top:0 !important;margin-bottom:0 !important}
.cat-stepper-card .qs-stepper .qs-step-label,.cat-stepper-card .qs-stepper li:last-child,.qs-stepper > *:last-child{margin-bottom:0 !important}

/* ============================================================
   WO-audit 2026-08 (owner-approved X1b): tool-header category
   wayfinding. The eyebrow (.cat-cat-tag) + its icon take the
   stage's colour, keyed off the breadcrumb category link via
   :has(). Deep, contrast-safe variants (all darker than the
   prior clay #8A5E33, so AA / contrast-probe stays green).
   Echoes the six category colours now on the hub stage cards.
   ============================================================ */
body:has(.cat-crumb a[href="Site_Appraisal.html"])       .cat-cat-tag { color:#92400E; } /* appraisal — deep copper */
body:has(.cat-crumb a[href="SuDS_Component_Design.html"]) .cat-cat-tag { color:#166534; } /* component — deep green */
body:has(.cat-crumb a[href="Storage_Treatment.html"])     .cat-cat-tag { color:#334155; } /* storage — slate */
body:has(.cat-crumb a[href="Network_Hydraulics.html"])    .cat-cat-tag { color:#155E75; } /* hydraulics — deep teal */
body:has(.cat-crumb a[href="Compliance_Reporting.html"])  .cat-cat-tag { color:#7C2D12; } /* compliance — deepest copper */
body:has(.cat-crumb a[href="Sustainability_Delivery.html"]) .cat-cat-tag { color:#3F6212; } /* delivery — deep olive */