/* ==========================================================================
   TAGSCOPE — Aurora theme
   Calm neutrals, one soft violet → coral → amber glow, light and dark modes.
   Token names are kept from the first theme so existing rules switch over:
   --pink is "the accent colour" (Aurora violet), --black is the page background.
   ========================================================================== */

@font-face { font-family: 'Bricolage Grotesque'; src: url('../fonts/bricolage-grotesque.woff') format('woff'); font-weight: 500 800; font-stretch: 85% 100%; font-display: swap; }
@font-face { font-family: 'Onest'; src: url('../fonts/onest.woff') format('woff'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jetbrains-mono.woff') format('woff'); font-weight: 100 800; font-display: swap; }

:root {
  /* Theme-independent */
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --pill: 999px;
  --f-display: 'Bricolage Grotesque', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-body: 'Onest', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --f-serif: var(--f-display);
  --f-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1320px;
  --gutter: clamp(16px, 4vw, 56px);
  --on-accent: #FFFFFF;
}

/* Dark (also the fallback before the theme script runs) */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --black: #100E1A;          /* page background */
  --ink: #0C0A15;            /* recessed bands */
  --panel: #17142A;
  --panel-2: #1D1A32;
  --panel-3: #26213F;
  --line: #2B2643;
  --line-2: #3A3458;
  --text: #EEEAF8;
  --text-2: #CFC9E4;
  --muted: #9D96BA;
  --dim: #746D92;

  --violet: #8C74FF;
  --coral: #FF8577;
  --amber: #FFC266;
  --pink: var(--violet);     /* accent */
  --pink-soft: #B8A9FF;
  --pink-deep: #A08CFF;
  --blue: #6E8BFF;
  --grad: linear-gradient(95deg, #7B61FF 0%, #A46BF0 40%, #F0778E 78%, #FF9C6E 100%);
  --grad-soft: linear-gradient(90deg, rgba(140,116,255,.22), rgba(255,133,119,.22));
  /* Filled surfaces that carry white text: deep enough for 4.5:1 across the whole fill */
  --accent-fill: #6E55F0;
  --grad-fill: linear-gradient(95deg, #6E55F0 0%, #9A4FE6 48%, #C2477F 100%);
  --glow-a: .5;
  --glow-3: #FF7FA8;

  --ok: #3DD68C;
  --warn: #F5B83D;
  --bad: #FF6B78;
  --info: #9DB2FF;
  --on-status: #100E1A;      /* text/ticks on a solid status colour */

  /* Inverted surfaces (selected segment, primary white pill, toast) */
  --inv-bg: #EEEAF8;
  --inv-text: #17142A;
  --inv-muted: #5A5474;

  /* Code, data and syntax colours */
  --code-bg: #0B0916;
  --code-text: #D8D3EA;
  --d-yellow: #FFD166;
  --d-mint: #7FE7C4;
  --d-blue: #9DB2FF;
  --d-pink: #F79BDC;
  --d-lilac: #C9A7FF;
  --d-sky: #7FD1FF;
  --d-orange: #FF9F7F;
  --d-red: #FCA5A5;
  --d-grey: #A8A3BD;
  --d-comment: #6A6485;
  --d-cream: #FFE3A8;
  --ink-mix: 100%;           /* vendor/category hues used as text: shown as-is */

  --scrim: rgba(6, 4, 14, .62);
  --player-bg: #000;
  --player-veil: radial-gradient(ellipse at center, rgba(0,0,0,.2), rgba(0,0,0,.75));
  --shadow-rgb: 0 0 0;
  --shadow-k: 1;
  --card-shadow: none;
}

:root[data-theme="light"] {
  color-scheme: light;
  --black: #FBFAFF;
  --ink: #F4F2FB;
  --panel: #FFFFFF;
  --panel-2: #F7F5FD;
  --panel-3: #EEEAF8;
  --line: #E7E3F3;
  --line-2: #D6D0EA;
  --text: #17142A;
  --text-2: #3F3957;
  --muted: #6A6485;
  --dim: #8A84A3;

  --violet: #6C4DF6;
  --coral: #FF6F61;
  --amber: #FFB648;
  --pink: var(--violet);
  --pink-soft: #8F78FF;
  --pink-deep: #5236E0;
  --blue: #3D5BD9;
  --grad: linear-gradient(95deg, #6C4DF6 0%, #9A4FE6 42%, #F0607A 80%, #FF8A5C 100%);
  --grad-soft: linear-gradient(90deg, rgba(108,77,246,.14), rgba(255,111,97,.14));
  --accent-fill: #6C4DF6;
  --grad-fill: linear-gradient(95deg, #6C4DF6 0%, #9A4FE6 48%, #C2477F 100%);
  --glow-a: .55;
  --glow-3: var(--amber);

  --ok: #0F7A50;
  --warn: #946000;
  --bad: #D93A48;
  --info: #3D5BD9;
  --on-status: #FFFFFF;

  --inv-bg: #17142A;
  --inv-text: #FBFAFF;
  --inv-muted: #B9B3D3;

  --code-bg: #F4F2FB;
  --code-text: #2B2640;
  --d-yellow: #8A6200;
  --d-mint: #0B7F5C;
  --d-blue: #3552C7;
  --d-pink: #B4307F;
  --d-lilac: #6B45C8;
  --d-sky: #0A6F9E;
  --d-orange: #B84A1C;
  --d-red: #B3303C;
  --d-grey: #6A6485;
  --d-comment: #8E88A6;
  --d-cream: #7A5A10;
  --ink-mix: 58%;            /* darken pastel vendor hues toward the text colour so they stay readable */

  --scrim: rgba(23, 20, 42, .32);
  --player-bg: #E9E6F3;
  --player-veil: radial-gradient(ellipse at center, rgba(255,255,255,0), rgba(23,20,42,.16));
  --shadow-rgb: 52 38 120;
  --shadow-k: .32;
  --card-shadow: 0 1px 2px rgba(23,20,42,.04), 0 10px 28px -18px rgba(76,52,170,.22);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--black);
  color: var(--text);
  font: 400 15px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
::selection { background: var(--accent-fill); color: var(--on-accent); }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
code, kbd, pre, .mono { font-family: var(--f-mono); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Band (pink header / footer) ---------- */
/* ---------- Header & footer band ---------- */
/* Aurora: one soft violet → coral → amber glow behind the top of the page. It's the single decorative
   flourish; everything else stays on calm neutrals. */
body { isolation: isolate; }
.aurora { position: absolute; top: 0; left: 0; right: 0; height: 980px; overflow: hidden; z-index: -1; pointer-events: none; }
.aurora::before {
  content: ""; position: absolute; inset: -35% -12% auto -12%; height: 900px;
  opacity: var(--glow-a); filter: blur(80px);
  background:
    radial-gradient(36% 44% at 16% 40%, var(--violet), transparent 70%),
    radial-gradient(30% 40% at 58% 26%, var(--coral), transparent 72%),
    radial-gradient(28% 34% at 88% 54%, var(--glow-3), transparent 72%);
}
:root[data-theme="dark"] .aurora::before, :root:not([data-theme]) .aurora::before { mix-blend-mode: screen; filter: blur(90px) saturate(1.15); }
.aurora::after { content: ""; position: absolute; inset: auto 0 0 0; height: 260px; background: linear-gradient(to bottom, transparent, var(--black)); }

.band {
  position: relative;
  color: var(--text);
  min-height: 112px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 22px var(--gutter);
}
.band-nav { display: flex; gap: 8px; align-items: center; }
.band-nav--right { justify-content: flex-end; }
.band-nav a, .band-nav button, .edge-pill {
  font: 500 14px/1 var(--f-body);
  letter-spacing: 0;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: var(--pill);
  border: 1px solid var(--line-2);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--text-2);
  transition: background .2s, color .2s, border-color .2s;
}
.band-nav a:hover, .band-nav button:hover { border-color: var(--text); color: var(--text); background: var(--panel); }
.band-nav a, .band-nav button, .edge-pill { white-space: nowrap; }
/* Header responsiveness. Wide: [tools + Feedback] — logo — [Guide, Support, Edge].
   Mid: slightly tighter pills and logo so three pills fit each side without wrapping.
   Narrow: logo on its own row, then every pill flows centered on the row(s) beneath. */
/* Mirror the two groups: each fills its half of the header (outer edge on the page gutter, inner
   edge an equal gap from the logo) and its pills share the width, so the sides line up. */
#top { column-gap: 24px; }
#top .band-nav { width: 100%; max-width: 480px; }
#top .band-nav--left { justify-self: start; }
#top .band-nav--right { justify-self: end; }
#top .band-nav > a, #top .band-nav > button, #top .band-nav > .edge-pill { flex: 1 1 auto; justify-content: center; text-align: center; }
#top .band-nav > a { display: inline-flex; align-items: center; }
@media (max-width: 1360px) {
  #top .band-nav { gap: 6px; }
  #top .band-nav a, #top .band-nav button, #top .edge-pill { padding: 9px 13px; font-size: 13.5px; }
  #top .logo-pill { font-size: clamp(26px, 2.6vw, 34px); }
}
@media (max-width: 1180px) {
  #top { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 6px; min-height: 0; padding-top: 26px; padding-bottom: 30px; }
  #top::before { content: ""; flex-basis: 100%; height: 0; order: 1; }
  #top .logo-pill { order: 0; }
  #top .band-nav { display: contents; }
  #top .band-nav > * { order: 2; }
  /* The theme toggle sits in the corner, level with the logo, instead of taking a row of its own. */
  #top { position: relative; }
  #top .band-nav .theme-btn { position: absolute; top: 22px; right: var(--gutter); order: 0; }
}
/* Nav pills with an icon (Support, Feedback) — same outlined pill as Guide/Edge for visual
   consistency, not a filled button, just with room for a small leading glyph. */
.band-nav .icon-pill { display: inline-flex !important; gap: 6px; align-items: center; cursor: pointer; }
.band-nav .icon-pill svg { width: 14px; height: 14px; flex: none; }
.edge-pill { display: inline-flex; gap: 8px; align-items: center; cursor: default; }
.edge-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); }
.edge-pill.is-up i { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.edge-pill.is-down i { background: var(--bad); }
.edge-pill b { font-weight: 500; }

/* Theme toggle */
.band-nav .theme-btn { flex: 0 0 auto !important; width: 38px; height: 38px; padding: 0; display: inline-grid !important; place-items: center; }
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn .i-sun { display: none; }
:root[data-theme="dark"] .theme-btn .i-sun { display: block; }
:root[data-theme="dark"] .theme-btn .i-moon { display: none; }

.logo-pill {
  display: inline-flex; align-items: center; gap: 12px;
  color: var(--text);
  text-decoration: none;
  font: 700 clamp(26px, 2.9vw, 38px)/1 var(--f-display);
  font-stretch: 90%;
  letter-spacing: -0.025em;
  transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.logo-pill:hover { transform: translateY(-1px); }
.logo-pill:focus-visible { outline: 2px solid var(--pink); outline-offset: 6px; border-radius: 10px; }
.logo-pill--sm { font-size: 24px; gap: 10px; }

.band--foot { min-height: 120px; grid-template-columns: auto 1fr; gap: 24px; background: var(--ink); border-top: 1px solid var(--line); color: var(--text-2); }
.band--foot .foot-note { justify-self: end; margin: 0; font: 400 14px/1.5 var(--f-body); color: var(--muted); }

/* ---------- Hero ---------- */
.hero { padding: clamp(48px, 6.5vw, 96px) 0 clamp(44px, 5vw, 72px); }
.display {
  margin: 0;
  font: 700 clamp(52px, 9.2vw, 136px)/.94 var(--f-display);
  font-stretch: 92%;
  letter-spacing: -.028em;
}
.display--md { font-size: clamp(48px, 7.4vw, 112px); }
.display--sm { font-size: clamp(44px, 5.6vw, 84px); }
.hero-foot {
  margin-top: clamp(28px, 4vw, 48px);
  display: flex; gap: 32px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap;
}
.lede {
  margin: 0; max-width: 700px;
  font: 400 clamp(19px, 2.1vw, 30px)/1.32 var(--f-body);
  letter-spacing: -0.012em;
  color: var(--text);
}

/* ---------- Buttons ---------- */
.btn-grad {
  --h: 64px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--h);
  padding: 0 46px;
  border: 0; border-radius: var(--pill);
  background: var(--grad-fill);
  background-size: 100% 100%;
  background-position: 0% 0;
  color: var(--on-accent);
  font: 650 clamp(17px, 1.5vw, 20px)/1 var(--f-body);
  letter-spacing: 0;
  text-decoration: none;
  transition: background-position .6s cubic-bezier(.2,.8,.2,1), transform .2s, box-shadow .3s;
  box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--pink) 80%, transparent);
}
.btn-grad:hover { background-size: 135% 100%; background-position: 100% 0; transform: translateY(-1px); box-shadow: 0 18px 48px -16px color-mix(in srgb, var(--pink) 55%, transparent); }
.btn-grad:active { transform: translateY(1px); }
.btn-grad:focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
.btn-grad--xl { --h: 72px; padding: 0 64px; font-size: clamp(18px, 1.9vw, 24px); }
.btn-grad.is-busy span::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 14px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff; animation: spin .8s linear infinite; vertical-align: -1px; }
@keyframes spin { to { transform: rotate(360deg); } }

.pill-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--pill);
  padding: 10px 18px;
  font: 600 14px/1 var(--f-body);
  letter-spacing: 0;
  color: var(--text);
  transition: border-color .2s, background .2s, color .2s;
  white-space: nowrap;
}
.pill-ghost:hover { border-color: var(--text); }
a.pill-ghost, a.pill-white { text-decoration: none; }
.pill-ghost.sm { padding: 8px 14px; font-size: 11.5px; }
.pill-ghost.is-on, .pill-ghost[aria-pressed="true"] { background: var(--inv-bg); color: var(--inv-text); border-color: var(--inv-bg); }
.pill-white { background: var(--inv-bg); color: var(--inv-text); border: 0; border-radius: var(--pill); padding: 10px 18px; font: 600 14px/1 var(--f-body); letter-spacing: 0; }
.pill-white:hover { background: var(--pink-soft); }
.link-btn { background: none; border: 0; padding: 4px 6px; color: var(--muted); font: 500 12px/1 var(--f-body); border-radius: 6px; }
.link-btn:hover { color: var(--text); background: var(--panel-3); }
.icon-btn { background: var(--panel-3); border: 1px solid var(--line-2); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--text); }
.icon-btn:hover { border-color: var(--text); }
.caret { font-size: 10px; opacity: .7; }

