/* Stylumia Developer Portal — design system, v3.
 *
 * The frame is the fix: a bounded app shell (topbar / full-height bordered
 * sidebar / centred reading column / optional TOC rail) instead of content
 * floating on an undifferentiated ground. Rhythm on an 8px scale. Mono-caps
 * reserved for true machine labels; UI labels are sans.
 */

/* ---------- tokens ---------- */

/* Tokens follow developer-platform/portal-ui/src/styles/tokens.css - the
 * Orbix candystack palette, verbatim where the deck defines a value and
 * derived the same way (color-mix, never guessed hex) where it does not.
 * Neutrals are the console's true greys; the accent is candystack purple. */
:root {
  --ground: #fafafa;          /* --wash */
  --surface: #ffffff;         /* --paper */
  --surface2: #f1f1f4;
  --ink: #101010;
  --muted: #666666;           /* --ink-muted */
  --faint: #8f8f96;
  --line: #e6e6e6;            /* --rule */
  --line-strong: #d2d2d8;
  --accent: #3e3dd6;          /* candy-purple-3 */
  --accent-ink: #ffffff;
  --accent-soft: #f0f6fe;     /* candy-purple-1 */
  --ok-bg: #e5fbe4;   --ok-fg: #156813;   /* green 1/3 - stable, GET, success */
  --warn-bg: #feecdd; --warn-fg: #a32c00; /* orange 1/3 - draft, pending */
  --dgr-bg: #fce9e9;  --dgr-fg: #c7191f;  /* red 1/3 - destructive */
  --sand-bg: #f0f6fe; --sand-fg: #3e3dd6; /* purple 1/3 - sandbox env */
  --info-bg: #e0faff; --info-fg: #1a5e6b; /* blue 1/3 - live env, info */
  --code-bg: #16161c;
  --code-ink: #e8e8ee;
  --code-dim: #82828e;
  --code-key: #9999ff;        /* candy-purple-2 */
  --code-str: #d0c709;        /* candy-yellow-2 */
  --shadow: 0 1px 2px rgba(16, 16, 16, .05), 0 10px 30px rgba(16, 16, 16, .07);
  /* The console's stacks, verbatim (portal-ui tokens.css). Victor Serif and
     Inter Display are the brand faces; neither has a confirmed web licence,
     so they lead the stack and resolve only where installed. Inter and
     DM Mono are the stack's own fallbacks and openly licensed, so those two
     are the only families this page actually loads. */
  --font-display: "Victor Serif", Georgia, "Times New Roman", serif;
  --font-body: "Inter Display", Inter, system-ui, -apple-system, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --topbar-h: 57px;
}

