.tools-container { max-width: 1050px; margin: 0 auto; padding: 56px 24px 80px; }
.tools-container h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 12px 0; }
.tools-intro { color: var(--txt-3); max-width: 720px; line-height: 1.7; }
.tools-eyebrow { color: var(--primary-ink); font-weight: 700; }
/* Tool page breadcrumbs: Other Tools / category / tool, with a "Switch tool"
   menu on the right for jumping straight to another utility. The menu hangs
   from the right edge of the whole row, so it stays on screen wherever the
   button wraps. */
.tool-crumbs { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 20px; }
.tool-crumbs-trail { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--text-small); color: var(--txt-3); }
.tool-crumbs-trail li { display: flex; align-items: center; }
.tool-crumbs-trail li + li::before { content: ""; width: 6px; height: 6px; margin: 0 10px; border-top: 1.5px solid var(--txt-4); border-right: 1.5px solid var(--txt-4); transform: rotate(45deg); }
.tool-crumbs-trail a { color: var(--primary-ink); text-decoration: none; }
.tool-crumbs-trail a:hover { text-decoration: underline; }
.tool-crumbs-trail [aria-current] { color: var(--txt-2); font-weight: 600; }
.tool-switch summary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--txt-2); font-size: var(--text-small); font-weight: 600; cursor: pointer; list-style: none; }
.tool-switch summary::-webkit-details-marker { display: none; }
.tool-switch summary::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.tool-switch[open] summary::after { margin-top: 3px; transform: rotate(-135deg); }
.tool-switch summary:hover { border-color: var(--primary); color: var(--primary-ink); }
.tool-switch summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tool-switch-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(300px, calc(100vw - 32px)); margin: 0; padding: 6px; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 16px 40px -18px color-mix(in srgb, var(--txt) 40%, transparent); }
.tool-switch-menu a { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 8px; color: var(--txt); text-decoration: none; }
.tool-switch-menu a:hover, .tool-switch-menu a:focus-visible { background: var(--surface2); outline: none; }
.tool-switch-menu a[aria-current] { background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.tool-switch-menu a span { font-weight: 600; font-size: var(--text-small); }
.tool-switch-menu small { font-size: var(--text-caption); color: var(--txt-3); }
.tool-switch-all { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); }
.tool-switch-all a { color: var(--primary-ink); font-size: var(--text-small); font-weight: 600; }
.tool-panel, .email-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; margin-top: 24px; }
.tool-panel a { color: var(--primary-ink); }
.email-form { display: grid; grid-template-columns: 2fr 1fr auto; gap: 16px; align-items: end; }
.email-field label { display: block; font-weight: 600; margin-bottom: 8px; }
.email-field input { width: 100%; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--txt); font: inherit; box-sizing: border-box; }
.email-form button { padding: 13px 20px; background: var(--primary-fill); color: white; border: 0; border-radius: 8px; font: inherit; cursor: pointer; }
.email-form button:disabled { opacity: .65; cursor: wait; }
.email-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.email-card { margin-top: 0; min-width: 0; }
.email-card h3 { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 16px; }
.email-card p { line-height: 1.65; }
.email-card pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface2); padding: 12px; border-radius: 8px; font-size: .85rem; }
.email-card code { overflow-wrap: anywhere; }
.email-status { font-size: .8rem; padding: 5px 9px; border-radius: 6px; background: var(--surface2); font-weight: 600; }
.email-status--warning { color: var(--amber); }
.email-status--found { color: var(--green); }
#email-message { margin: 20px 0; line-height: 1.6; }
@media (max-width: 700px) { .email-form, .email-grid { grid-template-columns: 1fr; } .tools-container { padding: 32px 16px 60px; } }

/* ── Other Tools landing (/tools/) ─────────────────────────────────────── */
.tools-landing .landing-zone { flex: 0 0 auto; padding-bottom: 48px; }
.tools-landing .landing-subtitle-shared { margin-bottom: 0; }
.tools-hero-icon { color: var(--primary); }

/* One featured tool: description and a domain field on the left, what it
   checks on the right, set on hairlines like the landing check rows. */
.tool-feature { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; padding: 32px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--txt) 28%, transparent); }
.tool-feature-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.tool-feature-icon { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--icon-tile-bg); color: var(--icon-tile-fg); }
.tool-feature-eyebrow { margin: 0 0 2px; font-size: var(--text-caption); font-weight: 600; color: var(--primary-ink); }
.tool-feature-title { margin: 0; font-size: 22px; font-weight: 750; letter-spacing: -0.015em; line-height: 1.25; }
.tool-feature-title a { color: var(--txt); text-decoration: none; }
.tool-feature-title a:hover { color: var(--primary-ink); }
.tool-feature-desc { margin: 0 0 24px; color: var(--txt-3); line-height: 1.65; }
.tool-feature-form { margin-bottom: 0; background: var(--bg); }
.tool-feature-form button[type="submit"] { white-space: nowrap; }
.tool-feature-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; align-content: start; }
.tool-feature-checks li { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-top: 1px solid var(--border); }
.tool-feature-checks strong { font-size: 15px; font-weight: 600; color: var(--txt); }
.tool-feature-checks li > span:last-child { font-size: var(--text-small); line-height: 1.5; color: var(--txt-3); }
.tool-feature-form input { min-width: 0; }
/* TCP Port Check card: a short port field after the host, split by a hairline. */
.tool-feature-form .tcp-feature-port { flex: 0 0 4.5em; width: 4.5em; padding-left: 10px; border-left: 1px solid var(--border); font-variant-numeric: tabular-nums; }

/* "Try one now": without JS the featured tools stack; tools-landing.js adds
   .is-carousel, which lays them in a scroll-snap row with tool-name pills
   and arrows. No autoplay. */
.tools-showcase { padding-bottom: 56px; }
.tools-showcase-head { align-items: center; }
.tools-carousel-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tools-carousel-controls[hidden] { display: none; }
.tools-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tools-pill, .tools-chip { padding: 7px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--txt-2); font: inherit; font-size: var(--text-small); font-weight: 600; cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.tools-pill:hover, .tools-chip:hover { border-color: var(--primary); color: var(--primary-ink); }
.tools-pill[aria-current="true"], .tools-chip[aria-pressed="true"] { background: var(--primary-fill); border-color: var(--primary-fill); color: #fff; }
.tools-pill:focus-visible, .tools-chip:focus-visible, .tools-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tools-carousel-arrows { display: flex; gap: 6px; }
.tools-arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--txt-2); cursor: pointer; }
.tools-arrow:hover:not(:disabled) { border-color: var(--primary); color: var(--primary-ink); }
.tools-arrow:disabled { opacity: .45; cursor: default; }
.tools-slide + .tools-slide { margin-top: 24px; }
.is-carousel .tools-track { display: flex; align-items: flex-start; gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 4px 4px 28px; margin: -4px -4px -28px; }
.is-carousel .tools-track::-webkit-scrollbar { display: none; }
.is-carousel .tools-slide { flex: 0 0 100%; margin-top: 0; scroll-snap-align: start; }
@media (prefers-reduced-motion: no-preference) { .is-carousel .tools-track { scroll-behavior: smooth; } }

/* "Browse by category": finder, chips, then one compact list per category. */
.tools-finder { display: grid; gap: 14px; margin-bottom: 28px; }
.tools-finder[hidden] { display: none; }
.tools-finder-search { max-width: 560px; margin-bottom: 0; }
.tools-finder-key { margin-right: 8px; padding: 1px 8px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 6px; font-family: var(--font-mono); font-size: var(--text-caption); color: var(--txt-4); background: var(--surface2); }
.tools-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tools-groups { display: grid; gap: 32px; }
.tools-group { scroll-margin-top: 96px; }
.tools-group[hidden], .tools-item[hidden] { display: none; }
.tools-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 12px; }
.tools-group-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--txt); }
.tools-group-lede { margin: 0; font-size: var(--text-small); color: var(--txt-3); }
.tools-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tools-item-link { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; height: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); color: var(--txt); text-decoration: none; transition: border-color var(--t-fast); }
.tools-item-link:hover { border-color: var(--primary); }
.tools-item-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tools-item-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--icon-tile-bg); color: var(--icon-tile-fg); }
.tools-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tools-item-text strong { font-size: 15px; font-weight: 600; }
.tools-item-text span { font-size: var(--text-small); line-height: 1.45; color: var(--txt-3); }
.tools-item-arrow { color: var(--txt-4); transition: transform var(--t-fast), color var(--t-fast); }
.tools-item-link:hover strong, .tools-item-link:hover .tools-item-arrow { color: var(--primary-ink); }
.tools-item-link:hover .tools-item-arrow { transform: translateX(3px); }
.tools-empty { margin: 16px 0 0; font-size: var(--text-small); color: var(--txt-3); }
.tools-empty:empty { display: none; }
.tools-empty.is-none { padding: 20px; border: 1px dashed var(--border); border-radius: var(--radius-card); text-align: center; }
@media (prefers-reduced-motion: reduce) { .tools-item-link:hover .tools-item-arrow { transform: none; } }

