/*
 * Kryptonium design tokens: the one source of colour, type, size and motion values (phase2 10 §2).
 * Dark colours were read once from the design images (docs/pictures); the light palette is the
 * same roles tuned for a light background. Every text/control colour meets WCAG AA (4.5:1) on bg,
 * surface, surface-raised and surface-active in its theme. Components and pages use only these
 * variables; nothing is written inline.
 *
 * Theme: <html data-theme="light|dark"> is always the resolved theme (src/lib/theme.ts, and the
 * server's /brand/boot.js before first paint). Dark is the default (:root); the light palette
 * redefines the colour roles under :root[data-theme="light"]. Admin brand colours arrive as
 * overrides in /brand/brand.css (served by the server, linked after this file).
 */

/*
 * Breakpoints: tokens/breakpoints.json is the one source; its CSS copy (@custom-media
 * --kr-bp-phone, --kr-bp-tablet, --kr-bp-tablet-up, --kr-bp-below-desktop, --kr-bp-desktop) is
 * tokens/breakpoints.css, generated and injected into every stylesheet by postcss-global-data.
 */

:root {
  color-scheme: dark;

  /* Colour */
  --kr-color-bg: #0a1019;
  --kr-color-surface: #101722;
  --kr-color-surface-raised: #161f2c;
  --kr-color-surface-active: #17222e;
  --kr-color-border: #1f2b3b;
  --kr-color-border-strong: #2b3a4e;
  --kr-color-text: #e8eef6;
  --kr-color-text-muted: #93a6c3;
  /* Lightened from the design's #63748f to 4.5:1 on every surface up to surface-active (WCAG AA, phase2 07 §6). */
  --kr-color-text-faint: #7589a9;
  /* Buttons: darkened from the design's #1488fe to 4.6:1 under white text (owner 2026-10-22);
     hover and pressed go darker still (5.6:1, 6.6:1). */
  --kr-color-accent: #0d74dc;
  --kr-color-accent-hover: #0b67c4;
  --kr-color-accent-active: #0a5cb0;
  --kr-color-accent-strong: #4db0ff;
  --kr-color-accent-soft: rgb(13 116 220 / 14%);
  --kr-color-on-accent: #ffffff;
  --kr-color-emblem: #2986fc;
  /* Lightened from #e45d4f: 4.5:1 on its soft fill over every dark surface (danger buttons). */
  --kr-color-danger: #ef7466;
  --kr-color-danger-soft: rgb(239 116 102 / 14%);
  --kr-color-warning: #f0a63a;
  --kr-color-warning-soft: rgb(240 166 58 / 14%);
  --kr-color-on-warning: #1a1206;
  --kr-color-success: #34c185;
  --kr-color-success-soft: rgb(52 193 133 / 14%);
  /* White on the dark theme's red and green is under 4.5:1: their fills carry dark text. */
  --kr-color-on-danger: #1a0806;
  --kr-color-on-success: #06130c;
  --kr-color-info: #4db0ff;
  --kr-color-info-soft: rgb(77 176 255 / 14%);
  --kr-color-pnl-up: var(--kr-color-success);
  --kr-color-pnl-down: var(--kr-color-danger);
  --kr-color-shell: #0c131d;
  --kr-color-shell-border: #1f2b3b;
  /* The built-in emblem is light artwork: the light theme darkens it. */
  --kr-emblem-filter: none;
  --kr-color-focus-ring: #4db0ff;
  --kr-color-mode-paper: #93a6c3;
  --kr-color-mode-live: #f0a63a;
  --kr-color-backdrop: rgb(4 8 14 / 72%);
  --kr-color-glow-top: #1b2942;
  --kr-color-arc: rgb(77 160 240 / 55%);
  --kr-color-arc-faint: rgb(77 160 240 / 10%);
  --kr-color-scrollbar: #2b3a4e;
  --kr-color-scrollbar-hover: #63748f;
  /* Round 3 D3 / D4 (owner spec): Admin › Users "Users by Country" and Overview › Revenue
     cards; seven series colours then gray for the rest of a doughnut. */
  --kr-color-country-card: #232631;
  --kr-color-revenue-card: #0e1722;
  --kr-color-chart-1: #4db0ff;
  --kr-color-chart-2: #34c185;
  --kr-color-chart-3: #f0a63a;
  --kr-color-chart-4: #ef7466;
  --kr-color-chart-5: #a78bfa;
  --kr-color-chart-6: #22d3ee;
  --kr-color-chart-7: #f472b6;
  --kr-color-chart-other: #63748f;

  /* Type */
  --kr-font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kr-font-mono: "JetBrains Mono Variable", ui-monospace, "Cascadia Mono", monospace;
  /* Body text is never under 14 px; inputs are 16 px so iOS does not zoom in (phase2 10 §6). */
  --kr-font-size-sm: 0.875rem;
  --kr-font-size-md: 0.9375rem;
  --kr-font-size-lg: 1.0625rem;
  --kr-font-size-xl: 1.25rem;
  --kr-font-size-2xl: 1.625rem;
  --kr-font-size-3xl: 2.25rem;
  --kr-font-size-input: 1rem;
  --kr-font-weight-regular: 400;
  --kr-font-weight-medium: 500;
  --kr-font-weight-semibold: 600;
  --kr-line-height-tight: 1.2;
  --kr-line-height-normal: 1.5;
  --kr-numeric: tabular-nums;

  /* Spacing (4 px scale) */
  --kr-space-1: 0.25rem;
  --kr-space-2: 0.5rem;
  --kr-space-3: 0.75rem;
  --kr-space-4: 1rem;
  --kr-space-5: 1.25rem;
  --kr-space-6: 1.5rem;
  --kr-space-8: 2rem;
  --kr-space-10: 2.5rem;
  --kr-space-12: 3rem;
  --kr-space-16: 4rem;
  --kr-space-20: 5rem;

  /* Radius */
  --kr-radius-sm: 6px;
  --kr-radius-md: 10px;
  --kr-radius-lg: 14px;
  --kr-radius-pill: 999px;
  --kr-radius-sheet: 18px;

  /* Borders */
  --kr-border-width: 1px;
  --kr-accent-bar-width: 3px;
  --kr-focus-ring-width: 2px;

  /* Elevation */
  --kr-elevation-1: 0 1px 2px rgb(0 0 0 / 30%);
  --kr-elevation-2: 0 8px 24px rgb(0 0 0 / 40%);
  --kr-elevation-3: 0 16px 48px rgb(0 0 0 / 55%);

  /*
   * Layers (z-index), the one list, lowest first. Pages and components use only these names.
   * Dialogs, sheets, menus and pickers open in the browser's top layer (<dialog>, popover), so
   * they are always above the page chrome; the values order what stays in the page.
   */
  --kr-z-base: 0;
  --kr-z-raised: 1;
  --kr-z-sticky: 10;
  --kr-z-app-bar: 20;
  --kr-z-shell: 30;
  --kr-z-bottom-nav: 30;
  --kr-z-drawer: 40;
  --kr-z-menu: 50;
  --kr-z-dialog: 60;
  --kr-z-toast: 70;
  --kr-z-confirm: 80;
  --kr-z-popover: 90;

  /* Sizes */
  --kr-touch-target: 44px;
  --kr-touch-gap: 8px;
  /* Public Docs Overview: owner Docs Overview spec (docs-overview-design.md), values no
     shared token has. */
  --kr-docs-max-width: 1280px;
  --kr-docs-intro-gap: 38px;
  --kr-docs-title-size: 50px;
  --kr-docs-article-title-size: 40px;
  --kr-docs-article-title-size-phone: 30px;
  --kr-docs-section-title-size: 22px;
  --kr-docs-subline-size-phone: 18px;
  --kr-docs-row-line: 20px;
  --kr-docs-step-axis: 17.5px;
  --kr-docs-space-hair: 2px;
  --kr-docs-space-6: 6px;
  --kr-docs-space-10: 10px;
  --kr-docs-space-14: 14px;
  --kr-docs-space-18: 18px;
  --kr-docs-space-22: 22px;
  --kr-docs-space-28: 28px;
  --kr-docs-space-30: 30px;
  --kr-control-height: 44px;
  --kr-icon-size: 20px;
  --kr-icon-size-sm: 16px;
  /* Icons ease on hover and press (R3 N3). */
  --kr-icon-hover-scale: 1.08;
  --kr-icon-press-scale: 0.92;
  --kr-spinner-size: 14px;
  --kr-status-dot: 8px;
  --kr-avatar-size: 40px;
  --kr-sidebar-width: 280px;
  --kr-rail-width: 72px;
  --kr-topbar-height: 56px;
  --kr-tabbar-height: 56px;
  --kr-sheet-max-height: 85dvh;
  --kr-healthline-height: 40px;
  --kr-auth-card-width: 460px;
  --kr-dialog-width: 480px;
  --kr-editor-width: 960px;
  --kr-drawer-width: 1200px;
  --kr-chat-width: 880px;
  --kr-composer-max-height: 40dvh;
  --kr-chat-near-bottom: 96px;
  --kr-field-min: 11rem;
  --kr-panel-min: 18rem;
  --kr-menu-width: 220px;
  --kr-toast-width: 380px;
  --kr-emblem-sm: 36px;
  --kr-emblem-md: 64px;
  --kr-emblem-lg: 96px;
  --kr-skeleton-line: 0.875rem;
  --kr-scrollbar-size: 8px;
  --kr-popover-max-height: 18rem;
  --kr-qr-size: 200px;
  --kr-qr-size-sm: 120px;
  --kr-qr-size-lg: 280px;
  --kr-chart-compact-height: 300px;
  --kr-country-card-radius: 10px;
  --kr-country-card-pad: 24px;
  --kr-country-card-height: 350px;
  --kr-country-donut-size: 175px;
  --kr-country-donut-ring: 17px;
  --kr-country-legend-row: 25px;
  --kr-widget-fab: 48px;
  --kr-widget-width: 380px;
  --kr-widget-width-wide: 640px;
  --kr-consent-width: 720px;

  /*
   * Compact layout (phones and tablets, docs/mobile-ui/README.md): dense list rows, chips, sheet
   * rows and the docked chat box. Text never goes under --kr-font-size-sm (14 px).
   */
  --kr-row-min-height: 60px;
  --kr-row-pad-block: var(--kr-space-3);
  --kr-row-gap: var(--kr-space-3);
  --kr-sheet-row-height: 48px;
  --kr-chip-height: 32px;
  --kr-chip-pad-inline: var(--kr-space-3);
  --kr-app-bar-height: var(--kr-topbar-height);
  --kr-bottom-nav-height: var(--kr-tabbar-height);
  --kr-badge-size: 18px;
  --kr-progress-height: 4px;
  --kr-send-size: 40px;

  /* Motion (ui-spec §22.8) */
  --kr-motion-fast: 100ms;
  --kr-motion-icon: 150ms;
  --kr-motion-overlay: 190ms;
  --kr-motion-page: 220ms;
  --kr-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --kr-move-small: 6px;
  --kr-spinner-period: 800ms;

  /* Toasts */
  --kr-toast-visible: 6000ms;
  --kr-toast-max: 3;
}

