@charset "utf-8";
/* iplover v5 "red <3": clean white pages, one brand red, a colour per tool,
   generous whitespace. Dark by default; light via the footer toggle
   (html[data-theme="light"]), or the system setting when the visitor picks
   "Match system setting" (html[data-theme="system"]). docs/design-v5.md explains it. */

/* ---------- Fonts (self-hosted, OFL; see fonts/LICENSE-*.txt) ---------- */
/* Country flags: Twemoji art (CC BY 4.0) in the "Twemoji Country Flags" font
   by TalkJS (MIT); see fonts/LICENSE-twemoji-country-flags.md. Only flag
   characters use it, so it downloads only on pages that show a flag. */
@font-face { font-family: "Twemoji Country Flags"; font-display: swap;
  src: url("fonts/twemoji-country-flags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
/* Light (default). The brand red #E5323F is 4.3:1 on white: fine for the
   logo, icon tiles, large headings and borders (3:1), not quite enough for
   small text. Buttons and links use --red-ink (#D92936, 4.8:1), which looks
   the same. Green and amber likewise: the bright value for dots and tiles,
   an "-ink" value for text. */
:root {
  color-scheme: light;
  --red: #E5323F;
  --red-ink: #D92936;
  --red-hover: #C9232F;
  --red-soft: #FDE8EA;
  --red-soft-ink: #B81F2B;
  --blush: #FFF5F6;
  --bg: #FFFFFF;
  --surface-2: #FBF9F9;
  --border: #EFEBEC;
  --border-strong: #E7E2E3;
  --text: #17171C;
  --muted: #5F5F6B;
  --faint: #8A8A96;
  --ok: #12A37F;
  --ok-ink: #0B7D61;
  --amber: #B7791F;
  --amber-ink: #93600F;

  /* Names used across the stylesheet, mapped onto the palette. */
  --bg-deep: var(--surface-2);
  --card: #FFFFFF;
  --surface: #FFFFFF;
  --hair: var(--border);
  --hair-strong: var(--border-strong);
  --input: #8E8A8C;   /* form field edges: 3:1 on white (WCAG 1.4.11) */
  --text-2: var(--muted);
  --accent: var(--red-ink);
  --accent-hover: var(--red-hover);
  --accent-edge: var(--red-ink);
  --on-accent: #FFFFFF;
  --link: var(--red-ink);
  --link-hover: var(--red-hover);
  --logo: var(--red);
  --emph: var(--red-ink);
  --edge-active: var(--red);
  --focus: var(--red-ink);
  /* Status: always a word plus a dot or edge in the colour. */
  --good: var(--ok);
  --info: #4F6A82;
  --warn: var(--amber);
  --bad: var(--red);
  --unavailable: var(--faint);
  --good-text: var(--ok-ink);
  --warn-text: var(--amber-ink);
  --cat-isp: #8A6D3B;
  --cat-vpn: #85587D;
  --info-text: #4F6A82;
  --field: #FFFFFF;
  --field-ink: var(--text);
  --field-muted: var(--muted);
  --shadow: 0 14px 34px -22px rgba(23, 23, 28, 0.28);
  --shadow-hero: 0 24px 60px -28px rgba(23, 23, 28, 0.25);
  --shadow-red: 0 16px 34px -20px rgba(229, 50, 63, 0.45);
  --hero-from: var(--blush);
  --hero-to: #FFFFFF;
  /* Footer and terminal blocks are dark in both themes. */
  --foot-bg: #17171C;
  --foot-strong: #FFFFFF;
  --foot-text: #D9D9E0;
  --foot-muted: #9A9AA6;
  --foot-hair: #2A2A31;
  --foot-heart: #FF6B76;
  --term-bg: #17171C;
  --term-text: #F4F4F6;
  --term-muted: #9A9AA6;
  --term-accent: #FF6B76;
  --term-good: #3DD6A7;
  --selection: rgba(229, 50, 63, 0.16);

  --f-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Radius: buttons and inputs 12, small panels 14, cards 18, pills 999. */
  --radius: 12px;
  --control-h: 46px;
  --control-h-sm: 40px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 18px;
  --wrap: 1200px;
  --gutter: 16px;
}
/* Dark (the default): the same system on near-black. Red links get lighter
   (#FF6B76) to stay readable; buttons keep the red. The light tokens above
   apply only when the visitor picks light, or "Match system setting" on a
   light system. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --blush: #1A1519; --bg: #121216; --surface-2: #22222A; --border: #2A2A31; --border-strong: #34343D;
    --text: #F4F4F6; --muted: #A6A6B2; --faint: #74747F;
    --red-soft: #3A1A20; --red-soft-ink: #FF8F98;
    --ok: #3DD6A7; --ok-ink: #3DD6A7; --amber: #E8A845; --amber-ink: #E8A845;
    --card: #1B1B21; --surface: #1B1B21; --input: #74747F;
    --link: #FF6B76; --link-hover: #FF9AA2; --emph: #FF6B76; --focus: #FF6B76; --bad: #FF6B76;
    --info: #94A3B0; --info-text: #B7C2CC; --cat-isp: #C8B08A; --cat-vpn: #B392AC;
    --field: #1B1B21;
    --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
    --shadow-hero: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
    --shadow-red: 0 16px 34px -20px rgba(229, 50, 63, 0.55);
    --hero-from: #1A1519; --hero-to: #121216;
    --foot-bg: #0C0C0F;
    --selection: rgba(255, 107, 118, 0.28);
  }
}
:root:not([data-theme="light"]):not([data-theme="system"]) {
  color-scheme: dark;
  --blush: #1A1519; --bg: #121216; --surface-2: #22222A; --border: #2A2A31; --border-strong: #34343D;
  --text: #F4F4F6; --muted: #A6A6B2; --faint: #74747F;
  --red-soft: #3A1A20; --red-soft-ink: #FF8F98;
  --ok: #3DD6A7; --ok-ink: #3DD6A7; --amber: #E8A845; --amber-ink: #E8A845;
  --card: #1B1B21; --surface: #1B1B21; --input: #74747F;
  --link: #FF6B76; --link-hover: #FF9AA2; --emph: #FF6B76; --focus: #FF6B76; --bad: #FF6B76;
  --info: #94A3B0; --info-text: #B7C2CC; --cat-isp: #C8B08A; --cat-vpn: #B392AC;
  --field: #1B1B21;
  --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6);
  --shadow-hero: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
  --shadow-red: 0 16px 34px -20px rgba(229, 50, 63, 0.55);
  --hero-from: #1A1519; --hero-to: #121216;
  --foot-bg: #0C0C0F;
  --selection: rgba(255, 107, 118, 0.28);
}

/* Tool colours: icon tiles, tool page headings, menu icons. Subnet's amber
   is too light for a white icon, so its icon is dark. */
.tc-myip { --tc: #E5323F; }
.tc-lookup { --tc: #F2683C; }
.tc-report { --tc: #2F6FEB; }
.tc-down { --tc: #0B7FA0; }
.tc-bots { --tc: #5C7A12; }
.tc-logs { --tc: #8E2D6E; }
.tc-headers { --tc: #12A37F; }
.tc-dns { --tc: #D63384; }
.tc-subnet { --tc: #F2A900; --ti: #17171C; }
.tc-converter { --tc: #5B4BD6; }
.tile { flex: none; display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--tc, var(--red)); color: var(--ti, #FFFFFF); }
.tile svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile.sm { width: 30px; height: 30px; border-radius: 9px; }
.tile.sm svg { width: 17px; height: 17px; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* `hidden` must win over component display rules (e.g. .btn's inline-flex):
   JS-only controls stay hidden when JavaScript is off. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.6 var(--f-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  /* Short pages keep the footer at the bottom of the window. */
  min-height: 100vh; display: flex; flex-direction: column;
}
body > main { flex: 1 0 auto; width: 100%; }
::selection { background: var(--selection); }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
a:hover { text-decoration-thickness: 2px; }
code, pre, kbd { font-family: var(--f-mono); }
code { font-size: 0.92em; }
h1, h2, h3 { margin: 0; color: var(--text); font-family: var(--f-sans); text-wrap: balance; }
h1 { font-size: clamp(2rem, 4.2vw, 3rem); font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; }
h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; }
p { margin: 0 0 1em; text-wrap: pretty; }
.muted { color: var(--muted); font-size: 0.92rem; }
.mono { font-family: var(--f-mono); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: 8px; z-index: 100; background: var(--bg); color: var(--text); padding: 8px 12px; border-radius: var(--radius); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* Section label: small, uppercase, numbered where it introduces a section. */
.label,
.card > h2, .card > h3, .explain > h2, .links > h3, .result > h2, .check > h3,
.tool-form label, th {
  font: 650 12px/1.4 var(--f-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
}
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--emph); font: 650 12px/1.4 var(--f-sans); letter-spacing: 0.12em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
main { counter-reset: sec; }
.num::before,
.cards > .card > :is(h2, h3):first-child::before,
.stack > .card > h3::before,
.tool > .explain > h2::before,
.links > h3::before {
  counter-increment: sec;
  content: counter(sec, decimal-leading-zero) " · ";
  color: var(--emph);
}

/* ---------- Page frame ---------- */
.bar, main, .foot-inner, .foot-copy, .langbanner { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
@media (min-width: 768px) { :root { --gutter: 32px; } }
main { padding-bottom: 72px; }
main.wide { max-width: none; padding: 0; }
.wrap { width: min(var(--wrap) - 2 * var(--gutter), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Header: white, one hairline at the bottom. */
.top { position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--hair); background: var(--bg); }
.bar { display: flex; align-items: center; gap: 10px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; margin-right: auto; min-height: 44px; color: var(--text); text-decoration: none; }
/* Both parts sit on one baseline inside .wordmark. */
.logo .wordmark { display: inline-block; white-space: nowrap; line-height: 1; }
.logo:hover { color: var(--text); }
.logo .word { font: 800 1.5rem/1 var(--f-sans); letter-spacing: -1px; }
/* The heart is decorative logo art, drawn as generated content (logos are
   exempt from text contrast; see WCAG 1.4.3). */
.logo .heart { margin-left: 2px; font: 800 1.5rem/1 var(--f-mono); letter-spacing: -2px; color: var(--logo); }
.logo .heart::before { content: "<3"; }
.nav a, .nav .menu > summary {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 10px;
  color: var(--text); text-decoration: none; font: 600 15px/1 var(--f-sans);
}
.nav a:hover, .nav .menu > summary:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"], .nav .menu > summary.current { color: var(--link); background: var(--blush); }
.btn.cta { display: none; min-height: var(--control-h-sm); padding: 0 16px; font-size: 14px; white-space: nowrap; }
@media (min-width: 768px) { .btn.cta { display: inline-flex; } }
@media (min-width: 1080px) {
  .logo { margin-right: 20px; }
}
/* Tool menus: a small colour tile per tool. */
.menu li a .tile.sm { margin-right: 10px; }
.menu.tools ul { min-width: 280px; }

/* Dropdowns (<details>, so they work without JavaScript) */
.menu { position: relative; }
.menu > summary { list-style: none; cursor: pointer; min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; }
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; width: 7px; height: 7px; margin-left: 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); }
.menu ul {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50;
  min-width: 220px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--radius-md); box-shadow: var(--shadow);
}
.menu.tools ul { left: 0; right: auto; }
.menu li a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--text); text-decoration: none; border-radius: 10px; font-weight: 600; }
.menu li a:hover { background: var(--surface-2); }
.menu li a[aria-current] { color: var(--link); background: var(--blush); }
.langs > summary, .navmenu > summary {
  font: 600 14px/1 var(--f-sans); border: 1px solid var(--hair-strong); border-radius: var(--radius); color: var(--text);
  background: var(--bg);
}
.langs > summary svg, .navmenu > summary svg { width: 18px; height: 18px; flex: none; }
.langs ul { min-width: 180px; }
.navmenu > summary::after { content: none; }
/* The main nav: one list. Phones: a panel under the header, at its right edge. */
.top .bar { position: relative; }
.navmenu { position: static; }
.navmenu > .nav {
  position: absolute; right: var(--gutter); top: calc(100% - 4px); z-index: 50;
  width: min(300px, calc(100vw - 2 * var(--gutter))); padding: 6px;
  background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--radius-md); box-shadow: var(--shadow);
}
.navmenu .navlist { position: static; display: block; min-width: 0; margin: 0; padding: 0; list-style: none; border: 0; background: none; box-shadow: none; }
.navmenu .navlist a, .navmenu .menu.tools > summary { display: flex; width: 100%; min-height: 44px; }
.navmenu .menu.tools ul { position: static; min-width: 0; padding: 0 0 6px 8px; border: 0; box-shadow: none; background: none; }
/* Wide screens: the same list, inline. Kept open by CSS where
   ::details-content is supported, otherwise by app.js. */
@media (min-width: 1080px) {
  .navmenu { flex: 1; }
  .navmenu[open] > summary { display: none; }
  .navmenu > .nav { position: static; width: auto; padding: 0; border: 0; background: none; box-shadow: none; }
  .navmenu .navlist { display: flex; align-items: center; gap: 2px; }
  .navmenu .navlist a, .navmenu .menu.tools > summary { display: inline-flex; width: auto; min-height: 40px; }
  .navmenu .menu.tools { position: relative; }
  .navmenu .menu.tools ul { position: absolute; left: 0; top: calc(100% + 8px); min-width: 280px; padding: 6px; border: 1px solid var(--hair-strong); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow); }
}
/* Phones: the panel lists every tool once (the bar's shortcuts to three of
   them are for wide screens), then the guides. */
@media (max-width: 1079px) {
  .navlist > li.nav-bar { display: none; }
}
@supports selector(::details-content) {
  @media (max-width: 1079px) {
    .navmenu .menu.tools > summary { display: none; }
    .navmenu .menu.tools::details-content { content-visibility: visible; }
    .navmenu .menu.tools ul { padding: 0; }
  }
}
/* Where the browser can show a closed <details>' content, the bar is
   inline even before (or without) JavaScript. */
@supports selector(::details-content) {
  @media (min-width: 1080px) {
    .navmenu > summary { display: none; }
    .navmenu::details-content { content-visibility: visible; }
  }
}
.menu[open] > summary { border-color: var(--input); }

.langbanner { display: flex; align-items: center; gap: 8px; padding-top: 12px; }
.langbanner[hidden] { display: none; }
.langbanner p { flex: 1; margin: 0; padding: 10px 14px; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--surface); color: var(--text-2); font-size: 0.95rem; }
.langbanner .close { min-width: 44px; min-height: 44px; font-size: 1.4rem; line-height: 1; background: none; border: 0; color: var(--text-2); cursor: pointer; }

/* Footer: dark in both themes, brand and three columns. */
.foot { margin-top: 0; background: var(--foot-bg); color: var(--foot-muted); font-size: 0.92rem; color-scheme: dark; }
.foot-inner { display: grid; grid-template-columns: 1fr; gap: 32px; padding-top: 56px; padding-bottom: 28px; }
@media (min-width: 860px) { .foot-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr); gap: 48px; } }
.foot .logo, .foot .logo:hover { color: var(--foot-strong); }
.foot .logo .heart { color: var(--foot-heart); }
.foot-brand .logo { margin-bottom: 8px; }
.foot-brand p { max-width: 46ch; margin: 0 0 10px; }
.foot-brand .tagline { color: var(--foot-text); font-size: 1rem; }
.tagline .love { font: 800 1em/1 var(--f-mono); letter-spacing: -1px; color: var(--foot-heart); }
.foot-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (min-width: 560px) { .foot-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot-cols h2 { margin: 0 0 6px; font: 700 12px/1.4 var(--f-sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--foot-strong); }
.foot-cols ul { list-style: none; margin: 0; padding: 0; }
.foot-cols a, .linkbtn { min-height: 40px; display: inline-flex; align-items: center; color: var(--foot-text); text-decoration: none; text-align: left; }
.foot-cols a:hover, .linkbtn:hover { color: var(--foot-strong); text-decoration: underline; }
.foot :focus-visible { outline-color: var(--foot-heart); }
.linkbtn { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.linkbtn[hidden] { display: none; }
.foot-copy { padding-top: 16px; padding-bottom: 32px; margin: 0 auto; border-top: 1px solid var(--foot-hair); font-size: 0.85rem; }

/* ---------- Controls ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--control-h); padding: 0 18px; border: 1px solid var(--accent-edge); border-radius: var(--radius); cursor: pointer;
  background: var(--accent); color: var(--on-accent); font: 700 15px/1 var(--f-sans); text-decoration: none;
  transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn.ghost { background: var(--bg); color: var(--text); border: 1.5px solid var(--input); }
.btn.ghost:hover { border-color: var(--red); background: var(--bg); color: var(--text); }
.btn svg { width: 16px; height: 16px; }
input, select, textarea {
  font: 400 16px/1.3 var(--f-mono); color: var(--text); background: var(--field);
  border: 1.5px solid var(--input); border-radius: var(--radius); min-height: 44px; padding: 8px 12px;
}
input::placeholder, textarea::placeholder { color: var(--muted); }

/* Status: small rounded square + a word. Never colour alone. */
.status { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 560; }
.status::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--sc, var(--muted)); transform: translateY(-1px); }
.status.good { --sc: var(--good); }
.status.info { --sc: var(--info); }
.status.warn { --sc: var(--warn); }
.status.bad { --sc: var(--bad); }
.status.na { --sc: var(--unavailable); }
.warn:not(.status), .notice:not(.status) {
  display: flex; gap: 10px; align-items: baseline; margin: 16px 0; padding: 12px 16px;
  color: var(--text); background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius);
}
.warn:not(.status) { border-color: color-mix(in srgb, var(--warn) 45%, var(--hair)); }
.warn:not(.status)::before, .notice:not(.status)::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; transform: translateY(-1px); }
.warn:not(.status)::before { background: var(--warn); }
.notice:not(.status)::before { background: var(--info); }
.good-text { color: var(--good-text); }
.warn-text { color: var(--warn-text); }

/* Definition rows: label left (muted), value right. */
dl { margin: 0; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.row:last-child { border-bottom: 0; }
.row dt { color: var(--muted); flex: none; max-width: 50%; }
.row dd { margin: 0; text-align: right; font-weight: 560; overflow-wrap: break-word; min-width: 0; }
/* Long values: the label goes above the value. */
.row.above { flex-direction: column; align-items: stretch; gap: 2px; }
.row.above dt { max-width: none; }
.row.above dd { text-align: left; }
.row dd.mono { font: 500 0.93rem/1.5 var(--f-mono); }

/* Cards on tool pages. */
.cards { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 760px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .cards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg); padding: 20px 22px; }
.card > h2, .card > h3 { margin: 0 0 6px; }
.stack { display: grid; gap: 16px; }
/* Grid children may shrink, so wide tables scroll inside .table-wrap
   instead of widening the page. */
.stack > *, .cards > *, .glance-grid > *, .tool-grid > *, .how-inner > *, .faq-inner > * { min-width: 0; }
.source { margin: 10px 0 0; font: 400 12px/1.5 var(--f-mono); color: var(--muted); }
.explain, .links, .result { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hair); }
.explain > h2, .links > h3, .result > h2 { margin-bottom: 16px; }
.explain p, .explain li { color: var(--text-2); max-width: 72ch; }
.lead { font-size: 1.2rem; line-height: 1.55; color: var(--text-2); }

pre { background: var(--term-bg); color: var(--term-text); border: 1px solid var(--hair); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; font-size: 14px; line-height: 1.6; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--hair); vertical-align: top; }
td.val { font-family: var(--f-mono); overflow-wrap: anywhere; word-break: break-word; min-width: 12ch; }
td.num { white-space: nowrap; font-family: var(--f-mono); color: var(--text-2); }
.notes { margin: 12px 0 0; padding-left: 18px; color: var(--text-2); }
.notes li { margin: 4px 0; }
.notes li::marker { color: var(--emph); }

/* ---------- Tool pages (lookup, DNS, calculators, guides index) ---------- */
.tool { padding-top: 40px; }
.tool > h1 { margin-bottom: 12px; }
.intro { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.5; color: var(--text-2); max-width: 60ch; margin-bottom: 28px; }
.tool-form { margin: 0 0 8px; padding: 20px; background: var(--surface-2); border: 1px solid var(--hair); border-radius: var(--radius-lg); }
.tool-form label { display: block; margin-bottom: 8px; }
.field { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.field input { flex: 1 1 240px; min-width: 0; }
.field select { flex: 0 1 180px; font-family: var(--f-sans); }
.field > div { display: flex; flex-direction: column; }
.field .grow { flex: 1 1 240px; }
.field > div input, .field > div select { flex: none; width: 100%; }
.result > h2 + .lead { margin-top: -4px; }
.linklist { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 8px 0; }
.linklist a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--hair-strong); border-radius: 999px; color: var(--text); text-decoration: none; font: 560 14px/1 var(--f-sans); background: var(--surface); }
.linklist a:hover { border-color: var(--edge-active); }
.examples { list-style: none; padding: 0; margin: 0; }
.examples li { padding: 12px 0; border-bottom: 1px solid var(--hair); color: var(--text-2); }
.examples code { color: var(--link); margin-right: 8px; }
.faq { border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface); margin-bottom: 8px; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 18px; cursor: pointer; font-weight: 620; color: var(--text); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform 160ms ease; }
.faq[open] { border-color: var(--hair-strong); }
.faq[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq p { margin: 0; padding: 0 18px 16px; color: var(--text-2); line-height: 1.65; }
.how { padding-left: 0; list-style: none; }
.how li { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.how li:last-child { border-bottom: 0; }
.row.binary { flex-direction: column; align-items: stretch; }
.row.binary dd { text-align: left; }
.bits { margin: 6px 0 0; font-size: 0.85rem; line-height: 1.7; white-space: pre; background: transparent; border: 0; color: var(--text-2); padding: 0; }
.bits-label { display: inline-block; width: 9ch; color: var(--muted); }
.netbits { color: var(--emph); font-weight: 500; }
.iplist { margin: 6px 0 0; padding-left: 18px; font-family: var(--f-mono); font-size: 0.9rem; overflow-wrap: anywhere; }
.guide-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.guide-list li.card h2 { font: 680 1.3rem/1.25 var(--f-sans); letter-spacing: -0.02em; text-transform: none; color: var(--text); }
.guide-list li.card h2::before { content: none; }
.guide-list li.card h2 a { color: var(--text); text-decoration: none; }
.guide-list li.card h2 a:hover { color: var(--link-hover); }
.guide-list li.card p { margin: 6px 0 0; color: var(--text-2); }

/* Readout strip (lookup and report summaries). */
.readout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 28px 0 0; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg); overflow: hidden; }
.readout > div { padding: 16px 18px; border-left: 1px solid var(--hair); min-width: 0; }
.readout > div:first-child { border-left: 0; }
.readout .v { display: block; margin-top: 6px; font: 620 1.1rem/1.35 var(--f-sans); color: var(--text); overflow-wrap: anywhere; }
.readout .v.mono { font: 500 1.02rem/1.35 var(--f-mono); }
@media (max-width: 759px) {
  .readout { grid-template-columns: 1fr 1fr; }
  .readout > div:nth-child(odd) { border-left: 0; }
  .readout > div:nth-child(n + 3) { border-top: 1px solid var(--hair); }
}

/* ---------- Text pages and guides ---------- */
.prose { max-width: 70ch; padding: 40px 0 0; }
.prose h1 { margin-bottom: 20px; }
.prose p, .prose li { color: var(--text-2); }
.prose strong { color: var(--text); }
.guide { font-size: 18px; line-height: 1.75; }
.guide h1 { margin-bottom: 8px; }
.guide h2 { margin: 2em 0 0.6em; padding-top: 1em; border-top: 1px solid var(--hair); }
.guide h3 { margin: 1.6em 0 0.4em; font-size: 1.1rem; }
.guide .lead { font-size: 1.25rem; line-height: 1.55; color: var(--text); }
.guide li { margin: 0.35em 0; }
.guide li::marker { color: var(--emph); }
.guide table { font-size: 0.95rem; line-height: 1.5; }
.guide .summary { margin: 28px 0 8px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg); box-shadow: inset 3px 0 0 var(--emph); }
.guide .summary .label { margin: 0 0 4px; }
.guide .summary ul { margin: 0 0 8px; padding-left: 1.2em; }
.guide .summary p:last-child, .guide .summary ul:last-child { margin-bottom: 0; }
.guide kbd { font: 500 0.85em var(--f-mono); padding: 1px 6px; border: 1px solid var(--hair-strong); border-radius: 6px; }
.crumbs { margin: 0 0 16px; font: 650 12px/1.4 var(--f-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--link-hover); }
.byline { font: 400 14px/1.4 var(--f-sans); color: var(--muted); margin-bottom: 2em; }

