/* ============================================================
   Google PageSpeed Insights — faithful report styles.
   Shared by free-tools/pagespeed-audit.html and the dashboard
   pagespeed view (rendered by js/mv-psi.js). Scoped under
   .psi-report so it never leaks into the surrounding page.
   Light theme to match pagespeed.web.dev. This file is NOT in
   the design-lint TARGETS, so the exact Google hex palette and
   the dynamic inline gauge values are intentional here.
   ============================================================ */
#result.psi-wide { max-width: 1000px; padding: 0 16px; }

.psi-report {
  --psi-pass: #0cce6b; --psi-pass-text: #0b7a44; --psi-pass-bg: #e6f4ea;
  --psi-avg: #ffa400; --psi-avg-text: #8a6116; --psi-avg-bg: #fef3e0;
  --psi-fail: #ff4e42; --psi-fail-text: #c7221a; --psi-fail-bg: #fce8e6;
  --psi-ink: #202124; --psi-ink-2: #5f6368; --psi-line: #dadce0;
  --psi-line-soft: #ecedef; --psi-blue: #1a73e8; --psi-card: #fff; --psi-bg: #f1f3f4;
  --psi-accent-bg: #e8f0fe; --psi-accent-line: #d2e3fc; --psi-null: #9aa0a6;
  --psi-track: #eee; --psi-track-2: #e8eaed; --psi-subrow: #fafbfc;
  font-family: "Roboto", "Inter", system-ui, Arial, sans-serif;
  color: var(--psi-ink); background: var(--psi-bg);
  border: 1px solid var(--psi-line); border-radius: 16px; overflow: hidden;
  text-align: left; line-height: 1.5;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.psi-report * { box-sizing: border-box; }
.psi-report a { color: var(--psi-blue); text-decoration: none; }
.psi-report a:hover { text-decoration: underline; }
.psi-report .psi-h { font-size: 16px; font-weight: 500; color: var(--psi-ink); margin: 0 0 4px; }
.psi-report .psi-sub { font-size: 13px; color: var(--psi-ink-2); margin: 0 0 16px; }

/* device tabs */
.psi-tabs { display: flex; gap: 6px; padding: 14px 20px; background: var(--psi-card); border-bottom: 1px solid var(--psi-line); align-items: center; }
.psi-tab { display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--psi-line); background: var(--psi-card); color: var(--psi-ink-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.psi-tab svg { width: 16px; height: 16px; }
.psi-tab.active { background: var(--psi-accent-bg); border-color: var(--psi-accent-line); color: var(--psi-blue); }
.psi-tab-spacer { flex: 1; }
.psi-analysis-url { font-size: 12px; color: var(--psi-ink-2); max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.psi-body { padding: 24px; }
@media (max-width: 640px) { .psi-body { padding: 14px; } }
.psi-block { background: var(--psi-card); border: 1px solid var(--psi-line); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; }
.psi-warn { background: var(--psi-avg-bg); color: var(--psi-avg-text); border-radius: 8px; padding: 10px 14px; font-size: 13px; margin-bottom: 12px; }

/* toolbar (host apps can inject actions, e.g. the dashboard's export buttons) */
.psi-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.psi-tbtn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--psi-line); background: var(--psi-card); color: var(--psi-ink-2); font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; }
.psi-tbtn:hover { background: var(--psi-bg); color: var(--psi-ink); }
.psi-tbtn svg { width: 15px; height: 15px; }

/* field data (CrUX) */
.psi-cwv-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.psi-cwv-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; padding: 6px 14px; border-radius: 999px; }
.psi-cwv-badge.pass { background: var(--psi-pass-bg); color: var(--psi-pass-text); }
.psi-cwv-badge.fail { background: var(--psi-fail-bg); color: var(--psi-fail-text); }
.psi-scope-tabs { display: flex; gap: 6px; margin: 10px 0 18px; }
.psi-scope-tab { padding: 6px 14px; border-radius: 8px; border: 1px solid var(--psi-line); background: var(--psi-card); font: inherit; font-size: 13px; cursor: pointer; color: var(--psi-ink-2); }
.psi-scope-tab.active { background: var(--psi-accent-bg); color: var(--psi-blue); border-color: var(--psi-accent-line); }
.psi-field-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 26px; }
@media (max-width: 760px) { .psi-field-grid { grid-template-columns: 1fr; } }
.psi-fm-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.psi-fm-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.psi-fm-dot.pass { background: var(--psi-pass); } .psi-fm-dot.average { background: var(--psi-avg); } .psi-fm-dot.fail { background: var(--psi-fail); } .psi-fm-dot.null { background: var(--psi-null); }
.psi-fm-name { font-size: 12px; color: var(--psi-ink-2); flex: 1; }
.psi-fm-cwv { font-size: 9px; font-weight: 700; color: var(--psi-blue); border: 1px solid var(--psi-accent-line); border-radius: 4px; padding: 1px 5px; text-transform: uppercase; letter-spacing: 0.04em; }
.psi-fm-val { font-size: 20px; font-weight: 500; margin-bottom: 8px; }
.psi-fm-val.pass { color: var(--psi-pass-text); } .psi-fm-val.average { color: var(--psi-avg-text); } .psi-fm-val.fail { color: var(--psi-fail-text); }
.psi-fm-bar { position: relative; height: 8px; border-radius: 4px; display: flex; background: var(--psi-track); margin-bottom: 6px; }
.psi-fm-bar span { height: 100%; display: block; }
.psi-fm-bar span:first-child { border-radius: 4px 0 0 4px; } .psi-fm-bar span:last-child { border-radius: 0 4px 4px 0; }
.psi-seg-pass { background: var(--psi-pass); } .psi-seg-average { background: var(--psi-avg); } .psi-seg-fail { background: var(--psi-fail); }
.psi-fm-marker { position: absolute; top: -4px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 7px solid var(--psi-ink); transform: translateX(-5px); }
.psi-fm-legend { display: flex; gap: 14px; font-size: 11px; color: var(--psi-ink-2); flex-wrap: wrap; }
.psi-fm-legend b { font-weight: 500; color: var(--psi-ink); }

