@charset "UTF-8";
:root {
  /* ── Accent — yellow is valid on DARK surfaces only, never on white. ── */
  --accent: #F5B800;
  --accent-dim: #F5B80033;
  --accent-mid: #F5B80066;
  --accent-soft: #fffbeb;
  --accent-dark: #8B6500;
  /* ── Brand status aliases (legacy names kept; equal to the §2 sev tokens below). ── */
  --green: #059669;
  --green-light: #ecfdf5;
  --green-border: #a7f3d0;
  --rose: #be123c;
  --rose-light: #fff1f2;
  --rose-border: #fecdd3;
  --dark-bg: #0f1117;
  /* ── Surfaces — pure white / black (never a raw #fff / #000 outside this file). ── */
  --white: #fff;
  --black: #000;
  /* ── Channel triplets (space-separated RGB) — for the modern `rgb(var(--x-rgb) / a)`
   *    token-at-opacity form. Each triple EQUALS its hex token's channels exactly
   *    (#F5B800 = 245 184 0, #0f1117 = 15 17 23, #171717 = 23 23 23, #e5e5e5 = 229 229 229,
   *    #6ee7b7 = 110 231 183). Never hand-encode a raw rgba() — use these (issue 17). ── */
  --white-rgb: 255 255 255;
  --black-rgb: 0 0 0;
  --accent-rgb: 245 184 0;
  --dark-bg-rgb: 15 17 23;
  --neutral-900-rgb: 23 23 23;
  --neutral-200-rgb: 229 229 229;
  --code-teal-rgb: 110 231 183;
  /* ── Accent — deep-gold gradient stop (member credit pill). ── */
  --accent-gold: #c98f00;
  /* ── Code syntax palette — on the DARK code surface only (docs / API samples);
   *    deliberately bright so it reads on near-black. Never used on white. ── */
  --code-blue: #93c5fd;
  --code-green: #34d399;
  --code-purple: #c4b5fd;
  --code-red: #fca5a5;
  --code-teal: #6ee7b7;
  /* ── Decorative — role-select illustration (terminal text + macOS window dots). ── */
  --term-green: #86efac;
  --tl-red: #ff5f57;
  --tl-amber: #ffbd2e;
  --tl-green: #28ca41;
  /* ── Neutrals ── */
  --neutral-900: #171717;
  --neutral-800: #262626;
  --neutral-700: #404040;
  --neutral-600: #525252;
  --neutral-500: #737373;
  --neutral-400: #a3a3a3;
  --neutral-300: #d4d4d4;
  --neutral-200: #e5e5e5;
  --neutral-100: #f5f5f5;
  --neutral-50: #fafafa;
  /* ── Radius — ONE value everywhere (genuine circles use 50%). ── */
  --radius: 3px;
  /* ── Control height — ev-btn and ev-input share this so side-by-side pairs align. ── */
  --control-height: 38px;
  /* ── Type — families ── */
  --font-ui: 'Geist', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  /* ── Type — scale (guidelines §1; use ONLY these sizes — no ad-hoc font-px). ── */
  --fs-title: 22px; /* page title */
  --fs-heading: 13.5px; /* card & section title */
  --fs-body: 13px; /* body */
  --fs-meta: 12.5px; /* secondary · meta */
  --fs-sub: 12px; /* sub · code (upper) */
  --fs-caption: 11.5px; /* caption · code (lower) */
  --fs-fine: 11px; /* caption (small) */
  --fs-micro: 10.5px; /* micro-label (mono, tracked) */
  --fs-nano: 10px; /* micro-label (small) · coin face */
  /* ── Type — display + sub-heading scale (guidelines §1). The app UI scale above
   *    tops at --fs-title (22px); the tokens below cover the larger MARKETING/display
   *    headings and the member "figure" numerals (KPI / credit counts), plus the
   *    sub-title band between --fs-title (22) and --fs-heading (13.5), and the mono
   *    "pico" labels below --fs-nano (10). Extracted at the EXACT current values
   *    (value-preserving — a lift-to-token, not a redesign); marketing rem literals
   *    map here at their computed px (root = 16px, so 0.875rem → 14px). The px in each
   *    name IS its value — a self-documenting catalogue (issue 14). A later pass may
   *    tighten this into fewer canonical steps. ── */
  --fs-hero: clamp(2.5rem, 6vw, 4.25rem); /* home hero h1 */
  --fs-section: clamp(2rem, 4vw, 3.25rem); /* home section-h2 */
  --fs-docs-h1: clamp(30px, 3.4vw, 36px); /* docs content h1 */
  --fs-40: 40px; /* role-select headline */
  --fs-36: 36px; /* legal h1 */
  --fs-30: 30px; /* dashboard spend / per-day figure */
  --fs-28: 28px; /* dashboard KPI figure · register h1 */
  --fs-26: 26px; /* billing on-system credits · monitor page h1 */
  --fs-24: 24px; /* billing total · dashboard stat · marketing use-card */
  --fs-21: 21px; /* billing pack credits · marketing step h3 */
  --fs-19: 19px; /* page-head title (tablet) · legal h2 */
  --fs-18: 18px; /* validate / api summary figures · marketing lead */
  --fs-17: 17px; /* domain link · monitor / docs h3 · marketing nav-brand */
  --fs-16: 16px; /* empty-state title · shell credits · api path · docs h4 */
  --fs-15-5: 15.5px; /* docs content body */
  --fs-15: 15px; /* modal title · billing total row · marketing form · docs h5 */
  --fs-14-5: 14.5px; /* add-row input */
  --fs-14: 14px; /* buttons · card labels · marketing body (most common) · docs h6 */
  --fs-9-5: 9.5px; /* mono micro-labels (docs nav · shell · monitor) */
  --fs-9: 9px; /* mono labels (shell · empty-step · badges) */
  --fs-8-5: 8.5px; /* smallest mono labels (shell currency · card brand) */
  /* ── Type — weights ── */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* ── Semantic status — the SINGLE source for every status indicator.
   *    Each: tint (bg) · border · text/icon · dot. (guidelines §2) ── */
  --ok-bg: #ecfdf5;
  --ok-border: #a7f3d0;
  --ok-fg: #065f46;
  --ok-dot: #059669;
  --warn-bg: #fffbeb;
  --warn-border: #fde68a;
  --warn-fg: #92400e;
  --warn-dot: #d97706;
  --bad-bg: #fff1f2;
  --bad-border: #fecdd3;
  --bad-fg: #9f1239;
  --bad-dot: #be123c;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;
  --info-fg: #2563eb;
  --info-dot: #2563eb;
  --na-bg: var(--neutral-100);
  --na-border: var(--neutral-200);
  --na-fg: var(--neutral-600);
  --na-dot: var(--neutral-400);
  /* 6th sev — accent (in-progress / working): brand yellow, spinner in the dot slot.
   * Uses the accent tokens above — bg = --accent-soft, mid = --accent-mid, fg = --accent-dark,
   * dot = --accent. No parallel --accent-bg/-fg set (guidelines §3). */
  /* ── Spacing scale (4px base) ── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  /* ── Motion — canonical durations (guidelines §1/§12; ~120ms state, ~250ms eased move). ── */
  --dur-fast: .12s;
  --dur-base: .15s;
  --dur-slow: .25s;
  /* ── Elevation — a flat system; prefer borders over shadows. ── */
  --shadow-sm: 0 1px 2px rgb(var(--black-rgb) / 0.04);
  --shadow-md: 0 12px 32px rgb(var(--black-rgb) / 0.10);
  --shadow-lg: 0 24px 56px rgb(var(--black-rgb) / 0.18);
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgb(var(--black-rgb)/0);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

ol, ul {
  padding-left: 2rem;
}

ol, ul, dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol, ul ul, ol ul, ul ol {
  margin-bottom: 0;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

b, strong {
  font-weight: bolder;
}

small {
  font-size: 0.875em;
}

sub, sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

figure {
  margin: 0 0 1rem;
}

img, svg {
  vertical-align: middle;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: var(--neutral-500);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead, tbody, tfoot, tr, td, th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

button, input, optgroup, select, textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button, select {
  text-transform: none;
}

button, [type=button], [type=reset], [type=submit] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled) {
  cursor: pointer;
}

summary {
  cursor: pointer;
}

textarea {
  resize: vertical;
}

[hidden] {
  display: none !important;
}

/* ── BUTTONS ──────────────────────────────────────────────────── */
/*
 * Control-height scale: 38px (matches ev-input).
 * Both ev-btn and ev-input share this height so side-by-side
 * input/button pairs align perfectly.
 * (--control-height is defined once in _tokens.scss.)
 */
.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  height: var(--control-height);
  padding: 0 14px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}

.ev-btn--primary {
  background: var(--neutral-900);
  color: var(--white);
  border-color: var(--neutral-900);
}

.ev-btn--primary:hover {
  background: var(--neutral-800);
}

/* Dark major-action on a white surface (§1) — e.g. "Re-check now" on the report.
   Renamed from ev-btn--accent (it renders black, not accent-yellow). */
.ev-btn--dark {
  background: var(--neutral-900);
  color: var(--white);
  border-color: var(--neutral-900);
}

.ev-btn--dark:hover {
  background: var(--neutral-800);
}

.ev-btn--ghost {
  background: var(--white);
  color: var(--neutral-700);
  border-color: var(--neutral-200);
}

.ev-btn--ghost:hover {
  background: var(--neutral-50);
  border-color: var(--neutral-300);
  color: var(--neutral-900);
}

.ev-btn--danger-ghost {
  background: var(--white);
  color: var(--rose);
  border-color: var(--neutral-200);
}

.ev-btn--danger-ghost:hover {
  background: var(--bad-bg);
  border-color: var(--bad-border);
}

.ev-btn--danger {
  background: var(--rose);
  color: var(--white);
  border-color: var(--rose);
}

.ev-btn--danger:hover {
  background: var(--bad-fg);
  border-color: var(--bad-fg);
}

.ev-btn--sm {
  height: 30px;
  padding: 0 11px;
  font-size: var(--fs-meta);
}

.ev-btn svg {
  display: block;
}

/* ── INPUT ────────────────────────────────────────────────────── */
.ev-input {
  flex: 1;
  min-width: 0;
  height: var(--control-height);
  padding: 0 12px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius);
  background: var(--white);
  font: inherit;
  font-size: var(--fs-heading);
  color: var(--neutral-900);
  transition: border-color 0.12s, box-shadow 0.12s;
}