/*
 * Shell geometry (phase2 10 §3). Safe areas: the notch and the home bar (viewport-fit=cover).
 * --kr-shell-top: the top of anything sticky under the top bar. --kr-shell-bottom: what the fixed
 * bottom chrome covers (the phone tab bar while the app shell shows it, else the home bar); the
 * offset of sticky action bars, the support button and phone toasts.
 */
:root {
  --kr-safe-top: env(safe-area-inset-top, 0px);
  --kr-safe-right: env(safe-area-inset-right, 0px);
  --kr-safe-bottom: env(safe-area-inset-bottom, 0px);
  --kr-safe-left: env(safe-area-inset-left, 0px);
  --kr-shell-top: calc(var(--kr-topbar-height) + var(--kr-safe-top));
  --kr-shell-bottom: var(--kr-safe-bottom);
}

@media (--kr-bp-tablet-up) {
  :root {
    --kr-topbar-height: 64px;
  }
}

@media (--kr-bp-phone) {
  :root[data-shell="tabbar"]:not([data-keyboard="open"]) {
    --kr-shell-bottom: calc(var(--kr-tabbar-height) + var(--kr-safe-bottom));
  }
}

/* The light palette: the same roles, every text/control colour AA on its backgrounds. */
:root[data-theme="light"] {
  color-scheme: light;

  --kr-color-bg: #f3f5f8;
  --kr-color-surface: #ffffff;
  --kr-color-surface-raised: #f7f9fb;
  --kr-color-surface-active: #e6ecf3;
  --kr-color-border: #dbe2ea;
  --kr-color-border-strong: #b9c4d1;
  --kr-color-text: #0f1722;
  --kr-color-text-muted: #47566b;
  --kr-color-text-faint: #56657a;
  --kr-color-accent: #0b66c3;
  --kr-color-accent-hover: #0a5aad;
  --kr-color-accent-active: #094f98;
  --kr-color-accent-strong: #0a5fb8;
  --kr-color-accent-soft: rgb(11 102 195 / 10%);
  --kr-color-on-accent: #ffffff;
  --kr-color-emblem: #2986fc;
  /* Darkened from #c0352a: 4.5:1 on its soft fill over every light surface (danger buttons). */
  --kr-color-danger: #b02e26;
  --kr-color-danger-soft: rgb(176 46 38 / 10%);
  --kr-color-on-danger: #ffffff;
  --kr-color-warning: #9a5a00;
  --kr-color-warning-soft: rgb(154 90 0 / 10%);
  --kr-color-on-warning: #ffffff;
  --kr-color-success: #12784b;
  --kr-color-success-soft: rgb(18 120 75 / 10%);
  --kr-color-on-success: #ffffff;
  --kr-color-info: #0a5fb8;
  --kr-color-info-soft: rgb(10 95 184 / 10%);
  --kr-color-focus-ring: #0b66c3;
  --kr-color-mode-paper: #47566b;
  --kr-color-mode-live: #9a5a00;
  --kr-color-backdrop: rgb(15 23 34 / 45%);
  --kr-color-glow-top: #e3ecf8;
  --kr-color-arc: rgb(11 102 195 / 35%);
  --kr-color-arc-faint: rgb(11 102 195 / 8%);
  --kr-color-scrollbar: #b9c4d1;
  --kr-color-scrollbar-hover: #7d8a9c;
  --kr-color-country-card: #f7f9fb;
  --kr-color-revenue-card: #f7f9fb;
  --kr-color-chart-1: #0a5fb8;
  --kr-color-chart-2: #12784b;
  --kr-color-chart-3: #9a5a00;
  --kr-color-chart-4: #b02e26;
  --kr-color-chart-5: #6d4fc2;
  --kr-color-chart-6: #0e7490;
  --kr-color-chart-7: #b4236c;
  --kr-color-chart-other: #7d8a9c;
  --kr-color-shell: #ffffff;
  --kr-color-shell-border: #dbe2ea;
  --kr-emblem-filter: invert(0.8);

  --kr-elevation-1: 0 1px 2px rgb(15 23 34 / 8%);
  --kr-elevation-2: 0 8px 24px rgb(15 23 34 / 12%);
  --kr-elevation-3: 0 16px 48px rgb(15 23 34 / 18%);
}