/* score gauges */
.psi-summary { display: flex; gap: 8px; justify-content: space-evenly; flex-wrap: wrap; padding: 6px 0 2px; }
.psi-gauge { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 8px; text-decoration: none; color: inherit; }
a.psi-gauge:hover { background: var(--psi-bg); text-decoration: none; }
.psi-gauge-inner { position: relative; width: var(--sz, 72px); height: var(--sz, 72px); display: flex; align-items: center; justify-content: center; }
.psi-gauge-svg { width: 100%; height: 100%; }
.psi-gauge-track { fill: none; stroke-width: 8; }
.psi-gauge-arc { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: var(--circ); stroke-dashoffset: var(--circ); animation: psiArc 1s cubic-bezier(0, 0, 0.2, 1) forwards; }
@keyframes psiArc { to { stroke-dashoffset: var(--offset); } }
@media (prefers-reduced-motion: reduce) { .psi-gauge-arc { animation: none; stroke-dashoffset: var(--offset); } }
.psi-gauge-num { position: absolute; font-size: calc(var(--sz, 72px) * 0.32); font-weight: 400; }
.psi-gauge-label { font-size: 13px; font-weight: 400; text-align: center; }
.psi-pass .psi-gauge-arc { stroke: var(--psi-pass); } .psi-pass .psi-gauge-track { stroke: var(--psi-pass-bg); } .psi-pass .psi-gauge-num, .psi-pass .psi-gauge-label { color: var(--psi-pass-text); }
.psi-average .psi-gauge-arc { stroke: var(--psi-avg); } .psi-average .psi-gauge-track { stroke: var(--psi-avg-bg); } .psi-average .psi-gauge-num, .psi-average .psi-gauge-label { color: var(--psi-avg-text); }
.psi-fail .psi-gauge-arc { stroke: var(--psi-fail); } .psi-fail .psi-gauge-track { stroke: var(--psi-fail-bg); } .psi-fail .psi-gauge-num, .psi-fail .psi-gauge-label { color: var(--psi-fail-text); }
.psi-null .psi-gauge-arc { stroke: var(--psi-null); } .psi-null .psi-gauge-track { stroke: var(--psi-track-2); } .psi-null .psi-gauge-num, .psi-null .psi-gauge-label { color: var(--psi-ink-2); }