:root[data-theme="dark"] {
  --ground: #0d0d0f;          /* --wash, dark */
  --surface: #17171b;         /* --paper, dark */
  --surface2: #1f1f25;
  --ink: #ededf0;
  --muted: #9a9aa2;
  --faint: #6c6c76;
  --line: #2c2c33;            /* --rule, dark */
  --line-strong: #3d3d47;
  --accent: #9999ff;          /* candy-purple-2 */
  --accent-ink: #181849;      /* candy-purple-4 */
  --accent-soft: #181849;
  --ok-bg: #092b08;   --ok-fg: #63e261;   /* green 4/2 */
  --warn-bg: color-mix(in oklab, #a32c00 28%, #0d0d0f);
  --warn-fg: color-mix(in oklab, #a32c00 45%, #ffffff);
  --dgr-bg: #2d1616;  --dgr-fg: #ff999b;  /* red 4/2 */
  --sand-bg: #181849; --sand-fg: #9999ff; /* purple 4/2 */
  --info-bg: color-mix(in oklab, #1a5e6b 28%, #0d0d0f);
  --info-fg: color-mix(in oklab, #1a5e6b 45%, #ffffff);
  --code-bg: #131317;
  --code-ink: #e4e4ea;
  --code-dim: #777782;
  --code-key: #9999ff;
  --code-str: #d0c709;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 32px rgba(0, 0, 0, .45);
}

/* ---------- reset & base ---------- */

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
code, kbd, pre { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
h2, h3, h4 { font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.hero-title { font-family: var(--font-display); }

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 24px;
  height: var(--topbar-h); padding: 0 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 8px; color: var(--ink); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { font-family: var(--font-mono); font-weight: 500; color: var(--accent); letter-spacing: -.06em; }
.brand-name { font-weight: 600; letter-spacing: -.01em; }
.brand-sub { color: var(--muted); font-size: 13.5px; }

.topbar-search {
  display: flex; align-items: center; gap: 8px;
  width: 230px; padding: 0 10px 0 12px; height: 34px;
  background: var(--ground); border: 1px solid var(--line); border-radius: 8px;
}
.topbar-search:focus-within { border-color: var(--accent); }
.topbar-search input {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font: inherit; font-size: 13px; color: var(--ink);
}
.topbar-search input::placeholder { color: var(--faint); }
.topbar-search kbd {
  font-size: 10.5px; color: var(--faint);
  border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; background: var(--surface);
}
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-link { color: var(--muted); font-size: 13.5px; }
.nav-link:hover { color: var(--ink); text-decoration: none; }
.theme-toggle {
  width: 32px; height: 32px; border-radius: 8px;
  border: 1px solid var(--line);
  font-size: 15px; line-height: 1; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { background: var(--surface2); color: var(--ink); }

/* ---------- buttons & chips ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 8px; padding: 8px 16px;
  font-size: 14px; font-weight: 500; line-height: 1.45;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--surface2); filter: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em;
  border-radius: 999px; padding: 2px 10px; white-space: nowrap;
}
.chip-ok { background: var(--ok-bg); color: var(--ok-fg); }
.chip-warn { background: var(--warn-bg); color: var(--warn-fg); }
.chip-dgr { background: var(--dgr-bg); color: var(--dgr-fg); }
.chip-sand { background: var(--sand-bg); color: var(--sand-fg); }

/* ---------- the app frame ---------- */

.docs-layout {
  display: grid;
  grid-template-columns: 272px minmax(0, 1fr);
  min-height: calc(100vh - var(--topbar-h));
}
.docs-layout.has-toc { grid-template-columns: 272px minmax(0, 1fr) 232px; }

.sidebar {
  position: sticky; top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  background: var(--ground);
  border-right: 1px solid var(--line);
  padding: 24px 16px 48px 20px;
}
.nav-group { margin-bottom: 20px; }
.nav-group-label {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px; padding-left: 10px;
}
.sidebar-link {
  display: block; padding: 5px 10px; border-radius: 7px;
  color: var(--muted); font-size: 13.5px; line-height: 1.5;
}
.sidebar-link:hover { color: var(--ink); background: var(--surface2); text-decoration: none; }
.sidebar-link.active { color: var(--accent); background: var(--accent-soft); font-weight: 500; }
.sidebar-link.filter-hidden, .nav-group.filter-hidden { display: none; }

.content {
  width: 100%;
  max-width: 768px;
  margin: 0 auto;
  padding: 48px 48px 96px;
  min-width: 0;
}
.content > h1 { font-size: 36px; line-height: 1.12; margin-bottom: 16px; }
.content-wide { max-width: 1024px; }
.content-home { max-width: 880px; }

.toc {
  position: sticky; top: var(--topbar-h);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
  padding: 52px 24px 48px 0;
  font-size: 12.5px;
}
.toc-label {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px;
}
.toc-link {
  display: block; padding: 3px 0 3px 12px;
  color: var(--muted); border-left: 2px solid var(--line);
  line-height: 1.5;
}
.toc-link:hover { color: var(--ink); text-decoration: none; }
.toc-link.active { color: var(--accent); border-left-color: var(--accent); }
.toc-h3 { padding-left: 24px; }

/* ---------- prose ---------- */

.page-lede { color: var(--muted); font-size: 16.5px; margin-bottom: 32px; max-width: 44rem; }

.prose { font-size: 15px; }
.prose a {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
  text-underline-offset: 3px;
}
.prose a:hover { text-decoration-color: var(--accent); }
.prose > p:first-child { font-size: 16px; color: var(--muted); }
.prose h2 { font-size: 20px; font-weight: 650; margin: 44px 0 12px; }
.prose h2:first-child { margin-top: 8px; }
.prose h3 { font-size: 16px; margin: 30px 0 10px; }
.prose p, .prose ul, .prose ol { margin-bottom: 16px; }
.prose ul { padding-left: 22px; }
.prose ul li { margin-bottom: 8px; padding-left: 4px; }
.prose ul li::marker { color: var(--line-strong); content: "\25CF\00a0\00a0"; font-size: 9px; }
.prose ol { list-style: none; counter-reset: step; padding-left: 0; }
.prose ol > li {
  counter-increment: step; position: relative;
  padding-left: 38px; margin-bottom: 12px;
}
.prose ol > li::before {
  content: counter(step);
  position: absolute; left: 0; top: 1px;
  width: 23px; height: 23px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2); color: var(--muted);
  border: 1px solid var(--line);
  font-size: 12px; font-weight: 600;
}
.prose blockquote {
  border-left: 3px solid var(--accent);
  background: var(--ground); border-radius: 0 10px 10px 0;
  padding: 14px 20px; margin: 20px 0; color: var(--muted);
}
.prose hr { border: none; border-top: 1px solid var(--line); margin: 36px 0; }
.h-anchor { color: inherit; text-decoration: none; }
.prose h2 a, .prose h3 a { text-decoration: none; }
.h-anchor:hover { text-decoration: none; }
.h-anchor:hover::after { content: " #"; color: var(--faint); font-family: var(--font-mono); font-size: .8em; }

.prose code {
  background: var(--surface2);
  border-radius: 5px; padding: 2px 6px;
  font-size: 13px; color: var(--ink);
}
.prose pre {
  background: var(--code-bg); color: var(--code-ink);
  border-radius: 10px; padding: 16px 18px;
  font-size: 13px; line-height: 1.65;
  overflow-x: auto; margin: 4px 0 20px;
}
.prose pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; }

.code-wrap { position: relative; border-radius: 10px; overflow: hidden; margin: 4px 0 20px; }
.code-wrap .prose-pre, .code-wrap pre { margin: 0; border-radius: 0; }
.code-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 14px;
  background: color-mix(in srgb, var(--code-bg) 82%, #ffffff);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.code-lang {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--code-dim);
}
.copy-btn {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--code-dim); border-radius: 6px; padding: 2px 8px;
}
.copy-btn:hover { color: var(--code-ink); background: rgba(255, 255, 255, .08); }
.terminal .copy-btn { position: absolute; top: 9px; right: 9px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.16); }

.prose table { width: 100%; border-collapse: collapse; margin: 4px 0 24px; font-size: 13.5px; display: block; overflow-x: auto; }
.prose th {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); text-align: left;
  padding: 8px 14px; border-bottom: 2px solid var(--line-strong);
}
.prose td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose td code { white-space: nowrap; }

.md-twin { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; }
.md-twin a { color: var(--faint); }
.md-twin a:hover { color: var(--accent); }

.notice { border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-size: 14px; }
.notice p { margin: 0; }
.notice-warn { background: var(--warn-bg); color: var(--warn-fg); }
.notice-warn a { color: inherit; font-weight: 600; }
.notice-ok { background: var(--ok-bg); color: var(--ok-fg); }
.notice-dgr { background: var(--dgr-bg); color: var(--dgr-fg); }

/* ---------- landing ---------- */

.hero { padding: 16px 0 8px; }
.hero-eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.hero-title { font-size: 44px; line-height: 1.1; margin-bottom: 18px; max-width: 17em; }
.hero-lede { font-size: 17px; color: var(--muted); max-width: 40rem; margin-bottom: 24px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.terminal {
  position: relative;
  margin: 40px 0 8px;
  border: 1px solid var(--line); border-radius: 12px;
  overflow: hidden; box-shadow: var(--shadow);
}
.terminal-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 14px; background: var(--surface2); border-bottom: 1px solid var(--line);
}
.terminal-dots { display: flex; gap: 5px; }
.terminal-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); display: block; }
.terminal-title { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); letter-spacing: .03em; }
.terminal-body {
  background: var(--code-bg); color: var(--code-ink);
  padding: 20px 22px; font-size: 12.8px; line-height: 1.7;
  overflow-x: auto; margin: 0;
}
.t-prompt, .t-dim { color: var(--code-dim); }
.t-key { color: var(--code-key); }
.t-str { color: var(--code-str); }
.t-bad { color: #ff999b; text-decoration: underline wavy #ff999b 1px; text-underline-offset: 3px; }
.t-good { color: #63e261; }
.t-err { color: #ff999b; font-weight: 500; }
.t-ok { color: #63e261; font-weight: 500; }


.route-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 40px 0; }
.route-card {
  display: block; background: var(--surface);
  border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px;
  color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.route-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow); }
.route-eyebrow {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.route-card h3 { margin: 10px 0 6px; font-size: 16px; }
.route-card p { color: var(--muted); font-size: 13.5px; line-height: 1.55; }

.agent-note { margin: 40px 0 8px; padding: 22px 26px; background: var(--ground); border: 1px solid var(--line); border-radius: 12px; }
.agent-note h2 { font-size: 20px; margin-bottom: 10px; }
.agent-note p { color: var(--muted); font-size: 14.5px; }

/* ---------- interactive quickstart ---------- */

.steps-flow { position: relative; }
.step-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: 26px 30px; margin-bottom: 24px;
}
.step-done { border-color: color-mix(in srgb, var(--ok-fg) 45%, var(--line)); background: color-mix(in srgb, var(--ok-bg) 26%, var(--surface)); }
.step-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.step-head h2 { font-size: 20px; line-height: 1.2; }
.step-no {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 13.5px; font-weight: 500;
  background: var(--accent-soft); color: var(--accent);
}
.step-done .step-no { background: var(--ok-bg); color: var(--ok-fg); }
.step-card > p { font-size: 14.5px; margin-bottom: 12px; max-width: 42rem; }
.step-aside { display: block; color: var(--faint); font-size: 13px; margin-top: 10px; }
.next-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-top: 4px; }
.next-links .route-card { padding: 16px 18px; }

/* ---------- try-it runner ---------- */

.runnable { margin: 16px 0; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; }
.req-line {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface2);
}
.req-line code { font-size: 12.8px; overflow-wrap: anywhere; flex: 1 1 240px; }
.req-line .run-btn, .req-line .btn { margin-left: auto; flex: none; }
.method-chip {
  flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  letter-spacing: .05em; padding: 2px 8px; border-radius: 6px;
  background: var(--ok-bg); color: var(--ok-fg);
}
.req-curl {
  margin: 0; padding: 14px 16px;
  background: var(--code-bg); color: var(--code-ink);
  font-size: 12.5px; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.req-curl .t-dim { color: var(--code-dim); }

.run-out { border-top: 1px solid var(--line); }
.run-status {
  font-family: var(--font-mono); font-size: 12.5px; padding: 8px 14px;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
}
.run-ok { background: var(--ok-bg); color: var(--ok-fg); }
.run-err { background: var(--dgr-bg); color: var(--dgr-fg); }
.run-headers { opacity: .75; font-size: 11px; margin-left: auto; }
.run-json {
  margin: 0; padding: 14px 16px; max-height: 340px; overflow: auto;
  background: var(--code-bg); color: var(--code-ink);
  font-size: 12.3px; line-height: 1.6;
}

.fix-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--surface2); border-bottom: 1px solid var(--line);
}
.fix-label { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.fix-chip {
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--accent); border-radius: 999px;
  padding: 4px 12px; color: var(--accent);
  transition: background .15s;
}
.fix-chip:hover { background: var(--accent-soft); }