/* ---------- Console ---------- */
.console { padding: 12px 0 64px; }
.console-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg button {
  background: transparent; border: 1px solid var(--line-2);
  border-radius: var(--pill);
  padding: 11px 18px;
  font: 600 14px/1 var(--f-body); letter-spacing: 0;
  color: var(--text-2);
  transition: all .2s;
}
.seg button:hover { border-color: var(--text); color: var(--text); }
.seg button.is-on { background: var(--inv-bg); color: var(--inv-text); border-color: var(--inv-bg); }
.head-actions { display: flex; gap: 8px; }

.menu { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: min(420px, 86vw); max-height: 440px; overflow: auto;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 8px; display: none;
  box-shadow: 0 30px 60px -20px rgb(var(--shadow-rgb) / calc(0.8 * var(--shadow-k)));
}
.menu.is-open .menu-pop { display: block; }
.menu-pop h5 { margin: 10px 10px 6px; font: 600 12px/1 var(--f-body); letter-spacing: 0; color: var(--dim); }
.menu-item { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 10px 12px; border-radius: 10px; color: var(--text); }
.menu-item:hover { background: var(--panel-3); }
.menu-item b { display: block; font: 600 13.5px/1.3 var(--f-body); }
.menu-item small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.menu-empty { padding: 14px 12px; color: var(--muted); font-size: 13px; }