@media (--kr-reduced-motion) {
  :root {
    --kr-motion-fast: 0ms;
    --kr-motion-icon: 0ms;
    --kr-icon-hover-scale: 1;
    --kr-icon-press-scale: 1;
    --kr-motion-overlay: 0ms;
    --kr-motion-page: 0ms;
    --kr-move-small: 0px;
  }
}
/* The public Docs (/docs, docs-overview-design.md with the owner's fixes): flat surfaces, thin
   borders, 8 px corners, outline icons, no shadows. Colours are the design tokens of
   web/tokens/tokens.css only (served in front of this file), so light mode works through
   them; on a Docs page the site's own colour names point at the same tokens (header, footer). */
.docs-page {
  --site-heading: var(--kr-color-text);
  --ink: var(--kr-color-text);
  --ink-2: var(--kr-color-text-muted);
  --muted: var(--kr-color-text-muted);
  --cyan: var(--kr-color-accent-strong);
  --cyan-ink: var(--kr-color-accent-strong);
  --cyan-hover: var(--kr-color-accent-strong);
  --line: var(--kr-color-border);
  --line-strong: var(--kr-color-border-strong);
  --panel: var(--kr-color-surface);
  --panel-line: var(--kr-color-border);
  --bg: var(--kr-color-bg);
  --site-table-bg: var(--kr-color-surface);
  background: var(--kr-color-bg);
  color: var(--kr-color-text);
}
.docs-page .site-main { padding-block: 0 var(--site-space-16); }
.docs { max-width: var(--kr-docs-max-width); margin-inline: auto; }
.docs a { color: var(--kr-color-accent-strong); }
.docs-icon { width: 20px; height: 20px; flex: none; color: var(--kr-color-accent-strong); }