/* ---------- explorer ---------- */

.explorer-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px; margin: 28px 0 18px;
}
.explorer-slot {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px;
  transition: opacity .2s;
}
.explorer-slot.locked { opacity: .45; }
.slot-label {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint);
}
.explorer-slot select {
  font: inherit; color: var(--ink); font-size: 13.5px;
  background: var(--ground); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 8px 10px; width: 100%;
}
.explorer-slot select:disabled { opacity: .5; }
.slot-note { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.coverage-box { display: flex; flex-direction: column; gap: 5px; font-size: 13px; }
.cov-row { display: flex; justify-content: space-between; gap: 10px; }
.cov-row span { color: var(--muted); }
.cov-row b { font-variant-numeric: tabular-nums; font-weight: 500; }

.req-preview {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin-bottom: 16px;
}
.req-preview code { font-size: 12.8px; color: var(--muted); overflow-wrap: anywhere; }

/* ---------- errors catalogue ---------- */

.jump-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.jump-nav a {
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; color: var(--muted);
}
.jump-nav a:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }

.error-entry {
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 26px; margin-bottom: 18px;
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.error-entry h3 {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--faint); margin: 16px 0 5px;
}
.error-entry p, .error-entry ul { font-size: 14px; margin-bottom: 4px; }
.error-entry ul { padding-left: 20px; }
.error-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.error-code { font-size: 15px; font-weight: 500; color: var(--accent); }
.error-json-link { margin-top: 14px; }
.error-json-link a { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.error-json-link a:hover { color: var(--accent); }

/* ---------- status ---------- */

.status-table { width: 100%; border-collapse: collapse; margin: 20px 0; }
.status-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); }

