/* Google Sans and Google Sans Code: SIL Open Font License, self-hosted latin subsets. */
@font-face {
  font-family: 'Google Sans';
  src: url('fonts/google-sans-latin.woff2?v=3f43e613a4') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Google Sans Code';
  src: url('fonts/google-sans-code-latin.woff2?v=98eee6fe6d') format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}

/* Google palette tokens shared by every FEECAAL look. Brand hexes are exact on purpose. */
:root {
  /* the four brand colors */
  --g-blue: #4285F4;
  --g-red: #EA4335;
  --g-yellow: #FBBC04;
  --g-green: #34A853;

  /* Google Material 600 and 800 steps (text-safe on white) */
  --g-blue-600: #1A73E8;
  --g-blue-800: #185ABC;
  --g-blue-900: #174EA6;
  --g-red-600: #D93025;
  --g-red-800: #B31412;
  --g-yellow-600: #F9AB00;
  --g-yellow-800: #E37400;
  --g-green-600: #1E8E3E;
  --g-green-800: #137333;

  /* tints */
  --g-blue-50: #E8F0FE;
  --g-blue-100: #D2E3FC;
  --g-red-50: #FCE8E6;
  --g-red-100: #FAD2CF;
  --g-yellow-50: #FEF7E0;
  --g-yellow-100: #FEEFC3;
  --g-green-50: #E6F4EA;
  --g-green-100: #CEEAD6;

  /* Google greys */
  --g-grey-50: #F8F9FA;
  --g-grey-100: #F1F3F4;
  --g-grey-200: #E8EAED;
  --g-grey-300: #DADCE0;
  --g-grey-500: #9AA0A6;
  --g-grey-700: #5F6368;
  --g-grey-800: #3C4043;
  --g-grey-900: #202124;

  /* dark surfaces (assistant style) */
  --g-night: #131314;
  --g-night-2: #1E1F20;
  --g-night-3: #282A2C;
  --g-night-text: #E3E3E3;
  --g-night-muted: #9AA0A6;

  /* assistant gradient stops */
  --g-grad-1: #4796E3;
  --g-grad-2: #9177C7;
  --g-grad-3: #CA6673;

  /* type */
  --font-ui: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-code: 'Google Sans Code', ui-monospace, 'Cascadia Mono', Consolas, monospace;

  /* Material motion */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized-decel: cubic-bezier(0.05, 0.7, 0.1, 1);
  --ease-emphasized-accel: cubic-bezier(0.3, 0, 0.8, 0.15);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* FEECAAL Check · page styles.
   One page, two looks. data-state="idle" shows the homepage (search look); "scanning" and "done" show
   the report (insights look). State rules anchor on the element that carries data-state, as
   [data-state] > .app, so the ghosts the flight leaves behind can keep the look they left with. */

@property --rx { syntax: '<length>'; inherits: false; initial-value: 999px; }
@property --ry { syntax: '<length>'; inherits: false; initial-value: 999px; }

:root {
  /* homepage surfaces and ink */
  --page: #FFFFFF;
  --ink: var(--g-grey-900);
  --ink-2: var(--g-grey-700);
  --ink-3: var(--g-grey-800);
  --line: var(--g-grey-200);
  --line-2: var(--g-grey-300);
  --pill-line: #DFE1E5;
  --foot-bg: #F2F2F2;
  --foot-line: #DADCE0;
  --on-fill: #FFFFFF;
  --focus: var(--g-blue-600);
  --link: var(--g-blue-800);
  --sh-pill: 0 1px 6px rgb(32 33 36 / .28);
  --sh-1: 0 1px 2px rgb(60 64 67 / .3), 0 1px 3px 1px rgb(60 64 67 / .15);
  --sh-2: 0 1px 3px rgb(60 64 67 / .3), 0 4px 8px 3px rgb(60 64 67 / .15);
  --shade: rgb(60 64 67 / .55);
  --shade-0: rgb(60 64 67 / 0);

  /* report surfaces and ink */
  --ins-bg: #FFFFFF;
  --ins-ink: var(--g-grey-900);
  --ins-ink-2: var(--g-grey-700);
  --ins-ink-3: var(--g-grey-500);
  --ins-line: var(--g-grey-300);
  --ins-line-2: var(--g-grey-200);
  --ins-soft: var(--g-grey-50);
  --ins-soft-2: var(--g-grey-100);
  --ins-on-color: #FFFFFF;
  --ins-blue: var(--g-blue-600);
  --ins-blue-ink: var(--g-blue-800);
  --ins-blue-hover: #1B66C9;
  --ins-blue-wash: rgba(26, 115, 232, 0.06);
  --ins-blue-wash-2: rgba(26, 115, 232, 0.12);
  --ins-red-ink: var(--g-red-600);

  /* report thresholds: ring, text and pale fill */
  --ins-pass: #0CCE6B;
  --ins-pass-ink: #018642;
  --ins-pass-tint: #E7FAF0;
  --ins-avg: #FFA400;
  --ins-avg-ink: #C33300;
  --ins-avg-tint: #FFF6E5;
  --ins-fail: #FF4E42;
  --ins-fail-ink: #C5221F;
  --ins-fail-tint: #FFEDEC;

  /* overlays */
  --ins-snack: var(--g-grey-900);
  --ins-tooltip: var(--g-grey-800);
  --ins-scrim: rgba(32, 33, 36, 0.6);
  --ins-flash: rgba(255, 255, 255, 0.92);
  --ins-mask: #000000;
  --ins-mask-fade: rgba(0, 0, 0, 0.25);
  --ins-shadow-1: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --ins-shadow-2: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
  --ins-shadow-3: 0 2px 3px 0 rgba(60, 64, 67, 0.3), 0 6px 10px 4px rgba(60, 64, 67, 0.15);

  /* springs */
  --spring-pop: cubic-bezier(.34, 1.56, .64, 1);
  --spring: cubic-bezier(.34, 1.4, .64, 1);
  --spring-soft: cubic-bezier(.2, 1.1, .3, 1);

  /* homepage layout */
  --pad-x: clamp(12px, 2.4vw, 28px);
  --mark-idle: clamp(46px, min(16.5vw, 11.5vh), 108px);
  --pill-w: 584px;
  --pill-h: 50px;
  --btn-h: 36px;

  /* report layout */
  --vh: 1vh;
  --pad: 32px;
  --maxw: 1680px;
  --wrap: max(var(--pad), calc((100% - var(--maxw)) / 2));
  --bar-h: 64px;
  --wm: 22px;
  --field-h: 48px;
  --gap: 16px;
  --cpad: 20px;
  --radius: 8px;
  --gk: 1;
  --Gk: 1;
  --g: clamp(60px, min(calc(10.2 * var(--vh)), 7.2vw), 112px);
  --G: clamp(96px, calc(17 * var(--vh)), 168px);
  --row: clamp(20px, calc(2.6 * var(--vh)), 28px);
}
@supports (height: 1dvh) {
  :root { --mark-idle: clamp(46px, min(16.5vw, 11.5dvh), 108px); --vh: 1dvh; }
}
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --spring-pop: linear(0, 0.08, 0.276, 0.528, 0.782, 0.998, 1.156, 1.247, 1.275, 1.254, 1.201, 1.132, 1.062, 1.002, 0.958, 0.933, 0.924, 0.93, 0.944, 0.963, 0.983, 0.999, 1.011, 1.018, 1.021, 1.019, 1.015, 1.01, 1);
    --spring: linear(0, 0.048, 0.168, 0.329, 0.506, 0.679, 0.832, 0.958, 1.052, 1.116, 1.151, 1.163, 1.157, 1.138, 1.113, 1.084, 1.055, 1.03, 1.009, 0.993, 0.982, 0.976, 0.973, 0.974, 0.977, 0.981, 0.986, 0.99, 1);
    --spring-soft: linear(0, 0.028, 0.098, 0.196, 0.307, 0.423, 0.536, 0.64, 0.734, 0.814, 0.881, 0.935, 0.977, 1.008, 1.03, 1.044, 1.051, 1.054, 1.053, 1.05, 1.045, 1.039, 1.033, 1.026, 1.021, 1.015, 1.011, 1.007, 1);
  }
}
@media (max-width: 639px) {
  :root { --pill-h: 46px; --btn-h: 36px; }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color-scheme: light; background: var(--page); }