/* ======================================================================
   Homepage
   ====================================================================== */
.home section { scroll-margin-top: 80px; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 20px; }
.section-head h2 { margin: 0; }
.section-head p { margin: 0; color: var(--text-2); }

/* Hero: a soft blush-to-white wash, centred headline, then the hero card. */
.hero { padding: 56px 0 72px; text-align: center; background: linear-gradient(180deg, var(--hero-from), var(--hero-to)); }
.hero-inner { display: grid; justify-items: center; gap: 18px; }
.pill { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--text); font: 650 0.86rem/1.3 var(--f-sans); }
.love { font: 800 1em/1 var(--f-mono); letter-spacing: -1px; color: var(--link); }
.hero-title { max-width: 24ch; margin: 0; font-size: clamp(2rem, 1.2rem + 3.6vw, 3.5rem); font-weight: 800; line-height: 1.06; letter-spacing: -0.036em; }
/* Large text: the brand red passes 3:1 here. */
.hero-title .hl { color: var(--red); white-space: nowrap; }
.hero-sub { max-width: 60ch; margin: 0; color: var(--muted); font-size: clamp(1rem, 0.9rem + 0.4vw, 1.15rem); }

/* Hero card: the visitor's IP on top, the "check anything" box below. */
.hero-card { width: min(860px, 100% - 2 * var(--gutter)); margin: 36px auto 0; text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-hero); overflow: hidden; }
.hc-top { display: grid; justify-items: start; gap: 10px; padding: 28px 32px 24px; }
.hc-top .label { margin: 0; }
.ip-row { width: 100%; max-width: 100%; }
.ip-big { display: block; margin: 0; white-space: nowrap; font: 800 clamp(2rem, 1.5rem + 1.6vw, 2.75rem)/1.12 var(--f-mono); letter-spacing: -0.02em; color: var(--text); }
/* Long IPv6 addresses wrap at their colons (<wbr>), never off the card. */
.ip-big.len-22, .ip-big.len-30, .ip-big.len-39 { white-space: normal; overflow-wrap: anywhere; }
.hero-summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 0; color: var(--muted); font-size: 0.98rem; }
.hero-summary > span + span::before { content: "·"; margin: 0 10px; color: var(--faint); }
.hero-summary .net { font-weight: 650; }
.hero-summary .net.good { color: var(--good-text); }
.hero-summary .net.warn { color: var(--warn-text); }
.ip-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 6px; }
.ip-actions .or { font-size: 0.9rem; color: var(--muted); }
.ip-actions .or code { color: var(--text); font-size: 0.95em; }
.hc-search { padding: 20px 32px 24px; background: var(--surface-2); border-top: 1px solid var(--border); }
.check-label { display: block; margin: 0 0 10px; }

