/* North Keel UI. Tokens from docs/BRAND.md; light and dark via prefers-color-scheme.
   Fonts are self-hosted (Montserrat, SIL OFL 1.1); icons are same-origin SVG masks. */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300; font-display: swap; src: url("montserrat-300.v1.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("montserrat-400.v1.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("montserrat-500.v1.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("montserrat-600.v1.woff2") format("woff2"); }

:root {
  color-scheme: light dark;

  /* Brand */
  --midnight: #0B1F2A;
  --teal: #00C2A8;
  --slate: #94A3B8;
  --fog: #F5F7FA;
  --teal-100: #D5F5EF;
  --teal-300: #5EEAD4;
  --teal-400: #2DD4BF;
  --teal-600: #00A891;
  --teal-700: #00745F;
  --teal-900: #0E3B3A;
  --n-200: #CBD5E1;
  --n-400: #7A8797;
  --n-500: #526173;
  --n-600: #334155;
  --n-700: #16323F;
  --n-800: #0F2733;

  /* Roles: light */
  --bg: var(--fog);
  --surface: #FFFFFF;
  --surface-2: #E8EDF2;
  --text: var(--midnight);
  --text-2: var(--n-600);
  --muted: var(--n-500);
  --border: var(--n-200);
  --border-strong: var(--n-400);
  --accent: var(--teal);
  --accent-hover: var(--teal-600);
  --accent-text: var(--midnight);
  --accent-soft: var(--teal-100);
  --link: var(--teal-700);
  --icon: var(--teal-700);
  --focus: var(--teal-700);
  --ok: #146C2E;     --ok-soft: #E1F4E6;
  --warn: #8A4B00;   --warn-soft: #FDF1DC;
  --danger: #B42318; --danger-soft: #FDE8E6; --danger-hover: #912018; --danger-text: #FFFFFF;
  --info: #0B5FA5;   --info-soft: #E1EEFA;

  /* Always-dark chrome (header, hero) */
  --chrome: var(--midnight);
  --chrome-2: var(--n-800);
  --chrome-text: var(--n-200);
  --chrome-strong: #FFFFFF;
  --chrome-border: #24404D;
  --chrome-focus: var(--teal-300);

  /* Type */
  --font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --track-caps: 0.14em;
  --track-eyebrow: 0.24em;

  /* Shape and space */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(11 31 42 / 0.08);
  --shadow-2: 0 4px 12px rgb(11 31 42 / 0.12);
  --content-max: 72rem;
  --prose-max: 40rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--midnight);
    --surface: var(--n-800);
    --surface-2: var(--n-700);
    --text: var(--fog);
    --text-2: var(--n-200);
    --muted: var(--slate);
    --border: #24404D;
    --border-strong: #6B8291;
    --accent-hover: var(--teal-300);
    --accent-soft: var(--teal-900);
    --link: var(--teal-400);
    --icon: var(--teal-400);
    --focus: var(--teal-300);
    --ok: #6EDC8C;     --ok-soft: #14301D;
    --warn: #F5C065;   --warn-soft: #3A2C10;
    --danger: #FF8A80; --danger-soft: #3D1A1C; --danger-hover: #FFB3AC; --danger-text: var(--midnight);
    --info: #7CC4FF;   --info-soft: #12304B;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 0.45);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1rem/1.5 var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}
h1, h2, h3, h4 { font-weight: 500; line-height: 1.25; margin: 0 0 .5rem; letter-spacing: -0.005em; }
h1 { font-size: 1.875rem; line-height: 2.375rem; }
h2 { font-size: 1.25rem; line-height: 1.75rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }
strong { font-weight: 600; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
code, .mono { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
[hidden] { display: none !important; }

.skip-link {
  position: absolute; left: .5rem; top: -4rem; z-index: 100;
  background: var(--accent); color: var(--accent-text); font-weight: 600;
  padding: .5rem 1rem; border-radius: var(--radius-pill); text-decoration: none;
}
.skip-link:focus { top: .5rem; outline-color: var(--chrome-focus); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.eyebrow {
  display: block; margin: 0 0 .75rem; font-size: .75rem; line-height: 1rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-eyebrow); color: var(--link);
}

/* Icons: same-origin SVG used as a mask, so they take the text colour. */
.ico, .badge-type[class*=" t-"]::before {
  display: inline-block; flex: none; width: 1.25rem; height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.i-website, .t-website { --i: url("icon-website.v1.svg"); }
.i-web-app, .t-web-app { --i: url("icon-web-app.v1.svg"); }
.i-api, .t-api { --i: url("icon-api.v1.svg"); }
.i-webhook, .t-webhook { --i: url("icon-webhook.v1.svg"); }
.i-mcp, .t-mcp { --i: url("icon-mcp.v1.svg"); }
.i-unknown, .t-unknown { --i: url("icon-unknown.v1.svg"); }
.i-shield { --i: url("icon-shield.v1.svg"); }
.i-search { --i: url("icon-search.v1.svg"); }
.i-check { --i: url("icon-check.v1.svg"); }
.i-info { --i: url("icon-info.v1.svg"); }
.i-warning { --i: url("icon-warning.v1.svg"); }
.i-arrow-right { --i: url("icon-arrow-right.v1.svg"); }

/* Header and navigation: Midnight in both colour schemes. */
.site-header { background: var(--chrome); color: var(--chrome-text); border-bottom: 1px solid var(--chrome-border); }
.site-header :focus-visible { outline-color: var(--chrome-focus); }
.bar {
  max-width: var(--content-max); margin: 0 auto; padding: .75rem 1rem; min-height: 4rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; padding: .25rem 0; }
.brand img { display: block; height: 2.25rem; width: auto; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; flex: 1 1 auto; }
.nav a:not(.btn) {
  display: inline-block; padding: .5rem .75rem; color: var(--chrome-text); text-decoration: none;
  font-size: .875rem; font-weight: 500; letter-spacing: .02em; border-radius: var(--radius-sm);
}
.nav a:not(.btn):hover { color: var(--chrome-strong); }
.nav a[aria-current="page"] { color: var(--chrome-strong); box-shadow: inset 0 -2px 0 var(--teal); border-radius: 0; }
.nav-end { justify-content: flex-end; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; color: var(--chrome-text); font-size: .875rem; }
.who strong { color: var(--chrome-strong); font-weight: 600; }
.site-header .btn:not(.btn-primary) { background: transparent; color: var(--chrome-strong); border-color: #6B8291; }
.site-header .btn:not(.btn-primary):hover { background: var(--n-700); }

body > main { flex: 1 0 auto; width: 100%; max-width: var(--content-max); margin: 0 auto; padding: 1.5rem 1rem 3rem; }
main:focus { outline: none; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.page-head h1, .page-head h2 { margin: 0; }
.lede { color: var(--text-2); max-width: 46rem; font-size: 1.0625rem; line-height: 1.65; }
.muted { color: var(--muted); }
.small { font-size: .875rem; }

/* Cards, panels */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-1); }
.card > :last-child { margin-bottom: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.5rem; padding: .45rem 1.25rem; border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong); background: transparent; color: var(--text);
  font: inherit; font-size: .875rem; font-weight: 600; line-height: 1.25rem; cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--surface-2); }
.btn:active { box-shadow: inset 0 2px 0 rgb(0 0 0 / .15); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-danger { color: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-solid-danger { background: var(--danger); border-color: var(--danger); color: var(--danger-text); }
.btn-solid-danger:hover { background: var(--danger-hover); border-color: var(--danger-hover); }
.btn-sm { min-height: 2.25rem; padding: .25rem .9rem; font-size: .8125rem; }
.btn-lg { min-height: 3rem; padding: .7rem 1.6rem; font-size: 1rem; }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--surface-2); border-color: var(--border); color: var(--muted); cursor: not-allowed; box-shadow: none;
}
.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Forms */
.field { display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.field label, .field .label { font-weight: 500; font-size: .875rem; }
.hint { color: var(--muted); font-size: .8125rem; margin: 0; }
input[type="text"], input[type="email"], input[type="search"], select, textarea {
  min-height: 2.5rem; padding: .45rem .75rem; border-radius: var(--radius);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text);
  font: inherit; font-size: 1rem; max-width: 100%;
}
input[type="text"][name="domain"] { font-family: var(--mono); }
.hint[role="alert"]:not(:empty) { color: var(--danger); font-weight: 600; }
::placeholder { color: var(--muted); opacity: 1; }
.check { display: flex; gap: .65rem; align-items: flex-start; }
.check input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; flex: none; accent-color: var(--teal-700); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem 1rem; align-items: end; }
.form-stack { display: grid; gap: .9rem; max-width: 36rem; }
.form-grid .check { min-height: 2.5rem; align-items: center; }
.form-grid .check input { margin-top: 0; }
.form-grid > .btn-row { grid-column: 1 / -1; }
.form-stack > :empty { margin: -.9rem 0; }
.field label > input[type="checkbox"] { width: 1.25rem; height: 1.25rem; margin: 0 .45rem 0 0; vertical-align: -.25rem; accent-color: var(--teal-700); }
.inline-form { display: flex; flex-wrap: wrap; gap: .75rem; align-items: end; }
@media (prefers-color-scheme: dark) {
  .check input, .field label > input[type="checkbox"] { accent-color: var(--teal); }
}

/* Messages and states */
.notice {
  border: 1px solid var(--border); border-left-width: 4px; border-radius: var(--radius);
  padding: .75rem 1rem; margin-bottom: 1rem; background: var(--surface); color: var(--text);
}
.notice-error { border-color: var(--danger); background: var(--danger-soft); }
.notice-warn { border-color: var(--warn); background: var(--warn-soft); }
.notice-ok { border-color: var(--ok); background: var(--ok-soft); }
.notice-info { border-color: var(--info); background: var(--info-soft); }
.notice > :last-child { margin-bottom: 0; }
.state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.state h1, .state h2 { color: var(--text); }
.state .btn-row { justify-content: center; }
.spinner {
  display: inline-block; width: 1.25rem; height: 1.25rem; border-radius: 50%;
  border: 3px solid var(--surface-2); border-top-color: var(--accent);
  animation: spin 0.9s linear infinite; vertical-align: -.25rem; margin-right: .5rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .6rem; border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 600; line-height: 1.375rem; white-space: nowrap;
  border: 1px solid transparent; background: var(--surface-2); color: var(--text-2);
}
.badge-type[class*=" t-"]::before { content: ""; width: .875rem; height: .875rem; }
.badge-ok { background: var(--ok-soft); color: var(--ok); }
.badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-err { background: var(--danger-soft); color: var(--danger); }
.badge-info { background: var(--info-soft); color: var(--info); }
.badge-new { background: var(--accent-soft); color: var(--text); }
.badge-tag { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-2); font-weight: 500; }
.badges { display: flex; flex-wrap: wrap; gap: .25rem; }

/* Confidence: number plus a meter */
.confidence { display: inline-flex; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.confidence-n { min-width: 1.75rem; text-align: right; }
meter { width: 3rem; height: .5rem; border-radius: var(--radius-pill); background: var(--surface-2); border: 0; }
meter::-webkit-meter-bar { background: var(--surface-2); border: 0; border-radius: var(--radius-pill); height: .5rem; }
meter::-webkit-meter-optimum-value { background: var(--link); border-radius: var(--radius-pill); }
meter::-webkit-meter-suboptimum-value { background: var(--slate); border-radius: var(--radius-pill); }
meter::-webkit-meter-even-less-good-value { background: var(--n-400); border-radius: var(--radius-pill); }
meter::-moz-meter-bar { background: var(--link); border-radius: var(--radius-pill); }
meter:-moz-meter-sub-optimum::-moz-meter-bar { background: var(--slate); }
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar { background: var(--n-400); }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .75rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .75rem 1rem; box-shadow: var(--shadow-1); }
.tile .n { display: block; font-size: 1.75rem; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; }
.tile .l { color: var(--muted); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; }

/* Tables */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; box-shadow: var(--shadow-1); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
caption { text-align: left; padding: .75rem 1rem; color: var(--muted); font-size: .8125rem; }
th, td { text-align: left; padding: .6rem 1rem; border-top: 1px solid var(--border); vertical-align: middle; }
td[data-label="First seen"], td[data-label="Last seen"], td[data-label="Confidence"] { white-space: nowrap; }
thead th {
  border-top: 0; background: var(--surface-2); color: var(--text-2); white-space: nowrap;
  font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps);
}
tbody tr:hover > td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
tbody tr.wildcard td:first-child { box-shadow: inset 4px 0 0 var(--info); }
tr.detail td, tr.detail:hover td { background: var(--bg); }
.fqdn { font-family: var(--mono); font-size: .92em; font-weight: 600; }
.expander {
  all: unset; box-sizing: border-box; cursor: pointer; color: var(--link);
  font-family: var(--mono); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}