.editor {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.editor:focus-within { border-color: var(--muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 8%, transparent); }
.editor.is-drag { border-color: var(--pink); }
.editor-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px 12px 18px; border-bottom: 1px solid var(--line); }
.det { display: inline-flex; gap: 10px; align-items: center; font: 600 13.5px/1 var(--f-body); letter-spacing: 0; color: var(--muted); min-width: 0; }
.det #detected { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.det-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--dim); flex: none; }
.det.is-live { color: var(--text); }
.det.is-live .det-dot { background: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 18%, transparent); }
.editor-tools { display: inline-flex; gap: 4px; align-items: center; }
.count { color: var(--dim); font: 500 11.5px/1 var(--f-mono); margin-left: 8px; }
#tagInput {
  display: block; width: 100%;
  min-height: 230px; max-height: 60vh;
  resize: vertical;
  background: transparent; border: 0; outline: none;
  padding: 18px 20px 22px;
  color: var(--text);
  font: 400 13.5px/1.65 var(--f-mono);
  tab-size: 2;
}
#tagInput::placeholder { color: var(--dim); }
.drop-hint { position: absolute; inset: 48px 0 0; display: none; place-items: center; background: color-mix(in srgb, var(--pink) 8%, transparent); color: var(--pink); font: 700 14px var(--f-display); letter-spacing: -.005em; pointer-events: none; }
.editor.is-drag .drop-hint { display: grid; }

