/* graphite-terminal page layer - etelej.com lab-sites.
   Unlayered page CSS over the identity tokens (graphite-theme.css, byte
   identical to upstream). Site-specific classes are gt-*; identity rules
   and grammar follow the graphite-terminal prompt-pack: stepped graphite
   surfaces, mono display/Inter body, lime = action only, tight radius,
   4px grid, 120ms feedback, flat shadows.
   Fonts: woff2 extracted from @fontsource/inter + @fontsource/jetbrains-mono
   (latin, 400/500/600 Inter; 400/600/700 JBM).

   PROVISIONAL (upstream candidates): the [data-scheme="light"] token block
   and the scattered [data-scheme="light"] component rules in this file
   derive the identity's light scheme in-site. Also upstream candidates: the
   mobile patterns added 2026-10-26 - two-row masthead wrap (brand + toggle
   row, nav row), sticky-first-column data tables on narrow screens, the
   .gt-diagram-scroll minimum-width pan wrapper, and the stacked reading
   pager - and the anchor-as-button color guard (a.gt-btn / a.gt-btn--primary
   token rules; prompt-pack guidance candidate: page layers that recolor
   generic anchors must exclude component buttons, or anchor primary
   buttons render accent text on the primary ground in dark mode). When
   upstreaming, gather ALL of them (grep data-scheme; mobile
   block) into identities/graphite-terminal (theme.css + prompt-pack
   responsive guidance), then resync this file's copy byte-identical. */

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/graphite/jetbrains-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/graphite/jetbrains-mono-600.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/graphite/jetbrains-mono-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/graphite/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/graphite/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/graphite/inter-600.woff2") format("woff2");
}

/* ---- scheme toggle hooks (light values provisional, see header) ---- */
[data-theme="graphite-terminal"][data-scheme="light"] {
  --background: oklch(97.5% 0.004 255);
  --foreground: oklch(22% 0.012 255);
  --card: oklch(100% 0 0);
  --card-foreground: oklch(22% 0.012 255);
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(22% 0.012 255);
  --primary: oklch(74% 0.13 118);
  --primary-foreground: oklch(15% 0.02 118);
  --secondary: oklch(58% 0.11 118 / 0.14);
  --secondary-foreground: oklch(30% 0.03 145);
  --muted: oklch(94% 0.005 255);
  --muted-foreground: oklch(42% 0.012 255);
  --accent: oklch(58% 0.11 118 / 0.14);
  --accent-foreground: oklch(38% 0.08 145);
  --destructive: oklch(52% 0.17 25);
  --destructive-foreground: oklch(99% 0.005 25);
  --ok: oklch(52% 0.12 155);
  --ok-soft: oklch(52% 0.12 155 / 0.12);
  --ok-foreground: oklch(40% 0.10 155);
  --warn: oklch(58% 0.12 85);
  --warn-soft: oklch(58% 0.12 85 / 0.12);
  --warn-foreground: oklch(42% 0.10 75);
  --danger-soft: oklch(52% 0.17 25 / 0.10);
  --danger-soft-foreground: oklch(45% 0.15 25);
  --border: oklch(25% 0.012 255 / 0.18);
  --input: oklch(25% 0.012 255 / 0.18);
  --ring: oklch(52% 0.12 145);
  --shadow-identity: 0 1px 2px oklch(0% 0 0 / 0.12);
  --identity-gradient-to: oklch(32% 0.06 155);
  color-scheme: light;
}
/* Links and inline action text need 4.5:1 on the light ground; the dark
   lime cannot carry text there, so action text derives to deep green. */
[data-theme="graphite-terminal"][data-scheme="light"] a,
[data-theme="graphite-terminal"][data-scheme="light"] .gt-link,
[data-theme="graphite-terminal"][data-scheme="light"] .gt-kicker,
[data-theme="graphite-terminal"][data-scheme="light"] .gt-eyebrow {
  color: oklch(40% 0.09 148);
}

/* ---- base ---- */
[data-theme="graphite-terminal"] body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-size: 15px;
  line-height: 1.55;
}
[data-theme="graphite-terminal"] a { color: var(--accent-foreground); }
/* Inline links inside prose are underlined - they must read as clickable
   even where whitespace is tight. Nav/masthead links opt out. */