.ev-input::placeholder {
  color: var(--neutral-400);
}

.ev-input:focus {
  outline: none;
  border-color: var(--neutral-900);
  box-shadow: 0 0 0 3px rgb(var(--black-rgb)/0.05);
}

.ev-input--sm {
  height: 32px;
  font-size: var(--fs-body);
}

/* ── SPINNER (needed by ev-status accent + checking states) ───── */
.ev-spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--accent-mid);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-spinner {
    animation: none;
  }
}
/* ── CANONICAL INLINE LINK (§api.overrides.css) ───────────────── */
.ev-link {
  color: var(--neutral-900);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness 0.12s;
}

.ev-link:hover {
  text-decoration-thickness: 2px;
}

/* ── STATUS ───────────────────────────────────────────────────────────────────
   ONE status primitive that replaces ~10 parallel families app-wide. Colour comes
   from the semantic tokens in _tokens.scss / foundation.css (--ok/-warn/-bad/-info/-na-*,
   --accent-*), keyed by a data-sev attribute. Two shapes: the larger dotted badge
   (default) and the small --sm chip (no dot). The token map maps straight to those
   semantic tokens (no hard-coded hex, no new tokens).
   Markup:  <span class="ev-status" data-sev="warn"><span class="ev-status-dot"></span>Warning</span>
   [data-sev] attribute selectors are global — safe because they only set --sev-*
   custom properties, which do nothing unless an element reads them. */
