/* Preamble — QUIET PRECISION design charter
 * ───────────────────────────────────────────────────────────────────────────
 * Disclosure-first, machined components, editorially set. One primary object
 * and one primary action per screen; everything else earns its place or moves
 * behind a click. Chrome is honest: nothing inert looks clickable, nothing
 * static pulses "live", no fabricated facts.
 *
 * TYPE (tokens below; a raw px font-size outside this file is a CI violation):
 *   --fs-caption 12/1.45  floor — labels, meta, table headers, timestamps
 *   --fs-ui      13/1.45  buttons, inputs, nav, menus, table cells
 *   --fs-body    14/1.6   prose, modal copy, card titles (w600); 66ch measure
 *   --fs-title   16/1.35  modal titles, section headings (w600)
 *   --fs-heading 20/1.3   page headings (w600, -0.01em)
 *   --fs-display 28/1.2   chat greeting, Overview h1 (w600, -0.01em)
 *   --fs-hero / --fs-hero-sub are MARKETING ONLY.
 *   Weights 400/500/600 only. NO uppercase+tracking anywhere — sentence case;
 *   whitespace separates. Playfair italic 500 is the only serif, sanctioned in
 *   exactly three places: the wordmark, one hero flourish, the chat greeting.
 * SPACING: 4/8 grid via --sp-1..--sp-9 (4/8/12/16/24/32/48/64/96).
 * RADIUS: 8 (chips/inputs/icons), 12 (cards), 16 (modals), 999 (pills). Only.
 * MOTION: --dur 120ms, --ease. Motion means something happened. NO hover
 *   translateY. NO entrance animations on content. Sanctioned keyframes:
 *   modalIn, fadeIn, panelIn, livePulse, caretBlink, loaderBar (boot, in
 *   app/index.html) + spin for genuine async busy states.
 * COLOR: navy surface ramp (kept verbatim), electric-blue --accent primary,
 *   --cyan for a second data series only, green/amber/rose = STATUS ONLY.
 *   Identity color lives only on an entity's own logo/glyph. NO raw hex in
 *   JSX — tokens only. NO decorative gradients, NO glows; one soft elevation
 *   shadow on true overlays only. NO backdrop-filter except .modal-backdrop.
 * PRIMITIVES (one of each; a second implementation of any is a bug):
 *   .label (replaces every kicker), .chip (interactive-only pill, 24px),
 *   .status (6px dot + sentence-case word), .card (r12, 16px pad, hover =
 *   background step, whole card clickable, anatomy cap: identity tile + name +
 *   one secondary line + one trailing signal), .btn (32px / .btn-sm 28px),
 *   .table (40px rows, hairline under header only), .cp-toolbar (search + one
 *   filter group + max one primary btn; rendered only when collection > 8),
 *   .slide-panel (560px right slide-over for ALL detail views; modals only
 *   for blocking flows, 480 / 640–720px).
 *   Metadata is plain muted text with " · " separators — never a pill. Counts
 *   render only if clicking opens the counted thing. Blocking warnings stay
 *   inline — never hidden behind disclosure.
 * ─────────────────────────────────────────────────────────────────────────── */

