/* Vyzko application styles. Brand tokens come from vyzko-theme.css (loaded first).
   No raw palette hex in templates - everything references a token here.
   RULE: brand green (--color-primary) is chrome only; the reserved --status-* colours are
   used ONLY inside report status pills/borders, never as brand chrome (and vice versa). */

:root {
  /* derived, accessibility-checked component tokens (>=4.5:1 for text) */
  --color-primary-hover: var(--vy-green-hover);
  --color-link:        #8F4E2F;   /* terracotta, darkened to >=4.5:1 as link text */
  --on-primary-muted:  #D8E0DA;   /* muted text on green panels */
  --surface-soft:      #FAFBF9;   /* faint inner surface (e.g. 'what this means') */
  --brand-soft-bg:     #E7EDE9;   /* pale green tint for brand chips/tags */
  --shadow-card:       0 10px 30px rgba(38,35,32,.06);
  --shadow-pop:        0 8px 24px rgba(38,35,32,.10);

  /* meta notices (staging + legal draft) - not product chrome */
  --banner-bg:#FBF3E2; --banner-bd:#E4C77A; --banner-fg:#6B4E12;
  /* info note box (preview precision banner, postcode-area pill) */
  --info-bg:#EEF3FE; --info-bd:#C9D8F6; --info-fg:#27406E;
  /* form error (terracotta family; the brand has no red) */
  --err-bg:#FBEEE7; --err-bd:#E3C3B2; --err-fg:#8F4E2F;

  /* RESERVED status pill/tile tints (status family; never brand green).
     D7: clear -> teal-sage (M1), worth-knowing -> ironstone (M2a); borders are derived in-family
     tints of the media-spec bg/fg pairs (the spec gives bg+fg+base; the 1px border follows). */
  --pill-clear-bg:#E7F3EF; --pill-clear-fg:#1B6B5B; --pill-clear-bd:#C4DED6; /* teal-sage; #1B6B5B on bg = 5.59:1 AA */
  --pill-check-bg:#FBF0D6; --pill-check-fg:#79520C; --pill-check-bd:#E8CE92; /* approved gold; #79520C on #FBF0D6 = AA */
  --pill-info-bg:#F0EAE1;  --pill-info-fg:#4A3F36;  --pill-info-bd:#DED2C4;  /* ironstone; #4A3F36 on bg = 8.54:1 AA */
  --pill-na-bg:#F1F3F6;    --pill-na-fg:#5B6677;    --pill-na-bd:#DDE2EA;
  --tile-more-bg:#F4F6FB;  --tile-more-bd:#DCE3EF;  --tile-more-fg:#39518C;
  /* D7 M2b: "Ask solicitor" ACTION tile (NOT a status pill) - terracotta brand spark to lift the
     highest-value action. The four status pills stay terracotta-free. */
  --solicitor:#B4663F; --solicitor-bg:#FAEDE3; --solicitor-tx:#7A4228; /* #7A4228 on bg = 6.93:1 AA */
  /* Report elevation (Vyzko_Report_FULL_Spec): all AA-audited in the spec. */
  --source-strip-bg:#F4F1EC;                                   /* provenance strip surface */
  /* Orientation/Vaastu scope chip (Vyzko_Report_FULL_Spec section 7b): #5B564E on #EDEAE4 = 6.06:1 AA
     (recomputed, sRGB relative luminance). Distinct from the generic .scope chip (muted on surface). */
  --scope-vaastu-bg:#EDEAE4; --scope-vaastu-fg:#5B564E;
  --cluster-bg:#F7F5F1; --cluster-label:#4A3F36; --cluster-rule:#D9D5CE;  /* section headers / recessed cards */
  --shadow-card:0 1px 2px rgba(38,35,32,.06),0 4px 12px rgba(38,35,32,.04); /* prominent cards only */
}

*{box-sizing:border-box}
body{margin:0;font:16px/1.55 var(--font-body);color:var(--color-text);background:var(--color-bg)}
h1,h2,h3{font-family:var(--font-head);font-weight:500}

.watermark{background:var(--banner-bg);border-bottom:2px solid var(--banner-bd);color:var(--banner-fg);
  text-align:center;padding:8px 16px;font-weight:600;font-size:13px}
/* Flex column so the footer settles at the bottom on short pages (checkout/contact) - no empty band. */
.page{max-width:760px;margin:0 auto;padding:24px 20px 28px;min-height:calc(100vh - 40px);
  display:flex;flex-direction:column}
.page main{flex:1 0 auto}
.brand{display:inline-flex;align-items:center}
.brand img{height:28px;width:auto;display:block}

/* Header nav: low visual weight, logo=home + a few inner links + one quiet CTA pill on the right.
   Inherits the green palette via links. */
.app-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;
  margin:6px 0 10px;padding-bottom:var(--sp-12);border-bottom:var(--hairline)}
.app-nav-links{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.app-nav-links a{font-size:14px;font-weight:600;color:var(--color-text-muted);text-decoration:none}
.app-nav-links a:hover{color:var(--color-link)}
/* The one nav action: a small green pill (not a heavy button). Bone on green = 8.18:1 (AA). Specific
   enough to override the muted .app-nav-links a colour. */
.app-nav-links a.nav-cta{background:var(--vy-green);color:var(--vy-bone);padding:6px 14px;
  border-radius:var(--radius-sm);white-space:nowrap}
.app-nav-links a.nav-cta:hover{background:var(--vy-green-hover);color:var(--vy-bone)}
/* Mobile: keep the wordmark + the one CTA; the secondary text links recede (still reachable in the
   footer). Mirrors the landing nav's mobile behaviour so the shell stays calm on a phone. */
@media (max-width:640px){.app-nav-links a:not(.nav-cta){display:none}}
h1{font-size:26px;margin:20px 0 6px}
.sub{color:var(--color-text-muted);font-size:15.5px;margin-bottom:18px}
.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:16px;margin:12px 0}

a{color:var(--color-link)}
.banner{background:var(--info-bg);border:1px solid var(--info-bd);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--info-fg);margin:14px 0}
.err{background:var(--err-bg);border:1px solid var(--err-bd);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--err-fg);margin:14px 0}
.draft-banner{background:var(--banner-bg);border:1px solid var(--banner-bd);color:var(--banner-fg)}

input[type=text]{width:100%;padding:12px;border:1px solid var(--color-border);border-radius:9px;font-size:16px;font-family:var(--font-body);color:var(--color-text)}

/* buttons: primary = heritage green + bone text; secondary = outline green */
.btn{display:inline-block;background:var(--color-primary);color:var(--color-on-primary);font-weight:800;
  border:none;border-radius:10px;padding:13px 26px;font-size:16px;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--color-primary-hover)}
.btn-blue{background:var(--color-surface);color:var(--color-primary);border:1px solid var(--color-primary)}
.radio{display:block;padding:10px 12px;border:1px solid var(--color-border);border-radius:9px;margin:8px 0;cursor:pointer}
/* Enlarge the visible radio/checkbox control so it is comfortable to see and tap on mobile (M4). The
   label row is already the full tap target; this only grows the painted box. */