[data-theme="graphite-terminal"] .gt-prose a,
[data-theme="graphite-terminal"] .gt-ep-read {
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="graphite-terminal"] ::selection {
  background: oklch(82% 0.12 118 / 0.28);
}

/* ---- masthead ---- */
.gt-masthead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: oklch(from var(--background) l c h / 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.gt-masthead-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  height: 52px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.gt-brand {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--foreground);
  white-space: nowrap;
  margin: 0;
  display: flex;
  align-items: baseline;
}
.gt-brand a { text-decoration: none; }
.gt-brand-home { color: var(--foreground); }
.gt-brand-site {
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--muted-foreground);
  margin-left: 10px;
}
.gt-brand-site:hover { color: var(--foreground); }
.gt-nav { display: flex; align-items: center; gap: 20px; font-size: 0.85rem; margin-left: auto; }
.gt-nav a { color: var(--muted-foreground); text-decoration: none; white-space: nowrap; }
.gt-nav a:hover { color: var(--foreground); }
.gt-nav a.gt-nav-active { color: var(--foreground); }
.gt-masthead-actions { display: flex; align-items: center; gap: 10px; }
.gt-menu-toggle {
  display: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: none;
  color: var(--foreground);
  cursor: pointer;
  padding: 0;
}
.gt-menu-toggle:hover { border-color: oklch(88% 0.006 255 / 0.45); }
[data-scheme="light"] .gt-menu-toggle:hover { border-color: oklch(25% 0.012 255 / 0.4); }
.gt-menu-toggle .gt-icon-x { display: none; }
.gt-menu-toggle[aria-expanded="true"] .gt-icon-menu { display: none; }
.gt-menu-toggle[aria-expanded="true"] .gt-icon-x { display: block; }

/* scheme toggle: a mono terminal control; the icon shows the target scheme
   (sun while dark, moon while light) */
.gt-scheme-toggle {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 5px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: border-color 120ms cubic-bezier(0, 0, 0.2, 1), color 120ms cubic-bezier(0, 0, 0.2, 1);
}
.gt-scheme-toggle:hover { border-color: var(--ring); color: var(--foreground); }
.gt-scheme-toggle .gt-icon-moon { display: none; }
[data-scheme="light"] .gt-scheme-toggle .gt-icon-sun { display: none; }
[data-scheme="light"] .gt-scheme-toggle .gt-icon-moon { display: block; }

/* Device-local lab-site pin (lab-favorites.js); pushpin, amber when on. */
.gt-pin-toggle {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  color: var(--muted-foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  cursor: pointer;
  transition: border-color 120ms cubic-bezier(0, 0, 0.2, 1), color 120ms cubic-bezier(0, 0, 0.2, 1);
}
.gt-pin-toggle:hover { border-color: var(--ring); color: var(--foreground); }
.gt-pin-toggle.is-on { border-color: var(--accent); background: var(--accent); color: #0d1117; }
.gt-pin-toggle:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---- hero ---- */
.gt-hero {
  border-bottom: 1px solid var(--border);
  background: var(--background);
}
.gt-hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px;
  align-items: center;
}
.gt-kicker {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 12px;
}
.gt-hero h1 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  margin: 0 0 12px;
}
.gt-dek { color: var(--muted-foreground); font-size: 1rem; margin: 0; }
.gt-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
}
.gt-hero-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 12px;
}
/* article-header variant: the hero renders below a console tool - the
   tool is the first content element in DOM order (P3/P9) */
.gt-hero--article {
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 24px 0;
}
.gt-hero--article .gt-hero-inner {
  grid-template-columns: 1fr;
  padding: 32px 24px;
}
/* media frame: any briefing hero drops an image straight in */
.gt-hero-panel img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
/* ---- title row: heading left, mini explainer player right (the
   mini-player convention's title-row slot; the component owns its own
   look, this owns only the placement) ---- */
.gt-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  margin-bottom: 12px;
}
.gt-title-row h1 { margin: 0; }
.gt-title-row .lab-mini { flex: 0 1 380px; min-width: 300px; margin-left: auto; }