/* Theme-independent tokens: type, measure, spacing, motion */
:root {
  --fs-caption: 12px;
  --fs-ui: 13px;
  --fs-body: 14px;
  --fs-title: 16px;
  --fs-heading: 20px;
  --fs-display: 28px;
  --fs-hero: clamp(40px, 5.5vw, 64px);          /* marketing only */
  --fs-hero-sub: clamp(24px, 3.2vw, 34px);      /* marketing only */
  --lh-tight: 1.2;
  --lh-ui: 1.45;
  --lh-body: 1.6;
  --measure: 66ch;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;
  --dur: 120ms;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

:root, [data-theme="dark"] {
  --bg-0: #090d18;
  --bg-1: #0e1424;
  --bg-2: #141b2e;
  --surface: #131a2b;
  --surface-2: #1a2236;
  --surface-3: #232c43;
  --surface-hover: #1a2236;
  --border: transparent;
  --border-strong: transparent;
  --border-bright: transparent;
  --hairline: rgba(255, 255, 255, 0.06);
  --divider: rgba(255, 255, 255, 0.08);
  --text: #eef2f8;
  --text-dim: #aab4c6;
  --text-muted: #97a1b4;
  --accent: #3E7BFA;
  --accent-2: #2E5FE8;
  --accent-soft: rgba(62, 123, 250, 0.13);
  --on-accent: #ffffff;
  --cyan: #35C3DE;
  --green: #2FBF71;
  --green-soft: rgba(47, 191, 113, 0.14);
  --amber: #E0A63C;
  --amber-soft: rgba(224, 166, 60, 0.14);
  --rose: #E5636E;
  --rose-soft: rgba(229, 99, 110, 0.14);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  --shadow-lg: var(--shadow-md);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: var(--radius-lg);
  --radius-pill: 999px;
  --atmos-1: radial-gradient(1200px 760px at 88% -24%, rgba(62, 123, 250, 0.06), transparent 62%);
  --paper: #ffffff;                     /* document-preview canvas — white in both themes */
}

[data-theme="light"] {
  --bg-0: #eef2f9;
  --bg-1: #f4f7fc;
  --bg-2: #e9eef6;
  --surface: #ffffff;
  --surface-2: #f1f5fb;
  --surface-3: #e6ecf5;
  --surface-hover: #f1f5fb;
  --border: transparent;
  --border-strong: transparent;
  --border-bright: transparent;
  --hairline: rgba(15, 23, 42, 0.08);
  --divider: rgba(15, 23, 42, 0.10);
  --text: #0b1220;
  --text-dim: #485069;
  --text-muted: #5d6679;
  --accent: #2361D8;
  --accent-2: #1A4FC0;
  --accent-soft: rgba(35, 97, 216, 0.10);
  --on-accent: #ffffff;
  --cyan: #0E8FAC;
  --green: #0D8A56;
  --green-soft: rgba(13, 138, 86, 0.12);
  --amber: #A8711A;
  --amber-soft: rgba(168, 113, 26, 0.12);
  --rose: #CF3B55;
  --rose-soft: rgba(207, 59, 85, 0.10);
  --shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.08);
  --shadow-lg: var(--shadow-md);
  --atmos-1: radial-gradient(1200px 760px at 88% -24%, rgba(35, 97, 216, 0.05), transparent 62%);
}

/* Chat column width — the % resolves against each use-site's container, so the
   column self-widens when the sidebar collapses. */
:root { --chat-col: clamp(820px, 84%, 1040px); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  font-feature-settings: "ss01", "cv11";
  background: var(--bg-0);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow: hidden;
}

#root {
  position: relative;
  z-index: 1;
  height: 100vh;
}

button { font-family: inherit; cursor: pointer; }

/* Atmospheric background — single faint --atmos-1 wash over solid --bg-0 */
.atmos {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    var(--atmos-1),
    var(--bg-0);
  z-index: 0;
}

.atmos::before { display: none; }

[data-theme="light"] .atmos::before { display: none; }

/* Flat elevation surfaces (formerly "glass") — solid, no blur, no border */
.glass {
  background: var(--surface);
}

.glass-strong {
  background: var(--surface-2);
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.06);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(255,255,255,0.12); background-clip: padding-box; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,0.08); background-clip: padding-box; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background-color: rgba(0,0,0,0.16); background-clip: padding-box; }

/* Utilities */
.row { display: flex; align-items: center; }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-5 { gap: 20px; } .gap-6 { gap: 24px; }
.grow { flex: 1; min-width: 0; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.relative { position: relative; }
.mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-feature-settings: normal; }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-muted); }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Buttons — 32px (28px .btn-sm), pill, 13px/500. Hover = background step,
   never a lift. A rendered button with no handler is a bug. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 32px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 0;
  color: var(--text);
  font-size: var(--fs-ui);
  font-weight: 500;
  transition: background var(--dur) var(--ease);
  white-space: nowrap;
}
.btn:hover { background: var(--surface-2); }
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 0;
}
.btn-primary:hover { background: var(--accent-2); }
.btn-ghost { background: transparent; color: var(--text-dim); }
.btn-ghost:hover { color: var(--text); background: var(--surface-hover); }
.btn-sm { height: 28px; padding: 0 10px; }
.btn-icon { padding: 0; width: 32px; height: 32px; border-radius: var(--radius-sm); }
.btn-icon.btn-sm { width: 28px; height: 28px; }

/* Chips — pills are for INTERACTIVE elements only (filters, removable
   selections, popover triggers). Metadata is plain muted text with " · ". */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 0;
  color: var(--text-dim);
  font-size: var(--fs-caption);
  font-weight: 500;
  white-space: nowrap;
}

.chip-accent {
  color: var(--accent);
  background: var(--accent-soft);
}

.dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
.dot.live { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); animation: livePulse 2.4s infinite; }
.dot.warn { background: var(--amber); }
.dot.err { background: var(--rose); }
.dot.off { background: var(--text-muted); }

@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--green-soft); }
  50% { box-shadow: 0 0 0 6px rgba(47,191,113,0.05); }
}