body {
  background: var(--page); color: var(--ink);
  font: 400 14px/1.45 var(--font-ui);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
p, h1, h2, h3, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: var(--link); }
svg { display: block; }
[hidden] { display: none !important; }
.sr {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex: none; fill: currentColor; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

noscript p {
  position: fixed; z-index: 50; left: 50%; top: 8px; transform: translateX(-50%);
  width: max-content; max-width: calc(100% - 32px); padding: 8px 14px; border-radius: 8px;
  background: var(--ins-snack); color: var(--on-fill); font-size: 14px; line-height: 20px; text-align: center;
}

/* pillar tone sets (homepage letters and chips) */
.t-blue { --c: var(--g-blue); --t-50: var(--g-blue-50); --t-ink: var(--g-blue-800); }
.t-red { --c: var(--g-red); --t-50: var(--g-red-50); --t-ink: var(--g-red-800); }
.t-yellow { --c: var(--g-yellow); --t-50: var(--g-yellow-100); --t-ink: var(--g-grey-900); }
.t-green { --c: var(--g-green); --t-50: var(--g-green-50); --t-ink: var(--g-green-800); }
.s-blue { stroke: var(--g-blue); }
.s-red { stroke: var(--g-red); }
.s-yellow { stroke: var(--g-yellow); }
.s-green { stroke: var(--g-green); }

/* ---------- frame: one screen ---------- */
.app {
  position: relative; height: 100vh; height: 100dvh;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: clip;
}
.bar { grid-row: 1; }
.main { grid-row: 2; position: relative; min-width: 0; min-height: 0; }
.foot { grid-row: 3; }

[data-state="idle"] > .app .main { display: flex; flex-direction: column; justify-content: center; padding: 52px var(--pad-x) 5vh; }
:not([data-state="idle"]) > .app .main { display: grid; grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); }

/* ---------- app bar ---------- */
.bar { position: relative; z-index: 4; height: var(--bar-h); }
.bar::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ins-line); opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease-standard);
}
[data-state="idle"] > .app .bar { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
:not([data-state="idle"]) > .app .bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-inline: var(--wrap); background: var(--ins-bg);
}
:not([data-state="idle"]) > .app .bar::before { opacity: 1; }

.brand { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; }
[data-state="idle"] > .app .brand { display: none; }
.ring { position: relative; width: 32px; height: 32px; flex: none; overflow: visible; }
.ring-g { transform-origin: 16px 16px; }
.wm { display: flex; align-items: baseline; gap: 0.28em; min-width: 0; font-size: var(--wm); line-height: 28px; white-space: nowrap; }
.wm .mark { font-size: var(--wm); }
.ins { color: var(--ins-ink-2); font-size: var(--wm); font-weight: 400; line-height: 28px; white-space: nowrap; }
.home-btn {
  position: absolute; z-index: 2; top: -6px; bottom: -6px; left: -8px; right: -8px;
  padding: 0; border: 0; border-radius: 8px; background: transparent;
}

/* How it works: the plain homepage link, then a report text button */
.how .ico { display: none; }
[data-state="idle"] > .app .how {
  position: absolute; z-index: 4; top: 10px; right: calc(var(--pad-x) - 8px); pointer-events: auto;
  height: 36px; padding: 0 12px; border: 0; border-radius: 18px; background: transparent;
  color: var(--ink); font-size: 14px; white-space: nowrap;
}
[data-state="idle"] > .app .how:hover { background: var(--g-grey-100); }
:not([data-state="idle"]) > .app .how {
  position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent;
  color: var(--ins-blue); font: 500 14px/20px var(--font-ui); letter-spacing: 0.1px; white-space: nowrap;
  transition: background-color 150ms var(--ease-standard);
}
:not([data-state="idle"]) > .app .how:hover { background: var(--ins-blue-wash); }
:not([data-state="idle"]) > .app .how .ico { display: block; }

/* Material linear progress, indeterminate */
.progress {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: 4px; overflow: hidden;
  background: var(--g-blue-100); opacity: 0; transition: opacity 300ms var(--ease-standard); pointer-events: none;
}
[data-state="scanning"] > .app .progress { opacity: 1; }
/* on the way in from the homepage the bar's line and progress wait for the letters */
.arrive > .app .bar::before { transition-delay: 260ms; }
.arrive > .app .progress { transition-delay: 620ms; }
.pbar { position: absolute; top: 0; bottom: 0; width: 100%; transform-origin: top left; }
.pbar span { position: absolute; inset: 0; background: var(--ins-blue); transform-origin: top left; }
.p1 { left: -145.166611%; }
.p2 { left: -54.888891%; }
[data-state="scanning"] > .app .p1 { animation: lp-p1 2s infinite linear; }
[data-state="scanning"] > .app .p1 span { animation: lp-p1s 2s infinite linear; }
[data-state="scanning"] > .app .p2 { animation: lp-p2 2s infinite linear; }
[data-state="scanning"] > .app .p2 span { animation: lp-p2s 2s infinite linear; }
.pdet { position: absolute; inset: 0; display: none; background: var(--ins-blue); transform-origin: left center; transform: scaleX(var(--prog, 0)); transition: transform 300ms var(--ease-standard); }
@keyframes lp-p1 {
  0% { transform: translateX(0); }
  20% { animation-timing-function: cubic-bezier(0.5, 0, 0.701732, 0.495819); transform: translateX(0); }
  59.15% { animation-timing-function: cubic-bezier(0.302435, 0.381352, 0.55, 0.956352); transform: translateX(83.67142%); }
  100% { transform: translateX(200.611057%); }
}
@keyframes lp-p1s {
  0% { transform: scaleX(0.08); }
  36.65% { animation-timing-function: cubic-bezier(0.334731, 0.12482, 0.785844, 1); transform: scaleX(0.08); }
  69.15% { animation-timing-function: cubic-bezier(0.06, 0.11, 0.6, 1); transform: scaleX(0.661479); }
  100% { transform: scaleX(0.08); }
}
@keyframes lp-p2 {
  0% { animation-timing-function: cubic-bezier(0.15, 0, 0.515058, 0.409685); transform: translateX(0); }
  25% { animation-timing-function: cubic-bezier(0.31033, 0.284058, 0.8, 0.733712); transform: translateX(37.651913%); }
  48.35% { animation-timing-function: cubic-bezier(0.4, 0.627035, 0.6, 0.902026); transform: translateX(84.386165%); }
  100% { transform: translateX(160.277782%); }
}
@keyframes lp-p2s {
  0% { animation-timing-function: cubic-bezier(0.205028, 0.057051, 0.57661, 0.453971); transform: scaleX(0.08); }
  19.15% { animation-timing-function: cubic-bezier(0.152313, 0.196432, 0.648374, 1.004315); transform: scaleX(0.457104); }
  44.15% { animation-timing-function: cubic-bezier(0.257759, -0.003163, 0.211762, 1.38179); transform: scaleX(0.72796); }
  100% { transform: scaleX(0.08); }
}

/* ---------- hero: the homepage stack, then the report's URL row ---------- */
[data-state="idle"] > .app .hero { display: flex; flex-direction: column; align-items: center; min-width: 0; }
:not([data-state="idle"]) > .app .hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 600px); grid-template-rows: auto auto;
  align-items: center; column-gap: 40px; row-gap: 8px; min-width: 0;
  padding: clamp(12px, calc(2.6 * var(--vh)), 30px) var(--wrap) clamp(12px, calc(2.2 * var(--vh)), 24px);
}
:not([data-state="idle"]) > .app :is(.home-brand, .btns, .pills) { display: none; }
[data-state="idle"] > .app :is(.sub, .modes, .report) { display: none; }

/* ---------- the wordmark (the page's one H1) ---------- */
.home-brand { position: relative; z-index: 5; display: flex; flex-direction: column; align-items: center; }
.mark {
  display: flex; font: 500 var(--mark-idle)/1 var(--font-ui); letter-spacing: -0.01em;
  white-space: nowrap; user-select: none; -webkit-user-select: none;
}
.L { position: relative; display: block; margin-right: -0.012em; transform-origin: 0 0; }
.G { display: block; color: var(--c); transform-origin: 50% 80%; }
.S {
  position: absolute; left: 10%; right: 10%; bottom: 0.12em; height: 0.11em; border-radius: 50%;
  background: radial-gradient(closest-side, var(--shade), var(--shade-0)); opacity: 0; pointer-events: none;
}
.tag {
  margin-top: clamp(2px, 0.9vh, 10px); font-size: clamp(14px, 2vh, 16px); color: var(--ink-2);
  transition: opacity .18s var(--ease-standard);
}
.home-brand.peeking .tag { opacity: 0; }
.peek {
  position: absolute; left: 0; top: calc(var(--mark-idle) + clamp(0px, 0.5vh, 6px)); z-index: 3;
  pointer-events: none; transition: transform .5s var(--spring-soft);
}
.peek.jump { transition: none; }
.pk {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px 0 11px;
  border-radius: 15px; background: var(--page); box-shadow: var(--sh-2);
  font-size: 14px; color: var(--ink); white-space: nowrap;
  opacity: 0; transform: translateY(-6px) scale(.8);
  transition: opacity .16s var(--ease-standard), transform .42s var(--spring-pop);
}
.home-brand.peeking .pk { opacity: 1; transform: none; }
.pk i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.pk b { font-weight: 500; color: var(--t-ink); }