/* The "check anything" field. */
.cmd { display: flex; align-items: stretch; border: 1.5px solid var(--input); border-radius: var(--radius); background: var(--field); margin-top: 16px; }
.cmd:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.cmd .prompt { display: flex; align-items: center; padding: 0 2px 0 14px; color: var(--muted); }
.cmd .prompt svg { width: 20px; height: 20px; }
.cmd input, .cmd textarea { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 12px 10px; }
.cmd .btn { margin: 4px; min-height: 0; border-radius: calc(var(--radius) - 4px); }
.cmd.big { margin-top: 0; align-items: center; }
.cmd.big .prompt { color: var(--field-muted); padding-left: 14px; align-self: stretch; align-items: center; }
.cmd.big textarea { color: var(--field-ink); font: 500 1rem/1.5 var(--f-sans); padding: 13px 8px; resize: none; min-height: 50px; max-height: 240px; overflow: hidden; white-space: nowrap; }
.cmd.big textarea::placeholder { color: var(--field-muted); white-space: nowrap; text-overflow: ellipsis; }
.cmd.big .btn { flex: none; min-height: var(--control-h-sm); margin: 5px; padding: 0 18px; border-radius: calc(var(--radius) - 4px); }
/* After a multi-line paste the field grows; the icon stays at the top and
   the button at the bottom right. */
.cmd.big.multi { align-items: flex-end; }
.cmd.big.multi .prompt { align-self: flex-start; padding-top: 15px; }
.cmd.big.multi textarea { white-space: pre-wrap; overflow-y: auto; }
.check-paste { margin: 8px 2px 0; color: var(--muted); font-size: 0.85rem; }
.detected { margin: 10px 0 0; color: var(--emph); font-size: 0.92rem; font-weight: 650; }
.hint { margin: 12px 0 0; color: var(--muted); font-size: 0.9rem; }
.search-error { margin: 12px 0 0; }