/* Status — the one status primitive: 6px dot + sentence-case word.
   green = running, amber = needs attention, rose = blocked. Pulse is allowed
   on at most one genuinely-live indicator per screen — never over fixtures. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-caption);
  color: var(--text-dim);
  white-space: nowrap;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); flex: 0 0 auto; }
.status.ok .status-dot { background: var(--green); }
.status.warn .status-dot { background: var(--amber); }
.status.err .status-dot { background: var(--rose); }
.status.off { color: var(--text-muted); }

/* Focus ring */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* Headings — type does the hierarchy; only >=20px headings get tightening */
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
h1, h2 { letter-spacing: -0.01em; }

/* Label — 12px, weight 500, sentence case, muted, zero tracking. The single
   label primitive; budget one per screen region. */
.label {
  font-size: var(--fs-caption);
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
  font-weight: 500;
}

/* Card — solid surface, r12, 16px pad, no border, no shadow. Whole card is
   the click target; hover is a background step, not a levitation. */
.card {
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  padding: var(--sp-4);
  transition: background var(--dur) var(--ease);
}
.card:hover { background: var(--surface-2); }

/* Modal — blocking flows only; all detail views use .slide-panel instead */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4,5,8,0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: fadeIn .15s ease-out;
}
[data-theme="light"] .modal-backdrop { background: rgba(15,18,28,0.32); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--bg-1);
  border: 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  animation: modalIn .25s var(--ease) both;
  position: relative;
}
.modal::before { display: none; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Slide-over panel — the single detail-view surface (kit, skill, marketplace,
   tool, task). The panel sits inside its backdrop (same stacking context as
   modals, z-80) so overlay order follows DOM order under the stack manager. */
.panel-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(4,5,8,0.45);
  animation: fadeIn .15s ease-out;
}
[data-theme="light"] .panel-backdrop { background: rgba(15,18,28,0.25); }
.slide-panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 92vw);
  background: var(--bg-1);
  box-shadow: var(--shadow-md);
  display: flex; flex-direction: column;
  animation: panelIn var(--dur) var(--ease) both;
}
@keyframes panelIn {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: none; }
}
.slide-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
  flex-shrink: 0;
}
.slide-panel-title {
  font-size: var(--fs-title); line-height: var(--lh-tight); font-weight: 600;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.slide-panel-body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; }

/* Streaming caret — the one streaming decoration */
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* Markdown-ish content */
/* Break long unbroken tokens (URLs, hashes, JWTs) so they can't overflow the
   message column. Code blocks scroll horizontally instead (see .md pre). */
/* font-size is the prose anchor — html/body font-size stays untouched */
.md { overflow-wrap: anywhere; word-break: break-word; min-width: 0; font-size: var(--fs-body); }
.md p { margin: 0 0 10px; line-height: var(--lh-body); color: var(--text); }
.md h1, .md h2, .md h3 { margin: 18px 0 8px; }
.md h2 { font-size: var(--fs-title); }
.md h3 { font-size: var(--fs-body); }
.md ul, .md ol { margin: 0 0 10px; padding-left: 20px; line-height: var(--lh-body); }
.md li { margin: 2px 0; }
.md code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.88em;
  padding: 2px 6px;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
  border-radius: 6px;
}
.md pre {
  background: var(--bg-2);
  border: 0;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  overflow: auto;
  font-size: var(--fs-caption);
  line-height: 1.55;
  margin: 0 0 14px;
}
.md pre code { background: transparent; padding: 0; border: 0; }
.md a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(53,195,222,0.4); text-underline-offset: 2px; }
.md blockquote { padding: 8px 12px; margin: 0 0 14px; color: var(--text-dim); background: var(--surface); border-radius: 8px; border-left: 3px solid var(--divider); }
.md hr { border: 0; border-top: 1px solid var(--divider); margin: 14px 0; }
.md-table { width: 100%; border-collapse: collapse; margin: 0 0 14px; font-size: var(--fs-ui); display: block; overflow-x: auto; }
.md-table th, .md-table td { border: 1px solid var(--hairline); padding: 5px 9px; text-align: left; vertical-align: top; }
.md-table th { background: var(--surface); font-weight: 600; }
.md-table tr:nth-child(even) td { background: var(--surface); }

/* Table — the one table primitive. 40px rows, 13px cells, 12px sentence-case
   headers, hairline under the header only, hover = surface step. */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); }
.table th {
  text-align: left;
  height: 40px;
  padding: 0 var(--sp-3);
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--text-muted);
  border-bottom: 1px solid var(--divider);
}
.table td { height: 40px; padding: 0 var(--sp-3); color: var(--text-dim); }
.table td:first-child, .table th:first-child { padding-left: 0; }
.table tbody tr:hover td { background: var(--surface); }