@media (max-width: 860px) {
  .tool-feature { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 24px; }
  .tools-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tools-list { grid-template-columns: minmax(0, 1fr); }
  .tools-carousel-controls { width: 100%; }
  .tools-pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; min-width: 0; }
  .tools-pill { white-space: nowrap; }
  .tools-finder-key { display: none; }
}
@media (max-width: 480px) {
  .tool-feature { padding: 20px; }
  .tool-feature-checks { grid-template-columns: minmax(0, 1fr); }
}

/* ── Email Header Analyzer (/tools/email-headers/) ─────────────────────── */
/* Same three accents as the SPF/DKIM/DMARC diagram in page-guides.css. */
.eh-page {
  --eh-spf: var(--primary-ink);
  --eh-dkim: var(--rtype-cname-fg);
  --eh-dmarc: color-mix(in srgb, var(--rtype-aaaa-fg) 72%, var(--txt));
  /* Status text on its own tint, nudged toward the text colour for 4.5:1. */
  --eh-ok-ink: color-mix(in srgb, var(--green) 78%, var(--txt));
  --eh-warn-ink: color-mix(in srgb, var(--amber) 78%, var(--txt));
  --eh-err-ink: color-mix(in srgb, var(--red) 85%, var(--txt));
}
.eh-label { display: block; font-weight: 600; margin-bottom: 8px; }
.eh-form textarea { width: 100%; min-height: 220px; box-sizing: border-box; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--txt); font-family: var(--font-mono); font-size: var(--text-compact); line-height: 1.5; resize: vertical; }
.eh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.eh-howto { margin-top: 18px; color: var(--txt-3); line-height: 1.6; }
.eh-howto summary { cursor: pointer; font-weight: 600; color: var(--txt-2); }
.eh-howto ul { padding-left: 20px; }
.eh-howto strong { color: var(--txt-2); }
#eh-message { margin: 20px 0; line-height: 1.6; }
.eh-results { display: grid; gap: 28px; margin-bottom: 32px; scroll-margin-top: 88px; }
.eh-table td:first-child { white-space: nowrap; }
.eh-mono { font-family: var(--font-mono); font-size: var(--text-compact); overflow-wrap: anywhere; }
.eh-dim { color: var(--txt-3); }
.eh-lede { margin: 0 0 16px; color: var(--txt-3); line-height: 1.65; max-width: 760px; }
.eh-section h2 { margin: 0 0 8px; font-size: 1.35rem; }

.eh-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 20px; }
.eh-verdict { padding: 24px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); }
.eh-verdict--pass { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); background: color-mix(in srgb, var(--badge-ok-bg) 60%, var(--surface)); }
.eh-verdict--fail { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); background: color-mix(in srgb, var(--badge-err-bg) 60%, var(--surface)); }
.eh-verdict-eyebrow { margin: 0 0 4px; font-size: var(--text-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.eh-verdict-title { margin: 0 0 10px; font-size: 1.4rem; line-height: 1.3; overflow-wrap: anywhere; }
.eh-verdict-title:focus { outline: none; }
.eh-verdict--pass .eh-verdict-title { color: var(--green); }
.eh-verdict--fail .eh-verdict-title { color: var(--red); }
.eh-verdict-lead { margin: 0; color: var(--txt-2); line-height: 1.6; }
.eh-facts { margin: 0; padding: 8px 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.eh-fact { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.eh-fact:first-child { border-top: 0; }
.eh-fact dt { color: var(--txt-3); font-size: var(--text-small); }
.eh-fact dd { margin: 0; overflow-wrap: anywhere; }

.eh-findings { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.eh-finding { padding: 12px 16px 12px 18px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; background: var(--surface); line-height: 1.6; }
.eh-finding--bad { border-left-color: var(--red); }
.eh-finding--warn { border-left-color: var(--amber); }
.eh-finding--good { border-left-color: var(--green); }
.eh-finding--info { border-left-color: var(--txt-3); }

/* Figures share the article diagrams' frame. */
.eh-figure { margin: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface2); }
.eh-figure figcaption { margin-top: 16px; color: var(--txt-3); font-size: var(--text-compact); line-height: 1.55; text-align: center; }
.eh-figure figcaption a { color: var(--primary-ink); }

.eh-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; }
.eh-tag--spf { color: var(--eh-spf); background: color-mix(in srgb, var(--eh-spf) 15%, var(--surface)); }
.eh-tag--dkim { color: var(--eh-dkim); background: color-mix(in srgb, var(--eh-dkim) 15%, var(--surface)); }
.eh-tag--dmarc { color: var(--eh-dmarc); background: color-mix(in srgb, var(--eh-dmarc) 16%, var(--surface)); }
.eh-pill { display: inline-block; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--surface2); color: var(--txt-2); }
.eh-pill--pass { color: var(--eh-ok-ink); background: var(--badge-ok-bg); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.eh-pill--fail { color: var(--eh-err-ink); background: var(--badge-err-bg); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.eh-pill--warn { color: var(--eh-warn-ink); background: var(--badge-warn-bg); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }

/* Identity figure: envelope and signing domains on the left, each linked to
   the header From on the right by its alignment. */
.eh-identity { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, 190px) minmax(0, 1fr); gap: 16px 0; align-items: stretch; }
.eh-id-card { grid-column: 1; padding: 16px 18px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); min-width: 0; }
.eh-id-card--spf { border-color: color-mix(in srgb, var(--eh-spf) 45%, var(--border)); }
.eh-id-card--dkim { border-color: color-mix(in srgb, var(--eh-dkim) 45%, var(--border)); }
.eh-id-card--dmarc { border: 2px solid color-mix(in srgb, var(--eh-dmarc) 55%, var(--border)); }
.eh-id-from { grid-column: 3; display: flex; flex-direction: column; justify-content: center; }
.eh-id-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.eh-id-value { margin: 0 0 6px; color: var(--txt); }
.eh-id-name { margin: 0 0 2px; font-weight: 600; overflow-wrap: anywhere; }
.eh-id-note { margin: 0 0 12px; color: var(--txt-3); font-size: var(--text-small); line-height: 1.5; }
.eh-id-result { display: flex; align-items: center; gap: 8px; }
.eh-id-label { font-size: var(--text-compact); font-weight: 700; color: var(--txt-2); }
.eh-id-policy { margin: 10px 0 0; color: var(--txt-3); }
.eh-link { grid-column: 2; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; min-width: 0; }
.eh-link-line { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid var(--txt-3); z-index: 0; }
.eh-link-line::after { content: ""; position: absolute; right: -1px; top: -7px; border: 6px solid transparent; border-left: 9px solid var(--txt-3); border-right: 0; }
.eh-link--pass .eh-link-line { border-top-color: var(--green); }
.eh-link--pass .eh-link-line::after { border-left-color: var(--green); }
.eh-link--fail .eh-link-line { border-top-style: dashed; border-top-color: var(--red); }
.eh-link--fail .eh-link-line::after { border-left-color: var(--red); }
.eh-link .eh-pill { position: relative; z-index: 1; }
.eh-link-domain { position: relative; z-index: 1; max-width: 100%; padding: 1px 6px; border-radius: 6px; background: var(--surface2); color: var(--txt-3); font-size: 11.5px; text-align: center; }
.eh-link-domain:empty { display: none; }
.eh-link-caption { display: none; font-size: var(--text-compact); font-weight: 600; color: var(--txt-2); }

/* Route figure: a vertical line of stops, oldest first. */
.eh-route { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; position: relative; }
.eh-route::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; border-left: 2px solid var(--border); }
.eh-stop { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; align-items: start; position: relative; }
.eh-stop-dot { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); font-weight: 800; font-size: var(--text-compact); color: var(--txt-2); position: relative; z-index: 1; }
.eh-stop--start .eh-stop-dot, .eh-stop--end .eh-stop-dot { background: var(--primary-fill); border-color: var(--primary-fill); color: #fff; }
.eh-stop--spf .eh-stop-dot { border-color: var(--eh-spf); color: var(--eh-spf); }
.eh-stop-card { padding: 12px 16px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.eh-stop--spf .eh-stop-card { border-color: color-mix(in srgb, var(--eh-spf) 45%, var(--border)); }
.eh-stop-eyebrow { margin: 0 0 4px; font-size: var(--text-caption); font-weight: 700; color: var(--txt-3); text-transform: uppercase; letter-spacing: .05em; }
.eh-stop-title { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.eh-stop-meta { margin: 4px 0 0; color: var(--txt-3); font-size: var(--text-small); overflow-wrap: anywhere; }
.eh-stop-meta:empty { display: none; }
.eh-stop-path { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.eh-arrow { color: var(--txt-3); }
.eh-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.eh-chips:empty { display: none; }
.eh-chip { padding: 2px 8px; border-radius: 6px; background: var(--surface2); color: var(--txt-2); font-size: 12px; font-weight: 600; }
.eh-chip--pass { color: var(--eh-ok-ink); background: var(--badge-ok-bg); }
.eh-chip--warn { color: var(--eh-warn-ink); background: var(--badge-warn-bg); }
.eh-chip--spf { color: var(--eh-spf); background: color-mix(in srgb, var(--eh-spf) 15%, var(--surface)); }
.eh-delay { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.eh-delay-bar { flex: 0 0 auto; width: var(--share); max-width: 60%; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--primary-ink) 55%, var(--surface2)); }
.eh-delay--slow .eh-delay-bar { background: var(--amber); }
.eh-delay-text { font-size: var(--text-compact); font-weight: 600; color: var(--txt-2); white-space: nowrap; }

.eh-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.eh-table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: var(--text-small); }
.eh-table th, .eh-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); line-height: 1.5; }
.eh-table thead th { border-top: 0; color: var(--txt-3); font-weight: 600; }
.eh-table td { overflow-wrap: anywhere; }
.eh-table--headers tbody th { white-space: nowrap; color: var(--txt-2); }
.eh-next { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; }
.eh-all summary { cursor: pointer; font-weight: 600; margin-bottom: 12px; }

