/* =============================================================================
   Get Website Audit — the report
   -----------------------------------------------------------------------------
   Loaded by the report itself and by the landing page, because the landing page
   shows the real components rather than a picture of a dashboard. Anything in
   here that the landing page uses is a genuine part of the deliverable.

   The document has one job: get a business owner from "what is my score" to "I
   know what to do on Monday", while leaving a developer able to reach the
   measurement behind every claim. That is why almost every block below has two
   layers — a plain sentence, and a disclosure holding the evidence.

   Tokens come from style.css. Nothing here invents a colour.
   ========================================================================== */

.rpt {
  /* One vertical rhythm for the whole report. --gap-card separates sibling
     cards inside a group; --gap-block separates one major block from the next.
     Every spacing value below comes from these two. */
  --gap-card:  14px;
  --gap-block: 56px;
  max-width: 940px;
  margin: 0 auto;
  /* The report renders full width on its own page and inside a half-width
     frame on the landing page. Its components therefore respond to the space
     they are given rather than to the size of the window — otherwise the score
     panel is two columns in a 400px frame and clips its own text. */
  container-type: inline-size;
  container-name: rpt;
}

/* -----------------------------------------------------------------------------
 | Masthead
 |
 | A deliverable states what it is, who it is about and when it was produced,
 | before it states anything else. This block is the same on screen and on the
 | printed page, so a PDF forwarded to a client is self-describing.
 | ---------------------------------------------------------------------------*/
.rpt-masthead {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  padding-bottom: var(--s-4); margin-bottom: var(--s-6);
  border-bottom: 2px solid var(--ink);
}
.rpt-kind {
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink);
}
.rpt-masthead .rpt-when { margin-left: auto; font-size: var(--fs-xs); color: var(--slate-2); }
.rpt-subject { margin: 0 0 var(--s-2); font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -.025em; word-break: break-word; }
.rpt-subject .rpt-host { color: var(--ink); }
.rpt-sources { margin: 0; font-size: var(--fs-sm); color: var(--slate-2); }
.rpt-sources b { color: var(--slate); font-weight: 600; }

/* -----------------------------------------------------------------------------
 | The score
 |
 | Deliberately not a gauge. A dial says "we measured a thing"; what a reader
 | actually needs is where the number sits, what the band is called, and whether
 | they should be worried — so the number is set as a figure, and beside it a
 | scale names all five bands and marks the one they are in.
 | ---------------------------------------------------------------------------*/
.score-panel {
  display: grid; grid-template-columns: minmax(210px, 250px) 1fr;
  gap: 0; border: 1px solid var(--rule-2); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden; box-shadow: var(--shadow-sm);
}
.score-figure {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--rule);
  background: var(--paper-2);
  display: flex; flex-direction: column; justify-content: center;
}
.score-num {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(58px, 8vw, 82px); line-height: .9; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.score-outof { font-size: var(--fs-sm); color: var(--slate-2); margin-top: 6px; }
.score-word {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg);
  margin-top: var(--s-3); letter-spacing: -.01em;
}
.score-of-what { font-size: var(--fs-xs); color: var(--slate-2); margin-top: 2px; }

