/* Kade — one stylesheet, no build step. Direction "Night harbour": dark-only, amber quay lights.
   Rules and rationale: DESIGN.md. Fonts (SIL OFL 1.1, fonts/): Bricolage Grotesque (display),
   IBM Plex Sans (text), IBM Plex Mono (code, IDs, tariffs). */
@font-face {
  font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/static/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/static/fonts/ibm-plex-sans-latin-wght.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/static/fonts/ibm-plex-mono-latin-600.woff2") format("woff2");
}

:root {
  /* Harbour at night: ink water, quay-light amber for actions, beacon teal for "ok". */
  --bg: #070d17; --surface: #0d1626; --surface-2: #132036; --surface-3: #182842; --field: #0a1220;
  --text: #eaf0f8; --text-muted: #8d9bb2;
  --border: #1c2a40; --border-hover: #2d4263; --border-strong: #5a7092;
  --accent: #ffb547; --accent-hover: #ffc56e; --on-accent: #1a1205; --accent-soft: #2b1f0b;
  --focus: #ffb547;
  --ok: #3fd0b6; --ok-soft: #0f2a2c; --ok-line: rgb(63 208 182 / 0.4);
  --danger: #ff7a6b; --on-danger: #2a0b07; --danger-soft: #2e1518; --danger-line: rgb(255 122 107 / 0.4);
  --warn: #f2d36b; --warn-soft: #2a2410; --warn-line: rgb(242 211 107 / 0.4);
  --amber-line: rgb(255 181 71 / 0.4);
  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 12px 32px rgb(0 0 0 / 0.35);
  --shadow-2: 0 30px 80px rgb(0 0 0 / 0.45);

  --display: "Bricolage Grotesque", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --font: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Type: 13 / 14 / 16 / 19 / 23 / 28 / 34 text; display 44 / 56 / 76 */
  --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.1875rem;
  --fs-xl: 1.4375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.125rem;
  --fs-d1: 2.75rem; --fs-d2: 3.5rem; --fs-d3: 4.75rem;
  /* Spacing: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --r-control: 10px; --r-panel: 18px;
  --maxw: 1200px; --measure: 68ch;
  --ease-enter: cubic-bezier(.22, 1, .36, 1);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-5); }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text); font: 400 var(--fs-md)/1.55 var(--font);
  min-height: 100dvh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
main { flex: 1; padding: var(--s-7) 0 var(--s-8); }
main:focus { outline: none; }
h1, h2, h3 { font-family: var(--display); line-height: 1.05; font-weight: 700; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: var(--fs-d1); font-weight: 750; letter-spacing: -0.035em; margin: 0 0 var(--s-4); }
h2 { font-size: var(--fs-xl); margin: var(--s-7) 0 var(--s-4); }
h3 { font-size: var(--fs-lg); margin: var(--s-5) 0 var(--s-2); }
p { margin: 0 0 var(--s-3); }
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--amber-line); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
@media (hover: hover) { a:hover { text-decoration-color: var(--accent); } }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
code, pre, .mono { font-family: var(--mono); font-size: 0.875em; }
code { overflow-wrap: anywhere; }
pre {
  background: var(--field); border: 1px solid var(--border); padding: var(--s-3) var(--s-4); border-radius: var(--r-control);
  overflow-x: auto; max-width: 100%; line-height: 1.55; margin: 0 0 var(--s-3); color: #cfd9ea;
}
pre.plain { background: transparent; border: 0; padding: 0; margin: 0; white-space: pre-wrap; }
td, .money { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--s-5) 0; }
::placeholder { color: var(--text-muted); opacity: 1; }
::selection { background: var(--accent); color: var(--on-accent); }

/* ---------------------------------------------------------------- utilities */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s-5); }
.muted { color: var(--text-muted); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.measure { max-width: var(--measure); }
.narrow { max-width: 520px; }
.medium { max-width: 720px; }
.ml-auto { margin-left: auto; }
.mt-0 { margin-top: 0; } .mt-2 { margin-top: var(--s-2); } .mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: var(--s-2); }
.mb-4 { margin-bottom: var(--s-4); }
.pre-wrap { white-space: pre-wrap; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.row { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.stack > * { margin-top: 0; margin-bottom: 0; }
.stack > * + * { margin-top: var(--s-3); }
.accent { color: var(--accent); }

/* Quay lights: a dotted amber horizon used as a section divider. */
.quay { height: 2px; margin: var(--s-7) 0; opacity: 0.55;
  background: radial-gradient(circle, var(--accent) 1.5px, transparent 2px) 0 0 / 28px 2px repeat-x; }

/* ---------------------------------------------------------------- shell */
.skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: 10; padding: var(--s-2) var(--s-3);
  background: var(--accent); color: var(--on-accent); border-radius: var(--r-control); font-weight: 600;
}
.skip:focus { top: var(--s-2); }
header.top { border-bottom: 1px solid var(--border); background: rgb(7 13 23 / 0.85); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; }
header.top .wrap { display: flex; align-items: center; gap: var(--s-4); min-height: 68px; }
.brand {
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  font: 700 1.375rem/1 var(--display); letter-spacing: -0.02em; min-height: 44px;
}
.brand svg { width: 30px; height: 30px; flex: none; }
.logo-bg { fill: var(--accent); } .logo-fg { fill: var(--on-accent); }
.logo-line { stroke: var(--on-accent); }
.nav { display: flex; align-items: center; gap: var(--s-2); margin-left: auto; }
.nav a:not(.button), .nav button.link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-2);
  color: var(--text-muted); text-decoration: none; border-radius: var(--r-control); justify-content: flex-start;
  font-weight: 500;
}
.nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
@media (hover: hover) { .nav a:not(.button):hover, .nav button.link:hover { color: var(--text); } }
.nav .button { margin-left: var(--s-2); min-height: 40px; }
.menu { display: none; margin-left: auto; position: relative; }
.menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--border-hover);
  border-radius: var(--r-control); font-weight: 600;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after {
  content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}