/* ---------- the search pill, which becomes the URL field ---------- */
.search { position: relative; min-width: 0; }
.pill { position: relative; display: flex; align-items: center; height: var(--pill-h); min-width: 0; }
.pill-bg {
  --rx: 999px; --ry: 999px;
  position: absolute; inset: 0; border: 1px solid var(--pill-line); border-radius: var(--rx) / var(--ry);
  background: var(--page); transform-origin: 0 0;
  transition: box-shadow .2s var(--ease-standard), border-color .2s var(--ease-standard);
}
.p-ico { position: relative; flex: none; width: 20px; height: 20px; margin: 0 13px 0 17px; }
.p-ico svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity .25s var(--ease-standard); }
.p-ico .i-s { fill: var(--g-grey-500); }
.p-ico .i-l { fill: var(--ins-ink-2); opacity: 0; }
.p-in { position: relative; flex: 1 1 auto; min-width: 0; height: 100%; }
.p-in input {
  display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; outline: 0;
  background: transparent; font-size: 16px; color: var(--ink); text-overflow: ellipsis;
}
.p-in input:focus-visible { outline: none; }
.p-in input::placeholder { color: var(--ink-2); opacity: 1; }
.typing .p-in input::placeholder { color: transparent; }
.ph {
  position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 16px; line-height: 1.4; color: var(--ink-2); white-space: nowrap; overflow: hidden;
  pointer-events: none; visibility: hidden;
}
.typing .ph { visibility: visible; }
.ph::after {
  content: ""; display: inline-block; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: -0.2em;
  border-radius: 1px; background: var(--g-blue-600); animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.clr {
  position: relative; flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: 6px;
  padding: 0; border: 0; border-radius: 50%; background: transparent;
  opacity: 0; transform: scale(.5); pointer-events: none;
  transition: opacity .15s var(--ease-standard), transform .4s var(--spring-pop);
}
.clr:hover { background: var(--g-grey-100); }
.clr svg { width: 22px; height: 22px; fill: var(--ink-2); }
.has-val .clr { opacity: 1; transform: none; pointer-events: auto; }

/* homepage look of the pill */
[data-state="idle"] > .app .search { width: min(var(--pill-w), 100%); margin-top: clamp(14px, 3.2vh, 30px); }
[data-state="idle"] > .app .pill:hover .pill-bg,
[data-state="idle"] > .app .pill:focus-within .pill-bg { border-color: transparent; box-shadow: var(--sh-pill); }
[data-state="idle"] > .app .pill.bad .pill-bg { border-color: var(--g-red-600); }
.kbd[data-state="idle"] > .app .pill:focus-within .pill-bg { outline: 2px solid var(--focus); outline-offset: 2px; }
[data-state="idle"] > .app .analyze { display: none; }
[data-state="idle"] > .app .err {
  position: absolute; z-index: 6; left: 18px; top: calc(100% + 4px); max-width: calc(100% - 36px);
  padding: 3px 10px; border-radius: 8px; background: var(--page); box-shadow: var(--sh-1);
  font-size: 13px; line-height: 1.35; color: var(--g-red-600);
}

/* report look of the same pill */
:not([data-state="idle"]) > .app .search {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 6px; align-items: start;
  grid-column: 2; grid-row: 1;
}
:not([data-state="idle"]) > .app .pill { height: var(--field-h); }
:not([data-state="idle"]) > .app .pill-bg { --rx: 4px; --ry: 4px; border-color: var(--ins-line); }
:not([data-state="idle"]) > .app .pill:hover .pill-bg { border-color: var(--ins-ink); }
:not([data-state="idle"]) > .app .pill:focus-within .pill-bg { border-color: var(--ins-blue); box-shadow: inset 0 0 0 1px var(--ins-blue); }
:not([data-state="idle"]) > .app .pill.bad .pill-bg { border-color: var(--ins-red-ink); box-shadow: inset 0 0 0 1px var(--ins-red-ink); }
:not([data-state="idle"]) > .app .p-ico { margin: 0 10px 0 14px; }
:not([data-state="idle"]) > .app .p-ico .i-s { opacity: 0; }
:not([data-state="idle"]) > .app .p-ico .i-l { opacity: 1; }
:not([data-state="idle"]) > .app .pill.bad .i-l { fill: var(--ins-red-ink); }
:not([data-state="idle"]) > .app .p-in input { padding-right: 14px; color: var(--ins-ink); }
:not([data-state="idle"]) > .app :is(.ph, .clr) { display: none; }
:not([data-state="idle"]) > .app .err { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--ins-red-ink); }
.err:empty, :not([data-state="idle"]) > .app .err:empty { display: none; }
:not([data-state="idle"]) > .app .err::before {
  content: ""; width: 16px; height: 16px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.analyze { transform-origin: 0 50%; }
:not([data-state="idle"]) > .app .analyze { height: var(--field-h); padding: 0 26px; font-size: 15px; }
:not([data-state="idle"]) > .app .sub { grid-column: 1; grid-row: 1; }
:not([data-state="idle"]) > .app .modes { grid-column: 2; grid-row: 2; }

/* ---------- homepage buttons and pillar chips ---------- */
.btns { display: flex; justify-content: center; gap: 12px; margin-top: clamp(14px, 3vh, 28px); }
.gbtn {
  position: relative; height: var(--btn-h); padding: 0 16px; border: 1px solid var(--g-grey-50); border-radius: 8px;
  background: var(--g-grey-50); color: var(--ink-3); font-size: 14px; line-height: calc(var(--btn-h) - 2px); white-space: nowrap;
  transition: border-color .15s var(--ease-standard), box-shadow .15s var(--ease-standard), color .15s, transform .45s var(--spring-pop);
}
.gbtn:hover { border-color: var(--line-2); box-shadow: 0 1px 1px rgb(0 0 0 / .1); color: var(--ink); }
.gbtn:active { transform: scale(.95); transition-duration: .08s; }
.lucky { overflow: hidden; }
.lucky .sz { visibility: hidden; }
.reel { position: absolute; left: 0; right: 0; top: 0; }
.reel span { display: block; height: calc(var(--btn-h) - 2px); line-height: calc(var(--btn-h) - 2px); text-align: center; white-space: nowrap; }
.pills {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px;
  max-width: 760px; margin-top: clamp(12px, 2.8vh, 26px); font-size: 13px; color: var(--ink-2);
}
.pcs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.pc {
  display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px;
  border: 1px solid var(--line); border-radius: 13px; background: var(--page); color: var(--ink-2); cursor: default;
  transition: border-color .2s, background-color .2s, color .2s;
}
.pc i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.pc.on { border-color: var(--line-2); background: var(--g-grey-50); color: var(--ink); }

/* ---------- report: joke line, buttons, fun / serious ---------- */
.sub { font-size: 16px; line-height: 24px; color: var(--ins-ink-2); }
.text-btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 12px; border: 0; border-radius: 4px; background: transparent;
  color: var(--ins-blue); font: 500 14px/20px var(--font-ui); letter-spacing: 0.1px; white-space: nowrap;
  transition: background-color 150ms var(--ease-standard);
}
.text-btn:hover { background: var(--ins-blue-wash); }
.text-btn.small { height: 32px; padding: 0 8px; font-size: 13px; gap: 6px; }
.text-btn.small .ico { width: 16px; height: 16px; }
.btn {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 20px; border: 1px solid transparent; border-radius: 4px;
  font: 500 14px/20px var(--font-ui); letter-spacing: 0.1px; white-space: nowrap; text-decoration: none;
  transition: background-color 150ms var(--ease-standard), box-shadow 150ms var(--ease-standard);
}
.btn-fill { background: var(--ins-blue); color: var(--ins-on-color); }
.btn-fill:hover { background: var(--ins-blue-hover); box-shadow: var(--ins-shadow-1); }
.btn-out { background: var(--ins-bg); color: var(--ins-blue); border-color: var(--ins-line); }
.btn-out:hover { background: var(--ins-blue-wash); }