.expander:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.expander::before { content: "\25B8\00a0"; display: inline-block; }
.expander[aria-expanded="true"]::before { content: "\25BE\00a0"; }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.detail-grid h4 { margin: 0 0 .25rem; font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: var(--track-caps); }
.detail-grid ul { margin: 0; padding-left: 1.1rem; }

progress { width: 100%; max-width: 14rem; height: .5rem; accent-color: var(--accent); }

/* Runs */
.run-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.run { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); }
.run > summary { cursor: pointer; padding: .75rem 1rem; display: grid; grid-template-columns: 6.75rem 1fr; gap: .25rem 1rem; align-items: center; }
.run > summary > :nth-child(3) { grid-column: 2; }
.run > summary:hover { background: var(--surface-2); border-radius: var(--radius-lg); }
.run .body { padding: 0 1rem 1rem; }
.run-meta { color: var(--muted); font-size: .875rem; }

/* Prose pages (About) */
.prose { max-width: var(--prose-max); }
.prose h1 { font-size: 2.25rem; line-height: 2.75rem; margin-bottom: 1rem; }
.prose h2 { margin-top: 2rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: .4rem; }

/* Landing */
main.landing { max-width: none; padding: 0; }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 1rem; }
.hero-band {
  position: relative; overflow: hidden; color: var(--chrome-text);
  background:
    radial-gradient(48rem 26rem at 88% -10%, rgb(0 194 168 / .16), transparent 62%),
    linear-gradient(180deg, var(--chrome) 0%, var(--chrome-2) 100%);
  border-bottom: 1px solid var(--chrome-border);
}
.hero-band :focus-visible { outline-color: var(--chrome-focus); }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 38rem); align-items: center; padding: 4.5rem 1rem 4rem; }
.hero-art {
  position: absolute; top: 0; right: 0; width: min(64%, 56rem); height: 100%;
  object-fit: cover; object-position: 78% 45%; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40%);
  mask-image: linear-gradient(to right, transparent 0, #000 40%);
}
.hero .eyebrow { color: var(--teal); }
.hero h1 {
  color: var(--chrome-strong); font-size: 3rem; line-height: 3.5rem; font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--track-caps); margin-bottom: 1.25rem;
}
.hero h1 span { display: block; }
.hero .rule { width: 3rem; height: 3px; background: var(--teal); border: 0; margin: 0 0 1.25rem; }
.hero .lede { color: var(--chrome-text); font-size: 1.125rem; line-height: 1.75rem; max-width: 40rem; }
.hero .muted { color: var(--slate); }
.hero .btn:not(.btn-primary) { color: var(--chrome-strong); border-color: #6B8291; }
.hero .btn:not(.btn-primary):hover { background: var(--n-700); }
.section { padding: 3.5rem 0; }
.section h2 { font-size: 1.5rem; line-height: 2rem; }
.section > .wrap > .lede { margin-bottom: 2rem; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.features li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.25rem; box-shadow: var(--shadow-1); }
.features .ico { width: 1.75rem; height: 1.75rem; color: var(--icon); margin-bottom: .75rem; }
.features h3 { font-size: 1.0625rem; font-weight: 600; }
.features p { color: var(--text-2); margin: 0; font-size: .9375rem; }
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1.5rem; margin: 0; padding: 0; list-style: none; }
.steps li { counter-increment: step; padding-top: 1rem; border-top: 2px solid var(--border); }
.steps li::before {
  content: counter(step, decimal-leading-zero); display: block; margin-bottom: .5rem;
  color: var(--link); font-size: .75rem; font-weight: 600; letter-spacing: var(--track-eyebrow);
}
.steps h3 { font-size: 1.0625rem; font-weight: 600; }
.steps p { color: var(--text-2); margin: 0; font-size: .9375rem; }
.types { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.types .badge { font-size: .8125rem; padding: .2rem .8rem; }
.promise { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }

/* Footer */
.site-footer { border-top: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: .875rem; }
.site-footer .wrap, .site-footer > p { max-width: var(--content-max); margin: 0 auto; padding: 1.25rem 1rem; }
.site-footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }
.site-footer p { margin: 0; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.site-footer a { color: var(--text-2); }

/* Dialog */
dialog { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); padding: 1.5rem; max-width: min(30rem, calc(100vw - 2rem)); box-shadow: var(--shadow-2); }
dialog::backdrop { background: rgb(11 31 42 / .6); }
dialog h2 { margin-bottom: .5rem; }
dialog .btn-row { margin-top: 1.25rem; }