.options {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.opt {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px;
  min-width: 0;
}
.opt.is-dim { opacity: .45; }
.opt--toggles { grid-column: 1 / -1; }
.opt-l { font: 600 12px/1 var(--f-body); letter-spacing: 0; color: var(--dim); }
.opt-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.opt select, .opt input[type=number], .field {
  appearance: none; -webkit-appearance: none;
  background: var(--panel-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239A9AA6'/%3E%3C/svg%3E") no-repeat right 14px center;
  border: 1px solid var(--line-2); border-radius: 12px;
  padding: 10px 34px 10px 12px;
  font: 500 13.5px/1.2 var(--f-body);
  color: var(--text); width: 100%;
  outline: none;
}
.opt input[type=number] { background-image: none; padding-right: 10px; width: 78px; }
.opt select:focus, .opt input:focus, .field:focus { border-color: var(--pink); }
.custom-size { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.field { background-image: none; padding-right: 12px; }

.toggles { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.tgl { display: inline-flex; align-items: center; gap: 10px; font: 500 13.5px/1 var(--f-body); color: var(--text-2); cursor: pointer; user-select: none; }
.tgl input { position: absolute; opacity: 0; pointer-events: none; }
.tgl i { width: 36px; height: 20px; border-radius: var(--pill); background: var(--panel-3); border: 1px solid var(--line-2); position: relative; transition: background .2s, border-color .2s; flex: none; }
.tgl i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform .25s cubic-bezier(.2,.8,.2,1), background .2s; }
.tgl input:checked + i { background: var(--accent-fill); border-color: var(--accent-fill); }
.tgl input:checked + i::after { transform: translateX(16px); background: var(--on-accent); }
.tgl input:focus-visible + i { outline: 2px solid var(--pink); outline-offset: 2px; }

.run-row { display: flex; align-items: center; gap: 22px; margin-top: 26px; flex-wrap: wrap; }
.kbd { color: var(--dim); font-size: 12.5px; }
kbd { font: 500 11px/1 var(--f-mono); background: var(--panel-3); border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 6px; padding: 3px 6px; color: var(--text-2); }
.run-status { color: var(--muted); font-size: 13.5px; }
.run-status b { color: var(--text); font-weight: 600; }

/* ---------- Results ---------- */
.results { padding: 8px 0 80px; border-top: 1px solid var(--line); }
.res-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; flex-wrap: wrap; padding: 48px 0 28px; }
.res-title { min-width: 0; flex: 1 1 520px; }
.kind { display: inline-block; font: 600 12.5px/1 var(--f-body); letter-spacing: 0; color: var(--on-accent); background: var(--accent-fill); padding: 7px 12px; border-radius: var(--pill); }
.res-title h2 { margin: 14px 0 8px; font: 700 clamp(34px, 4.4vw, 58px)/1 var(--f-display); font-stretch: 92%; letter-spacing: -.025em; word-break: break-word; }
.res-title p { margin: 0; color: var(--muted); font-size: 14.5px; word-break: break-all; }
.res-side { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.res-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.verdict { display: inline-flex; align-items: center; gap: 14px; padding: 10px 12px 10px 20px; border-radius: var(--pill); border: 1px solid var(--line-2); background: var(--panel); }
.verdict-word { font: 800 22px/1 var(--f-display); letter-spacing: -.01em; }
.verdict.ok .verdict-word { color: var(--ok); }
.verdict.warn .verdict-word { color: var(--warn); }
.verdict.bad .verdict-word { color: var(--bad); }
.verdict.run .verdict-word { color: var(--pink); }
.verdict-counts { display: inline-flex; gap: 6px; }
.vc { font: 600 12px/1 var(--f-mono); padding: 7px 10px; border-radius: var(--pill); background: var(--panel-3); }
.vc.ok { color: var(--ok); } .vc.warn { color: var(--warn); } .vc.bad { color: var(--bad); }

.tiles { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 16px 18px 18px; min-width: 0; position: relative; overflow: hidden; }
.tile-l { font: 600 12px/1 var(--f-body); letter-spacing: 0; color: var(--dim); }
.tile-v { margin-top: 12px; font: 700 clamp(22px, 2.4vw, 32px)/1 var(--f-display); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile-v small { font-size: .5em; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.tile-s { margin-top: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile.ok::before, .tile.warn::before, .tile.bad::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.tile.ok::before { background: var(--ok); } .tile.warn::before { background: var(--warn); } .tile.bad::before { background: var(--bad); }

.vendors { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 6px; min-height: 8px; }
.vchip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: var(--pill); background: var(--panel); border: 1px solid var(--line); font: 500 12.5px/1 var(--f-body); color: var(--text-2); }
.vchip i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--muted)); }
.vchip small { color: var(--dim); font-size: 11px; }

.tabs { display: flex; gap: 6px; margin: 26px 0 16px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; border-bottom: 1px solid var(--line); }
.tabs::-webkit-scrollbar { display: none; }
.tab { background: none; border: 0; padding: 12px 16px 14px; font: 600 14.5px/1 var(--f-body); letter-spacing: 0; color: var(--muted); position: relative; white-space: nowrap; }
.tab:hover { color: var(--text); }
.tab.is-on { color: var(--text); }
/* One indicator that slides between tabs (results.js moves it), instead of one per tab. */
.res-tabs { position: sticky; top: 0; z-index: 30; background: var(--black); align-items: stretch; }
.tab-ink { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad); border-radius: 2px; pointer-events: none; opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), width .35s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.tab-ink.no-anim { transition: none; }
/* Pinned: a compact "which result is this" label leads the bar. */
.res-mini { display: none; align-self: center; flex: none; max-width: 210px; padding: 0 14px 0 2px; margin-right: 6px; border-right: 1px solid var(--line-2); font: 700 13px/1.2 var(--f-display); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-tabs.is-stuck { box-shadow: 0 12px 24px -16px rgb(var(--shadow-rgb) / calc(0.9 * var(--shadow-k))); }
.res-tabs.is-stuck .res-mini { display: block; }
/* the title stays put while the tabs scroll sideways beneath it */
.res-tabs.is-stuck .res-mini { position: sticky; left: 0; z-index: 1; background: var(--black); padding-left: 6px; margin-left: -6px; }
/* Pinned, the bar also carries the mini title, so the tabs tighten up to keep every one in view */
.res-tabs.is-stuck { gap: 2px; }
.res-tabs.is-stuck .tab { padding-left: 11px; padding-right: 11px; }

/* Verdict ring */
.vring { width: 30px; height: 30px; flex: none; transform: rotate(-90deg); margin-left: -6px; }
.vring circle { fill: none; stroke-width: 4; stroke-linecap: butt; }
.vring .vr-track { stroke: var(--panel-3); }
.vring .vr-ok { stroke: var(--ok); } .vring .vr-warn { stroke: var(--warn); } .vring .vr-bad { stroke: var(--bad); }
.vring .vr-spin { stroke: var(--pink); stroke-linecap: round; }
.vring.is-run { animation: vr-rot 1s linear infinite; }
@keyframes vr-rot { to { transform: rotate(270deg); } }
.vring.is-draw circle:not(.vr-track) { animation: vr-draw .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vr-draw { from { stroke-dasharray: 0 95; } }
.verdict.ok, .verdict.warn, .verdict.bad { transition: border-color .4s; }

/* Skeleton tiles while a scan runs */
.tile--skel { display: grid; gap: 12px; align-content: start; }
.tile--skel i { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2)); background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite; }
.tile--skel i:nth-child(1) { width: 55%; }
.tile--skel i:nth-child(2) { width: 40%; height: 26px; }
.tile--skel i:nth-child(3) { width: 75%; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
/* On phones the live scan panel matters more than placeholder tiles */
@media (max-width: 600px) { .res-tiles.is-skel .tile--skel:nth-child(n+3) { display: none; } }
.tab .n { display: inline-block; margin-left: 6px; font: 600 10.5px/1 var(--f-mono); padding: 3px 6px; border-radius: 6px; background: var(--panel-3); color: var(--text-2); }
.tab .n.bad { color: var(--bad); } .tab .n.warn { color: var(--warn); }

.panel { display: none; }
.panel.is-on { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; min-width: 0; }
.card + .card { margin-top: 14px; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.card-h h3 { margin: 0; font: 700 15px/1.2 var(--f-display); letter-spacing: -.005em; }
.card-h h3 small { color: var(--dim); font-weight: 600; margin-left: 8px; letter-spacing: .02em; }
.card-h .sub { color: var(--muted); font-size: 13px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.grid-2 > .card + .card, .grid-2 .card + .card { margin-top: 0; }
.stack { display: grid; gap: 14px; align-content: start; min-width: 0; }
.stack > .card + .card { margin-top: 0; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 12.5px; }
.empty { padding: 28px; text-align: center; color: var(--muted); border: 1px dashed var(--line-2); border-radius: var(--r); font-size: 14px; }

/* ---------- Stage (preview) ---------- */
.stage-wrap { display: grid; gap: 12px; }
.stage-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.stage-bar .grp { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.stage {
  position: relative;
  border-radius: var(--r);
  border: 1px solid var(--line);
  min-height: 360px;
  display: grid; place-items: center;
  padding: 36px 20px 48px;
  overflow: auto;
  background-color: #0B0B0E;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 16px 16px;
}
.stage.bg-light { background-color: #F4F4F6; background-image: radial-gradient(rgba(0,0,0,.08) 1px, transparent 1px); }
.stage.bg-checker { background-color: #fff; background-image: conic-gradient(#e6e6ea 25%, #fff 0 50%, #e6e6ea 0 75%, #fff 0); background-size: 18px 18px; }
.slot-box { position: relative; max-width: 100%; }
.slot { position: relative; transition: width .35s cubic-bezier(.2,.8,.2,1), height .35s cubic-bezier(.2,.8,.2,1); }
.slot iframe { display: block; border: 0; width: 100%; height: 100%; background: transparent; }
.slot::after { content: ""; position: absolute; inset: -1px; border: 1px dashed color-mix(in srgb, var(--pink) 55%, transparent); pointer-events: none; border-radius: 2px; }
.slot-label { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font: 500 11.5px/1 var(--f-mono); color: var(--muted); background: rgba(0,0,0,.6); padding: 6px 10px; border-radius: var(--pill); white-space: nowrap; }
.stage.bg-light .slot-label, .stage.bg-checker .slot-label { background: rgba(0,0,0,.75); color: #fff; }
.live { display: inline-flex; align-items: center; gap: 8px; font: 600 13px/1 var(--f-body); letter-spacing: 0; color: var(--pink); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: var(--pink); animation: pulse 1.4s ease-in-out infinite; }
.live.is-done { color: var(--ok); } .live.is-done i { background: var(--ok); animation: none; }
@keyframes pulse { 50% { opacity: .25; } }

/* ---------- Feed ---------- */
.feed { list-style: none; margin: 0; padding: 0; max-height: 520px; overflow: auto; font-size: 13px; }
.feed li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); }
.feed li:last-child { border-bottom: 0; }
.feed .t { font: 500 11.5px/1.6 var(--f-mono); color: var(--dim); }
.feed .m { min-width: 0; word-break: break-word; color: var(--text-2); }
.feed .m b { color: var(--text); font-weight: 600; }
.feed .m code { font-size: 11.5px; color: var(--pink-soft); word-break: break-all; }
.feed li.bad .m b { color: var(--bad); } .feed li.warn .m b { color: var(--warn); } .feed li.ok .m b { color: var(--ok); } .feed li.pink .m b { color: var(--pink); }

/* ---------- Tables ---------- */
.tbl-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r); max-height: 640px; max-width: 100%; min-width: 0; box-sizing: border-box; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { position: sticky; top: 0; z-index: 1; background: var(--panel-2); text-align: left; font: 600 12px/1 var(--f-body); letter-spacing: 0; color: var(--dim); padding: 12px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--text-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--text) 2.5%, transparent); }
.tbl tr.click { cursor: pointer; }
.tbl .num { text-align: right; font-family: var(--f-mono); font-size: 12px; white-space: nowrap; }
.tbl .url { font: 400 12px/1.5 var(--f-mono); color: var(--text-2); word-break: break-all; overflow-wrap: anywhere; min-width: 260px; }
.tbl .url .host { color: var(--text); font-weight: 600; }
.tbl .url .path { color: var(--muted); }
.tbl .nowrap { white-space: nowrap; }
/* Params tables (Click-through / tracker "Parameters" breakdowns) can nest a table-within-a-table-cell
   (decoded destination URL → its own query params → a further-decoded param, etc). With the default
   auto table layout, a nested table's content-based min-width compounds at every level and can force
   the whole thing wider than its card, bleeding into the next column — this is what caused the
   click-through URL text to overflow/overlap the Live activity panel. Fixed layout removes the
   content-based sizing entirely so long macro-filled URLs wrap inside their cell instead. */
.tbl--params { table-layout: fixed; }
.tbl--params .url { min-width: 0; }
.tbl--params .param-nested { max-width: 100%; overflow: hidden; }
.tbl--params .param-nested .tbl-wrap { max-width: 100%; }
.kv { display: grid; grid-template-columns: minmax(120px, 190px) 1fr; gap: 0; font-size: 13.5px; }
.kv > div { padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.kv > div:nth-last-child(-n+2) { border-bottom: 0; }
.kv .k { color: var(--muted); padding-right: 14px; }
.kv .v { color: var(--text); word-break: break-word; }
.kv .v.mono { font: 400 12.5px/1.5 var(--f-mono); word-break: break-all; }

/* chips */
.chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--f-body); letter-spacing: 0; padding: 5px 8px; border-radius: 6px; background: var(--panel-3); color: var(--text-2); white-space: nowrap; }
.chip.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); }
.chip.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.chip.bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.chip.pink { color: var(--pink); background: color-mix(in srgb, var(--pink) 12%, transparent); }
.chip.info { color: var(--info); background: color-mix(in srgb, var(--info) 10%, transparent); }
.chip.t-script { color: var(--d-yellow); } .chip.t-image { color: var(--d-mint); } .chip.t-xhr, .chip.t-fetch { color: var(--d-blue); }
.chip.t-beacon { color: var(--d-pink); } .chip.t-doc { color: var(--d-lilac); } .chip.t-css { color: var(--d-sky); } .chip.t-font { color: var(--d-grey); }
.chip.t-media { color: var(--d-orange); } .chip.t-vast { color: var(--pink); } .chip.t-tracker { color: var(--d-pink); } .chip.t-other { color: var(--d-grey); }