.modes { position: relative; justify-self: start; display: inline-grid; grid-template-columns: 1fr 1fr; }
.mode {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 22px; border: 0; border-radius: 4px 4px 0 0; background: none;
  color: var(--ins-ink-2); font: 500 14px/20px var(--font-ui); white-space: nowrap;
  transition: color 200ms var(--ease-standard);
}
.mode:hover { background: var(--ins-blue-wash); }
.mode[aria-pressed="true"] { color: var(--ins-blue); }
.mode-ink {
  position: absolute; left: 0; bottom: 0; width: 50%; height: 3px; border-radius: 3px 3px 0 0;
  background: var(--ins-blue); transform: translateX(0); transition: transform 280ms var(--ease-standard); pointer-events: none;
}
.modes[data-at="serious"] .mode-ink { transform: translateX(100%); }
.modes.snap .mode-ink { transition: transform 520ms var(--ease-spring); }
.mode-tip {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 6; padding: 6px 10px; border-radius: 4px;
  background: var(--ins-tooltip); color: var(--ins-on-color); font: 400 12px/16px var(--font-ui); white-space: nowrap;
  box-shadow: var(--ins-shadow-2); opacity: 0; transform: translateY(-4px) scale(0.92); transform-origin: top right;
  transition: opacity 150ms var(--ease-standard), transform 200ms var(--ease-standard); pointer-events: none;
}
.mode-tip:empty { display: none; }
.mode-tip.show { opacity: 1; transform: none; }

/* ---------- report grid ---------- */
.report {
  display: grid; gap: var(--gap); min-height: 0; min-width: 0; padding: 0 var(--wrap) 4px;
  grid-template-columns: minmax(320px, 0.74fr) minmax(0, 0.98fr) minmax(0, 1.24fr);
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "sum pil pil" "sum vib aud";
}
.summary { grid-area: sum; }
.pillars { grid-area: pil; }
.vibes { grid-area: vib; }
.audits { grid-area: aud; }
.card {
  position: relative; min-width: 0; min-height: 0; overflow: hidden;
  background: var(--ins-bg); border: 1px solid var(--ins-line); border-radius: var(--radius); padding: var(--cpad);
}
.card-head { display: flex; align-items: center; gap: 8px 16px; min-width: 0; }
.card-title { margin: 0; font: 500 16px/24px var(--font-ui); color: var(--ins-ink); min-width: 0; }

/* ---------- gauges ---------- */
.gauge {
  --sz: calc(var(--g) * var(--gk));
  --gring: var(--ins-line); --gtrack: var(--ins-line-2); --gfill: transparent; --gink: var(--ins-ink-2);
  position: relative; width: var(--sz); height: var(--sz); flex: none;
}
.gauge.big { --sz: calc(var(--G) * var(--Gk)); }
.gauge[data-band="pass"] { --gring: var(--ins-pass); --gtrack: var(--ins-pass-tint); --gfill: var(--ins-pass-tint); --gink: var(--ins-pass-ink); }
.gauge[data-band="average"] { --gring: var(--ins-avg); --gtrack: var(--ins-avg-tint); --gfill: var(--ins-avg-tint); --gink: var(--ins-avg-ink); }
.gauge[data-band="fail"] { --gring: var(--ins-fail); --gtrack: var(--ins-fail-tint); --gfill: var(--ins-fail-tint); --gink: var(--ins-fail-ink); }
.gauge svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.g-base { fill: var(--gfill); transition: fill 320ms var(--ease-standard); }
.g-track { fill: none; stroke: var(--gtrack); stroke-width: 8; transition: stroke 320ms var(--ease-standard); }
.g-arc { fill: none; stroke: var(--gring); stroke-width: 8; stroke-linecap: round; opacity: 0; transition: stroke 260ms var(--ease-standard); }
.g-num {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-code); font-weight: 600; font-size: calc(var(--sz) * 0.3); line-height: 1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--gink);
  transition: color 260ms var(--ease-standard), opacity 200ms var(--ease-standard);
}
.gauge.big .g-num { font-size: calc(var(--sz) * 0.29); }
.g-num > span { white-space: nowrap; }
.g-num small { font-size: 0.46em; font-weight: 500; letter-spacing: 0; color: var(--ins-ink-2); }

/* the arrival comet: one soft sweep in each pillar's tone while the cards rise in */
.g-glint { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 0 400; opacity: 0; transform-origin: 60px 60px; }
.arrive > .app .g-glint { animation: glint 1.1s var(--ease-standard) both; animation-delay: calc(var(--i) * 70ms + 360ms); }
.arrive > .app .gauge.big .g-glint { animation-delay: 600ms; }
@keyframes glint {
  0% { opacity: 0; stroke-dasharray: 0 400; transform: rotate(-90deg); }
  12% { opacity: 0.55; }
  50% { stroke-dasharray: 70 400; }
  80% { opacity: 0.42; }
  100% { opacity: 0; stroke-dasharray: 0 400; transform: rotate(270deg); }
}

/* indeterminate arc while a pillar waits, in the four brand colors */
.g-spin { transform-origin: 60px 60px; opacity: 0; transition: opacity 260ms var(--ease-standard); }
.g-ind { fill: none; stroke: var(--g-blue); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 345.58; stroke-dashoffset: 345.58; transform-origin: 60px 60px; }
.gauge.spin .g-spin { opacity: 1; }
.gauge.spinning .g-spin { animation: g-rot 1.6s linear infinite; }
.gauge.spinning .g-ind { animation: g-dash 1.4s ease-in-out infinite, g-colors 5.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.23s), calc(var(--i) * -0.8s); }
.gauge.spin .g-num { opacity: 0.35; }
.gauge.big.spin .g-num { opacity: 1; }
@keyframes g-rot { to { transform: rotate(270deg); } }
@keyframes g-dash {
  0% { stroke-dashoffset: 345.58; }
  50% { stroke-dashoffset: 86.4; transform: rotate(135deg); }
  100% { stroke-dashoffset: 345.58; transform: rotate(450deg); }
}
@keyframes g-colors {
  0%, 21%, 100% { stroke: var(--g-blue); }
  25%, 46% { stroke: var(--g-red); }
  50%, 71% { stroke: var(--g-yellow); }
  75%, 96% { stroke: var(--g-green); }
}