/* Intro: text 62 % | quick start 38 %. */
.docs-intro {
  display: grid;
  grid-template-columns: minmax(0, 62fr) minmax(0, 38fr);
  gap: var(--kr-docs-intro-gap);
  padding: var(--kr-space-10) 0 var(--kr-docs-space-30);
  align-items: start;
}
.docs-label {
  margin: 0 0 var(--kr-space-4);
  font-size: var(--kr-font-size-sm);
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--kr-color-accent-strong);
}
.docs .docs-title {
  margin: 0 0 var(--kr-docs-space-18);
  max-width: 14em;
  font-size: var(--kr-docs-title-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--kr-color-text);
}
.docs-subline { margin: 0 0 var(--kr-space-3); font-size: var(--kr-font-size-xl); line-height: 1.4; color: var(--kr-color-text-muted); }
.docs-paragraph { margin: 0 0 var(--kr-space-6); max-width: 62ch; font-size: var(--kr-font-size-sm); line-height: 1.7; color: var(--kr-color-text-muted); }

.docs-search { position: relative; }
.docs-search__field {
  display: flex;
  align-items: center;
  gap: var(--kr-space-3);
  height: 52px;
  padding: 0 var(--kr-space-3) 0 var(--kr-space-4);
  background: var(--kr-color-surface-raised);
  border: 1px solid var(--kr-color-border);
  border-radius: 8px;
  box-sizing: border-box;
}
.docs-search__field:focus-within { border-color: var(--kr-color-accent-strong); }
.docs-search input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: var(--kr-font-size-input);
  color: var(--kr-color-text);
}
.docs-search input::placeholder { color: var(--kr-color-text-muted); opacity: 1; }
.docs-kbd {
  padding: var(--kr-docs-space-hair) var(--kr-space-2);
  border: 1px solid var(--kr-color-border);
  border-radius: 6px;
  font-size: var(--kr-font-size-sm);
  white-space: nowrap;
  color: var(--kr-color-text-muted);
}
.docs-search__results {
  position: absolute;
  inset-inline: 0;
  inset-block-start: calc(100% + var(--kr-docs-space-6));
  z-index: 5;
  max-height: 60dvh;
  margin: 0;
  padding: var(--kr-docs-space-6);
  overflow: auto;
  list-style: none;
  background: var(--kr-color-surface);
  border: 1px solid var(--kr-color-border);
  border-radius: 8px;
}
.docs-search__results a,
.docs-search__results p {
  display: block;
  margin: 0;
  padding: var(--kr-docs-space-10) var(--kr-space-3);
  border-radius: 6px;
  font-size: var(--kr-font-size-sm);
  text-decoration: none;
  color: var(--kr-color-text);
}
.docs-search__results a:hover,
.docs-search__results a:focus-visible,
.docs-search__results a[aria-selected="true"] { background: var(--kr-color-surface-raised); }
.docs-search__results small { display: block; margin-top: var(--kr-docs-space-hair); font-size: var(--kr-font-size-sm); color: var(--kr-color-text-muted); }