/* Section heads on the homepage: centred, as on the rest of the page. */
.home .section-head { flex-direction: column; align-items: center; gap: 8px; margin-bottom: 32px; text-align: center; }
.home .section-head p { max-width: 60ch; }

/* All tools: white cards with a colour tile. */
.tools-band { padding: 72px 0; background: var(--bg); }
.tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) { .tool-grid { gap: 16px; } }
/* Four columns on wide screens; in two columns a lone last card spans both. */
@media (max-width: 1023px) { .tool-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .tool-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.tool-card {
  position: relative; display: grid; align-content: start; gap: 8px; height: 100%;
  padding: 22px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--card);
  color: var(--text); text-decoration: none; transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
a.tool-card:hover { transform: translateY(-2px); border-color: var(--red); box-shadow: var(--shadow-red); color: var(--text); }
.tool-card .tile { margin-bottom: 8px; }
.tool-card strong { color: var(--text); font-size: 1.06rem; font-weight: 800; line-height: 1.3; letter-spacing: -0.01em; }
.tool-desc { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.tool-card.soon { border-style: dashed; }
.tool-card .tag { position: absolute; top: 16px; right: 16px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--muted); font: 800 0.7rem/1.4 var(--f-sans); letter-spacing: 0.06em; text-transform: uppercase; }
.tool-card .tag.new { border-color: transparent; background: var(--red-soft); color: var(--red-soft-ink); }
.soon-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 32px 0 14px; }
.soon-head h3 { margin: 0; }
.soon-head p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* "Your connection at a glance": four white cards on blush. Each card spans
   five subgrid rows, so cards in a row share the same height without
   stretching. Details open in a full-width panel below the row
   (public/js/glance.js). */