/* legend + shapes */
.psi-legend { display: flex; gap: 18px; justify-content: center; font-size: 12px; color: var(--psi-ink-2); margin-top: 10px; flex-wrap: wrap; }
.psi-legend span { display: inline-flex; align-items: center; gap: 6px; }
.psi-shape { display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; }
.psi-shape.circle { border-radius: 50%; background: var(--psi-pass); }
.psi-shape.square { background: var(--psi-avg); }
.psi-shape.triangle { width: 0; height: 0; background: transparent; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--psi-fail); }
.psi-shape.null { border-radius: 50%; background: var(--psi-null); }

/* category section */
.psi-cat { scroll-margin-top: 20px; }
.psi-cat-head { display: flex; align-items: center; gap: 14px; margin: 30px 0 6px; }
.psi-cat-head .psi-gauge { padding: 0; }
.psi-cat-title { font-size: 22px; font-weight: 400; color: var(--psi-ink); }

/* lab metrics */
.psi-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; background: var(--psi-card); border: 1px solid var(--psi-line); border-radius: 12px; padding: 6px 22px; margin-bottom: 16px; }
@media (max-width: 640px) { .psi-metrics { grid-template-columns: 1fr; } }
.psi-metric { display: flex; align-items: center; gap: 12px; padding: 14px 2px; border-bottom: 1px solid var(--psi-line-soft); }
.psi-metric-name { flex: 1; font-size: 14px; color: var(--psi-ink); }
.psi-metric-val { font-size: 20px; font-weight: 500; }
.psi-metric-val.pass { color: var(--psi-pass-text); } .psi-metric-val.average { color: var(--psi-avg-text); } .psi-metric-val.fail { color: var(--psi-fail-text); }
.psi-metrics-note { grid-column: 1 / -1; font-size: 12px; color: var(--psi-ink-2); padding: 12px 2px; }

/* screenshots */
.psi-screens { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; flex-wrap: wrap; }
.psi-screen-final { border: 1px solid var(--psi-line); border-radius: 8px; overflow: hidden; max-width: 150px; background: var(--psi-card); }
.psi-screen-final img { display: block; width: 100%; }
.psi-filmstrip { display: flex; gap: 8px; overflow-x: auto; flex: 1; padding-bottom: 6px; }
.psi-frame { text-align: center; flex: 0 0 auto; }
.psi-frame img { border: 1px solid var(--psi-line); border-radius: 4px; height: 92px; width: auto; }
.psi-frame span { display: block; font-size: 11px; color: var(--psi-ink-2); margin-top: 4px; }

/* metric filter chips */
.psi-filter { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 14px; font-size: 13px; color: var(--psi-ink-2); }
.psi-chip { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--psi-line); background: var(--psi-card); cursor: pointer; font: inherit; font-size: 12px; color: var(--psi-ink-2); }
.psi-chip.active { background: var(--psi-accent-bg); color: var(--psi-blue); border-color: var(--psi-accent-line); }

/* audit list */
.psi-audits { background: var(--psi-card); border: 1px solid var(--psi-line); border-radius: 12px; overflow: hidden; margin-bottom: 14px; }
.psi-group-label { font-size: 15px; font-weight: 500; color: var(--psi-ink); padding: 16px 20px 6px; }
.psi-audit { border-top: 1px solid var(--psi-line-soft); }
.psi-audit[hidden] { display: none; }
.psi-audit > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 20px; }
.psi-audit > summary::-webkit-details-marker { display: none; }
.psi-audit-title { flex: 1; font-size: 14px; color: var(--psi-ink); }
.psi-audit-dv { font-size: 13px; color: var(--psi-ink-2); font-weight: 500; white-space: nowrap; }
.psi-audit-savings { font-size: 13px; color: var(--psi-fail-text); font-weight: 500; white-space: nowrap; }
.psi-audit-caret, .psi-fold-caret { width: 18px; height: 18px; color: var(--psi-ink-2); transition: transform 0.2s; flex: 0 0 auto; }
.psi-audit[open] .psi-audit-caret, .psi-fold[open] .psi-fold-caret { transform: rotate(180deg); }
.psi-audit-body { padding: 0 20px 18px 44px; font-size: 13px; color: var(--psi-ink-2); }
.psi-audit-desc { margin: 0 0 12px; line-height: 1.55; }
.psi-msav { margin: 0 0 10px; font-size: 12px; }
.psi-msav b { font-weight: 500; background: var(--psi-bg); border-radius: 6px; padding: 2px 8px; margin-right: 6px; color: var(--psi-ink); display: inline-block; }