.radio input[type=radio],.radio input[type=checkbox]{width:20px;height:20px;margin-right:8px;vertical-align:-4px;accent-color:var(--color-primary)}
/* Structured credibility footer (shell). Row 1: hairline-framed micro-badges; row 2: legal links;
   row 3: registered office + the OGL attribution. Generous whitespace on the shared scale. */
.foot{margin-top:var(--sp-32);border-top:var(--hairline);padding-top:var(--sp-16);
  font-size:12px;color:var(--color-text-muted)}
.foot a{color:var(--color-link)}
.foot-badges{display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-24);margin-bottom:var(--sp-12);
  font-size:11px;font-weight:600;color:var(--color-text-muted);letter-spacing:.2px}
.foot-badges span{display:inline-flex;align-items:center;border:var(--hairline);border-radius:4px;padding:3px 8px}
.foot-links{font-size:12px;color:var(--color-text-muted);margin-bottom:var(--sp-8);line-height:1.7}
.foot-links a{color:var(--color-link)}
/* foot-legal: --color-text-muted (#6B675F on bone = 5.00:1, AA), NOT the designspec's --vy-stone
   (#8A857C = 3.26:1, which FAILS AA for this 11px body text). Recomputed sRGB luminance. */
.foot-legal{font-size:11px;color:var(--color-text-muted);line-height:1.7}
/* On a phone the four badges stack rather than wrap awkwardly. */
@media (max-width:560px){.foot-badges{flex-direction:column;gap:6px}}

/* Payment-trust cues + "what you get" value block (checkout). Quiet, factual, green-palette links. */
.trust-cues{font-size:13px;color:var(--color-text-muted);margin:2px 0 12px}
.trust-cues a{color:var(--color-link)}
.value-note{background:var(--surface-soft);border:1px solid var(--color-border);border-radius:10px;
  padding:12px 14px;margin:0 0 16px;font-size:14px}
.value-note p{margin:0 0 8px}
.value-note p:last-child{margin-bottom:0}
.value-note .value-why{color:var(--color-text-muted)}
.value-note a{color:var(--color-link)}
/* Honest-UX 'payments paused' notice (Stripe-incident SECTION A): the neutral value-note box tinted
   with the ironstone INFO palette (never the red error palette) so it reads as information, not an
   alarm. --pill-info-fg #4A3F36 on --pill-info-bg #F0EAE1 = 8.54:1 AA per the theme tokens.
   Both selectors are qualified with .value-note (the box's own class, always present in the partial)
   so their specificity (0,2,1) wins over the surrounding-panel rules that would otherwise recolour the
   inner text on a coloured panel: e.g. the preview upsell's .paywall p{color:var(--on-primary-muted)}
   (0,1,1) - equal-specificity but later in source - was painting the notice's <p> the pale
   on-green muted colour #D8E0DA, near-invisible on the light info box. Qualifying keeps the notice
   legible on EVERY surface (landing .unlock, preview .paywall, sample .sample-cta, checkout,
   checkout_paused) without a blanket !important. */
.value-note.pay-paused{background:var(--pill-info-bg);border-color:var(--pill-info-bd)}
.value-note.pay-paused p{color:var(--pill-info-fg);margin:0}

/* Sample report page framing (the /sample proof). */
.sample-intro{font-size:15px}
.sample-intro p{margin:0}
.sample-banner{background:var(--info-bg);border:1px solid var(--info-bd);border-radius:10px;
  padding:10px 14px;font-size:13.5px;color:var(--info-fg);margin:12px 0 18px}
.sample-cta{text-align:center}
.sample-cta-sub{font-size:13px;color:var(--color-text-muted);margin:8px 0 0}

/* report header */
.rep-head{margin:8px 0 4px}
.kicker{font-size:12px;font-weight:800;letter-spacing:1.5px;color:var(--color-link);text-transform:uppercase}
.rep-head h1{font-size:24px;margin:6px 0 2px;line-height:1.2}
.rep-sub{color:var(--color-text-muted);font-size:14px;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-top:6px}
.pill{display:inline-block;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700;white-space:nowrap}
.pill-area{background:var(--info-bg);color:var(--info-fg);border:1px solid var(--info-bd)}

/* at-a-glance tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0 6px}
.tiles.four{grid-template-columns:repeat(4,1fr)}
.tile{border-radius:14px;padding:14px;border:1px solid var(--color-border);background:var(--color-surface)}
.tile .n{font-size:28px;font-weight:800;line-height:1}.tile .lab{font-size:12.5px;font-weight:600;margin-top:4px}
.tile.clear{background:var(--pill-clear-bg);border-color:var(--pill-clear-bd)}.tile.clear .n{color:var(--pill-clear-fg)}
.tile.check{background:var(--pill-check-bg);border-color:var(--pill-check-bd)}.tile.check .n{color:var(--pill-check-fg)}
.tile.info{background:var(--pill-info-bg);border-color:var(--pill-info-bd)}.tile.info .n{color:var(--pill-info-fg)}
/* A1: the 'couldn't check' tile closes the severity system (achromatic status-na tokens, never green). */
.tile.unavailable{background:var(--pill-na-bg);border-color:var(--pill-na-bd)}.tile.unavailable .n{color:var(--pill-na-fg)}
/* R-15 Phase 2b inc1: the four EVIDENCE-CLASS count tiles reuse the existing pill tokens (followup=amber
   emphasis, context=neutral, noissue=calm green, unavail=achromatic). No new palette. */
.tile.followup{background:var(--pill-check-bg);border-color:var(--pill-check-bd)}.tile.followup .n{color:var(--pill-check-fg)}
.tile.context{background:var(--pill-info-bg);border-color:var(--pill-info-bd)}.tile.context .n{color:var(--pill-info-fg)}
.tile.noissue{background:var(--pill-clear-bg);border-color:var(--pill-clear-bd)}.tile.noissue .n{color:var(--pill-clear-fg)}
.tile.unavail{background:var(--pill-na-bg);border-color:var(--pill-na-bd)}.tile.unavail .n{color:var(--pill-na-fg)}
/* A1: the reconciliation line the buyer can trace (clear + check + info + couldn't-check = total). */
.tiles-reconcile{font-size:12.5px;color:var(--color-text-muted);margin:0 0 6px}
.tile.more{background:var(--tile-more-bg);border-color:var(--tile-more-bd)}
.tile.more .n{color:var(--tile-more-fg)}
.tile.ask{background:var(--solicitor-bg);border-color:var(--solicitor)}
.tile.ask .n{color:var(--solicitor-tx)}
/* 3c: the "Questions to raise" count is SEPARATED from the 3 severity tiles - its own full-width block
   with a coloured top divider + muted sub-caption, so it never reads as part of the flag total. */
.ask-tile{display:flex;align-items:center;gap:14px;margin:2px 0 6px;padding:12px 14px;border-radius:14px;
  border:1px solid var(--solicitor);border-top:3px solid var(--solicitor);background:var(--solicitor-bg)}