.glance { padding: 72px 0; background: var(--blush); }
.glance-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; }
@media (min-width: 768px) { .glance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .glance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.glance-card {
  display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 0;
  padding: 20px 22px 14px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.glance-card.active { border-color: var(--edge-active); box-shadow: 0 0 0 1px var(--edge-active); }
.glance-card h3 { margin: 0; color: var(--muted); font: 700 12px/1.4 var(--f-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.glance-result { margin: 6px 0 4px; color: var(--text); font: 800 1.3rem/1.25 var(--f-sans); letter-spacing: -0.02em; overflow-wrap: break-word; }
.glance-result output { font: inherit; }
.glance-result .warn-text { color: var(--warn-text); }
.glance-meaning { margin: 0 0 8px; color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.glance-card dl { font-size: 0.92rem; align-self: start; }
.glance-card .row { padding: 8px 0; }
.glance-card .row dd.mono { font-size: 0.86rem; }
.glance-more { margin: 6px 0 0; align-self: end; }
.more-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--link); font-size: 0.9rem; font-weight: 700; text-decoration: none; }
.more-toggle::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); }
.more-toggle[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }
.more-toggle:hover { text-decoration: underline; }
.row-hint { display: block; margin-top: 6px; font-size: 0.84rem; font-weight: 400; color: var(--muted); text-align: right; }
.row.above .row-hint { text-align: left; }
/* Phones: the four cards become one compact list. */
@media (max-width: 599px) {
  .glance-grid { gap: 0; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
  .glance-card { grid-template-rows: none; grid-row: auto; padding: 14px 16px 6px; border: 0; border-radius: 0; border-top: 1px solid var(--border); }
  .glance-card:first-child { border-top: 0; }
  .glance-card.active { box-shadow: inset 3px 0 0 var(--red); }
  .glance-result { font-size: 1.12rem; margin: 2px 0; }
  .glance-meaning { margin-bottom: 4px; font-size: 0.86rem; }
  .glance-card .row { padding: 6px 0; }
  .glance-more { margin: 0; }
  .glance-grid > .glance-panel { border: 0; border-top: 1px solid var(--border); border-radius: 0; background: var(--surface-2); }
}

/* Detail panels: below the cards without JavaScript; with JavaScript only
   the open one shows, as a full-width row under its card's row. */
.glance-panels { display: grid; gap: 16px; margin-top: 16px; }
.glance-panel { padding: 20px 24px; background: var(--card); border: 1px solid var(--edge-active); border-radius: var(--radius-lg); }
.glance-panel:focus { outline: none; }
.glance-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.js .glance-panel:not(.open) { display: none; }
.js .glance-panels { margin-top: 0; }
.glance-grid > .glance-panel { grid-column: 1 / -1; }
.panel-head h3 { margin: 0 0 8px; }
.glance-panel > p { max-width: 80ch; margin: 0 0 8px; color: var(--muted); }
.glance-panel .hl-val { background: none; color: var(--text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
/* A 2-column key/value table, with two such columns side by side when wide. */
.kv { margin-top: 8px; }
.kv .row, .kv .row.above { flex-direction: row; align-items: baseline; gap: 16px; }
.kv .row dt { flex: 0 0 40%; max-width: 40%; }
.kv .row dd, .kv .row.above dd { flex: 1; text-align: left; font-weight: 500; }
@media (min-width: 1024px) { .kv { columns: 2; column-gap: 48px; } .kv .row { break-inside: avoid; } }
@media (max-width: 599px) {
  .kv .row, .kv .row.above { flex-direction: column; gap: 2px; }
  .kv .row dt { max-width: none; flex: none; }
}
/* Blocklists card: the lists checked, in the details panel. */
.bl-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.bl-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }

/* How it works and data sources. */
.how-band { padding: 72px 0; background: var(--bg); border-bottom: 1px solid var(--hair); }
.how-inner { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: start; }
@media (min-width: 1000px) { .how-inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; } }
.how-band h2 { margin: 8px 0 14px; }
.how-band p { max-width: 64ch; color: var(--muted); }
.facts-title { margin: 6px 0 12px; }
.facts { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts > div { padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--radius-lg); background: var(--surface-2); }
.facts dt { color: var(--text); font-weight: 700; }
.facts dd { margin: 4px 0 0; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.how-band h2.sub { margin: 40px 0 12px; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.how-band .how { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
@media (min-width: 860px) { .how-band .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.how-band .how li { padding: 16px 18px; border: 1px solid var(--hair); border-radius: var(--radius-lg); background: var(--card); color: var(--muted); }
.how-band .how li:last-child { border-bottom: 1px solid var(--hair); }
.how-band .how strong { color: var(--text); }

/* FAQ. */
.faq-band { padding: 72px 0; }
.faq-inner { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 1000px) { .faq-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; } }
.faq-inner h2 { margin: 8px 0 10px; }
.faq-more { color: var(--muted); }

@media (max-width: 640px) {
  .hero { padding: 36px 0 48px; }
  .hero-inner { gap: 14px; }
  .pill { font-size: 0.8rem; padding: 6px 12px; }
  .hero-card { margin-top: 28px; }
  .hc-top { padding: 20px 20px 18px; }
  .hc-search { padding: 16px 16px 18px; }
  .tools-band, .glance, .how-band, .faq-band { padding: 48px 0; }
  .home .section-head { margin-bottom: 22px; }
  .tool-card { gap: 6px; padding: 16px 14px; }
  .tool-card .tile { margin-bottom: 4px; }
  .tool-card strong { font-size: 0.96rem; line-height: 1.25; overflow-wrap: break-word; hyphens: auto; }
  .tool-desc { font-size: 0.84rem; line-height: 1.42; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .tool-card .tag { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .tool-card, .btn { transition: none; }
  a.tool-card:hover { transform: none; }
  /* Everything else too: arrows, panels, smooth scrolling. */
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Tool pages: the tool's colour tile next to the title. */
.tool-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.tool-head h1 { margin: 0; min-width: 0; }
@media (max-width: 599px) { .tool-head { gap: 12px; } .tool-head .tile { width: 44px; height: 44px; border-radius: 12px; } .tool-head .tile svg { width: 22px; height: 22px; } }

/* ---------- Banners ---------- */
.consent {
  position: fixed; left: var(--gutter); right: var(--gutter); bottom: 16px; z-index: 60;
  max-width: 560px; margin: 0 auto; padding: 18px;
  background: var(--surface); color: var(--text); border: 1px solid var(--hair-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow);
}
.consent[hidden] { display: none; }
.consent h2 { font: 650 12px/1.4 var(--f-sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.consent p { margin: 0 0 14px; font-size: 0.95rem; color: var(--text-2); }
.consent-actions { display: flex; gap: 8px; }
.consent .choice { flex: 1 1 0; }

/* ---------- Domain report ---------- */
.overview { padding-top: 8px; }
.overview .lede { margin: 10px 0 0; max-width: 46ch; font-size: clamp(1.2rem, 2.6vw, 1.6rem); line-height: 1.35; color: var(--text-2); }
.lede .hl-val { background: none; color: var(--text); font-weight: 600; text-decoration: underline; text-decoration-color: var(--emph); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.counts { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rsections { margin-top: 32px; display: grid; gap: 12px; }
.rsections > * { min-width: 0; }
.rsec .sentence, .rsec dd { overflow-wrap: break-word; }
.rsec { border: 1px solid var(--hair); border-radius: var(--radius-lg); background: var(--surface); padding: 4px 20px 16px; }
.rsec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.rsec > summary::-webkit-details-marker { display: none; }
.rsec > summary h3 { margin: 0; }
.rsec > summary::after { content: ""; width: 8px; height: 8px; margin-left: 4px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); }
.rsec[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.rsec > summary .status { margin-left: auto; font-size: 0.9rem; }
.verdicts { list-style: none; padding: 0; margin: 0 0 8px; }
.verdict { padding: 10px 0; border-bottom: 1px solid var(--hair); }
.verdict > .status { margin-right: 10px; }
.verdict .sentence { color: var(--text); }
.advice { margin: 10px 0 2px 20px; padding-left: 14px; border-left: 2px solid var(--emph); color: var(--text-2); font-size: 0.95rem; }
.advice p { margin: 0 0 6px; }
.advice strong { color: var(--text); font-weight: 650; }
table.headers td { vertical-align: baseline; }
table.headers td:nth-child(2) { white-space: nowrap; }
table.headers td:last-child { color: var(--text-2); }

/* Universal search strip at the top of tool pages */
.searchstrip { padding: 14px 0 10px; border-bottom: 1px solid var(--hair); }
.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: 0.85rem; color: var(--muted); }
.chips a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--hair-strong); border-radius: 999px; color: var(--text-2); font: 500 0.82rem/1 var(--f-mono); text-decoration: none; background: color-mix(in srgb, var(--text) 4%, transparent); }
.chips a:hover { border-color: var(--edge-active); color: var(--text); }
.check-box .chips { margin-top: 12px; }
.search-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--hair-strong); border-radius: 12px; color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); }
.search-toggle svg { width: 20px; height: 20px; }
.search-toggle[aria-expanded="true"] { border-color: var(--edge-active); }
@media (max-width: 767px) {
  .search-toggle { display: inline-flex; }
  .searchstrip { display: none; }
  .searchstrip.open, .searchstrip:target { display: block; }
}
.searchstrip .cmd { margin-top: 0; max-width: 720px; }
.searchstrip .search-error { max-width: 720px; }

/* "?" explanations */
.tip { display: inline-block; position: relative; vertical-align: middle; margin: 0 2px; text-transform: none; letter-spacing: 0; }
.tip > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border: 1px solid var(--input); border-radius: 50%;
  font: 650 12px/1 var(--f-sans); color: var(--muted);
}
.tip > summary::-webkit-details-marker { display: none; }
.tip > summary:hover, .tip[open] > summary { color: var(--text); border-color: var(--edge-active); }
.tip-body {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  width: min(300px, calc(100vw - 48px)); padding: 12px 14px;
  background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--radius); box-shadow: var(--shadow);
  font: 400 14px/1.5 var(--f-sans); color: var(--text-2); text-align: left; white-space: normal;
}
.readout .tip { margin-left: 6px; }
.tips-line { margin: 4px 0 10px; font: 500 13px/1.4 var(--f-sans); color: var(--muted); }

/* Copy buttons on technical values */
.copyval {
  display: inline-flex; align-items: center; justify-content: center; vertical-align: middle;
  width: 24px; height: 24px; margin-left: 6px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: var(--muted); cursor: pointer; opacity: 0.75;
}
.copyval:hover, .copyval:focus-visible { opacity: 1; color: var(--text); }
@media (hover: hover) and (pointer: fine) {
  .copyval { opacity: 0; }
  .row:hover .copyval, .row:focus-within .copyval, .readout > div:hover .copyval, td:hover .copyval, .copyval:focus-visible { opacity: 0.8; }
}
.copyval svg { width: 14px; height: 14px; }
.copyval.done { color: var(--good); opacity: 1; }
@media (max-width: 599px) {
  /* On phones the explanation is a panel pinned to the bottom of the screen,
     so it can never run off the edge (works without JavaScript). */
  .tip-body { position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto; width: auto; z-index: 70; }
}

/* Contact page */
.contact .email { font: 500 clamp(1.25rem, 4vw, 1.75rem)/1.3 var(--f-mono); margin: 8px 0 12px; overflow-wrap: anywhere; }
.contact .email a { text-decoration-thickness: 2px; }
.contact h2.label { margin: 36px 0 4px; }
.topics .row { flex-direction: column; gap: 4px; }
.topics .row dt { max-width: none; color: var(--text); font-weight: 650; }
.topics .row dd.topic { text-align: left; font-weight: 400; color: var(--text-2); }

/* Data sources page */
.source-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.src-card { display: flex; flex-direction: column; }
.card.src-card > h3 { margin: 0; font: 650 1.02rem/1.3 var(--f-sans); letter-spacing: -0.01em; text-transform: none; color: var(--text); }
.source-license { margin: 6px 0 8px; color: var(--text-2); font-size: 0.92rem; line-height: 1.5; }
.src-card .hint { margin: 0 0 8px; font-size: 0.85rem; }
.src-card dl { font-size: 0.92rem; }
.src-card .row { padding: 7px 0; }
.source-urls { list-style: none; padding: 0; margin: 8px 0 0; font-size: 0.8rem; color: var(--muted); }
.source-urls code { overflow-wrap: anywhere; }
.source-links { margin: auto 0 0; padding-top: 8px; font-size: 0.9rem; }

/* IP result page (/ip/<address>) */
.ipcheck h1 { display: grid; gap: 6px; margin-bottom: 20px; }
.ipcheck h1 .ip-title { font: 600 clamp(1.9rem, 5vw, 3rem)/1.1 var(--f-mono); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.ipcheck h1 .sub { font: 500 clamp(1rem, 2vw, 1.15rem)/1.4 var(--f-sans); letter-spacing: 0; color: var(--text-2); }
.verdict-card {
  --lv: var(--unavailable);
  display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px;
  background: var(--surface); border: 1px solid var(--hair-strong); border-radius: var(--radius-lg);
  box-shadow: inset 4px 0 0 var(--lv), var(--shadow);
}
.verdict-card.level-bad { --lv: var(--bad); }
.verdict-card.level-warn { --lv: var(--warn); }
.verdict-card.level-info { --lv: var(--info); }
.verdict-card.level-good { --lv: var(--good); }
.verdict-icon { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; color: var(--lv); background: color-mix(in srgb, var(--lv) 14%, transparent); }
.verdict-icon svg { width: 28px; height: 28px; }
.verdict-body { min-width: 0; }
.verdict-body .eyebrow { color: var(--lv); }
.verdict-body .eyebrow::before { display: none; }
.verdict-body .eyebrow code { color: var(--text); letter-spacing: 0; text-transform: none; }
.verdict-sentence { margin: 6px 0 8px; font-size: clamp(1.3rem, 3vw, 1.75rem); line-height: 1.25; }
.verdict-sentence a { color: var(--text); text-decoration-color: var(--lv); }
.verdict-why { margin: 0 0 12px; color: var(--text-2); }
.verdict-todo { padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); color: var(--text); }
.verdict-todo strong { margin-right: 4px; }
.verdict-card.compact { padding: 12px 14px; gap: 12px; box-shadow: inset 3px 0 0 var(--lv); margin-top: 10px; }
.verdict-card.compact .verdict-icon { width: 36px; height: 36px; border-radius: 10px; }
.verdict-card.compact .verdict-icon svg { width: 20px; height: 20px; }
.verdict-card.compact .verdict-sentence { margin: 2px 0 0; font-size: 1rem; font-weight: 600; }
.analyst { margin-top: 16px; }
.analyst .btn svg { width: 16px; height: 16px; }
.counts { color: var(--muted); font-size: 0.92rem; }
.sources-table td { vertical-align: middle; }
.sources-table td a { color: var(--text); }
.sources-table tr.st-matched td:first-child a { font-weight: 650; }
.sources-table tr.st-not_checked td { color: var(--muted); }
.sources-table td.detail { font-size: 0.88rem; color: var(--text-2); overflow-wrap: anywhere; }
.sources-table .status { white-space: nowrap; }
.owner .status { margin-left: 8px; font-size: 0.88rem; }
.pivots { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.pivot { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--hair-strong); border-radius: 999px; background: var(--surface); color: var(--text); text-decoration: none; font-weight: 600; }
.pivot::after { content: "↗"; margin-left: 6px; color: var(--muted); }
.pivot:hover { border-color: var(--edge-active); color: var(--text); }
.servers { margin: 16px 0 4px; }
.verdict-link { margin: 4px 0 0; }
@media (max-width: 599px) {
  .verdict-card { flex-direction: column; gap: 12px; padding: 18px; }
  .verdict-card.compact { flex-direction: row; }
  /* The sources table becomes stacked rows on phones. */
  .sources-table thead { display: none; }
  .sources-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .sources-table td { border: 0; padding: 0; }
  .sources-table td:nth-child(2) { grid-row: 2; font-size: 0.85rem; color: var(--muted); }
  .sources-table td:nth-child(3) { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .sources-table td.detail { grid-column: 1 / -1; }
  .sources-table td.detail:empty { display: none; }
}
.ipcheck > p.muted { margin-top: 36px; }

/* A WebRTC leak lists addresses: give them the full row width. */
.row:has(> dd > #webrtc-ips:not([hidden])) { flex-direction: column; align-items: stretch; gap: 4px; }
.row:has(> dd > #webrtc-ips:not([hidden])) dd { text-align: left; }
#webrtc-ips .iplist { padding-left: 0; list-style: none; overflow-wrap: normal; }
#webrtc-ips .iplist li { white-space: nowrap; }

/* Data tables stack into labelled rows on phones, so wide record values
   stay readable without sideways scrolling. */
@media (max-width: 599px) {
  .data-table thead { display: none; }
  .data-table tr { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .data-table td { padding: 0; border: 0; min-width: 0; }
  .data-table td::before { content: attr(data-label); color: var(--muted); font: 500 0.85rem/1.5 var(--f-sans); margin-right: 8px; }
  .data-table td.val { grid-column: 1 / -1; }
  .data-table td.val::before { display: block; }
  table.headers tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  table.headers td { padding: 0; border: 0; }
  table.headers td:last-child { grid-column: 1 / -1; }
}

/* ---- Network type (/ip/<address>, /lookup) ---- */
.net-head { margin: 0 0 8px; font-size: 1.15rem; }
.net-types { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.net-types li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 10px 14px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); }
.net-types .basis { color: var(--muted); font-size: 0.9rem; overflow-wrap: anywhere; }
.crawler-line { margin: 12px 0; }
.net-coverage { margin: 16px 0 8px; border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface); }
.net-coverage > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 10px 16px; cursor: pointer; font-weight: 620; list-style: none; }
.net-coverage > summary::-webkit-details-marker { display: none; }
.net-coverage > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); transition: transform 160ms ease; }
.net-coverage[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.net-coverage .table-wrap { padding: 0 16px 12px; }
.net-table td { vertical-align: top; }
.net-table td:last-child { color: var(--text-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.net-table .status { white-space: nowrap; }
.net-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 16px 0; padding: 12px 16px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius); }
.net-line .label { margin: 0; }
/* Phones: type on the left, result on the right, "checked against" below. */
@media (max-width: 599px) {
  .net-table tr { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
  .net-table td:nth-child(1) { font-weight: 600; }
  .net-table td:nth-child(1)::before, .net-table td:nth-child(2)::before { content: none; }
  .net-table td:last-child { grid-column: 1 / -1; }
  .net-table td:last-child::before { display: block; margin: 0; font-size: 0.8rem; }
}
/* Credit for the community VPN list, next to a VPN result. */
.net-src { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; font-weight: 400; }
.net-head .net-src, .net-line .net-src { display: inline; margin: 0 0 0 6px; }

/* Touch targets of at least 24 x 24 px (WCAG 2.2, 2.5.8). */
.tool-form .muted a { display: inline-block; padding: 4px 0; }
.search-toggle { flex: none; }
.bits:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ---- Log checker (/log-checker) ---- */
.privacy-note { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 20px; padding: 12px 16px; border: 1px solid var(--hair-strong); border-radius: var(--radius); background: var(--card); }
.privacy-note svg { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--good); }
.logcheck textarea { width: 100%; min-height: 160px; padding: 12px 14px; font: 0.9rem/1.5 var(--f-mono); color: var(--text); background: var(--surface); border: 1px solid var(--input); border-radius: var(--radius); resize: vertical; }
.logcheck textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.logcheck .actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 12px 0; }
.file-btn { cursor: pointer; }
.file-btn:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pick-wrap { max-height: 420px; overflow: auto; border: 1px solid var(--hair); border-radius: var(--radius); }
.pick-table td:first-child, .pick-table th:first-child { width: 4.5rem; }
.pick-table input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--emph); }
.pick-table label { cursor: pointer; }
.res-summary { list-style: none; margin: 8px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.res-summary li { display: grid; gap: 2px; padding: 12px 14px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); border-left: 4px solid var(--sc, var(--muted)); }
.res-summary strong { font-size: 1.6rem; line-height: 1.1; }
.res-summary .g-label { font-weight: 600; }
.res-summary .g-lines { color: var(--muted); font-size: 0.85rem; }
.g-blocklisted { --sc: var(--bad); }
.g-tor, .g-scanner { --sc: var(--warn); }
.g-crawler { --sc: var(--good); }
.g-hosting { --sc: var(--info); }
.g-vpn, .g-relay { --sc: var(--cat-vpn); }
.g-isp { --sc: var(--cat-isp); }
.g-private, .g-unknown { --sc: var(--unavailable); }
.res-table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; font: inherit; color: inherit; }
.res-table th button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.res-table th[aria-sort="ascending"] button::after { content: "▲"; font-size: 0.7em; }
.res-table th[aria-sort="descending"] button::after { content: "▼"; font-size: 0.7em; }
.res-table td .net-src { display: block; }
.blocklist { margin-top: 24px; padding: 16px; border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--surface); }
.blocklist h3 { margin-top: 0; }
.block-groups { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 8px 0; padding: 0; border: 0; }
.block-groups .chk { display: inline-flex; gap: 6px; align-items: center; min-height: 32px; cursor: pointer; }
.block-groups input { width: 18px; height: 18px; accent-color: var(--emph); }
.blocklist select { min-height: 40px; padding: 0 10px; color: var(--text); background: var(--surface-2); border: 1px solid var(--input); border-radius: var(--radius); }
.block-preview { max-height: 180px; overflow: auto; margin: 8px 0 0; padding: 10px 12px; font: 0.85rem/1.5 var(--f-mono); color: var(--text); background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); white-space: pre; }
.block-preview:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Phones: the result table's heading row stays visible as sort buttons. */
@media (max-width: 599px) {
  .res-table thead { display: block; }
  .res-table thead tr { display: flex; flex-wrap: wrap; gap: 6px 8px; padding: 0 0 10px; border-bottom: 1px solid var(--hair); }
  .res-table thead th { padding: 0; border: 0; }
  .res-table th button { min-height: var(--control-h-sm); padding: 0 12px; border: 1px solid var(--input); border-radius: var(--radius); font-size: 0.85rem; }
}
/* Phones: in the result table the address takes a full row, and long
   values (IPv6, network names) wrap instead of running off the edge. */
