/* Industry — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/barlow-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/barlow-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/barlow-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/barlow-500-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/barlow-500-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/barlow-500-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/barlow-700-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/barlow-700-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/barlow-700-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-400-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-400-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-400-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-600-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-600-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/barlow-condensed-600-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ══════════════════════════════════════════════════════════════════════════
   Feint — design system.

   One stylesheet, no build step. Three layers:
     1. Tokens      — colour, type, spacing, radius. The only place a raw
                      colour value is allowed.
     2. Base        — reset and element defaults, shared by every page.
     3. Components  — `.btn`, `.card`, `.field`, `.badge`, `.notice`,
                      `.table`, `.dialog`, `.menu`, `.timeline` and the
                      console shell. Templates use these; they do not carry
                      inline styles.
   The landing page keeps its own small section at the end (blueprint frames,
   the hero, the bands) because it is a brochure, not a console.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. Tokens ─────────────────────────────────────────────────────────── */
:root {
  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Ground and surfaces. The console is dark only. */
  --color-bg: #0b0e0d;
  --color-surface: #111514;
  --surface-1: #111514;
  --surface-2: #171c1b;
  --surface-3: #1e2423;
  --sidebar-bg: #090b0b;

  /* Ink. Nothing below --text-3 is used for text that must be read. */
  --color-text: #e9edec;
  --text-1: #e9edec;
  --text-2: color-mix(in srgb, #e9edec 72%, transparent);
  --text-3: color-mix(in srgb, #e9edec 55%, transparent);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  --ink-4: color-mix(in srgb, #e9edec 45%, transparent);

  /* Edges. */
  --border: color-mix(in srgb, #e9edec 11%, transparent);
  --border-strong: color-mix(in srgb, #e9edec 22%, transparent);
  --color-divider: var(--border);

  /* Brand. */
  --color-accent: #2fd4c3;
  --accent-hover: #7ff0e2;
  --accent-ink: #06110f;
  --accent-soft: color-mix(in srgb, var(--color-accent) 12%, transparent);

  /* State. Armed is the brand colour: for a decoy, "on" is the product
     working. Tripped is amber so an alarm never looks like a button. */
  --color-ok: var(--color-accent);
  --color-alert: #f5b942;
  --color-alert-soft: color-mix(in srgb, #f5b942 12%, transparent);
  --color-danger: #ff6a5c;
  --color-danger-soft: color-mix(in srgb, #ff6a5c 12%, transparent);
  --color-info: #8fb3d9;
  --color-info-soft: color-mix(in srgb, #8fb3d9 12%, transparent);

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;

  --shadow-md: 0 4px 16px rgb(0 0 0 / .35);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / .55);

  /* The sidebar opens at --sidebar-w and drags between the min and the max;
     past the min it snaps to the icon rail. feint.js reads all four. */
  --sidebar-w: 236px;
  --sidebar-min-w: 184px;
  --sidebar-max-w: 270px;
  --sidebar-rail-w: 64px;
  --page-w: 1120px;
}

/* ── 2. Base ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--color-bg); color: var(--text-1);
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; }
p { margin: 0; }
a { color: var(--color-accent); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
code, kbd, .mono { font-family: var(--mono); font-size: .93em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 35%, transparent); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.82); } }
@keyframes sweep { 0% { transform: translateY(-100%); } 100% { transform: translateY(400%); } }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── 3. Components ─────────────────────────────────────────────────────── */

/* — Text helpers — */
.muted { color: var(--text-3); }
.dim { color: var(--text-2); }
.small { font-size: 13px; }
.tiny { font-size: 12px; }
.eyebrow {
  font-family: var(--font-heading); font-weight: 600; font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-3);
}
.nowrap { white-space: nowrap; }
.break { word-break: break-all; }
.stack { display: grid; gap: 20px; }
.stack-sm { display: grid; gap: 10px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1; }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; align-items: start; }

/* — Buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 500; line-height: 1; white-space: nowrap;
  border: 1px solid transparent; background: transparent; color: var(--text-1);
  text-decoration: none; cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn svg { width: 15px; height: 15px; flex: none; }
.btn:hover { color: var(--text-1); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-primary, a.btn-primary, .btn-primary:visited { background: var(--color-accent); color: var(--accent-ink); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn-secondary { border-color: var(--border-strong); background: var(--surface-2); }
.btn-secondary:hover { border-color: color-mix(in srgb, #e9edec 35%, transparent); background: var(--surface-3); }
.btn-ghost { color: var(--text-2); }
.btn-ghost:hover { background: color-mix(in srgb, #e9edec 7%, transparent); color: var(--text-1); }
.btn-danger { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); color: var(--color-danger); background: transparent; }
.btn-danger:hover { background: var(--color-danger-soft); color: var(--color-danger); border-color: var(--color-danger); }
.btn-danger-solid { background: var(--color-danger); border-color: var(--color-danger); color: #1a0704; }
.btn-danger-solid:hover { background: #ff8578; border-color: #ff8578; color: #1a0704; }
.btn-alert { background: var(--color-alert); border-color: var(--color-alert); color: #1d1400; }
.btn-alert:hover { background: #ffd070; border-color: #ffd070; color: #1d1400; }
.btn-sm { height: 28px; padding: 0 10px; font-size: 12.5px; }
.btn-icon { width: 34px; padding: 0; }
.btn-icon.btn-sm { width: 28px; }
/* HTMX marks the element (or its form) with .htmx-request while in flight. */
.btn.htmx-request, .htmx-request .btn[type="submit"] { pointer-events: none; opacity: .75; }
.btn.htmx-request::before, .htmx-request .btn[type="submit"]::before {
  content: ""; width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: spin .7s linear infinite;
}
.btn.is-copied { background: var(--color-ok); border-color: var(--color-ok); color: var(--accent-ink); }

/* — Forms — */
.field { display: grid; gap: 6px; }
.field > label, .field-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.field .optional { font-weight: 400; color: var(--text-3); }
.hint { font-size: 12.5px; color: var(--text-3); line-height: 1.45; }
.field-error { font-size: 12.5px; color: var(--color-danger); }
.input {
  width: 100%; min-height: 36px; padding: 7px 11px;
  background: var(--color-bg); color: var(--text-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  caret-color: var(--color-accent);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.input::placeholder { color: var(--ink-4); }
.input:hover { border-color: color-mix(in srgb, #e9edec 35%, transparent); }
.input:focus-visible { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.input.mono { font-family: var(--mono); font-size: 13px; }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
textarea.input { min-height: 90px; resize: vertical; }
.input-inline { display: flex; gap: 8px; align-items: center; }
.input-inline .input { flex: 1; }
.select { position: relative; }
.select select.input { appearance: none; padding-right: 32px; cursor: pointer; }
.select select.input option { background: var(--surface-2); color: var(--text-1); }
.select::after {
  content: ""; position: absolute; right: 12px; top: 50%; width: 7px; height: 7px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3);
  transform: translateY(-70%) rotate(45deg); pointer-events: none;
}
.select-sm select.input { min-height: 30px; padding: 4px 28px 4px 9px; font-size: 13px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--text-2); cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--color-accent); flex: none; }
.check strong { color: var(--text-1); font-weight: 500; }
/* Option cards — a radio group where each option earns a description. */
.choice { display: grid; gap: 8px; }
.choice-opt {
  display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-1); cursor: pointer; transition: border-color .12s ease;
}
.choice-opt:hover { border-color: var(--border-strong); }
.choice-opt:has(input:checked) { border-color: var(--color-accent); background: var(--accent-soft); }
.choice-opt input { margin: 3px 0 0; accent-color: var(--color-accent); }
.choice-opt .choice-title { font-weight: 500; color: var(--text-1); }
.choice-opt .choice-desc { font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
/* Segmented control — presets in one row. */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--color-bg); border: 1px solid var(--border-strong); border-radius: var(--radius); }
.seg-opt { position: relative; display: inline-flex; align-items: center; padding: 5px 11px; font-size: 13px; color: var(--text-2); border-radius: var(--radius-sm); cursor: pointer; user-select: none; }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt:has(input:checked) { background: var(--surface-3); color: var(--text-1); box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
.seg-opt:not(:has(input:checked)):hover { color: var(--text-1); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
/* Key/value editor — metadata rows. */
.kv-editor { display: grid; gap: 8px; }
.kv-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) auto; gap: 8px; align-items: center; }
.kv-editor .btn-icon { color: var(--text-3); }
.kv-editor .btn-icon:hover { color: var(--color-danger); }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.form-actions.start { justify-content: flex-start; }

/* — Badges, dots, chips — */
.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px;
  border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap;
  border: 1px solid transparent;
}
.badge-ok { background: var(--accent-soft); color: var(--color-ok); }
.badge-alert { background: var(--color-alert-soft); color: var(--color-alert); }
.badge-danger { background: var(--color-danger-soft); color: var(--color-danger); }
.badge-info { background: var(--color-info-soft); color: var(--color-info); }
.badge-neutral { background: color-mix(in srgb, #e9edec 8%, transparent); color: var(--text-2); }
.badge-outline { border-color: var(--border-strong); color: var(--text-2); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot.pulse { animation: pulse 1.4s ease-in-out infinite; }
.chip {
  display: inline-flex; align-items: center; max-width: 100%; height: 20px; padding: 0 7px;
  border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11.5px; line-height: 1;
  background: color-mix(in srgb, #e9edec 6%, transparent); color: var(--text-2);
  border: 1px solid var(--border);
}
.chip b { font-weight: 400; color: var(--text-3); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--color-alert); color: #1d1400; }

/* — Notices — */
.notice {
  display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px;
  border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-1);
  font-size: 13.5px; color: var(--text-2);
}
.notice svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.notice strong { color: var(--text-1); font-weight: 500; }
.notice-info { border-color: color-mix(in srgb, var(--color-info) 35%, transparent); color: var(--text-1); }
.notice-info svg { color: var(--color-info); }
.notice-ok { border-color: color-mix(in srgb, var(--color-ok) 35%, transparent); color: var(--text-1); }
.notice-ok svg { color: var(--color-ok); }
.notice-alert { border-color: color-mix(in srgb, var(--color-alert) 45%, transparent); background: var(--color-alert-soft); color: var(--text-1); }
.notice-alert svg { color: var(--color-alert); }
.notice-danger { border-color: color-mix(in srgb, var(--color-danger) 45%, transparent); background: var(--color-danger-soft); color: var(--text-1); }
.notice-danger svg { color: var(--color-danger); }
.notice .btn { margin-left: auto; flex: none; }

/* — Cards — */
.card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.card-title { font-family: var(--font-body); font-size: 14.5px; font-weight: 500; color: var(--text-1); }
.card-title .muted { font-weight: 400; margin-left: 6px; }
.card-body { padding: 18px; }
.card-body + .card-body, .card-section + .card-section { border-top: 1px solid var(--border); }
.card-section { padding: 16px 18px; }
.card-footer { padding: 12px 18px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.card-flat { background: transparent; }
.card-alert { border-color: color-mix(in srgb, var(--color-alert) 50%, transparent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-alert) 18%, transparent), inset 0 0 120px color-mix(in srgb, var(--color-alert) 4%, transparent); }
.card-alert .card-header { border-bottom-color: color-mix(in srgb, var(--color-alert) 30%, transparent); }
.card-alert .card-section + .card-section { border-top-color: color-mix(in srgb, var(--color-alert) 25%, transparent); }
.card-danger { border-color: color-mix(in srgb, var(--color-danger) 40%, transparent); }
.card-ok { border-color: color-mix(in srgb, var(--color-ok) 45%, transparent); }

/* — Key / value lists — */
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 9px 20px; margin: 0; font-size: 13.5px; }
.kv dt { color: var(--text-3); white-space: nowrap; }
.kv dd { margin: 0; color: var(--text-1); min-width: 0; overflow-wrap: anywhere; }
.kv dd.mono { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.kv-stack { grid-template-columns: 1fr; gap: 12px; }
.kv-stack dt { font-size: 12px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 24px; }
.fact-label { font-size: 12px; color: var(--text-3); margin-bottom: 3px; }
.fact-value { font-size: 14px; color: var(--text-1); }
.fact-value.mono { font-family: var(--mono); font-size: 13px; }
.fact-sub { font-size: 12px; color: var(--text-3); margin-top: 2px; }

/* — Tables — */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  text-align: left; font-size: 12px; font-weight: 500; color: var(--text-3);
  padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.table td { padding: 12px 14px; border-bottom: 1px solid var(--border); vertical-align: top; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, #e9edec 2.5%, transparent); }
.table tr.is-tripped { background: color-mix(in srgb, var(--color-alert) 5%, transparent); }
.table tr.is-tripped:hover { background: color-mix(in srgb, var(--color-alert) 8%, transparent); }
.table tr.is-retired td { color: var(--text-3); }
/* A row that is one target (`data-href`, feint.js): the pointer says so from
   anywhere on it, and a card section tints on hover like a table row does. */
[data-href] { cursor: pointer; }
.card-section[data-href]:hover { background: color-mix(in srgb, #e9edec 2.5%, transparent); }
.card-alert .card-section[data-href]:hover { background: color-mix(in srgb, var(--color-alert) 8%, transparent); }
.table tr.is-retired a { color: var(--text-2); }
.table td.actions, .table th.actions { text-align: right; width: 1%; white-space: nowrap; }
.table .mono { font-family: var(--mono); font-size: 12.5px; }
.table .sub { display: block; margin-top: 3px; font-size: 12px; color: var(--text-3); }
.table a.primary { color: var(--text-1); font-weight: 500; }
.table a.primary:hover { color: var(--color-accent); }
.table .group-row td { padding: 8px 14px; font-size: 12px; color: var(--text-3); background: color-mix(in srgb, #e9edec 2%, transparent); }
.card > .table-wrap .table th:first-child, .card > .table-wrap .table td:first-child { padding-left: 18px; }
.card > .table-wrap .table th:last-child, .card > .table-wrap .table td:last-child { padding-right: 18px; }

/* — Decoy search and pager — */
/* One search field over the decoy list; the icon sits inside the input. */
.search-field { position: relative; }
.search-field .search-icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); display: inline-flex; color: var(--text-3); pointer-events: none; }
.search-field .search-icon svg { width: 16px; height: 16px; }
.search-field .input { padding-left: 36px; }
.search-field .input.htmx-request, .search-field.htmx-request .input { border-color: var(--border-strong); }
#decoy-results.htmx-swapping, #decoy-results.htmx-request { opacity: .6; transition: opacity .12s ease; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pager .btn.is-current { color: var(--color-accent); background: var(--surface-3); }
.pager .btn[disabled] { opacity: .4; cursor: default; }
.table td.client-cell { color: var(--text-2); white-space: nowrap; }
.client-tag { font-size: 12px; color: var(--text-2); padding: 1px 8px; border: 1px solid var(--border); border-radius: 999px; }

/* — Tabs / filters — */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); }
.tab {
  padding: 9px 12px; margin-bottom: -1px; font-size: 13.5px; color: var(--text-2);
  border-bottom: 2px solid transparent; background: none; border-top: 0; border-left: 0; border-right: 0; cursor: pointer;
}
.tab:hover { color: var(--text-1); }
.tab[aria-selected="true"] { color: var(--text-1); border-bottom-color: var(--color-accent); }
.tab .n { margin-left: 6px; font-size: 11.5px; color: var(--text-3); }

/* — Row menu (a <details>, no JavaScript needed to open) — */
.menu { position: relative; display: inline-block; }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 160px;
  padding: 4px; background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
}
.menu-item {
  display: flex; width: 100%; align-items: center; gap: 8px; padding: 7px 10px;
  border: 0; border-radius: var(--radius-sm); background: none; text-align: left;
  font-size: 13px; color: var(--text-1); cursor: pointer; text-decoration: none;
}
.menu-item:hover { background: color-mix(in srgb, #e9edec 7%, transparent); }
.menu-item.danger { color: var(--color-danger); }
.menu-item.danger:hover { background: var(--color-danger-soft); }
.menu-sep { height: 1px; margin: 4px 0; background: var(--border); }
/* A row menu, placed against the viewport by feint.js (top/left set there). */
.menu-list.is-floating { position: fixed; right: auto; }

/* — Dialogs — */
.dialog {
  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; margin: auto;
  background: var(--surface-2); color: var(--text-1);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.dialog::backdrop { background: rgb(0 0 0 / .6); backdrop-filter: blur(2px); }
.dialog-form { display: contents; }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px 0; }
.dialog-title { font-family: var(--font-body); font-size: 16px; font-weight: 500; }
.dialog-body { display: grid; gap: 16px; padding: 16px 20px; overflow: auto; }
.dialog-body p { color: var(--text-2); font-size: 13.5px; line-height: 1.55; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); }
.dialog-wide { width: min(640px, calc(100vw - 32px)); }

/* — Timeline — */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.tl-item { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 12px; padding: 0 0 20px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: -2px; width: 1px; background: var(--border); }
.tl-item:last-child::before { display: none; }
.tl-dot { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-1); border: 1px solid var(--border-strong); margin-top: 1px; }
.tl-dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.tl-item.is-alert .tl-dot { border-color: var(--color-alert); }
.tl-item.is-alert .tl-dot::after { background: var(--color-alert); }
.tl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tl-time { font-family: var(--mono); font-size: 12.5px; color: var(--text-2); }
.tl-meta { margin-top: 4px; font-size: 12.5px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.tl-meta .mono { color: var(--text-2); }

/* — Calls (`_calls.html`): a use logged call by call, full width. A window
     per use: its facts and actions, then every call and the same calls by
     address, user agent and action as `.tabs` over one scrolling table.
     More than one use folds each to a summary line, the latest open. — */
.call-window + .call-window { border-top: 1px solid var(--border); }
.call-window-summary {
  display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; padding: 12px 18px;
  list-style: none; cursor: pointer; font-size: 13px; color: var(--text-1);
}
.call-window-summary::-webkit-details-marker { display: none; }
.call-window-summary::before {
  content: ""; width: 6px; height: 6px; flex: none; margin: 0 2px;
  border-right: 1.5px solid var(--text-3); border-bottom: 1.5px solid var(--text-3); transform: rotate(-45deg);
}
.call-window[open] > .call-window-summary::before { transform: rotate(45deg); }
.call-window-summary:hover { background: color-mix(in srgb, #e9edec 2.5%, transparent); }
.call-window-head { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 14px 18px; }
details.call-window > .call-window-head { padding-top: 2px; }
.window-facts { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 0; }
.window-facts dt { font-size: 12px; color: var(--text-3); margin-bottom: 2px; }
.window-facts dd { margin: 0; font-size: 13.5px; color: var(--text-1); }
.window-facts dd.mono { font-family: var(--mono); font-size: 13px; }
/* One line of tabs at any width; on a phone the row scrolls sideways. The
   rule under them is a shadow, so the scrolling row cannot clip the
   selected tab's underline where it overlaps a border. */
.call-views .tabs { padding: 0 18px; overflow-x: auto; scrollbar-width: none; border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border); }
.call-views .tab { flex: none; margin-bottom: 0; white-space: nowrap; }
/* A long burst scrolls inside its card, header pinned, so the decoy's
   activity and details stay a short scroll away. */
.table-scroll { max-height: 460px; overflow: auto; }
.table-scroll thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-1); border-bottom: 0; box-shadow: inset 0 -1px 0 var(--border); }
.table-compact th { padding: 8px 14px; }
.table-compact td { padding: 7px 14px; }
.calls-table td { white-space: nowrap; }
.calls-table td.wrap { white-space: normal; overflow-wrap: break-word; }
.calls-table td.ua { min-width: 340px; }
@media (max-width: 900px) { .calls-table td.ua { min-width: 240px; } }
.calls-table th.wide { width: 100%; }
.calls-table .qty { text-align: right; font-variant-numeric: tabular-nums; }
.calls-table .line { display: block; }
.calls-table th:first-child, .calls-table td:first-child { padding-left: 18px; }
.calls-table th:last-child, .calls-table td:last-child { padding-right: 18px; }
.call-ok { color: var(--text-1); }
.call-denied { color: var(--text-3); }

/* — Secret reveal (shown exactly once) — */
.secret { display: flex; gap: 8px; align-items: stretch; flex-wrap: wrap; }
.secret-value {
  flex: 1 1 320px; min-width: 0; padding: 10px 12px; font-family: var(--mono); font-size: 13px;
  color: var(--color-accent); background: var(--color-bg); border: 1px dashed var(--border-strong);
  border-radius: var(--radius); word-break: break-all; user-select: all;
}
/* A credential of more than one value (an AWS key pair): the values side by
   side where they fit, each with its own copy, then the pair as the file it
   is placed in (`.code` tabs, as in the docs). An identifier -- the access
   key id -- is shown again on the decoy's page, so no dashes and no glow. */
.secret-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 12px 20px; }
.secret-fields .btn { flex: none; }
.secret-value.is-plain { color: var(--text-1); border-style: solid; }
/* An identifier shown again on the decoy page (the access key id): plain
   text, since a box reads as editable, with its Copy button beside it. */
.ident-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ident { font-family: var(--mono); font-size: 13.5px; color: var(--text-1); word-break: break-all; user-select: all; }
.ident-row .btn { flex: none; }
.secret-file { margin: 0; background: var(--color-bg); }
.secret-file pre { color: var(--text-1); }
/* An identifier's copy button in a `.kv` row: as tall as the line, no box. */
.btn.copy-inline { height: 22px; width: 22px; padding: 0; margin-left: 4px; vertical-align: -6px; color: var(--text-3); }
.btn.copy-inline svg { width: 13px; height: 13px; }
.btn.copy-inline:hover { color: var(--text-1); }

/* — Empty state — */
.empty { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 48px 24px; }
.empty h3 { font-family: var(--font-body); font-size: 16px; font-weight: 500; }
.empty p { max-width: 46ch; color: var(--text-3); font-size: 13.5px; line-height: 1.55; }
.empty .btn { margin-top: 8px; }

/* — Incident banner — */
.incident { border: 1px solid color-mix(in srgb, var(--color-alert) 55%, transparent); background: color-mix(in srgb, var(--color-alert) 6%, var(--surface-1)); border-radius: var(--radius-lg); }
.incident-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 20px; border-bottom: 1px solid color-mix(in srgb, var(--color-alert) 30%, transparent); }
.incident-title { display: flex; align-items: center; gap: 10px; font-family: var(--font-heading); font-size: 20px; color: var(--text-1); }
.incident-title .dot { color: var(--color-alert); width: 9px; height: 9px; }
.incident-body { padding: 16px 20px; display: grid; gap: 14px; }
.incident-body .fact-value.alert { color: var(--color-alert); }

/* — Console shell — */
/* `--sidebar-user-w` is the width the person dragged to, set on `.app` from
   their cookie (context.py) and by feint.js while they drag: a value, not a
   style, which is why it is the one inline style attribute in the console. */
.app {
  display: grid; min-height: 100vh;
  grid-template-columns: clamp(var(--sidebar-min-w), var(--sidebar-user-w, var(--sidebar-w)), var(--sidebar-max-w)) minmax(0, 1fr);
}
/* Above the page, so the rail's tooltips and client menu can overhang it. */
.sidebar {
  position: sticky; top: 0; z-index: 20; height: 100vh; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 12px; background: var(--sidebar-bg); border-right: 1px solid var(--border);
}
/* The sidebar's edge: a separator to drag, or to focus and step with the
   arrow keys. Wider than the accent line it shows on hover, which waits a
   moment so the pointer passing over to the page does not flash it. */
.sidebar-resize { position: absolute; top: 0; bottom: 0; right: -5px; width: 9px; cursor: col-resize; touch-action: none; }
.sidebar-resize::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 2px;
  background: var(--color-accent); opacity: 0; transition: opacity .12s ease;
}
.sidebar-resize:hover::after { opacity: 1; transition-delay: .15s; }
.sidebar-resize:focus-visible { outline: none; }
.sidebar-resize:focus-visible::after, .app.is-resizing .sidebar-resize::after { opacity: 1; transition-delay: 0s; }
.app.is-resizing, .app.is-resizing * { cursor: col-resize; user-select: none; }
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; color: var(--text-1); }
.brand-mark { width: 26px; height: 26px; display: grid; place-items: center; color: var(--color-accent); }
.brand-mark svg { width: 26px; height: 26px; display: block; }
.brand-name { font-family: var(--font-heading); font-weight: 600; font-size: 17px; letter-spacing: .16em; text-transform: uppercase; }
.sidebar-org { display: grid; gap: 4px; padding: 10px 10px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--border); }
.sidebar-org .org-name { font-weight: 500; font-size: 14px; color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-org .org-seat { font-size: 12px; color: var(--text-3); }
/* The organization as the rail shows it: its initial. */
.org-initial {
  display: none; width: 30px; height: 30px; place-items: center; border-radius: var(--radius);
  background: var(--surface-3); border: 1px solid var(--border-strong);
  font-size: 13px; font-weight: 600; color: var(--text-1);
}
/* A partner's organization block is the client switcher: the same block, as
   the summary of a `.menu`, opening a full-width list under it. */
.client-switcher { display: block; margin-bottom: 6px; }
.client-switcher > summary.sidebar-org { margin-bottom: 0; cursor: pointer; border-radius: var(--radius); }
.client-switcher > summary.sidebar-org:hover, .client-switcher[open] > summary.sidebar-org { background: color-mix(in srgb, #e9edec 5%, transparent); }
.client-switcher .org-kicker { font-size: 11.5px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-switcher .org-kicker::after { content: " ▾"; }
.client-switcher .menu-list { left: 0; right: 0; max-height: 60vh; overflow-y: auto; }
.client-switcher .menu-item[aria-current="true"] { color: var(--color-accent); }
.sidebar-nav { display: grid; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 10px;
  border-radius: var(--radius); color: var(--text-2); font-size: 13.5px; font-weight: 500;
  transition: background-color .12s ease, color .12s ease;
}
/* Sign out is a form so it posts; the button reads exactly like the links. */
button.nav-item { width: 100%; background: none; border: 0; font: inherit; text-align: left; cursor: pointer; }
.nav-item svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.nav-item:hover { background: color-mix(in srgb, #e9edec 5%, transparent); color: var(--text-1); }
.nav-item[aria-current="page"] { background: color-mix(in srgb, #e9edec 7%, transparent); color: var(--text-1); }
.nav-item[aria-current="page"] svg { color: var(--color-accent); opacity: 1; }
.nav-item .count { margin-left: auto; }
.nav-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); display: grid; gap: 2px; }
.sidebar-user { padding: 6px 10px 8px; font-size: 12px; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar { display: none; }
.main { min-width: 0; }
.page { max-width: var(--page-w); margin: 0 auto; padding: 32px 32px 64px; display: grid; gap: 20px; align-content: start; }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-title { font-size: 28px; }
.page-desc { margin-top: 4px; font-size: 13.5px; color: var(--text-3); max-width: 64ch; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--text-1); }
.crumbs .sep { color: var(--ink-4); }
.meta-line { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13px; color: var(--text-3); }
.meta-line .mono { color: var(--text-2); }
.status-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.status-line .mono { color: var(--text-1); font-size: 13px; }

/* The icon rail: the sidebar dragged past its minimum. Icons centred, the
   words kept for screen readers, each nav label shown again as a tooltip on
   hover or focus, the attention count pinned to its icon. A narrow screen
   has the full drawer instead, whatever the desktop was left at. */
@media (min-width: 901px) {
  .app.sidebar-collapsed { grid-template-columns: var(--sidebar-rail-w) minmax(0, 1fr); }
  .sidebar-collapsed .sidebar .brand { justify-content: center; padding-inline: 0; }
  .sidebar-collapsed .sidebar .brand-name,
  .sidebar-collapsed .sidebar-org .org-name {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .sidebar-collapsed .sidebar-org { justify-items: center; padding: 2px 0 12px; }
  .sidebar-collapsed .sidebar-org .org-kicker,
  .sidebar-collapsed .sidebar-org .org-seat,
  .sidebar-collapsed .sidebar-user { display: none; }
  .sidebar-collapsed .org-initial { display: grid; }
  .sidebar-collapsed .client-switcher .menu-list { left: calc(100% + 18px); right: auto; top: 0; width: 240px; }
  .sidebar-collapsed .nav-item { position: relative; justify-content: center; padding: 0; }
  .sidebar-collapsed .nav-label {
    position: absolute; left: calc(100% + 18px); top: 50%; transform: translateY(-50%);
    padding: 5px 9px; border-radius: var(--radius-sm); overflow: visible;
    background: var(--surface-3); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
    color: var(--text-1); font-size: 12.5px; line-height: 1.3;
    opacity: 0; pointer-events: none;
  }
  /* The fade is on the way in only. On the hidden state it would also run as
     the sidebar snaps to the rail, and every label would fade out beside it. */
  .sidebar-collapsed .nav-item:hover .nav-label,
  .sidebar-collapsed .nav-item:focus-visible .nav-label { opacity: 1; transition: opacity .1s ease; }
  .sidebar-collapsed.is-resizing .nav-label { opacity: 0; }
  .sidebar-collapsed .nav-item .count {
    position: absolute; top: 2px; left: calc(50% + 2px); margin: 0;
    min-width: 15px; height: 15px; padding: 0 4px; font-size: 10px;
  }
}

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar-resize { display: none; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 40; transform: translateX(-100%); transition: transform .18s ease; box-shadow: none; }
  .sidebar.is-open { transform: none; box-shadow: var(--shadow-lg); }
  .topbar { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-bottom: 1px solid var(--border); background: var(--sidebar-bg); position: sticky; top: 0; z-index: 30; }
  .topbar .brand { padding: 0; }
  .page { padding: 20px 16px 48px; }
  .page-title { font-size: 24px; }
  .kv { grid-template-columns: 1fr; gap: 4px 0; }
  .kv dt { margin-top: 8px; }
  .kv dt:first-child { margin-top: 0; }
  .kv-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .dialog-actions { flex-wrap: wrap; }
}
.scrim { position: fixed; inset: 0; z-index: 35; background: rgb(0 0 0 / .5); }

/* ── Landing page ──────────────────────────────────────────────────────── */
.site { --site-w: 1200px; font-size: 15px; }
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.wrap { max-width: var(--site-w); margin: 0 auto; padding: 0 24px; }
.site-nav { display: flex; align-items: center; gap: 26px; }
.site-nav a:not(.btn) { font-size: 14px; color: var(--text-2); }
.site-nav a:not(.btn):hover, .site-nav a[aria-current="true"] { color: var(--text-1); }
.site-nav .btn { margin-left: 4px; }
.site .btn { height: 38px; padding: 0 18px; font-family: var(--font-heading); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; border-radius: var(--radius-sm); }
.site .btn-lg { height: 46px; padding: 0 24px; font-size: 15px; }
.site .btn-sm { height: 32px; padding: 0 14px; font-size: 12.5px; }
.site .input { border-radius: var(--radius-sm); min-height: 42px; padding: 9px 13px; font-size: 15px; background: transparent; }
.section { padding: 96px 0; }
.section + .section, .band + .section, .section + .band { border-top: 1px solid var(--border); }
.band { padding: 88px 0; background: #070908; }
.section-head { display: grid; gap: 14px; margin-bottom: 44px; max-width: 64ch; }
.site h2 { font-size: clamp(32px, 3.6vw, 44px); line-height: 1.08; }
.lede { font-size: 17px; line-height: 1.65; color: var(--text-2); }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 52px; align-items: start; }
.hero { padding: 72px 0 88px; }
.hero .two-col { align-items: center; gap: 56px; }
.hero h1 { font-size: clamp(44px, 6vw, 76px); line-height: .98; margin-bottom: 22px; }
.site h1 em, .site h2 em { font-style: normal; color: var(--color-accent); }
.hero .lede { font-size: 18px; max-width: 46ch; margin-bottom: 32px; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 5px 11px; margin-bottom: 26px; border: 1px solid var(--border-strong); border-radius: 999px; }
.pill .dot { width: 6px; height: 6px; color: var(--color-accent); }
.pill span:last-child { font-family: var(--font-heading); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.panel { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); }
.panel-pad { padding: 26px 24px; }
.panel h3 { font-size: 22px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.panel p { font-size: 15px; line-height: 1.65; color: var(--text-2); }
.panel.accent-top { border-top: 2px solid var(--color-accent); }
.num { font-family: var(--mono); font-size: 12px; color: var(--color-accent); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.steps .num { display: block; margin-bottom: 18px; }
/* Cells on a grid whose 1px gaps show the border colour through, so the
   dividers stay single-width at every column count. Keep the item count
   divisible by 3 and 2, or the last row leaves a bare patch. */
.list-panel { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.list-panel > div { display: grid; gap: 10px; align-content: start; padding: 22px 22px 24px; background: var(--color-bg); }
.list-panel .name { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .1em; font-size: 16px; }
.list-panel .desc { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.reasons { display: grid; gap: 12px; }
.reasons > div { display: flex; gap: 14px; align-items: flex-start; }
.reasons p { font-size: 15px; line-height: 1.6; color: var(--text-2); }
.case { display: grid; gap: 8px; padding: 20px 22px; color: var(--text-1); }
.case:hover { border-color: var(--color-accent); color: var(--text-1); }
.case .case-head { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.case .case-name { font-family: var(--font-heading); font-size: 18px; letter-spacing: .02em; }
.case .case-src { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.case p { font-size: 14px; line-height: 1.6; color: var(--text-2); }
.cases { display: grid; gap: 14px; }
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.values > div { display: grid; gap: 12px; align-content: start; border-top: 2px solid var(--color-accent); padding-top: 20px; }
.values h3 { font-size: 22px; text-transform: uppercase; letter-spacing: .06em; }
.values p { font-size: 15px; line-height: 1.65; color: var(--text-2); }
.decoy { overflow: hidden; }
.decoy-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.decoy-head .mono { font-size: 11px; color: var(--text-3); letter-spacing: .06em; }
.decoy-head .armed { margin-left: auto; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .14em; font-size: 10px; padding: 3px 8px; border: 1px solid var(--color-accent); color: var(--color-accent); }
.decoy-file { padding: 22px 16px 18px; }
.decoy-file .name { font-family: var(--mono); font-size: 12px; color: var(--text-3); margin-bottom: 8px; }
.decoy-file pre { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.9; color: var(--text-2); white-space: pre-wrap; word-break: break-all; border-left: 2px solid var(--color-accent); padding-left: 14px; }
.decoy-file pre .k { color: var(--color-accent); }
.decoy-file pre .c { color: var(--text-3); }
.decoy-alert { padding: 16px; border-top: 1px solid var(--border); display: grid; gap: 12px; }
.decoy-alert .ev { display: flex; gap: 12px; align-items: flex-start; }
.decoy-alert .ev .dot { color: var(--color-accent); margin-top: 6px; }
.decoy-alert .ev-title { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .12em; font-size: 13px; }
.decoy-alert .ev-meta { font-family: var(--mono); font-size: 12px; color: var(--text-2); line-height: 1.7; margin-top: 4px; }
.pilot-form { display: grid; gap: 18px; }
.pilot-form label { display: grid; gap: 7px; }
.pilot-form label > span { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--text-2); }
.pilot-form .fine { font-size: 12px; color: var(--text-3); line-height: 1.6; }
.site-footer { border-top: 1px solid var(--border); padding: 56px 0 40px; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 32px; }
.site-footer h4 { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); margin-bottom: 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer li a { font-size: 14px; color: var(--text-2); }
.site-footer li a:hover { color: var(--text-1); }
.site-footer .tag-line { font-size: 13px; color: var(--text-3); margin-top: 8px; max-width: 32ch; line-height: 1.55; }
.site-footer .legal { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--text-3); }
.error-page { padding: 96px 0 120px; display: grid; gap: 14px; max-width: 56ch; }
.error-page h1 { font-size: clamp(34px, 4.4vw, 54px); }
.error-page p { font-size: 17px; line-height: 1.6; color: var(--text-2); }
@media (max-width: 900px) {
  .section { padding: 64px 0; }
  .band { padding: 60px 0; }
  .hero { padding: 48px 0 64px; }
  .site-nav a:not(.btn) { display: none; }
  .site-footer .wrap { grid-template-columns: 1fr 1fr; }
  .list-panel { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .list-panel { grid-template-columns: 1fr; }
}

/* Pricing page — four tier panels, then the comparison table. A panel is a
   column so its button sits on the same baseline as its neighbours'. */
.pricing-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px 52px; align-items: end; margin-bottom: 40px; }
.pricing-head h1 { margin-bottom: 0; }
.pricing-head .lede { max-width: 52ch; margin-bottom: 6px; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 8px; }
.tier { display: flex; flex-direction: column; gap: 14px; }
.tier h3 { margin-bottom: 0; }
.tier-price { display: flex; align-items: baseline; gap: 8px; }
.tier-price strong { font-family: var(--font-heading); font-size: 34px; font-weight: 600; line-height: 1; }
.tier-price span { font-size: 13px; color: var(--text-3); }
.tier .pitch { color: var(--text-1); }
.tier ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.tier li { position: relative; padding-left: 16px; }
.tier li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 1px; background: var(--color-accent); }
.stack > .pill { justify-self: start; margin-bottom: 0; }
.tier-addon { margin-top: auto; font-size: 13px; color: var(--text-3); }
.tier-addon:hover { color: var(--color-accent); }
.tier .cta { align-self: flex-start; margin-top: auto; }
.tier-addon + .cta { margin-top: 0; }
.tier .fine { font-size: 12px; color: var(--text-3); line-height: 1.6; }
.pricing-table .table { table-layout: fixed; }
.pricing-table .table th:first-child { width: 22%; }
.pricing-table .table thead th { font-family: var(--font-heading); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-1); }
.pricing-table .table tbody th { text-align: left; padding: 12px 14px; font-size: 13.5px; font-weight: 500; color: var(--text-2); border-bottom: 1px solid var(--border); white-space: normal; vertical-align: top; }
.pricing-table .table tbody tr:last-child th { border-bottom: 0; }
.pricing-table .no { color: var(--text-3); }

/* Blueprint frame — the brand motif. Hero decoy, pilot form, the diagram. */
.blueprint { position: relative; border: 1px solid var(--border-strong); border-radius: 0; }
.blueprint.accent { border-color: var(--color-accent); }
.blueprint > .corner { position: absolute; width: 11px; height: 11px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.blueprint > .corner::before, .blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* — small additions — */
.seg-opt[aria-selected="true"] { background: var(--surface-3); color: var(--text-1); box-shadow: 0 1px 2px rgb(0 0 0 / .3); }
button.seg-opt { border: 0; background: none; font: inherit; }
.input-narrow { width: 120px; flex: none; }
.card-header .seg { margin: -4px 0; }
.row-tight { gap: 4px; }
.cols-2-wide { grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr); }
@media (max-width: 900px) { .cols-2-wide { grid-template-columns: 1fr; } }
.text-danger { color: var(--color-danger); }

/* — layout safety: grid/flex children must be allowed to shrink, or one long
     unbreakable string (an email in mono) widens the whole page on a phone — */
.page > *, .stack > *, .stack-sm > *, .cols-2 > *, .cols-2-wide > *, .card-body > *, .card-section > * { min-width: 0; }
.card, .incident, .table-wrap { max-width: 100%; }
.meta-line, .status-line, .tl-meta, .fact-value, .secret-value { overflow-wrap: anywhere; }
.row-between > * { min-width: 0; }

/* — utilities that replaced the last inline styles — */
.title-link { font-size: 15px; font-weight: 500; color: var(--text-1); }
.title-link:hover { color: var(--color-accent); }
.mt-1 { margin-top: 6px; }
.mt-2 { margin-top: 8px; }
.mb-3 { margin-bottom: 16px; }
.mb-4 { margin-bottom: 18px; }
.max-form { max-width: 520px; }
.max-prose { max-width: 56ch; }
.w-seat { width: 130px; }
.text-md { font-size: 14px; }
.actions-row { justify-content: flex-end; gap: 4px; }
.option-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 8px 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); }
.cols-2.tight { gap: 12px; }
.error-page.in-console { padding: 32px 0; }
.text-alert { color: var(--color-alert); }
@media (max-width: 600px) {
  .card-header, .incident-head { flex-wrap: wrap; }
  .seg { flex-wrap: wrap; }
  .facts { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  /* Keep columns readable and let the card scroll sideways instead. */
  .table { min-width: 560px; }
}

/* ── Docs ──────────────────────────────────────────────────────────────── */
/* The public API docs at /docs, inside the site chrome. `.docs` is a contents
   column beside the page; under 1000px the column is hidden and `.docs-toc`,
   a <details> holding the same list, appears above the page. Guides are one
   `.docs-prose` column. Code blocks come from feint_web.docs.markdown: `.code`
   with an optional `.code-head` (a label, or the tabs of a `[data-tabs]`
   group) and a `.code-body` holding the <pre> and its copy button. Syntax
   colours are Pygments' short class names, mapped to the tokens here. */
.docs { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; align-items: start; padding-top: 40px; padding-bottom: 104px; }
.docs > * { min-width: 0; }
.docs-nav { position: sticky; top: 88px; max-height: calc(100vh - 112px); overflow-y: auto; display: grid; gap: 22px; align-content: start; padding-right: 8px; }
.docs-toc { display: none; }
.docs-group .eyebrow { padding: 0 10px; margin-bottom: 8px; }
.docs-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.docs-links a { display: block; padding: 6px 10px; border-radius: var(--radius); font-size: 14px; color: var(--text-2); }
.docs-links a:hover { color: var(--text-1); background: color-mix(in srgb, #e9edec 5%, transparent); }
.docs-links a[aria-current="page"] { color: var(--text-1); background: color-mix(in srgb, #e9edec 7%, transparent); box-shadow: inset 2px 0 0 var(--color-accent); }

.docs-prose { max-width: 720px; font-size: 15px; line-height: 1.65; color: var(--text-2); }
/* The privacy policy and the terms: the docs' prose column on its own, no contents rail. */
.legal-page { padding: 56px 0 96px; }
.legal-page .pill { margin-bottom: 18px; }
.legal-page h1 { margin: 0 0 12px; }
.legal-page .lede { margin: 0 0 36px; }
.legal-page table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 14px; }
.legal-page th, .legal-page td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.site-footer .legal a { color: inherit; }
.docs-head { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 36px; }
/* The text shrinks (its summary wraps) before the actions leave the title row. */
.docs-head-text { flex: 1 1 320px; min-width: 0; display: grid; gap: 12px; }
.docs-head h1 { font-size: 36px; color: var(--text-1); }
/* "Copy as Markdown": for pasting a page into a model. Quiet, sentence case,
   unlike the landing page's uppercase buttons. Button and link sit in one
   row, so the group reads the same at the right or wrapped under the title. */
.docs-actions { display: flex; align-items: center; gap: 14px; flex: none; padding-top: 22px; }
.docs .docs-actions .btn { height: 32px; padding: 0 12px; border-radius: var(--radius); font: 500 13px/1 var(--font-body); letter-spacing: 0; text-transform: none; }
.docs-md-link { font-size: 12.5px; color: var(--text-3); }
.docs-md-link:hover { color: var(--text-1); }
.docs-summary { font-size: 17px; line-height: 1.6; }
.docs-prose h2 { font-size: 24px; color: var(--text-1); margin: 48px 0 14px; }
.docs-prose h3 { font-family: var(--font-body); font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--text-1); margin: 32px 0 10px; }
.docs-head + h2 { margin-top: 0; }
.docs-prose p, .docs-prose ul, .docs-prose ol { margin: 0 0 16px; }
.docs-prose ul, .docs-prose ol { padding-left: 22px; }
.docs-prose li { margin-bottom: 6px; }
.docs-prose li > p { margin-bottom: 6px; }
.docs-prose strong { color: var(--text-1); font-weight: 500; }
.docs-prose a:hover { text-decoration: underline; }
.docs-prose code { font-size: .88em; color: var(--text-1); background: color-mix(in srgb, #e9edec 7%, transparent); padding: 1px 4px; border-radius: var(--radius-sm); }
.docs-prose a code { color: var(--color-accent); }
.docs-prose pre code { font-size: inherit; color: inherit; background: none; padding: 0; border-radius: 0; }
.docs-prose hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; }
.docs-prose .table-wrap { margin: 0 0 24px; border: 1px solid var(--border); border-radius: var(--radius); }
.docs-prose .table { font-size: 13.5px; color: var(--text-2); }
.docs-prose .table th { white-space: nowrap; }
.docs-prose .table td:first-child code { white-space: nowrap; }
.docs-prose .notice { margin: 0 0 24px; font-size: 14px; line-height: 1.55; }
.docs-prose .notice p { margin: 0; }
.docs-prose .notice p + p { margin-top: 8px; }

/* Section anchors, revealed on hover. */
.anchor { margin-left: 8px; font-family: var(--font-body); font-weight: 400; color: var(--text-3); opacity: 0; transition: opacity .12s ease; }
.docs-prose h2:hover > .anchor, .docs-prose h3:hover > .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--color-accent); text-decoration: none; }

/* Code blocks. */
.code { margin: 0 0 24px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.code-head { display: flex; align-items: center; gap: 2px; min-height: 38px; padding: 0 8px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, #e9edec 2.5%, transparent); }
.code-label, .code-tab { display: inline-flex; align-items: center; height: 38px; padding: 0 10px; font-family: var(--mono); font-size: 12px; color: var(--text-3); }
.code-tab { border: 0; background: none; cursor: pointer; }
.code-tab:hover { color: var(--text-1); }
.code-tab[aria-selected="true"] { color: var(--text-1); box-shadow: inset 0 -2px 0 var(--color-accent); }
.code-body { position: relative; }
/* Room on the right so the first line never runs under the copy button. */
.code pre { margin: 0; padding: 16px 76px 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--text-1); tab-size: 2; }
/* Panels stack only without the script; a rule keeps them apart. */
.code-panel + .code-panel { border-top: 1px solid var(--border); }
/* Stacked panels (no script) are separated; a panel shown by the tabs sits
   right under the head, which has the line already. */
.code-panel[hidden] + .code-panel { border-top: 0; }
.docs .code-copy { position: absolute; top: 8px; right: 8px; height: 26px; padding: 0 9px; border-radius: var(--radius-sm); font: 500 12px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--text-3); background: color-mix(in srgb, var(--surface-1) 88%, transparent); }
.docs .code-copy:hover { color: var(--text-1); background: var(--surface-3); }
.docs .code-copy.is-copied { color: var(--accent-ink); background: var(--color-ok); }
/* In a head bar the button sits at the right end, and the code needs no room for it. */
.code-head .code-copy { position: static; margin-left: auto; margin-right: 2px; }
.code-head + .code-body pre, .code-tabs pre { padding-right: 18px; }

/* Pygments tokens: comments recede, strings take the accent, keywords and
   JSON keys the info blue, numbers amber; names stay ink. */
.hl .c, .hl .c1, .hl .cm, .hl .ch, .hl .cp, .hl .cs, .hl .gp { color: var(--text-3); font-style: italic; }
.hl .k, .hl .kc, .hl .kd, .hl .kn, .hl .kp, .hl .kr, .hl .kt, .hl .ow, .hl .nt { color: var(--color-info); }
.hl .s, .hl .s1, .hl .s2, .hl .sa, .hl .sb, .hl .sc, .hl .dl, .hl .sd, .hl .se, .hl .sh, .hl .sr, .hl .ss, .hl .sx { color: var(--color-accent); }
.hl .si { color: var(--accent-hover); }
.hl .m, .hl .mf, .hl .mh, .hl .mi, .hl .mo, .hl .il { color: var(--color-alert); }
.hl .o, .hl .p { color: var(--text-2); }
.hl .nb, .hl .bp, .hl .nf, .hl .fm, .hl .nc, .hl .nn, .hl .na, .hl .nv, .hl .vg, .hl .vi, .hl .nx { color: var(--text-1); }
.hl .err { color: inherit; }

/* The reference. Wider than a guide; from 1200px each object and endpoint is
   prose beside its samples, the samples sticky while the prose scrolls. */
.docs.is-reference { --site-w: 1360px; }
.docs-sub { list-style: none; margin: 2px 0 6px; padding: 0; display: grid; gap: 1px; }
.docs-links .docs-sub a { padding: 5px 10px 5px 22px; font-size: 13px; }
.mini-method { display: inline-block; width: 46px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; color: var(--text-3); }
.mini-method.m-post { color: var(--color-accent); }
.mini-method.m-get { color: var(--color-info); }
.mini-method.m-delete { color: var(--color-danger); }
.ref-group { margin-top: 56px; }
.ref-group-title { font-size: 30px; color: var(--text-1); margin: 0 0 6px; }
.ref-group-desc { font-size: 15px; color: var(--text-2); margin: 0; }
.endpoint { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 48px; align-items: start; padding: 40px 0; border-bottom: 1px solid var(--border); }
.endpoint:last-child { border-bottom: 0; }
.endpoint > * { min-width: 0; }
.endpoint-title { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; font-family: var(--font-body); font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--text-1); }
.endpoint-title code { font-size: 15px; padding: 0; background: none; }
.method { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: var(--radius-sm); font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; }
.method-get { background: var(--color-info-soft); color: var(--color-info); }
.method-post { background: var(--accent-soft); color: var(--color-accent); }
.method-delete { background: var(--color-danger-soft); color: var(--color-danger); }
.method-patch, .method-put { background: var(--color-alert-soft); color: var(--color-alert); }
.endpoint-summary { font-size: 16px; color: var(--text-1); margin-bottom: 4px; }
.endpoint-scope { font-size: 13px; color: var(--text-3); }
.endpoint-prose h4 { margin: 26px 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: .02em; color: var(--text-1); }
.endpoint-prose h4 .status { margin-left: 6px; font-family: var(--mono); font-weight: 400; color: var(--text-2); }
.docs-prose .fields td:first-child { width: 40%; }
.docs-prose .fields td { padding: 11px 14px; }
.fields code { white-space: nowrap; }
.ftype { margin-top: 3px; font-size: 12px; color: var(--text-3); }
.req { margin-left: 8px; font-size: 11.5px; color: var(--color-alert); }
.endpoint-code { display: grid; gap: 14px; }
.endpoint-code .code { margin: 0; }
@media (min-width: 1200px) {
  .endpoint { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
  .endpoint-code { position: sticky; top: 88px; }
}

/* Previous / next. */
.docs-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--border); }
.docs-pager a { display: grid; gap: 4px; font-size: 15px; font-weight: 500; color: var(--text-1); }
.docs-pager a:hover { color: var(--color-accent); text-decoration: none; }
.docs-pager .next { margin-left: auto; text-align: right; }

@media (max-width: 1000px) {
  .docs { grid-template-columns: 1fr; gap: 24px; padding-top: 24px; padding-bottom: 72px; }
  .docs-nav { display: none; }
  .docs-toc { display: block; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-1); }
  .docs-toc > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 500; color: var(--text-1); cursor: pointer; }
  .docs-toc > summary::-webkit-details-marker { display: none; }
  .docs-toc > summary::after { content: "+"; font-family: var(--mono); color: var(--text-3); }
  .docs-toc[open] > summary::after { content: "−"; }
  .docs-toc .docs-group { padding: 4px 8px 12px; }
  .docs-head h1 { font-size: 30px; }
  .docs-prose h2 { font-size: 22px; margin-top: 40px; }
  .docs-actions { padding-top: 0; }
}
@media (max-width: 600px) {
  /* Two- and three-column prose tables read better wrapped than scrolled. */
  .docs-prose .table { min-width: 0; }
  .code pre { padding: 14px 64px 14px 14px; font-size: 12.5px; }
  /* A field's name and its description stack rather than share the width. */
  .docs-prose .fields td { display: block; width: auto; }
  .docs-prose .fields td:first-child { padding-bottom: 4px; border-bottom: 0; }
  .docs-prose .fields td:last-child { padding-top: 0; }
}