@media (max-width: 760px) {
  .eh-summary { grid-template-columns: minmax(0, 1fr); }
  .eh-fact { grid-template-columns: 96px minmax(0, 1fr); }
  .eh-identity { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .eh-id-card, .eh-id-from, .eh-link { grid-column: 1; grid-row: auto !important; }
  .eh-id-from { order: -1; margin-bottom: 16px; }
  .eh-link { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; padding: 8px 0 16px 14px; margin-left: 18px; border-left: 2px solid var(--txt-3); }
  .eh-link--pass { border-left-color: var(--green); }
  .eh-link--fail { border-left: 2px dashed var(--red); }
  .eh-link-line { display: none; }
  .eh-link-caption { display: inline; }
}
.tool-feature-cta { margin: 0; }

/* ── Search and AI Optimizer (/tools/search-ai-optimizer/) ─────────────── */
/* Status colours always come with an icon and a word (see search-ai-optimizer.js). */
.sao-page {
  --sao-ok-ink: color-mix(in srgb, var(--green) 78%, var(--txt));
  --sao-warn-ink: color-mix(in srgb, var(--amber) 78%, var(--txt));
  --sao-bad-ink: color-mix(in srgb, var(--red) 85%, var(--txt));
  --sao-info-ink: var(--txt-2);
}
.sao-label { display: block; font-weight: 600; margin-bottom: 8px; }
.sao-form-row { display: flex; gap: 12px; }
.sao-form-row input { flex: 1; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--txt); font: inherit; }
.sao-form-row button { white-space: nowrap; }
.sao-form-row button:disabled { opacity: .65; cursor: wait; }
.sao-form-help { margin: 10px 0 0; color: var(--txt-3); font-size: var(--text-small); line-height: 1.5; }
.sao-message { margin: 20px 0 8px; line-height: 1.6; }
.sao-message:empty { display: none; }
.sao-dim { color: var(--txt-3); }
.sao-icon { flex-shrink: 0; vertical-align: -3px; }

.sao-progress { list-style: none; margin: 0 0 24px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); display: grid; gap: 10px; }
.sao-step { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; color: var(--txt-3); }
.sao-step-dot { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); }
.sao-step--ok { color: var(--txt); }
.sao-step--ok .sao-step-dot { border-color: var(--green); color: var(--sao-ok-ink); }
.sao-step--warn .sao-step-dot { border-color: var(--amber); color: var(--sao-warn-ink); }
.sao-step--run { color: var(--txt); font-weight: 600; }
.sao-step--run .sao-step-dot { border-color: var(--primary); border-right-color: transparent; animation: sao-spin .8s linear infinite; }
.sao-step-state { font-size: var(--text-small); color: var(--txt-3); }
@keyframes sao-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sao-step--run .sao-step-dot { animation: none; border-right-color: var(--primary); } }

.sao-results { display: grid; gap: 40px; margin: 8px 0 48px; }
.sao-results > *, .sao-overview > *, .sao-hub > * { min-width: 0; }
.sao-progress[hidden], .sao-results[hidden] { display: none; }
.sao-results:focus { outline: none; }
.sao-section h2 { margin: 0 0 8px; font-size: 1.35rem; }
.sao-section h2:focus { outline: none; }
.sao-lede { margin: 0 0 16px; color: var(--txt-3); line-height: 1.65; max-width: 760px; }
.sao-eyebrow { margin: 0 0 4px; font-size: var(--text-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }

.sao-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12.5px; font-weight: 700; white-space: nowrap; background: var(--surface2); color: var(--sao-info-ink); }
.sao-pill--ok { color: var(--sao-ok-ink); background: var(--badge-ok-bg); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.sao-pill--warn { color: var(--sao-warn-ink); background: var(--badge-warn-bg); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.sao-pill--bad { color: var(--sao-bad-ink); background: var(--badge-err-bg); border-color: color-mix(in srgb, var(--red) 35%, transparent); }
.sao-pill .sao-icon { width: 13px; height: 13px; }

/* Overview */
.sao-overview { display: grid; gap: 16px; }
.sao-verdict { padding: 24px; border-radius: var(--radius-card); border: 1px solid var(--border); background: var(--surface); }
.sao-verdict h2 { display: flex; gap: 10px; align-items: flex-start; font-size: 1.45rem; line-height: 1.3; }
.sao-verdict h2 .sao-icon { width: 26px; height: 26px; margin-top: 2px; }
.sao-verdict--ok { border-color: color-mix(in srgb, var(--green) 45%, var(--border)); background: color-mix(in srgb, var(--badge-ok-bg) 60%, var(--surface)); }
.sao-verdict--ok h2 { color: var(--sao-ok-ink); }
.sao-verdict--warn { border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); background: color-mix(in srgb, var(--badge-warn-bg) 60%, var(--surface)); }
.sao-verdict--warn h2 { color: var(--sao-warn-ink); }
.sao-verdict--bad { border-color: color-mix(in srgb, var(--red) 45%, var(--border)); background: color-mix(in srgb, var(--badge-err-bg) 60%, var(--surface)); }
.sao-verdict--bad h2 { color: var(--sao-bad-ink); }
.sao-verdict-lead { margin: 0; color: var(--txt-2); line-height: 1.6; }
.sao-meters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sao-meter { padding: 18px 20px; border: 1px solid var(--border); border-top-width: 4px; border-radius: var(--radius-card); background: var(--surface); }
.sao-meter--ok { border-top-color: var(--green); }
.sao-meter--warn { border-top-color: var(--amber); }
.sao-meter--bad { border-top-color: var(--red); }
.sao-meter-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.sao-meter h3 { margin: 0; font-size: var(--text-card-title); }
.sao-meter-bar { height: 8px; margin: 14px 0 12px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.sao-meter-bar span { display: block; height: 100%; width: var(--fill); border-radius: 4px; background: var(--txt-3); }
.sao-meter--ok .sao-meter-bar span { background: var(--green); }
.sao-meter--warn .sao-meter-bar span { background: var(--amber); }
.sao-meter--bad .sao-meter-bar span { background: var(--red); }
.sao-meter-desc { margin: 0 0 8px; color: var(--txt-3); font-size: var(--text-small); line-height: 1.5; }
.sao-meter-counts { margin: 0; font-weight: 600; font-size: var(--text-small); }
.sao-coverage { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0; margin: 0; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); overflow: hidden; }
.sao-coverage > div { padding: 12px 16px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; }
.sao-coverage dt { color: var(--txt-3); font-size: var(--text-caption); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.sao-coverage dd { margin: 4px 0 0; font-weight: 700; }
.sao-limits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: var(--txt-2); font-size: var(--text-small); }
.sao-limits li { display: flex; gap: 8px; align-items: flex-start; }

/* Discovery map */
.sao-map { display: grid; gap: 16px; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface2); }
.sao-lane-label { margin: 0 0 8px; font-size: var(--text-caption); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-3); }
.sao-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.sao-flow > li { position: relative; }
.sao-flow > li + li::before { content: ""; position: absolute; left: -26px; top: 50%; width: 22px; border-top: 2px solid var(--txt-3); }
.sao-flow > li + li::after { content: ""; position: absolute; left: -9px; top: calc(50% - 5px); border: 5px solid transparent; border-left: 7px solid var(--txt-3); border-right: 0; }
.sao-flow-group > ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sao-node { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); min-width: 0; }
.sao-node--ok { border-color: color-mix(in srgb, var(--green) 50%, var(--border)); }
.sao-node--warn { border-color: color-mix(in srgb, var(--amber) 55%, var(--border)); }
.sao-node--bad { border-color: color-mix(in srgb, var(--red) 55%, var(--border)); border-style: dashed; }
.sao-node--none { border-style: dashed; }
.sao-node-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-caption); font-weight: 700; color: var(--txt-3); }
.sao-node--ok .sao-node-status { color: var(--sao-ok-ink); }
.sao-node--warn .sao-node-status { color: var(--sao-warn-ink); }
.sao-node--bad .sao-node-status { color: var(--sao-bad-ink); }
.sao-node-title { font-family: var(--font-data); font-size: var(--text-small); overflow-wrap: anywhere; }
.sao-node-title a { color: var(--txt); }
.sao-node-meta { color: var(--txt-3); font-size: var(--text-compact); overflow-wrap: anywhere; }