.score-read { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.score-meaning { margin: 0; font-size: var(--fs-md); line-height: 1.6; color: var(--slate); }
.score-meaning strong { color: var(--ink); }

/* The scale. Five segments, named, with the reader's band filled in. Colour is
   never the only signal: the band the marker sits in is also the only one
   printed in ink rather than grey. */
.score-scale { margin-top: auto; }
/* Segment widths are the real band widths — 0-24, 25-49, 50-74, 75-89, 90-100 —
   so the reader's position on the scale is honest rather than decorative. */
.score-track { display: grid; grid-template-columns: 25fr 25fr 25fr 15fr 11fr; gap: 3px; }
.score-seg { height: 8px; border-radius: 2px; background: var(--paper-3); }
.score-seg.on-bad  { background: var(--poor-fill); }
.score-seg.on-warn { background: var(--fair-fill); }
.score-seg.on-good { background: var(--good-fill); }
/* The labels share the track's columns, so each band name sits under the band
   it names. A row of names that does not line up with the bars is worse than no
   names at all — it invites the reader to match them up and get it wrong. */
.score-ticks {
  display: grid; grid-template-columns: 25fr 25fr 25fr 15fr 11fr; gap: 3px;
  margin: 8px 0 0;
  /* Sentence case, not small caps: the same nine-letter word set in capitals
     needs a font size that is no longer legible in the 11% band. */
  font-size: 11px; letter-spacing: 0;
  color: var(--slate-3); font-weight: 600; line-height: 1.3;
}
.score-tick { text-align: center; }
.score-tick.on { color: var(--ink); }

.score-coverage {
  margin: 0; padding-top: var(--s-4); border-top: 1px solid var(--rule);
  font-size: var(--fs-xs); line-height: 1.55; color: var(--slate-2);
}

/* -----------------------------------------------------------------------------
 | The verdict
 |
 | One paragraph, set as a pull quote, because it is the only place in the
 | report where a human voice is speaking rather than a measurement reporting.
 | It is context for the plan below it, so it is sized under the headings — the
 | first thing a reader can ACT on should never be smaller than the commentary.
 | ---------------------------------------------------------------------------*/
.verdict {
  margin-top: var(--gap-card);
  border: 1px solid var(--accent-line); border-left: 3px solid var(--accent);
  border-radius: var(--r-lg); background: var(--accent-wash);
  padding: var(--s-5) var(--s-6);
}
.verdict-k {
  display: block; margin-bottom: 7px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink);
}
.verdict p {
  margin: 0; font-size: var(--fs-base); line-height: 1.65; color: #7A3210;
}

/* ---------- Section headings ---------- */
.rpt-section { margin-top: var(--gap-block); }
.rpt-section-head { margin-bottom: var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); }
.rpt-section-head h2 { font-size: var(--fs-2xl); margin: 0 0 4px; }
.rpt-section-head p  { margin: 0; font-size: var(--fs-sm); color: var(--slate-2); }
.rpt-section-head .count { font-family: var(--font-display); font-weight: 700; color: var(--accent-ink); }

/* ---------- Notices ---------- */
.rpt-notice {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid var(--rule); border-left: 3px solid var(--slate-3);
  border-radius: var(--r); background: var(--paper-2);
  padding: var(--s-4) var(--s-5); font-size: var(--fs-sm); line-height: 1.62;
  color: var(--slate); margin-bottom: var(--gap-card);
}
.rpt-notice strong { display: block; color: var(--ink); margin-bottom: 3px; }

/* -----------------------------------------------------------------------------
 | The consultant's read
 |
 | Set as an article, not as a card: a heading, a standfirst and three short
 | passages with their own kickers. Four parts, fixed order — two of them are
 | never model-written. See findings_consultant().
 | ---------------------------------------------------------------------------*/
.consult { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-7) var(--s-7) var(--s-6); background: var(--paper); }
.consult-open {
  margin: 0 0 var(--s-5); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(19px, 2.2vw, 23px); line-height: 1.35; letter-spacing: -.02em; color: var(--ink);
}
.consult-part { margin-bottom: var(--s-5); max-width: 68ch; }
.consult-part:last-of-type { margin-bottom: 0; }
.consult-k {
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-micro); letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 5px;
}
.k-good { color: var(--good); } .k-warn { color: var(--fair); }
.consult-part p { margin: 0; font-size: var(--fs-base); line-height: 1.68; color: var(--slate); }
.consult-close {
  margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--rule);
  font-size: var(--fs-md); line-height: 1.6; color: var(--ink); font-weight: 500; max-width: 68ch;
}

/* -----------------------------------------------------------------------------
 | Fix this first
 |
 | The one card meant to stop a skimming reader. It gets the accent, the ground
 | and the only large heading in the body of the report — everything else is
 | ranked below it on purpose, and nothing else on the page wears this edge.
 | ---------------------------------------------------------------------------*/