/* ---------- summary card ---------- */
.summary { display: flex; flex-direction: column; gap: clamp(8px, calc(1.2 * var(--vh)), 14px); }
.summary:focus, .summary:focus-visible { outline: none; }
.sum-gauge { align-self: center; padding-top: 2px; margin-top: auto; }
.sum-text { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; min-width: 0; }
.cap { font: 500 14px/20px var(--font-ui); color: var(--ins-ink-2); }
.v-title { margin: 2px 0 0; font: 500 22px/28px var(--font-ui); color: var(--ins-ink); overflow-wrap: anywhere; }
.v-line { margin-top: 2px; max-width: 36ch; font-size: 14px; line-height: 20px; color: var(--ins-ink-2); }
.note { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 10px 2px 6px; border-radius: 12px; background: var(--g-blue-50); color: var(--ins-blue-ink); font: 500 13px/20px var(--font-ui); }
.note .ico { width: 16px; height: 16px; }
.site-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; padding-top: 12px; border-top: 1px solid var(--ins-line-2); }
.site { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.fav { flex: none; width: 16px; height: 16px; }
.fav img { display: block; width: 16px; height: 16px; border-radius: 2px; }
.site b { font-weight: 500; font-size: 14px; line-height: 20px; color: var(--ins-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.again { margin-right: -8px; flex: none; }
.when { display: flex; align-items: center; gap: 6px; margin-top: -4px; font-size: 12px; line-height: 16px; color: var(--ins-ink-2); min-width: 0; }
.when .ico { width: 14px; height: 14px; }
.when span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.when code { font-family: var(--font-code); font-size: 11px; }
.tip { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--g-yellow-50); }
.tip .ico { width: 20px; height: 20px; fill: var(--g-yellow-800); }
.tip p { font-size: 13px; line-height: 18px; color: var(--ins-ink); }
.tip b { font-weight: 500; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.actions .btn { padding: 0 12px; min-width: 0; }
.estimate { font-size: 12px; line-height: 16px; color: var(--ins-ink-2); text-align: center; }
.env { margin: auto 0 0; padding: 10px 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 6px 12px; border-radius: 8px; background: var(--ins-soft); }
.env li { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 12px; line-height: 16px; color: var(--ins-ink-2); white-space: nowrap; }
.env li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.env .ico { width: 16px; height: 16px; fill: var(--ins-ink-2); }

/* filmstrip */
.film { margin-top: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; padding-top: 4px; }
.f-env .film { margin-top: auto; }
.fr { display: grid; gap: 4px; justify-items: center; min-width: 0; }
.frame {
  position: relative; width: 100%; aspect-ratio: 9 / 16; overflow: hidden;
  border: 1px solid var(--ins-line); border-radius: 3px; background: var(--ins-bg);
  transition: border-color 400ms var(--ease-standard);
}
.frame svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.frame::after { content: ""; position: absolute; inset: 0; background: var(--ins-flash); opacity: 0; pointer-events: none; }
.frame.snap { border-color: var(--ins-blue); }
.frame.snap::after { animation: flash 420ms var(--ease-standard); }
.frame.on:not(.snap) { border-color: var(--ins-line); }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.ft { font: 400 10px/12px var(--font-code); color: var(--ins-ink-2); white-space: nowrap; }
.blk { opacity: 0; transform: scale(0.5); transform-box: fill-box; transform-origin: center; }
.frame.on .blk { opacity: 1; transform: none; transition: opacity 260ms var(--ease-standard), transform 480ms var(--ease-spring); transition-delay: calc(var(--d, 0) * 55ms + 60ms); }
.frame.on .blk.old { transition: none; }
.b-bar { fill: var(--g-grey-100); }
.b-logo { fill: var(--g-blue); }
.b-nav { fill: var(--g-grey-300); }
.b-head { fill: var(--g-grey-500); }
.b-hero { fill: var(--g-blue-100); }
.b-tx { fill: var(--g-grey-200); }
.b-btn { fill: var(--g-green); }
.b-btn2 { fill: none; stroke: var(--g-grey-300); stroke-width: 0.8; }
.b-t1 { fill: var(--g-yellow); }
.b-t2 { fill: var(--g-red); }
.b-t3 { fill: var(--g-blue); }
.b-sun { fill: var(--g-yellow); }
.b-mtn { fill: var(--g-blue); }
.b-dot { fill: var(--g-red); }

/* ---------- pillars card ---------- */
.pillars { display: flex; flex-direction: column; gap: clamp(8px, calc(1.4 * var(--vh)), 16px); }
.pillars .card-head { justify-content: space-between; flex-wrap: wrap; }
.legend { display: flex; align-items: center; gap: 18px; font: 400 12px/16px var(--font-code); color: var(--ins-ink-2); white-space: nowrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.gauges { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.pg { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.g-name { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; font-size: 14px; line-height: 18px; color: var(--ins-ink); white-space: nowrap; }
.chip {
  width: 18px; height: 18px; flex: none; display: inline-grid; place-items: center; border-radius: 50%;
  font: 600 11px/1 var(--font-ui); font-style: normal; color: var(--ins-on-color);
}
.chip.c-blue { background: var(--g-blue); }
.chip.c-red { background: var(--g-red); }
.chip.c-yellow { background: var(--g-yellow-600); }
.chip.c-green { background: var(--g-green); }

/* status shapes, report style */
.shape { display: inline-block; width: 10px; height: 10px; flex: none; background: var(--ins-line); border-radius: 50%; }
.shape.fail { background: var(--ins-fail); border-radius: 0; clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.shape.average { background: var(--ins-avg); border-radius: 1px; transform: scale(0.88); }
.shape.pass { background: var(--ins-pass); border-radius: 50%; }

/* ---------- core web vibes ---------- */
.vibes { display: flex; flex-direction: column; gap: clamp(8px, calc(1.4 * var(--vh)), 16px); }
.vibes .card-head { justify-content: space-between; }
.cwv-v { display: inline-flex; align-items: center; gap: 4px; vertical-align: top; color: var(--ins-ink-2); font-weight: 500; }
.cwv-v .ico { display: none; width: 20px; height: 20px; }
.cwv-v.pass { color: var(--ins-pass-ink); }
.cwv-v.fail { color: var(--ins-fail-ink); }
.cwv-v.pass .ico, .cwv-v.fail .ico { display: inline; }
.cwv-v.measuring::after { content: ""; width: 12px; height: 12px; margin-left: 4px; border-radius: 50%; border: 2px solid var(--g-blue-100); border-top-color: var(--ins-blue); animation: spin 800ms linear infinite; }
.metrics { display: grid; gap: clamp(8px, calc(1.5 * var(--vh)), 16px); }
.metric { min-width: 0; }
.m-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.m-name { min-width: 0; font-size: 13px; line-height: 18px; color: var(--ins-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-name abbr { text-decoration: none; color: var(--ins-ink-2); }
.m-name abbr::before { content: "("; }
.m-name abbr::after { content: ")"; }
.m-val { margin-left: auto; padding-left: 8px; font: 500 18px/22px var(--font-ui); font-variant-numeric: tabular-nums; color: var(--ins-ink-2); white-space: nowrap; }
.m-val.pass { color: var(--ins-pass-ink); }
.m-val.average { color: var(--ins-avg-ink); }
.m-val.fail { color: var(--ins-fail-ink); }
.live { flex: none; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--g-blue-50); color: var(--ins-blue-ink); font: 500 11px/16px var(--font-ui); white-space: nowrap; }
.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ins-blue); }
.dist { position: relative; display: flex; gap: 2px; height: 8px; margin-top: 6px; border-radius: 4px; background: var(--ins-soft-2); }
.seg { height: 100%; min-width: 0; transform-origin: left center; }
.seg.good { background: var(--ins-pass); border-radius: 4px 0 0 4px; }
.seg.ni { background: var(--ins-avg); }
.seg.poor { background: var(--ins-fail); border-radius: 0 4px 4px 0; }
.dist .shim { position: absolute; inset: 0; border-radius: 4px; overflow: hidden; opacity: 0; }
.dist .shim::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--ins-line), transparent); transform: translateX(-100%); }
[data-state="scanning"] > .app .dist .shim { opacity: 1; }
[data-state="scanning"] > .app .dist .shim::before { animation: shim 1.3s var(--ease-standard) infinite; }
@keyframes shim { to { transform: translateX(260%); } }
.pin { position: absolute; top: -4px; bottom: -4px; left: 75%; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ins-ink); box-shadow: 0 0 0 1.5px var(--ins-bg); opacity: 0; }
[data-state="done"] > .app .pin { opacity: 1; }
.pcts { display: flex; gap: 2px; margin-top: 4px; font: 400 11px/14px var(--font-code); white-space: nowrap; }
.pcts span { min-width: 3.6ch; overflow: hidden; }
.pcts .p-ni { text-align: center; }
.pcts .p-good { color: var(--ins-pass-ink); }
.pcts .p-ni { color: var(--ins-avg-ink); }
.pcts .p-poor { color: var(--ins-fail-ink); text-align: right; }
:not([data-state="done"]) > .app .pcts { visibility: hidden; }

/* diagnostics */
.diag { display: flex; flex-direction: column; gap: 4px; min-height: 0; }
.diag-title { margin: 0; font: 500 14px/20px var(--font-ui); color: var(--ins-ink); }
.diag-list { margin: 0; padding: 0; border-top: 1px solid var(--ins-line-2); }
.d-empty { padding: 8px 0; font-size: 13px; line-height: 18px; color: var(--ins-ink-2); }
.d-row { position: relative; border-bottom: 1px solid var(--ins-line-2); }
.d-head {
  width: 100%; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 4px;
  border: 0; background: none; text-align: left; border-radius: 4px;
}
.d-head:hover { background: var(--ins-soft); }
.d-title { min-width: 0; font-size: 13px; line-height: 18px; color: var(--ins-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.d-save { flex: none; font-size: 12px; line-height: 16px; color: var(--ins-ink-2); white-space: nowrap; }
.d-row[data-rate="fail"] .d-save { color: var(--ins-fail-ink); }
.d-row[data-rate="average"] .d-save { color: var(--ins-avg-ink); }
.d-row[data-rate="pass"] .d-save { color: var(--ins-pass-ink); }
.chev { width: 20px; height: 20px; flex: none; margin-left: auto; fill: var(--ins-ink-2); transition: transform 240ms var(--ease-standard); }
.d-head[aria-expanded="true"] .chev { transform: rotate(180deg); }
.d-body { padding: 0 4px 9px 24px; font-size: 13px; line-height: 18px; color: var(--ins-ink-2); }
.d-body b { font-weight: 500; color: var(--ins-ink); }
.d-row.opening .d-body { animation: rise 320ms var(--ease-emphasized-decel) both; }

/* ---------- checks ---------- */
.audits { display: flex; flex-direction: column; gap: 8px; }
.audits .card-head { justify-content: flex-start; }
.count { font: 400 12px/16px var(--font-code); color: var(--ins-ink-2); white-space: nowrap; }
.audits .swap { margin-left: auto; }
.a-scroll {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin; scrollbar-color: var(--ins-line) transparent; overscroll-behavior: contain; scroll-snap-type: y proximity;
  margin: 0 calc(var(--cpad) * -0.5); padding: 0 calc(var(--cpad) * 0.5);
}
.a-scroll.more { -webkit-mask-image: linear-gradient(to bottom, var(--ins-mask) calc(100% - 22px), var(--ins-mask-fade)); mask-image: linear-gradient(to bottom, var(--ins-mask) calc(100% - 22px), var(--ins-mask-fade)); }
.a-list { position: relative; margin: 0; padding: 0; }
.a-row {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px;
  height: var(--row); padding: 0 8px; min-width: 0; font-size: 13px; line-height: 18px; scroll-snap-align: start;
}
.a-row + .a-row { border-top: 1px solid var(--ins-line-2); }
.a-row .shape { transition: transform 300ms var(--ease-spring); }
.a-row[data-s="pending"] .shape { transform: scale(0.7); }
.a-row[data-s="active"] .shape {
  background: none; border-radius: 50%; border: 2px solid var(--g-blue-100); border-top-color: var(--ins-blue);
  clip-path: none; transform: none; animation: spin 700ms linear infinite;
}
.a-row.land .shape { animation: pop 420ms var(--ease-spring); }
.a-label { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ins-ink); }
.a-row[data-s="pending"] .a-label { color: var(--ins-ink-2); }
.a-row[data-s="active"] .a-label { font-weight: 500; }
.a-row .live { background: var(--ins-soft-2); color: var(--ins-ink-2); }
.a-row .live::before { background: var(--ins-ink-3); }
.a-row[data-s="done"] .live { background: var(--g-blue-50); color: var(--ins-blue-ink); }
.a-row[data-s="done"] .live::before { background: var(--ins-blue); }
.a-row.land .live::before { animation: beacon 900ms var(--ease-standard); }
.a-detail { flex: 0 1 auto; margin-left: auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: 400 12px/16px var(--font-code); color: var(--ins-ink-2); text-align: right; }
.a-row[data-s="done"] .a-detail { color: var(--ins-ink); }
.a-detail.typing::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 1px; vertical-align: -2px; background: var(--ins-blue); }
.a-row[data-s="active"] .a-detail::before { content: "reading"; color: var(--ins-ink-2); }
.a-row[data-s="active"] .a-detail::after { content: ""; display: inline-block; width: 3ch; text-align: left; animation: dots 900ms steps(4) infinite; }
.a-cursor { position: absolute; z-index: 0; left: 0; right: 0; top: 0; height: var(--row); border-radius: 4px; background: var(--g-blue-50); opacity: 0; transform: translateY(var(--y, 0px)); transition: transform 320ms var(--ease-standard), opacity 300ms var(--ease-standard); pointer-events: none; }
[data-state="scanning"] > .app .a-cursor { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { 0% { transform: scale(0.2); } 100% { transform: scale(1); } }
@keyframes beacon { 0% { box-shadow: 0 0 0 0 var(--ins-blue-wash-2); } 40% { box-shadow: 0 0 0 5px var(--ins-blue-wash-2); } 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* ---------- footer: the grey homepage bar settles into the report's footer line ---------- */
.foot { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; color: var(--ink-2); }
.foot-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--foot-bg); border-top: 1px solid var(--foot-line); transform-origin: 50% 100%;
}
.foot-p, .foot-b { position: relative; z-index: 1; transform-origin: 0 50%; }
.foot-a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; white-space: nowrap; border-radius: 4px; }
.foot-a:hover { text-decoration-color: currentColor; }
.foot-a:focus-visible { outline: 2px solid var(--g-blue-600); outline-offset: 2px; }
.foot-b {
  border: 0; background: transparent; white-space: nowrap;
  text-decoration: underline; text-decoration-color: transparent;
  transition: color 350ms var(--ease-standard), text-decoration-color 150ms;
}
/* the grey bar's top line lives on .foot-bg, so 1px of padding stands in for the homepage footer's border */
[data-state="idle"] > .app .foot { gap: 2px 24px; padding: 12px var(--pad-x) calc(11px + env(safe-area-inset-bottom, 0px)); font-size: 14px; }
[data-state="idle"] > .app .foot-b { padding: 3px 4px; margin: -3px -4px; border-radius: 4px; color: var(--ink-3); font-size: inherit; }
[data-state="idle"] > .app .foot-b:hover { text-decoration-color: currentColor; }
:not([data-state="idle"]) > .app .foot {
  gap: 4px 16px; padding: 6px var(--wrap) calc(10px + env(safe-area-inset-bottom, 0px));
  font-size: 12px; line-height: 16px; color: var(--ins-ink-2);
}
:not([data-state="idle"]) > .app .foot-bg { opacity: 0; }
:not([data-state="idle"]) > .app .foot-b { padding: 2px 0; color: var(--ins-blue); font: 500 12px/16px var(--font-ui); text-underline-offset: 3px; }
:not([data-state="idle"]) > .app .foot-b:hover { text-decoration-color: currentColor; }

/* ---------- dialog ---------- */
.dlg {
  width: min(560px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 0; border: 0; border-radius: 8px;
  background: var(--ins-bg); color: var(--ins-ink); box-shadow: var(--ins-shadow-3); overflow: auto; overscroll-behavior: contain;
}
.dlg::backdrop { background: var(--ins-scrim); }
.dlg[open] { animation: dlg-in 320ms var(--ease-emphasized-decel); }
.dlg[open]::backdrop { animation: fade 240ms var(--ease-standard); }
.dlg-in { padding: 24px 24px 12px; }
.dlg h2 { margin: 0 0 16px; font: 400 22px/28px var(--font-ui); color: var(--ins-ink); }
.dlg h2:focus, .dlg h2:focus-visible { outline: none; }
.how-list { display: grid; gap: 14px; }
.how-list li { display: flex; gap: 14px; align-items: flex-start; }
.how-list p { font-size: 14px; line-height: 20px; color: var(--ins-ink-2); padding-top: 4px; }
.how-list a { color: var(--ins-blue); text-underline-offset: 2px; }
.how-ico { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; color: var(--ins-on-color); }
.how-ico .ico { width: 18px; height: 18px; }
.t-blue-bg { background: var(--g-blue); }
.t-red-bg { background: var(--g-red); }
.t-yellow-bg { background: var(--g-yellow-600); }
.t-green-bg { background: var(--g-green); }
.dlg-src { margin-top: 16px; padding-left: 46px; font-size: 12px; line-height: 16px; color: var(--ins-ink-2); }
.dlg-act { display: flex; justify-content: flex-end; margin-top: 12px; }
@keyframes dlg-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } }

