/* ============================================================================
   Site Health Check: styles (Nitro Sites tools hub)

   The multi-tool dashboard. SKINNED TO THE HOST: every colour, font, space and
   radius is a nitrosites design token (src/styles/tokens.css) or a host component
   class (.card/.btn/.field) that the BaseLayout shell loads globally. No raw hex.

   Scorecard visuals follow SCORECARD-STANDARD.md (ring R=52, tone-* → --tone,
   grade badge). Cascade note: on the live site app.css loads BEFORE the host
   bundle, so where we override a host-class property we use a parent selector to
   win on specificity rather than load order.
   ========================================================================== */
.shc{
  --shc-ok: var(--color-success);
  --shc-bad: var(--color-danger);
  --shc-warn: var(--color-status-partial);
  --shc-good: var(--color-accent-2);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  max-width: 60rem;
  margin: 0 auto;
  width: 100%;
}
.shc *{box-sizing:border-box}

/* tone → --tone (SCORECARD-STANDARD.md) */
.shc .tone-ok{--tone:var(--shc-ok)}   .shc .tone-good{--tone:var(--shc-good)}
.shc .tone-warn{--tone:var(--shc-warn)} .shc .tone-bad{--tone:var(--shc-bad)}
.shc .tone-mut{--tone:var(--color-muted)}

/* ---------- search form ---------- */
.shc-form{display:flex; gap:var(--sp-2); align-items:stretch; margin:var(--sp-4) auto var(--sp-3); max-width:44rem}
.shc-form .shc-field{flex:1; min-width:0; margin:0}
.shc-input{font-size:var(--fs-lg); width:100%}
.shc-input:focus-visible{outline:2px solid var(--color-focus); outline-offset:2px}
.shc-btn{white-space:nowrap}
.shc-status{min-height:1.4em; text-align:center; color:var(--color-muted); margin:var(--sp-2) 0; font-size:var(--fs-sm)}
.shc-status.is-live{color:var(--color-primary-soft)}

/* ---------- idle ---------- */
.shc-idle{max-width:46rem; margin:var(--sp-6) auto; text-align:center}
.shc-idle-t{color:var(--color-muted); line-height:1.7}
.shc-idle-icons{display:flex; flex-wrap:wrap; gap:var(--sp-3); justify-content:center; margin-top:var(--sp-5); font-size:1.6rem}
.shc-idle-ico{filter:grayscale(.2); opacity:.85}

/* ---------- shared ring (SCORECARD-STANDARD.md) ---------- */
.shc-ring-bg{fill:none; stroke:var(--color-border); stroke-width:10}
.shc-ring-fg, .shc-oring-fg{fill:none; stroke:var(--tone,var(--color-primary)); stroke-width:10; stroke-linecap:round;
  transition:stroke-dashoffset 1s var(--ease)}
.shc-ring-c{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1}
/* loading spinner: spin the svg, show a partial arc, keep the centre readout still */
.shc-ring--load svg{animation:shc-spin .9s linear infinite}
.shc-ring--load .shc-ring-fg, .shc-ring--load .shc-oring-fg{stroke:var(--color-primary); stroke-dasharray:70 260 !important; stroke-dashoffset:0 !important; transition:none}
@keyframes shc-spin{to{transform:rotate(360deg)}}

/* ---------- THE BOARD: one card holding the whole report (hero strip + tile grid) ----------
   Deliberately low-profile so the entire report card fits above the fold. */
.shc-board{display:none; margin:var(--sp-4) 0; padding:var(--sp-5) var(--sp-6)}
.shc-board.is-active{display:block}
.shc-board-div{height:1px; background:linear-gradient(90deg, transparent, var(--color-border-strong), transparent); margin:var(--sp-4) 0}
.shc-board.is-perfect{border-color:color-mix(in srgb, var(--color-success) 55%, transparent);
  background:color-mix(in srgb, var(--color-success) 6%, var(--color-surface))}