.menu[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.menu .nav {
  position: absolute; right: 0; top: calc(100% + var(--s-2)); z-index: 5; min-width: 240px;
  flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2);
  background: var(--surface); border: 1px solid var(--border-hover); border-radius: var(--r-panel);
  box-shadow: var(--shadow-2);
}
.menu .nav a:not(.button), .menu .nav button.link { min-height: 44px; padding: 0 var(--s-3); width: 100%; }
.menu .nav a[aria-current="page"] { box-shadow: inset 2px 0 0 var(--accent); }
.menu .nav .button { margin: var(--s-2) 0 0; }
.menu .nav form.inline { display: block; }
footer.bottom { border-top: 1px solid var(--border); color: var(--text-muted); font-size: var(--fs-sm); }
footer.bottom .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); padding-block: var(--s-6); }
footer.bottom .brand { font-size: var(--fs-md); gap: var(--s-2); min-height: 0; color: var(--text); }
footer.bottom .brand svg { width: 22px; height: 22px; }
footer.bottom nav { display: flex; gap: var(--s-4); margin-left: auto; }
footer.bottom nav a { display: inline-flex; align-items: center; min-height: 32px; color: var(--text-muted); }

.page-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); margin-bottom: var(--s-4); }
.page-header h1 { margin: 0; }
.page-header .actions { margin-left: auto; display: flex; gap: var(--s-2); align-items: center; }
.subnav { display: flex; flex-wrap: wrap; gap: var(--s-1); margin: 0 0 var(--s-6); padding: 4px; border: 1px solid var(--border); border-radius: 14px; width: fit-content; max-width: 100%; background: var(--surface); }
.subnav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); border-radius: 10px; color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); font-weight: 500; }
@media (hover: hover) { .subnav a:hover { color: var(--text); background: var(--surface-2); } }
.subnav a[aria-current="page"] { color: var(--on-accent); background: var(--accent); font-weight: 600; }

/* ---------------------------------------------------------------- hero (home) */
.hero { position: relative; margin: 0 0 var(--s-8); padding: var(--s-6) 0 var(--s-8); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; opacity: 0.55;
  background: radial-gradient(circle, var(--accent) 1.5px, transparent 2px) 0 0 / 28px 2px repeat-x; }