.fixfirst {
  border: 1px solid var(--accent-line); border-top: 3px solid var(--accent);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--accent-wash) 0%, var(--paper) 58%);
  padding: var(--s-6) var(--s-7) var(--s-7);
  box-shadow: var(--shadow-sm);
}
.fixfirst-lbl {
  display: flex; align-items: center; gap: 10px; margin: 0 0 var(--s-3);
  font-family: var(--font-display); font-size: var(--fs-micro); font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink);
}
.fixfirst-lbl .ff-rank {
  display: inline-grid; place-items: center; min-width: 24px; height: 20px; padding: 0 7px;
  background: var(--accent); color: var(--ink); border-radius: var(--r-sm);
  font-size: var(--fs-micro); letter-spacing: .04em;
}
.fixfirst h3 { font-size: clamp(21px, 2.6vw, 28px); line-height: 1.25; margin: 0 0 var(--s-3); }
.fixfirst .ff-why { font-size: var(--fs-md); line-height: 1.65; color: var(--slate); margin: 0 0 var(--s-4); max-width: 66ch; }

/* -----------------------------------------------------------------------------
 | Chips
 |
 | Priority is the only one carrying a colour, so it reads first without being
 | any larger than its neighbours. Everything else is a fact in grey.
 | ---------------------------------------------------------------------------*/
.f-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s-3); }
.f-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-micro); font-weight: 600; letter-spacing: .02em;
  padding: 4px 9px; border-radius: var(--r-sm);
  background: var(--paper-2); border: 1px solid var(--rule); color: var(--slate-2);
  white-space: nowrap;
}
.f-chip-pri { font-weight: 700; border-color: transparent; }
.pr-critical { background: var(--poor-wash); color: var(--poor); }
.pr-high     { background: var(--fair-wash); color: var(--fair); }
.pr-medium   { background: var(--paper-3);   color: var(--slate); }
.pr-low      { background: var(--paper-2);   color: var(--slate-2); }
.f-chip-diy  { background: var(--good-wash); color: var(--good); border-color: transparent; }
.f-chip-both { background: var(--good-wash); color: var(--good); border-color: transparent; cursor: help; }
a.f-chip-dev { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; transition: background .16s, color .16s; }
a.f-chip-dev:hover { background: var(--accent); color: var(--ink); }

/* -----------------------------------------------------------------------------
 | The action plan
 |
 | Titles and priority only, numbered. It is the twenty-second version of the
 | report — the thing an owner reads, prints or forwards — and it links into the
 | full finding below, which is where the substance lives. The two are not a
 | duplication: one is a contents page, the other is the chapter.
 | ---------------------------------------------------------------------------*/
.plan { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.plan li { border-bottom: 1px solid var(--rule); }
.plan li:last-child { border-bottom: 0; }
.plan a {
  display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: var(--s-4);
  padding: 13px 8px 13px 4px; transition: background .16s;
}
.plan a:hover { background: var(--paper-2); }
.plan a:hover .plan-title { color: var(--accent-ink); }
.plan-n {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  color: var(--slate-3); font-variant-numeric: tabular-nums;
}
.plan-title { font-size: var(--fs-base); color: var(--ink); font-weight: 550; line-height: 1.4; transition: color .16s; }
/* Two fixed columns rather than a flex row: chips are all different widths, so
   flexing them right made twelve ragged left edges down the side of a list
   whose whole job is to be scanned in five seconds. */
.plan-side { display: grid; grid-template-columns: auto 66px; gap: 14px; align-items: center; justify-items: end; }
.plan-effort { justify-self: start; font-size: var(--fs-xs); color: var(--slate-2); white-space: nowrap; }
.plan-summary {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--rule);
  font-size: var(--fs-sm); color: var(--slate-2);
}
.plan-summary b { color: var(--ink); font-weight: 650; }

/* -----------------------------------------------------------------------------
 | Findings
 |
 | Two audiences, one card. The head and the first two rows are written for
 | somebody who does not build websites; the evidence and the technical detail
 | are a disclosure below, so a developer can reach the measurement without the
 | owner having to read past it.
 |
 | Priority is expressed structurally as well as in the chip — a critical
 | finding carries a coloured edge and a solid rank, a low one is a hairline —
 | so a list of fifteen does not read as fifteen equal emergencies.
 | ---------------------------------------------------------------------------*/