/* ---- overall hero: slim horizontal strip ---- */
.shc-overall{display:flex; gap:var(--sp-5); align-items:center}
.shc-oring-wrap{flex:none}
.shc-oring{position:relative; width:104px; height:104px}
.shc-oring svg{width:100%; height:100%; transform:rotate(-90deg)}
.shc-oring-score{font-family:var(--font-display); font-weight:900; font-size:var(--fs-3xl); color:var(--color-text)}
.shc-overall-body{flex:1; min-width:0}
.shc-overall-host{color:var(--color-muted); font-family:var(--font-mono); font-size:var(--fs-xs)}
.shc-overall-h{font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--color-text);
  margin:2px 0 var(--sp-1); display:flex; align-items:center; gap:var(--sp-2)}
.shc-overall-sub{color:var(--color-muted); margin:0; line-height:1.5; font-size:var(--fs-sm)}
.shc-overall-grade{display:inline-flex; align-items:center; justify-content:center; min-width:1.7em; height:1.7em; padding:0 .35em;
  font-size:.8em; color:var(--tone,var(--color-text)); border-radius:var(--r-md);
  border:2px solid var(--tone,var(--color-border)); background:color-mix(in srgb, var(--tone,var(--color-border)) 14%, transparent)}

/* ---- tool tiles: compact rings in one tight grid ---- */
.shc-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(104px, 1fr)); gap:var(--sp-3)}
.shc-tile{display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--sp-1);
  text-decoration:none; color:inherit; padding:var(--sp-2) var(--sp-1); border-radius:var(--r-lg);
  border:1px solid transparent;
  transition:transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease)}
.shc-tile:hover{transform:translateY(-2px); border-color:var(--tone,var(--color-border-strong));
  background:color-mix(in srgb, var(--tone,var(--color-border)) 7%, transparent); color:inherit}