/* Quick start: three numbered steps on one line. */
.docs-quick {
  justify-self: end;
  width: 100%;
  max-width: 400px;
  padding: var(--kr-space-5);
  background: var(--kr-color-surface);
  border: 1px solid var(--kr-color-border);
  border-radius: 8px;
  box-sizing: border-box;
}
.docs .docs-quick h2 { margin: 0 0 var(--kr-docs-space-6); font-size: var(--kr-font-size-xl); font-weight: 700; line-height: 1.3; color: var(--kr-color-text); }
.docs-quick > p { margin: 0 0 var(--kr-docs-space-18); font-size: var(--kr-font-size-sm); line-height: 1.5; color: var(--kr-color-text-muted); }
.docs-steps { position: relative; display: grid; gap: var(--kr-docs-space-18); margin: 0 0 var(--kr-docs-space-14); padding: 0; list-style: none; }
.docs-steps::before {
  content: "";
  position: absolute;
  inset-block: var(--kr-docs-space-18);
  inset-inline-start: var(--kr-docs-step-axis);
  width: 1px;
  background: var(--kr-color-accent-strong);
}
.docs .docs-step {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: var(--kr-docs-space-14);
  align-items: start;
  min-height: 44px;
  text-decoration: none;
  color: var(--kr-color-text);
}
.docs-step__num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--kr-color-accent-strong);
  border-radius: 50%;
  background: var(--kr-color-bg);
  box-sizing: border-box;
  font-size: var(--kr-font-size-sm);
  font-weight: 600;
  color: var(--kr-color-text);
}
.docs-step__title { display: block; margin: var(--kr-docs-space-hair) 0 var(--kr-docs-space-hair); font-size: var(--kr-font-size-sm); font-weight: 700; line-height: 1.4; color: var(--kr-color-text); }
.docs .docs-step:hover .docs-step__title { color: var(--kr-color-accent-strong); }
.docs-step__text { display: block; font-size: var(--kr-font-size-sm); line-height: 1.5; color: var(--kr-color-text-muted); }
.docs .docs-link {
  display: inline-flex;
  align-items: center;
  gap: var(--kr-docs-space-6);
  min-height: 44px;
  font-size: var(--kr-font-size-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--kr-color-accent-strong);
}
.docs-link svg { width: 16px; height: 16px; }