.findings { display: flex; flex-direction: column; gap: var(--gap-card); }
.finding {
  border: 1px solid var(--rule); border-left: 3px solid var(--rule-2);
  border-radius: var(--r-lg); background: var(--paper); padding: var(--s-5) var(--s-6);
  scroll-margin-top: 92px;
}
.finding.is-critical { border-left-color: var(--poor); }
.finding.is-high     { border-left-color: var(--fair); }
.finding.is-medium   { border-left-color: var(--rule-2); }
.finding.is-low      { border-left-color: var(--rule); background: var(--paper-2); }

.finding-head { display: grid; grid-template-columns: 42px 1fr; gap: var(--s-4); align-items: start; }
.finding-n {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md);
  color: var(--slate-3); line-height: 1.35; font-variant-numeric: tabular-nums;
}
.finding.is-critical .finding-n { color: var(--poor); }
.finding.is-high .finding-n     { color: var(--fair); }
.finding-title { margin: 0 0 var(--s-3); font-size: var(--fs-lg); line-height: 1.32; }
.finding.is-low .finding-title { font-size: var(--fs-md); color: var(--ink-3); }

.finding-body { margin-top: var(--s-4); padding-left: calc(42px + var(--s-4)); }

/* The two-column definition layout is what makes this read as a report rather
   than as a stack of paragraphs: the question is always in the same place. */
.fb-row { display: grid; grid-template-columns: 124px 1fr; gap: var(--s-5); padding: var(--s-3) 0; border-top: 1px solid var(--rule); }
.fb-row:first-child { border-top: 0; padding-top: 0; }
.fb-k {
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-micro);
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate-2); padding-top: 3px;
}
.fb-v { min-width: 0; }
.fb-v p { margin: 0; font-size: var(--fs-sm); line-height: 1.65; color: var(--slate); }
.fb-v ol, .fb-v ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.fb-v li { font-size: var(--fs-sm); line-height: 1.6; color: var(--slate); padding-left: 3px; }
.fb-v .fb-note { margin-top: 8px; font-size: var(--fs-xs); color: var(--slate-2); }

.evidence {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-sm); line-height: 1.6;
  color: var(--ink-3); background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 10px 13px;
}
.evidence + .evidence { margin-top: 8px; }

/* Progressive disclosure. One control, one arrow, never a mystery meat link. */
.disclose { margin-top: var(--s-3); }
.disclose > summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .04em; color: var(--slate-2); list-style: none;
  padding: 5px 0;
}
.disclose > summary::-webkit-details-marker { display: none; }
.disclose > summary::before {
  content: ""; width: 0; height: 0; border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform .18s ease;
}
.disclose[open] > summary::before { transform: rotate(90deg); }
.disclose > summary:hover { color: var(--accent-ink); }
.disclose-body { padding-top: var(--s-3); overflow-x: auto; }

/* The reveal for the rest of the plan. */
.reveal-more {
  display: inline-flex; align-items: center; gap: 10px;
  margin: var(--gap-card) auto 0;
  background: var(--paper); border: 1px dashed var(--rule-2); color: var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-sm);
  padding: 11px 20px; border-radius: var(--r); transition: border-color .18s, background .18s;
}
.reveal-more:hover { border-color: var(--accent); background: var(--accent-wash); }
.reveal-more .rm-n {
  display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px;
  background: var(--ink); color: #fff; font-size: var(--fs-xs); border-radius: var(--r-sm);
}

/* One control, two states. It exists so the default view can hide more, not
   less: with the depth reliably one click away, the report can stay closed for
   the owner who wants an instruction, while the agency and the freelancer who
   need the evidence are never more than that click from all of it. */
.detail-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  margin: var(--s-5) auto 0; background: none; border: 1px solid var(--rule);
  padding: 8px 16px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xs);
  color: var(--slate-2); transition: color .18s, border-color .18s;
}
.detail-toggle:hover { color: var(--accent-ink); border-color: var(--accent-line); }
body.show-all .finding.is-extra { display: block; }
body.show-all .disclose:not([open]) > .disclose-body { display: revert; }