.shc-tile-head{display:flex; align-items:center; gap:.35em; max-width:100%}
.shc-tile-ico{font-size:.95rem; line-height:1}
.shc-tile-name{font-family:var(--font-display); font-weight:700; font-size:var(--fs-xs); color:var(--color-text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.shc-ring{position:relative; width:80px; height:80px; margin:2px 0}
.shc-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.shc-tile-score{font-family:var(--font-display); font-weight:900; font-size:var(--fs-lg); color:var(--color-text)}
.shc-tile-of{color:var(--color-muted); font-size:.58rem; margin-top:1px}
.shc-tile-blurb{color:var(--color-muted); font-size:.62rem; line-height:1.3; max-width:13em;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
/* the extended one-line verdict under each tile (the human-readable "why") */
.shc-tile-verdict{color:var(--color-text); font-size:.7rem; line-height:1.4; margin:2px 0 0; max-width:14em;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.shc-tile.is-loading .shc-tile-verdict{color:var(--color-muted)}
/* "N to-do's" pill: how many open fixes wait on the full tool page (SCORECARD-STANDARD.md todo_count).
   Always the tile's LAST child; margin-top:auto pins it to the base so pills align across all cards
   (grid rows stretch tiles to equal height). Green --ok variant celebrates a clean 0. */
.shc-tile-todo{display:inline-flex; align-items:center; margin-top:auto; font-family:var(--font-display);
  font-weight:800; font-size:var(--fs-sm); letter-spacing:.02em; color:var(--color-bg); line-height:1.7;
  border:0; border-radius:var(--r-full); padding:.22em .95em; background:var(--color-danger);
  box-shadow:0 0 16px color-mix(in srgb, var(--color-danger) 55%, transparent),
             0 2px 8px rgba(0,0,0,.45)}
.shc-tile-todo--ok{color:var(--color-bg); background:var(--color-success);
  box-shadow:0 0 16px color-mix(in srgb, var(--color-success) 45%, transparent),
             0 2px 8px rgba(0,0,0,.45)}
/* grade chip overlapping the ring's top-right corner (high-tech, saves a whole row) */
.shc-tile-grade{position:absolute; top:-4px; right:-6px; display:inline-flex; align-items:center; justify-content:center;
  min-width:1.6em; height:1.6em; padding:0 .25em; font-family:var(--font-display); font-weight:800; font-size:var(--fs-xs);
  color:var(--tone,var(--color-text)); border-radius:var(--r-sm);
  border:2px solid var(--tone,var(--color-border)); background:var(--color-surface);
  box-shadow:0 2px 8px rgba(0,0,0,.4)}
.shc-tile-grade--load{border-style:dashed; border-color:var(--color-border); background:var(--color-surface)}
.shc-tile.is-loading{opacity:.9}
.shc-tile.is-na{opacity:.6}
.shc-tile.is-done{animation:shc-pop var(--dur) var(--ease) both}
@keyframes shc-pop{from{opacity:.4; transform:scale(.94)} to{opacity:1; transform:scale(1)}}

/* ---- Speed card flip slot: Google badge on the front, todo pill "behind" it ----
   The slot tumbles rotateX(180)+rotateY(180) when the score lands. That compound is a net in-plane
   180° turn, so the back face carries a static rotate(180deg) (upside down AND back-to-front) and
   arrives upright when the tumble completes. The two faces swap opacity at the edge-on midpoint. */
.shc-flip{display:block; position:relative; margin-top:auto; perspective:500px; width:100%}
.shc-flip-inner{display:block; position:relative; transform-style:preserve-3d;
  transition:transform .9s var(--ease)}
.shc-flip.is-flipped .shc-flip-inner{transform:rotateX(180deg) rotateY(180deg)}
.shc-flip-front{display:flex; justify-content:center; opacity:1; transition:opacity .1s linear .4s}
.shc-flip.is-flipped .shc-flip-front{opacity:0}
.shc-flip-back{position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:center;
  transform:rotate(180deg); opacity:0; transition:opacity .1s linear .4s}
.shc-flip.is-flipped .shc-flip-back{opacity:1}
.shc-flip-back .shc-tile-todo{margin-top:0}

/* Google attribution badge on the Speed tile. BRAND SIMULATION EXCEPTION: the four literal hex
   values below are Google's official logo colours (required for trademark-correct rendering);
   everything else stays on host tokens. */
.shc-google-badge{display:inline-flex; align-items:center; gap:var(--sp-2); max-width:100%; margin-top:var(--sp-2);
  font-size:var(--fs-xs); font-weight:700; color:var(--color-text);
  border:1.5px solid var(--color-border-strong); border-radius:var(--r-full); padding:.4em .8em .4em .4em;
  background:var(--color-surface-3); box-shadow:0 2px 12px rgba(0,0,0,.3)}
.shc-google-badge span:last-child{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.shc-google-ico{display:inline-flex; width:1.5rem; height:1.5rem; flex:none}
.shc-google-ico svg{width:100%; height:100%}
.shc-google-ico .gg-blue{fill:#4285F4}
.shc-google-ico .gg-green{fill:#34A853}
.shc-google-ico .gg-yellow{fill:#FBBC05}
.shc-google-ico .gg-red{fill:#EA4335}

/* ---------- lead CTA: the two paths (shown after a run with open fixes) ---------- */
.shc-cta{display:none; margin:var(--sp-5) 0}
.shc-cta.is-active{display:block; animation:shc-pop var(--dur) var(--ease) both}
.shc-cta-head{text-align:center; margin-bottom:var(--sp-4)}
.shc-cta-h{font-family:var(--font-display); font-weight:900; font-size:var(--fs-2xl); color:var(--color-text); margin:0 0 var(--sp-1)}
.shc-cta-sub{color:var(--color-muted); margin:0; font-size:var(--fs-base)}
.shc-cta-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); align-items:stretch}
.shc-path{display:flex; flex-direction:column; gap:var(--sp-2); padding:var(--sp-5)}
.shc-path--hot{border-color:color-mix(in srgb, var(--color-primary) 65%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--color-primary) 7%, var(--color-surface)), var(--color-surface));
  box-shadow:0 0 34px color-mix(in srgb, var(--color-primary) 18%, transparent)}
.shc-path-badge{align-self:flex-start; font-family:var(--font-display); font-weight:800; font-size:var(--fs-xs);
  letter-spacing:.08em; color:var(--color-muted); border:1.5px solid var(--color-border-strong);
  border-radius:var(--r-full); padding:.25em .9em}
.shc-path-badge--hot{color:var(--color-primary); border-color:color-mix(in srgb, var(--color-primary) 60%, transparent);
  background:color-mix(in srgb, var(--color-primary) 12%, transparent)}
.shc-path-h{font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl); color:var(--color-text); margin:0}
.shc-path-p{color:var(--color-muted); margin:0; line-height:1.6; font-size:var(--fs-sm)}
.shc-lead{display:flex; flex-direction:column; gap:var(--sp-2); margin-top:auto; padding-top:var(--sp-3)}
.shc-lead-in{width:100%}
.shc-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0} /* honeypot */
.shc-lead-consent{display:flex; gap:var(--sp-2); align-items:flex-start; color:var(--color-muted);
  font-size:var(--fs-xs); line-height:1.5; cursor:pointer}
.shc-lead-consent input{margin-top:.2em; flex:none; accent-color:var(--color-primary)}
.shc-lead-btn{width:100%}
.shc-lead-fine{color:var(--color-muted); font-size:var(--fs-xs); margin:0; text-align:center}
.shc-lead-status{min-height:1.2em; color:var(--color-status-partial); font-size:var(--fs-xs); text-align:center}
.shc-lead-done{display:flex; gap:var(--sp-2); align-items:center; justify-content:center; text-align:left;
  color:var(--color-text); padding:var(--sp-4) 0; font-weight:700}
.shc-lead-done-ico{display:inline-flex; align-items:center; justify-content:center; flex:none; width:1.8em; height:1.8em;
  border-radius:var(--r-full); color:var(--color-success); border:2px solid var(--color-success);
  background:color-mix(in srgb, var(--color-success) 14%, transparent)}

/* ---------- celebration ---------- */
.shc-party{margin:var(--sp-4) 0 0; text-align:center; padding:var(--sp-5); border-radius:var(--r-xl);
  border:1px solid color-mix(in srgb, var(--color-success) 45%, transparent);
  background:linear-gradient(180deg, color-mix(in srgb, var(--color-success) 12%, var(--color-surface)), var(--color-surface));
  animation:shc-party-in var(--dur-slow) var(--ease) both}
@keyframes shc-party-in{from{opacity:0; transform:scale(.94)} to{opacity:1; transform:scale(1)}}
.shc-party-trophy{font-size:3.4rem; line-height:1; animation:shc-bounce 1s var(--ease) infinite alternate}
@keyframes shc-bounce{to{transform:translateY(-10px) rotate(-6deg)}}
.shc-party-h{font-family:var(--font-display); font-weight:900; font-size:var(--fs-4xl); letter-spacing:.02em; margin:var(--sp-2) 0 var(--sp-1);
  background:linear-gradient(90deg, var(--color-success), var(--color-accent-2), var(--color-secondary), var(--color-primary));
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  background-size:200% auto; animation:shc-shine 3s linear infinite}
@keyframes shc-shine{to{background-position:200% center}}
.shc-party-sub{color:var(--color-text); font-size:var(--fs-lg); margin:0}
.shc-confetti{position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:9999}

@media (prefers-reduced-motion: reduce){
  .shc-ring-fg, .shc-oring-fg{transition:none}
  .shc-party-trophy, .shc-party-h{animation:none}
  .shc-ring--load svg{animation-duration:2s}
  .shc-flip-inner, .shc-flip-front, .shc-flip-back{transition:none} /* instant swap, no tumble */
}

/* ---------- responsive ---------- */
@media (max-width: 720px){
  .shc-cta-grid{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .shc-form{flex-direction:column}
  .shc-board{padding:var(--sp-4)}
  .shc-overall{flex-direction:column; text-align:center; gap:var(--sp-3)}
  .shc-overall-h{justify-content:center}
  .shc-grid{grid-template-columns:repeat(auto-fit, minmax(92px, 1fr))}
}