/* ---------- snackbar ---------- */
.snack {
  position: fixed; left: 50%; bottom: 24px; z-index: 40; min-width: 0; max-width: calc(100% - 32px);
  padding: 14px 16px; border-radius: 4px; background: var(--ins-snack); color: var(--ins-on-color);
  font: 400 14px/20px var(--font-ui); box-shadow: var(--ins-shadow-3); white-space: nowrap;
  opacity: 0; transform: translate(-50%, 16px) scale(0.96); pointer-events: none;
  transition: opacity 180ms var(--ease-standard), transform 260ms var(--ease-emphasized-decel);
}
.snack:empty { display: none; }
.snack.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- ripple, confetti, sparks, ghosts ---------- */
.rip { position: relative; overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; background: currentColor; opacity: 0.16; transform: scale(0); pointer-events: none; animation: ripple 560ms var(--ease-standard) forwards; }
@keyframes ripple { 60% { transform: scale(1); opacity: 0.14; } 100% { transform: scale(1); opacity: 0; } }
.confetti { position: fixed; z-index: 15; left: 0; top: 0; width: 8px; height: 8px; border-radius: 2px; pointer-events: none; }
.burst { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.burst i { position: absolute; border-radius: 50%; }
.ghosts { position: fixed; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.ghosts .app { position: static; display: block; height: 0; overflow: visible; }
.ghosts *, .ghosts *::before, .ghosts *::after { animation: none !important; transition: none !important; }

/* ---------- report state visibility ---------- */
:not([data-state="done"]) > .app :is(.when, .tip, .actions, .estimate, .again, .swap) { display: none; }
.swap { display: none; }

/* result reveal */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes drop { from { opacity: 0; transform: translateY(-10px) scaleY(0.4); } to { opacity: 1; transform: none; } }
[data-state="done"] > .app .rv { animation: rise 560ms var(--ease-emphasized-decel) both; animation-delay: calc(var(--d, 0) * 70ms + 120ms); }
[data-state="done"] > .app .seg { animation: grow 640ms var(--ease-emphasized-decel) both; animation-delay: calc(var(--d, 0) * 90ms + 260ms); }
[data-state="done"] > .app .pin { animation: drop 520ms var(--ease-spring) both; animation-delay: calc(var(--d, 0) * 90ms + 620ms); }
[data-state="done"] > .app .d-row { animation: rise 480ms var(--ease-emphasized-decel) both; animation-delay: calc(var(--d, 0) * 80ms + 520ms); }

/* ---------- homepage: phones and short screens ---------- */
@media (max-width: 639px) {
  [data-state="idle"] > .app .main { padding-top: 48px; }
  [data-state="idle"] > .app .foot { justify-content: center; text-align: center; gap: 0 14px; padding: 9px 12px calc(8px + env(safe-area-inset-bottom, 0px)); font-size: 12.5px; }
}
@media (max-width: 639px) and (max-height: 600px) {
  [data-state="idle"] > .app .foot { padding: 6px 12px calc(5px + env(safe-area-inset-bottom, 0px)); line-height: 1.35; }
}
@media (max-height: 520px) {
  [data-state="idle"] > .app .main { padding-top: 40px; }
  .tag, .pills { display: none; }
}

/* ---------- report L: 900 to 1199 wide ---------- */
@media (max-width: 1199.98px) {
  :root { --pad: 24px; --g: clamp(56px, min(calc(10 * var(--vh)), 7.4vw), 104px); }
  :not([data-state="idle"]) > .app .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: 28px; }
  .report {
    grid-template-columns: minmax(270px, 0.85fr) minmax(0, 2fr);
    grid-template-areas: "sum pil" "sum slot";
  }
  .vibes, .audits { grid-area: slot; transition: opacity 260ms var(--ease-standard), visibility 0s linear 0s; }
  :not([data-slot="audits"]) > .app .audits,
  [data-slot="audits"] > .app .vibes { visibility: hidden; opacity: 0; pointer-events: none; }
  [data-state="done"] > .app .swap { display: inline-flex; }
  .g-name { font-size: 13px; }
}

/* ---------- report M: 600 to 899 wide ---------- */
@media (max-width: 899.98px) {
  :root {
    --pad: 20px; --gap: 12px; --cpad: 16px; --bar-h: 60px;
    --g: clamp(52px, min(calc(8.6 * var(--vh)), 10vw), 88px);
    --G: clamp(84px, calc(12 * var(--vh)), 128px);
  }
  :not([data-state="idle"]) > .app .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; justify-items: center; text-align: center; row-gap: 12px; }
  :not([data-state="idle"]) > .app :is(.sub, .search, .modes) { grid-column: 1; grid-row: auto; }
  :not([data-state="idle"]) > .app .search { width: min(100%, 640px); text-align: left; }
  :not([data-state="idle"]) > .app .modes { justify-self: center; margin-top: -4px; }
  .report {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "sum" "pil" "slot";
  }
  .summary {
    display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "g t tip" "g t act" "s s film" "w w film" "e e film";
    column-gap: 18px; row-gap: 10px; align-items: center;
  }
  .sum-gauge { grid-area: g; align-self: center; margin: 0; padding: 0; }
  .sum-text { grid-area: t; align-items: flex-start; text-align: left; }
  .site-row { grid-area: s; }
  .when { grid-area: w; margin-top: 0; }
  .tip { grid-area: tip; }
  .actions { grid-area: act; }
  .estimate { grid-area: e; text-align: left; }
  .film { grid-area: film; margin: 0; align-self: end; }
  .f-env .film { margin: 0; }
  .env { grid-area: 1 / 3 / 3 / 4; margin: 0; align-self: center; }
  [data-state="done"] > .app .env { display: none; }
  /* a flat score has no tip: the share buttons take both rows of the right column */
  .summary.no-tip .actions { grid-area: 1 / 3 / 3 / 4; align-self: center; }
  .v-line { max-width: none; }
}