/* Tabs: a full-width strip (the borders reach the page edges), scrolls on small screens. */
.docs-tabs {
  margin-top: var(--kr-space-3);
  border-block: 1px solid var(--kr-color-border);
  border-image: linear-gradient(var(--kr-color-border), var(--kr-color-border)) 1 / 1px 0 / 0 100vw;
}
.docs-tabs ul {
  display: flex;
  gap: var(--kr-space-10);
  height: 60px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.docs .docs-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 44px;
  border-bottom: 2px solid transparent;
  box-sizing: border-box;
  font-size: var(--kr-font-size-sm);
  white-space: nowrap;
  text-decoration: none;
  color: var(--kr-color-text-muted);
}
.docs .docs-tabs a:hover { color: var(--kr-color-text); }
.docs .docs-tabs a[aria-current="page"] { color: var(--kr-color-accent-strong); border-bottom-color: var(--kr-color-accent-strong); }

/* Panels: one component, one row component. */
.docs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kr-space-4); margin-top: var(--kr-docs-space-28); }
.docs-panel {
  display: flex;
  flex-direction: column;
  padding: var(--kr-space-5);
  background: var(--kr-color-surface);
  border: 1px solid var(--kr-color-border);
  border-radius: 8px;
}
.docs-panel__head { display: flex; align-items: center; gap: var(--kr-space-3); }
.docs .docs-panel__head h2 { margin: 0; font-size: var(--kr-font-size-xl); font-weight: 700; line-height: 1.3; color: var(--kr-color-text); }
.docs-panel__intro { margin: var(--kr-docs-space-6) 0 var(--kr-space-4); font-size: var(--kr-font-size-sm); line-height: 1.5; color: var(--kr-color-text-muted); }
.docs-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kr-color-border); }
.docs-rows li + li { border-top: 1px solid var(--kr-color-border); }
.docs .docs-row {
  display: grid;
  grid-template-columns: 40px 128px minmax(0, 1fr) 16px;
  gap: var(--kr-space-3);
  align-items: center;
  min-height: 72px;
  padding: var(--kr-space-3) 0;
  box-sizing: border-box;
  text-decoration: none;
  color: var(--kr-color-text);
}
.docs-row__icon { display: grid; place-items: center; width: 40px; height: 40px; }
.docs-row__title { font-size: var(--kr-font-size-sm); font-weight: 500; line-height: 1.4; color: var(--kr-color-text); }
.docs-row__text { font-size: var(--kr-font-size-sm); line-height: var(--kr-docs-row-line); color: var(--kr-color-text-muted); }
.docs-row__arrow { width: 16px; height: 16px; color: var(--kr-color-accent-strong); }
.docs .docs-row:hover .docs-row__title { color: var(--kr-color-accent-strong); }