[data-sev=ok] {
  --sev-bg:var(--ok-bg);
  --sev-fg:var(--ok-fg);
  --sev-border:var(--ok-border);
  --sev-dot:var(--ok-dot);
}

[data-sev=warn] {
  --sev-bg:var(--warn-bg);
  --sev-fg:var(--warn-fg);
  --sev-border:var(--warn-border);
  --sev-dot:var(--warn-dot);
}

[data-sev=bad] {
  --sev-bg:var(--bad-bg);
  --sev-fg:var(--bad-fg);
  --sev-border:var(--bad-border);
  --sev-dot:var(--bad-dot);
}

[data-sev=info] {
  --sev-bg:var(--info-bg);
  --sev-fg:var(--info-fg);
  --sev-border:var(--info-border);
  --sev-dot:var(--info-dot);
}

[data-sev=na] {
  --sev-bg:var(--na-bg);
  --sev-fg:var(--na-fg);
  --sev-border:var(--na-border);
  --sev-dot:var(--na-dot);
}

[data-sev=accent] {
  --sev-bg:var(--accent-soft);
  --sev-fg:var(--accent-dark);
  --sev-border:var(--accent-mid);
  --sev-dot:var(--accent);
}

/* the larger, DOTTED status — overall status (list card, report header, history) */
.ev-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: "Geist", system-ui, sans-serif; /* don't inherit a mono/tracked heading */
  font-size: var(--fs-caption);
  font-weight: 500;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0; /* inherit line-height (like the approved chips) so
   the small chip matches the TTL micro-chip's height */
  padding: 3px 9px 3px 8px;
  border: 1px solid var(--sev-border);
  background: var(--sev-bg);
  color: var(--sev-fg);
  border-radius: var(--radius);
}