/* filters */
.filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fbtn { background: none; border: 1px solid var(--line-2); border-radius: var(--pill); padding: 7px 12px; font: 600 12.5px/1 var(--f-body); letter-spacing: 0; color: var(--muted); }
.fbtn:hover { color: var(--text); border-color: var(--muted); }
.fbtn.is-on { background: var(--inv-bg); color: var(--inv-text); border-color: var(--inv-bg); }
.fbtn .n { opacity: .6; margin-left: 4px; font-family: var(--f-mono); }
.search { background: var(--panel-3); border: 1px solid var(--line-2); border-radius: var(--pill); padding: 8px 14px; font-size: 13px; color: var(--text); outline: none; min-width: 200px; }
.search:focus { border-color: var(--pink); }

/* waterfall */
.wf { position: relative; height: 10px; min-width: 140px; background: color-mix(in srgb, var(--text) 3%, transparent); border-radius: 3px; margin-top: 4px; }
.wf b { position: absolute; top: 0; bottom: 0; border-radius: 3px; min-width: 2px; background: var(--c, var(--pink)); opacity: .9; }
.wf .mk { position: absolute; top: -3px; bottom: -3px; width: 1px; background: color-mix(in srgb, var(--text) 35%, transparent); }

/* checks */
.checks { list-style: none; margin: 0; padding: 0; }
.check { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; padding: 14px 4px; border-bottom: 1px solid var(--line); }
.check:last-child { border-bottom: 0; }
.check .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 800 12px/1 var(--f-display); color: var(--on-status); margin-top: 1px; }
.check.pass .ic { background: var(--ok); } .check.warn .ic { background: var(--warn); } .check.fail .ic { background: var(--bad); } .check.info .ic { background: var(--panel-3); color: var(--info); border: 1px solid var(--line-2); }
.check h4 { margin: 0; font: 600 14.5px/1.35 var(--f-body); color: var(--text); }
.check p { margin: 4px 0 0; color: var(--muted); font-size: 13px; word-break: break-word; }
.check p code { font-size: 12px; color: var(--pink-soft); word-break: break-all; }
.check .cat { font: 600 11.5px/1 var(--f-body); letter-spacing: 0; color: var(--dim); padding-top: 5px; white-space: nowrap; }
.check-group + .check-group { margin-top: 10px; }
.check-group > h5 { margin: 12px 0 2px; font: 600 12.5px/1 var(--f-body); letter-spacing: 0; color: var(--pink); }

/* code */
.code { margin: 0; background: var(--code-bg); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; overflow: auto; max-height: 640px; font: 400 12.5px/1.65 var(--f-mono); color: var(--code-text); white-space: pre-wrap; word-break: break-all; tab-size: 2; }
.code .tg { color: var(--pink); } .code .at { color: var(--d-blue); } .code .av { color: var(--d-mint); }
.code .cd { color: var(--d-lilac); } .code .cm { color: var(--d-comment); font-style: italic; } .code .pi { color: var(--muted); }
.code .u { color: var(--d-cream); } .code .mc { color: var(--on-accent); background: var(--accent-fill); border-radius: 3px; padding: 0 2px; }
.code .jk { color: var(--d-blue); } .code .js { color: var(--d-mint); } .code .jn { color: var(--d-yellow); } .code .jb { color: var(--pink); }