/* ---------- auth & console ---------- */

.auth-wrap { max-width: 440px; margin: 64px auto; padding: 0 20px; }
.auth-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 32px 30px; box-shadow: var(--shadow);
}
.auth-card h1 { font-size: 25px; margin-bottom: 10px; }
.auth-note, .auth-message { color: var(--muted); font-size: 13.5px; margin: 12px 0; }
.auth-hint { margin-top: 16px; font-size: 13px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 16px 0; }
.field label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
}
.field input, .field textarea {
  font: inherit; color: var(--ink);
  background: var(--ground); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 10px 12px; font-size: 14px;
}
.field input:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 68px; }

.mailbox-wrap { max-width: 640px; margin: 48px auto; padding: 0 20px; }
.mailbox-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin: 14px 0; }
.mailbox-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.mailbox-subject { font-weight: 600; margin: 6px 0; }
.mailbox-body { color: var(--muted); font-size: 14px; }
.mailbox-empty { color: var(--muted); }

.console-wrap { max-width: 980px; margin: 0 auto; padding: 44px 32px 88px; }
.console-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.console-head h1 { font-size: 30px; }
.console-intro { color: var(--muted); font-size: 14.5px; max-width: 52rem; margin-bottom: 24px; }
.console-footer-nav { margin-top: 30px; font-size: 14px; }
.hint-line { color: var(--muted); font-size: 13px; margin-top: 16px; }
.hint-line code { background: var(--surface2); border: 1px solid var(--line); border-radius: 5px; padding: 1.5px 6px; font-size: 12px; }

