/* ============================================================================
   Nitro Speed Test: styles (Nitro Sites tools hub)

   SKINNED TO THE HOST. Everything here is driven by nitrosites' design tokens
   (src/styles/tokens.css) and reuses its component recipes (.btn/.btn-primary/
   .btn-ghost, .card/.field) which the BaseLayout shell loads globally via
   global.css. No raw brand colours, fonts, spacing or radii: only `var(--…)`
   host tokens (AGENTS.md §2). This tool's only brand-simulation surface is the
   Google PageSpeed Insights attribution badge's "G" icon: those four fill
   colours are the ONE fenced literal-hex exception (§2d), clearly marked
   below. Everything else, including the rest of that badge's chrome, is host
   tokens.

   Cascade trap (AGENTS.md §2f): on the LIVE site app.css loads BEFORE the host
   bundle, so any rule here that overrides a property a host class sets
   (.card's padding, .field's margin-bottom, .btn's padding, …) needs a PARENT
   selector for extra specificity, not source order. Flagged inline below.
   ========================================================================== */
.cwv{
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 56rem;
  margin: 0 auto;
  width: 100%;
}
.cwv *{box-sizing:border-box}
.cwv ::selection{background:var(--color-glow); color:var(--color-primary-fg)}

/* ---------- search form ---------- */
.cwv-form{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:stretch; margin:var(--sp-4) auto var(--sp-3); max-width:42rem}
/* host .field carries margin-bottom; flatten it into the inline row via a parent selector (§2f). */
.cwv-form .cwv-field{flex:1 1 240px; min-width:0; margin:0}
.cwv-input{font-size:var(--fs-lg)}
.cwv-input:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}

.cwv-strategy{display:flex; gap:var(--sp-2); flex:none}
.cwv-chip{padding:var(--sp-3) var(--sp-4); font-size:var(--fs-sm); font-weight:700; gap:var(--sp-2); white-space:nowrap}
.cwv-chip-ico{display:inline-flex; width:1.05em; height:1.05em}
.cwv-chip-ico svg{width:100%; height:100%}
.cwv-chip.is-on{background:var(--color-primary); color:var(--color-primary-fg); border-color:var(--color-primary)}
.cwv-chip:disabled{opacity:.6; cursor:not-allowed}

.cwv-btn{white-space:nowrap; font-size:var(--fs-base); flex:none}
.cwv-btn-ico{display:inline-flex; width:1.1em; height:1.1em}
.cwv-btn-ico svg{width:100%; height:100%}

/* ---------- status / loading narrative ---------- */
.cwv-status{min-height:1.6em; display:flex; align-items:center; justify-content:center; gap:var(--sp-2); text-align:center; color:var(--color-muted); margin:var(--sp-3) 0; font-size:var(--fs-sm)}
.cwv-status.is-live{color:var(--color-primary-soft)}
.cwv-spin{display:inline-block; width:1em; height:1em; flex:none; border:2px solid var(--color-border); border-top-color:var(--color-primary);
  border-radius:var(--r-full); animation:cwv-spin .7s linear infinite}
@keyframes cwv-spin{to{transform:rotate(360deg)}}
.cwv-stage-txt{max-width:34rem}

/* ---------- error / not-configured ---------- */
.cwv-error{display:flex; gap:var(--sp-3); align-items:flex-start; max-width:36rem; margin:var(--sp-6) auto; padding:var(--sp-5) var(--sp-6);
  border-radius:var(--r-lg); border:1px solid var(--color-danger); background:color-mix(in srgb, var(--color-danger) 10%, var(--color-surface))}
.cwv-error-ico{font-size:1.5em; line-height:1; color:var(--color-danger)}
.cwv-error strong{color:var(--color-danger)}
.cwv-error-msg{color:var(--color-muted); font-size:var(--fs-sm); margin-top:var(--sp-1)}
.cwv-retry{margin-top:var(--sp-3)}

.cwv-notconfigured{text-align:center; max-width:34rem; margin:var(--sp-8) auto; padding:var(--sp-8) var(--sp-6)}
.cwv-nc-ico{font-size:2.4rem; line-height:1; margin-bottom:var(--sp-3); filter:drop-shadow(0 0 12px var(--color-glow-soft))}
.cwv-nc-title{margin:0 0 var(--sp-2)}
.cwv-nc-msg{color:var(--color-text); margin:0 0 var(--sp-2)}
.cwv-nc-sub{color:var(--color-muted); font-size:var(--fs-sm); margin:0}
.cwv-nc-dev{margin-top:var(--sp-4); font-size:var(--fs-xs); color:var(--color-muted); border-top:1px dashed var(--color-border); padding-top:var(--sp-3)}
.cwv-nc-dev a{color:var(--color-accent-2)}