.hero h1 { font-size: var(--fs-d3); line-height: 0.98; max-width: 12ch; margin-bottom: var(--s-5); }
.hero h1 .accent { display: block; }
.hero-copy > p { font-size: var(--fs-lg); color: var(--text-muted); max-width: 34em; }
.hero-copy > .row { margin-top: var(--s-6); }
.lede { font-size: var(--fs-lg); color: var(--text-muted); max-width: 40em; margin-bottom: var(--s-6); }

/* The ledger: how calls are billed, as a stream of receipts. */
.ledger { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-2); }
.ledger-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); color: var(--text-muted); }
.ledger-head .url { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); }
.beacon { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgb(63 208 182 / 0.15); flex: none; }
.ledger-list { list-style: none; margin: 0; padding: 0; }
.call { padding: 16px 18px; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px;
  animation: call-in .6s var(--ease-enter) both; }
.call:nth-child(2) { animation-delay: .12s; } .call:nth-child(3) { animation-delay: .24s; } .call:nth-child(4) { animation-delay: .36s; }
@keyframes call-in { from { opacity: 0; transform: translateY(8px); } }
.call .tool { font-family: var(--mono); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.call .amt { font: 700 1.25rem/1 var(--display); text-align: right; font-variant-numeric: tabular-nums; }
.track { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.78rem; color: var(--text-muted); }
.track span { padding: 2px 9px; border-radius: 999px; border: 1px solid var(--border-hover); }
.track .ok { color: var(--ok); border-color: var(--ok-line); }
.track .back { color: var(--accent); border-color: var(--amber-line); }
.track .err { color: var(--danger); border-color: var(--danger-line); }
.ledger-foot { padding: 14px 18px; font-size: var(--fs-sm); color: var(--text-muted); }

/* ---------------------------------------------------------------- panels */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-panel); padding: var(--s-5); }
.card > h2:first-child, .card > h3:first-child { margin-top: 0; }
.center-card { max-width: 440px; margin: var(--s-7) auto; }
.grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.stats { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); margin-bottom: var(--s-4); }
.prose { max-width: var(--measure); }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3 { margin-top: var(--s-6); }
.panel-title { font: 650 var(--fs-lg)/1.2 var(--display); letter-spacing: -0.015em; margin: 0 0 var(--s-3); }
.section { margin-top: var(--s-8); }
.section:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- tables */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px var(--s-4); border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
@media (hover: hover) { tbody tr:hover td { background: rgb(255 255 255 / 0.015); } }
th { font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); white-space: nowrap; background: rgb(255 255 255 / 0.015); }
th.num, td.num { text-align: right; white-space: nowrap; }
td.empty { color: var(--text-muted); padding-block: var(--s-5); }

/* ---------------------------------------------------------------- status */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; min-height: 24px;
  border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; line-height: 1.2; white-space: nowrap;
  border: 1px solid var(--border-hover); color: var(--text-muted); background: transparent; text-decoration: none;
}
.badge.ok { color: var(--ok); border-color: var(--ok-line); background: var(--ok-soft); }
.badge.warn { color: var(--warn); border-color: var(--warn-line); background: var(--warn-soft); }
.badge.danger { color: var(--danger); border-color: var(--danger-line); background: var(--danger-soft); }
.notice { padding: var(--s-3) var(--s-4); border-radius: 14px; background: var(--ok-soft); border: 1px solid var(--ok-line); color: var(--text); margin-bottom: var(--s-4); }
.notice.warn { background: var(--warn-soft); border-color: var(--warn-line); }
.notice.danger { background: var(--danger-soft); border-color: var(--danger-line); }
.notice > :last-child { margin-bottom: 0; }
.notice .icon { vertical-align: -0.15em; }

/* ---------------------------------------------------------------- forms */
form.inline { display: inline; }
label { display: block; font-weight: 560; margin-bottom: 6px; }
label.check { display: flex; gap: var(--s-2); align-items: center; font-weight: 400; min-height: 32px; }
.field { margin-bottom: var(--s-4); }
.hint { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 400; }
.fields { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); align-items: end; }
.fields .field { margin-bottom: 0; }
input[type=text], input[type=url], input[type=number], input[type=email], input[type=search], select, textarea {
  width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong);
  border-radius: var(--r-control); background: var(--field); color: var(--text); font: inherit;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--focus); outline-offset: 0; }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--text-muted); cursor: not-allowed; }