.console-wrap table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.console-wrap th {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--line-strong); background: var(--ground);
}
.console-wrap td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.console-wrap tr:last-child td { border-bottom: none; }

.new-key-box {
  background: var(--sand-bg); border: 1px solid var(--sand-fg);
  border-radius: 12px; padding: 18px 22px; margin: 18px 0;
}
.new-key-code {
  display: block; font-family: var(--font-mono); font-size: 13px;
  word-break: break-all; margin: 10px 0; color: var(--ink);
}
.new-key-warn { color: var(--warn-fg); font-size: 13px; }

/* ---------- prev / next ---------- */

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 48px; }
.pager-link {
  display: block; border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; color: var(--ink);
  transition: border-color .15s;
}
.pager-link:hover { border-color: var(--accent); text-decoration: none; }
.pager-link.next { text-align: right; }
.pager-dir { display: block; font-size: 12px; color: var(--faint); margin-bottom: 3px; }
.pager-title { font-weight: 600; font-size: 14.5px; color: var(--accent); }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--line); background: var(--ground); }
.footer-inner { max-width: 1240px; margin: 0 auto; padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.footer-brand { font-size: 13.5px; display: flex; align-items: baseline; gap: 8px; }
.footer-version { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; align-items: baseline; }
.footer-label { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); }
.footer-link { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.footer-link:hover { color: var(--accent); }
.footer-note { color: var(--faint); font-size: 12.5px; }
.footer-note code { font-size: 11.5px; }

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .docs-layout.has-toc { grid-template-columns: 272px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 860px) {
  .topbar { gap: 12px; padding: 0 14px; }
  .topbar-search { display: none; }
  .nav-link { display: none; }
  .topbar-right { gap: 10px; }
  .docs-layout, .docs-layout.has-toc { display: block; }
  .sidebar {
    position: static; max-height: none;
    border-right: none; border-bottom: 1px solid var(--line);
    padding: 16px 16px 8px;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 0 14px;
  }
  .sidebar-link { overflow-wrap: anywhere; }
  .content { padding: 32px 18px 72px; }
  .hero-title { font-size: 33px; }
  .step-card { padding: 20px 16px; }
  .console-wrap { padding: 32px 18px 72px; }
  .console-wrap table { display: block; overflow-x: auto; }
}
@media (max-width: 460px) {
  .brand-sub { display: none; }
}

/* ---------- changelog (the Claude Code docs pattern) ---------- */

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.copy-page-btn {
  font-size: 13px; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 13px;
}
.copy-page-btn:hover { background: var(--surface2); color: var(--ink); }

.cl-intro { margin-bottom: 8px; }
.cl-row {
  display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 36px;
  padding: 30px 0; border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--topbar-h) + 16px);
}
.cl-meta { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cl-version { font-family: var(--font-mono); font-size: 15px; font-weight: 500; color: var(--accent); }
.cl-version:hover { text-decoration: none; }
.cl-date { color: var(--muted); font-size: 13px; }
.cl-body > p:first-child { color: var(--muted); }
.cl-body h3 { font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin: 22px 0 8px; }
.cl-body h3:first-child { margin-top: 0; }
@media (max-width: 700px) {
  .cl-row { display: block; padding: 24px 0; }
  .cl-meta { flex-direction: row; align-items: baseline; gap: 12px; margin-bottom: 12px; }
}

/* ---------- explorer v2 ---------- */

.ep-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 24px 0 10px; }
.ep-tab {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 7px 13px; color: var(--muted); background: var(--surface);
}
.ep-tab:hover { border-color: var(--line-strong); color: var(--ink); }
.ep-tab.active { border-color: var(--accent); color: var(--ink); background: var(--accent-soft); }
.ep-blurb { color: var(--muted); font-size: 14px; margin-bottom: 20px; max-width: 44rem; }