/* ---------- report S: under 600 wide ---------- */
@media (max-width: 599.98px) {
  :root {
    --pad: 12px; --gap: 8px; --cpad: 12px; --bar-h: 52px; --radius: 8px; --wm: 20px; --field-h: 44px;
    --g: clamp(42px, min(calc(8.2 * var(--vh)), 15.5vw), 72px);
    --G: clamp(60px, min(calc(10.5 * var(--vh)), 23vw), 96px);
    --row: 34px;
  }
  :not([data-state="idle"]) > .app .bar { gap: 8px; }
  .brand { gap: 10px; }
  .ring { width: 28px; height: 28px; }
  :not([data-state="idle"]) > .app .how { padding: 0 8px; }
  :not([data-state="idle"]) > .app .hero { display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding-top: 8px; padding-bottom: 8px; text-align: center; }
  :not([data-state="idle"]) > .app .sub { display: none; }
  :not([data-state="idle"]) > .app .search { width: 100%; column-gap: 8px; }
  :not([data-state="idle"]) > .app .modes { align-self: center; margin-top: -4px; }
  :not([data-state="idle"]) > .app .p-ico { margin: 0 8px 0 10px; }
  :not([data-state="idle"]) > .app .p-in input { padding-right: 10px; }
  :not([data-state="idle"]) > .app .analyze { padding: 0 16px; font-size: 14px; }
  .mode { height: 36px; padding: 0 18px; }
  [data-state="done"] > .app .hero { padding: 8px 0 0; gap: 0; }
  [data-state="done"] > .app :is(.search, .modes) { display: none; }
  [data-state="scanning"] > .app .site-row { display: none; }
  .cwv-word { display: none; }

  .summary { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: none; column-gap: 12px; row-gap: 8px; }
  .sum-gauge { grid-area: 1 / 1 / 2 / 2; }
  .sum-text { grid-area: 1 / 2 / 2 / 3; }
  .site-row, .when, .tip, .actions, .estimate, .film { grid-area: auto / 1 / auto / -1; }
  .env { display: none; }
  .film { grid-template-columns: repeat(8, minmax(0, 30px)); justify-content: space-between; gap: 4px; padding-top: 0; }
  .cap { display: none; }
  .v-title { margin: 0; font-size: 17px; line-height: 22px; }
  .v-line { font-size: 13px; line-height: 18px; }
  .note { margin-top: 4px; font-size: 12px; line-height: 18px; }
  .site-row { padding-top: 8px; }
  .site b { font-size: 13px; }
  .when { margin-top: -2px; }
  .tip { padding: 8px 10px; gap: 8px; }
  .tip .ico { width: 18px; height: 18px; }
  .tip p { font-size: 12px; line-height: 16px; }
  .actions .btn { height: 36px; font-size: 13px; }
  .ft { display: none; }

  .pillars { gap: 8px; }
  .pillars .card-title { display: none; }
  .pillars .card-head { justify-content: center; }
  .legend { gap: 12px; font-size: 11px; }
  .gauges { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: 8px; column-gap: 4px; }
  .pg { grid-column: span 2; gap: 4px; }
  .pg:nth-child(5) { grid-column: 2 / span 2; }
  .g-name { gap: 4px; font-size: 11px; line-height: 14px; }
  .chip { display: none; }

  .vibes { gap: 8px; }
  .card-title { font-size: 14px; line-height: 20px; }
  .cwv-v .ico { width: 16px; height: 16px; }
  .metrics { gap: 8px; }
  .m-name { font-size: 12px; line-height: 16px; }
  .m-val { font-size: 14px; line-height: 18px; }
  .metric .live { display: none; }
  .dist { height: 6px; margin-top: 4px; }
  .pcts { display: none; }
  .diag-title { display: none; }
  .diag-list .d-row:not(:first-child) { display: none; }
  .d-head { padding: 6px 2px; }
  .d-save { display: none; }
  .d-body { position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); z-index: 5; padding: 10px 12px; border-radius: 8px; background: var(--ins-bg); box-shadow: var(--ins-shadow-2); color: var(--ins-ink); }

  .a-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 8px; row-gap: 1px; height: var(--row); align-content: center; font-size: 12px; line-height: 16px; }
  .a-row .shape { grid-row: 1; grid-column: 1; }
  .a-label { grid-row: 1; grid-column: 2; }
  .a-row .live { grid-row: 1; grid-column: 3; height: 16px; font-size: 10px; padding: 0 5px; }
  .a-detail { grid-row: 2; grid-column: 2 / -1; margin: 0; text-align: left; font-size: 11px; line-height: 14px; }
  .count { margin-left: auto; }
  [data-state="done"] > .app .count { display: none; }

  :not([data-state="idle"]) > .app .foot { justify-content: center; padding-top: 4px; padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px)); font-size: 11px; gap: 2px 10px; }
  :not([data-state="idle"]) > .app .foot-b { font-size: 11px; }

  .dlg-in { padding: 20px 20px 8px; }
  .dlg h2 { margin-bottom: 12px; font-size: 20px; line-height: 26px; }
  .how-list { gap: 10px; }
  .how-list li { gap: 12px; }
  .how-list p { padding-top: 2px; font-size: 13px; line-height: 18px; }
  .how-ico { width: 26px; height: 26px; }
  .how-ico .ico { width: 15px; height: 15px; }
  .dlg-src { margin-top: 12px; padding-left: 38px; }
}
@media (max-width: 599.98px) and (max-height: 700px) {
  :root { --bar-h: 48px; }
  :not([data-state="idle"]) > .app .foot { padding-top: 2px; padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px)); }
  .v-line { font-size: 12px; line-height: 16px; }
  .v-title { font-size: 16px; line-height: 20px; }
}
@media (max-width: 379.98px) {
  :root { --wm: 19px; }
  :not([data-state="idle"]) > .app .how-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  :not([data-state="idle"]) > .app .how { padding: 0 6px; }
  .how-ico { display: none; }
  .dlg { width: calc(100% - 16px); max-height: calc(100% - 16px); }
  .dlg-in { padding: 16px 16px 4px; }
  .dlg h2 { margin-bottom: 8px; }
  .how-list { gap: 8px; }
  .how-list p { padding-top: 0; font-size: 12.5px; line-height: 17px; }
  .dlg-src { margin-top: 8px; padding-left: 0; font-size: 11.5px; line-height: 15px; }
  .dlg-act { margin-top: 2px; }
}