/* ---- sections ---- */
.gt-section { padding: 32px 0; border-bottom: 1px solid var(--border); }
.gt-section-inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.gt-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  margin-bottom: 6px;
}
.gt-section h2 { font-size: 1.35rem; margin: 0 0 4px; }
.gt-section-support { color: var(--muted-foreground); margin: 0 0 20px; }
.gt-prose { max-width: 680px; }
.gt-prose p { margin: 0 0 14px; }
.gt-prose ul, .gt-prose ol { margin: 0 0 14px; padding-left: 22px; }
.gt-prose li { margin-bottom: 6px; }
.gt-prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* tables (specs pages): mono headers, hairline grid, tabular numbers */
.gt-prose table { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.gt-prose th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.gt-prose td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.gt-prose tbody tr:last-child td { border-bottom: 0; }
.gt-src {
  display: block;
  font-size: 0.76rem;
  color: var(--muted-foreground);
  margin-top: 2px;
}

/* ---- cards, callouts, chips ---- */
.gt-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}
.gt-callout {
  display: flex;
  gap: 14px;
  align-items: baseline;
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warn);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 28px;
}
.gt-callout-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--warn-foreground);
  flex: none;
}
.gt-callout p { margin: 0; color: var(--muted-foreground); }
.gt-chip {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
}
.gt-chip--ok { color: var(--ok-foreground); background: var(--ok-soft); border-color: transparent; }
.gt-chip--warn { color: var(--warn-foreground); background: var(--warn-soft); border-color: transparent; }
.gt-chip--danger { color: var(--danger-soft-foreground); background: var(--danger-soft); border-color: transparent; }

/* ---- buttons ---- */
.gt-btn {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: calc(var(--radius) - 4px);
  padding: 8px 16px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--muted);
  color: var(--foreground);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 120ms cubic-bezier(0, 0, 0.2, 1),
    border-color 120ms cubic-bezier(0, 0, 0.2, 1),
    box-shadow 120ms cubic-bezier(0, 0, 0.2, 1);
}
.gt-btn:hover { border-color: oklch(88% 0.006 255 / 0.45); }
[data-scheme="light"] .gt-btn:hover { border-color: oklch(25% 0.012 255 / 0.35); }
.gt-btn--primary {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}
.gt-btn--primary:hover {
  box-shadow: 0 0 0 1px var(--ring), 0 0 14px oklch(82% 0.12 118 / 0.25);
}
.gt-btn--small { padding: 4px 10px; font-size: 0.72rem; }
.gt-btn[hidden] { display: none; }
.gt-btn--danger { border-color: var(--destructive); color: var(--danger-soft-foreground); background: var(--danger-soft); }
/* anchors styled as buttons: the generic anchor color has higher
   specificity and would otherwise strip component colors - an
   <a class="gt-btn gt-btn--primary"> rendered light accent text on the
   light lime ground in dark mode. Restore the component's own token. */
[data-theme="graphite-terminal"] a.gt-btn { color: var(--foreground); }
[data-theme="graphite-terminal"] a.gt-btn--primary { color: var(--primary-foreground); }

/* ---- PKCE console ---- */
.gt-console {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  overflow: hidden;
  margin: 20px 0;
}
.gt-console-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--muted);
}
.gt-console-title {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
.gt-step-rail { border-right: 1px solid var(--border); padding: 12px 0; background: var(--background); }
.gt-step {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 8px 16px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted-foreground);
}
.gt-step .gt-step-num { color: var(--faint, var(--muted-foreground)); flex: none; }
/* Rail steps are real buttons (keyboard-operable, WCAG F54); strip UA button
   chrome. :where() keeps .gt-step--active/--link wins on background/border.
   The UA focus outline is the visible-focus mechanism and stays untouched. */