/* xml tree */
.tree { font: 400 12.5px/1.7 var(--f-mono); max-height: 640px; overflow: auto; }
.tree details { padding-left: 16px; border-left: 1px solid var(--line); margin-left: 4px; }
.tree summary { cursor: pointer; list-style: none; margin-left: -16px; padding-left: 16px; position: relative; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary::before { content: "▸"; position: absolute; left: 2px; color: var(--dim); transition: transform .15s; }
.tree details[open] > summary::before { transform: rotate(90deg); }
.tree .tn { color: var(--pink); } .tree .ta { color: var(--d-blue); } .tree .tv { color: var(--d-mint); } .tree .tt { color: var(--text-2); word-break: break-all; }
.tree .leaf { padding-left: 16px; margin-left: 4px; border-left: 1px solid var(--line); }

/* VAST */
.chain { display: grid; gap: 0; }
.hop { display: grid; grid-template-columns: 44px 1fr; gap: 16px; position: relative; }
.hop::before { content: ""; position: absolute; left: 21px; top: 44px; bottom: -4px; width: 2px; background: var(--line-2); }
.hop:last-child::before { display: none; }
.hop-n { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 800 15px/1 var(--f-display); background: var(--panel-3); border: 1px solid var(--line-2); color: var(--text); z-index: 1; }
.hop.inline .hop-n { background: var(--grad-fill); border: 0; color: var(--on-accent); }
.hop.err .hop-n { background: var(--bad); color: var(--on-status); border: 0; }
.hop-body { padding-bottom: 22px; min-width: 0; }
.hop-body h4 { margin: 10px 0 6px; font: 700 15px/1.2 var(--f-display); letter-spacing: -.005em; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hop-url { font: 400 12px/1.5 var(--f-mono); color: var(--muted); word-break: break-all; overflow-wrap: anywhere; max-width: 100%; }
.hop-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }

.vcard { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.vcard + .vcard { margin-top: 14px; }
.vcard-head { padding: 18px 22px; background: var(--panel-2); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; }
.vcard-head h3 { margin: 0; font: 700 20px/1.2 var(--f-display); letter-spacing: -.01em; }
.vcard-head .tags { display: flex; gap: 6px; flex-wrap: wrap; }
.vcard-body { padding: 20px 22px; display: grid; gap: 22px; }
.sec-h { font: 600 12.5px/1 var(--f-body); letter-spacing: 0; color: var(--pink); margin: 0 0 10px; }

.matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.mx { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--panel-2); }
.mx .e { font: 600 12px/1.2 var(--f-mono); color: var(--text); }
.mx .c { margin-top: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.mx.none { opacity: .45; }
.mx.fired { border-color: color-mix(in srgb, var(--ok) 50%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ok) 15%, transparent); }
.mx.fired .e::after { content: " ✓"; color: var(--ok); }

/* player */
.player { position: relative; background: var(--player-bg); border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 9; border: 1px solid var(--line); }
.player video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--player-bg); }
.player .vpaid-slot, .player .ima-slot { position: absolute; inset: 0; }
.player-overlay { position: absolute; inset: 0; display: grid; place-items: center; background: var(--player-veil); z-index: 5; }
.play-big { width: 88px; height: 88px; border-radius: 50%; border: 0; background: #fff; color: #000; display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(23,20,42,.08), 0 20px 50px -10px color-mix(in srgb, var(--pink) 50%, transparent); transition: transform .2s; }
.play-big:hover { transform: scale(1.05); }
.play-big svg { width: 30px; height: 30px; margin-left: 5px; }
.p-top { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; gap: 8px; z-index: 4; pointer-events: none; }
.p-badge { pointer-events: auto; font: 600 11px/1 var(--f-display); letter-spacing: .08em; text-transform: uppercase; background: rgba(0,0,0,.65); color: #fff; padding: 7px 10px; border-radius: var(--pill); backdrop-filter: blur(6px); }
.p-learn { pointer-events: auto; border: 0; font: 700 11.5px/1 var(--f-display); letter-spacing: .06em; text-transform: uppercase; background: #fff; color: #000; padding: 9px 14px; border-radius: var(--pill); }
.p-skip { position: absolute; right: 12px; bottom: 56px; z-index: 4; border: 1px solid rgba(255,255,255,.5); background: rgba(0,0,0,.7); color: #fff; padding: 10px 16px; border-radius: 8px; font: 600 13px/1 var(--f-body); }
.p-skip[disabled] { opacity: .75; cursor: default; }
.p-ctrl { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,0)); }
.p-ctrl button { background: none; border: 0; color: #fff; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; }
.p-ctrl button:hover { background: rgba(255,255,255,.12); }
.p-ctrl svg { width: 18px; height: 18px; fill: #fff; }
.p-time { font: 500 12px/1 var(--f-mono); color: #fff; min-width: 92px; }
.p-bar { position: relative; flex: 1; height: 6px; background: rgba(255,255,255,.2); border-radius: 3px; }
.p-bar b { position: absolute; left: 0; top: 0; bottom: 0; background: var(--grad); border-radius: 3px; }
.p-bar i { position: absolute; top: -3px; width: 2px; height: 12px; background: rgba(255,255,255,.7); }
.companions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.companion { border: 1px dashed var(--line-2); border-radius: 10px; padding: 10px; display: grid; gap: 8px; justify-items: center; background: var(--panel-2); max-width: 100%; overflow: auto; }
.companion small { color: var(--dim); font: 500 11px var(--f-mono); }
.companion img, .companion iframe { max-width: 100%; display: block; border: 0; }

.media-thumb { max-width: 100%; max-height: 420px; display: block; margin: 0 auto; border-radius: 10px; }
.bar-list { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 90px 1fr 70px; gap: 10px; align-items: center; font-size: 12.5px; }
.bar-row .bt { height: 8px; background: var(--panel-3); border-radius: 4px; overflow: hidden; }
.bar-row .bt b { display: block; height: 100%; background: var(--grad); }
.bar-row .n { text-align: right; font-family: var(--f-mono); color: var(--muted); }

/* VMAP */
.breaks { display: grid; gap: 12px; }
.brk { display: grid; grid-template-columns: 140px 1fr auto; gap: 18px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--panel-2); }
.brk .when { font: 800 22px/1 var(--f-display); letter-spacing: -.01em; }
.brk .when small { display: block; margin-top: 6px; font: 500 11.5px/1 var(--f-mono); color: var(--muted); text-transform: none; letter-spacing: 0; }
.brk .src { font: 400 12px/1.5 var(--f-mono); color: var(--muted); word-break: break-all; }
.timeline { position: relative; height: 34px; margin: 6px 0 18px; }
.timeline .ln { position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: var(--line-2); }
.timeline .pt { position: absolute; top: 9px; width: 16px; height: 16px; border-radius: 50%; background: var(--pink); transform: translateX(-50%); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 18%, transparent); }
.timeline .pt span { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); font: 500 10.5px/1 var(--f-mono); color: var(--muted); white-space: nowrap; }
/* labels near the ends line up with the line's edge instead of hanging past the card */
.timeline .pt.at-start span { left: 0; transform: none; }
.timeline .pt.at-end span { left: auto; right: 0; transform: none; }

/* Formats / Guide */
.formats { padding: 110px 0 90px; border-top: 1px solid var(--line); }
.fmt-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.fmt { padding: 28px 28px 34px 0; border-bottom: 1px solid var(--line-2); position: relative; }
.fmt:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid var(--line-2); }
.fmt-n { font: 500 13px/1 var(--f-mono); color: var(--pink); }
.fmt h3 { margin: 18px 0 10px; font: 700 clamp(22px, 2.2vw, 30px)/1.1 var(--f-display); letter-spacing: -.015em; }
.fmt p { margin: 0; color: var(--muted); font-size: 15px; max-width: 42ch; }

.guide { padding: 90px 0 110px; background: var(--ink); border-top: 1px solid var(--line); }
.guide-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 48px; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.steps li { counter-increment: s; position: relative; padding: 22px 0 22px 64px; border-bottom: 1px solid var(--line-2); font-size: 17px; color: var(--text-2); }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 24px; font: 500 13px/1 var(--f-mono); color: var(--pink); }
.steps li b { color: var(--text); font: 700 17px var(--f-display); letter-spacing: -.005em; margin-right: 6px; }
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 56px; }
.note { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; background: var(--panel); }
.note h4 { margin: 0 0 8px; font: 600 14.5px/1 var(--f-body); letter-spacing: 0; color: var(--pink); }
.note p { margin: 0; color: var(--muted); font-size: 14px; }

/* Support */
.alt-pay { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); color: var(--muted); font-size: 13.5px; }
.alt-pay .pill-ghost { color: var(--text); }
.support { padding: 90px 0 100px; background: var(--panel); border-top: 1px solid var(--line); }
.support-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: center; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--ink); padding: 48px; }
.support-cta { text-align: center; }
.kofi-btn { padding: 0 32px; --h: 58px; width: 100%; gap: 10px; }
.kofi-cup { width: 22px; height: 22px; flex: none; }
@media (max-width: 860px) {
  .support-card { grid-template-columns: minmax(0, 1fr); padding: 32px; text-align: left; }
  .support-cta { text-align: left; }
  .kofi-btn { width: auto; }
}

/* Drawer */
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(680px, 100vw); background: var(--panel); border-left: 1px solid var(--line-2); z-index: 60; transform: translateX(102%); transition: transform .35s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; }
.drawer.is-open { transform: none; box-shadow: -40px 0 80px -20px rgb(var(--shadow-rgb) / calc(0.8 * var(--shadow-k))); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line); }
.drawer-kicker { font: 600 13.5px/1 var(--f-body); letter-spacing: 0; color: var(--pink); }
.drawer-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.drawer-back { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--text); border-radius: var(--pill); padding: 6px 12px 6px 9px; font: 600 12.5px/1 var(--f-body); white-space: nowrap; }
.drawer-back span:first-child { font-size: 16px; line-height: .8; }
.drawer-back:hover { border-color: var(--pink); }
.drawer-back[hidden] + .drawer-kicker { margin-left: 0; }
/* Previous / Next through a list of pixels or requests; stays in view while the details scroll */
.dr-step { position: sticky; top: -22px; z-index: 2; margin: -22px -22px 0; padding: 12px 22px; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--panel); border-bottom: 1px solid var(--line); }
.dr-step button[disabled] { opacity: .4; cursor: default; }
.drawer-body { padding: 22px; overflow: auto; display: grid; gap: 22px; align-content: start; }
.drawer-body .big-url { font: 400 13px/1.6 var(--f-mono); word-break: break-all; color: var(--text); background: var(--code-bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.drawer-body .big-url .host { color: var(--pink); }
.scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 55; opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.is-on { opacity: 1; pointer-events: auto; }
.timing-bars { display: grid; gap: 8px; }
.param-nested { margin: 8px 0 0 12px; padding-left: 12px; border-left: 2px solid var(--line-2); }

/* Toast */
.toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--inv-bg); color: var(--inv-text); padding: 12px 20px; border-radius: var(--pill); font: 600 13.5px/1.2 var(--f-body); opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.2,.8,.2,1); z-index: 80; max-width: calc(100vw - 32px); text-align: center; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: var(--bad); }