@media (max-width: 599px) {
  .res-table tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .res-table tbody td:first-child { grid-column: 1 / -1; }
  .res-table td { overflow-wrap: anywhere; }
}

/* ---- Category chips: a dot and a soft tint of the category colour, text in
   the normal text colour (contrast never depends on the tint). ---- */
.cat-chip { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--sc, var(--unavailable)) 16%, transparent); color: var(--text); font-size: 0.88rem; font-weight: 560; line-height: 1.4; }
.cat-chip::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sc, var(--unavailable)); }
.verdict-card.cat-attacker, .verdict-card.cat-blocklisted { --lv: var(--bad); }
.verdict-card.cat-tor, .verdict-card.cat-scanner { --lv: var(--warn); }
.verdict-card.cat-bot { --lv: var(--good); }
.verdict-card.cat-cloud { --lv: var(--info); }
.verdict-card.cat-relay { --lv: var(--cat-vpn); }
.verdict-card.cat-isp { --lv: var(--cat-isp); }
.verdict-card.cat-reserved, .verdict-card.cat-unknown { --lv: var(--unavailable); }
.verdict-body .eyebrow { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: color-mix(in srgb, var(--lv) 16%, transparent); color: var(--text); letter-spacing: 0.08em; }
/* IP addresses are always monospace. */
.ip, .ipaddr, .res-table td:first-child, .pick-table td:nth-child(2) { font-family: var(--f-mono); }
/* The "Open a log file" label is a button, not a form label. */
.tool-form label.file-btn { display: inline-flex; align-items: center; justify-content: center; margin: 0; font: 650 15px/1 var(--f-sans); letter-spacing: 0; text-transform: none; color: var(--text); }
/* Phones: one line per address in the selection list (checkbox, IP, lines). */
@media (max-width: 599px) {
  .pick-table tr { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; }
  .pick-table td::before { content: none; }
  .pick-table td:last-child { color: var(--text-2); font-variant-numeric: tabular-nums; }
}
@media (max-width: 599px) {
  .pick-table td:first-child, .pick-table th:first-child { width: auto; }
  .pick-table tr { padding: 8px 12px; }
}

/* Log checker actions. */
.log-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.log-actions .btn { width: 100%; }
.log-actions .btn.primary { grid-column: 1 / -1; }
.log-actions .btn svg { flex: none; }
@media (min-width: 600px) {
  .log-actions { display: flex; flex-wrap: wrap; align-items: center; }
  .log-actions .btn { width: auto; }
}
@media (max-width: 599px) {
  .log-actions .btn.ghost { padding: 0 10px; gap: 6px; font-size: 14px; text-align: center; line-height: 1.2; }
}