/* Support strip. */
.docs-support {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--kr-space-6);
  margin-top: var(--kr-docs-space-22);
  padding-top: var(--kr-space-6);
  border-top: 1px solid var(--kr-color-border);
}
.docs-support__label { margin: 0 0 var(--kr-space-1); font-size: var(--kr-font-size-sm); letter-spacing: 1.5px; text-transform: uppercase; color: var(--kr-color-text-muted); }
.docs-support__heading { margin: 0 0 var(--kr-space-1); font-size: var(--kr-font-size-input); font-weight: 700; color: var(--kr-color-text); }
.docs-support__text { margin: 0; font-size: var(--kr-font-size-sm); line-height: 1.5; color: var(--kr-color-text-muted); }
.docs .docs-support__link {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: var(--kr-space-3);
  align-content: start;
  min-height: 44px;
  text-decoration: none;
  color: var(--kr-color-text);
}
.docs-support__link + .docs-support__link { padding-inline-start: var(--kr-space-6); border-inline-start: 1px solid var(--kr-color-border); }
.docs-support__link strong { display: inline-flex; align-items: center; gap: var(--kr-docs-space-6); font-size: var(--kr-font-size-sm); font-weight: 600; color: var(--kr-color-accent-strong); }
.docs-support__link strong svg { width: 16px; height: 16px; }
.docs-support__link span { grid-column: 2; font-size: var(--kr-font-size-sm); color: var(--kr-color-text-muted); }

/* Article pages. */
.docs-article { max-width: 860px; padding-top: var(--kr-space-8); }
.docs-article .docs-search { margin-bottom: var(--kr-space-6); }
.docs .docs-article h1 { margin: 0 0 var(--kr-space-4); font-size: var(--kr-docs-article-title-size); font-weight: 700; line-height: 1.1; color: var(--kr-color-text); }
.docs-body { font-size: var(--kr-font-size-md); line-height: 1.7; color: var(--kr-color-text); }
.docs .docs-body h2,
.docs .docs-block h2 { margin: var(--kr-space-8) 0 var(--kr-space-3); font-size: var(--kr-docs-section-title-size); font-weight: 700; color: var(--kr-color-text); }
.docs .docs-body h3 { margin: var(--kr-space-6) 0 var(--kr-space-2); font-size: var(--kr-font-size-input); font-weight: 700; color: var(--kr-color-text); }
.docs-body p, .docs-body li { color: var(--kr-color-text); }
.docs .docs-body a { text-decoration: underline; text-underline-offset: 2px; }
/* The breadcrumbs over a Docs page keep the 8 px gap between their targets when they wrap. */
.docs-page .crumbs ol { row-gap: var(--kr-space-2); }
/* Lists in a page text keep visible bullets and numbers. */
.docs-body ul,
.docs-body ol { margin: 0 0 var(--kr-space-4); padding-inline-start: 1.5em; }
.docs-body ul { list-style: disc; }
.docs-body ol { list-style: decimal; }
.docs-body ul ul { list-style: circle; }
.docs-body li { margin-block: var(--kr-space-1); padding-inline-start: var(--kr-docs-space-hair); }
.docs-body li::marker { color: var(--kr-color-text-muted); }
.docs-body ol > li::marker { font-weight: 600; }
/* A wide table scrolls inside its box; an edge fades in on the side that has more columns
   (scroll shadows: the covers move with the content, the fades stay with the box; no JS). */