.ask-tile .n{font-size:26px;font-weight:800;line-height:1;color:var(--solicitor-tx)}
.ask-tile .lab{font-size:13.5px;font-weight:700}
.ask-tile .ask-sub{font-size:12px;font-weight:500;color:var(--color-text-muted);margin-top:2px}
.weighted{font-size:13.5px;color:var(--color-text-muted);margin:14px 0 2px}
.weighted b{color:var(--color-text)}

/* ---- §1 dashboard front page (Vyzko_Report_FULL_Spec §1). Counts only, never a grade/score. ---- */
/* 1a header meta lines. n900 #262320 on bone = 13.88:1; muted #6B675F on bone = 5.00:1 (both AA). */
.dash-head .dash-pc b{font-family:var(--font-mono);font-weight:400;font-size:16px;color:var(--color-text)}
.dash-meta{font-size:14px;color:var(--color-text-muted);margin:2px 0 0}
/* 1c "Worth a closer look" plain-text summary: NO pills, NO colour, NO icons (facts-not-verdicts). */
.dash-closer{margin:22px 0}
.dash-closer h2{font-size:18px;margin:0 0 6px}
.dash-closer p{font-size:15px;color:var(--color-text);max-width:640px;margin:0}
/* ADR-0027 "Items to check" box: NEUTRAL treatment (no severity colour, no warning/tick/cross glyph -
   a colour-coded check-only panel would be verdict-by-iconography). A faint neutral surface + hairline
   delineates it as a box, matching the plain §1c treatment. AA on --surface-soft #FAFBF9: ink 15.06:1,
   muted 5.42:1, link 6.13:1 - all pass. */
.items-check{margin:22px 0;padding:14px 16px;background:var(--surface-soft);border:1px solid var(--color-border);border-radius:10px}
.items-check h2{font-size:18px;margin:0 0 8px}
.items-check-list{margin:0 0 10px;padding-left:20px}
.items-check-list li{font-size:15px;color:var(--color-text);margin:4px 0}
.items-check-list a{color:var(--color-link);font-weight:600}
.items-check-foot,.items-check-empty{font-size:13px;color:var(--color-text-muted);max-width:640px;margin:0}
/* Part 3 "Amenities at a glance" panel (Lifestyle section): NEUTRAL - no severity colour, no glyph, no
   count. Faint neutral surface + hairline (same AA-verified tokens as .items-check). The framing line
   sits inside the panel so a screenshot crop keeps the disclaimer. */
.amenity-panel{margin:0 0 16px;padding:14px 16px;background:var(--surface-soft);border:1px solid var(--color-border);border-radius:10px}
.amenity-head{font-size:16px;margin:0 0 6px}
.amenity-framing{font-size:13px;color:var(--color-text-muted);max-width:640px;margin:0 0 10px}
.amenity-row{margin:6px 0}
.amenity-label{font-size:13px;font-weight:700;color:var(--color-text)}
.amenity-items{margin:2px 0 0;padding-left:18px}
.amenity-items li{font-size:14px;color:var(--color-text);margin:1px 0}
.amenity-foot{font-size:12px;color:var(--color-text-muted);max-width:640px;margin:8px 0 0}
/* "Before you make an offer" closing page (SPEC 2026-07-13): NEUTRAL - no severity colour, no glyph.
   Faint neutral surface (same AA-verified tokens as the other panels). The footer is set off by a
   hairline so the load-bearing no-advice disclaimer is visually part of the page, never clipped. */
/* P5: give the closing companion page room to read as its own chapter (more generous padding + block gaps). */
.before-offer{margin:22px 0;padding:var(--sp-24);background:var(--surface-soft);border:1px solid var(--color-border);border-radius:10px}
.before-offer>h2{font-size:20px;margin:0 0 12px}
.byo-block{margin:0 0 var(--sp-24)}
.byo-block h3{font-size:16px;margin:0 0 6px}
.byo-subhead{font-size:14px;margin-top:var(--sp-16);margin-bottom:4px;color:var(--color-text)}
/* P1: the "Questions from your report" group heading (matches .byo-subhead weight; more air above a group
   than between items within it). Mechanical section grouping (the card's fixed tier), never an audience. */
.byo-q-group-h{font-size:14px;font-weight:700;margin:var(--sp-16) 0 4px;color:var(--color-text)}
.byo-q-group-h:first-of-type{margin-top:6px}
.byo-intro{font-size:14px;color:var(--color-text-muted);max-width:660px;margin:0 0 8px}
.byo-list{margin:0;padding-left:20px}
.byo-list li{font-size:14.5px;color:var(--color-text);margin:4px 0}
.byo-list a{color:var(--color-link);font-weight:600}
.byo-empty{font-size:14px;color:var(--color-text-muted)}
.byo-note{font-size:14px;color:var(--color-text-muted);max-width:660px;margin:8px 0 0}
.byo-foot{font-size:12.5px;color:var(--color-text-muted);max-width:660px;margin:14px 0 0;border-top:1px solid var(--color-border);padding-top:10px}
/* 1d "What's in this report" contents map. Rows are recessed cluster cards, jump-links to each section. */
.dash-contents{margin:22px 0}
.dash-contents h2{font-size:18px;margin:0 0 10px}
.cmap{border:1px solid var(--cluster-rule);border-radius:12px;overflow:hidden}
.cmap-row{display:flex;align-items:center;gap:12px;padding:12px 16px;background:var(--cluster-bg);
  text-decoration:none;border-top:1px solid var(--cluster-rule)}
.cmap-row:first-child{border-top:none}
.cmap-row:hover{background:#F1EEE8}
.cmap-ico{display:inline-flex;color:var(--color-primary);flex:0 0 auto}      /* #2F4A3C on cluster-bg = 8.91:1 (graphic) */
.cmap-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.cmap-name{font-family:var(--font-head);font-weight:600;font-size:14px;color:var(--cluster-label)} /* 9.38:1 */
.cmap-break{font-size:13px;color:var(--color-text-muted)}                    /* 6.68:1 on cluster-bg */
.cmap-count{font-size:13px;color:var(--color-text-muted);white-space:nowrap;flex:0 0 auto}
.cmap-chev{display:inline-flex;color:var(--color-primary);flex:0 0 auto}     /* graphic 8.91:1 */
/* 1e facts-not-verdicts disclaimer: centered, dashed rule above. muted #6B675F on bone = 5.00:1 (AA). */
.dash-disclaimer{font-size:12px;color:var(--color-text-muted);text-align:center;max-width:480px;
  margin:24px auto 0;padding-top:24px;border-top:1px dashed var(--cluster-rule)}

/* sections (full report) */
.sec{margin:26px 0 4px}
.sec h2{font-size:18px;margin:0 0 2px}
/* A3-replacement: the "Your priorities" membership explainer (muted, sits under the heading). */
.sec-explainer{font-size:13px;color:var(--color-text-muted);margin:0 0 8px;max-width:640px}

/* signal cards - left border carries the reserved status colour */
.scard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:16px 18px;margin:12px 0}
/* R-15 Phase 2b inc1: the card left-border keys on the EVIDENCE CLASS (reusing the existing status
   tokens: followup=check/amber, context=know/neutral, noissue=clear/green, unavail=na). Report-scoped:
   the /area cards render bare .scard with NO is-* modifier, so this never touches the six /area pages. */
