/* =====================================================================
   WEBSITE QA TOOL — /tools/website-qa/
   The forest hero and URL bar sit on the screenshot tool's system
   (.main--tool, .st-*). The report is one paper sheet that rises out of
   the forest: header, score overview, a sticky contents rail, then each
   section as a chapter divided by hairlines (no stacked cards).
   ===================================================================== */

.qa-page {
  --qa-paper: #FBFBF8;          /* report sheet                 */
  --qa-panel: #F2F4EF;          /* second neutral, green-tinted */
  --qa-ink: #16201A;            /* primary text on paper        */
  --qa-muted: #5A665D;          /* secondary text (5.9:1)       */
  --qa-faint: #7C877F;          /* tertiary labels              */
  --qa-line: #E3E7E0;           /* hairlines                    */
  --qa-hover: #F3F5F0;

  --qa-fail: #B42318;  --qa-fail-bg: #FDECEA;
  --qa-warn: #A04B05;  --qa-warn-bg: #FDF1E3;  --qa-warn-mark: #DC6803;
  --qa-pass: #2F6B2A;  --qa-pass-bg: #E5F1E2;
  --qa-info: #475467;  --qa-info-bg: #EEF1F4;

  --qa-good: #2F6B2A;           /* score 90–100 */
  --qa-ok: #B54708;             /* score 50–89  */
  --qa-bad: #B42318;            /* score 0–49   */

  --qa-ease: cubic-bezier(.22, 1, .36, 1);
  --qa-sheet-shadow: 0 40px 90px rgba(3,9,5,.45), 0 8px 24px rgba(3,9,5,.25);
  --qa-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ---------------------------------------------------------------------
   URL bar: solid and crisp instead of frosted glass
   --------------------------------------------------------------------- */
.qa-tool { max-width: 780px; margin-inline: auto; width: 100%; }
.main--tool.qa-page .st-bar {
  background: var(--qa-paper);
  border: 1px solid rgba(255,255,255,.9);
  border-radius: 16px;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(3,9,5,.45), 0 2px 6px rgba(3,9,5,.2);
}
.main--tool.qa-page .st-bar::before { display: none; }
.main--tool.qa-page .st-bar:focus-within {
  border-color: #fff;
  box-shadow: 0 24px 60px rgba(3,9,5,.45), 0 0 0 4px rgba(188,217,168,.45);
}
.qa-page .st-bar input[type="url"] { font-size: 16px; color: var(--qa-ink); padding-block: 16px; }
.qa-page .st-bar input::placeholder { color: var(--qa-faint); opacity: 1; }
.qa-page .st-bar .st-input-wrap > svg { color: var(--qa-faint); }

/* Colour sweep on hover, no lift (house rule for buttons) */
.qa-page .st-bar .qa-run {
  border-radius: 10px; padding: 0 22px; min-height: 52px; font-size: 15px;
  background-image: linear-gradient(110deg, #5f8455 0%, #44603c 48%, #2c4227 100%);
  background-size: 220% 100%; background-position: 0 0;
  box-shadow: none;
  transition: background-position .4s var(--qa-ease);
}
.qa-page .st-bar .qa-run:hover { transform: none; box-shadow: none; background-position: 100% 0; }
.qa-page .st-bar .qa-run:active { filter: brightness(.94); }
.qa-run[disabled] { cursor: progress; }
.qa-run[disabled] svg { animation: qa-pulse 1.2s ease-in-out infinite; }
@keyframes qa-pulse { 50% { opacity: .35; } }

.qa-note { margin-top: 14px; text-align: center; font-size: 13.5px; color: rgba(255,255,255,.82); }

/* ---------------------------------------------------------------------
   The sheet
   --------------------------------------------------------------------- */
.qa-out { max-width: 1120px; margin: 40px auto 56px; }
.qa-sheet {
  background: var(--qa-paper); color: var(--qa-ink);
  border-radius: 22px; box-shadow: var(--qa-sheet-shadow);
  overflow: clip;              /* not hidden: that would stop the contents rail sticking */
}
.qa-pad { padding: 40px 48px; }

.qa-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--qa-faint); display: flex; align-items: center; gap: 8px;
}
.qa-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.qa-sheet h2, .qa-sheet h3 { color: var(--qa-ink); }