/* detail tables */
.psi-tbl-wrap { overflow-x: auto; }
.psi-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.psi-table th { text-align: left; font-weight: 500; color: var(--psi-ink-2); border-bottom: 1px solid var(--psi-line); padding: 8px 10px; white-space: nowrap; }
.psi-table td { border-bottom: 1px solid var(--psi-line-soft); padding: 8px 10px; color: var(--psi-ink); vertical-align: top; }
.psi-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.psi-table tr.psi-subrow td { color: var(--psi-ink-2); background: var(--psi-subrow); }
.psi-table td.psi-indent { padding-left: 26px; }
.psi-code, .psi-report code { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; background: var(--psi-bg); border-radius: 4px; padding: 1px 5px; color: var(--psi-fail-text); word-break: break-word; }
.psi-node .sel { color: var(--psi-ink-2); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; margin-top: 3px; }
.psi-node .psi-code { display: inline-block; margin-top: 3px; color: var(--psi-ink); }
.psi-thumb { max-width: 48px; max-height: 48px; border: 1px solid var(--psi-line); border-radius: 4px; vertical-align: middle; }
.psi-checklist { list-style: none; margin: 6px 0 0; padding: 0; }
.psi-checklist li { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; color: var(--psi-ink); }
.psi-crc { font-size: 12px; }
.psi-crc-row { padding: 3px 0; }

/* collapsibles (passed / n/a / manual) */
.psi-fold { background: var(--psi-card); border: 1px solid var(--psi-line); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.psi-fold > summary { list-style: none; cursor: pointer; padding: 14px 20px; font-size: 14px; font-weight: 500; color: var(--psi-ink); display: flex; align-items: center; gap: 8px; }
.psi-fold > summary::-webkit-details-marker { display: none; }
.psi-fold[open] > summary { border-bottom: 1px solid var(--psi-line-soft); }
.psi-fold .psi-audits { border: none; border-radius: 0; margin: 0; }

/* footer meta */
.psi-meta { font-size: 12px; color: var(--psi-ink-2); padding: 16px 4px 4px; line-height: 1.6; }
.psi-stackpack { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 12px; color: var(--psi-ink-2); }
.psi-stackpack img { width: 16px; height: 16px; }


/* ============================================================
   Dark theme.
   The palette above is Google's, matching pagespeed.web.dev, and it stays
   exactly that in light mode. In dark mode the same report rendered as a white
   slab inside a dark product, so the variables are remapped to app tokens.
   Every rule already reads var(--psi-*), so overriding the variables here
   re-themes the whole report without touching a single rule.
   Score colours keep their meaning (green pass, amber average, red fail) but
   use the app's own semantic tokens.
   ============================================================ */
[data-theme="dark"] .psi-report {
  --psi-ink: var(--text);
  --psi-ink-2: var(--muted);
  --psi-line: var(--border-strong);
  --psi-line-soft: var(--hairline);
  --psi-card: var(--panel);
  --psi-bg: var(--bg-2);
  --psi-blue: var(--purple-bright);
  --psi-accent-bg: rgba(124, 92, 252, 0.16);
  --psi-accent-line: rgba(124, 92, 252, 0.38);
  --psi-null: var(--muted);
  --psi-track: var(--bg-2);
  --psi-track-2: var(--hairline);
  --psi-subrow: var(--bg-2);
  --psi-pass: var(--green);      --psi-pass-text: var(--green-bright); --psi-pass-bg: rgba(20, 184, 127, 0.14);
  --psi-avg: var(--amber);       --psi-avg-text: var(--amber);         --psi-avg-bg: rgba(245, 158, 11, 0.14);
  --psi-fail: var(--red);        --psi-fail-text: var(--red);          --psi-fail-bg: rgba(245, 101, 101, 0.14);
  box-shadow: var(--shadow-lg);
  border-color: var(--border);
}
/* the screenshot filmstrip sits on white in Google's report; give it a neutral
   frame in dark rather than a glowing white block */
[data-theme="dark"] .psi-report .psi-screen-final { background: var(--bg-2); }


/* ============================================================
   DASHBOARD ONLY — re-theme the PageSpeed report as part of the app.
   Scoped to #view-pagespeed so the public free-tools page keeps its
   Google-matching light palette. The app tokens are theme-aware, so this
   one block covers dashboard light AND dark. The report was reading as an
   embedded Google slab; this makes it one product with the rest of the app.
   ============================================================ */
#view-pagespeed .psi-report {
  --psi-pass: var(--green); --psi-pass-text: var(--green); --psi-pass-bg: rgba(20,184,127,0.13);
  --psi-avg: var(--amber); --psi-avg-text: var(--amber); --psi-avg-bg: rgba(245,158,11,0.13);
  --psi-fail: var(--red); --psi-fail-text: var(--red); --psi-fail-bg: rgba(245,101,101,0.13);
  --psi-ink: var(--text); --psi-ink-2: var(--text-3); --psi-line: var(--border);
  --psi-line-soft: var(--hairline); --psi-blue: var(--purple-bright);
  --psi-card: var(--panel); --psi-bg: var(--bg-2);
  --psi-accent-bg: rgba(124,92,252,0.13); --psi-accent-line: rgba(124,92,252,0.34); --psi-null: var(--muted);
  --psi-track: var(--bg-2); --psi-track-2: var(--hairline); --psi-subrow: var(--bg-2);
  font-family: var(--font);
  background: transparent;
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}
[data-theme="dark"] #view-pagespeed .psi-report { --psi-pass-text: var(--green-bright); }