.scard.is-followup{border-left:4px solid var(--status-check)}
.scard.is-context{border-left:4px solid var(--status-know)}
.scard.is-noissue{border-left:4px solid var(--status-clear)}
.scard.is-unavail{border-left:4px solid var(--status-na)}
.scard-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.scope{font-size:11px;font-weight:600;color:var(--color-text-muted);background:var(--surface-soft);border:1px solid var(--color-border);border-radius:999px;padding:2px 9px;white-space:nowrap}
.scope-legend{font-size:12.5px;color:var(--color-text-muted);margin:0 0 8px}
.scard-ico{display:inline-flex;color:var(--color-text-muted)}
.scard h3{font-size:16px;margin:0;flex:1 1 auto;min-width:140px}
/* .spill = per-signal card status pill; .tpill = the triage row pill. Same look (selectors grouped),
   but DISTINCT classes so a card-level '.spill.check' count never accidentally tallies triage rows. */
/* P2: the status label is a COMPACT badge. R-15 Phase 2b inc1: the pill is the card's EVIDENCE CLASS,
   carried by COLOUR + a small SHAPE glyph + the TEXT label (never colour alone), reusing existing pill
   tokens. Report-scoped: the /area pages render no .spill/.tpill at all. */
.spill,.tpill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;border-radius:999px;padding:3px 9px;white-space:nowrap;letter-spacing:.1px}
/* The "noissue" pill is by far the most repeated on a clean report, so it drops its filled tint and
   becomes a quieter ghost/outline chip - same tokens. #1B6B5B on the white card surface = 6.36:1 (AA). */
.spill.noissue,.tpill.noissue{background:transparent;color:var(--pill-clear-fg);border:1px solid var(--pill-clear-bd)}
.spill.followup,.tpill.followup{background:var(--pill-check-bg);color:var(--pill-check-fg);border:1px solid var(--pill-check-bd)}
.spill.context,.tpill.context{background:var(--pill-info-bg);color:var(--pill-info-fg);border:1px solid var(--pill-info-bd)}
.spill.unavail,.tpill.unavail{background:var(--pill-na-bg);color:var(--pill-na-fg);border:1px solid var(--pill-na-bd)}
/* The redundant SHAPE glyph (accessibility: the class is never distinguished by colour alone). Inherits
   the pill's own colour via currentColor, so it always matches the label. Decorative (aria-hidden). */
.ev-shape{display:inline-block;width:9px;height:9px;flex:0 0 auto}
.ev-shape.followup{background:currentColor;transform:rotate(45deg);border-radius:1px}
.ev-shape.context{border:2px solid currentColor;border-radius:50%;background:transparent}
.ev-shape.noissue{border:2px solid currentColor;border-radius:1px;background:transparent}
.ev-shape.unavail{border:2px dashed currentColor;border-radius:50%;background:transparent}
.fact{margin:10px 0 8px;font-size:15px}
/* P8: "What this means for you" is a quiet callout - indent + rule + muted uppercase eyebrow, same words. */
.means{border:0;border-left:2px solid var(--color-border);background:transparent;padding:2px 0 2px 12px;margin:8px 0}
.means-label{display:block;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 2px}
.means-body{margin:0;font-size:14px;color:var(--color-text)}
/* P3: directive asks stay prominent; the "For completeness:" clear-card asks render muted + compact,
   visually subordinate. muted #6B675F on the white card surface = 5.63:1 (AA, reused). */
.ask{font-size:14px;margin:8px 0 2px}
.ask-directive{color:var(--color-text)}
.ask-directive .q{color:var(--color-link);font-weight:600}
.ask-fyi{font-size:12.5px;color:var(--color-text-muted)}
.ask-fyi .q{color:var(--color-text-muted);font-weight:500}
.ask .scard-ico,.scard-top .scard-ico{color:var(--color-text-muted)}
.src{font-size:12px;color:var(--color-text-muted);margin-top:8px}.src a{color:var(--color-text-muted)}
/* Provenance strip: source-citation as a visible hero (Vyzko_Report_FULL_Spec section 4). Neutral
   brand-green + ironstone (no green-family collision with the teal 'looks clear'); AA per the spec. */
.provenance{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px;padding:12px 16px;
  background:var(--source-strip-bg);border-left:2px solid var(--color-primary);border-radius:0 6px 6px 0}
.provenance .prov-ico{display:inline-flex;color:var(--color-primary);flex:0 0 auto}
.provenance .prov-org{font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--cluster-label)}
.provenance .prov-meta{font-size:12px;color:var(--color-text-muted)}
.provenance .prov-meta i{font-style:italic}
.provenance .prov-link{margin-left:auto;display:inline-flex;color:var(--color-primary)}
/* ADR-0025 card compression: SOURCE + limitations recede into an expandable. Structural only (the
   trust-bar redesign owns the finished visual); provenance markup is unchanged inside. */
.card-prov{margin-top:14px}
.card-prov-summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);
  font-weight:600;font-size:13px;color:var(--color-text-muted);list-style:none}
.card-prov-summary::-webkit-details-marker{display:none}
.card-prov-summary .scard-ico,.card-prov-summary svg{color:var(--color-text-muted)}
.card-prov[open] .card-prov-summary{margin-bottom:10px}
.card-prov .provenance{margin-top:0}
.card-limitation{font-size:12px;color:var(--color-text-muted);margin:8px 0 0}
/* Schools card only: per-school Ofsted report links (a factual pointer, never a verdict). Additive,
   scoped to the schools card; the names list with a quiet inline link to each official Ofsted report. */
.school-links{margin-top:12px;font-size:14px}
.school-links-label{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);
  font-weight:600;font-size:13px;color:var(--color-text-muted)}
.school-links-label svg{color:var(--color-text-muted)}
.school-links-list{margin:6px 0 0;padding-left:18px}
.school-links-list li{margin:2px 0}
.school-links .school-link{color:var(--color-link)}
/* Listed-building National Heritage List entries (SPEC §4.3): the register name + a proof link, styled to
   match the schools/Ofsted list exactly (a separate class purely for maintainer clarity). */
.heritage-links{margin-top:12px;font-size:14px}
.heritage-links-label{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);
  font-weight:600;font-size:13px;color:var(--color-text-muted)}
.heritage-links-label svg{color:var(--color-text-muted)}
.heritage-links-list{margin:6px 0 0;padding-left:18px}
.heritage-links-list li{margin:2px 0}
.heritage-links .heritage-link{color:var(--color-link)}
/* D1 per-card SCREEN expanders (layered disclosure): the depth is invited behind a native <details>,
   never imposed. Neutral, no status colour; lists ordered mechanically (nearest/most-recent/source order). */