/* Misc */
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.sep { height: 1px; background: var(--line); margin: 16px 0; }
.hl { color: var(--pink); }
.ok-t { color: var(--ok); } .warn-t { color: var(--warn); } .bad-t { color: var(--bad); }
.nowrap { white-space: nowrap; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mt { margin-top: 14px; }
.select-inline { appearance: none; background: var(--panel-3) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239A9AA6'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid var(--line-2); border-radius: var(--pill); padding: 8px 30px 8px 14px; font: 500 12.5px/1.2 var(--f-body); color: var(--text); max-width: 100%; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tiles { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .fmt-grid { grid-template-columns: minmax(0, 1fr); }
  .fmt, .fmt:not(:nth-child(3n+1)) { padding: 26px 0 30px; border-left: 0; }
  .guide-grid, .notes { grid-template-columns: minmax(0, 1fr); }
  .band { grid-template-columns: 1fr; justify-items: center; min-height: 150px; gap: 16px; }
  /* The hero's big tool tabs replace the Ad/Site pills on small screens; Feedback has no other
     entry point, so it stays. */
  #top .band-nav--left [data-tool-link] { display: none; }
  /* Four pills left → one even row of four. */
  #top .band-nav > a, #top .band-nav > button, #top .band-nav > .edge-pill { flex: 1 1 0; }
  .band--foot { grid-template-columns: 1fr; }
  .band--foot .foot-note { justify-self: center; text-align: center; }
  .res-side { align-items: flex-start; }
  .res-actions { justify-content: flex-start; }
  .brk { grid-template-columns: 1fr; gap: 10px; }
}
@media (max-width: 560px) {
  /* ...and on phones an even 2×2 grid, both columns the same width. */
  #top .band-nav > a, #top .band-nav > button, #top .band-nav > .edge-pill { flex: 1 1 calc(50% - 6px); }
  body { font-size: 14.5px; }
  .options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .opt { padding: 12px; }
  .opt select { font-size: 13px; padding-right: 28px; background-position: right 10px center; }
  .count { display: none; }
  .stage { min-height: 220px; padding: 24px 12px 44px; }
  .editor-bar { padding: 10px 12px; }
  .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .btn-grad, .btn-grad--xl { width: 100%; padding: 0 24px; }
  .hero-foot .btn-grad { width: auto; }
  .seg button { padding: 10px 13px; font-size: 11.5px; }
  .card { padding: 16px; }
  .kv { grid-template-columns: 1fr; }
  .kv .k { padding-bottom: 0; border-bottom: 0 !important; font-size: 12px; }
  .check { grid-template-columns: 26px 1fr; }
  .check .cat { display: none; }
  .search { min-width: 0; width: 100%; }
  .kbd { display: none; }
}
/* Tables on phones (tables.js): a table too wide for the screen becomes a list of small cards; the
   event stream and request list use tighter layouts of their own. */
@media (max-width: 600px) {
  .tbl.is-stacked, .tbl.is-stacked tbody, .tbl.is-compact, .tbl.is-compact tbody { display: block; width: 100%; }
  .tbl.is-stacked thead, .tbl.is-compact thead { display: none; }
  .tbl.is-stacked tr { display: block; padding: 12px 14px; border-bottom: 1px solid var(--line); }
  .tbl.is-stacked tr:last-child { border-bottom: 0; }
  .tbl.is-stacked td { display: block; position: relative; padding: 3px 0 3px calc(34% + 10px); min-height: 1.5em; border: 0; text-align: left; white-space: normal; min-width: 0; overflow-wrap: anywhere; background: none !important; }
  .tbl.is-stacked td::before { content: attr(data-label); position: absolute; left: 0; top: 4px; width: 34%; color: var(--dim); font: 500 12px/1.5 var(--f-body); }
  .tbl.is-stacked td:first-child, .tbl.is-stacked td[data-label=""] { padding: 0 0 6px; color: var(--text); font-weight: 600; }
  .tbl.is-stacked td:first-child::before, .tbl.is-stacked td[data-label=""]::before { content: none; }
  .tbl.is-stacked .url { min-width: 0; }
  .tbl.is-stacked.is-kv td + td { padding: 0; font-weight: 400; color: var(--text); }
  .card-h > .row { min-width: 0; max-width: 100%; }
  .card-h > .row > * { min-width: 0; max-width: 100%; }
  .tbl.is-compact tr { display: grid; gap: 4px 10px; padding: 11px 14px; border-bottom: 1px solid var(--line); align-items: center; }
  .tbl.is-compact tr:last-child { border-bottom: 0; }
  .tbl.is-compact td { display: block; padding: 0; border: 0; min-width: 0; background: none !important; }
  /* events: vendor + phase / event / time + account */
  .ev-tbl.is-compact tr { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "v v p" "e e e" "t a a"; }
  .ev-tbl.is-compact td { white-space: normal; overflow-wrap: anywhere; }
  .ev-tbl.is-compact td:nth-child(1), .ev-tbl.is-compact td:nth-child(7) { display: none; }
  .ev-tbl.is-compact td:nth-child(2) { grid-area: t; text-align: left; }
  .ev-tbl.is-compact td:nth-child(3) { grid-area: v; }
  .ev-tbl.is-compact td:nth-child(4) { grid-area: e; }
  .ev-tbl.is-compact td:nth-child(5) { grid-area: a; text-align: right; font-size: 11.5px; min-width: 0; }
  .ev-tbl.is-compact td:nth-child(5) * { white-space: normal !important; overflow-wrap: anywhere; }
  .ev-tbl.is-compact td:nth-child(6) { grid-area: p; }
  /* requests: type, status, size, start / address */
  .req-tbl.is-compact tr { grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "ty st sz tm" "rq rq rq rq"; }
  .req-tbl.is-compact td:nth-child(1), .req-tbl.is-compact td:nth-child(4) { display: none; }
  .req-tbl.is-compact td:nth-child(2) { grid-area: ty; }
  .req-tbl.is-compact td:nth-child(3) { grid-area: rq; min-width: 0; }
  .req-tbl.is-compact td:nth-child(5) { grid-area: st; text-align: left; }
  .req-tbl.is-compact td:nth-child(6) { grid-area: sz; }
  .req-tbl.is-compact td:nth-child(7) { grid-area: tm; }
  /* pinned results tabs: no room for the site name on a phone */
  .res-tabs.is-stuck .res-mini { display: none; }
  .res-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .res-actions > * { width: 100%; justify-content: center; }
  .bar-row { grid-template-columns: 74px minmax(0, 1fr) auto !important; }
  .idt { white-space: normal; overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Copy confirmation (util.js copy()) */
.is-copied { border-color: var(--ok) !important; color: var(--ok) !important; }
.is-copied::before { content: "✓ "; }

/* Keyboard shortcuts panel */
.kb-list { display: grid; gap: 2px; }
.kb-row { display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.kb-keys { white-space: nowrap; color: var(--dim); }
.foot-link { background: none; border: 0; padding: 0; font: inherit; color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.foot-link:hover { color: var(--text); }
.foot-link kbd { margin-left: 4px; }


/* Hero: one orchestrated entrance on load — headline lines rise in turn, then the copy, samples and
   tool buttons. No other entrance effects on the page. */
.hero .hero-line { display: inline-block; animation: hero-rise .9s cubic-bezier(.16,.84,.24,1) both; }
.hero .hero-line + br + .hero-line { animation-delay: .12s; }
.hero .hero-foot { animation: hero-fade .8s .32s cubic-bezier(.2,.8,.2,1) both; }
.hero .tool-switch { animation: hero-fade .8s .54s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hero-rise { from { opacity: 0; transform: translateY(.32em); } }
@keyframes hero-fade { from { opacity: 0; transform: translateY(14px); } }



/* Aurora: cards lift off the page with a soft violet-tinted shadow in light mode (none in dark). */
.card, .tile, .verdict, .note, .vcard, .editor, .url-bar, .drawer-body .card { box-shadow: var(--card-shadow); }

/* Live request pings over the ad preview and video player (ping.js) */
.stage-shell { position: relative; }
.ping-layer { position: absolute; top: 10px; right: 10px; z-index: 6; display: grid; justify-items: end; gap: 6px; pointer-events: none; max-width: calc(100% - 20px); }
.ping { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 11px 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--inv-bg) 88%, transparent); color: var(--inv-text); font: 500 12px/1.2 var(--f-body); box-shadow: 0 6px 18px -6px rgba(0,0,0,.35); backdrop-filter: blur(6px); white-space: nowrap; animation: ping-in .35s cubic-bezier(.2, 1.3, .4, 1) both; transition: opacity .3s, transform .3s; }
.ping b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; }
.ping span { color: var(--inv-muted); }
.ping .ping-n { font: 600 11px/1 var(--f-mono); color: var(--inv-text); }
.ping .ping-n:empty { display: none; }
.ping-dot { position: relative; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.ping-dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c); animation: ping-ring 1.1s ease-out 2; }
.ping.is-bump { animation: ping-bump .3s ease-out; }
.ping.is-muted { opacity: .75; }
.ping.is-muted .ping-dot { background: var(--inv-muted); --c: var(--inv-muted); }
.ping.is-out { opacity: 0; transform: translateX(12px); }
@keyframes ping-in { from { opacity: 0; transform: translateX(16px) scale(.9); } }
@keyframes ping-ring { to { transform: scale(2.6); opacity: 0; } }
@keyframes ping-bump { 50% { transform: scale(1.06); } }
.player .ping-layer { top: 50px; }
/* New network rows slide in and glow briefly */
.tbl tr.is-new { animation: row-in .5s ease-out both; animation-delay: var(--d, 0ms); }
.tbl tr.is-new > td { animation: row-glow 1.6s ease-out both; animation-delay: var(--d, 0ms); }
@keyframes row-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes row-glow { from { background-color: color-mix(in srgb, var(--pink) 14%, transparent); } }

/* ---------- Dropdowns (select.js): desktop only; phones keep the system picker ---------- */
.tsel { position: relative; display: inline-flex; max-width: 100%; vertical-align: middle; }
.opt .tsel, .tsel:has(> .field) { display: flex; width: 100%; }
.tsel-native { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; pointer-events: none; }
.tsel-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; max-width: 100%; cursor: pointer; text-align: left;
  background-color: var(--panel-3); background-image: none !important; border: 1px solid var(--line-2); border-radius: var(--pill); padding: 8px 14px 8px 14px;
  font: 500 12.5px/1.2 var(--f-body); color: var(--text); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.opt .tsel-btn, .tsel-btn.field { width: 100%; border-radius: 12px; padding: 10px 14px 10px 12px; font: 500 13.5px/1.2 var(--f-body); }
.tsel-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--pink) 45%, var(--line-2)); }
.tsel-btn:focus-visible { outline: none; border-color: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 16%, transparent); }
.tsel.is-open .tsel-btn { border-color: var(--pink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 14%, transparent); }
.tsel-btn:disabled { cursor: not-allowed; opacity: .55; }
.tsel-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsel-car { flex: none; width: 10px; height: 10px; color: var(--muted); transition: transform .25s cubic-bezier(.2,.8,.2,1); }
.tsel.is-open .tsel-car { transform: rotate(180deg); }
.tsel-pop { position: fixed; z-index: 120; width: max-content; max-width: min(380px, calc(100vw - 16px)); max-height: 340px; overflow: auto; overscroll-behavior: contain;
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: 18px; padding: 8px; outline: none;
  box-shadow: 0 30px 60px -20px rgb(var(--shadow-rgb) / calc(.8 * var(--shadow-k))), 0 2px 6px rgb(var(--shadow-rgb) / calc(.1 * var(--shadow-k)));
  transform-origin: top left; opacity: 0; transform: translateY(-6px) scale(.97); transition: opacity .16s ease, transform .2s cubic-bezier(.2,.8,.2,1);
  scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.tsel-pop.is-up { transform-origin: bottom left; transform: translateY(6px) scale(.97); }
.tsel-pop.is-open { opacity: 1; transform: none; }
.tsel-pop h5 { margin: 10px 12px 6px; font: 600 12px/1 var(--f-body); color: var(--dim); }
.tsel-opt { display: grid; grid-template-columns: 1fr 16px; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 11px; color: var(--text); cursor: pointer; transition: background-color .12s; }
.tsel-opt.is-active { background: var(--panel-3); }
.tsel-opt[aria-disabled="true"] { opacity: .45; cursor: default; }
.tsel-opt b { display: block; font: 600 13.5px/1.3 var(--f-body); }
.tsel-opt small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tsel-ck { width: 16px; height: 16px; color: var(--pink); opacity: 0; transform: scale(.6); transition: opacity .2s, transform .2s; }
.tsel-opt[aria-selected="true"] .tsel-ck { opacity: 1; transform: none; }
.tsel-opt[aria-selected="true"] b { color: var(--pink); }

/* ---------- Containment: nothing spills out of its card ----------
   Grid items default to min-width:auto, so one long URL, nowrap header value or wide table inside a
   card would widen its whole column (and on phones the whole page). Every grid item in the results
   and drawer may shrink to its box; long values wrap and wide tables scroll inside their own frame. */
.results :is(.card, .vcard, .vcard-body, .stage-wrap, .stack, .grid-2, .preview-grid, .chain, .hop, .hop-body, .edge-rep, .edge-side, .edge-main, [style*="display: grid"]) > *,
.drawer-body :is(.edge-rep, .edge-side, .edge-main) > *,
.drawer-body :is(div, section)[style*="display: grid"] > *, .drawer-body > * { min-width: 0; }
.results .card, .results .vcard { min-width: 0; max-width: 100%; }
.results .tbl td.url, .drawer-body .tbl td.url { overflow-wrap: anywhere; word-break: break-word; }
.results .kv .v, .drawer-body .kv .v { overflow-wrap: anywhere; }

/* Click-through trace (summary + landing parameters, then response headers) */
.edge-rep { display: grid; gap: 14px; }
.edge-side, .edge-main { display: grid; gap: 14px; min-width: 0; }
.tbl--hdrs .hk { color: var(--d-blue); width: 38%; overflow-wrap: anywhere; }
.tbl--hdrs .hv { font: 400 12px/1.5 var(--f-mono); color: var(--text-2); overflow-wrap: anywhere; word-break: break-word; }
details.fold > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; }
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: ''; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--pink); transform: rotate(-45deg); transition: transform .2s; margin-top: -2px; }
details.fold[open] > summary::after { transform: rotate(45deg); }
details.fold > summary .sec-h { margin: 0; }
details.fold[open] > .tbl-wrap { margin-top: 10px; }

.tbl--params td:first-child { white-space: normal; overflow-wrap: anywhere; }

/* ---------- Where it can run (ctv.js, VAST Player tab) ---------- */
.runs-card { display: grid; gap: 0; }
.runs-row { padding: 12px 0; border-top: 1px solid var(--line); }
.runs-card .card-h + .runs-row { border-top: 0; padding-top: 0; }
.runs-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.runs-head b { display: block; font: 600 14px/1.3 var(--f-body); color: var(--text); }
.runs-head small { display: block; font-size: 12px; color: var(--dim); margin-top: 2px; }
.runs-head .chip { flex: none; }
.runs-notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: 13px; color: var(--text-2); }
.runs-notes li { position: relative; padding-left: 14px; }
.runs-notes li::before { content: ''; position: absolute; left: 2px; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--warn); }
.runs-notes li.bad::before { background: var(--bad); }