textarea { min-height: 104px; font-family: var(--mono); font-size: var(--fs-sm); resize: vertical; }
textarea.compact { min-height: 48px; width: 14rem; }
input.price { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.input-md { max-width: 15rem; }
.input-sm { max-width: 7rem; }
.search-bar input[type=search] { max-width: 420px; }
.search-bar select { max-width: 220px; }
input[type=checkbox], input[type=radio] { width: 18px; height: 18px; accent-color: var(--accent); margin: 0; }

button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: 44px; padding: 0 var(--s-5); border-radius: 12px;
  border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent);
  font: inherit; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none;
  touch-action: manipulation;
  transition: background-color 150ms ease, border-color 150ms ease, transform 120ms cubic-bezier(.25,.46,.45,.94);
}
@media (hover: hover) {
  button:hover, .button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
  button.secondary:hover, .button.secondary:hover { background: var(--surface-2); border-color: var(--border-strong); }
  button.danger:hover { filter: brightness(1.08); }
  button.link:hover { background: none; color: var(--text); }
}
button:active, .button:active { transform: scale(0.97); }
button.secondary, .button.secondary { background: transparent; color: var(--text); border-color: var(--border-hover); }
button.danger { background: var(--danger); border-color: var(--danger); color: var(--on-danger); }
button.link {
  background: none; border: 0; color: var(--text-muted); padding: 0 var(--s-1); min-height: 32px; font-weight: 400;
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 0.2em;
}
button:disabled, .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; }
.htmx-request button[type=submit], button.htmx-request { opacity: 0.7; cursor: progress; }
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }
.copy { display: flex; gap: var(--s-2); } .copy input { font-family: var(--mono); font-size: var(--fs-sm); }
.secret { font-family: var(--mono); background: var(--field); border: 1px solid var(--border-strong); padding: 10px var(--s-3); border-radius: var(--r-control); word-break: break-all; }