/* Universal "control plane" card pattern — shared by integrations, skills, marketplaces */
.int-card {
  position: relative;
  padding: var(--sp-4);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.int-card:hover { background: var(--surface-2); }
.int-card.off { cursor: default; opacity: 0.55; }
.int-card.off:hover { background: var(--surface); }

.int-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
}

.int-logo {
  width: 32px; height: 32px;
  border-radius: var(--radius-sm);
  display: grid; place-items: center;
  font-size: var(--fs-caption); font-weight: 500;
  background: var(--surface-2);
  color: var(--text-dim);
  border: 0;
}
.connector-logo {
  display: block;
  flex: 0 0 auto;
}
.connector-logo-frame {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: var(--connector-logo-bg, transparent);
  box-shadow: inset 0 0 0 1px var(--connector-logo-ring, transparent);
  overflow: hidden;
}
.connector-logo-img {
  width: var(--connector-logo-width, 76%);
  height: var(--connector-logo-height, 76%);
  object-fit: contain;
  object-position: center;
  filter: var(--connector-logo-filter, none);
}

.int-titles { min-width: 0; }
.int-name-row { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.int-name {
  font-size: var(--fs-ui); font-weight: 500;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  min-width: 0;
}
.int-kind {
  font-size: var(--fs-caption);
  color: var(--text-muted);
  font-weight: 500;
  flex-shrink: 0;
}
.int-status {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-caption); color: var(--text-dim);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.int-tools { color: var(--text-muted); }
.int-more {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 0;
  color: var(--text-muted);
  display: grid; place-items: center;
  align-self: center;
}
.int-more:hover { background: var(--surface-hover); color: var(--text); }
.int-cta {
  margin-top: var(--sp-3);
  display: flex; align-items: center; gap: 10px;
}

/* Control-plane shared section intro (used by Kits, Governance, Adoption) */
.kits-intro {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.kits-h { font-size: var(--fs-heading); font-weight: 600; letter-spacing: -0.01em; }
.kits-sub { font-size: var(--fs-ui); color: var(--text-dim); line-height: var(--lh-ui); max-width: var(--measure); }

/* Control-plane shared toolbar (search + one filter group + max one primary
   button) — rendered only when the collection exceeds 8 items */
.cp-toolbar {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.cp-search {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  height: 32px;
  padding: 0 var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  color: var(--text-muted);
  max-width: 520px;
}
.cp-search input {
  flex: 1; background: transparent; border: 0; outline: none;
  color: var(--text); font-family: inherit; font-size: var(--fs-ui);
}
.cp-search input::placeholder { color: var(--text-muted); }

.filter-group {
  display: inline-flex;
  padding: var(--sp-1);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-sm);
}
.fg-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px;
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: var(--fs-ui);
  font-weight: 500;
  font-family: inherit;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  white-space: nowrap;
}
.fg-btn:hover { color: var(--text); }
.fg-btn.active { background: var(--surface-3); color: var(--text); }
.fg-count {
  display: inline-block;
  min-width: 18px; padding: 0 5px;
  text-align: center;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  background: var(--surface);
  border-radius: 99px;
}
.fg-btn.active .fg-count { color: var(--text-dim); background: var(--bg-2); }

/* Active-context bar — COLOR rules relocated from chat.jsx's ActiveContextBar
   <style> block. They must live in the global sheet: the component unmounts
   (returns null) on empty chats, and the QA theme probes inject synthetic
   .actx* DOM expecting these classes to stay styled. Layout/padding rules
   remain in the component. */
.actx-label { color: var(--text-muted); }
.actx-label svg { color: var(--accent); }
.actx-chip { background: var(--surface); color: var(--text); }
.actx-chip.conn { color: var(--text-dim); }
.actx-chip.conn.needs { color: var(--text-muted); }
.actx-chip.skills { color: var(--accent); }
/* Neutral dot — never brand/green (green = live status only). */
.actx-dot { background: var(--text-muted); }
.actx-dot.ready { background: var(--text-dim); }
.actx-paused { color: var(--amber); }
.actx-paused svg { color: var(--amber); }

/* Selection */
::selection { background: var(--accent-soft); color: var(--text); }

/* Brand wordmark — static Playfair Display italic 500; reads "Preamble"
   everywhere. No sheen, no hover reveal — the wordmark is not a control. */
.brand-word {
  display: inline-flex;
  align-items: baseline;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: var(--text);
}
.bw-pr { display: inline-block; font-weight: 500; color: var(--text); }
.bw-tail { display: inline-block; font-weight: 500; color: var(--text); }

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

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}