/* Below desktop width the scene would sit behind the copy: stack it, full-bleed, under the text. */
@media (max-width: 1023px) {
  .hero-band { display: flex; flex-direction: column; }
  .hero { order: 1; width: 100%; padding-bottom: 1.5rem; }
  .hero-art {
    order: 2; position: static; width: 100%; height: clamp(13rem, 36vw, 20rem); object-position: 82% 42%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 30%);
  }
}

/* Touch: every control is at least 44 px tall (WCAG 2.5.5 target size). */
@media (max-width: 720px), (pointer: coarse) {
  .btn, .btn-sm { min-height: 2.75rem; }
  input:not([type="checkbox"]):not([type="radio"]), select, .brand, .skip-link { min-height: 2.75rem; }
  .nav-end a:not(.btn) { justify-content: center; min-width: 2.75rem; }
  .nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .site-footer nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .expander { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .field label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .check, .form-grid .check { min-height: 2.75rem; align-items: center; }
  .check input { margin-top: 0; }
  .check label { flex: 1 1 auto; display: flex; align-items: center; min-height: 2.75rem; }
  .stack-table td a:not(.btn) { display: inline-flex; align-items: center; min-height: 2.75rem; }
  .run > summary { min-height: 2.75rem; }
}

/* Narrow screens: compact header, tables become two-column cards, landing stacks. */
@media (max-width: 720px) {
  body > main { padding: 1rem .75rem 2.5rem; }
  main.landing { padding: 0; }
  .wrap { padding: 0 .75rem; }

  /* Header: logo and Sign out on one row, who on a quiet line, nav as one swipeable row. */
  .bar { padding: .5rem .75rem 0; gap: 0 .75rem; min-height: 0; }
  .brand { order: 1; }
  .brand img { height: 2rem; }
  .who:not([hidden]) { display: contents; }
  #logout { order: 2; margin-left: auto; }
  #who-text {
    order: 3; flex: 1 0 100%; min-width: 0; padding: .25rem 0 0; font-size: .8125rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .nav:not(.nav-end) {
    order: 4; flex: 1 0 100%; flex-wrap: nowrap; gap: 0; margin: 0 -.75rem; padding: 0 .25rem;
    overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  }
  .nav:not(.nav-end)::-webkit-scrollbar { display: none; }
  .nav:not(.nav-end) a { flex: 0 0 auto; scroll-snap-align: start; padding: 0 .75rem; }
  .nav-end { order: 2; margin-left: auto; }
  .bar:has(.nav-end) { padding-bottom: .5rem; }

  .page-head { margin-bottom: .75rem; }
  .page-head h1 { font-size: 1.75rem; line-height: 2.25rem; }
  .page-head .btn-row { width: 100%; }

  .tiles { grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: .5rem; }
  .tile { padding: .5rem .65rem; }
  .tile .n { font-size: 1.3rem; }
  .tile .l { display: block; font-size: .8125rem; line-height: 1.125rem; text-transform: none; letter-spacing: 0; hyphens: auto; }

  .card { padding: 1rem; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .form-grid > .field:first-child, .form-grid > .field:has(input[type="search"]), .form-grid > .field:has(input[type="text"]),
  .form-grid > :has(input[type="checkbox"]) { grid-column: 1 / -1; }

  /* Stacked tables: each row is a card with the first cell as its title. */
  .stack-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .stack-table caption { display: block; width: 100%; }
  .stack-table, .stack-table tbody { display: block; width: 100%; }
  .stack-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .75rem; padding: .75rem 1rem; border-top: 1px solid var(--border); }
  .stack-table tr[hidden] { display: none; }
  .stack-table tbody tr:first-child { border-top: 0; }
  .stack-table td { display: block; min-width: 0; border: 0; padding: 0; overflow-wrap: anywhere; }
  .stack-table td:first-child, .stack-table td[colspan],
  .stack-table td:is([data-label="Tags"], [data-label="Actions"], [data-label="Action"], [data-label="Reason"], [data-label="Notes"], [data-label="Sources"], [data-label="Owners"], [data-label="Workspace"], [data-label="Abuse flag"]) { grid-column: 1 / -1; }
  .stack-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: .125rem; font-size: .75rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
  .stack-table td:first-child[data-label]::before { content: none; }
  .stack-table td:first-child { font-size: 1rem; }
  .stack-table tr.detail { padding-top: 0; border-top: 0; }
  .stack-table tbody tr:not(.detail):hover > td { background: none; }
  .stack-table tr.detail td { padding: .75rem; border-radius: var(--radius-sm); }
  td[data-label="First seen"], td[data-label="Last seen"], td[data-label="Confidence"] { white-space: normal; }

  .hero { padding: 2.25rem .75rem 1.5rem; }
  .hero h1 { font-size: 1.875rem; line-height: 2.375rem; }
  .hero .lede { font-size: 1.0625rem; line-height: 1.65; }
  .section { padding: 2.5rem 0; }
  .btn-row .btn { flex: 1 1 auto; }
  .site-footer .wrap { padding: 1rem .75rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .badge, .btn, .tile, .card, .features li { border: 1px solid CanvasText; }
  .nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
  .ico, .badge-type[class*=" t-"]::before { background-color: CanvasText; forced-color-adjust: none; }
}