/* headings pick up the app's heading font + weight (Google uses a thin 400) */
#view-pagespeed .psi-report .psi-h,
#view-pagespeed .psi-cat-title { font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.02em; }
#view-pagespeed .psi-gauge-num { font-family: var(--font-heading); font-weight: 800; }
#view-pagespeed .psi-group-label { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; font-weight: 700; color: var(--muted); }

/* container radii from the app scale */
#view-pagespeed .psi-block,
#view-pagespeed .psi-metrics,
#view-pagespeed .psi-audits,
#view-pagespeed .psi-fold { border-radius: var(--radius); }

/* toolbar export buttons — the app's secondary button, not plain links */
#view-pagespeed .psi-tbtn {
  border-radius: var(--radius-sm); border: 1px solid rgba(124,92,252,0.38);
  background: rgba(124,92,252,0.12); color: var(--text); font-weight: 600;
  transition: border-color .15s ease, background .15s ease;
}
#view-pagespeed .psi-tbtn:hover { border-color: var(--purple-bright); background: rgba(124,92,252,0.22); }
#view-pagespeed .psi-tbtn svg { color: var(--purple-bright); }

/* device tabs (Mobile/Desktop) — the app's segmented control */
#view-pagespeed .psi-tab {
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  background: transparent; color: var(--text-3); font-weight: 600;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
#view-pagespeed .psi-tab:hover { color: var(--text); border-color: var(--border-strong); }
#view-pagespeed .psi-tab.active { background: var(--gradient); border-color: transparent; color: var(--on-brand); }

/* scope tabs (This URL / Origin) + metric chips */
#view-pagespeed .psi-scope-tab,
#view-pagespeed .psi-chip {
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  background: transparent; color: var(--text-3); font-weight: 600;
  transition: color .15s ease, border-color .15s ease;
}
#view-pagespeed .psi-scope-tab:hover,
#view-pagespeed .psi-chip:hover { color: var(--text); border-color: var(--border-strong); }
#view-pagespeed .psi-scope-tab.active,
#view-pagespeed .psi-chip.active { background: var(--bg-2); color: var(--purple-bright); border-color: var(--purple-bright); }

/* the Lighthouse filmstrip screenshots sit on white; give them a neutral frame */
#view-pagespeed .psi-screen-final { background: var(--bg-2); }

/* more breathing room — the default report is tuned to feel dense like Google's;
   inside the app we want generous white space so it doesn't read as crowded */
#view-pagespeed .psi-body { padding: 32px 32px 36px; max-width: 1060px; margin-inline: auto; }
#view-pagespeed .psi-block { padding: 26px 28px; margin-bottom: 24px; }
#view-pagespeed .psi-metrics { padding: 14px 28px; margin-bottom: 24px; }
#view-pagespeed .psi-audits { margin-bottom: 22px; }
#view-pagespeed .psi-fold { margin-bottom: 18px; }
#view-pagespeed .psi-metric { padding: 18px 6px; }
#view-pagespeed .psi-screens { margin-bottom: 26px; gap: 20px; }
#view-pagespeed .psi-summary { padding: 22px 0 12px; gap: clamp(30px, 5vw, 64px); justify-content: center; }
#view-pagespeed .psi-gauge { padding: 14px 22px; }
#view-pagespeed .psi-legend { margin-top: 16px; gap: 22px; }
#view-pagespeed .psi-cat-head { margin: 42px 0 16px; }
#view-pagespeed .psi-tabs { padding: 18px 24px; }
#view-pagespeed .psi-toolbar { margin: 4px 0 22px; }
#view-pagespeed .psi-scope-tabs { margin: 12px 0 22px; }