/* Charts */
.sao-charts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sao-card { margin: 0; padding: 18px 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); min-width: 0; }
.sao-card figcaption { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.sao-card figcaption span { color: var(--txt-3); font-size: var(--text-small); }
.sao-stack { display: flex; height: 16px; border-radius: 8px; overflow: hidden; background: var(--surface2); gap: 2px; }
.sao-stack-seg { width: var(--w); min-width: 4px; }
.sao-stack--ok { background: var(--green); }
.sao-stack--redirect { background: var(--amber); }
.sao-stack--canonical { background: color-mix(in srgb, var(--amber) 55%, var(--surface)); }
.sao-stack--blocked { background: color-mix(in srgb, var(--red) 55%, var(--surface)); }
.sao-stack--noindex { background: var(--red); }
.sao-stack--error { background: color-mix(in srgb, var(--red) 70%, var(--txt)); }
.sao-legend { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--text-small); }
.sao-legend li { display: grid; grid-template-columns: 12px 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.sao-swatch { width: 12px; height: 12px; border-radius: 3px; }
.sao-areas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: var(--text-small); }
.sao-areas li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sao-area-bar { display: flex; gap: 2px; height: 10px; }
.sao-area-p, .sao-area-w { width: var(--w); border-radius: 3px; }
.sao-area-p { background: var(--red); }
.sao-area-w { background: var(--amber); }
.sao-area-count { display: inline-flex; gap: 4px; align-items: center; font-weight: 700; white-space: nowrap; }
.sao-area-count .sao-icon--bad { color: var(--sao-bad-ink); }
.sao-area-count .sao-icon--warn { color: var(--sao-warn-ink); }
.sao-empty { display: flex; gap: 8px; align-items: center; color: var(--sao-ok-ink); margin: 0; }
.sao-cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; align-items: end; height: 110px; }
.sao-cols li { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; gap: 4px; }
.sao-col { display: block; height: var(--h); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--primary); }
.sao-col-label { font-size: 10px; color: var(--txt-3); text-align: center; }
.sao-fresh { margin: 14px 0 0; display: grid; gap: 4px; font-size: var(--text-small); }
.sao-fresh div { display: flex; justify-content: space-between; gap: 8px; }
.sao-fresh dt { color: var(--txt-3); }
.sao-fresh dd { margin: 0; font-weight: 600; }
.sao-table-alt { margin-top: 10px; font-size: var(--text-small); }
.sao-table-alt summary { cursor: pointer; color: var(--primary-ink); }

/* Matrix */
.sao-callout { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 16px; border: 1px solid var(--border); border-left: 4px solid var(--primary); border-radius: 10px; background: var(--surface); line-height: 1.6; font-size: var(--text-small); }
.sao-callout .sao-icon { margin-top: 3px; color: var(--primary-ink); }
.sao-purpose-summary { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--text-small); }
.sao-purpose-summary li { display: flex; gap: 8px; align-items: center; }
.sao-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sao-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.sao-table th, .sao-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); line-height: 1.45; }
.sao-table thead th { border-top: 0; color: var(--txt-3); font-weight: 600; white-space: nowrap; }
.sao-matrix { min-width: 860px; }
.sao-col-path { display: block; font-family: var(--font-mono); font-size: 11px; font-weight: 400; max-width: 160px; overflow: hidden; text-overflow: ellipsis; }
.sao-group-row th { background: var(--surface2); color: var(--txt); font-weight: 700; }
.sao-group-row th span { display: block; font-weight: 400; color: var(--txt-3); font-size: var(--text-compact); }
.sao-agent { display: block; font-family: var(--font-data); font-weight: 700; }
.sao-vendor { display: block; color: var(--txt-3); font-weight: 400; font-size: var(--text-compact); }
.sao-agent-more { margin-top: 4px; font-weight: 400; }
.sao-agent-more summary { cursor: pointer; color: var(--primary-ink); font-size: var(--text-compact); }
.sao-agent-more p { margin: 6px 0 0; color: var(--txt-2); max-width: 260px; }
.sao-agent-more a { color: var(--primary-ink); }
.sao-why { display: block; margin-top: 4px; color: var(--txt-3); font-size: 11.5px; max-width: 190px; }
.sao-foot { margin: 10px 0 0; color: var(--txt-3); font-size: var(--text-compact); line-height: 1.5; }