.card-more{margin-top:10px}
.card-more-summary{cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);
  font-weight:600;font-size:13px;color:var(--color-text-muted);list-style:none}
.card-more-summary::-webkit-details-marker{display:none}
.card-more-summary svg{color:var(--color-text-muted)}
.card-more[open] .card-more-summary{margin-bottom:8px}
.more-list{margin:4px 0 0;padding-left:18px;font-size:13px}
.more-list li{margin:3px 0}
.more-ref{font-weight:600}
.more-desc{color:var(--color-text-muted)}
.more-meta{color:var(--color-text-muted);font-size:12px}
.more-list .more-link{color:var(--color-link);margin-left:4px}
.more-note{font-size:12px;color:var(--color-text-muted);margin:8px 0 0}
@media (max-width:560px){.card-more-summary{min-height:44px;padding:6px 0}}
/* §1d page-1 records-summary line (ADR-0025 Am3 verbatim copy). */
.dash-records-summary{font-size:15px;color:var(--color-text);max-width:640px;margin:0 0 12px}
/* Dossier craft: prominent cards (worth checking / worth knowing) lift off the page; clear/unavailable
   stay flat and recessed (the severity hierarchy proper lands in a follow-up commit). */
.scard.is-followup,.scard.is-context{box-shadow:var(--shadow-card)}

/* Section 6: Orientation (Vaastu lens). Facts-lens cards (Vyzko_Report_FULL_Spec section 7): white
   surface + --shadow-card, NO status pill and NO left-border accent (no status to encode). The context
   note is calm/muted/italic; the bearing is a plain mono value (never a gauge/compass-rose graphic).
   AA (all recomputed, sRGB relative luminance):
     - card title / fact body / mono bearing: n900 #262320 on white = 15.63:1;
     - context note (.ocontext): --color-text-muted #6B675F on bone #F5F1EA = 5.0001:1 (>= 4.5:1, AA pass);
     - scope chip (.oscope, §7b): #5B564E on #EDEAE4 = 6.0605:1;
     - provenance org #4A3F36 on strip #F4F1EC = 9.07:1; "Derived" meta --color-text-muted #6B675F (prov-meta) on #F4F1EC = 4.9966:1 (>= 4.5:1, AA pass);
       document glyph #2F4A3C on strip = 8.61:1 (graphic). */
.ocard{box-shadow:var(--shadow-card);border-left:1px solid var(--color-border)}
.ocontext{font-size:14px;color:var(--color-text-muted);max-width:600px;margin:6px 0 16px}
.obearing{font-size:14px;color:var(--color-text);margin:8px 0 0}
.obearing .oval{font-family:var(--font-mono);font-size:14px;color:var(--color-text)}
/* D1 sun-path: compact three-event facts table. Stays tight so the section never becomes a near-empty
   standalone page (pagination is Batch 7). Row header n900 #262320 on white = 15.63:1; cell text same. */
.osun{width:100%;border-collapse:collapse;margin:10px 0 0;font-size:14px;color:var(--color-text)}
.osun th,.osun td{text-align:left;padding:4px 12px 4px 0;vertical-align:top;font-weight:400}
.osun th{font-weight:600;white-space:nowrap}
.osun .oval{font-family:var(--font-mono)}
.oentrance{margin:10px 0 0}
/* §7b Vaastu scope chip: distinct from the generic muted .scope chip. */
.oscope{color:var(--scope-vaastu-fg);background:var(--scope-vaastu-bg);border-color:var(--scope-vaastu-bg)}

/* full-report strips */
.strip{border-radius:14px;padding:16px 18px;margin:14px 0}
.lease{background:var(--tile-more-bg);border:1px solid var(--tile-more-bd)}
.lease ul,.excl ul{margin:8px 0 0;padding-left:20px;font-size:14px}
.lease li,.excl li{margin:4px 0}
.excl{background:var(--surface-soft);border:1px solid var(--color-border);border-radius:14px;padding:14px 18px;margin:16px 0;font-size:14.5px}

/* full-report teaser (brand chrome, never a status pill) */
.teaser{border:1.5px dashed var(--color-border);background:var(--surface-soft);border-radius:14px;padding:16px 18px;margin:12px 0}
.teaser .tag{display:inline-block;background:var(--brand-soft-bg);color:var(--color-primary);font-size:10.5px;font-weight:800;letter-spacing:.6px;border-radius:4px;padding:2px 7px;margin-bottom:6px}
.teaser h3{margin:0 0 4px;font-size:16px;color:var(--color-primary)}.teaser p{margin:0;font-size:14px;color:var(--color-text-muted)}

/* paywall: heritage green panel (reversed treatment) */
.paywall{background:var(--color-primary);color:var(--color-on-primary);border-radius:16px;padding:22px;text-align:center;margin:16px 0}
.paywall h2{margin:2px 0 8px;font-size:21px}
.paywall p{font-size:14.5px;color:var(--on-primary-muted);margin:0 0 14px}
.paywall .btn{background:var(--color-on-primary);color:var(--color-primary)}
.paywall .btn:hover{background:#fff}
.small{font-size:12px;color:var(--on-primary-muted);margin-top:10px}
.small a{color:var(--on-primary-muted)}
.src-strip{font-size:12px;color:var(--color-text-muted);margin-top:16px;line-height:1.6}
/* A17: the licences colophon - a quiet back-matter block set off by a dashed rule + a small uppercase
   eyebrow, echoing the page-1 .dash-disclaimer so the report visually bookends (dashed rule opens the
   read, dashed rule closes it). P7: the closing line is the centered last line of the whole document. */
.colophon{margin-top:28px;padding-top:16px;border-top:1px dashed var(--cluster-rule);font-size:12px;color:var(--color-text-muted);line-height:1.6}
.colophon-kicker{font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 6px}
.report-closing{font-size:13px;color:var(--color-text-muted);text-align:center;max-width:480px;margin:20px auto 0}
/* Collapsed "Sources and licences" expandable (item B): the deduped OGL wall, present for compliance but
   not dominating the footer. The summary reads as a quiet control; the body keeps the muted strip type. */
.src-details{margin-top:8px}
.src-details>summary{cursor:pointer;color:var(--color-link,#2f5d3a);font-weight:600}
.src-details>summary:hover{text-decoration:underline}
.src-details>p{margin:8px 0 4px}

/* landing hero */
.hero{max-width:620px;margin:18px auto 0;text-align:center}
.hero h1{font-size:30px;line-height:1.18;margin:14px 0 8px}
.hero .sub{font-size:16.5px;color:var(--color-text-muted);margin:0 auto 22px;max-width:540px}
.searchcard{background:var(--color-surface);border:1px solid var(--color-border);border-radius:16px;padding:20px;box-shadow:var(--shadow-card);text-align:left}
.ac-wrap{position:relative}
#address{font-size:17px;padding:14px}
#ac{position:absolute;left:0;right:0;top:calc(100% - 2px);z-index:20;background:var(--color-surface);
  border:1px solid var(--color-border);border-top:none;border-radius:0 0 10px 10px;max-height:300px;overflow:auto;box-shadow:var(--shadow-pop);display:none}
#ac.open{display:block}
.ac-item{padding:11px 12px;font-size:14.5px;cursor:pointer;border-top:1px solid var(--color-border)}
.ac-item:first-child{border-top:none}.ac-item:hover,.ac-item.active{background:var(--brand-soft-bg)}
.ac-item .pc{color:var(--color-link);font-weight:700}
.ac-item.ac-demo{font-style:italic;color:var(--color-text-muted)}
.ac-note-row{padding:8px 12px;font-size:12.5px;color:var(--color-text-muted);background:var(--surface-soft);border-top:1px solid var(--color-border)}
.ac-head{padding:7px 12px;font-size:11.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--color-text-muted);background:var(--vy-bone);border-top:1px solid var(--color-border)}
.ac-note{font-size:12.5px;color:var(--color-text-muted);margin:8px 0 0}
.chips{margin:14px 0 4px;text-align:left}
.chips .lab{font-size:14px;font-weight:600;margin-bottom:6px;display:block}
.chips label{display:inline-flex;align-items:center;gap:6px;background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;padding:7px 14px;font-size:14px;margin:0 6px 8px 0;cursor:pointer}
/* P1-6: the metaphor-clashing square checkbox inside the rounded pill is replaced by a + that becomes a
   check on select. The native checkbox is restyled (appearance:none kills the square) but stays a REAL,
   actionable checkbox; the +/check mark is overlaid pointer-events:none so the input is still the hit
   target (click/tap/keyboard, and Playwright check(), all toggle it; landing.js still reads :checked +
   renames p1/p2/p3). The mark swap is pure CSS :has(:checked) - the mechanism the pill fill already uses. */
.chip-box{position:relative;display:inline-flex;flex:0 0 auto;width:16px;height:16px}
.chip-box input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;
  border:none;background:transparent;cursor:pointer}