.docs-table {
  overflow-x: auto;
  border: 1px solid var(--kr-color-border);
  border-radius: 8px;
  background:
    linear-gradient(to right, var(--kr-color-surface) 40%, transparent) left / 32px 100% no-repeat local,
    linear-gradient(to left, var(--kr-color-surface) 40%, transparent) right / 32px 100% no-repeat local,
    linear-gradient(to right, var(--kr-color-border-strong), transparent) left / 16px 100% no-repeat scroll,
    linear-gradient(to left, var(--kr-color-border-strong), transparent) right / 16px 100% no-repeat scroll,
    var(--kr-color-surface);
  scrollbar-width: thin;
  scrollbar-color: var(--kr-color-border-strong) transparent;
}
.docs-table table { width: 100%; border-collapse: collapse; font-size: var(--kr-font-size-sm); }
.docs-table th,
.docs-table td { padding: var(--kr-docs-space-10) var(--kr-space-3); text-align: start; vertical-align: top; border-bottom: 1px solid var(--kr-color-border); color: var(--kr-color-text); }
.docs-table thead th { font-weight: 600; color: var(--kr-color-text-muted); background: var(--kr-color-surface-raised); }
.docs-table tbody th { font-weight: 600; color: var(--kr-color-text-muted); }
.docs-table tr:last-child td { border-bottom: 0; }
.docs-table small { display: block; margin-top: var(--kr-space-1); font-size: var(--kr-font-size-sm); color: var(--kr-color-text-muted); }
.docs-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--kr-color-border); border-radius: 8px; background: var(--kr-color-surface); }
.docs-list li { display: grid; grid-template-columns: minmax(0, 16em) minmax(0, 1fr); gap: var(--kr-space-1) var(--kr-space-4); padding: var(--kr-space-3) var(--kr-space-4); font-size: var(--kr-font-size-sm); line-height: 1.5; }
.docs-list li + li { border-top: 1px solid var(--kr-color-border); }
.docs-list strong { font-weight: 600; color: var(--kr-color-text); }
.docs .docs-list a { display: inline-flex; align-items: center; min-height: 44px; }
.docs-table:focus-visible { outline: 2px solid var(--kr-color-accent-strong); outline-offset: 2px; }
.docs-list span { color: var(--kr-color-text-muted); overflow-wrap: anywhere; }
.docs-list small { grid-column: 1 / -1; font-size: var(--kr-font-size-sm); color: var(--kr-color-text-muted); }
.docs-children { margin-top: var(--kr-space-8); }

@media (max-width: 960px) {
  .docs-intro { grid-template-columns: minmax(0, 1fr); gap: var(--kr-space-6); }
  .docs-quick { justify-self: stretch; max-width: none; }
  .docs-grid { grid-template-columns: minmax(0, 1fr); }
  .docs-support { grid-template-columns: minmax(0, 1fr); }
  .docs-support__link + .docs-support__link { padding-inline-start: 0; border-inline-start: 0; }
}
@media (max-width: 640px) {
  .docs-intro { padding-top: var(--kr-space-6); }
  .docs .docs-title { font-size: var(--kr-font-size-3xl); }
  .docs-subline { font-size: var(--kr-docs-subline-size-phone); }
  .docs .docs-row { grid-template-columns: 40px minmax(0, 1fr) 16px; column-gap: var(--kr-space-3); row-gap: var(--kr-docs-space-hair); }
  .docs-row__icon { grid-row: 1 / span 2; }
  .docs-row__title { grid-column: 2; }
  .docs-row__text { grid-column: 2; grid-row: 2; }
  .docs .docs-row { padding-block: var(--kr-docs-space-14); }
  .docs-row__arrow { grid-column: 3; grid-row: 1 / span 2; }
  .docs .docs-article h1 { font-size: var(--kr-docs-article-title-size-phone); }
  .docs-list li { grid-template-columns: minmax(0, 1fr); }
  /* Four or more columns (the plan comparison): keep readable columns and scroll the box. */
  .docs-table table:has(thead th:nth-child(4)) { min-width: 40rem; }
  .docs-tabs ul { gap: var(--kr-docs-space-28); }
}