/* ---- Empty state: what the report covers ---- */
.qa-cover { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 56px; }
.qa-cover h2 { font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; margin: 14px 0 12px; }
.qa-cover > div > p { font-size: 15px; line-height: 1.6; color: var(--qa-muted); }
.qa-cover ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; counter-reset: cover; }
.qa-cover li { padding: 18px 0 20px; border-top: 1px solid var(--qa-line); counter-increment: cover; display: grid; grid-template-columns: 34px minmax(0, 1fr); }
.qa-cover li::before { content: counter(cover, decimal-leading-zero); font: 600 13px/1.6 var(--display); color: var(--accent); font-variant-numeric: tabular-nums; }
.qa-cover li b { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.qa-cover li span { font-size: 14px; line-height: 1.55; color: var(--qa-muted); }

/* ---- Header ---- */
.qa-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 28px; border-bottom: 1px solid var(--qa-line); }
.qa-domain { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; margin-top: 10px; overflow-wrap: anywhere; }
.qa-meta { margin-top: 8px; font-size: 14px; color: var(--qa-muted); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.qa-meta a { color: var(--qa-muted); text-decoration: underline; text-decoration-color: var(--qa-line); text-underline-offset: 3px; overflow-wrap: anywhere; }
.qa-meta a:hover { color: var(--qa-ink); text-decoration-color: currentColor; }

.qa-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.qa-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  font: 600 13.5px var(--sans); color: var(--qa-ink); cursor: pointer;
  background: #fff; border: 1px solid var(--qa-line); border-radius: 10px;
  transition: background-color .2s, border-color .2s;
}
.qa-btn svg { width: 16px; height: 16px; color: var(--qa-muted); }
.qa-btn:hover { background: var(--qa-hover); border-color: #D3D9CF; }
.qa-btn:focus-visible, .qa-sheet a:focus-visible, .qa-sheet summary:focus-visible, .qa-tabs button:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---- Progress ---- */
.qa-progress { padding: 26px 0 4px; }
.qa-progress ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.qa-progress li { display: grid; align-content: start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--qa-ink); }
.qa-progress li small { display: block; color: var(--qa-muted); font-size: 12px; margin-top: 2px; }
.qa-step-bar { height: 3px; border-radius: 3px; background: var(--qa-line); overflow: hidden; position: relative; }
.qa-step-bar::after { content: ""; position: absolute; inset: 0; border-radius: inherit; transform-origin: left; transform: scaleX(0); background: var(--accent); }
.is-done .qa-step-bar::after { transform: scaleX(1); }
.is-run .qa-step-bar::after { width: 35%; transform: none; animation: qa-slide 1.3s cubic-bezier(.65, 0, .35, 1) infinite; }
.is-fail .qa-step-bar::after, .is-skip .qa-step-bar::after { transform: scaleX(1); background: #CDD3C9; }
.is-wait { color: var(--qa-faint); }
@keyframes qa-slide { from { transform: translateX(-100%); } to { transform: translateX(300%); } }

/* ---- Error ---- */
.qa-error { padding: 32px 0 4px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 16px; max-width: 720px; }
.qa-error-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--qa-fail-bg); color: var(--qa-fail); }
.qa-error-ico svg { width: 16px; height: 16px; }
.qa-error h3 { font-family: var(--display); font-size: 20px; letter-spacing: -0.015em; margin-bottom: 6px; }
.qa-error p { font-size: 15px; line-height: 1.6; color: var(--qa-muted); }