.chip-mark{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;
  pointer-events:none;color:var(--color-text-muted)}
.chip-mark .cm-check{display:none}
.chips label:has(input:checked){background:var(--brand-soft-bg);border-color:var(--color-primary);color:var(--color-primary);font-weight:600}
.chips label:has(input:checked) .chip-mark{color:var(--color-primary)}
.chips label:has(input:checked) .chip-mark .cm-plus{display:none}
.chips label:has(input:checked) .chip-mark .cm-check{display:inline-flex}
/* Visible keyboard focus for the restyled checkbox: ring the pill when its input is focused. */
.chips label:has(input:focus-visible){outline:2px solid var(--color-primary);outline-offset:2px}
/* P1-11 unlock-clarity hint: revealed by landing.js when the unlock CTA jumps to #start. muted 5.00:1. */
.start-hint{font-size:13px;font-weight:600;color:var(--color-link);margin:8px 0 0}
/* Disabled priority chip: receded (bone) background, muted text, non-interactive (never opacity alone).
   Carries the 'in the full report' micro-tag so the buyer sees their interest is covered (conversion hook).
   Recomputed contrast: #6B675F on #F5F1EA = 5.00:1 (AA); tag #2F4A3C on #E7EDE9 = 8.17:1 (AA). */
.chips label.chip-disabled{background:var(--vy-bone);border-color:var(--vy-line);color:var(--color-text-muted);cursor:not-allowed}
.chips label.chip-disabled input{display:none}
.chips label.chip-disabled:hover,.chips label.chip-disabled:has(input:checked){background:var(--vy-bone);border-color:var(--vy-line);color:var(--color-text-muted)}
.chip-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.3px;color:var(--vy-green);background:var(--brand-soft-bg);border-radius:4px;padding:1px 6px;margin-left:5px;vertical-align:middle;white-space:nowrap}
.chips-help{font-size:12.5px;color:var(--color-text-muted);margin:10px 0 0}
.cta{display:block;width:100%;background:var(--color-primary);color:var(--color-on-primary);font-weight:800;border:none;border-radius:11px;padding:15px;font-size:17px;cursor:pointer;margin-top:8px}
.cta:hover{background:var(--color-primary-hover)}
.cta-sub{font-size:13px;color:var(--color-text-muted);text-align:center;margin:10px 0 0}
.trust{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin:20px 0 0;font-size:13px;color:var(--color-text-muted)}
.trust b{color:var(--color-text)}
.srcline{font-size:12px;color:var(--color-text-muted);text-align:center;margin:16px auto 0;max-width:560px;line-height:1.6}

@media (max-width:560px){
  .tiles{grid-template-columns:1fr;gap:10px}
  .tiles.four{grid-template-columns:1fr 1fr;gap:10px}
  .tiles:not(.four) .tile{display:flex;align-items:baseline;gap:12px}
  .tiles:not(.four) .tile .n{font-size:24px}.tiles:not(.four) .tile .lab{margin-top:0}
}

/* Streamed planning-applications card: a quiet pulse while the live card loads in. */
.streaming-dot{width:9px;height:9px;border-radius:999px;background:var(--color-primary);
  display:inline-block;animation:vyzko-pulse 1.1s ease-in-out infinite;flex:0 0 auto}
.scard.is-streaming{opacity:.82}
@keyframes vyzko-pulse{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion: reduce){.streaming-dot{animation:none}}