/* -----------------------------------------------------------------------------
 | The six categories
 |
 | A summary table, not six competing cards. Each row answers its own question,
 | states its score three ways, and hides the check-by-check detail behind one
 | disclosure.
 | ---------------------------------------------------------------------------*/
.pillars { border-top: 1px solid var(--rule); }
.pillar { border-bottom: 1px solid var(--rule); padding: var(--s-5) 0; }
.pillar-head { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4); align-items: baseline; }
.pillar-name { margin: 0; font-size: var(--fs-lg); letter-spacing: -.015em; }
.pillar-score { text-align: right; white-space: nowrap; }
.pillar-num { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.pillar-word { font-size: var(--fs-xs); font-weight: 700; margin-left: 6px; }
.pillar-q { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--slate-2); }
.pillar .meter { margin: var(--s-3) 0 var(--s-3); }
.pillar-foot {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--slate-2);
}
.pillar-only { color: var(--good); font-weight: 600; }
.pillar-partial {
  margin: 0 0 var(--s-3); font-size: var(--fs-xs); line-height: 1.6; color: var(--slate-2);
  background: var(--paper-2); border-radius: var(--r-sm); padding: 9px 12px;
}

.check-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.check-table th { text-align: left; font-weight: 550; color: var(--ink); padding: 8px 12px 8px 0; }
.check-table td { padding: 8px 0 8px 12px; vertical-align: middle; color: var(--slate-2); }
.check-table tr + tr th, .check-table tr + tr td { border-top: 1px solid var(--rule); }
.check-val { overflow-wrap: anywhere; }
.check-rate { text-align: right; width: 1%; white-space: nowrap; }
/* A three-column table does not fit a phone, and a table that scrolls sideways
   inside a report is a table nobody reads. On a narrow column the same rows are
   stacked: the check, then what we found, with the rating pinned to the right. */
@container rpt (max-width: 520px) {
  .check-table, .check-table tbody, .check-table tr, .check-table th, .check-table td { display: block; }
  .check-table tr { position: relative; padding: 11px 0; border-top: 1px solid var(--rule); }
  .check-table tr:first-child { border-top: 0; padding-top: 0; }
  .check-table tr + tr th, .check-table tr + tr td { border-top: 0; }
  .check-table th { padding: 0 82px 3px 0; }
  .check-table td.check-val { padding: 0 82px 0 0; }
  .check-table td.check-rate { position: absolute; top: 11px; right: 0; width: auto; padding: 0; }
  .check-table tr:first-child td.check-rate { top: 0; }
}
.rate-pill {
  display: inline-block; font-size: var(--fs-micro); font-weight: 700;
  padding: 3px 8px; border-radius: var(--r-sm);
}
.rate-good { background: var(--good-wash); color: var(--good); }
.rate-warn { background: var(--fair-wash); color: var(--fair); }
.rate-bad  { background: var(--poor-wash); color: var(--poor); }
.rate-muted{ background: var(--paper-3);   color: var(--slate-2); }

/* Lighthouse's own numbers, shown only where Google actually ran. */
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-card); margin-bottom: var(--s-5); }
.metric {
  border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s-4);
  background: var(--paper);
}
.metric-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.metric-label { font-size: var(--fs-micro); letter-spacing: .08em; text-transform: uppercase; color: var(--slate-2); font-weight: 700; }
.metric-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dot-good { background: var(--good-fill); } .dot-warn { background: var(--fair-fill); }
.dot-bad  { background: var(--poor-fill); } .dot-muted { background: var(--slate-3); }
.metric-val { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-xl); margin: 6px 0 3px; }
.val-good { color: var(--good); } .val-warn { color: var(--fair); }
.val-bad  { color: var(--poor); } .val-muted { color: var(--slate-2); }
.metric-desc { margin: 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--slate-2); }

/* -----------------------------------------------------------------------------
 | Hand-off, sharing, feedback, closing action
 | ---------------------------------------------------------------------------*/