/* Findings */
.sao-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.sao-filter { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--txt-2); font: inherit; font-size: var(--text-small); font-weight: 600; cursor: pointer; }
.sao-filter span { margin-left: 4px; color: var(--txt-3); }
.sao-filter[aria-pressed="true"] { background: var(--primary-fill); border-color: var(--primary-fill); color: #fff; }
.sao-filter[aria-pressed="true"] span { color: #fff; }
.sao-area-group + .sao-area-group { margin-top: 20px; }
.sao-area-group h3 { margin: 0 0 10px; font-size: var(--text-card-title); }
.sao-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sao-finding { border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; background: var(--surface); }
.sao-finding--bad { border-left-color: var(--red); }
.sao-finding--warn { border-left-color: var(--amber); }
.sao-finding--ok { border-left-color: var(--green); }
.sao-finding--info { border-left-color: var(--txt-3); }
.sao-finding summary { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; cursor: pointer; line-height: 1.5; }
.sao-finding-title { font-weight: 600; overflow-wrap: anywhere; }
.sao-finding-body { padding: 0 16px 14px; line-height: 1.6; }
.sao-finding-body p { margin: 0 0 8px; }
.sao-evidence { margin: 0 0 10px; padding-left: 20px; font-family: var(--font-mono); font-size: var(--text-compact); overflow-wrap: anywhere; color: var(--txt-2); }
.sao-fix { color: var(--txt); }
.sao-affects { color: var(--txt-3); font-size: var(--text-compact); }
.sao-snippet { position: relative; margin: 8px 0 10px; }
.sao-snippet pre { margin: 0; padding: 12px 88px 12px 12px; border-radius: 8px; background: var(--surface2); font-size: var(--text-compact); white-space: pre-wrap; overflow-wrap: anywhere; }
.sao-copy { position: absolute; top: 6px; right: 6px; display: inline-flex; gap: 6px; align-items: center; padding: 5px 10px; font-size: var(--text-compact); }

/* Submission hub */
.sao-hub { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.sao-hub h3 { margin: 0 0 10px; font-size: var(--text-card-title); }
.sao-hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sao-hub-card { position: relative; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sao-hub-card h4 { margin: 0 0 4px; font-size: var(--text-body); padding-right: 110px; }
.sao-hub-card h4 a { display: inline-flex; gap: 6px; align-items: center; color: var(--primary-ink); }
.sao-hub-card p { margin: 0 0 4px; font-size: var(--text-small); line-height: 1.55; color: var(--txt-2); }
.sao-hub-kind { position: absolute; top: 14px; right: 14px; padding: 2px 8px; border-radius: 6px; background: var(--surface2); color: var(--txt-3); font-size: 11.5px; font-weight: 700; }
.sao-policy { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sao-policy h4 { margin: 0 0 8px; }
.sao-policy-tabs { display: grid; gap: 6px; margin-bottom: 10px; font-size: var(--text-small); }
.sao-policy p { font-size: var(--text-compact); margin: 0; }

/* Next steps */
.sao-next { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 10px; line-height: 1.6; }
.sao-next li { padding-left: 4px; }
.sao-next li > .sao-pill { margin-right: 8px; }
.sao-next-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.sao-about { margin-top: 48px; }
.sao-about h2 { font-size: 1.35rem; }
.sao-about-checks { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 16px; }

@media (max-width: 900px) {
  .sao-meters, .sao-charts { grid-template-columns: minmax(0, 1fr); }
  .sao-hub { grid-template-columns: minmax(0, 1fr); }
  .sao-about-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sao-flow { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .sao-flow > li + li::before { left: 24px; top: -20px; width: 0; height: 18px; border-top: 0; border-left: 2px solid var(--txt-3); }
  .sao-flow > li + li::after { left: 19px; top: -8px; border: 6px solid transparent; border-top: 7px solid var(--txt-3); border-bottom: 0; }
}
@media (max-width: 560px) {
  .sao-form-row { flex-direction: column; }
  .sao-about-checks { grid-template-columns: minmax(0, 1fr); }
  .sao-hub-card h4 { padding-right: 0; }
  .sao-hub-kind { position: static; display: inline-block; margin-top: 6px; }
}
/* Keep the crawler name in view while the matrix scrolls sideways. */
.sao-matrix th[scope="row"], .sao-matrix thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 150px; }

/* ── Subnet Calculator (/tools/subnet-calculator/) ─────────────────────── */
/* Network bits are solid primary cells, host bits dashed green tints, so the
   split never depends on colour alone. */
.sc-page {
  --sc-net: var(--primary-fill);
  --sc-host: color-mix(in srgb, var(--green) 14%, var(--surface));
  --sc-host-ink: color-mix(in srgb, var(--green) 78%, var(--txt));
  --sc-host-line: color-mix(in srgb, var(--green) 55%, var(--border));
  --sc-edge: color-mix(in srgb, var(--amber) 16%, var(--surface));
  --sc-edge-ink: color-mix(in srgb, var(--amber) 78%, var(--txt));
}
.sc-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 16px; align-items: start; }
.sc-form .btn-primary { margin-top: 30px; }
.sc-label { display: block; font-weight: 600; margin-bottom: 8px; }
.sc-field input { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--txt); font-family: var(--font-mono); font-size: 1rem; }
.sc-field input[aria-invalid="true"] { border-color: var(--red); }
.sc-help { margin: 8px 0 0; color: var(--txt-3); font-size: var(--text-small); }
.sc-slider { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 20px; }
.sc-slider .sc-label { margin: 0; }
.sc-slider input[type="range"] { width: 100%; accent-color: var(--primary-fill); }
.sc-slider output { min-width: 11ch; text-align: right; font-weight: 700; color: var(--txt); }
.sc-samples { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.sc-samples-label { color: var(--txt-3); font-size: var(--text-small); }
#sc-message { margin: 20px 0; line-height: 1.6; }
#sc-message.is-error { color: var(--red); font-weight: 600; }
.sc-results { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-bottom: 32px; scroll-margin-top: 88px; }
.sc-results > *, .sc-figure { min-width: 0; }
.sc-mono { font-family: var(--font-mono); font-size: var(--text-compact); overflow-wrap: anywhere; }
.sc-dim { color: var(--txt-3); }
.sc-lede { margin: 0 0 16px; color: var(--txt-3); line-height: 1.65; max-width: 760px; }
.sc-lede a, .sc-note a, .sc-table a { color: var(--primary-ink); }
.sc-section h2 { margin: 0 0 8px; font-size: 1.35rem; }
.sc-note { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--primary); border-radius: 6px; background: var(--surface2); color: var(--txt-2); line-height: 1.55; font-size: var(--text-small); }

.sc-summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px; }
.sc-headline, .sc-facts { padding: 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.sc-eyebrow { margin: 0 0 4px; font-size: var(--text-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.sc-cidr { margin: 0 0 12px; font-family: var(--font-mono); font-size: clamp(1.25rem, 3vw, 1.75rem); overflow-wrap: anywhere; }
.sc-cidr:focus { outline: none; }
.sc-type { margin: 0 0 12px; color: var(--txt-3); line-height: 1.55; }
.sc-type strong { color: var(--sc-host-ink); }
.sc-type--special strong { color: var(--sc-edge-ink); }
.sc-lead { margin: 0; color: var(--txt-2); line-height: 1.6; }
.sc-facts { margin: 0; padding-block: 8px; }
.sc-fact { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.sc-fact:first-child { border-top: 0; }
.sc-fact dt { color: var(--txt-3); font-size: var(--text-small); }
.sc-fact dd { margin: 0; overflow-wrap: anywhere; }

.sc-figure { margin: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface2); }
.sc-figure figcaption { margin-top: 16px; color: var(--txt-3); font-size: var(--text-compact); line-height: 1.55; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0 0 16px; font-size: var(--text-small); font-weight: 600; color: var(--txt-2); }
.sc-key { display: inline-flex; align-items: center; gap: 8px; }
.sc-swatch { width: 16px; height: 16px; border-radius: 4px; }
.sc-swatch--net { background: var(--sc-net); }
.sc-swatch--host { background: var(--sc-host); border: 1.5px dashed var(--sc-host-line); box-sizing: border-box; }

/* Bit map: one row per value, octets (IPv4) or hextets (IPv6) wrap. */
.sc-bitrows { display: grid; gap: 14px; }
.sc-bitrow { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.sc-bitrow-label { padding-top: 4px; font-size: var(--text-small); font-weight: 700; color: var(--txt-2); }
.sc-bitrow-text { grid-column: 2; color: var(--txt-3); }
.sc-bitgroups { display: flex; flex-wrap: wrap; gap: 8px 10px; }
.sc-bitgroup { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sc-bitcells { display: flex; gap: 2px; }
.sc-bit { display: flex; align-items: center; justify-content: center; width: 1.35em; height: 1.75em; border-radius: 4px; font-family: var(--font-mono); font-size: var(--text-compact); font-weight: 700; box-sizing: border-box; }
.sc-bit--net { background: var(--sc-net); color: #fff; }
.sc-bit--host { background: var(--sc-host); color: var(--sc-host-ink); border: 1.5px dashed var(--sc-host-line); }
.sc-bit--edge { box-shadow: -3px 0 0 0 var(--txt); }
.sc-bitgroup-value { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--txt-3); }
.sc-bits--v6 .sc-bit { width: 0.95em; height: 1.5em; font-size: var(--text-caption); border-radius: 3px; }
.sc-bits--v6 .sc-bitcells { gap: 1px; }
.sc-bits--v6 .sc-bitgroups { gap: 8px; }
.sc-bits--v6 .sc-bitgroup { flex: 0 0 auto; }

.sc-table-wrap { overflow-x: auto; margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.sc-table-wrap:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sc-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.sc-table th, .sc-table td { padding: 9px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--border); line-height: 1.5; }
.sc-table thead th { border-top: 0; color: var(--txt-3); font-weight: 600; }
.sc-table tbody th { white-space: nowrap; color: var(--txt-2); font-weight: 600; }
.sc-split-table { min-width: 560px; }

/* Address range: network | hosts | broadcast, with a pin for the address. */
.sc-range-bar { padding-top: 30px; }
.sc-range-part { position: relative; }
.sc-range-pin { position: absolute; left: calc(var(--pos, 0) * 100%); bottom: calc(100% + 4px); width: 0; height: 0; }
.sc-range-pin::after { content: ""; position: absolute; left: -6px; top: -2px; border: 6px solid transparent; border-top: 8px solid var(--txt); }
.sc-range-pin-label { position: absolute; bottom: 8px; left: 0; transform: translateX(calc(var(--pos, 0) * -100%)); white-space: nowrap; font-size: var(--text-caption); font-weight: 700; color: var(--txt); }
.sc-range-bar { display: flex; gap: 3px; }
.sc-range-part { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 10px 12px; border-radius: 8px; }
.sc-range-part--hosts { flex: 1 1 auto; background: var(--sc-host); border: 1.5px dashed var(--sc-host-line); color: var(--sc-host-ink); }
.sc-range-part--net, .sc-range-part--bcast { flex: 0 0 auto; max-width: 28%; }
.sc-range-part--net { background: var(--sc-net); color: #fff; }
.sc-range-part--bcast { background: var(--sc-edge); color: var(--sc-edge-ink); border: 1.5px solid color-mix(in srgb, var(--amber) 45%, var(--border)); }
.sc-range-name { font-size: var(--text-small); font-weight: 700; }
.sc-range-addr { font-size: var(--text-caption); overflow-wrap: anywhere; }

/* Block strips: siblings in the parent block, and the split result. */
.sc-strip { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; list-style: none; }
.sc-strip-item { flex: 1 1 0; min-width: 34px; }
.sc-strip-block { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; min-height: 44px; box-sizing: border-box; padding: 6px 8px; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--txt-2); text-decoration: none; }
.sc-strip-block:hover { border-color: var(--primary); color: var(--primary-ink); }
.sc-strip-block:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.sc-strip-block.is-current { background: var(--sc-net); border-color: var(--sc-net); color: #fff; }
.sc-strip-index { font-size: var(--text-caption); font-weight: 700; }
.sc-strip-name { font-size: var(--text-caption); overflow-wrap: anywhere; }
.sc-strip-more { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 10px; color: var(--txt-3); font-size: var(--text-small); font-weight: 600; }
.sc-split-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 4px 0 12px; }
.sc-split-controls label { font-weight: 600; }
.sc-select { padding: 9px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--txt); font: inherit; max-width: 100%; }

@media (max-width: 860px) {
  .sc-summary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sc-form { grid-template-columns: minmax(0, 1fr); }
  .sc-form .btn-primary { margin-top: 0; justify-self: start; }
  .sc-slider { grid-template-columns: minmax(0, 1fr) auto; }
  .sc-slider .sc-label { grid-column: 1 / -1; }
  .sc-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sc-bitrow { grid-template-columns: minmax(0, 1fr); }
  .sc-bitrow-text { grid-column: 1; }
  .sc-bit { width: 1.1em; height: 1.6em; }
  .sc-range-bar { flex-direction: column; gap: 34px; }
  .sc-range-part--net, .sc-range-part--bcast { max-width: none; }
  .sc-headline, .sc-facts, .sc-figure { padding: 16px; }
}

/* ── TCP Port Check (/tools/tcp-port-check/) ───────────────────────────── */
/* Status colours always come with an icon and a word (see tcp-port-check.js). */
.tcp-page {
  --tcp-ok-ink: color-mix(in srgb, var(--green) 78%, var(--txt));
  --tcp-warn-ink: color-mix(in srgb, var(--amber) 78%, var(--txt));
  --tcp-bad-ink: color-mix(in srgb, var(--red) 85%, var(--txt));
}
.tcp-form { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(90px, .6fr) minmax(150px, 1fr) auto; gap: 14px; align-items: end; }
.tcp-field label { display: block; font-weight: 600; margin-bottom: 8px; }
.tcp-field input, .tcp-field select { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--txt); font: inherit; }
.tcp-field input:focus-visible, .tcp-field select:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.tcp-form button { white-space: nowrap; }
.tcp-form button:disabled { opacity: .65; cursor: wait; }
.tcp-presets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; }
.tcp-presets-label { font-size: var(--text-small); font-weight: 600; color: var(--txt-2); }
.tcp-preset-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tcp-preset { display: inline-flex; align-items: baseline; gap: 6px; min-height: 32px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--txt); font: inherit; font-size: var(--text-small); font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; }
.tcp-preset span { font-weight: 500; color: var(--txt-3); }
.tcp-preset:hover { border-color: var(--primary); }
.tcp-preset[aria-pressed="true"] { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--surface)); }
.tcp-preset:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tcp-form-help { margin: 14px 0 0; color: var(--txt-3); font-size: var(--text-small); line-height: 1.5; }
.tcp-form-help code, .tcp-page .tcp-card code, .tcp-verdict code { font-family: var(--font-mono); font-size: .9em; overflow-wrap: anywhere; }
.tcp-message { margin: 20px 0 8px; line-height: 1.6; }
.tcp-message:empty { display: none; }
.tcp-results { margin-top: 24px; }
.tcp-results:focus { outline: none; }
.tcp-icon { flex-shrink: 0; vertical-align: -3px; }

.tcp-verdict { padding: 24px; border: 1px solid var(--border); border-left: 5px solid var(--txt-4); border-radius: var(--radius-card); background: var(--surface); }
.tcp-verdict--ok { border-left-color: var(--green); }
.tcp-verdict--bad { border-left-color: var(--red); }
.tcp-verdict--warn { border-left-color: var(--amber); }
.tcp-verdict h2 { margin: 12px 0 6px; font-size: clamp(1.35rem, 3vw, 1.75rem); overflow-wrap: anywhere; }
.tcp-verdict-sub { margin: 0; color: var(--txt-2); line-height: 1.6; }
.tcp-verdict-sub a, .tcp-card a, .tcp-checked a { color: var(--primary-ink); }
.tcp-verdict-meaning { margin: 12px 0 0; max-width: 760px; line-height: 1.65; color: var(--txt-2); }
.tcp-errors { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.tcp-errors-name { display: block; margin-bottom: 4px; font-weight: 600; color: var(--txt-2); }
.tcp-errors .tcp-banner { margin: 0; }
.tcp-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--txt-2); font-size: var(--text-small); font-weight: 700; }
.tcp-pill--ok { color: var(--tcp-ok-ink); background: var(--badge-ok-bg); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.tcp-pill--warn { color: var(--tcp-warn-ink); background: var(--badge-warn-bg); border-color: color-mix(in srgb, var(--amber) 35%, transparent); }
.tcp-pill--bad { color: var(--tcp-bad-ink); background: var(--badge-err-bg); border-color: color-mix(in srgb, var(--red) 35%, transparent); }

.tcp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.tcp-card { min-width: 0; padding: 22px 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.tcp-card h3 { margin: 0 0 14px; font-size: var(--text-card-title); }
.tcp-card p { line-height: 1.6; }
.tcp-note { margin: 12px 0 0; color: var(--txt-3); font-size: var(--text-small); line-height: 1.55; }

/* Sequence diagram: checker on the left, target on the right, one arrow per
   packet between their lifelines. */
.tcp-seq { margin: 0; }
.tcp-seq-ends { display: flex; justify-content: space-between; gap: 16px; }
.tcp-seq-end { display: flex; flex-direction: column; gap: 2px; max-width: 46%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); min-width: 0; }
.tcp-seq-end--target { text-align: right; }
.tcp-seq-end strong { font-size: var(--text-small); overflow-wrap: anywhere; }
.tcp-seq-end-role { font-size: var(--text-caption); font-weight: 600; color: var(--txt-3); text-transform: uppercase; letter-spacing: var(--tracking-label); }
.tcp-seq-end-addr { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--txt-3); overflow-wrap: anywhere; }
.tcp-seq-rows { position: relative; margin: 0; padding: 6px 0 4px; list-style: none; }
/* The two lifelines */
.tcp-seq-rows::before, .tcp-seq-rows::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px dashed var(--border-hi, var(--border)); }
.tcp-seq-rows::before { left: 18px; }
.tcp-seq-rows::after { right: 18px; }
.tcp-seq-row { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 26px 12px; }
.tcp-seq-label { display: flex; flex-direction: column; align-items: center; text-align: center; font-size: var(--text-small); line-height: 1.35; }
.tcp-seq-label strong { font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em; }
.tcp-seq-label span { color: var(--txt-3); font-size: var(--text-caption); }
.tcp-seq-line { position: relative; align-self: stretch; height: 0; border-top: 2px solid var(--primary); }
.tcp-seq-line::after { content: ""; position: absolute; top: -6px; width: 10px; height: 10px; border-top: 2px solid var(--primary); border-right: 2px solid var(--primary); }
.tcp-seq-row--right .tcp-seq-line::after { right: 0; transform: rotate(45deg); }
.tcp-seq-row--left .tcp-seq-line::after { left: 0; transform: rotate(-135deg); }
.tcp-seq-row--ok .tcp-seq-line, .tcp-seq-row--ok .tcp-seq-line::after { border-color: var(--green); }
.tcp-seq-row--bad .tcp-seq-line, .tcp-seq-row--bad .tcp-seq-line::after { border-color: var(--red); }
.tcp-seq-row--bad strong { color: var(--tcp-bad-ink); }
.tcp-seq-row--data .tcp-seq-line, .tcp-seq-row--data .tcp-seq-line::after { border-color: var(--txt-2); }
.tcp-seq-row--quiet .tcp-seq-line { border-top-style: dashed; border-color: var(--txt-4); }
.tcp-seq-row--quiet .tcp-seq-line::after { border-color: var(--txt-4); }
/* Silence: a dashed stub from the checker that ends in a cross. */
.tcp-seq-row--silence .tcp-seq-line { width: 55%; align-self: flex-start; border-top: 2px dashed var(--amber); }
.tcp-seq-row--silence .tcp-seq-line::after { content: "\00d7"; top: -13px; right: -14px; width: auto; height: auto; border: 0; color: var(--tcp-warn-ink); font-size: 20px; font-weight: 700; line-height: 1; }
.tcp-seq-row--silence strong { color: var(--tcp-warn-ink); }
.tcp-seq figcaption { margin-top: 10px; color: var(--txt-3); font-size: var(--text-small); line-height: 1.55; }