.filter-panel { background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; margin-bottom: 18px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.filter-field { display: flex; flex-direction: column; gap: 6px; }
.filter-field > span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.filter-field select, .filter-field input {
  font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 8px 10px; width: 100%;
}
.filter-field select:focus, .filter-field input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); }
.filter-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.filter-note { font-size: 12.5px; color: var(--faint); }

.req-wrap { margin-bottom: 14px; }
.code-head-actions { display: flex; align-items: center; gap: 10px; }
.run-hint { font-size: 13.5px; color: var(--muted); margin-bottom: 20px; }

.resp-head { display: flex; align-items: center; gap: 12px; margin: 26px 0 10px; }
.resp-head h2 { font-size: 19px; }
#explorerOut { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }

.schema-head { font-size: 19px; margin: 40px 0 8px; }
.schema-note { color: var(--muted); font-size: 14px; margin-bottom: 14px; }
.schema-table { border: 1px solid var(--line); border-radius: 12px; overflow: auto; }
.schema-table table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.schema-table th {
  text-align: left; padding: 10px 14px; background: var(--ground);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--line-strong);
}
.schema-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.schema-table tr:last-child td { border-bottom: none; }
.schema-table code { background: var(--surface2); border-radius: 5px; padding: 2px 6px; font-size: 12.5px; }
.schema-type { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }

/* ---------- explorer: locked response ---------- */

.resp-locked {
  border: 1px dashed var(--line-strong); border-radius: 12px;
  padding: 26px 28px; background: var(--ground);
}
.resp-locked-title { font-weight: 600; font-size: 15.5px; margin-bottom: 8px; }
.resp-locked p { color: var(--muted); font-size: 14px; margin-bottom: 12px; max-width: 44rem; }
.resp-locked p:last-child { margin-bottom: 0; }
.nav-explorer { white-space: nowrap; }

/* ---------- welcome: the one-time key reveal ---------- */

.welcome-wrap { max-width: 760px; margin: 0 auto; padding: 52px 24px 88px; }
.welcome-eyebrow {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ok-fg); margin-bottom: 12px;
}
.welcome-wrap h1 { font-size: 32px; margin-bottom: 12px; }
.welcome-lede { color: var(--muted); font-size: 16px; margin-bottom: 26px; }