details > summary { cursor: pointer; }
details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------------------------------------------------------------- components */
.icon { width: 1em; height: 1em; flex: none; vertical-align: -0.125em; }
.badge .icon { width: 13px; height: 13px; }
.id { white-space: nowrap; }
.tariff { font-family: var(--mono); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; color: #cfd9ea; }

/* Copy */
.copy input { min-width: 0; }
.copy-btn { flex: none; }
.code { display: flex; align-items: flex-start; gap: var(--s-2); }
.code pre { flex: 1; min-width: 0; margin: 0; }
.code .copy-btn { min-height: 38px; padding: 0 var(--s-3); font-size: var(--fs-sm); }

/* Cap meter: the bar never carries the number alone; the text above always states it. */
.meter-text { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: 8px; }
.meter-text strong { color: var(--text); font-weight: 600; }
.meter-track { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.meter-fill { display: block; height: 100%; width: var(--pct); min-width: 3px; background: linear-gradient(90deg, #e8962a, var(--accent)); border-radius: inherit; }
.meter.warn .meter-fill { background: var(--danger); }

/* Receipt: reserved → charged → released. */
.receipt { border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.receipt-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding: 12px var(--s-4); border-top: 1px solid var(--border); }
.receipt-row:first-child { border-top: 0; }
.receipt dt { display: flex; align-items: center; gap: var(--s-2); color: var(--text-muted); }
.receipt dd { margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.receipt-row.total { background: var(--surface-2); }
.receipt-row.total dt { color: var(--text); font-weight: 600; }
.receipt-row.total dd { font: 700 1.75rem/1 var(--display); letter-spacing: -0.02em; }
.receipt-row.back dd { color: var(--accent); }
.receipt-row.sub { border-top: 0; padding-top: 0; padding-left: var(--s-6); background: var(--surface-2); }
.receipt-row.sub dt { font-size: var(--fs-sm); }

/* Facts (stats, earnings). */
dl { margin: 0; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: var(--s-4) var(--s-5); }
.facts dt { font-size: var(--fs-sm); color: var(--text-muted); }
.facts dd { margin: 4px 0 0; font: 700 var(--fs-2xl)/1.1 var(--display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.facts.compact { grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); }
.facts.compact dd { margin: 0; font: 500 var(--fs-sm)/1.5 var(--font); letter-spacing: 0; text-align: right; }

.empty-state { padding: var(--s-6) var(--s-5); border: 1px dashed var(--border-hover); border-radius: var(--r-panel); color: var(--text-muted); background: rgb(255 255 255 / 0.01); }
.empty-state p { margin-bottom: var(--s-4); }
.empty-state p:last-child { margin-bottom: 0; }

/* Busy submit (app.js sets aria-busy). */
button[aria-busy="true"], .button[aria-busy="true"] { opacity: 0.7; cursor: progress; }

/* Tables that reflow into labelled rows below 640px: add class="reflow" and data-label on each td. */
@media (max-width: 640px) {
  table.reflow thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.reflow, table.reflow tbody, table.reflow tr, table.reflow td { display: block; width: 100%; }
  table.reflow tr { padding: var(--s-2) 0; border-bottom: 1px solid var(--border); }
  table.reflow tbody tr:last-child { border-bottom: 0; }
  table.reflow td { display: flex; justify-content: space-between; gap: var(--s-4); border: 0; padding: 6px var(--s-4); text-align: right; }
  table.reflow td::before { content: attr(data-label); color: var(--text-muted); font: 400 var(--fs-sm)/1.5 var(--font); text-align: left; flex: none; }
  table.reflow td.empty { display: block; text-align: left; }
  table.reflow td.empty::before { content: none; }
  table.reflow td.primary { display: block; text-align: left; font-weight: 600; }
  table.reflow td.primary::before { content: none; }
}

/* ---------------------------------------------------------------- page layouts */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-7); align-items: start; }
@media (min-width: 960px) {
  .hero.split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
  .split-aside { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
  .sticky { position: sticky; top: calc(68px + var(--s-5)); }
}
/* The side panel comes first in the source (reached early by keyboard and screen readers) and sits on the right from 960px. */
@media (min-width: 960px) { .split-aside .split-side { order: 2; } }
.split-main > section + section { margin-top: var(--s-7); }
.split-main h2 { margin-top: 0; }

/* How it works: three cells in one bordered strip. */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  background: var(--border); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
.steps li { counter-increment: step; background: var(--bg); padding: var(--s-6); color: var(--text-muted); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font: 600 var(--fs-sm) var(--mono); color: var(--accent); margin-bottom: var(--s-3); }
.steps li strong { display: block; color: var(--text); font: 700 var(--fs-xl)/1.15 var(--display); letter-spacing: -0.02em; margin-bottom: var(--s-2); }

.agent-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color 150ms ease, transform 200ms var(--ease-enter), background-color 150ms ease; }
.agent-card p { margin: 0; }
.agent-card-head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.agent-card h3 { margin: 0; font-size: var(--fs-xl); }
.agent-card .stretched { color: var(--text); text-decoration: none; }
.agent-card .stretched::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-panel); }
.agent-card .stretched:focus-visible { outline: none; }
.agent-card:has(.stretched:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
@media (hover: hover) { .agent-card:hover { border-color: var(--border-hover); background: var(--surface-2); transform: translateY(-2px); } }
.agent-card-foot { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.agent-card-foot .price-tag { margin-left: auto; text-align: right; line-height: 1.1; }
.agent-card-foot .price-tag small { display: block; color: var(--text-muted); font-size: var(--fs-xs); }
.agent-card-foot .price-tag strong { font: 700 1.625rem/1 var(--display); letter-spacing: -0.02em; }

.price-summary { margin: 0; line-height: 1.6; }
.price-summary strong { font: 700 var(--fs-2xl)/1 var(--display); letter-spacing: -0.02em; }
.button.block { width: 100%; }
.promises { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-2); color: var(--text-muted); }
.promises li { display: flex; align-items: center; gap: var(--s-2); }
.promises .icon { color: var(--ok); }
.subscribe-panel { border-color: var(--border-hover); box-shadow: var(--shadow-2); }
.example { margin-bottom: var(--s-3); }
.example pre { margin-top: var(--s-1); }
.consent { max-width: 780px; }
.consent .card { margin-top: var(--s-5); }

.dash-top { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.big-figure { font: 750 var(--fs-d2)/1 var(--display); letter-spacing: -0.035em; margin: 0; font-variant-numeric: tabular-nums; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: 560; padding: 0; margin-bottom: var(--s-2); }
.topup { border-top: 1px solid var(--border); padding-top: var(--s-4); }
.tariff-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-1); }
.tariff-list code { margin-right: var(--s-2); }
.sub-actions { border-top: 1px solid var(--border); padding-top: var(--s-4); }
.connect-grid { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); }
.connect-grid .card { min-width: 0; }
.copy .secret { flex: 1; }
.run-id { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- creator and admin */
.toc { display: none; }
@media (min-width: 960px) {
  .split-toc { grid-template-columns: 190px minmax(0, 1fr); }
  .toc { display: flex; flex-direction: column; gap: var(--s-1); position: sticky; top: calc(68px + var(--s-5)); font-size: var(--fs-sm); border-left: 2px solid var(--border); padding-left: var(--s-3); }
  .toc a { color: var(--text-muted); text-decoration: none; min-height: 30px; display: flex; align-items: center; }
  .toc a:hover { color: var(--text); }
}
.money-input { display: inline-flex; align-items: center; gap: var(--s-1); }
.money-input span { color: var(--text-muted); }
.case-list { padding-left: var(--s-5); margin: 0; }
.spin { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
td .check { min-height: 0; white-space: nowrap; }
/* Inputs sitting in a row with their button share the line instead of taking the full width. */
.row > input[type=text], .row > input[type=search], .row > input[type=url] { width: auto; flex: 1 1 12rem; min-width: 0; }

/* ---------------------------------------------------------------- responsive and motion */
@media (max-width: 640px) {
  main { padding-top: var(--s-6); }
  .wrap { padding: 0 var(--s-4); }
  h1 { font-size: 2.125rem; }
  .hero { padding-top: var(--s-3); }
  .hero h1 { font-size: 2.875rem; }
  .hero-copy > p { font-size: var(--fs-md); }
  .big-figure { font-size: var(--fs-d1); }
  header.top > .wrap > .nav { display: none; }
  .menu { display: block; }
  footer.bottom nav { margin-left: 0; }
  .code { flex-direction: column; align-items: stretch; }
  .code .copy-btn { align-self: flex-start; }
  .subnav { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  button:active, .button:active, .agent-card:hover { transform: none; }
}

/* Home: connect band */
.connect-band { padding: var(--s-6); background: linear-gradient(180deg, var(--surface), var(--bg)); }
@media (min-width: 960px) { .connect-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: center; gap: var(--s-6); } }
.connect-band pre { white-space: pre-wrap; overflow-wrap: anywhere; }
figure.ledger { margin: 0; }
@media (max-width: 640px) { .ledger-head .url { display: none; } }

/* Dashboard: spend per agent this month (share of the month's total). */
.spend-list { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: grid; gap: var(--s-3); }
.spend-list li { display: grid; grid-template-columns: minmax(0, 9rem) minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; font-size: var(--fs-sm); }
.spend-list li > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.spend-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.spend-bar span { display: block; height: 100%; width: var(--pct); min-width: 2px; background: var(--ok); border-radius: inherit; }

/* Equal-height dashboard panels: footnotes sit at the bottom. */
.dash-top > .card { display: flex; flex-direction: column; }
.dash-top > .card > :last-child { margin-top: auto; padding-top: var(--s-3); }
p.run-id { margin-bottom: var(--s-6); }
.login-card { padding: var(--s-6); box-shadow: var(--shadow-2); border-color: var(--border-hover); }
.login-card h1 { font-size: var(--fs-d1); }
.login-mark svg { width: 48px; height: 48px; display: block; }
.login-card .promises { border-top: 1px solid var(--border); padding-top: var(--s-4); }