/* "Worth a closer look" at-a-glance block (teaser, SHOW-ALL). Neutral prioritisation, never a verdict. */
.triage{border:1px solid var(--color-border,#dfe3ea);border-radius:12px;padding:16px 18px;margin:18px 0;background:var(--color-surface,#fff)}
.triage-h{font-size:17px;margin:0 0 10px}
.triage-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px}
.triage-item{line-height:1.45}
.triage-item .tpill{margin-right:8px}
.triage-src{display:block;font-size:12px;color:var(--color-text-muted,#667);margin-top:3px}
.triage-none{margin:0;color:var(--color-text-muted,#667)}
/* Quiet honesty caption: ordering is worst-first, never a ranking/score/verdict (facts-not-verdicts). */
.triage-foot{margin:10px 0 0;font-size:12px;color:var(--color-text-muted,#667)}

/* Secondary-read affordances on the full report (share, monitoring fake door, day-7 survey). */
.btn-ghost{display:inline-block;background:transparent;color:var(--color-primary);border:1px solid var(--color-border);
  border-radius:10px;padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none}
.btn-ghost:hover{border-color:var(--color-primary)}
.rep-actions{display:flex;align-items:center;gap:12px;margin:18px 0 4px}
/* S9 (R-15 Phase 2b inc3a): the AI export demoted to a quiet SECONDARY note (a text link, not a primary
   ghost button). REPORT-ONLY class - the six live /area pages never reference it, so this rule cannot
   change area output. Muted 5.00:1 on bone (AA); the link keeps the themed link colour. */
.report-ai-note{font-size:13px;color:var(--color-text-muted);max-width:660px;margin:6px 0 0}
.share-done{font-size:13px;color:var(--pill-clear-fg)}
.monitor-door{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border:1px solid var(--color-border);
  border-radius:14px;padding:14px 18px;margin:12px 0;background:var(--surface-soft)}
.monitor-copy{flex:1;min-width:220px}
.monitor-copy b{font-size:15px}
.monitor-copy p{margin:2px 0 0;font-size:13.5px;color:var(--color-text-muted)}
.day7{border:1px solid var(--color-border);border-radius:14px;padding:16px 18px;margin:14px 0;background:var(--color-surface)}
.day7 h2{font-size:17px;margin:0 0 2px}
.day7-sub{font-size:13px;color:var(--color-text-muted);margin:0 0 10px}
.day7 fieldset{border:none;padding:0;margin:0 0 12px}
.day7 legend{font-size:14px;font-weight:600;padding:0;margin:0 0 6px}
.day7 label{display:inline-flex;align-items:center;gap:6px;margin:0 14px 6px 0;font-size:14px;cursor:pointer}
.day7 input[type=text]{margin-top:6px}
.day7 input[type=radio]{accent-color:var(--color-primary);cursor:pointer}

/* ===== Report section nav (sticky horizontal rail) ===== wayfinding while reading; no content hidden
   (show-all preserved). IntersectionObserver in report.js marks the active item. Recomputed contrast:
   inactive #6B675F on #FFFFFF = 5.63:1 (AA); active #2F4A3C on #FFFFFF = 9.69:1 (AA). */
.sec-rail{position:sticky;top:0;z-index:10;background:var(--vy-paper);border-bottom:1px solid var(--vy-line);display:flex;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:0 -20px;padding:0 20px}
.sec-rail::-webkit-scrollbar{display:none}
.sec-rail-item{flex:0 0 auto;padding:10px 14px;font-size:13px;font-weight:600;color:var(--color-text-muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s,border-color .15s}
.sec-rail-item:hover{color:var(--color-text);border-bottom-color:var(--vy-line)}
.sec-rail-item.active{color:var(--vy-green);border-bottom-color:var(--vy-green);font-weight:700}
@media (min-width:900px){.sec-rail{padding:0 24px;gap:4px}}
/* Smooth in-page anchor scroll (rail + contents map). prefers-reduced-motion override is a hard rail. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Offset anchors so a target section header is not hidden under the sticky rail (~44px high). */
.sec[id]{scroll-margin-top:52px}
.tiles#at-a-glance{scroll-margin-top:52px}   /* P1-10 back-to-top lands the tiles clear of the rail */

/* ===== P1-8 mobile report shell (TESTPLAN_2026-06-28 §B). The sticky tier-nav is ALREADY a one-row
   horizontal swipe-scroll (~6% of a 780px viewport, well under the 15% budget), so the structure stands;
   here we keep tap targets >= 44px and stop content overflow at 360-390px. Real touch/momentum is the
   Orchestrator-driven live-walk (ADR-0012 Am1). ===== */
@media (max-width:560px){
  /* comfortable touch targets (WCAG 2.5.5): grow the hit box with padding, never the field/id */
  .sec-rail-item{padding:13px 14px}                 /* one-row rail item >= 44px tall */
  .card-prov-summary{min-height:44px;padding:6px 0} /* the expandable provenance toggle (prime sub-44 suspect) */
  .scard{padding:14px 16px}
  /* no horizontal overflow: long source URLs, the mono postcode + breakdown text wrap, never widen the page */
  .src,.src a,.provenance,.prov-link,.prov-meta,.cmap-break{overflow-wrap:anywhere;word-break:break-word}
  .dash-pc b{overflow-wrap:anywhere}
  .provenance{gap:6px}
}

/* P1-10 floating "Back to top": brand green + bone (8.18:1, AA; NOT a danger colour). Fixed; toggled
   visible by report.js (the hidden attribute) once the buyer scrolls past the first tier. */
.to-top{position:fixed;right:16px;bottom:16px;z-index:40;display:inline-flex;align-items:center;gap:6px;
  background:var(--vy-green);color:var(--vy-bone);border-radius:999px;padding:10px 16px;font-size:13px;
  font-weight:600;text-decoration:none;box-shadow:var(--shadow-pop);min-height:44px}
.to-top:hover{background:var(--vy-green-hover);color:var(--vy-bone)}
.to-top .tt-ico{display:inline-flex}
.to-top[hidden]{display:none}
@media (max-width:560px){.to-top{padding:0;width:44px;height:44px;justify-content:center}.to-top .tt-lab{display:none}}

/* P1-9 honest INDETERMINATE loading overlay (shown by loading.js on the click into the up-to-60s
   synchronous /report build). An indeterminate spinner + ONE truthful line; NO fabricated per-source
   ticking. Text --color-text #262320 on bone overlay = 13.88:1 (AA). */
.report-loading{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:rgba(245,241,234,.94)}
.report-loading[hidden]{display:none}
.rl-box{max-width:360px;text-align:center;padding:0 24px}
.rl-spinner{width:40px;height:40px;margin:0 auto 16px;border-radius:999px;border:4px solid var(--vy-line);
  border-top-color:var(--vy-green);animation:vyzko-spin .9s linear infinite}
.rl-text{font-size:15px;color:var(--color-text);margin:0}
body.loading-lock{overflow:hidden}
@keyframes vyzko-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rl-spinner{animation:none}}

/* ===== /success email-capture backup form ===== the webhook already sends; this is a styled backup. */
.email-form{margin-top:16px;padding-top:14px;border-top:1px solid var(--color-border)}
.email-form h3{font-size:16px;margin:0 0 4px}
.email-form .email-sub{font-size:14px;color:var(--color-text-muted);margin:0 0 12px}
.email-form label.email-label{display:block;font-size:14px;font-weight:600;color:var(--color-text);margin-bottom:4px}
.email-input-prominent{width:100%;padding:14px 16px;font-size:16px;border:1.5px solid var(--color-border);border-radius:9px;font-family:var(--font-body);color:var(--color-text)}
.email-input-prominent:focus{border-color:var(--color-primary);outline:2px solid var(--vy-green-soft);outline-offset:1px}
/* Privacy note on the WHITE card: muted ink (#6B675F on #FFFFFF = 5.63:1, AA) - never the .small token,
   which is light text for green panels and would be near-invisible here. */
.email-form .form-note{font-size:12px;color:var(--color-text-muted);margin-top:10px}

/* ============================================================================================
   R-15 Phase 2b increment 2: the pages 1-2 EVIDENCE BRIEF (Conservative direction). REPORT-ONLY.
   NEW classes only (prefix `evb-`); reuses the existing status tokens (--pill-* / --status-*) and the
   existing .spill / .ev-shape pill components, so there is ONE palette and no shared rule is modified.
   The six live /area pages never render any `evb-` class (area-page stability guard). No em dashes.
   ============================================================================================ */
.evb-kicker{font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--vy-terracotta-hov);text-transform:uppercase}
.evb-h1{font-size:26px;margin:6px 0 2px;line-height:1.2;font-family:var(--font-head);font-weight:600}
.evb-h1 b{font-family:var(--font-mono);font-weight:400}
.evb-meta{font-size:14px;color:var(--color-text-muted);margin:2px 0 14px}
.evb-trust{font-size:14.5px;color:var(--color-text);max-width:620px;margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid var(--vy-line)}
.evb-section-h{font-size:13px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--color-text-muted);margin:0 0 10px}

/* follow-up findings (the material-finding-leads block) */
.evb-followups{margin:0 0 26px}
.evb-followup{background:var(--vy-paper);border:1px solid var(--vy-line);border-left:4px solid var(--status-check);
  border-radius:var(--radius);padding:16px 18px;margin:0 0 12px}
.evb-followup-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 6px;flex-wrap:wrap}
.evb-followup-count{font-size:11.5px;font-weight:700;color:var(--color-text-muted)}
.evb-followup-title{font-size:17px;margin:2px 0 6px;font-family:var(--font-head);font-weight:600}
.evb-followup-title a{color:inherit;text-decoration:none}
.evb-followup-fact{font-size:15px;margin:0 0 6px}
.evb-followup-limit{font-size:13px;color:var(--color-text-muted);margin:0 0 10px;max-width:600px}
.evb-followup-q{background:var(--vy-bone);border-left:2px solid var(--vy-green);border-radius:0 8px 8px 0;
  padding:9px 12px;font-size:14px;margin:0 0 8px}
.evb-followup-q b{font-family:var(--font-head);font-weight:700;color:var(--vy-green);font-size:11.5px;
  text-transform:uppercase;letter-spacing:.3px;display:block;margin-bottom:2px}
.evb-followup-src{font-size:12px;color:var(--color-text-muted)}
.evb-zero{background:var(--vy-paper);border:1px solid var(--vy-line);border-radius:var(--radius);padding:16px 18px;margin:0 0 26px}
.evb-zero p{margin:0 0 8px;font-size:14.5px}
.evb-zero p:last-child{margin-bottom:0;color:var(--color-text-muted);font-size:13.5px}

/* standard title/tenure questions (separate axis, never combined with the finding counts) */
.evb-tenure{background:var(--vy-paper);border:1px solid var(--vy-line);border-radius:var(--radius);padding:16px 18px;margin:0 0 26px}
.evb-tenure h2{font-size:15px;margin:0 0 8px;font-family:var(--font-head);font-weight:600}
.evb-tenure ol{margin:0;padding-left:20px}
.evb-tenure li{font-size:14px;margin:4px 0}
.evb-tenure .evb-tag{font-size:12px;color:var(--color-text-muted);margin-top:8px}

/* the four evidence-completeness counts (own axis, no "completed" language) */
.evb-counts{margin:0 0 22px}
.evb-counts h2{font-size:15px;margin:0 0 10px;font-family:var(--font-head);font-weight:600}
.evb-countgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.evb-countcard{border-radius:12px;padding:12px 12px 10px;border:1px solid var(--vy-line);background:var(--vy-paper)}
.evb-countcard .n{font-size:24px;font-weight:800;line-height:1;font-family:var(--font-head)}
.evb-countcard .lab{font-size:11.5px;font-weight:600;margin-top:4px;line-height:1.3}
.evb-countcard.followup{background:var(--pill-check-bg);border-color:var(--pill-check-bd)}.evb-countcard.followup .n{color:var(--pill-check-fg)}
.evb-countcard.context{background:var(--pill-info-bg);border-color:var(--pill-info-bd)}.evb-countcard.context .n{color:var(--pill-info-fg)}
.evb-countcard.noissue{background:var(--pill-clear-bg);border-color:var(--pill-clear-bd)}.evb-countcard.noissue .n{color:var(--pill-clear-fg)}
.evb-countcard.unavail{background:var(--pill-na-bg);border-color:var(--pill-na-bd)}.evb-countcard.unavail .n{color:var(--pill-na-fg)}
.evb-reconcile{font-size:12.5px;color:var(--color-text-muted);margin:8px 0 0}
/* R-15 fix-up: the page-1 unavailable-identity note (names the outage-unavailable check(s); compact). */
.evb-unavail-note{font-size:13px;color:var(--color-text-muted);margin:14px 0 0;line-height:1.5}

.evb-viewall{display:block;text-align:center;background:var(--vy-green);color:var(--vy-bone);font-weight:800;
  border-radius:11px;padding:14px;text-decoration:none;font-size:15px;margin:6px 0 8px}
.evb-viewall:hover{background:var(--vy-green-hover)}

/* PAGE 2 */
.evb-page2{margin-top:8px}
.evb-p2-h1{font-size:22px;margin:0 0 4px;font-family:var(--font-head);font-weight:600}
.evb-p2-sub{font-size:13.5px;color:var(--color-text-muted);margin:0 0 20px}
.evb-attn{background:var(--vy-paper);border:1px solid var(--vy-line);border-left:4px solid var(--status-check);
  border-radius:var(--radius);padding:16px 18px;margin:0 0 14px}
.evb-attn h3{font-size:15.5px;margin:0 0 6px;font-family:var(--font-head);font-weight:600}
.evb-attn h3 a{color:inherit;text-decoration:none}
.evb-attn p{font-size:14px;margin:0 0 8px}
.evb-unknown{background:var(--vy-paper);border:1px solid var(--vy-line);border-radius:var(--radius);padding:16px 18px;margin:0 0 18px}
.evb-unknown h2{font-size:15.5px;margin:0 0 8px;font-family:var(--font-head);font-weight:600}
.evb-unknown p.lede{font-size:13.5px;color:var(--color-text-muted);margin:0 0 10px}
.evb-unknown ul{margin:0;padding-left:20px}
.evb-unknown li{font-size:14px;margin:4px 0}
.evb-groups{margin:0 0 24px}
.evb-groups h2{font-size:15.5px;margin:0 0 4px;font-family:var(--font-head);font-weight:600}
.evb-groups .evb-p2-sub{margin-bottom:12px}
.evb-group{margin:0 0 12px}
.evb-group h3{font-size:13px;font-weight:700;color:var(--vy-green);text-transform:uppercase;letter-spacing:.3px;margin:0 0 5px;font-family:var(--font-head)}
.evb-group ul{margin:0;padding-left:18px}
.evb-group li{font-size:14px;margin:3px 0}
.evb-transition{text-align:center;margin:30px 0 8px;padding:18px 0;border-top:1px dashed var(--vy-line)}
.evb-transition p{font-size:13px;color:var(--color-text-muted);max-width:520px;margin:0 auto}

@media (max-width:560px){
  .evb-countgrid{grid-template-columns:1fr 1fr;gap:8px}
  .evb-followup-eyebrow{flex-wrap:wrap}
}