:where(button).gt-step {
  border: none;
  background: none;
  text-align: left;
  font-weight: inherit;
  line-height: inherit;
}
.gt-step--active {
  color: var(--foreground);
  background: var(--accent);
  border-left: 2px solid var(--primary);
  padding-left: 14px;
}
.gt-step--active .gt-step-num { color: var(--primary); }
.gt-step--done { color: var(--muted-foreground); }
.gt-step--done .gt-step-num::after { content: " \2713"; color: var(--ok); }
.gt-step--link { cursor: pointer; }
.gt-step--link:hover { color: var(--foreground); background: var(--muted); }
.gt-step--locked { opacity: 0.45; }
.gt-console-body { padding: 20px 24px; }
.gt-console-body h3 { font-size: 1rem; margin: 0 0 6px; }
.gt-console-note { color: var(--muted-foreground); font-size: 0.85rem; margin: 0 0 16px; }
.gt-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; align-items: center; }

.gt-kv {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 14px;
  font-size: 0.8rem;
  margin: 12px 0;
}
.gt-kv dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
  padding-top: 2px;
}
.gt-kv dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  word-break: break-all;
}
.gt-kv dd .gt-annot { display: block; font-family: var(--font-sans); font-size: 0.74rem; color: var(--muted-foreground); margin-top: 2px; }

/* wire log: every request and response, annotated */
/* wire: a live side column - every request lands beside the flow */
.gt-wire {
  border-left: 1px solid var(--border);
  background: var(--background);
  padding: 14px 16px;
  position: sticky;
  top: 52px;
  align-self: start;
  max-height: calc(100vh - 52px);
  overflow-y: auto;
}
.gt-wire-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 8px;
}
.gt-wire-entry { margin-bottom: 10px; }
.gt-wire-line {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
  margin: 0;
}
.gt-wire-tag { font-weight: 700; }
.gt-wire-tag--get { color: var(--ok-foreground); }
.gt-wire-tag--post { color: var(--warn-foreground); }
.gt-wire-tag--err { color: var(--danger-soft-foreground); }
.gt-wire-entry--error .gt-wire-line { color: var(--danger-soft-foreground); }
.gt-wire-entry--ok .gt-wire-line { color: var(--ok-foreground); }
.gt-wire-empty { color: var(--muted-foreground); font-size: 0.78rem; font-style: italic; }

/* ---- jwt console: jwt-owned layout (Technical Decision 3) ----
   Capped hybrid, one working column; views as APG tabs; stepper as real
   buttons; wire as a full-width view, not a side pane. */
.gt-jwt-appbar { flex-wrap: wrap; row-gap: 8px; justify-content: flex-start; }
.gt-jwt-spacer { flex: 1 1 12px; }
.gt-jwt-body { padding: 16px 20px 20px; }
.gt-jwt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin: 16px 0 0;
  padding: 0 4px;
}
.gt-jwt-tab {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted-foreground);
  background: none;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 7px 14px;
  cursor: pointer;
}
.gt-jwt-tab:hover { color: var(--foreground); }
.gt-jwt-tab[aria-selected="true"] {
  color: var(--primary);
  background: var(--background);
  border-color: var(--border);
  border-bottom-color: var(--background);
  font-weight: 600;
}
.gt-jwt-panel { padding-top: 16px; }
.gt-jwt-panel[hidden] { display: none; }
.gt-jwt-stepper { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.gt-jwt-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--foreground);
  padding: 6px 11px;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border);
  background: var(--muted);
  cursor: pointer;
}
.gt-jwt-step:hover { border-color: oklch(88% 0.006 255 / 0.45); }
.gt-jwt-step[aria-current] { border-color: var(--primary); color: var(--primary); }
.gt-jwt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted-foreground); opacity: 0.45; }
.gt-jwt-dot--pass { background: var(--ok); opacity: 1; }
.gt-jwt-dot--fail { background: var(--destructive); opacity: 1; }
/* hardening lint: subordinate to the verdict on purpose */
.gt-jwt-hardening {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 12px 0 0;
  font-size: 0.8rem;
  color: var(--muted-foreground);
}
.gt-jwt-hardening ul { margin: 6px 0 0; padding-left: 18px; }
.gt-jwt-hardening li { margin-bottom: 4px; }
.gt-jwt-hardening b { color: var(--warn-foreground); font-family: var(--font-mono); font-size: 0.72rem; }
/* wire as a view: full width when visited, absent when not */
.gt-jwt-wire { border: 1px solid var(--border); border-radius: 8px; background: var(--background); }
.gt-jwt-wire-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
}
.gt-jwt-wire-strip [data-testid="jwt-wire-count"] { color: var(--ok-foreground); }
.gt-jwt-wire-body { padding: 14px 16px; max-height: 60vh; overflow-y: auto; }