.handoff {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-5);
  justify-content: space-between;
  border: 1px solid var(--rule-2); border-radius: var(--r-lg);
  background: var(--paper-2); padding: var(--s-6);
  margin-top: var(--gap-block);
}
.handoff-body { flex: 1; min-width: 260px; }
.handoff h3 { margin: 0 0 5px; font-size: var(--fs-md); }
.handoff p  { margin: 0; font-size: var(--fs-sm); color: var(--slate-2); line-height: 1.6; }
.handoff-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.share { margin-top: var(--gap-card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-6); }
.share h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.share p { margin: 0 0 var(--s-5); font-size: var(--fs-sm); color: var(--slate-2); }
.share-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.sbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 14px; border-radius: var(--r);
  background: var(--paper); border: 1px solid var(--rule-2); color: var(--ink);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  -webkit-appearance: none; appearance: none; cursor: pointer;
  transition: background .18s, border-color .18s, color .18s;
}
.sbtn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.sbtn:hover { border-color: var(--ink); background: var(--paper-2); }
.sbtn-primary { background: var(--ink); border-color: var(--ink); color: #fff; }
.sbtn-primary:hover { background: var(--ink-3); border-color: var(--ink-3); color: #fff; }

.rpt-feedback { margin-top: var(--gap-card); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: var(--s-6); text-align: center; }
.rf-q { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink); }
.rf-sub { margin: 4px 0 var(--s-5); font-size: var(--fs-sm); color: var(--slate-2); }
.rf-buttons { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rf-btn {
  background: var(--paper); border: 1px solid var(--rule-2); border-radius: var(--r);
  padding: 10px 20px; font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--ink);
  transition: border-color .16s, color .16s, background .16s;
}
.rf-btn:hover { border-color: var(--ink); }
.rf-btn.sel { background: var(--ink); border-color: var(--ink); color: #fff; }
.rf-follow { max-width: 480px; margin: var(--s-5) auto 0; text-align: left; }
.rf-follow label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.rf-follow textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--rule-2); border-radius: var(--r);
  background: var(--paper); color: var(--ink); padding: 11px 13px; font: inherit;
  font-size: var(--fs-sm); line-height: 1.55; resize: vertical; margin-bottom: 10px;
}
.rf-follow textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(228, 87, 31, .32); }
.rf-thanks { margin-top: 6px; font-size: var(--fs-sm); color: var(--good); font-weight: 600; }

.rpt-cta {
  margin-top: var(--gap-card); scroll-margin-top: 92px;
  border: 1px solid var(--rule-2); border-radius: var(--r-lg);
  background: var(--ink); color: #B9C8D7; padding: var(--s-8) var(--s-6); text-align: center;
}
.rpt-cta h2 { color: #fff; font-size: var(--fs-2xl); margin-bottom: var(--s-3); }
.rpt-cta p { max-width: 46ch; margin: 0 auto var(--s-6); font-size: var(--fs-sm); color: #A9BCCE; }
.rpt-cta .btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
#fix-it:target { box-shadow: 0 0 0 3px var(--accent-line); }

/* -----------------------------------------------------------------------------
 | Landing-page report preview
 |
 | The same components, at reduced scale, inside a labelled frame. It is a real
 | fragment of the product, not a picture of a dashboard — which is the point:
 | anything that looks wrong here is wrong in the report too.
 | ---------------------------------------------------------------------------*/
.preview-frame {
  border: 1px solid var(--rule-2); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow); overflow: hidden;
}
.preview-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--paper-2); border-bottom: 1px solid var(--rule);
  font-size: var(--fs-xs); color: var(--slate-2);
}
.preview-bar .pb-tag {
  font-family: var(--font-display); font-weight: 700; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent-wash); border-radius: var(--r-sm); padding: 3px 8px;
}
.preview-body { padding: var(--s-6); }
.preview-body .rpt { --gap-block: 30px; }
.preview-body .score-panel { box-shadow: none; }