/* ---------- report: short screens ---------- */
@media (max-height: 820px) and (min-width: 600px) {
  :root { --bar-h: 56px; --cpad: 16px; --gap: 12px; }
  .sub { font-size: 15px; line-height: 22px; }
  .v-title { font-size: 20px; line-height: 26px; }
}
@media (max-height: 700px) and (min-width: 600px) {
  :root { --bar-h: 52px; --cpad: 14px; --field-h: 44px; }
  .mode { height: 36px; }
}

/* ---------- fit steps: hide secondary detail instead of overflowing (app.js picks them per screen) ---------- */
.f-env .env { display: none; }
.f-est .estimate { display: none; }
.f-pct .pcts { display: none; }
.f-dest .d-est { display: none; }
.f-ft .ft { display: none; }
.f-mgap .metrics { gap: 6px; }
.f-mgap .vibes { gap: 8px; }
.f-mgap .dist { margin-top: 4px; }
.f-phead .pillars .card-head { display: none; }
.f-d3 .diag-list .d-row:nth-child(3) { display: none; }
.f-g1 { --gk: 0.88; }
.f-G1 { --Gk: 0.86; }
.f-sub .sub { display: none; }
.f-film[data-state="done"] > .app .film { display: none; }
.f-when .when { display: none; }
.f-dtitle .diag-title, .f-dtitle .d-empty { display: none; }
.f-g2 { --gk: 0.78; }
.f-G2 { --Gk: 0.74; }
.f-cap .cap { display: none; }
.f-modes:not([data-state="idle"]) > .app .modes { display: none; }
.f-d2 .diag-list .d-row:nth-child(2) { display: none; }
.f-fscan[data-state="scanning"] > .app .film { display: none; }
.f-tight { --cpad: 10px; --gap: 6px; }
.f-tight .tip { padding: 6px 8px; }
.f-tight .tip .ico { display: none; }
.f-tight .summary { row-gap: 6px; }
.f-tight .site-row { padding-top: 6px; }
.f-tight .actions .btn { height: 32px; }
.f-vib0 .metrics { display: none; }
.f-g3 { --gk: 0.68; }
.f-G3 { --Gk: 0.64; }
.f-cwv3 .metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; }
.f-cwv3 .m-name { font-size: 0; }
.f-cwv3 .m-name abbr { font-size: 12px; color: var(--ins-ink); }
.f-cwv3 .m-name abbr::before, .f-cwv3 .m-name abbr::after { content: none; }
.f-cwv3 .m-top .shape { display: none; }
.f-cwv3 .m-val { padding-left: 4px; }
.f-diag0 .diag { display: none; }
.f-modes2 .modes { display: none; }
.f-scroll > .app { height: auto; min-height: 100vh; overflow: visible; }
.f-scroll > .app .main { grid-template-rows: auto auto; }
.f-scroll .report { grid-template-rows: auto; }
.f-scroll .card { overflow: visible; }
.f-scroll .a-scroll { overflow: visible; flex: none; }
@media (max-width: 1199.98px) {
  .f-scroll:not([data-slot="audits"]) > .app .audits, .f-scroll[data-slot="audits"] > .app .vibes { display: none; }
}

/* ---------- container queries: narrow cards compress rows instead of cutting real data ---------- */
.audits { container: aud / inline-size; }
.summary { container: sum / inline-size; }
.pillars { container: pil / inline-size; }
.vibes { container: vib / inline-size; }
.live-key { display: none; }
@container sum (max-width: 280px) {
  .ft { display: none; }
  .again .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .again { padding: 0 8px; margin-right: -6px; }
  .again .ico { width: 18px; height: 18px; }
}
@container sum (max-width: 320px) {
  .when code, .when .sep { display: none; }
}
@container pil (max-width: 700px) {
  .chip { display: none; }
}
@container aud (max-width: 560px) {
  .a-detail { font-size: 11px; letter-spacing: -0.1px; }
  .a-row { column-gap: 8px; }
}
@container aud (max-width: 520px) {
  .a-row .live { width: 16px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .live-key { display: inline-flex; }
}
@container vib (max-width: 430px) {
  .d-est { display: none; }
}
@container vib (max-width: 340px) {
  .metric .live { display: none; }
}

/* ---------- motion preferences ---------- */
.paused *, .paused *::before, .paused *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .ph::after { animation: none; }
  .gbtn, .clr, .pk, .peek, .tag, .pill-bg, .p-ico svg, .bar::before, .progress { transition-duration: 1ms; }
  .arrive > .app .g-glint { animation: none; }
  .gauge.spinning .g-spin, .gauge.spinning .g-ind { animation: none; }
  .gauge.spin .g-ind { stroke-dashoffset: 260; stroke: var(--ins-blue); transform: rotate(-90deg); }
  [data-state="scanning"] > .app .pbar { display: none; }
  .pdet { display: block; }
  [data-state="scanning"] > .app .dist .shim::before { animation: none; }
  .a-row[data-s="active"] .shape { animation: none; border-color: var(--ins-blue); }
  .a-row[data-s="active"] .a-detail::after { animation: none; content: "..."; }
  .a-row.land .shape, .a-row.land .live::before { animation: none; }
  .cwv-v.measuring::after { animation: none; }
  .frame.on .blk { transition: opacity 120ms linear; transform: none; }
  .blk { transform: none; }
  .frame.snap::after { animation: none; }
  [data-state="done"] > .app .rv, [data-state="done"] > .app .d-row { animation: fade 150ms linear both; animation-delay: 0ms; }
  [data-state="done"] > .app .seg { animation: none; }
  [data-state="done"] > .app .pin { animation: none; }
  .a-cursor, .mode-ink, .modes.snap .mode-ink { transition-duration: 1ms; }
  .ripple { display: none; }
  .dlg[open] { animation: fade 120ms linear; }
  .dlg[open]::backdrop { animation: none; }
}