/* ---- pkce console: pkce-owned layout ----
   Explorer: step rail + one working column that earns the width; the wire
   is a full-width drawer (status line + drawer), not a 280px side pane. */
.gt-pkce-appbar { flex-wrap: wrap; row-gap: 8px; justify-content: flex-start; }
.gt-pkce-spacer { flex: 1 1 12px; }
.gt-pkce-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.gt-pkce-fold { border: 1px solid var(--border); border-radius: 8px; background: var(--popover); margin: 14px 0; }
.gt-pkce-fold > summary { cursor: pointer; padding: 10px 14px; font-family: var(--font-mono); font-size: 0.74rem; color: var(--foreground); list-style: none; }
.gt-pkce-fold > summary::-webkit-details-marker { display: none; }
.gt-pkce-fold > summary::before { content: "[+] "; color: var(--muted-foreground); }
.gt-pkce-fold[open] > summary::before { content: "[-] "; }
.gt-pkce-fold-body { padding: 0 14px 14px; }
.gt-pkce-fold select {
  max-width: 100%;
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--foreground);
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}
/* wire as a drawer: a quiet status line while closed, full width when opened */
.gt-pkce-wire { border-top: 1px solid var(--border); background: var(--background); }
.gt-pkce-wire > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
}
.gt-pkce-wire > summary::-webkit-details-marker { display: none; }
.gt-pkce-wire > summary::before { content: "[+] "; color: var(--muted-foreground); }
.gt-pkce-wire[open] > summary::before { content: "[-] "; }
.pkce-wire-count { color: var(--ok-foreground); }
.gt-pkce-wire-body { padding: 4px 20px 16px; max-height: 60vh; overflow-y: auto; }

/* ---- device console: device-owned layout ----
   Near-workbench two-sided sim (device + phone) with honest wizard gating
   on a real-button rail; the polling strip is the quiet status line and
   the wire is a full-width drawer, so the stage earns the page width. */
.gt-device-appbar { flex-wrap: wrap; row-gap: 8px; justify-content: flex-start; }
.gt-device-spacer { flex: 1 1 12px; }
.gt-device-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr); }
.gt-device-wire { border-top: 1px solid var(--border); background: var(--background); }
.gt-device-wire > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  padding: 10px 20px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
}
.gt-device-wire > summary::-webkit-details-marker { display: none; }
.gt-device-wire > summary::before { content: "[+] "; color: var(--muted-foreground); }
.gt-device-wire[open] > summary::before { content: "[-] "; }
.gt-device-wire-body { padding: 4px 20px 16px; max-height: 60vh; overflow-y: auto; }

/* mock AS panel: the authorization server the visitor logs into */
.gt-as-panel {
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin: 14px 0;
}
.gt-as-head {
  padding: 8px 14px;
  background: var(--popover);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.gt-as-body { padding: 18px 20px; background: var(--popover); }
.gt-as-body label {
  display: block;
  font-size: 0.78rem;
  font-weight: 500;
  margin: 10px 0 4px;
}
.gt-as-body input[type="text"], .gt-as-body input[type="password"] {
  width: 100%;
  max-width: 320px;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 8px 10px;
  border: 1px solid var(--input);
  border-radius: calc(var(--radius) - 4px);
  background: var(--background);
  color: var(--foreground);
}
.gt-scope-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  margin: 8px 0;
}

/* token view */
.gt-token-view {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 12px 0;
}
.gt-token-view pre {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-all;
}
.gt-token-seg--header { color: var(--warn-foreground); }
.gt-token-seg--payload { color: var(--ok-foreground); }
.gt-token-seg--signature { color: var(--muted-foreground); }

/* result banner */
.gt-result {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  margin: 14px 0;
  font-size: 0.85rem;
}
.gt-result--ok { background: var(--ok-soft); color: var(--ok-foreground); border-color: transparent; }
.gt-result--error { background: var(--danger-soft); color: var(--danger-soft-foreground); border-color: transparent; }