/* ---- Overview: grade + breakdown ---- */
.qa-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; padding: 36px 0 40px; align-items: center; }
.qa-grade-row { display: flex; align-items: center; gap: 22px; }
.qa-grade-num { font-family: var(--display); font-size: 88px; font-weight: 700; letter-spacing: -0.05em; line-height: .85; font-variant-numeric: tabular-nums; flex: none; }
.qa-grade-num small { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--qa-faint); margin-left: 4px; }
.qa-verdict { font-family: var(--display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.qa-grade-sub { margin-top: 18px; font-size: 15px; line-height: 1.6; color: var(--qa-muted); max-width: 46ch; }
.qa-sevbar { display: flex; gap: 3px; height: 10px; margin-top: 24px; }
.qa-sevbar span { border-radius: 3px; min-width: 6px; }
.qa-sevbar .f { background: var(--qa-fail); }
.qa-sevbar .w { background: var(--qa-warn-mark); }
.qa-sevbar .p { background: #9DBE93; }
.qa-legend { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 13.5px; color: var(--qa-muted); }
.qa-legend li { display: flex; align-items: center; gap: 8px; }
.qa-legend b { color: var(--qa-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.qa-legend i { width: 8px; height: 8px; border-radius: 2px; }
.qa-legend .f i { background: var(--qa-fail); }
.qa-legend .w i { background: var(--qa-warn-mark); }
.qa-legend .p i { background: #9DBE93; }
.qa-note-line { margin-top: 20px; font-size: 13px; line-height: 1.55; color: var(--qa-muted); padding: 10px 14px; border-radius: 10px; background: var(--qa-panel); }

.qa-breakdown { display: grid; align-content: start; }
.qa-brow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(60px, 140px) 44px; align-items: center; gap: 18px;
  padding: 13px 10px; margin: 0 -10px; border-radius: 10px; border-bottom: 1px solid var(--qa-line);
  color: var(--qa-ink); transition: background-color .2s;
}
.qa-brow:last-child { border-bottom: 0; }
.qa-brow:hover { background: var(--qa-hover); }
.qa-brow-name { font-weight: 600; font-size: 15px; }
.qa-brow-name small { display: block; font-weight: 400; font-size: 13px; color: var(--qa-muted); margin-top: 1px; }
.qa-meter { height: 6px; border-radius: 6px; background: #E8ECE5; overflow: hidden; }
.qa-meter span { display: block; height: 100%; border-radius: inherit; transition: width .5s var(--qa-ease); }
.qa-brow-score { font-family: var(--display); font-size: 20px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.qa-brow-score.pending { color: var(--qa-faint); font-size: 15px; }
.s-good { color: var(--qa-good); } .s-ok { color: var(--qa-ok); } .s-bad { color: var(--qa-bad); } .s-none { color: var(--qa-faint); }
.bg-good { background: var(--qa-good); } .bg-ok { background: #DC6803; } .bg-bad { background: var(--qa-bad); }

/* ---- Body: contents rail + chapters ---- */
.qa-body { display: grid; grid-template-columns: 188px minmax(0, 1fr); gap: 56px; border-top: 1px solid var(--qa-line); }
.qa-toc { position: sticky; top: 24px; align-self: start; padding-top: 38px; }
.qa-toc p { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--qa-faint); margin-bottom: 10px; }
.qa-toc a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 10px; margin: 0 -10px; border-radius: 8px;
  font-size: 14px; color: var(--qa-muted); transition: background-color .2s, color .2s;
}
.qa-toc a:hover { background: var(--qa-hover); color: var(--qa-ink); }
.qa-toc a span { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 6px; display: grid; place-items: center; }
.qa-toc a span.has-fail { background: var(--qa-fail-bg); color: var(--qa-fail); }
.qa-toc a span.has-warn { background: var(--qa-warn-bg); color: var(--qa-warn); }
.qa-toc a span.clear { background: var(--qa-pass-bg); color: var(--qa-pass); }
.qa-toc a span svg { width: 10px; height: 10px; }

.qa-chapters { min-width: 0; }
.qa-chapter { padding: 44px 0 20px; scroll-margin-top: 16px; }
.qa-chapter:last-child { padding-bottom: 8px; }
.qa-chapter-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: start; margin-bottom: 24px; }
.qa-chapter-head h3 { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.025em; line-height: 1.2; display: flex; align-items: baseline; gap: 12px; }
.qa-chapter-head h3 i { font-style: normal; font: 600 13px var(--display); color: var(--qa-faint); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.qa-chapter-head p { grid-column: 1; font-size: 14.5px; color: var(--qa-muted); line-height: 1.55; }
.qa-chapter-score { grid-row: 1 / span 2; grid-column: 2; text-align: right; }
.qa-chapter-score b { display: block; font-family: var(--display); font-size: 36px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.qa-chapter-score small { display: block; margin-top: 6px; font-size: 12.5px; color: var(--qa-muted); white-space: nowrap; }

/* ---- Fix first ---- */
.qa-fixlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--qa-line); }
.qa-fixlist li { border-bottom: 1px solid var(--qa-line); }
.qa-fixlist a {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 160px; gap: 16px; align-items: baseline;
  padding: 16px 12px; margin: 0 -12px; border-radius: 10px;
  color: var(--qa-ink); transition: background-color .2s;
}
.qa-fixlist a:hover { background: var(--qa-hover); }
.qa-fix-n { font: 600 14px var(--display); color: var(--qa-faint); font-variant-numeric: tabular-nums; }
.qa-fixlist strong { display: block; font-size: 15.5px; font-weight: 600; line-height: 1.4; }
.qa-fixlist .d { display: block; margin-top: 3px; font-size: 14px; line-height: 1.5; color: var(--qa-muted); overflow-wrap: anywhere; }
.qa-fix-meta { display: grid; gap: 4px; justify-items: end; text-align: right; font-size: 12.5px; color: var(--qa-muted); }
.qa-sev { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.qa-sev::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.qa-sev.fail { color: var(--qa-fail); }
.qa-sev.warn { color: var(--qa-warn); }
.qa-all-clear { font-size: 15px; color: var(--qa-muted); padding: 16px 0; border-top: 1px solid var(--qa-line); }

/* ---- Site details ---- */
.qa-site { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.qa-facts { display: grid; grid-template-columns: 110px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--qa-line); font-size: 14px; }
.qa-facts dt, .qa-facts dd { padding: 11px 0; border-bottom: 1px solid var(--qa-line); margin: 0; }
.qa-facts dt { color: var(--qa-muted); }
.qa-facts dd { overflow-wrap: anywhere; line-height: 1.5; }
.qa-facts dd a { color: var(--qa-ink); text-decoration: underline; text-decoration-color: var(--qa-line); text-underline-offset: 3px; }
.qa-facts .muted { color: var(--qa-faint); }
.qa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qa-chip { font-size: 12.5px; line-height: 1; padding: 6px 9px; border-radius: 7px; background: var(--qa-panel); color: var(--qa-ink); }

.qa-shots { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 16px; align-items: end; padding: 22px; border-radius: 16px; background: var(--qa-panel); }
.qa-shot { border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(22,32,26,.08), 0 12px 30px rgba(22,32,26,.12); }
.qa-shot img { display: block; width: 100%; height: auto; }
.qa-shot--phone { border-radius: 16px; box-shadow: 0 0 0 5px #1B231E, 0 14px 30px rgba(22,32,26,.22); margin: 5px; }
.qa-shot-label { font-size: 12px; color: var(--qa-muted); margin-top: 10px; text-align: center; }
.qa-shot-wait { display: grid; place-items: center; min-height: 220px; text-align: center; font-size: 14px; color: var(--qa-muted); padding: 24px; border-radius: 16px; background: var(--qa-panel); }

/* ---- Lighthouse panel ---- */
.qa-lh { border-radius: 16px; background: var(--qa-panel); padding: 20px 22px 22px; margin-bottom: 26px; }
.qa-lh-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.qa-lh-top span { font-size: 13px; color: var(--qa-muted); }
.qa-tabs { display: inline-flex; padding: 3px; border-radius: 10px; background: #E2E7DE; }
.qa-tabs button {
  font: 600 13px var(--sans); min-height: 32px; padding: 0 14px; border-radius: 8px; border: 0; background: transparent;
  color: var(--qa-muted); cursor: pointer; transition: background-color .2s, color .2s;
}
.qa-tabs button[aria-selected="true"] { background: #fff; color: var(--qa-ink); box-shadow: 0 1px 2px rgba(22,32,26,.12); }
.qa-tabs button:disabled { cursor: default; opacity: .6; }
.qa-lh-cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding-bottom: 18px; border-bottom: 1px solid #DDE3D9; }
.qa-lh-cat { display: flex; align-items: center; gap: 12px; font-size: 13.5px; font-weight: 600; }
.qa-ring { position: relative; flex: none; }
.qa-ring svg { display: block; transform: rotate(-90deg); }
.qa-ring b { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.qa-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding-top: 16px; }
.qa-metric { padding: 0 14px; border-left: 1px solid #DDE3D9; }
.qa-metric:first-child { padding-left: 0; border-left: 0; }
.qa-metric span { display: block; font-size: 12.5px; color: var(--qa-muted); }
.qa-metric b { display: flex; align-items: center; gap: 7px; font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-top: 4px; }
.qa-metric b::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.qa-metric.good b { color: var(--qa-good); }
.qa-metric.ok b { color: var(--qa-ok); }
.qa-metric.bad b { color: var(--qa-bad); }
.qa-field { margin-top: 18px; padding-top: 16px; border-top: 1px solid #DDE3D9; font-size: 13px; color: var(--qa-muted); line-height: 1.55; }
.qa-field h4 { font-size: 13px; font-weight: 600; color: var(--qa-ink); margin-bottom: 12px; }
.qa-lh-msg { font-size: 14px; line-height: 1.6; color: var(--qa-muted); }
.qa-inline-wait { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--qa-muted); }

/* ---- Checks ---- */
.qa-checks { border-top: 1px solid var(--qa-line); }
.qa-check { border-bottom: 1px solid var(--qa-line); }
.qa-check > summary, .qa-check > .qa-check-row {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto 18px; gap: 14px; align-items: start;
  padding: 15px 12px; margin: 0 -12px; list-style: none;
}
.qa-check > summary { cursor: pointer; border-radius: 10px; transition: background-color .2s; }
.qa-check > summary:hover { background: var(--qa-hover); }
.qa-check > summary::-webkit-details-marker { display: none; }
.qa-ico { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; margin-top: 1px; }
.qa-ico svg { width: 11px; height: 11px; }
.is-fail .qa-ico { background: var(--qa-fail-bg); color: var(--qa-fail); }
.is-warn .qa-ico { background: var(--qa-warn-bg); color: var(--qa-warn); }
.is-pass .qa-ico { background: var(--qa-pass-bg); color: var(--qa-pass); }
.is-info .qa-ico { background: var(--qa-info-bg); color: var(--qa-info); }
.qa-check-title { display: block; font-weight: 600; font-size: 15px; line-height: 1.45; }
.qa-check-detail { display: block; font-size: 14px; color: var(--qa-muted); line-height: 1.55; margin-top: 2px; overflow-wrap: anywhere; }
.qa-src { font-size: 11.5px; font-weight: 600; color: var(--qa-muted); padding: 3px 7px; border-radius: 6px; background: var(--qa-panel); margin-top: 1px; white-space: nowrap; }
.qa-src:empty { visibility: hidden; padding: 0; }
.qa-chev { width: 18px; height: 18px; margin-top: 2px; color: var(--qa-faint); transition: transform .25s var(--qa-ease); }
.qa-check[open] .qa-chev, .qa-passed[open] .qa-chev { transform: rotate(180deg); }
.qa-check-body { padding: 0 0 18px 38px; font-size: 14px; line-height: 1.65; max-width: 820px; }
.qa-fix { color: var(--qa-ink); }
.qa-fix b { font-weight: 600; }
.qa-check-body a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.qa-check-body code, .qa-check-detail code, .qa-fixlist code { font-family: var(--qa-mono); font-size: .88em; background: var(--qa-panel); padding: 1px 5px; border-radius: 5px; overflow-wrap: anywhere; }
.qa-items { list-style: none; margin: 12px 0 0; padding: 4px 0; border-radius: 10px; background: var(--qa-panel); }
.qa-items li { font-family: var(--qa-mono); font-size: 12.5px; line-height: 1.55; padding: 6px 14px; color: #2B352E; overflow-wrap: anywhere; }
.qa-items li + li { border-top: 1px solid #E3E8DF; }
.qa-items li.more { font-family: var(--sans); color: var(--qa-muted); }

.qa-passed { border-bottom: 1px solid var(--qa-line); }
.qa-passed > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px;
  padding: 14px 12px; margin: 0 -12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: var(--qa-pass); transition: background-color .2s;
}
.qa-passed > summary::-webkit-details-marker { display: none; }
.qa-passed > summary:hover { background: var(--qa-hover); }
.qa-passed ul { list-style: none; margin: 0; padding: 2px 0 16px 28px; columns: 2; column-gap: 32px; }
.qa-passed li { break-inside: avoid; display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; font-size: 13.5px; line-height: 1.5; color: var(--qa-muted); padding: 5px 0; }
.qa-passed li svg { width: 12px; height: 12px; color: var(--qa-pass); margin-top: 4px; }
.qa-passed li b { color: var(--qa-ink); font-weight: 500; }

.qa-wait-row { display: flex; align-items: center; gap: 12px; padding: 15px 0; font-size: 14px; color: var(--qa-muted); border-bottom: 1px solid var(--qa-line); }
.qa-lh-note { padding: 14px 0; font-size: 13.5px; color: var(--qa-muted); border-bottom: 1px solid var(--qa-line); line-height: 1.55; }
.qa-spin { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid var(--qa-line); border-top-color: var(--accent); animation: qa-spin .8s linear infinite; }
@keyframes qa-spin { to { transform: rotate(360deg); } }

/* ---- Other pages table ---- */
.qa-table-wrap { overflow-x: auto; border-top: 1px solid var(--qa-line); }
.qa-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.qa-table td:first-child { min-width: 110px; }
.qa-table th { text-align: left; font-size: 12px; font-weight: 600; color: var(--qa-faint); padding: 12px 12px 10px; border-bottom: 1px solid var(--qa-line); white-space: nowrap; }
.qa-table th:first-child, .qa-table td:first-child { padding-left: 0; }
.qa-table td { padding: 12px; border-bottom: 1px solid var(--qa-line); vertical-align: top; line-height: 1.45; overflow-wrap: anywhere; }
.qa-table td a { color: var(--qa-ink); font-weight: 600; }
.qa-table td a:hover { color: var(--accent); }
.qa-table .bad { color: var(--qa-fail); font-weight: 600; }
.qa-table .meh { color: var(--qa-warn); }
.qa-table .muted { color: var(--qa-faint); }
.qa-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Closing band ---- */
.qa-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
  padding: 36px 48px; background-color: #16201A; color: #fff;
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(110,150,96,.28) 0%, transparent 55%);
}
.qa-cta h3 { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.025em; color: #fff; }
.qa-cta p { margin-top: 6px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.76); max-width: 56ch; }
.qa-cta .btn { min-height: 48px; padding: 0 20px; font-size: 14.5px; border-radius: 10px; }
.qa-page .qa-cta .btn-primary {
  background-image: linear-gradient(110deg, #6f9663 0%, #4f7046 50%, #3a5634 100%);
  background-size: 220% 100%; transition: background-position .4s var(--qa-ease);
}
.qa-page .qa-cta .btn-primary:hover { transform: none; box-shadow: none; background-position: 100% 0; }
.qa-cta .qa-btn { min-height: 48px; background: transparent; color: #fff; border-color: rgba(255,255,255,.28); }
.qa-cta .qa-btn svg { color: rgba(255,255,255,.7); }
.qa-cta .qa-btn:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.5); }

.qa-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 16px); opacity: 0;
  background: #16201A; color: #fff; font-size: 14px; padding: 12px 18px; border-radius: 12px;
  box-shadow: 0 12px 30px rgba(3,9,5,.3);
  transition: opacity .2s, transform .3s var(--qa-ease); pointer-events: none; z-index: 20;
}
.qa-toast.on { opacity: 1; transform: translate(-50%, 0); }

/* ---- Ad unit: a quiet frame below the sheet ---- */
.qa-ad { max-width: 1120px; margin: -24px auto 56px; padding: 14px 18px 18px; border-radius: 18px; background: rgba(251,251,248,.94); box-shadow: 0 20px 50px rgba(3,9,5,.3); }
.qa-ad[hidden] { display: none; }
/* Waiting on Google: keeps its width for AdSense, takes no visible space */
.qa-ad.is-pending { visibility: hidden; height: 0; padding: 0; margin-block: 0; overflow: hidden; box-shadow: none; }
.qa-ad-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--qa-faint); margin-bottom: 10px; }
.qa-ad ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }

/* ---- Guide below the tool: long-form help on the same paper ---- */
.qa-guide { max-width: 1120px; margin: 0 auto 56px; }
.qa-guide .qa-pad { max-width: 820px; margin-inline: auto; }
.qa-guide-head h2 { font-family: var(--display); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 12px 0 16px; }
.qa-guide p, .qa-guide li { font-size: 16px; line-height: 1.7; color: #2B352E; }
.qa-guide p + p { margin-top: 12px; }
.qa-guide-sec { padding-top: 40px; margin-top: 40px; border-top: 1px solid var(--qa-line); }
.qa-guide-sec h2 { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.025em; margin-bottom: 14px; }
.qa-guide-sec h3 { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.015em; margin: 26px 0 8px; }
.qa-guide-sec h2 + h3 { margin-top: 8px; }
.qa-guide ul, .qa-guide ol { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 8px; }
.qa-guide li::marker { color: var(--accent); font-weight: 600; }
.qa-guide b { font-weight: 600; color: var(--qa-ink); }
.qa-guide a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.qa-guide code { font-family: var(--qa-mono); font-size: .88em; background: var(--qa-panel); padding: 1px 5px; border-radius: 5px; }
.qa-faq-item { border-bottom: 1px solid var(--qa-line); }
.qa-faq-item:first-of-type { border-top: 1px solid var(--qa-line); margin-top: 4px; }
.qa-faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 16px 0; font-weight: 600; font-size: 16px; color: var(--qa-ink);
}
.qa-faq-item summary::-webkit-details-marker { display: none; }
.qa-faq-item summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--accent); transition: transform .25s var(--qa-ease); }
.qa-faq-item[open] summary::after { transform: rotate(45deg); }
.qa-faq-item p { padding: 0 0 18px; }
.qa-guide-more { margin-top: 36px; padding: 16px 18px; border-radius: 12px; background: var(--qa-panel); font-size: 15px !important; }
@media (max-width: 600px) {
  .qa-guide-head h2 { font-size: 26px; }
  .qa-guide-sec { padding-top: 32px; margin-top: 32px; }
  .qa-guide p, .qa-guide li { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-run .qa-step-bar::after, .qa-spin, .qa-run[disabled] svg { animation: none; }
}

/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .qa-body { grid-template-columns: 1fr; gap: 0; }
  .qa-toc { display: none; }
  .qa-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 14px; }
  .qa-metric:nth-child(4) { padding-left: 0; border-left: 0; }
}
@media (max-width: 930px) {
  .qa-pad { padding: 32px 28px; }
  .qa-cta { padding: 32px 28px; }
  .qa-cover, .qa-overview, .qa-site { grid-template-columns: 1fr; gap: 32px; }
  .qa-progress ol { grid-template-columns: 1fr; gap: 12px; }
  .qa-progress li { grid-template-columns: 56px minmax(0, 1fr); align-items: center; }
  .qa-head { flex-direction: column; align-items: flex-start; }
  .qa-table { min-width: 680px; }
}
@media (max-width: 600px) {
  .qa-out { margin-top: 28px; }
  .qa-sheet { border-radius: 18px; }
  .qa-pad { padding: 24px 18px; }
  .qa-cta { padding: 28px 18px; }
  .qa-cover ol { grid-template-columns: 1fr; }
  .qa-domain { font-size: 26px; }
  .qa-grade-num { font-size: 68px; }
  .qa-brow { grid-template-columns: minmax(0, 1fr) 56px 38px; gap: 12px; }
  .qa-chapter { padding: 36px 0 12px; }
  .qa-chapter-head h3 { font-size: 21px; }
  .qa-chapter-score b { font-size: 30px; }
  .qa-fixlist a { grid-template-columns: 28px minmax(0, 1fr); }
  .qa-fix-meta { grid-column: 2; justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; gap: 10px; }
  .qa-check > summary, .qa-check > .qa-check-row { grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 12px; }
  .qa-src { display: none; }
  .qa-check-body { padding-left: 0; }
  .qa-passed ul { columns: 1; padding-left: 0; }
  .qa-lh { padding: 16px; }
  .qa-lh-cats { grid-template-columns: 1fr 1fr; }
  .qa-metrics { grid-template-columns: 1fr 1fr; }
  .qa-metric:nth-child(n) { padding: 0 0 0 12px; border-left: 1px solid #DDE3D9; }
  .qa-metric:nth-child(odd) { padding-left: 0; border-left: 0; }
  .qa-shots { grid-template-columns: minmax(0, 1fr) 92px; padding: 14px; }
  .qa-facts { grid-template-columns: 96px minmax(0, 1fr); }
  .qa-head .qa-actions { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .qa-head .qa-btn { justify-content: center; padding: 0 6px; font-size: 13px; white-space: nowrap; min-height: 44px; }
  .qa-head .qa-btn svg { display: none; }
  .qa-cta .qa-actions { width: 100%; }
  .qa-cta .qa-actions > * { flex: 1; justify-content: center; }
  .qa-lh-cats { gap: 16px 8px; }
  .qa-lh-cat { flex-direction: column; gap: 8px; text-align: center; font-size: 13px; }
  .qa-chapter-score { grid-row: 1; }
  .qa-chapter-score small { display: none; }
  .qa-chapter-head p { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------------
   Print / Save as PDF: the sheet on plain paper
   --------------------------------------------------------------------- */
@media print {
  .side, .m-nav, .scrim, .page-head, .qa-tool, .qa-actions, .qa-cta, .qa-progress, .qa-toast, .qa-toc, .qa-ad, .qa-guide { display: none !important; }
  .layout, .content-wrap, .content-wrap:has(.main--tool), .main--tool { background: #fff !important; display: block; height: auto; overflow: visible; margin: 0; border: 0; padding: 0; }
  .qa-out { margin: 0; max-width: none; }
  .qa-sheet { box-shadow: none; border-radius: 0; background: #fff; }
  .qa-pad { padding: 0; }
  .qa-body { grid-template-columns: 1fr; }
  .qa-check, .qa-brow, .qa-fixlist li, .qa-table tr { break-inside: avoid; }
  .qa-chev { display: none; }
}