.key-reveal {
  border: 1px solid var(--accent); border-radius: 12px;
  background: var(--accent-soft); overflow: hidden;
}
.key-reveal-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.key-reveal-scope { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.key-reveal-head .btn { margin-left: auto; }
.key-reveal-value {
  display: block; padding: 16px 18px; font-family: var(--font-mono);
  font-size: 13.5px; color: var(--ink); background: var(--surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.key-reveal-warn { color: var(--warn-fg); font-size: 13.5px; margin: 14px 0 34px; }

.welcome-next { font-size: 19px; margin-bottom: 12px; }
.welcome-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 34px; }

/* ---------- one-time key overlay ---------- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(16, 16, 16, .55);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
:root[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, .7); }
.modal {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: var(--shadow);
  width: min(620px, 100%); padding: 28px 30px;
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-eyebrow {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ok-fg); margin-bottom: 6px;
}
.modal-head h2 { font-size: 23px; }
.modal-close {
  font-size: 24px; line-height: 1; color: var(--faint);
  width: 32px; height: 32px; border-radius: 8px; flex: none;
}
.modal-close:hover { background: var(--surface2); color: var(--ink); }
.modal-lede { color: var(--muted); font-size: 14px; margin: 10px 0 18px; }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 20px; flex-wrap: wrap; }

.resp-empty {
  border: 1px dashed var(--line-strong); border-radius: 12px;
  padding: 22px; text-align: center;
  color: var(--muted); font-size: 14px;
}

/* ---------- status page ---------- */

.status-banner {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; margin: 20px 0 8px;
  background: var(--surface);
}
.status-banner.status-operational { border-color: color-mix(in srgb, var(--ok-fg) 45%, var(--line)); background: color-mix(in srgb, var(--ok-bg) 32%, var(--surface)); }
.status-banner.status-degraded { border-color: color-mix(in srgb, var(--warn-fg) 45%, var(--line)); background: color-mix(in srgb, var(--warn-bg) 32%, var(--surface)); }
.status-banner.status-outage { border-color: color-mix(in srgb, var(--dgr-fg) 45%, var(--line)); background: color-mix(in srgb, var(--dgr-bg) 32%, var(--surface)); }
.status-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: var(--ok-fg); }
.status-degraded .status-dot { background: var(--warn-fg); }
.status-outage .status-dot { background: var(--dgr-fg); }
.status-headline { font-weight: 600; font-size: 16.5px; }
.status-target { color: var(--muted); font-size: 13px; margin-left: auto; }

.status-section { font-size: 19px; margin: 36px 0 14px; }
.status-empty { color: var(--muted); font-size: 14px; }

.suite-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 16px; }
.suite-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.suite-head h3 { font-size: 16.5px; }
.suite-desc { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.suite-meta { display: flex; align-items: center; gap: 10px; }
.suite-uptime { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }

.bar-strip { display: flex; gap: 2px; margin: 16px 0 6px; height: 34px; align-items: stretch; }
.bar { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--ok-fg); }
.bar-operational { background: var(--ok-fg); }
.bar-degraded { background: var(--warn-fg); }
.bar-outage { background: var(--dgr-fg); }
.bar-no_data { background: var(--line-strong); }
.bar-axis { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--faint); }

.endpoint-table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 13.5px; }
.endpoint-table td { padding: 8px 0; border-top: 1px solid var(--line); }
.endpoint-label { font-family: var(--font-mono); font-size: 12.5px; }
.endpoint-uptime { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

.bar-legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 18px 0 8px; font-size: 12.5px; color: var(--muted); }
.bar-legend span { display: inline-flex; align-items: center; gap: 7px; }
.bar-legend i { width: 10px; height: 14px; border-radius: 2px; display: inline-block; flex: none; }

.incident { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 14px; }
.incident-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.incident-head h3 { font-size: 16px; }
.incident-when { color: var(--faint); font-size: 12.5px; margin-left: auto; }
.incident-timeline { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.incident-timeline li { display: grid; grid-template-columns: 96px 52px 1fr; gap: 12px; align-items: baseline; }
.update-state {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; text-align: center;
}
.update-resolved { background: var(--ok-bg); color: var(--ok-fg); }
.update-monitoring { background: var(--sand-bg); color: var(--sand-fg); }
.update-identified { background: var(--warn-bg); color: var(--warn-fg); }
.update-investigating { background: var(--dgr-bg); color: var(--dgr-fg); }
.update-time { color: var(--faint); font-size: 12px; font-family: var(--font-mono); }
.incident-timeline p { font-size: 14px; }
@media (max-width: 640px) {
  .incident-timeline li { grid-template-columns: 1fr; gap: 4px; }
  .status-target { margin-left: 0; }
}

/* ---------- console: the live session token ---------- */

.token-card {
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: 12px; padding: 18px 20px; margin: 18px 0 24px;
}
.token-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.token-card-head h2 { font-size: 16px; margin-bottom: 4px; }
.token-card-head p { color: var(--muted); font-size: 13.5px; max-width: 46rem; }
.token-card-head .btn { flex: none; }
.token-card-value {
  display: block; margin-top: 14px; padding: 12px 14px;
  background: var(--ground); border-radius: 8px;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* -- API reference (server-rendered from openapi.yaml) -------------------- */
.ref-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ref-head h1 { margin-bottom: 4px; }
.ref-lede { color: var(--muted); font-size: 14px; margin: 0; }
.ref-downloads { display: flex; gap: 8px; flex-shrink: 0; padding-top: 6px; }
.ref-server { background: var(--surface2); border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 12px 16px; font-size: 14px; color: var(--muted); }
.ref-server code { color: var(--ink); }

.jump-nav-tight { margin: 10px 0 4px; }
.ref-verb { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-right: 6px; }

.ref-op { border-top: 1px solid var(--line-strong); padding-top: 32px; margin-top: 40px; }
.ref-op-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ref-op-path { font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.chip-get { background: var(--accent-soft); color: var(--accent); letter-spacing: .04em; }
.ref-op h2 { margin: 0 0 8px; }
.ref-op h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin: 28px 0 10px; }
.ref-intro { margin-top: 24px; }
/* .prose dims its own first paragraph as a lede; inside the reference these
   are body copy, not a page opener. */
.ref-intro > p:first-child, .ref-op-desc > p:first-child { font-size: 15px; color: var(--ink); }
.ref-op-desc { margin-bottom: 8px; }
.ref-errors-note { font-size: 14px; color: var(--muted); margin: 0; }

.table-scroll { overflow-x: auto; }
.ref-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ref-table th { text-align: left; font-weight: 600; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--line-strong); }
.ref-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.ref-table tr:last-child td { border-bottom: none; }
.ref-table code { font-size: 13px; }
.ref-type { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.ref-example { color: var(--muted); font-size: 13px; }

.ref-schemas { border-top: 1px solid var(--line-strong); padding-top: 32px; margin-top: 48px; }
.ref-schema { margin-top: 32px; }
.ref-schema h3 { font-family: var(--font-mono); font-size: 15px; }
.ref-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line-strong);
  font-size: 14px; color: var(--muted); }