/* ---- audio explainer card: one compact link row ---- */
.gt-ep-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 10px 14px;
  margin: 16px 0;
  max-width: 560px;
  text-decoration: none;
  transition: border-color 120ms cubic-bezier(0, 0, 0.2, 1);
}
.gt-ep-card:hover { border-color: oklch(88% 0.006 255 / 0.45); }
[data-scheme="light"] .gt-ep-card:hover { border-color: oklch(25% 0.012 255 / 0.4); }
.gt-ep-badge {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--secondary);
  color: var(--primary);
}
[data-scheme="light"] .gt-ep-badge { color: oklch(38% 0.08 145); }
.gt-ep-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gt-ep-title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--foreground);
}
.gt-ep-meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
}
.gt-ep-go { margin-left: auto; flex: none; color: var(--muted-foreground); transition: color 120ms cubic-bezier(0, 0, 0.2, 1), transform 120ms cubic-bezier(0, 0, 0.2, 1); }
.gt-ep-card:hover .gt-ep-go { color: var(--foreground); transform: translateX(2px); }

/* ---- reading-order pager ---- */
.gt-pager {
  max-width: 812px;
  margin: 8px 0 40px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.gt-pager > span:empty { display: none; }
.gt-pager-link {
  flex: 1;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  padding: 12px 16px;
  text-decoration: none;
  transition: border-color 120ms cubic-bezier(0, 0, 0.2, 1);
}
.gt-pager-link:hover { border-color: oklch(88% 0.006 255 / 0.45); }
[data-scheme="light"] .gt-pager-link:hover { border-color: oklch(25% 0.012 255 / 0.35); }
.gt-pager-link--next { margin-left: auto; text-align: right; }
.gt-pager-dir {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
}
[data-scheme="light"] .gt-pager-dir { color: oklch(40% 0.09 148); }
.gt-pager-label { font-size: 0.88rem; font-weight: 500; color: var(--foreground); }

/* ---- flow diagrams: hand-authored SVG with a step-through helper ---- */
.gt-diagram g.gt-msg, .gt-diagram g.gt-actor { transition: opacity 120ms cubic-bezier(0, 0, 0.2, 1); }
.gt-diagram g.gt-msg.gt-dim, .gt-diagram g.gt-actor.gt-dim { opacity: 0.18; }
.gt-diagram g.gt-msg.gt-hot line, .gt-diagram g.gt-msg.gt-hot path { stroke: var(--primary); }
.gt-diagram g.gt-msg.gt-hot text { fill: var(--primary); }
[data-scheme="light"] .gt-diagram g.gt-msg.gt-hot line,
[data-scheme="light"] .gt-diagram g.gt-msg.gt-hot path { stroke: oklch(40% 0.09 148); }
[data-scheme="light"] .gt-diagram g.gt-msg.gt-hot text { fill: oklch(40% 0.09 148); }
.gt-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 4px;
}
.gt-stepbtn {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted-foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 5px 10px;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0, 0, 0.2, 1),
    color 120ms cubic-bezier(0, 0, 0.2, 1),
    border-color 120ms cubic-bezier(0, 0, 0.2, 1);
}
.gt-stepbtn:hover { color: var(--foreground); border-color: oklch(88% 0.006 255 / 0.45); }
.gt-stepbtn[aria-pressed="true"] {
  color: var(--primary);
  background: var(--secondary);
  border-color: transparent;
}
.gt-diagram-note { color: var(--muted-foreground); font-size: 0.8rem; margin: 10px 0 0; min-height: 1.2em; }

/* channel legend: dashed = front channel (through the browser), solid = back channel (direct, TLS) */
.gt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--muted-foreground);
  margin: 10px 0 0;
}
.gt-legend svg { flex: none; }

/* ---- which-grant picker (entry page decision console) ----
   Questions left, live readout right: the console grammar from the flow
   pages (stepped surfaces, mono controls, lime = selection only). */
