[data-page="/seo-audit"]{

  /* seo-audit specifics — the run card is scan-run.css (shared with
     /agent-readiness); everything else is site.css / components.css */
  .sev { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
  .sevbox { flex: 1 1 120px; border: 1px solid var(--line); border-radius: var(--r);
            background: var(--white); padding: 10px 12px; }
  a.sevbox { color: inherit; text-decoration: none; display: block; }
  a.sevbox:hover { border-color: var(--mute); }
  .issue .fixlink { display: inline-block; font-size: 13px; margin-top: 6px; }
  .sevbox .n { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; display: block; }
  .sevbox .l { font-size: 12px; color: var(--mute); }
  .sevbox.critical .n { color: var(--broken); }
  .sevbox.warning .n  { color: var(--leak); }
  .sevbox.info .n     { color: var(--mute); }

  .issue { border-top: 1px solid var(--line-soft); padding: 12px 0; }
  .issue:first-of-type { border-top: 0; }
  .issue h3, .issue h4 { font-size: 15px; margin: 0 0 2px; }
  .alsohead { margin-top: 18px; }
  /* S33: the score of the pages reached, the fix-first points, the teaser, the wall's list. */
  .scoreblock { margin-top: 14px; }
  .scoreblock .klabel { margin-bottom: 4px; }
  .scoreline { font-family: var(--mono); font-size: 22px; font-variant-numeric: tabular-nums; margin: 0 0 8px; }
  .pillars { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--mute); }
  /* CVL-566 (R5): the overall big in its band, a bar per pillar. Bands are ours, stated under the number. */
  .scorebig { font-size: 56px; font-weight: 700; line-height: 1; vertical-align: -6px; margin-right: 6px; }
  .scorerest { font-size: 15px; color: var(--mute); }
  .scorebig.weak { color: #b42318; } .scorebig.fair { color: #b54708; } .scorebig.strong { color: #067647; }
  .pbar { display: block; width: 120px; height: 6px; border-radius: 3px; background: var(--line); margin-top: 3px; overflow: hidden; }
  .pfill { display: block; height: 100%; }
  .pfill.weak { background: #d92d20; } .pfill.fair { background: #dc6803; } .pfill.strong { background: #079455; }
  .issue .points { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; margin: 0 0 2px; }
  .teaser { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 12px; }
  .teaser h3 { font-size: 15px; margin: 0 0 2px; }
  .gatelist { margin: 10px 0 14px; padding-left: 18px; font-size: 14px; }
  /* CVL-566 PR 2: the wall reads as the next step, not a footnote; the scan against the account, side by side. */
  #gate { border: 1px solid var(--brand-100); }
  .gatetable { width: 100%; border-collapse: collapse; margin: 12px 0 14px; font-size: 14px; }
  .gatetable th, .gatetable td { text-align: left; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
  .gatetable thead th { font-weight: 600; }
  .gatetable tbody th { font-weight: 400; color: var(--mute); }
  /* CVL-566 (R6, R8): the free account while it runs; a bar on phones once the result has scrolled away. */
  .waitoffer { border: 1px solid var(--brand-100); border-radius: var(--r); padding: 14px 16px; margin-top: 14px; }
  .stickybar { display: none; }
  @media (max-width: 699px) {
    .stickybar:not(.hidden) { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 10px; align-items: center;
      justify-content: space-between; padding: 10px 16px; background: var(--paper); border-top: 1px solid var(--line); font-size: 14px; }
    .stickybar .btn { min-height: 44px; display: inline-flex; align-items: center; } /* a 44 px tap target */
  }
  .issue .ex { font-family: var(--mono); font-size: 11.5px; color: var(--faint); margin-top: 6px;
               overflow-wrap: anywhere; }
  .issue .exmore summary { font-size: 12.5px; color: var(--mute); cursor: pointer; margin-top: 6px; min-height: 44px; padding-top: 12px; box-sizing: border-box; } /* CVL-580 L6: 44px, was 24; the fold is phone-only */
  /* Review of #1781: the fix is what the card is for: the card's own size and ink, and a 44 px "Show all" on a phone. */
  .issue .fixtext { font-size: 15px; color: var(--ink); margin-top: 8px; }
  /* On a phone the next step's Google and GitHub buttons are one width, as on /start. */
  @media (max-width: 599px) { #gate form > .btn { width: 100%; text-align: center; } }
  /* CVL-608: the free result saved as PDF without an account carries the mark on every printed page (a fixed box
     repeats on each sheet); a signed-in visitor's (seo-audit-gate.js sets the class) is clean. */
  .scanmark { display: none; }
  /* Review of #2009: the paper holds ONLY the result, as the report's print path does (report-page.js
     REPORT_PRINT_CSS): no header, form, run log, wall, pitch or footer. The mark is in the markup, so a print
     before the summary, after a stream gave up or with no script at all is marked; the script only takes it off. */
  @media print {
    @page { margin: 14mm; }
    header.nav, footer, #stickyBar, main > section:not(#result), #gate, #resultMore, #scanOther { display: none !important; }
    #result .issue { break-inside: avoid; }
    #result * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }
  @media print { html:not(.cvl-signed-in) .scanmark { display: block; position: fixed; top: 45%; left: 0; right: 0; text-align: center; transform: rotate(-30deg); font-size: 44px; font-weight: 600; color: #c0c0c1; z-index: 9999; pointer-events: none; } }
  /* CVL-562: the issue line is a button that opens what the scan measured for it. */
  .issue .issueline { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 0; margin: 0;
                      font: inherit; color: inherit; cursor: pointer; min-height: 24px; }
  .issue .issueline::after { content: " \25B8"; color: var(--mute); }
  .issue .issueline[aria-expanded="true"]::after { content: " \25BE"; }
  .issue .issueline:hover { text-decoration: underline; }
  .issue .issueline:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
  .issue .issuemore { margin-top: 6px; }
  @media (max-width: 600px) { .issue .issueline { min-height: 44px; } }
  .leave .emaillabel { max-width: none; margin: 12px 0 0; flex-basis: 100%; }
  .leave .emailrow { margin-top: 0; }
  /* design review 2026-10-16: the form in one centred column; an example result before anyone types */
  .audit-hero { text-align: center; }
  .audit-hero .lede { margin-inline: auto; max-width: 640px; }
  .audit-col { max-width: 560px; margin: 20px auto 0; text-align: left; }
  .audit-col .inputrow, .audit-col .risk { max-width: none; }
  .audit-ex ol { margin: 6px 0 10px; padding-left: 20px; color: var(--ink); }
  .audit-ex-score { font-size: 15px; color: var(--mute); margin: 0 0 12px; }
  .audit-ex-score b { font-size: 34px; color: var(--ink); margin-right: 4px; }
  .audit-ex-score span { display: block; font-size: 13px; }
  #run:not(.hidden) ~ .audit-example { display: none; }
  .audit-col .field-label { display: block; max-width: none; padding: 0; margin: 0 0 8px; text-indent: 0; }
  @media (max-width: 600px) { .audit-col .field { min-height: 44px; } main .body a, main .risk a, main .tlink { display: inline-flex; align-items: center; min-height: 44px; } }
  /* CVL-614 — A RESULT LINK DOES NOT JUMP (CLS 0.57 at 1440, 0.92 at 390 measured). The hero is a finished result's
     from the first frame (as .scan-finished in scan-run.css), and everything under it is held, not drawn, until the
     stream says which state the scan is in (seo-audit.js settle()): what is not drawn cannot be seen to move. The head
     script marks only an id reopen() opens; the animation shows the page at 10 s even if seo-audit.js never runs. */
  .scan-link .audit-hero .lede { display: none; }
  .scan-link section.block.audit-hero { padding-top: 16px; }
  .scan-pending main > section:not(.audit-hero), .scan-pending footer { visibility: hidden; animation: cvl-unhold 0s 10s forwards; }
  @keyframes cvl-unhold { to { visibility: visible; } }
  /* CVL-602 R2 — A FINISHED SCAN'S REPORT CAME FROM THE SERVER (<html data-scan-report="ssr">, page.mjs). It is shown
     at the first paint, without waiting for the stream (the hold above lets it through), and nothing the stream draws
     later can move it: what sits above it or beside it in the card is not drawn (the run card, the example, the
     log, the problem box, the note), and the page's own score and findings stay out of its way (one report, never
     two). A new scan or Start over takes the attribute off (seo-audit.js leaveReport) and the page is as it was. */
  html[data-scan-report="ssr"] #result { display: block; visibility: visible; animation: none; }
  html[data-scan-report="ssr"] .audit-example, html[data-scan-report="ssr"] #run, html[data-scan-report="ssr"] #log,
  html[data-scan-report="ssr"] #problem, html[data-scan-report="ssr"] #resultNote, html[data-scan-report="ssr"] #scoreBlock,
  html[data-scan-report="ssr"] #sev, html[data-scan-report="ssr"] #fixHead, html[data-scan-report="ssr"] #issues,
  html[data-scan-report="ssr"] #fixMore { display: none; }

}
[data-page="/agent-readiness"]{

  /* agent-readiness specifics — the run card is scan-run.css (the same wire
     and grammar as /seo-audit); everything else is site.css / components.css */
  #result { scroll-margin-top: 84px; }
  /* CVL-558: the result link wraps on a phone instead of being cut off. */
  #leave .inputrow { flex-wrap: wrap; }
  .ar-link { flex: 1 1 260px; resize: none; field-sizing: content; min-height: 2.8em; font-family: var(--mono); font-size: 12.5px; line-height: 1.4; overflow-wrap: anywhere; }
  /* CVL-558: the page log is /seo-audit's (its rows count SEO to-dos); the run card's steps already say what was opened. */
  #log { display: none !important; }
  /* While the scan runs, the result slot holds the first answer and a screen of room, so the full result filling it
     moves nothing below it (CVL-558: without it the layout shifted 0.2 to 0.9). */
  #agentResult:has(#arFirst) { min-height: 100vh; }
  /* CVL-702 — A RESULT LINK DOES NOT JUMP, as /seo-audit's (CVL-614; 0.252 at 390 measured here without it). The hero is
     a finished result's from the first frame (as .scan-finished in scan-run.css), and everything under it is held until
     the stream says which state the scan is in (seo-audit.js settle()), so the run is first drawn folded. The animation
     shows the page at 10 s even if seo-audit.js never runs. */
  .scan-link .audit-hero .lede { display: none; }
  .scan-link section.block.audit-hero { padding-top: 16px; }
  .scan-pending main > section:not(.audit-hero), .scan-pending footer { visibility: hidden; animation: cvl-unhold 0s 10s forwards; }
  @keyframes cvl-unhold { to { visibility: visible; } }

}
[data-page="/webmcp"]{

  /* the result's components (agent-readiness-result.js builds them) are in scan-run.css, shared with /agent-readiness */
  #webmcpAnswer { font-weight: 600; margin: 4px 0 8px; }
  /* Owner Q34 (CVL-580): once the full result is below, the first answer folds to one line, "Quick answer ▸". */
  #webmcpFirst:has(.quick-answer) { padding-top: 12px; }
  #webmcpFirst .quick-answer { padding: 12px 20px; }
  #webmcpFirst .quick-answer > summary { cursor: pointer; list-style: none; font-weight: 600; display: flex; align-items: center; min-height: 24px; }
  #webmcpFirst .quick-answer > summary::-webkit-details-marker { display: none; }
  #webmcpFirst .quick-answer > summary::after { content: "\25B8"; margin-left: 6px; color: var(--mute); }
  #webmcpFirst .quick-answer[open] > summary::after { content: "\25BE"; }
  #webmcpFirst .quick-answer[open] > summary { margin-bottom: 8px; }
  @media (max-width: 600px) { #webmcpFirst .quick-answer > summary { min-height: 44px; } }
  /* the guide */
  .guide { max-width: 760px; }
  .guide h2 { margin-top: 8px; }
  .guide h3 { margin-top: 18px; }
  .guide .body { margin-top: 8px; }
  .guide ul, .guide ol { padding-left: 1.4em; margin-top: 8px; }
  .guide li { margin-top: 4px; }
  .snip pre { font-family: var(--mono); font-size: 12.5px; line-height: 1.65; background: var(--paper);
    border: 1px solid var(--line-soft); border-radius: var(--r); padding: 14px 16px; margin-top: 10px;
    overflow-x: auto; color: var(--ink); white-space: pre; }
  /* legible on a phone: inline code is 0.9em, which made 11.25px inside the 12.5px snippets */
  main code { font-size: max(12px, 0.9em); }

/* S34 (review pack mkt-06): the plain-English diagram, the WebMCP vs MCP cards and the draft note */
.wm-diagram { margin: 20px 0 8px; }
.wm-flow { display: grid; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 0.7fr); align-items: center; gap: 0; margin-top: 18px; }
.wm-page { border: 1px solid var(--brand-100); border-radius: 10px; background: var(--brand-50); padding: 12px 16px; }
.wm-dots { display: flex; gap: 6px; margin-bottom: 8px; }
.wm-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-100); }
.wm-k { margin: 0 0 6px; font-size: 13px; color: var(--mute); }
.wm-page ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wm-page li { background: var(--white); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; }
.wm-line { height: 2px; background: var(--brand-500); position: relative; }
.wm-line::before, .wm-line::after { content: ""; position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand-500); }
.wm-line::before { left: -4px; } .wm-line::after { right: -4px; }
.wm-agent { text-align: center; }
.wm-bot { display: inline-block; width: 72px; height: 72px; border-radius: 50%; border: 3px solid var(--brand-500); background: radial-gradient(circle at 36% 48%, var(--brand-500) 0 7px, transparent 8px), radial-gradient(circle at 64% 48%, var(--brand-500) 0 7px, transparent 8px), var(--brand-50); }
.wm-agent p { margin: 6px 0 0; font-size: 13.5px; color: var(--mute); }
.wm-diagram figcaption { margin-top: 14px; text-align: center; color: var(--mute); font-size: 14px; }
.wm-vs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
.wm-vs h4 { margin: 0 0 4px; font-size: 16px; }
.wm-draft { margin-top: 16px; }
@media (max-width: 640px) { .wm-flow { grid-template-columns: 1fr; gap: 14px; } .wm-line { height: 24px; width: 2px; margin: 0 auto; } .wm-line::before { left: -4px; top: -4px; } .wm-line::after { left: -4px; right: auto; top: auto; bottom: -4px; } .wm-vs { grid-template-columns: 1fr; } }

}