/* ---------- Responsive ---------- */
@container rpt (max-width: 640px) {
  .score-panel { grid-template-columns: 1fr; }
  .score-figure {
    border-right: 0; border-bottom: 1px solid var(--rule);
    flex-direction: row; align-items: baseline; gap: var(--s-4); flex-wrap: wrap;
    /* justify-content:center is right for the column layout and wrong here: it
       centred the score against a left-aligned sentence directly below it. */
    justify-content: flex-start;
  }
  .score-word { margin-top: 0; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}
/* The narrowest band is 11% of the track, which stops holding a nine-letter
   word somewhere under 470px. Below that only the reader's own band is
   printed, left-aligned under the track — the other four were never the point.
   Hidden rather than shrunk: 8px type is not a smaller label, it is no label. */
@container rpt (max-width: 430px) {
  .score-ticks { display: block; }
  .score-tick:not(.on) { display: none; }
  .score-tick.on { text-align: left; }
}
@media (max-width: 820px) {
  .score-panel { grid-template-columns: 1fr; }
  .score-figure { border-right: 0; border-bottom: 1px solid var(--rule); flex-direction: row; align-items: baseline; gap: var(--s-4); flex-wrap: wrap; justify-content: flex-start; }
  .score-word { margin-top: 0; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .fb-row { grid-template-columns: 1fr; gap: 6px; }
  .fb-k { padding-top: 0; }
}
@media (max-width: 620px) {
  .rpt { --gap-block: 38px; }
  .consult { padding: var(--s-5); }
  .fixfirst { padding: var(--s-5); }
  .finding { padding: var(--s-4) var(--s-5); }
  .finding-head { grid-template-columns: 34px 1fr; gap: var(--s-3); }
  .finding-body { padding-left: 0; }
  .plan a { grid-template-columns: 32px 1fr; gap: var(--s-3); padding: 12px 4px; }
  /* Stacked under the title, the chips read as a caption of it. Right-aligned
     they floated against the far edge with nothing to align to. */
  .plan-side { grid-column: 2; grid-template-columns: auto auto; justify-items: start; justify-content: start; gap: 10px; margin-top: 5px; }
  .metric-grid { grid-template-columns: 1fr 1fr; }
  .share-grid { grid-template-columns: 1fr 1fr; }
  .handoff { padding: var(--s-5); }
  .handoff .btn { width: 100%; }
  .preview-body { padding: var(--s-4); }
  .rpt-masthead .rpt-when { margin-left: 0; width: 100%; }
}

/* =============================================================================
   The PDF
   -----------------------------------------------------------------------------
   Printing this page is how an agency produces a client deliverable, so the
   printed document is designed rather than inherited: a cover block with the
   subject, the date and the score; the site chrome and every interactive
   control removed; a running footer that repeats on each sheet; and explicit
   rules about what may and may not be split across a page break.

   Two things browsers will not do, whatever the CSS says:

     A <details> cannot be forced open by CSS alone, so report.php opens every
     one of them on beforeprint and closes them again afterwards.

     Page numbers cannot be generated. @page margin boxes — the only place
     `counter(page)` resolves — are not implemented in Chrome or Edge, and a
     position:fixed running footer, which Chromium does repeat per page, lands
     at the top of the page box and prints straight through the heading under
     it. Chrome's own print dialog adds page numbers by default, so the
     capability is there; it is simply not ours to control. What we can do is
     end the document deliberately, which is what .pdf-end is for.
   ========================================================================== */
.pdf-cover, .pdf-end { display: none; }

@media print {
  @page { margin: 15mm 14mm 18mm; }

  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  html, body { background: #fff !important; }
  body { font-size: 10.5pt; line-height: 1.5; }

  /* Site chrome and anything that only exists to be clicked. The "Get it
     fixed" chip goes with them: it points at a call to action that is itself
     hidden here, so on paper it is a dead link — and an agency forwarding this
     to a client does not need our sales pitch on every finding. Who the fix is
     for is already stated by the effort chip beside it. */
  .site-header, .site-footer, .skip-link, .no-print,
  .share, .rpt-feedback, .rpt-cta, .handoff, .detail-toggle,
  .reveal-more, a.f-chip-dev, #shareCanvas { display: none !important; }

  .section { padding: 0 !important; }
  .rpt { max-width: 100% !important; --gap-block: 22px; --gap-card: 10px; }

  /* --- Cover ---------------------------------------------------------------
     A deliverable opens by saying what it is. Everything on this block is a
     fact already on the page; nothing is composed for print. */
  .pdf-cover { display: block !important; page-break-after: always; break-after: page; }
  .pdf-cover .pc-rule { height: 4px; background: #0C1B2A; margin-bottom: 26px; }
  .pdf-cover .pc-brand { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 700; font-size: 15pt; color: #0C1B2A; }
  .pdf-cover .pc-kind { margin-top: 84px; font-family: var(--font-display); font-size: 9pt; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #B33F10; }
  .pdf-cover .pc-subject { font-family: var(--font-display); font-weight: 700; font-size: 30pt; line-height: 1.1; letter-spacing: -.03em; color: #0C1B2A; margin: 8px 0 6px; word-break: break-word; }
  .pdf-cover .pc-when { font-size: 10pt; color: #66798D; }
  .pdf-cover .pc-score { margin-top: 46px; padding-top: 22px; border-top: 1px solid #CBD6E1; display: flex; align-items: flex-end; gap: 18px; }
  .pdf-cover .pc-num { font-family: var(--font-display); font-weight: 700; font-size: 56pt; line-height: .85; letter-spacing: -.04em; }
  .pdf-cover .pc-meta { padding-bottom: 6px; }
  .pdf-cover .pc-grade { font-family: var(--font-display); font-weight: 700; font-size: 15pt; }
  .pdf-cover .pc-outof { font-size: 10pt; color: #66798D; }
  .pdf-cover .pc-verdict { margin-top: 26px; padding: 16px 18px; background: #FDF2EC; border-left: 3px solid #E4571F; font-size: 11pt; line-height: 1.55; color: #7A3210; }
  .pdf-cover .pc-foot { margin-top: 40px; font-size: 9pt; line-height: 1.6; color: #66798D; border-top: 1px solid #E2E8EF; padding-top: 14px; }

  /* --- Colophon ------------------------------------------------------------
     A printed stack has to say what it is when it is separated from its cover,
     and this is the place we can reliably put that. */
  .pdf-end {
    display: block !important;
    margin-top: 26px; padding-top: 12px; border-top: 2px solid #0C1B2A;
    font-size: 8.5pt; line-height: 1.6; color: #66798D;
    break-inside: avoid; page-break-inside: avoid;
  }
  .pdf-end strong { color: #0C1B2A; }

  /* --- Body ---------------------------------------------------------------- */
  .rpt-masthead { border-bottom-width: 2px; }
  .score-panel, .verdict, .consult, .fixfirst, .finding, .handoff, .metric, .rpt-notice {
    box-shadow: none !important;
  }
  .score-panel { border: 1px solid #CBD6E1; }
  .score-figure { background: #F6F8FB; }

  /* Everything collapsed on screen prints open. A PDF that hides half its
     content behind a control nobody can click is worthless. */
  .disclose > summary { display: none !important; }
  .disclose > .disclose-body { display: block !important; padding-top: 6px; }
  .finding.is-extra { display: block !important; }

  /* Break rules. Small things stay whole; anything that can be taller than a
     page is allowed to run on, because refusing to split something that cannot
     fit only pushes a break in front of it and leaves the previous sheet half
     empty. That is exactly what "keep the pillar together" did: the Speed row,
     with its six metric tiles and an eleven-row check table, left a page
     holding nothing but a heading and a notice. */
  .score-panel, .verdict, .rpt-notice,
  .metric, .consult-part, .plan li, .check-table tr { break-inside: avoid; page-break-inside: avoid; }
  .finding, .pillar, .fixfirst { break-inside: auto; page-break-inside: auto; }
  .finding-head, .fb-row, .pillar-head, .fixfirst-lbl + .f-chips { break-inside: avoid; page-break-inside: avoid; }
  .pillar-head, .fixfirst h3 { break-after: avoid; page-break-after: avoid; }
  h2, h3, .rpt-section-head { break-after: avoid; page-break-after: avoid; break-inside: avoid; }
  .rpt-section-head + * { break-before: avoid; page-break-before: avoid; }
  .rpt-section { margin-top: 22px; }

  a { color: inherit !important; text-decoration: none !important; }
  .metric-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .check-table { font-size: 9.5pt; }
}