.ev-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sev-dot);
  flex-shrink: 0;
}

/* the small chip — ONE treatment: Geist 10px, tinted fill + 1px colour border, NO dot. */
.ev-status--sm {
  font-size: var(--fs-nano);
  padding: 2px 6px;
}

/* Subtle status animation — every bordered, coloured .ev-status (small AND big) eases its
   border a touch darker and back. Shared across ALL modules (was monitor-only); only
   neutral (na) stays static. Honours prefers-reduced-motion. */
.ev-status:not([data-sev=na]) {
  animation: ev-status-frame 2.9s ease-in-out infinite;
}

@keyframes ev-status-frame {
  50% {
    border-color: color-mix(in srgb, var(--sev-border), var(--sev-fg) 20%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .ev-status {
    animation: none !important;
  }
}
.ev-flex {
  display: flex;
}

.ev-inline-flex {
  display: inline-flex;
}

.ev-inline-block {
  display: inline-block;
}

.ev-inline {
  display: inline;
}

.ev-flex-wrap {
  flex-wrap: wrap;
}

.ev-flex-col {
  flex-direction: column;
}

.ev-items-center {
  align-items: center;
}

.ev-items-start {
  align-items: flex-start;
}

.ev-justify-between {
  justify-content: space-between;
}

.ev-justify-center {
  justify-content: center;
}

.ev-gap-2 {
  gap: var(--sp-2);
}

.ev-gap-3 {
  gap: var(--sp-4);
}

.ev-gap-4 {
  gap: var(--sp-5);
}

.ev-mb-1 {
  margin-bottom: var(--sp-1);
}

.ev-mb-2 {
  margin-bottom: var(--sp-2);
}

.ev-mb-3 {
  margin-bottom: var(--sp-4);
}

.ev-mb-4 {
  margin-bottom: var(--sp-5);
}

.ev-mb-5 {
  margin-bottom: var(--sp-7);
}

.ev-mt-2 {
  margin-top: var(--sp-2);
}

.ev-mt-3 {
  margin-top: var(--sp-4);
}

.ev-mt-4 {
  margin-top: var(--sp-5);
}

.ev-text-center {
  text-align: center;
}

.ev-text-muted {
  color: var(--neutral-500);
}

.ev-text-danger {
  color: var(--bad-fg);
}

.ev-no-underline {
  text-decoration: none;
}

.ev-opacity-50 {
  opacity: 0.5;
}

.ev-opacity-75 {
  opacity: 0.75;
}

.ev-border-top {
  border-top: 1px solid var(--neutral-200);
}

.ev-border-bottom {
  border-bottom: 1px solid var(--neutral-200);
}

.ev-h-100 {
  height: 100%;
}

.ev-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.ev-row {
  --ev-gutter-x: var(--sp-5);
  --ev-gutter-y: 0px;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--ev-gutter-y));
  margin-right: calc(-0.5 * var(--ev-gutter-x));
  margin-left: calc(-0.5 * var(--ev-gutter-x));
}

.ev-row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: calc(var(--ev-gutter-x) * 0.5);
  padding-left: calc(var(--ev-gutter-x) * 0.5);
  margin-top: var(--ev-gutter-y);
}

.ev-g-3 {
  --ev-gutter-x: var(--sp-4);
  --ev-gutter-y: var(--sp-4);
}

.ev-g-4 {
  --ev-gutter-x: var(--sp-5);
  --ev-gutter-y: var(--sp-5);
}

.ev-g-5 {
  --ev-gutter-x: var(--sp-7);
  --ev-gutter-y: var(--sp-7);
}

.ev-col-12 {
  flex: 0 0 auto;
  width: 100%;
}

.ev-col-6 {
  flex: 0 0 auto;
  width: 50%;
}

@media (min-width: 801px) {
  .ev-col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .ev-col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .ev-col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .ev-col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .ev-col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .ev-col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .ev-items-md-center {
    align-items: center;
  }
  .ev-flex-md-row {
    flex-direction: row;
  }
  .ev-text-md-end {
    text-align: right;
  }
  .ev-mb-md-0 {
    margin-bottom: 0;
  }
}
@media (min-width: 1201px) {
  .ev-col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .ev-col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .ev-col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .ev-col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
}