.tcp-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0 0 16px; }
.tcp-stats div { padding: 10px; border-radius: 10px; background: var(--surface2); }
.tcp-stats dt { font-size: var(--text-caption); color: var(--txt-3); }
.tcp-stats dd { margin: 2px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.tcp-bars { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tcp-bar { display: grid; grid-template-columns: 92px minmax(0, 1fr); grid-template-areas: "name track" ". value"; gap: 2px 10px; align-items: center; font-size: var(--text-small); }
.tcp-bar-name { grid-area: name; font-weight: 600; color: var(--txt-2); }
.tcp-bar-track { grid-area: track; height: 12px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.tcp-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.tcp-bar--dns .tcp-bar-fill { background: var(--txt-4); }
.tcp-bar--bad .tcp-bar-fill { background: var(--red); }
.tcp-bar--warn .tcp-bar-fill { background: repeating-linear-gradient(45deg, var(--amber) 0 6px, color-mix(in srgb, var(--amber) 45%, transparent) 6px 12px); }
.tcp-bar-value { grid-area: value; display: inline-flex; align-items: center; gap: 5px; color: var(--txt-3); font-variant-numeric: tabular-nums; }
.tcp-bar--ok .tcp-bar-value .tcp-icon { color: var(--tcp-ok-ink); }
.tcp-bar--bad .tcp-bar-value .tcp-icon { color: var(--tcp-bad-ink); }
.tcp-bar--warn .tcp-bar-value .tcp-icon { color: var(--tcp-warn-ink); }
.tcp-bar-value .tcp-icon { width: 13px; height: 13px; }
.tcp-bar--dns .tcp-bar-value .tcp-icon { display: none; }

.tcp-banner { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--surface2); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; }
.tcp-addrs { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tcp-addrs li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tcp-addr-family, .tcp-addr-used { padding: 1px 8px; border-radius: 999px; font-size: var(--text-caption); font-weight: 700; background: var(--surface2); color: var(--txt-2); }
.tcp-addr-used { background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary-ink); }
.tcp-next { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.tcp-next li { display: flex; flex-direction: column; gap: 3px; line-height: 1.55; }
.tcp-next span { color: var(--txt-2); font-size: var(--text-small); }
.tcp-checked { margin: 18px 0 0; color: var(--txt-3); font-size: var(--text-small); }
.tcp-about { margin-top: 48px; }
.tcp-about h2 { font-size: var(--text-h2); }
.tcp-about-checks { margin-bottom: 20px; }

@media (max-width: 860px) {
  .tcp-form { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tcp-field--host { grid-column: 1 / -1; }
  .tcp-form button { grid-column: 1 / -1; }
  .tcp-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .tcp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcp-seq-end { max-width: 48%; }
}

/* ── What Is My IP (/tools/what-is-my-ip/) ─────────────────────────────── */
.ip-page { --ip-change: var(--amber); --ip-change-ink: color-mix(in srgb, var(--amber) 70%, var(--txt)); --ip-ok-ink: color-mix(in srgb, var(--green) 78%, var(--txt)); }
.ip-mono { font-family: var(--font-mono); overflow-wrap: anywhere; }
.ip-dim { color: var(--txt-3); }
.ip-hero { margin-top: 24px; padding: 28px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--txt) 28%, transparent); }
.ip-hero-eyebrow { margin: 0 0 6px; font-size: var(--text-caption); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--txt-3); }
.ip-hero-address { margin: 0 0 16px; font-size: clamp(1.5rem, 5vw, 2.6rem); font-weight: 750; line-height: 1.2; color: var(--txt); }
.ip-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ip-hero-note { margin: 14px 0 0; color: var(--txt-2); line-height: 1.6; }
.ip-hero-note:empty { display: none; }
.ip-badge { display: inline-block; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface2); color: var(--txt-2); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.ip-badge[hidden] { display: none; }
.ip-badge--used { color: var(--ip-ok-ink); background: var(--badge-ok-bg); border-color: color-mix(in srgb, var(--green) 35%, transparent); }
.ip-badge--off { color: var(--txt-3); background: transparent; border-style: dashed; }
#ip-message { margin: 16px 0; color: var(--txt-3); }
.ip-results { display: grid; gap: 32px; margin-bottom: 32px; }
.ip-results[hidden] { display: none; }
.ip-section h2 { margin: 0 0 8px; font-size: 1.35rem; }
.ip-lede { margin: 0 0 16px; color: var(--txt-3); line-height: 1.65; max-width: 760px; }
.ip-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 8px 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); }
.ip-fact { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid var(--border); }
.ip-fact:nth-child(-n+2) { border-top: 0; }
.ip-fact dt { color: var(--txt-3); font-size: var(--text-small); }
.ip-fact dd { margin: 0; overflow-wrap: anywhere; }