.gt-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  margin: 20px 0;
  overflow: hidden;
}
.gt-picker-form { padding: 20px 22px; border-right: 1px solid var(--border); min-width: 0; }
.gt-picker-field { margin: 0 0 18px; }
.gt-picker-field:last-child { margin-bottom: 0; }
.gt-picker-field[hidden] { display: none; }
.gt-picker-q {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  display: block;
  margin-bottom: 10px;
}
.gt-picker-opts { display: grid; gap: 8px; }
.gt-opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 1px;
  text-align: left;
  font-family: inherit;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 4px);
  padding: 9px 14px;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(0, 0, 0.2, 1),
    border-color 120ms cubic-bezier(0, 0, 0.2, 1);
}
.gt-opt::before {
  content: "[ ]";
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted-foreground);
  grid-row: 1 / span 2;
  padding-top: 1px;
}
.gt-opt-t { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; color: var(--foreground); }
.gt-opt-s { font-size: 0.78rem; color: var(--muted-foreground); }
.gt-opt:hover { border-color: oklch(88% 0.006 255 / 0.45); }
[data-scheme="light"] .gt-opt:hover { border-color: oklch(25% 0.012 255 / 0.35); }
.gt-opt[aria-pressed="true"] {
  background: var(--accent);
  border-color: transparent;
}
.gt-opt[aria-pressed="true"]::before { content: "[x]"; color: var(--primary); }
.gt-opt[aria-pressed="true"] .gt-opt-t { color: var(--primary); }

/* the readout: an always-present verdict panel */
.gt-picker-out { background: var(--background); min-width: 0; display: flex; flex-direction: column; }
.gt-picker-out .gt-console-head { padding: 10px 18px; }
.gt-picker-clear {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: none;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
}
.gt-picker-clear:hover { color: var(--foreground); }
.gt-picker-clear[hidden] { display: none; }
.gt-picker-body { padding: 16px 18px 20px; }
.gt-picker-empty { margin: 0; }
.gt-picker-caret {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--primary);
  margin: 2px 0 12px;
}
.gt-caret {
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  background: var(--primary);
  vertical-align: text-bottom;
  animation: gt-caret-blink 1.1s steps(2, start) infinite;
}
@keyframes gt-caret-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .gt-caret { animation: none; } }
.gt-picker-empty-note { color: var(--muted-foreground); font-size: 0.8rem; margin: 0; }
.gt-picker-verdict[hidden] { display: none; }
.gt-picker-grant { font-family: var(--font-mono); font-size: 0.98rem; font-weight: 600; margin: 0 0 2px; }
.gt-picker-ref {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
  margin: 0 0 10px;
}
.gt-picker-why { color: var(--muted-foreground); font-size: 0.82rem; margin: 0 0 12px; }
.gt-picker-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gt-picker-chips .gt-chip { font-size: 0.66rem; }
.gt-picker-verdict .gt-actions { margin-top: 14px; }

/* ---- grants comparison table (entry page) ----
   The entry table sits outside .gt-prose, so it carries its own styling:
   left mono headers, hairline grid, status chip in the grant cell, retired
   rows muted. On narrow screens rows become cards - no panning. */
.gt-grants-card { padding: 0; overflow-x: auto; }
.gt-grants { width: 100%; border-collapse: collapse; font-size: 0.84rem; }
.gt-grants th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.gt-grants td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.gt-grants tbody tr:last-child td { border-bottom: 0; }
.gt-grants tbody tr { transition: background-color 120ms cubic-bezier(0, 0, 0.2, 1); }
.gt-grants tbody tr:hover { background: var(--muted); }
.gt-grants .gt-grant-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.gt-grants .gt-grant-name .gt-chip { flex: none; }
.gt-row--retired td { opacity: 0.62; }
.gt-grants tr.gt-row--hot,
.gt-grants tr.gt-row--hot:hover {
  background: var(--secondary);
  box-shadow: inset 2px 0 0 var(--primary);
}

/* ---- footer ---- */
.gt-footer {
  border-top: 1px solid var(--border);
  padding: 24px 0 40px;
}
.gt-footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--muted-foreground);
  flex-wrap: wrap;
}

/* diagram scroll wrapper: diagrams keep a readable minimum width and pan
   horizontally on narrow screens instead of shrinking to illegibility */
.gt-diagram-scroll { overflow-x: auto; margin: 16px 0 0; -webkit-overflow-scrolling: touch; }
.gt-diagram-scroll svg.gt-diagram { display: block; min-width: 640px; }