/* ---- Email header analyzer (/email-headers) ---- */
.hdrcheck textarea { width: 100%; min-height: 200px; padding: 12px 14px; font: 0.85rem/1.5 var(--f-mono); color: var(--text); background: var(--surface); border: 1px solid var(--input); border-radius: var(--radius); resize: vertical; }
.hdrcheck textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.howto { margin: 4px 0 20px; border: 1px solid var(--hair); border-radius: var(--radius-md); background: var(--card); }
.howto > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 10px 16px; cursor: pointer; font-weight: 620; list-style: none; }
.howto > summary::-webkit-details-marker { display: none; }
.howto > summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-3px); }
.howto[open] > summary::after { transform: rotate(-135deg) translateY(-3px); }
.howto-grid { display: grid; gap: 12px; padding: 0 16px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.howto-app { padding: 12px 14px; border: 1px solid var(--hair); border-radius: var(--radius); background: var(--surface-2); }
.howto-app h3 { margin: 0 0 6px; font-size: 0.95rem; }
.howto-app p { margin: 0; color: var(--text-2); font-size: 0.9rem; }
.hdrcheck #hdr-verdict { margin-bottom: 8px; }
.hdr-reasons { margin: 4px 0 10px; padding-left: 1.2em; }
.hdr-reasons li { margin: 4px 0; }
.hdr-sec { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--hair); }
.hdr-sec h2 { font-size: 1.15rem; margin: 0 0 10px; }
.hdr-notes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.hdr-note { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); color: var(--text); overflow-wrap: anywhere; }
.hdr-note .status { flex: none; }
.hdr-auth { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hdr-auth-row { display: grid; grid-template-columns: 4.5rem 9rem minmax(0, 1fr); gap: 4px 12px; align-items: baseline; padding: 10px 12px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); }
.hdr-auth-name { font-weight: 700; }
.hdr-auth-ex { color: var(--text-2); overflow-wrap: anywhere; }
@media (max-width: 599px) {
  .hdr-auth-row { grid-template-columns: auto minmax(0, 1fr); }
  .hdr-auth-ex { grid-column: 1 / -1; }
}
.hdr-ipres { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.hdr-ip { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 12px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); }
.hdr-ip .net-src { flex-basis: 100%; }
/* Delivery path: a vertical timeline, oldest first. */
.hop-list { list-style: none; margin: 8px 0 0; padding: 0 0 0 18px; border-left: 2px solid var(--hair-strong); display: grid; gap: 12px; counter-reset: hop; }
.hop { position: relative; padding: 10px 12px; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); counter-increment: hop; }
.hop::before { content: counter(hop); position: absolute; left: -31px; top: 10px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--surface-2); border: 1px solid var(--hair-strong); color: var(--text-2); font: 600 0.75rem/1 var(--f-sans); }
.hop.flag-slow, .hop.flag-very_slow { border-color: color-mix(in srgb, var(--warn) 55%, var(--hair)); }
.hop-route { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; overflow-wrap: anywhere; }
.hop-label { color: var(--text-2); font-size: 0.85rem; }
.hop-time { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: var(--text-2); font-size: 0.88rem; }
.hop-delay { font-weight: 600; color: var(--text); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Very small phones (under 380 px): the menu button shows its icon only
   (the word stays for screen readers), and long values may break. */
@media (max-width: 379px) {
  .navmenu .menu-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bar { gap: 6px; }
}
.eyebrow { max-width: 100%; overflow-wrap: anywhere; }
.examples li { overflow-wrap: anywhere; }

/* ---- Guides (v5): byline, "In short", example log, tables, Try it, sources ---- */
.guide .byline { margin: 12px 0 24px; font-size: 0.92rem; line-height: 1.6; }
.guide .byline a { color: var(--muted); }
.in-short { margin: 0 0 28px; padding: 18px 22px; border-radius: var(--radius-lg); background: var(--blush); border: 1px solid var(--border); }
.in-short h2.label { margin: 0 0 6px; padding: 0; border: 0; font-size: 12px; }
.in-short p { margin: 0 0 8px; color: var(--text); font-size: 1.02rem; line-height: 1.6; }
.in-short p:last-child { margin-bottom: 0; }
.guide pre { font-size: 0.82rem; line-height: 1.55; }
.example { margin: 18px 0 22px; }
.example figcaption { margin: 0 0 6px; color: var(--muted); font: 700 12px/1.4 var(--f-sans); letter-spacing: 0.1em; text-transform: uppercase; }
.example pre.log { margin: 0; white-space: pre; }
.example pre.log:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.logline { margin: 12px 0 18px; display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.logline > div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 16px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 0.95rem; line-height: 1.55; }
.logline > div:first-child { border-top: 0; }
.logline dt code { overflow-wrap: anywhere; font-size: 0.85rem; }
.logline dd { margin: 0; color: var(--muted); }
@media (max-width: 599px) { .logline > div { grid-template-columns: 1fr; } }
.guide table.result-excerpt, .guide table.checklist { font-size: 0.92rem; line-height: 1.5; margin: 8px 0 20px; }
.guide table.result-excerpt td.ip { white-space: nowrap; }
.guide table.result-excerpt .cat-chip { margin-right: 6px; }
.guide table.checklist td:first-child { width: 38%; }
.guide table.checklist td:nth-child(2) { width: 22%; color: var(--muted); }
@media (max-width: 599px) {
  .guide table.checklist thead { display: none; }
  .guide table.checklist tr { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
  .guide table.checklist td { width: auto !important; padding: 0; border: 0; }
  .guide table.checklist td:nth-child(2)::before { content: "→ "; }
  .guide table.result-excerpt thead { display: none; }
  .guide table.result-excerpt tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
  .guide table.result-excerpt td { padding: 0; border: 0; }
  .guide table.result-excerpt td:nth-child(2) { color: var(--muted); }
  .guide table.result-excerpt td:nth-child(2)::after { content: " ×"; }
  .guide table.result-excerpt td:last-child { grid-column: 1 / -1; }
}
.try-it { display: flex; gap: 18px; align-items: flex-start; margin: 36px 0 8px; padding: 22px; border: 1.5px solid var(--border); border-radius: var(--radius-lg); background: var(--card); }
.try-it h2.label { margin: 0 0 6px; padding: 0; border: 0; font-size: 12px; }
.try-it p { margin: 0 0 14px; color: var(--muted); font-size: 1rem; line-height: 1.6; }
@media (max-width: 599px) { .try-it { flex-direction: column; gap: 12px; padding: 18px; } .try-it .btn { width: 100%; } }
.guide .sources ul, .guide .related ul { padding-left: 1.2em; }
.guide .sources li { margin: 0.3em 0; font-size: 0.95rem; overflow-wrap: anywhere; }
.guide .sources .muted { margin-top: -4px; }
.guide .related ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.guide .related li a { display: block; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--radius); color: var(--text); text-decoration: none; font-weight: 700; font-size: 1rem; line-height: 1.4; }
.guide .related li a:hover { border-color: var(--red); }
.guide-cat { margin-top: 36px; }
.guide-cat h2 { margin: 0 0 14px; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.guide-list li.card h3 { font: 700 1.15rem/1.3 var(--f-sans); letter-spacing: -0.01em; text-transform: none; color: var(--text); margin: 0; }
.guide-list li.card h3 a { color: var(--text); text-decoration: none; }
.guide-list li.card h3 a:hover { color: var(--link-hover); }
.guide pre:focus-visible, .guide .table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.guide :not(pre) > code { overflow-wrap: anywhere; }
/* Guide diagrams (inline SVG): theme-aware via CSS, no inline styles. */
.diagram { margin: 20px 0 24px; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram figcaption { margin-top: 8px; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.dg-box { fill: var(--card); stroke: var(--border-strong); stroke-width: 1.5; }
.dg-alert { stroke: var(--red); }
.dg-text { fill: var(--text); font: 700 15px var(--f-sans); }
.dg-muted { fill: var(--muted); font: 500 13px var(--f-sans); }
.dg-red { fill: var(--link); font: 700 13px var(--f-sans); }
.dg-small { font-size: 12px; }
.dg-line { fill: none; stroke: var(--muted); stroke-width: 2; }
.dg-leak { fill: none; stroke: var(--red); stroke-width: 2.5; stroke-dasharray: 7 6; }
/* Tool pages: links to the most relevant guides. */
.tool-guides { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--hair); }
.tool-guides h2.label { margin: 0 0 12px; }
.tool-guides ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.tool-guides a { display: block; height: 100%; padding: 14px 16px; border: 1.5px solid var(--border); border-radius: var(--radius); color: var(--text); font-weight: 700; line-height: 1.4; text-decoration: none; }
.tool-guides a:hover { border-color: var(--red); }

/* ---------- Is it down? ---------- */
.down-verdict { --kc: var(--unavailable); margin: 24px 0; padding: 20px 22px; background: var(--card); border: 1.5px solid var(--hair); border-left: 6px solid var(--kc); border-radius: var(--radius); }
.down-verdict.k-up { --kc: var(--good); }
.down-verdict.k-down { --kc: var(--bad); }
.down-verdict.k-problem, .down-verdict.k-unreachable { --kc: var(--warn); }
.down-kind { display: flex; align-items: baseline; gap: 4px; margin: 0; font-size: 1.5rem; font-weight: 720; letter-spacing: -0.01em; line-height: 1.25; }
.down-kind .status::before { width: 14px; height: 14px; border-radius: 4px; }
.down-domain { margin: 4px 0 12px; color: var(--muted); overflow-wrap: anywhere; }
.down-verdict .lede { margin: 0 0 8px; }
.down-scope { margin: 0; color: var(--text-2); }
.down-checks, .down-advice { margin: 28px 0; }
.down-checks .label, .down-advice .label { margin: 0 0 12px; }
.down-checks .sentence { overflow-wrap: anywhere; }
.down-advice ul { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }

/* ---------- Verify a bot ---------- */
.bot-fields { display: grid; gap: 12px; }
@media (min-width: 720px) { .bot-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } }
.bot-fields input { width: 100%; }
.bot-form .btn { margin-top: 4px; }
.bot-verdict { --kc: var(--unavailable); margin: 24px 0; padding: 20px 22px; background: var(--card); border: 1.5px solid var(--hair); border-left: 6px solid var(--kc); border-radius: var(--radius); }
.bot-verdict.v-verified { --kc: var(--good); }
.bot-verdict.v-spoofed { --kc: var(--bad); }
.bot-verdict.v-different { --kc: var(--warn); }
.bot-verdict.v-notbot, .bot-verdict.v-claim { --kc: var(--info); }
.bot-kind { display: flex; align-items: baseline; gap: 4px; margin: 0 0 10px; font-size: 1.5rem; font-weight: 720; letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
.bot-kind .status::before { width: 14px; height: 14px; border-radius: 4px; }
.bot-verdict .lede, .bot-verdict p { margin: 0 0 8px; }
.bot-next { margin-bottom: 0; color: var(--text-2); }
.bot-evidence { margin: 0 0 20px; }
.bot-evidence .row { display: grid; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
@media (min-width: 720px) { .bot-evidence .row { grid-template-columns: 200px minmax(0, 1fr); } }
.bot-evidence dt { color: var(--muted); font-weight: 560; }
.bot-evidence dd { margin: 0; overflow-wrap: anywhere; }
.bot-evidence code.ua { font-size: 0.88rem; }
.bot-evidence ul.bare { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.verifybot pre.curl { margin-top: 6px; }
.verifybot pre.curl:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bot-lists .table-wrap:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.bot-logs { margin-top: 24px; }
/* Log checker: what an address's user agent claims, next to its category. */
.bot-claim { display: inline-block; margin: 4px 0 0 6px; padding: 2px 8px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; border: 1.5px solid var(--sc, var(--unavailable)); }
.bot-claim.c-verified { --sc: var(--good); }
.bot-claim.c-fake { --sc: var(--bad); }
.bot-claim.c-other { --sc: var(--warn); }

/* ---------- Shared results layout (src/results.js) ---------- */
.st-icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.s-bad { --sc: var(--bad); }
.s-warn { --sc: var(--warn); }
.s-good { --sc: var(--good); }
.s-info { --sc: var(--info); }
.s-na { --sc: var(--unavailable); }
.rs-summary { display: grid; gap: 16px; margin: 20px 0; padding: 20px 22px; background: var(--card); border: 1.5px solid var(--hair); border-left: 6px solid var(--sc); border-radius: var(--radius); }
@media (min-width: 900px) { .rs-summary { grid-template-columns: minmax(0, 1fr) auto; align-items: start; } .rs-actions { grid-column: 1 / -1; } }
.rs-verdict { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 1.35rem; font-weight: 720; line-height: 1.3; overflow-wrap: anywhere; }
.rs-verdict .st-icon { width: 22px; height: 22px; color: var(--sc); }
.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 12px; padding: 0; }
.rs-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, var(--sc) 55%, transparent); background: color-mix(in srgb, var(--sc) 12%, transparent); color: var(--text); font-size: 0.9rem; font-weight: 600; line-height: 1.35; text-decoration: none; }
.rs-chip .st-icon { color: var(--sc); }
a.rs-chip:hover { border-color: var(--sc); }
a.rs-chip:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rs-facts { display: grid; gap: 8px 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); margin: 4px 0 0; }
.rs-facts dt { color: var(--muted); font-size: 0.8rem; font-weight: 560; text-transform: uppercase; letter-spacing: 0.04em; }
.rs-facts dd { margin: 2px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.rs-grade { min-width: 0; border: 1.5px solid var(--hair); border-radius: var(--radius); background: var(--surface-2); }
.rs-grade summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.rs-grade summary::-webkit-details-marker { display: none; }
.rs-grade summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
.rs-grade-letter { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; font-size: 1.8rem; font-weight: 800; color: var(--text); border: 3px solid var(--gc, var(--unavailable)); }
.rs-grade.g-A, .rs-grade.g-B { --gc: var(--good); }
.rs-grade.g-C { --gc: var(--warn); }
.rs-grade.g-D, .rs-grade.g-F { --gc: var(--bad); }
.rs-grade-label { font-weight: 600; }
.rs-grade-how { padding: 0 14px 12px; font-size: 0.92rem; max-width: 46ch; }
.rs-grade-how ul { margin: 6px 0; padding-left: 1.1em; display: grid; gap: 4px; }
.rs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.rs-jump { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 12px; padding: 10px 0; background: var(--bg); border-bottom: 1px solid var(--hair); }
.rs-jump ul { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; }
.rs-jump a { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 24px; font-weight: 600; }
.rs-jump a .st-icon { color: var(--sc, var(--warn)); }
.rs-jump li:has(.st-icon) a { color: var(--text); }
.btn.sm { padding: 5px 12px; font-size: 0.88rem; min-height: 0; }
/* Groups of the main result: always visible, a small heading over a table. */
.rs-sec { margin: 0 0 12px; border: 1.5px solid var(--hair); border-radius: var(--radius); background: var(--card); scroll-margin-top: 64px; }
.rs-sec-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 18px 6px; }
.rs-sec-title { margin: 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
.rs-sec-sub { margin: -2px 18px 6px; color: var(--muted); font-size: 0.9rem; max-width: 72ch; }
.rs-sec-status { display: inline-flex; align-items: center; gap: 5px; font-size: 0.85rem; font-weight: 600; color: var(--text-2); }
.rs-sec-status .st-icon { color: var(--sc); }
.rs-sec-body { padding: 0 8px 8px; }
.rs-sec-body > :not(.rs-kv) { margin-left: 10px; margin-right: 10px; }
.rs-sec-body .source { margin: 10px 0 0; }
.rs-kv { width: 100%; border-collapse: collapse; margin: 0 0 8px; table-layout: fixed; }
.rs-kv th, .rs-kv td { padding: 9px 10px; border-top: 1px solid var(--hair); text-align: left; vertical-align: top; }
.rs-kv tr:first-child th, .rs-kv tr:first-child td { border-top: 0; }
.rs-kv th { color: var(--muted); font: 560 0.92rem/1.45 var(--f-sans); letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; }
.rs-kv .rs-col-label { width: 34%; }
@media (min-width: 900px) { .rs-kv .rs-col-label { width: 26%; } }
.rs-kv td { overflow-wrap: anywhere; word-break: normal; }
.rs-val { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.rs-val > span { min-width: 0; overflow-wrap: anywhere; }
.rs-val.mono > span { font-family: var(--f-mono); font-size: 0.9rem; }
.rs-val .st-icon { align-self: center; color: var(--sc); }
.rs-row:not(.loud) .rs-val .st-icon { display: none; }
.rs-row.loud { background: color-mix(in srgb, var(--sc) 7%, transparent); }
.rs-row.loud th { box-shadow: inset 4px 0 0 var(--sc); color: var(--text); }
.rs-row:target { outline: 2px solid var(--focus); outline-offset: -2px; }
.rs-why-link { display: inline-block; margin-top: 4px; padding: 2px 0; font-size: 0.88rem; font-weight: 600; color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
/* Below the tables: what this means, where the data comes from, limits. */
.rs-notes { margin: 20px 0 12px; }
.rs-notes-title { margin: 0 0 10px; font-size: 1.15rem; }
.rs-part { margin: 0 0 10px; border: 1.5px solid var(--hair); border-radius: var(--radius); background: var(--card); }
.rs-part > summary { display: flex; align-items: center; gap: 10px; padding: 12px 18px; cursor: pointer; list-style: none; }
.rs-part > summary::-webkit-details-marker { display: none; }
.rs-part > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
.rs-part[open] > summary::after { transform: rotate(-135deg); }
.rs-part > summary:focus-visible, .rs-x > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
.rs-part-title { margin: 0; font-size: 1rem; }
.rs-part-body { padding: 0 18px 14px; font-size: 0.95rem; max-width: 80ch; }
.rs-part-body > :first-child { margin-top: 0; }
.rs-part-body ul { padding-left: 1.1em; }
.rs-x { border-top: 1px solid var(--hair); scroll-margin-top: 64px; }
.rs-x:first-child { border-top: 0; }
.rs-x > summary { display: flex; align-items: center; gap: 8px; padding: 9px 0; min-height: 28px; cursor: pointer; font-weight: 600; }
.rs-x .st-icon { color: var(--sc); flex: none; }
.rs-x.s-bad, .rs-x.s-warn { border-left: 4px solid var(--sc); padding-left: 10px; }
.rs-x > div { padding: 0 0 10px; }
.rs-x p { margin: 0 0 6px; }
.rs-x p > a:only-child { display: inline-block; padding: 3px 0; }
/* Signals panel (inside the summary): our own signals, then neutral
   "check →" links to services whose scores we don't copy. */
.rs-signals { margin: 0 0 12px; }
.rs-signals-h { margin: 0 0 6px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.rs-signals .rs-chips + .rs-signals-h { margin-top: 4px; }
.rs-chip.rs-pivot { --sc: var(--muted); background: transparent; border-style: dashed; color: var(--text); }
.rs-chip.rs-pivot:hover { border-style: solid; }
.rs-signals-note { margin: 0; max-width: 72ch; }
/* Key facts: the one table that is always visible. */
.rs-main { margin: 0 0 16px; padding: 12px 8px 6px; border: 1.5px solid var(--hair); border-radius: var(--radius); background: var(--card); }
.rs-main-title { margin: 0 10px 6px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-2); }
.rs-main .rs-kv { margin: 0; }
.rs-main .rs-kv th { color: var(--text-2); }
/* Detail groups below the key facts fold. */
.rs-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 13px 18px; cursor: pointer; list-style: none; }
.rs-fold > summary::-webkit-details-marker { display: none; }
.rs-fold > summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
.rs-fold[open] > summary::after { transform: rotate(-135deg); }
.rs-fold > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius); }
.rs-fold > summary .rs-sec-title { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--text); }
.rs-toggle-all { display: flex; gap: 6px; }
.rs-cmd { margin: 8px 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.credits p { overflow-wrap: anywhere; }
.flag { margin-right: 0.35em; font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 1.05em; line-height: 1; }
.fix-item { padding: 14px 0; border-top: 1px solid var(--hair); }
.fix-item:first-of-type { border-top: 0; }
.fix-item .fix-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 1rem; }
.fix-kind { padding: 2px 9px; border-radius: 999px; border: 1.5px solid var(--hair-strong); font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.fix-item pre { margin: 8px 0; }
.fix-item pre:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
/* Summary extras used by the IP pages: what the verdict means, what to do,
   the analyst buttons; group headings inside a section. */
.rs-explain { margin: 0 0 12px; color: var(--text-2); max-width: 72ch; }
.rs-summary .verdict-todo { margin: 0 0 14px; }
.rs-actions .analyst { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.rs-actions .btn svg { width: 16px; height: 16px; }
.rs-summary .net-line { margin: 12px 0 0; }
.rs-group { margin: 16px 0 4px; font-size: 0.82rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.rs-sec-body > .rs-group:first-of-type { margin-top: 4px; }
.rs-sec-body .counts { margin: 0 0 4px; }
.rs-more { margin: 8px 0 0; border-top: 1px solid var(--hair); padding-top: 6px; }
.rs-more > summary { cursor: pointer; width: fit-content; padding: 6px 0; min-height: 28px; color: var(--link); font-weight: 600; }
.rs-more > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rs-sec-body .net-head { margin-top: 0; }
/* Phones: label above value; the summary and the highlighting stay. */
@media (max-width: 599px) {
  .rs-summary { padding: 16px; }
  .rs-verdict { font-size: 1.15rem; }
  .rs-kv, .rs-kv tbody, .rs-kv tr, .rs-kv th, .rs-kv td { display: block; width: auto; }
  .rs-kv tr { border-top: 1px solid var(--hair); padding: 8px 10px; }
  .rs-kv tr:first-child { border-top: 0; }
  .rs-kv th, .rs-kv td { padding: 0; border: 0; }
  .rs-kv th { margin-bottom: 2px; font-size: 0.85rem; }
  .rs-row.loud { box-shadow: inset 4px 0 0 var(--sc); }
  .rs-row.loud th { box-shadow: none; }
  .rs-sec-head { padding: 10px 12px 4px; }
  .rs-sec-sub { margin: 0 12px 6px; }
  .rs-sec-body { padding: 0 2px 6px; }
  .rs-part > summary, .rs-fold > summary { padding: 12px 14px; }
  .rs-main { padding: 10px 2px 4px; }
  .rs-main-title { margin: 0 12px 6px; }
  .rs-part-body { padding: 0 14px 12px; }
  .rs-jump { position: static; }
}