/* CrUX field metrics: a fixed 3-column grid left the common partial last row
   (e.g. 5 metrics returned) with an empty trailing cell and a wide gap on the
   right, which read as uneven. Flex-wrap + centre keeps full rows identical but
   centres a partial last row. Dashboard-scoped so the Google-faithful
   free-tools report keeps its exact grid. */
#view-pagespeed .psi-field-grid { display: flex; flex-wrap: wrap; justify-content: center; }
#view-pagespeed .psi-field-grid > .psi-fm { flex: 1 1 200px; max-width: 260px; }

/* loading overlay shown while a device (Desktop/Mobile) audit is fetched lazily */
#view-pagespeed .psi-loading-ov {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: var(--mv-scrim); backdrop-filter: blur(2px);
  border-radius: var(--radius-lg);
}
#view-pagespeed .psi-loading-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 24px; }
#view-pagespeed .psi-spin {
  width: 38px; height: 38px; border-radius: 50%;
  border: 3px solid var(--border-strong); border-top-color: var(--purple-bright);
  animation: psiSpinLd 0.8s linear infinite;
}
#view-pagespeed .psi-loading-txt { font-family: var(--font-heading); font-weight: 700; color: var(--text); font-size: 15px; }
#view-pagespeed .psi-loading-sub { color: var(--text-3); font-size: 13px; }
@keyframes psiSpinLd { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #view-pagespeed .psi-spin { animation: none; } }


/* ------------------------------------------------------------------
   Defeat the legacy result reset. PageSpeed renders inside a result container
   that carries .mvx, and css/legacy-mvx.css sets `.mvx * { margin:0; padding:0 }`.
   That has the same specificity as these single-class rules, so load order
   decided the winner and the whole report lost its spacing. Same values, one
   step higher, so the report is correct wherever it is mounted.
   ------------------------------------------------------------------ */
.psi-report .psi-report .psi-h{margin: 0 0 4px}
.psi-report .psi-report .psi-sub{margin: 0 0 16px}
.psi-report .psi-tab{padding: 8px 18px}
.psi-report .psi-body{padding: 24px}
.psi-report .psi-block{padding: 20px 22px;margin-bottom: 16px}
.psi-report .psi-warn{padding: 10px 14px;margin-bottom: 12px}
.psi-report .psi-tbtn{padding: 8px 14px}
.psi-report .psi-cwv-badge{padding: 6px 14px}
.psi-report .psi-scope-tabs{margin: 10px 0 18px}
.psi-report .psi-scope-tab{padding: 6px 14px}
.psi-report .psi-fm-cwv{padding: 1px 5px}
.psi-report .psi-gauge{padding: 10px 18px}
.psi-report .psi-cat-head{margin: 30px 0 6px}
.psi-report .psi-cat-head .psi-gauge{padding: 0}
.psi-report .psi-metric{padding: 14px 2px}
.psi-report .psi-metrics-note{padding: 12px 2px}
.psi-report .psi-chip{padding: 5px 12px}
.psi-report .psi-group-label{padding: 16px 20px 6px}
.psi-report .psi-audit > summary{padding: 14px 20px}
.psi-report .psi-audit-body{padding: 0 20px 18px 44px}
.psi-report .psi-audit-desc{margin: 0 0 12px}
.psi-report .psi-msav{margin: 0 0 10px}
.psi-report .psi-msav b{padding: 2px 8px;margin-right: 6px}
.psi-report .psi-table th{padding: 8px 10px}
.psi-report .psi-table td{padding: 8px 10px}
.psi-report .psi-code{padding: 1px 5px}
.psi-report .psi-report code{padding: 1px 5px}
.psi-report .psi-checklist{margin: 6px 0 0;padding: 0}
.psi-report .psi-checklist li{padding: 5px 0}
.psi-report .psi-crc-row{padding: 3px 0}
.psi-report .psi-fold > summary{padding: 14px 20px}
.psi-report .psi-fold .psi-audits{margin: 0}