/* ---- responsive (390 first-class) ---- */
@media (max-width: 1020px) {
  .gt-picker { grid-template-columns: 1fr; }
  .gt-picker-form { border-right: 0; border-bottom: 1px solid var(--border); }
  .gt-wire {
    grid-column: 1 / -1;
    border-left: 0;
    border-top: 1px solid var(--border);
    position: static;
    max-height: 260px;
  }
}
@media (max-width: 760px) {
  /* masthead: one row - brand left, theme toggle + menu button right;
     the menu button discloses the nav as a stacked list. Nav and actions
     get explicit order so the actions stay in the top row when the nav
     opens (nav is flex-basis:100% and would otherwise push them down). */
  .gt-masthead-inner { flex-wrap: wrap; height: auto; padding: 0 16px; }
  .gt-brand { padding: 10px 0; }
  .gt-masthead-actions { margin-left: auto; order: 1; }
  .gt-menu-toggle { display: grid; }
  .gt-nav { display: none; flex-basis: 100%; order: 2; flex-direction: column; align-items: stretch; gap: 0; padding: 2px 0 10px; }
  .gt-masthead.is-open .gt-nav { display: flex; }
  .gt-nav a { padding: 11px 0; font-size: 0.9rem; border-top: 1px solid var(--border); }
  .gt-nav a:first-child { border-top: 0; }
  .gt-hero-inner { grid-template-columns: 1fr; padding: 32px 20px 28px; }
  .gt-title-row .lab-mini { flex-basis: 100%; min-width: 0; margin-left: 0; }
  .gt-section-inner { padding: 0 20px; }
  /* prose tables: tighter cells; the first column sticks while the rest pan */
  .gt-prose table { font-size: 0.8rem; }
  .gt-prose th, .gt-prose td { padding: 8px 10px; }
  .gt-prose table th:first-child, .gt-prose table td:first-child {
    position: sticky;
    left: 0;
    background: var(--card);
    box-shadow: 1px 0 0 var(--border);
  }
  /* grants table: rows become cards with inline labels - no panning */
  .gt-grants-card { overflow-x: visible; border: 0; background: none; padding: 0; }
  .gt-grants, .gt-grants tbody { display: block; }
  .gt-grants thead { display: none; }
  .gt-grants tr {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 8px;
    margin: 0 0 12px;
  }
  .gt-grants tr:hover { background: var(--card); }
  .gt-grants td {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 4px 12px;
    padding: 8px 12px;
  }
  .gt-grants tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
  .gt-grants td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    padding-top: 2px;
  }
  .gt-grants td[data-label="Grant"] { display: block; padding: 12px; }
  .gt-grants td[data-label="Grant"]::before { content: none; }
  .gt-grants td[data-label="Refresh?"] { border-bottom: 0 !important; }
  .gt-picker-form { padding: 16px 18px; }
  .gt-picker-field { margin-bottom: 14px; }
  .gt-pager { flex-direction: column; }
  .gt-pager-link { max-width: none; }
  .gt-pager-link--next { margin-left: 0; text-align: left; }
  .gt-pkce-grid { grid-template-columns: 1fr; }
  .gt-device-grid { grid-template-columns: 1fr; }
  /* rails wrap instead of panning: no console scrolls horizontally */
  .gt-pkce-grid .gt-step-rail,
  .gt-device-grid .gt-step-rail { flex-wrap: wrap; overflow-x: visible; }
  .gt-step-rail {
    display: flex;
    overflow-x: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 8px 12px;
    gap: 4px;
  }
  .gt-step { flex: none; padding: 6px 10px; }
  .gt-step--active { border-left: 0; border-bottom: 2px solid var(--primary); padding-left: 10px; }
  /* flows-page diagram rail: same tap-target band as the console rails (31px+) */
  .gt-steps .gt-stepbtn { padding: 8px 12px; }
  .gt-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .gt-kv dt { margin-top: 8px; }
  .gt-audio-card { flex-wrap: wrap; }
  .gt-audio-cta { margin-left: 0; width: 100%; }
  .gt-masthead-inner { padding: 0 20px; }
}