/* ---------- results ---------- */
.cwv-results:not(:empty){margin-top:var(--sp-6); display:flex; flex-direction:column; gap:var(--sp-4); animation:cwv-rise var(--dur) var(--ease) both}
@keyframes cwv-rise{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:translateY(0)}}
.cwv-results-head{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}
.cwv-results-host{font-family:var(--font-display); font-weight:700; color:var(--color-muted); font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:var(--tracking-wide)}
.cwv-mini{padding:var(--sp-2) var(--sp-3); font-size:var(--fs-sm); font-weight:700; gap:var(--sp-2)}
.cwv-mini svg{width:1em; height:1em}
.cwv-mini.done{color:var(--color-success); border-color:var(--color-success)}

/* generic pill (used by field verdict chips) */
.cwv-pill{display:inline-flex; align-items:center; padding:.15em .6em; border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:800; letter-spacing:.02em; text-transform:uppercase}
.cwv-pill.tone-good{color:var(--color-success); background:color-mix(in srgb, var(--color-success) 14%, transparent); border:1px solid color-mix(in srgb, var(--color-success) 45%, transparent)}
.cwv-pill.tone-warn{color:var(--color-status-partial); background:color-mix(in srgb, var(--color-status-partial) 14%, transparent); border:1px solid color-mix(in srgb, var(--color-status-partial) 45%, transparent)}
.cwv-pill.tone-bad{color:var(--color-danger); background:color-mix(in srgb, var(--color-danger) 14%, transparent); border:1px solid color-mix(in srgb, var(--color-danger) 45%, transparent)}
.cwv-pill.tone-mut{color:var(--color-muted); background:var(--color-surface-2); border:1px solid var(--color-border)}

/* ---------- card heads ---------- */
.cwv-card-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-2); margin-bottom:var(--sp-4)}
.cwv-card-head h3{margin:0}
.cwv-card-sub{color:var(--color-muted); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide)}
.cwv-field-card h3, .cwv-filmstrip-card h3, .cwv-metrics-card h3, .cwv-fixes-card h3{margin:0 0 var(--sp-4)}

/* ---------- field data card ---------- */
.cwv-field-empty, .cwv-field-note{color:var(--color-muted); font-size:var(--fs-sm)}
.cwv-field-note{padding:var(--sp-2) var(--sp-3); border-radius:var(--r-md); background:var(--color-surface-2); border:1px solid var(--color-border); margin:0 0 var(--sp-4)}
.cwv-field-grid{display:flex; flex-direction:column; gap:var(--sp-5)}
.cwv-fm-row.is-empty{color:var(--color-muted); display:flex; justify-content:space-between; font-size:var(--fs-sm)}
.cwv-fm-top{display:flex; align-items:center; gap:var(--sp-3); margin-bottom:var(--sp-2)}
.cwv-fm-label{font-family:var(--font-display); font-weight:800; font-size:var(--fs-sm); letter-spacing:.03em}
.cwv-fm-val{font-variant-numeric:tabular-nums; font-weight:700; color:var(--color-text)}
.cwv-fm-bar{position:relative; display:flex; width:100%; height:10px; border-radius:var(--r-full); overflow:visible; background:var(--color-surface-2)}
.cwv-fm-seg{display:block; height:100%}
.cwv-fm-seg:first-child{border-radius:var(--r-full) 0 0 var(--r-full)}
.cwv-fm-seg:last-child{border-radius:0 var(--r-full) var(--r-full) 0}
.seg-good{background:var(--color-success)}
.seg-warn{background:var(--color-status-partial)}
.seg-bad{background:var(--color-danger)}
.cwv-fm-marker{position:absolute; top:-4px; width:2px; height:18px; background:var(--color-text); box-shadow:0 0 0 2px var(--color-bg); border-radius:1px; transform:translateX(-1px)}
.cwv-fm-legend{display:flex; gap:var(--sp-4); margin-top:var(--sp-1); font-size:var(--fs-xs); color:var(--color-muted)}