/* Path figure: one lane per address family; each lane is a row of stops
   joined by a line, stacking vertically on narrow screens. The router stop
   is highlighted on the IPv4 lane, where NAT changes the address. */
.ip-figure { margin: 0; padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface2); }
.ip-figure figcaption { margin-top: 16px; color: var(--txt-3); font-size: var(--text-compact); line-height: 1.55; text-align: center; }
.ip-figure figcaption a { color: var(--primary-ink); }
.ip-path { display: grid; gap: 20px; }
.ip-lane { padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.ip-lane--used { border-color: color-mix(in srgb, var(--green) 40%, var(--border)); }
.ip-lane--off { border-style: dashed; background: transparent; }
.ip-lane--off .ip-step-icon { color: var(--txt-3); border-style: dashed; }
.ip-lane--off .ip-step-title { color: var(--txt-2); }
.ip-lane-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.ip-lane-title { margin: 0; font-size: 1.05rem; }
.ip-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; position: relative; }
.ip-steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 21px; border-top: 2px solid var(--border); }
.ip-lane--used .ip-steps::before { border-top-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
.ip-step { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 0; text-align: center; position: relative; }
.ip-step-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--border); background: var(--surface); color: var(--primary-ink); position: relative; z-index: 1; }
.ip-step--change .ip-step-icon { border-color: var(--ip-change); color: var(--ip-change-ink); }
.ip-step--site .ip-step-icon, .ip-step--device .ip-step-icon { background: var(--icon-tile-bg); }
.ip-step-card { min-width: 0; }
.ip-step-role { margin: 0 0 2px; font-size: var(--text-caption); font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--txt-3); }
.ip-step-title { margin: 0; font-weight: 700; font-size: var(--text-small); overflow-wrap: anywhere; }
.ip-step--change .ip-step-title { color: var(--ip-change-ink); }
.ip-step-detail { margin: 4px 0 0; color: var(--txt-3); font-size: var(--text-compact); line-height: 1.45; overflow-wrap: anywhere; }
.ip-step-detail.ip-mono { color: var(--txt-2); }

.ip-see { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ip-see-col { padding: 18px 22px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 12px; background: var(--surface); }
.ip-see-col--yes { border-left-color: var(--amber); }
.ip-see-col--no { border-left-color: var(--green); }
.ip-see-col h3 { margin: 0 0 8px; font-size: 1rem; }
.ip-see-col ul { margin: 0; padding-left: 20px; line-height: 1.6; color: var(--txt-2); }
.ip-see-col li + li { margin-top: 6px; }
.ip-notes { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ip-note { padding: 12px 16px 12px 18px; border: 1px solid var(--border); border-left-width: 4px; border-radius: 10px; background: var(--surface); line-height: 1.6; }
.ip-note--good { border-left-color: var(--green); }
.ip-note--warn { border-left-color: var(--amber); }
.ip-note--info { border-left-color: var(--txt-3); }

@media (max-width: 860px) {
  .ip-facts { grid-template-columns: minmax(0, 1fr); }
  .ip-fact:nth-child(2) { border-top: 1px solid var(--border); }
}
@media (max-width: 700px) {
  .ip-hero { padding: 22px; }
  .ip-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ip-see { grid-template-columns: minmax(0, 1fr); }
  .ip-steps { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .ip-steps::before { left: 21px; right: auto; top: 22px; bottom: 22px; border-top: 0; border-left: 2px solid var(--border); }
  .ip-lane--used .ip-steps::before { border-left-color: color-mix(in srgb, var(--green) 55%, var(--border)); }
  .ip-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; }
  .ip-step-icon { flex-shrink: 0; }
}

/* ── Traceroute (/tools/traceroute/) ──────────────────────────────────────
   Each network on the path takes a record-type colour pair (--tr-fg ink on
   --tr-bg tint), set by .tr-net--<pair>; the probe's private network and
   silent stretches are neutral. */
.tr-page {
  --tr-ok-ink: color-mix(in srgb, var(--green) 78%, var(--txt));
  --tr-warn-ink: color-mix(in srgb, var(--amber) 78%, var(--txt));
  --tr-bad-ink: color-mix(in srgb, var(--red) 85%, var(--txt));
}
.tr-net--txt { --tr-fg: var(--rtype-txt-fg); --tr-bg: var(--rtype-txt-bg); }
.tr-net--cname { --tr-fg: var(--rtype-cname-fg); --tr-bg: var(--rtype-cname-bg); }
.tr-net--mx { --tr-fg: var(--rtype-mx-fg); --tr-bg: var(--rtype-mx-bg); }
.tr-net--a { --tr-fg: var(--rtype-a-fg); --tr-bg: var(--rtype-a-bg); }
.tr-net--srv { --tr-fg: var(--rtype-srv-fg); --tr-bg: var(--rtype-srv-bg); }
.tr-net--aaaa { --tr-fg: var(--rtype-aaaa-fg); --tr-bg: var(--rtype-aaaa-bg); }
.tr-net--ptr { --tr-fg: var(--rtype-ptr-fg); --tr-bg: var(--rtype-ptr-bg); }
.tr-net--ns { --tr-fg: var(--rtype-ns-fg); --tr-bg: var(--rtype-ns-bg); }
.tr-net--local, .tr-net--unknown { --tr-fg: var(--txt-2); --tr-bg: var(--surface2); }
.tr-net--silent { --tr-fg: var(--txt-3); --tr-bg: transparent; }

.tr-form { display: grid; grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)) auto; gap: 14px; align-items: end; }
.tr-form:has(#tr-port-field[hidden]) { grid-template-columns: minmax(0, 2.2fr) repeat(3, minmax(0, 1fr)) auto; }
.tr-field label { display: block; font-weight: 600; margin-bottom: 8px; font-size: var(--text-small); }
.tr-field input, .tr-field select { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--txt); font: inherit; }
.tr-field[hidden] { display: none; }
.tr-field--submit button { white-space: nowrap; }
.tr-field--submit button:disabled { opacity: .65; cursor: wait; }
.tr-form-help { margin: 12px 0 0; color: var(--txt-3); font-size: var(--text-small); line-height: 1.5; }
.tr-message { margin: 20px 0 8px; line-height: 1.6; }
.tr-message:empty { display: none; }
.tr-icon { flex-shrink: 0; vertical-align: -3px; }
.tr-waiting { color: var(--txt-3); }