/* Sidebar anchors within the page being read (the reference's operations). */
.sidebar-children { margin: 2px 0 8px; padding-left: 12px; border-left: 1px solid var(--line); }
.sidebar-child {
  display: block; padding: 4px 10px; font-size: 13px; color: var(--muted);
  font-family: var(--font-mono); border-radius: 6px; text-decoration: none;
}
.sidebar-child:hover { color: var(--accent); background: var(--surface2); text-decoration: none; }
/* Operation entries in the right rail are paths - keep them on one line. */
.toc-op { font-family: var(--font-mono); font-size: 11.5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }


/* The in-page jump list backs up the right-hand rail, which is hidden below
   1180px. Declared last so the media query is not overridden by source order -
   the default and its override must stay in this sequence. */
.ref-jump { display: none; }
@media (max-width: 1180px) {
  .ref-jump { display: flex; }
}

/* ---------- API keys console ---------- */
.key-create { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 24px 0 28px; }
.key-create label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin-bottom: 6px; }
.key-create input { width: 280px; padding: 9px 12px; font-size: 14px; font-family: var(--font-body);
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
.key-create input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Quiet rows, no vertical rules - the console pattern from Claude's and
   OpenAI's key pages. The name is the identifier, so it leads. */
.key-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.key-table th { text-align: left; font-weight: 500; font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted); padding: 0 20px 10px 0; border-bottom: 1px solid var(--line); }
.key-table td { padding: 0 20px 0 0; height: 56px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.key-table tr:last-child td { border-bottom: none; }
.key-table th:last-child, .key-table td:last-child { padding-right: 0; text-align: right; width: 1%; white-space: nowrap; }
.key-dim { color: var(--muted); white-space: nowrap; }
.key-masked { font-family: var(--font-mono); font-size: 13px; color: var(--muted); letter-spacing: .12em; }
.key-row-revoked td { opacity: .5; }

/* The alias is editable in place. The underline hugs the text rather than the
   column, so a short name does not trail a long dash across the row. */
.key-name-cell { width: 34%; }
.key-rename { display: flex; align-items: center; gap: 8px; }
.key-rename input { width: 15ch; max-width: 100%; padding: 4px 2px; font-size: 14px;
  font-family: var(--font-body); color: var(--ink); background: transparent;
  border: none; border-bottom: 1px solid transparent; border-radius: 0; }
.key-rename input:hover { border-bottom-color: var(--line-strong); }
.key-rename input:focus { outline: none; border-bottom-color: var(--accent); }
.key-rename button { opacity: 0; transition: opacity .12s; flex-shrink: 0; }
.key-rename:focus-within button { opacity: 1; }
.key-revoke:hover { color: var(--dgr-fg); border-color: var(--dgr-fg); }

.key-empty { color: var(--muted); font-size: 14px; padding: 24px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); margin: 0 0 20px; }