/* ---------- lab score hero ---------- */
.cwv-hero{display:flex; flex-wrap:wrap; gap:var(--sp-8); align-items:center; justify-content:space-between}
/* performance ring + standard A-F grade badge (SCORECARD-STANDARD.md) */
.cwv-perf{display:flex; flex-direction:column; align-items:center; gap:var(--sp-3)}
.cwv-grade-badge{--tone:var(--color-muted); display:inline-flex; align-items:center; justify-content:center; min-width:2em; height:2em; padding:0 .45em;
  font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--tone); border-radius:var(--r-md);
  border:2px solid var(--tone); background:color-mix(in srgb, var(--tone) 14%, transparent)}
.cwv-grade-badge.tone-ok{--tone:var(--color-success)} .cwv-grade-badge.tone-good{--tone:var(--color-accent-2)}
.cwv-grade-badge.tone-warn{--tone:var(--color-status-partial)} .cwv-grade-badge.tone-bad{--tone:var(--color-danger)}
.cwv-grade-badge.tone-mut{--tone:var(--color-muted)}
.cwv-ring-wrap{display:flex; flex-direction:column; align-items:center; gap:var(--sp-2)}
.cwv-ring{position:relative}
.cwv-ring svg{transform:rotate(-90deg); display:block}
.cwv-ring-bg{fill:none; stroke:var(--color-border)}
.cwv-ring-fg{fill:none; stroke-linecap:round; transition:stroke-dashoffset var(--dur-slow) var(--ease-out); filter:drop-shadow(0 0 6px currentColor)}
.cwv-ring-c{position:absolute; inset:0; display:flex; align-items:center; justify-content:center}
.cwv-ring-score{font-family:var(--font-display); font-weight:800; line-height:1}
.cwv-ring-big .cwv-ring-score{font-size:var(--fs-4xl)}
.cwv-ring:not(.cwv-ring-big) .cwv-ring-score{font-size:var(--fs-lg)}
.cwv-ring-label{font-size:var(--fs-xs); color:var(--color-muted); text-align:center; max-width:6rem}
.cwv-mini-rings{display:flex; gap:var(--sp-6); flex-wrap:wrap}

/* ---------- Google PSI attribution badge ---------- */
/* flex-basis:100% forces this onto its own line below the rings within .cwv-hero, without
   disturbing the existing ring layout or its space-between alignment. */
.cwv-google-row{flex-basis:100%; display:flex; justify-content:center; margin-top:var(--sp-2)}
.cwv-google-badge{position:relative; display:inline-flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-1) var(--sp-3); border-radius:var(--r-full); background:var(--color-surface-2);
  border:1px solid var(--color-border); color:var(--color-muted); font-family:var(--font-sans);
  font-size:var(--fs-xs); font-weight:600}
.cwv-google-badge:hover, .cwv-google-badge:focus-visible{color:var(--color-text); border-color:var(--color-border-strong)}
.cwv-google-badge:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.cwv-google-ico{display:inline-flex; width:16px; height:16px; flex:none}
.cwv-google-ico svg{width:100%; height:100%; display:block}

/* ====================== GOOGLE "G" ATTRIBUTION ICON: literal hex on purpose ======================
   Reproduces Google's official four-colour "G" mark unmodified, per Brand Resource Center rules
   (full-colour only, on white/black backgrounds, never recoloured, never merged with another mark).
   These are the ONLY literal hex values in this file, intentionally NOT host-tokenized (AGENTS.md
   §2d): the surrounding badge chrome above/below stays on host tokens. */