.tr-probe { margin-top: 24px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.tr-probe-head h2 { margin: 0; font-size: var(--text-h3, 1.35rem); }
.tr-probe-head p { margin: 4px 0 0; color: var(--txt-3); font-size: var(--text-small); overflow-wrap: anywhere; }
.tr-sub { margin: 28px 0 12px; font-size: 1rem; }
.tr-verdict { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; padding: 12px 14px; border-radius: 10px; font-weight: 600; background: var(--surface2); overflow-wrap: anywhere; }
.tr-verdict .tr-icon { width: 20px; height: 20px; }
.tr-verdict--ok { color: var(--tr-ok-ink); background: color-mix(in srgb, var(--green) 10%, var(--surface)); }
.tr-verdict--warn { color: var(--tr-warn-ink); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); }
.tr-verdict--bad { color: var(--tr-bad-ink); background: color-mix(in srgb, var(--red) 9%, var(--surface)); }
.tr-verdict--running { color: var(--txt-2); }
.tr-spinner { width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: tr-spin .8s linear infinite; }
@keyframes tr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tr-spinner { animation: none; border-top-color: var(--border); } }

.tr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 0; }
.tr-stats div { padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.tr-stats dt { font-size: var(--text-caption); color: var(--txt-3); font-weight: 600; }
.tr-stats dd { margin: 2px 0 0; font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Network path: probe → each network → target, as chips joined by a line. */
.tr-path { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.tr-path li { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); }
.tr-path li + li::before { content: ""; position: absolute; left: -22px; top: 50%; width: 18px; border-top: 2px solid var(--border-hi, var(--border)); }
.tr-path li + li::after { content: ""; position: absolute; left: -9px; top: calc(50% - 4px); width: 6px; height: 6px; border-top: 2px solid var(--border-hi, var(--border)); border-right: 2px solid var(--border-hi, var(--border)); transform: rotate(45deg); }
.tr-path span { display: flex; flex-direction: column; min-width: 0; }
.tr-path strong { font-size: var(--text-small); overflow-wrap: anywhere; }
.tr-path small { font-size: var(--text-caption); color: var(--txt-3); overflow-wrap: anywhere; }
.tr-path li.tr-path-net { border-color: color-mix(in srgb, var(--tr-fg) 45%, transparent); background: var(--tr-bg); border-left: 4px solid var(--tr-fg); }
.tr-path-net strong { color: var(--tr-fg); }
.tr-path li.tr-path-net.tr-net--silent { border-style: dashed; border-left-width: 1px; }
.tr-path-end .tr-icon { color: var(--primary-ink); }
.tr-path-end--missed .tr-icon { color: var(--tr-bad-ink); }
.tr-path li.tr-path-end--missed { border-style: dashed; }

/* Latency chart */
.tr-chart { margin: 0; }
.tr-chart svg { display: block; width: 100%; height: auto; max-height: 260px; }
.tr-chart figcaption { margin-top: 6px; color: var(--txt-3); font-size: var(--text-caption); line-height: 1.5; }
.tr-chart-grid { stroke: var(--border); stroke-width: 1; }
.tr-chart-axis { fill: var(--txt-3); font-size: 11px; font-family: var(--font-sans); }
.tr-chart-bar rect { fill: var(--tr-fg, var(--primary)); }
.tr-chart-whisker { stroke: var(--txt-2); stroke-width: 1.5; }
.tr-chart-silent { fill: none; stroke: var(--txt-3); stroke-width: 1.5; stroke-dasharray: 2 2; }
.tr-chart-loss { fill: var(--tr-warn-ink); font-size: 10px; font-weight: 700; font-family: var(--font-sans); }

/* Findings */
.tr-findings { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.tr-finding { display: flex; gap: 10px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; }
.tr-finding strong { display: block; overflow-wrap: anywhere; }
.tr-finding p { margin: 4px 0 0; color: var(--txt-2); line-height: 1.55; font-size: var(--text-small); overflow-wrap: anywhere; }
.tr-finding--ok .tr-icon { color: var(--tr-ok-ink); }
.tr-finding--warn .tr-icon { color: var(--tr-warn-ink); }
.tr-finding--bad .tr-icon { color: var(--tr-bad-ink); }
.tr-finding--info .tr-icon { color: var(--txt-2); }

/* Hop list: a vertical path with one node per hop in its network's colour. */
.tr-hops { position: relative; display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.tr-hops::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; border-left: 2px solid var(--border); }
.tr-hop { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) minmax(150px, 34%); gap: 12px; align-items: center; padding: 6px 0; }
.tr-hop-n { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--tr-fg, var(--txt-3)); background: var(--surface); color: var(--tr-fg, var(--txt-2)); font-size: var(--text-caption); font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-hop--silent .tr-hop-n { border-style: dashed; border-color: var(--txt-3); color: var(--txt-3); }
.tr-hop-main { min-width: 0; }
.tr-hop-name { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.tr-hop--silent .tr-hop-name { color: var(--txt-3); font-weight: 500; }
.tr-hop-meta { margin: 2px 0 0; color: var(--txt-3); font-size: var(--text-caption); overflow-wrap: anywhere; }
.tr-hop-meta code, .tr-hop-name code { font-family: var(--font-mono); font-size: .95em; }
.tr-hop-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.tr-hop-bar { flex: 1 1 70px; height: 8px; border-radius: 4px; background: var(--surface2); overflow: hidden; }
.tr-hop-bar span { display: block; height: 100%; border-radius: 4px; background: var(--tr-fg, var(--primary)); }
.tr-hop-ms { min-width: 64px; font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--text-small); text-align: right; }
.tr-hop-ms small { color: var(--txt-3); font-weight: 500; }
.tr-badge { padding: 2px 8px; border-radius: 999px; font-size: var(--text-caption); font-weight: 600; }
.tr-badge--warn { background: var(--badge-warn-bg); color: var(--badge-warn-fg); }

.tr-raw { margin-top: 20px; }
.tr-raw summary { cursor: pointer; color: var(--primary-ink); font-weight: 600; }
.tr-raw pre { overflow-x: auto; padding: 12px; border-radius: 8px; background: var(--surface2); font-size: .8rem; line-height: 1.5; }

.tr-compare { margin-top: 24px; }
.tr-compare h2 { font-size: var(--text-h3, 1.35rem); margin: 0 0 12px; }
.tr-table-wrap { overflow-x: auto; }
.tr-compare table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); }
.tr-compare th, .tr-compare td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.tr-compare thead th { font-size: var(--text-caption); color: var(--txt-3); }
.tr-about { margin-top: 48px; }
.tr-about h2 { font-size: var(--text-h3, 1.35rem); }

@media (max-width: 900px) {
  .tr-form, .tr-form:has(#tr-port-field[hidden]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-field--target, .tr-field--submit { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .tr-form, .tr-form:has(#tr-port-field[hidden]) { grid-template-columns: 1fr; }
  .tr-probe { padding: 16px; }
  .tr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tr-hop { grid-template-columns: 32px minmax(0, 1fr); }
  .tr-hop-stats { grid-column: 2; }
  .tr-path { flex-direction: column; gap: 14px; }
  .tr-path li + li::before { left: 20px; top: -14px; width: 0; height: 12px; border-top: 0; border-left: 2px solid var(--border-hi, var(--border)); }
  .tr-path li + li::after { display: none; }
}