.cwv-google-ico .gg-blue{fill:#4285F4}
.cwv-google-ico .gg-green{fill:#34A853}
.cwv-google-ico .gg-yellow{fill:#FBBC05}
.cwv-google-ico .gg-red{fill:#EA4335}
/* ==================== /Google "G" icon ==================== */

/* Tooltip: accessible via both mouse hover and keyboard focus (:focus-visible), not hover-only.
   The button's native `title` attribute is a redundant fallback for the same content. */
.cwv-google-tip{position:absolute; left:50%; bottom:calc(100% + var(--sp-2)); transform:translateX(-50%) translateY(4px);
  width:20rem; max-width:80vw; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md);
  background:var(--color-surface-3, var(--color-surface)); border:1px solid var(--color-border-strong);
  color:var(--color-text); font-size:var(--fs-xs); font-weight:400; line-height:1.5; text-align:left;
  box-shadow:var(--shadow-2); opacity:0; pointer-events:none; z-index:5;
  transition:opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease)}
.cwv-google-badge:hover .cwv-google-tip, .cwv-google-badge:focus-visible .cwv-google-tip{opacity:1; transform:translateX(-50%) translateY(0)}

/* ---------- filmstrip ---------- */
.cwv-filmstrip{display:flex; gap:var(--sp-2); overflow-x:auto; padding-bottom:var(--sp-2); scrollbar-width:thin}
.cwv-frame{flex:none; display:flex; flex-direction:column; align-items:center; gap:var(--sp-1); width:84px}
.cwv-frame-img{width:84px; height:auto; border-radius:var(--r-sm); border:1px solid var(--color-border); background:var(--color-surface-2)}
.cwv-frame-t{font-size:var(--fs-xs); color:var(--color-muted); font-variant-numeric:tabular-nums}

/* ---------- metrics grid ---------- */
.cwv-metrics-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:var(--sp-3)}
.cwv-metric{display:flex; flex-direction:column; gap:var(--sp-1); padding:var(--sp-3) var(--sp-4); border-radius:var(--r-md); background:var(--color-surface-2); border:1px solid var(--color-border); border-left-width:3px}
.cwv-metric.tone-good{border-left-color:var(--color-success)}
.cwv-metric.tone-warn{border-left-color:var(--color-status-partial)}
.cwv-metric.tone-bad{border-left-color:var(--color-danger)}
.cwv-metric.tone-mut{border-left-color:var(--color-border-strong)}
.cwv-metric-label{font-size:var(--fs-xs); font-weight:700; color:var(--color-muted); text-transform:uppercase; letter-spacing:.04em}
.cwv-metric-val{font-family:var(--font-display); font-size:var(--fs-xl); font-weight:800; font-variant-numeric:tabular-nums}
.cwv-metric-chip{font-size:var(--fs-xs); color:var(--color-muted)}
.tone-good .cwv-metric-chip{color:var(--color-success)}
.tone-warn .cwv-metric-chip{color:var(--color-status-partial)}
.tone-bad .cwv-metric-chip{color:var(--color-danger)}

/* ---------- fix list ---------- */
.cwv-fixes-empty{color:var(--color-muted); font-size:var(--fs-sm)}
.cwv-fix-list{display:flex; flex-direction:column; gap:var(--sp-3)}
.cwv-fix-row{padding:var(--sp-4); border-radius:var(--r-md); background:var(--color-surface-2); border:1px solid var(--color-border)}
.cwv-fix-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap}
.cwv-fix-title{font-family:var(--font-display); font-weight:700; font-size:var(--fs-base)}
.cwv-fix-savings{flex:none; font-size:var(--fs-xs); font-weight:800; text-transform:uppercase; letter-spacing:.03em; color:var(--color-primary-fg); background:var(--color-primary); padding:.2em .6em; border-radius:var(--r-sm)}
.cwv-fix-plain{color:var(--color-muted); font-size:var(--fs-sm); margin:var(--sp-2) 0 0; line-height:1.55}
.cwv-fix-details{margin-top:var(--sp-3)}
.cwv-fix-details summary{cursor:pointer; font-size:var(--fs-sm); font-weight:700; color:var(--color-accent-2)}
.cwv-fix-item-table{margin-top:var(--sp-2); display:flex; flex-direction:column; gap:var(--sp-1)}
.cwv-fix-item-row{display:flex; justify-content:space-between; gap:var(--sp-3); padding:var(--sp-1) 0; border-top:1px solid var(--color-border); font-size:var(--fs-xs)}
.cwv-fix-item-row:first-child{border-top:0}
.cwv-fix-item-url{color:var(--color-text); word-break:break-all; font-family:var(--font-mono)}
.cwv-fix-item-bytes{flex:none; color:var(--color-muted); font-variant-numeric:tabular-nums}

/* ---------- CTA (funnel) ---------- */
.cwv-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-5);
  background:linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), var(--color-surface)); border-color:var(--color-primary)}
.cwv-cta-body h3{margin:0 0 var(--sp-2); font-size:var(--fs-lg)}
.cwv-cta-body p{margin:0; color:var(--color-muted); font-size:var(--fs-sm); max-width:34rem}
.cwv-cta-btn{flex:none; white-space:nowrap}

/* ---------- responsive ---------- */
@media(max-width:640px){
  .cwv-form{flex-direction:column}
  .cwv-strategy{justify-content:stretch}
  .cwv-chip{flex:1; justify-content:center}
  .cwv-hero{justify-content:center; text-align:center}
  .cwv-mini-rings{justify-content:center}
  .cwv-google-tip{width:16rem; max-width:88vw}
  .cwv-metrics-grid{grid-template-columns:repeat(2, 1fr)}
  .cwv-results-head{justify-content:center; text-align:center}
  .cwv-cta{flex-direction:column; text-align:center}
}