/* ==========================================================================
   console.kolwrite.com — the console's own layer on the shared design kit
   --------------------------------------------------------------------------
   This file is always the LAST stylesheet in <head>. Everything above it is
   either the shared kit (assets/kit/*, generated by scripts/sync_kit.js) or
   the console's legacy sheets, which stay in place so that no shipped script,
   id, class or data attribute has to change.

   It does three jobs:

     1. Re-points the legacy custom properties at kit tokens, so every legacy
        rule that already reads a variable restyles itself.
     2. Neutralises the handful of legacy declarations that hard-code a colour
        or fight the kit (the `body[data-theme="dark"] *` colour hammer, the
        flex body that existed for the old fixed sidebar, the blue accents).
     3. Restyles the console's own furniture — widgets, tables, tabs, modals,
        toasts, charts, docs — as flat kit surfaces, and adds the console
        chrome's few extra pieces (primary nav, account popover, footer).

   House rules: one hairline, one shadow, amber only on the primary action and
   the live state, no gradient, no glow. Themes come from html[data-theme] (the
   kit); body[data-theme] is kept in sync by js/console-chrome.js because the
   shipped chart code reads it.
   ========================================================================== */

/* ==========================================================================
   1. Legacy variables, re-pointed at kit tokens
   ========================================================================== */
:root {
  /* css/styles.css */
  --bg-color-light: var(--kol-paper);
  --text-color-light: var(--kol-ink);
  --bg-color-dark: var(--kol-paper);
  --text-color-dark: var(--kol-ink);
  --accent-color: var(--kol-accent);
  --accent-color-hover: var(--kol-accent-hover);
  --sidebar-bg: var(--kol-surface);
  --sidebar-brand-bg: var(--kol-surface);
  --sidebar-border: var(--kol-line);
  --sidebar-hover-bg: var(--kol-sunk);
  --card-bg-light: var(--kol-surface);
  --card-bg-dark: var(--kol-surface);
  --border-color-light: var(--kol-line);
  --border-color-dark: var(--kol-line);
  --tab-bg: var(--kol-sunk);
  --tab-bg-dark: var(--kol-sunk);
  --tab-active-bg: var(--kol-surface);
  --tab-active-bg-dark: var(--kol-surface);
  --tab-border: var(--kol-line);
  --tab-border-dark: var(--kol-line);
  --success-color: var(--kol-ink);
  --secondary-color: var(--kol-ink-muted);
  --transition-duration: var(--kol-motion);

  /* Names used by the page-local sheets (api_landing, auth, playground, docs) */
  --bg-color: var(--kol-paper);
  --bg-secondary: var(--kol-surface);
  --bg-elevated: var(--kol-surface);
  --surface-color: var(--kol-surface);
  --card-bg: var(--kol-surface);
  --card-background: var(--kol-surface);
  --text-color: var(--kol-ink);
  --text-primary: var(--kol-ink);
  --text-secondary: var(--kol-ink-muted);
  --text-muted: var(--kol-ink-faint);
  --text-muted-color: var(--kol-ink-faint);
  --heading-color: var(--kol-ink);
  --border-color: var(--kol-line);
  --border-strong: var(--kol-line-strong);
  --primary-color: var(--kol-accent);
  --primary-hover: var(--kol-accent-hover);
  --primary-color-dark: var(--kol-accent-hover);
  --link-color: var(--kol-ink);
  --danger-color: #b3261e;
  --warning-color: var(--kol-accent);
  --info-color: var(--kol-ink-muted);
  --shadow-color: transparent;
  --radius: var(--kol-radius);
  --border-radius: var(--kol-radius);
  --transition-speed: var(--kol-motion);

  /* css/status.css — only the status page uses these names. Operational is
     quiet ink, because "everything is fine" is not an event; degraded is the
     one amber; an outage keeps a red, which is information, not decoration. */
  --canvas: var(--kol-paper);
  --surface: var(--kol-surface);
  --text: var(--kol-ink);
  --muted: var(--kol-ink-muted);
  --border: var(--kol-line);
  --blue: var(--kol-ink);
  --green: var(--kol-ink);
  --green-bg: var(--kol-sunk);
  --yellow: var(--kol-ink);
  --yellow-bg: var(--kol-accent-quiet);
  --red: #b3261e;
  --red-bg: var(--kol-sunk);
  --gray: var(--kol-ink-faint);
  --gray-bg: var(--kol-sunk);
  --max-width: var(--kol-max);

  /* css/status.css declares `color-scheme: light`, which would leave the
     status page's controls and scrollbars light inside a dark theme. */
  color-scheme: light dark;
}

:root[data-theme="dark"] {
  --danger-color: #ffb4ab;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --danger-color: #ffb4ab;
  }
}

/* ==========================================================================
   2. Page shell — the old fixed sidebar is gone, the chrome is a header
   ========================================================================== */
body,
body[data-theme="dark"],
body[data-theme="light"] {
  display: block;
  min-height: 100vh;
  background: var(--kol-paper);
  color: var(--kol-ink);
  font-family: var(--kol-font-sans);
  font-size: var(--kol-text-md);
  line-height: var(--kol-leading);
}

/* The legacy sheet paints every descendant in dark mode. Let the cascade work
   again so light and dark read identically. */
body[data-theme="dark"] * {
  color: inherit;
}

body[data-theme] h1,
body[data-theme] h2,
body[data-theme] h3,
body[data-theme] h4,
body[data-theme] h5,
body[data-theme] strong,
body[data-theme] b,
body[data-theme] th {
  color: var(--kol-ink);
}

body[data-theme] p,
body[data-theme] li,
body[data-theme] dd,
body[data-theme] label,
body[data-theme] small,
body[data-theme] figcaption {
  color: var(--kol-ink-muted);
}

body[data-theme] h1 {
  font-size: var(--kol-text-2xl);
  letter-spacing: var(--kol-tracking-tight);
}

body[data-theme] h2 {
  font-size: var(--kol-text-xl);
}

body[data-theme] h3 {
  font-size: var(--kol-text-base);
}

body[data-theme] a,
body[data-theme] a:hover,
body[data-theme] a:focus {
  color: var(--kol-ink);
  transition: none !important;
}

/* The console chrome replaces the fixed sidebar and the page-local headers. */
body .sidebar,
body .toggle-container,
body .main-header,
body .public-header,
body .status-header,
body .console-language-switcher,
body .mobile-nav-toggle {
  display: none !important;
}

/* Content column: one width everywhere, whatever the legacy sheet said. */
body[data-theme] .main-content,
body[data-theme] .console-main {
  width: 100%;
  max-width: var(--kol-max);
  margin: 0 auto;
  padding: var(--kol-space-6) var(--kol-gutter) var(--kol-space-8);
  display: block;
  background: none;
  border: 0;
}

html[dir="rtl"] body[data-theme] .main-content {
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 768px) {
  body[data-theme] .main-content,
  body[data-theme] .console-main {
    padding-top: var(--kol-space-7);
  }
}

/* A page title and its one-line description, spaced the way the sites space
   a section head. */
body[data-theme] .main-content > h1,
body[data-theme] .console-main > h1 {
  margin-bottom: var(--kol-space-2);
}

body[data-theme] .main-content > h1 + p,
body[data-theme] .console-main > h1 + p {
  max-width: var(--kol-measure);
  margin-bottom: var(--kol-space-6);
}

body[data-theme] .main-content > h1 ~ .widget:first-of-type {
  margin-top: var(--kol-space-5);
}

/* ==========================================================================
   3. Console chrome additions (the parts the shared kit does not know about)
   ========================================================================== */
/* A developer console has seven primary destinations. Give them a dedicated
   row instead of squeezing them between the brand and account controls. */
.kol-console-header .kol-brand {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .kol-console-header .kol-header-bar {
    flex-wrap: wrap;
    row-gap: 0;
  }

  .kol-console-header .kol-brand,
  .kol-console-header .kol-header-tools {
    min-height: 60px;
  }

  .kol-console-header .kol-nav {
    order: 3;
    flex: 1 0 100%;
    display: flex;
    flex-wrap: wrap;
    padding-bottom: var(--kol-space-2);
  }

  .kol-console-header .kol-nav .kol-nav-wide {
    display: inline-block;
  }

  .kol-console-header .kol-menu-btn {
    display: none;
  }
}

.kol-account-pop .kol-pop-panel {
  min-width: 232px;
}

.kol-account-id {
  display: grid;
  gap: 2px;
  padding: var(--kol-space-2) var(--kol-space-3) var(--kol-space-3);
  margin-bottom: var(--kol-space-2);
  border-bottom: 1px solid var(--kol-line);
}

.kol-account-id .kol-eyebrow {
  font-size: 10px;
}

.kol-account-id .user-email {
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.kol-account-id .user-email:empty::before {
  content: "—";
  color: var(--kol-ink-faint);
  font-weight: 400;
}

.kol-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--kol-line-strong);
  border-radius: 50%;
  background: var(--kol-sunk);
  color: var(--kol-ink);
}

.kol-avatar svg {
  width: 16px;
  height: 16px;
}

.kol-sheet-panel .kol-account-id {
  padding-inline: 0;
}

/* The shared accessibility trigger floats above page content. While the phone
   sheet is open its in-sheet Accessibility action remains the only trigger;
   that action closes the sheet before opening the real panel. */
[data-kol-menu][data-open] ~ #a11y-toggle {
  visibility: hidden;
  pointer-events: none;
}

.a11y-reset {
  width: 100%;
  margin-top: var(--kol-space-3);
}

.kol-console-footer {
  border-top: 1px solid var(--kol-line);
  background: var(--kol-surface);
}

.kol-console-footer .kol-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-3) var(--kol-space-5);
  padding-block: var(--kol-space-5);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

.kol-console-footer a {
  color: var(--kol-ink-faint);
  text-decoration: none;
}

.kol-console-footer a:hover {
  color: var(--kol-ink);
  text-decoration: underline;
}

.kol-console-footer .kol-console-footer-mark {
  margin-inline-end: auto;
  color: var(--kol-ink-muted);
}

/* The pages that ship their own footer (the API landing page, the public
   reference, the status page) keep it — it carries their legal copy — but it
   reads like the injected one. */
body[data-theme] footer,
body[data-theme] .main-footer {
  margin-top: var(--kol-space-7);
  padding-block: var(--kol-space-5);
  border-top: 1px solid var(--kol-line);
  background: var(--kol-surface);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
  text-align: start;
}

body[data-theme] footer .container,
body[data-theme] .main-footer .container {
  width: 100%;
  max-width: var(--kol-max);
  margin-inline: auto;
  padding-inline: var(--kol-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-2) var(--kol-space-4);
}

body[data-theme] footer a,
body[data-theme] .main-footer a {
  color: var(--kol-ink-faint);
  text-decoration: none;
}

body[data-theme] footer a:hover,
body[data-theme] .main-footer a:hover {
  color: var(--kol-ink);
  text-decoration: underline;
}

/* ==========================================================================
   4. Cards — every legacy panel becomes one flat kit surface
   ========================================================================== */
body[data-theme] .widget,
body[data-theme] .usage-card,
body[data-theme] .usage-section,
body[data-theme] .chart-container,
body[data-theme] .chart-box,
body[data-theme] .billing-section,
body[data-theme] .setting-section,
body[data-theme] .model-card,
body[data-theme] .pricing-card,
body[data-theme] .playground-card,
body[data-theme] .input-section,
body[data-theme] .auth-card,
body[data-theme] .breakdown-card,
body[data-theme] .payment-method,
body[data-theme] .endpoint,
body[data-theme] .capability,
body[data-theme] .feature-item,
body[data-theme] .how-it-works-item,
body[data-theme] .status-item,
body[data-theme] .code-block-wrapper {
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  box-shadow: none;
  color: var(--kol-ink);
}

body[data-theme] .widget,
body[data-theme] .usage-section,
body[data-theme] .billing-section,
body[data-theme] .setting-section,
body[data-theme] .playground-card,
body[data-theme] .input-section,
body[data-theme] .model-card,
body[data-theme] .pricing-card {
  padding: var(--kol-space-5);
  margin-bottom: var(--kol-gap);
}

body[data-theme] .widget h2,
body[data-theme] .usage-section h2,
body[data-theme] .billing-section h2 {
  margin-bottom: var(--kol-space-4);
  font-size: var(--kol-text-base);
  letter-spacing: 0;
}

body[data-theme] .model-card:hover,
body[data-theme] .pricing-card:hover,
body[data-theme] .capability:hover,
body[data-theme] .feature-item:hover {
  border-color: var(--kol-line-strong);
  transform: none;
  box-shadow: none;
}

body[data-theme] .dashboard-grid,
body[data-theme] .usage-summary-grid,
body[data-theme] .charts-grid,
body[data-theme] .breakdown-grid,
body[data-theme] .features-grid,
body[data-theme] .models-grid {
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  body[data-theme] .usage-summary-grid,
  body[data-theme] .breakdown-grid,
  body[data-theme] .features-grid,
  body[data-theme] .models-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  body[data-theme] .dashboard-grid,
  body[data-theme] .charts-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-theme] .usage-summary-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body[data-theme] .breakdown-grid,
  body[data-theme] .features-grid,
  body[data-theme] .models-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* One measured number per card. */
body[data-theme] .usage-card {
  padding: var(--kol-space-5);
  gap: var(--kol-space-2);
}

body[data-theme] .usage-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kol-space-3);
  margin-bottom: var(--kol-space-2);
}

body[data-theme] .usage-card-header h3 {
  font-size: var(--kol-text-sm);
  font-weight: 600;
  color: var(--kol-ink-muted);
  letter-spacing: 0;
}

body[data-theme] .usage-card-header i {
  color: var(--kol-ink-faint);
  font-size: 14px;
}

/* A balance is a number, not a live state: the accent stays on the action. */
body[data-theme] .balance-amount,
body[data-theme] .credit-balance-value,
body[data-theme] .credit-total-value,
body[data-theme] .current-settings h4,
body[data-theme] .price,
body[data-theme] .model-rate {
  color: var(--kol-ink);
}

body[data-theme] .usage-card-value,
body[data-theme] .card-value-text {
  color: var(--kol-ink);
  font-size: var(--kol-text-2xl);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-tight);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. Buttons — amber is only ever the primary action
   ========================================================================== */
body[data-theme] .button,
body[data-theme] .btn,
body[data-theme] .auth-button,
body[data-theme] .export-btn,
body[data-theme] .action-btn,
body[data-theme] .cancel-btn,
body[data-theme] .copy-button,
body[data-theme] .fullscreen-btn,
body[data-theme] .button-secondary,
body[data-theme] .button-danger,
body[data-theme] .preset-amount,
body[data-theme] .add-credits-btn,
body[data-theme] .add-payment-btn,
body[data-theme] .process-btn,
body[data-theme] .setup-btn,
body[data-theme] .modify-btn,
body[data-theme] .save-threshold-btn,
body[data-theme] .cancel-plan-btn,
body[data-theme] .danger-btn,
body[data-theme] .tab-btn,
body[data-theme] .sidebar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kol-space-2);
  min-height: 44px;
  padding: 0 var(--kol-space-5);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-pill);
  background: transparent;
  color: var(--kol-ink);
  font-size: var(--kol-text-base);
  font-weight: 600;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: none;
  transition:
    background-color var(--kol-motion-fast) var(--kol-ease),
    border-color var(--kol-motion-fast) var(--kol-ease);
}

body[data-theme] .button,
body[data-theme] .btn-primary,
body[data-theme] .auth-button,
body[data-theme] .btn-success,
body[data-theme] .add-credits-btn,
body[data-theme] .process-btn,
body[data-theme] .setup-btn,
body[data-theme] .save-threshold-btn {
  border-color: var(--kol-accent);
  background: var(--kol-accent);
  color: var(--kol-accent-ink);
}

body[data-theme] .button:hover,
body[data-theme] .btn-primary:hover,
body[data-theme] .auth-button:hover,
body[data-theme] .btn-success:hover,
body[data-theme] .add-credits-btn:hover,
body[data-theme] .process-btn:hover,
body[data-theme] .setup-btn:hover,
body[data-theme] .save-threshold-btn:hover {
  border-color: var(--kol-accent-hover);
  background: var(--kol-accent-hover);
  color: var(--kol-accent-ink);
}

/* The generic console link and legacy dark-theme rules have greater cascade
   reach than the shared kit's `.kol-btn-primary` rule. Keep primary actions
   on the kit's deliberately dark accent ink in every interaction state. */
body[data-theme] .kol-btn-primary,
body[data-theme] .kol-btn-primary:hover,
body[data-theme] .kol-btn-primary:focus,
body[data-theme] .kol-btn-primary:disabled,
body[data-theme] .kol-btn-primary[aria-disabled="true"] {
  color: var(--kol-accent-ink);
}

body[data-theme] .button-secondary:hover,
body[data-theme] .btn:hover,
body[data-theme] .export-btn:hover,
body[data-theme] .action-btn:hover,
body[data-theme] .cancel-btn:hover,
body[data-theme] .copy-button:hover,
body[data-theme] .fullscreen-btn:hover,
body[data-theme] .preset-amount:hover {
  background: var(--kol-sunk);
}

body[data-theme] .button-danger,
body[data-theme] .danger-btn,
body[data-theme] .cancel-plan-btn {
  border-color: var(--danger-color);
  background: transparent;
  color: var(--danger-color);
}

body[data-theme] .button-danger:hover,
body[data-theme] .danger-btn:hover,
body[data-theme] .cancel-plan-btn:hover {
  background: var(--kol-sunk);
}

body[data-theme] .btn-outline-light {
  border-color: var(--kol-line-strong);
  background: transparent;
  color: var(--kol-ink);
}

body[data-theme] .button-small,
body[data-theme] .btn-sm,
body[data-theme] .copy-button {
  min-height: 34px;
  padding-inline: var(--kol-space-4);
  font-size: var(--kol-text-sm);
}

body[data-theme] .btn-lg {
  min-height: 48px;
  padding-inline: var(--kol-space-6);
}

body[data-theme] .preset-amount,
body[data-theme] .preset-amount.active {
  font-variant-numeric: tabular-nums;
}

body[data-theme] .preset-amount.active,
body[data-theme] .preset-amount[aria-pressed="true"] {
  border-color: var(--kol-accent);
  background: var(--kol-accent-quiet);
  color: var(--kol-ink);
}

body[data-theme] .button:disabled,
body[data-theme] .btn:disabled,
body[data-theme] .button-danger:disabled,
body[data-theme] .button-secondary:disabled,
body[data-theme] .auth-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

body[data-theme] .close-button,
body[data-theme] .close,
body[data-theme] .modal-header .close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: var(--kol-radius-sm);
  background: none;
  color: var(--kol-ink-faint);
  font-size: 1.35rem;
  line-height: 1;
  text-shadow: none;
  opacity: 1;
  cursor: pointer;
}

body[data-theme] .close-button:hover,
body[data-theme] .close:hover {
  background: var(--kol-sunk);
  color: var(--kol-ink);
}

/* ==========================================================================
   6. Forms
   ========================================================================== */
body[data-theme] input[type="text"],
body[data-theme] input[type="email"],
body[data-theme] input[type="password"],
body[data-theme] input[type="number"],
body[data-theme] input[type="url"],
body[data-theme] input[type="date"],
body[data-theme] input[type="search"],
body[data-theme] select,
body[data-theme] textarea,
body[data-theme] .form-control,
body[data-theme] .custom-amount-input input {
  width: 100%;
  min-height: 44px;
  padding: var(--kol-space-3) var(--kol-space-4);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-surface);
  color: var(--kol-ink);
  font-family: inherit;
  font-size: var(--kol-text-base);
  box-shadow: none;
}

body[data-theme] textarea {
  min-height: 132px;
  resize: vertical;
}

body[data-theme] select {
  padding-inline-end: var(--kol-space-6);
}

body[data-theme] input::placeholder,
body[data-theme] textarea::placeholder {
  color: var(--kol-ink-faint);
}

body[data-theme] input:focus-visible,
body[data-theme] select:focus-visible,
body[data-theme] textarea:focus-visible {
  border-color: var(--kol-ink);
  outline: 2px solid var(--kol-focus);
  outline-offset: 1px;
}

body[data-theme] input[type="checkbox"],
body[data-theme] input[type="radio"] {
  width: 18px;
  min-height: 18px;
  height: 18px;
  accent-color: var(--kol-accent);
}

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

.chart-data-equivalent {
  margin-top: 0.75rem;
  min-width: 0;
}

.chart-data-state {
  margin: 0;
  color: var(--kol-ink-muted, #666);
  font-size: 0.9rem;
}

.chart-data-details summary {
  width: fit-content;
  max-width: 100%;
  color: var(--kol-ink, #17181a);
  cursor: pointer;
  font-weight: 650;
  overflow-wrap: anywhere;
}

.chart-data-scroll {
  margin-top: 0.65rem;
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

.chart-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.chart-data-table caption {
  padding: 0 0 0.5rem;
  color: var(--kol-ink, currentColor);
  font-weight: 700;
  text-align: start;
}

.chart-data-table th,
.chart-data-table td {
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid var(--kol-line, rgba(128, 128, 128, 0.35));
  text-align: start;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.chart-data-table thead th {
  color: var(--kol-ink-muted, #666);
  font-size: 0.78rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

@media (max-width: 420px) {
  .chart-data-table th,
  .chart-data-table td {
    padding-inline: 0.4rem;
  }
}

/* Every remaining `#444` / `#2a2a2a` dark fill on a field or a readout, from
   api-usage.css, auth.css, auto-recharge.css, playground.css and styles.css.
   A field is a surface with a hairline in both themes. */
body[data-theme="dark"] .filter-group select,
body[data-theme="dark"] .filter-group input,
body[data-theme="dark"] .group-by-controls select,
body[data-theme="dark"] .threshold-input,
body[data-theme="dark"] .threshold-input-container,
body[data-theme="dark"] .custom-amount-input,
body[data-theme="dark"] #preferences-form input[type="text"],
body[data-theme="dark"] #preferences-form input[type="email"],
body[data-theme="dark"] .playground-output,
body[data-theme="dark"] .playground-status-container,
body[data-theme] .auth-card,
body[data-theme] .form-group input {
  border: 1px solid var(--kol-line-strong);
  background-color: var(--kol-surface);
  color: var(--kol-ink);
}

body[data-theme] .auth-card {
  border-color: var(--kol-line);
}

body[data-theme="dark"] .playground-output,
body[data-theme="dark"] .playground-status-container {
  border-color: var(--kol-line);
  background-color: var(--kol-sunk);
}

body[data-theme] .form-group,
body[data-theme] .filter-group,
body[data-theme] .setting-item {
  display: grid;
  gap: var(--kol-space-2);
  margin-bottom: var(--kol-space-4);
}

body[data-theme] .form-group label,
body[data-theme] .filter-group label {
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  font-weight: 600;
}

body[data-theme] .checkbox-group,
body[data-theme] .radio-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kol-space-2) var(--kol-space-4);
}

body[data-theme] .checkbox-group label,
body[data-theme] .radio-group label {
  display: inline-flex;
  align-items: center;
  gap: var(--kol-space-2);
  font-weight: 400;
  color: var(--kol-ink-muted);
}

/* Filter and control rows read as one quiet strip above the data. */
body[data-theme] .usage-filters,
body[data-theme] .chart-controls,
body[data-theme] .table-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--kol-space-4);
  padding: var(--kol-space-4);
  margin-bottom: var(--kol-gap);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

body[data-theme] .usage-filters .filter-group,
body[data-theme] .chart-controls .filter-group,
body[data-theme] .table-controls .group-by-controls {
  max-width: 22rem;
  margin-bottom: 0;
  min-width: 170px;
  flex: 1 1 170px;
}

body[data-theme] .usage-filters .filter-group:last-child {
  flex: 0 0 auto;
  align-self: end;
}

@media (max-width: 767px) {
  body[data-theme] .usage-filters,
  body[data-theme] .chart-controls,
  body[data-theme] .table-controls {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   7. Tabs
   ========================================================================== */
body[data-theme] .tab-menu,
body[data-theme] .auth-tabs,
body[data-theme] .result-tabs {
  display: flex;
  gap: var(--kol-space-1);
  margin-bottom: var(--kol-space-5);
  padding-bottom: 0;
  border: 0;
  border-bottom: 1px solid var(--kol-line);
  background: none;
  overflow-x: auto;
  scrollbar-width: thin;
}

body[data-theme] .tab-button,
body[data-theme] .auth-tab-button,
body[data-theme] .result-tab {
  min-height: 42px;
  padding: 0 var(--kol-space-4);
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

body[data-theme] .tab-button:hover,
body[data-theme] .auth-tab-button:hover,
body[data-theme] .result-tab:hover {
  color: var(--kol-ink);
}

body[data-theme] .tab-button.active,
body[data-theme] .auth-tab-button.active,
body[data-theme] .result-tab.active {
  border-bottom-color: var(--kol-accent);
  background: none;
  color: var(--kol-ink);
}

/* ==========================================================================
   8. Tables — a scroll container on a phone, never a squeezed grid
   ========================================================================== */
body[data-theme] .table-container,
body[data-theme] .table-wrapper,
body[data-theme] .table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

/* A bare table shrinks and wraps; only a table inside a scroll container is
   allowed to keep a minimum width, because a column of numbers reads worse
   wrapped than scrolled. Without this, the reference pages' parameter tables
   push the whole document wider than a phone. */
body[data-theme] table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  background: none;
  font-size: var(--kol-text-sm);
}

body[data-theme] .table-container > table,
body[data-theme] .table-wrapper > table,
body[data-theme] .table-scroll > table,
body[data-theme] .model-comparison-scroll > table {
  min-width: 34rem;
}

body[data-theme] th,
body[data-theme] td {
  overflow-wrap: break-word;
}

body[data-theme] td code,
body[data-theme] td .param-name,
body[data-theme] td .endpoint-url {
  overflow-wrap: anywhere;
}

body[data-theme] .table-container > table,
body[data-theme] .table-wrapper > table {
  border: 0;
}

body[data-theme] th,
body[data-theme] td {
  padding: var(--kol-space-3) var(--kol-space-4);
  border: 0;
  border-bottom: 1px solid var(--kol-line);
  text-align: start;
  vertical-align: middle;
}

body[data-theme] thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--kol-sunk);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-wide);
  text-transform: uppercase;
  white-space: nowrap;
}

body[data-theme] tbody tr:last-child td {
  border-bottom: 0;
}

body[data-theme] tbody tr:hover {
  background: var(--kol-sunk);
}

body[data-theme] td.numeric,
body[data-theme] td[data-numeric] {
  font-variant-numeric: tabular-nums;
}

@media (max-width: 767px) {
  body[data-theme] .hide-on-mobile {
    display: none;
  }
}

/* ==========================================================================
   9. Status words, badges, chips
   ========================================================================== */
body[data-theme] .status-badge,
body[data-theme] .badge,
body[data-theme] .tag,
body[data-theme] .status-active,
body[data-theme] .status-revoked,
body[data-theme] .status-completed,
body[data-theme] .status-failed,
body[data-theme] .status-pending,
body[data-theme] .status-progress,
body[data-theme] .method-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--kol-space-1);
  padding: 2px var(--kol-space-2);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-pill);
  background: var(--kol-sunk);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
}

/* A live thing is amber; everything else is quiet. */
body[data-theme] .status-active,
body[data-theme] .status-progress,
body[data-theme] .status-badge.operational,
body[data-theme] .badge.active {
  border-color: var(--kol-accent);
  background: var(--kol-accent-quiet);
  color: var(--kol-ink);
}

body[data-theme] .status-failed,
body[data-theme] .status-revoked {
  border-color: var(--danger-color);
  background: transparent;
  color: var(--danger-color);
}

/* models.html gives each model family its own blue, pink or purple badge, and
   the landing page's flagship tag is purple. One accent: a badge is a quiet
   chip, and only the flagship carries amber. */
body[data-theme] .badge-core,
body[data-theme] .badge-edge,
body[data-theme] .badge-oracle,
body[data-theme] .badge.oracle-badge,
body[data-theme] .badge.popular-badge,
body[data-theme] .tag.legacy {
  border: 1px solid var(--kol-line-strong);
  background-color: var(--kol-sunk);
  color: var(--kol-ink-muted);
}

body[data-theme] .badge.oracle-badge,
body[data-theme] .badge.popular-badge,
body[data-theme] .tag.flagship {
  border-color: var(--kol-accent);
  background-color: var(--kol-accent-quiet);
  color: var(--kol-ink);
}

/* No lift and no coloured shadow on a model card, a FAQ row or a table. */
body[data-theme] .model-card,
body[data-theme] .model-card:hover,
body[data-theme] .faq-item,
body[data-theme] .faq-item:hover,
body[data-theme] .pricing-table,
body[data-theme] .benchmark-table {
  box-shadow: none;
  transform: none;
}

body[data-theme] .faq-item {
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background-color: var(--kol-surface);
}

body[data-theme] .faq-item.active .faq-question {
  background-color: var(--kol-sunk);
}

body[data-theme] .pricing-table th,
body[data-theme] .benchmark-table th {
  background-color: var(--kol-sunk);
}

body[data-theme] .model-guidance {
  min-height: 2.8em;
  margin: var(--kol-space-2) 0 0;
  padding-inline-start: var(--kol-space-3);
  border-inline-start: 2px solid var(--kol-line-strong);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  line-height: 1.4;
}

body[data-theme] .model-choice-guide {
  margin-block: var(--kol-space-6);
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

body[data-theme] .model-choice-guide .model-choice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--kol-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

body[data-theme] .model-choice-guide .model-choice-list li {
  display: grid;
  gap: var(--kol-space-1);
  margin: 0;
  padding: var(--kol-space-3) 0;
  border-block-end: 1px solid var(--kol-line);
}

body[data-theme] .model-choice-guide .model-choice-list li::before {
  content: none;
}

body[data-theme] .model-choice-guide .model-choice-list span,
body[data-theme] .model-group-heading p {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

body[data-theme] .model-group {
  margin-block: var(--kol-space-7);
}

body[data-theme] .model-group-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--kol-space-5);
  margin-block-end: var(--kol-space-4);
}

body[data-theme] .model-group-heading h2,
body[data-theme] .model-group-heading p {
  margin: 0;
}

body[data-theme] .model-group .models-grid {
  margin-block: 0;
}

body[data-theme] .pricing-table .model-table-group th {
  padding-block: var(--kol-space-2);
  background: var(--kol-paper);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-xs);
  letter-spacing: var(--kol-tracking-wide);
  text-align: start;
  text-transform: uppercase;
}

body[data-theme] .toc-sidebar .toc-section-header {
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
}

body[data-theme] .toc-sidebar a.toc-section-header {
  display: flex;
  border-inline-start: 0;
  font-size: inherit;
  text-decoration: none;
}

/* ==========================================================================
   10. Code, docs and API reference
   ========================================================================== */
body[data-theme] pre,
body[data-theme] .code-block-wrapper pre,
body[data-theme] .code-block {
  padding: var(--kol-space-4);
  border: 0;
  border-radius: var(--kol-radius);
  background: var(--kol-sunk);
  color: var(--kol-ink);
  font-family: var(--kol-font-mono);
  font-size: var(--kol-text-sm);
  line-height: 1.55;
  overflow-x: auto;
}

body[data-theme] .code-block-wrapper {
  position: relative;
  padding: 0;
  overflow: hidden;
}

body[data-theme] code,
body[data-theme] kbd,
body[data-theme] samp {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--kol-sunk);
  color: var(--kol-ink);
  font-family: var(--kol-font-mono);
  font-size: 0.9em;
}

body[data-theme] pre code {
  padding: 0;
  background: none;
}

body[data-theme] .copy-button {
  position: absolute;
  inset-inline-end: var(--kol-space-2);
  inset-block-start: var(--kol-space-2);
  z-index: 1;
  min-height: 30px;
  padding-inline: var(--kol-space-3);
  border-color: var(--kol-line);
  background: var(--kol-surface);
  font-size: var(--kol-text-xs);
}

/* A code block is LTR whatever the page direction, so its horizontal scroll
   starts at the beginning of the line instead of the middle of it. */
html[dir="rtl"] body[data-theme] .code-block-wrapper,
html[dir="rtl"] body[data-theme] pre {
  direction: ltr;
  text-align: left;
}

body[data-theme] .param-name,
body[data-theme] .endpoint-url {
  font-family: var(--kol-font-mono);
  color: var(--kol-ink);
}

body[data-theme] .param-type,
body[data-theme] .param-default {
  color: var(--kol-ink-faint);
  font-family: var(--kol-font-mono);
  font-size: var(--kol-text-xs);
}

/* The pages' own sheets paint these badges as white-on-red / white-on-grey
   pills; the kit paints them as quiet outlined chips so the label keeps
   AA contrast in both themes (ink on the accent wash, muted ink on paper). */
body[data-theme] .param-required,
body[data-theme] .param-optional {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-pill, 999px);
  background: transparent;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-xs);
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

body[data-theme] .param-required {
  border-color: var(--kol-accent);
  background: var(--kol-accent-quiet);
  color: var(--kol-ink);
}

/* login.html: "Don't have an account? Sign Up" — a link inside running text
   needs more than colour to be recognisable (WCAG 1.4.1). */
body[data-theme] .auth-links a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

body[data-theme] .section,
body[data-theme] .billing-section + .billing-section {
  scroll-margin-top: calc(var(--kol-console-offset, var(--kol-header-h)) + var(--kol-space-5));
}

/* In-page documentation links can target headings nested inside a section.
   Keep every documented destination below the measured sticky console header. */
body[data-theme] .toc-sidebar ~ .main-content [id] {
  scroll-margin-top: calc(var(--kol-console-offset, var(--kol-header-h)) + var(--kol-space-4));
}

body[data-theme] .section-title,
body[data-theme] .section-heading h2 {
  letter-spacing: var(--kol-tracking-tight);
}

body[data-theme] .section-divider,
body[data-theme] hr {
  height: 0;
  border: 0;
  border-top: 1px solid var(--kol-line);
  background: none;
}

/* The two reference pages underline every section heading in the accent, and
   public_api_docs.html paints its h2 in it as well. Amber is a primary action
   and a live state, not a rule under a heading. */
body[data-theme] .section h2,
body[data-theme] .toc-sidebar h3 {
  border-bottom: 1px solid var(--kol-line);
  padding-bottom: var(--kol-space-3);
  color: var(--kol-ink);
}

body[data-theme] h2 {
  color: var(--kol-ink);
}

/* The docs table of contents sits beside the prose on a desktop and collapses
   into the flow on a phone. */
/* The reference pages' table of contents is `position: fixed; right: 0` with a
   physical `margin-right` reserved on the prose. In Hebrew and Arabic that put
   the panel over the text, so it is re-hung with logical properties, tucked
   under the sticky header, and the prose is given room on whichever side it
   actually occupies. */
body[data-theme] .toc-sidebar,
body[data-theme] .toc {
  border: 0;
  border-inline-start: 1px solid var(--kol-line);
  border-radius: 0;
  background: var(--kol-surface);
  box-shadow: none;
}

body[data-theme] .toc-sidebar {
  left: auto;
  right: auto;
  inset-inline-end: 0;
  top: var(--kol-console-offset, var(--kol-header-h));
  z-index: 20;
  width: 300px;
  height: calc(100vh - var(--kol-console-offset, var(--kol-header-h)));
  padding: var(--kol-space-5) var(--kol-space-4);
  overflow-y: auto;
}

/* The prose is a sibling that follows the panel in the markup. */
body[data-theme] .toc-sidebar ~ .main-content {
  margin-inline: 0 auto;
  margin-right: 0;
}

@media (min-width: 1200px) {
  body[data-theme] .toc-sidebar ~ .main-content {
    max-width: calc(var(--kol-max) - 60px);
    margin-inline-end: 320px;
    margin-inline-start: auto;
  }
}

@media (max-width: 1199px) {
  body[data-theme] .toc-sidebar {
    display: none;
  }

  body[data-theme] .toc-sidebar.mobile-open {
    display: block;
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    max-height: min(65vh, 32rem);
    margin: 0 var(--kol-gutter) var(--kol-space-4);
    padding: var(--kol-space-4);
    border: 1px solid var(--kol-line);
    border-radius: var(--kol-radius-sm);
    overflow-y: auto;
  }
}

body[data-theme] .toc-section-title,
body[data-theme] .toc-section-header {
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  font-weight: 600;
}

body[data-theme] .toc a {
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  text-decoration: none;
}

body[data-theme] .toc a:hover,
body[data-theme] .toc a.active {
  color: var(--kol-ink);
}

/* ==========================================================================
   11. Modals and toasts
   ========================================================================== */
body[data-theme] .modal {
  background: rgba(23, 24, 26, 0.45);
  backdrop-filter: none;
}

body[data-theme] .modal-content {
  width: min(560px, calc(100vw - 2 * var(--kol-gutter)));
  max-height: min(86vh, 900px);
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-lg);
  background: var(--kol-surface);
  color: var(--kol-ink);
  box-shadow: var(--kol-shadow);
  overflow-y: auto;
}

body[data-theme] .modal-header,
body[data-theme] .modal-footer {
  display: flex;
  align-items: center;
  gap: var(--kol-space-4);
  padding: 0;
  border: 0;
  background: none;
}

body[data-theme] .modal-header {
  justify-content: space-between;
  margin-bottom: var(--kol-space-4);
}

body[data-theme] .modal-footer {
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: var(--kol-space-5);
}

body[data-theme] .api-key-display,
body[data-theme] #newKeyResult {
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-sunk);
  color: var(--kol-ink);
  font-family: var(--kol-font-mono);
  font-size: var(--kol-text-sm);
  overflow-wrap: anywhere;
}

/* The toast used physical left/right, so it landed underneath the fixed
   accessibility button. The kit hangs that button at the inline END, so the
   toast takes the inline start and, on a phone, sits above it. */
body[data-theme] #toast,
body[data-theme] .toast {
  left: auto;
  right: auto;
  inset-inline-start: var(--kol-gutter);
  inset-inline-end: auto;
  bottom: var(--kol-space-5);
  width: auto;
  max-width: min(30rem, calc(100vw - 2 * var(--kol-gutter)));
  padding: var(--kol-space-3) var(--kol-space-5);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-pill);
  background: var(--kol-surface);
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  box-shadow: var(--kol-shadow);
}

body[data-theme] #toast.success,
body[data-theme] .toast.success,
body[data-theme] #toast.info,
body[data-theme] .toast.info {
  background: var(--kol-surface);
  color: var(--kol-ink);
}

body[data-theme] #toast.error,
body[data-theme] .toast.error {
  background: var(--kol-surface);
  border-color: var(--danger-color);
  color: var(--danger-color);
}

@media (max-width: 767px) {
  body[data-theme] #toast,
  body[data-theme] .toast {
    inset-inline: var(--kol-gutter);
    max-width: none;
    bottom: calc(var(--kol-space-5) + 52px);
    text-align: center;
  }
}

/* The legacy sheet hides the toast with opacity alone, so the invisible strip
   still took clicks: on a phone it spans the width above the bottom edge and
   swallowed taps meant for what sits beneath it, such as the menu's Logout. */
#toast,
.toast {
  pointer-events: none;
}

#toast.show,
.toast.show {
  pointer-events: auto;
}

/* ==========================================================================
   12. Charts — one height, responsive, and no glow behind them
   ========================================================================== */
body[data-theme] .chart-container,
body[data-theme] .chart-box {
  display: flex;
  flex-direction: column;
  gap: var(--kol-space-3);
  padding: var(--kol-space-5);
  min-width: 0;
}

body[data-theme] .chart-container h3,
body[data-theme] .chart-box h3,
body[data-theme] .chart-header h3 {
  font-size: var(--kol-text-sm);
  font-weight: 600;
  color: var(--kol-ink-muted);
}

body[data-theme] .chart-wrapper,
body[data-theme] .chart-container canvas,
body[data-theme] .chart-box canvas,
body[data-theme] .widget canvas {
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  max-height: 260px;
}

body[data-theme] .chart-loading,
body[data-theme] .card-loading,
body[data-theme] .loading-indicator,
body[data-theme] .loading-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kol-space-2);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

/* ==========================================================================
   13. Auth pages
   ========================================================================== */
body[data-theme] .auth-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - var(--kol-header-h));
  padding: var(--kol-space-7) var(--kol-gutter);
  background: var(--kol-paper);
}

body[data-theme] .auth-card {
  width: min(440px, 100%);
  padding: var(--kol-space-6);
  box-shadow: none;
}

body[data-theme] .auth-logo {
  display: flex;
  align-items: center;
  gap: var(--kol-space-2);
  margin-bottom: var(--kol-space-5);
  color: var(--kol-ink);
  font-size: var(--kol-text-lg);
  font-weight: 600;
}

body[data-theme] .auth-card h1 {
  margin-bottom: var(--kol-space-5);
  font-size: var(--kol-text-xl);
}

body[data-theme] .auth-button {
  width: 100%;
  margin-top: var(--kol-space-2);
}

body[data-theme] .auth-links,
body[data-theme] .auth-link-row,
body[data-theme] .auth-helper-text {
  margin-top: var(--kol-space-4);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

body[data-theme] .auth-text-link,
body[data-theme] .agreement-link {
  color: var(--kol-ink);
  text-decoration: underline;
  text-decoration-color: var(--kol-line-strong);
}

body[data-theme] .auth-logo .logo-text {
  color: var(--kol-ink);
  font-size: var(--kol-text-xl);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-tight);
  background: none;
  -webkit-text-fill-color: currentColor;
}

body[data-theme] .auth-logo .logo-subtitle {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-base);
  font-weight: 400;
}

body[data-theme] .auth-logo img {
  width: 32px;
  height: 32px;
  border-radius: var(--kol-radius-sm);
}

/* auth.html's sheet is a hardcoded dark blue card; everything it paints by
   hand is brought back to the tokens here. */
body[data-theme] .agreement-section,
body[data-theme] .verification-notice,
body[data-theme] .success-message,
body[data-theme] .info-message {
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  background-color: var(--kol-sunk);
  color: var(--kol-ink-muted);
}

body[data-theme] .verification-notice,
body[data-theme] .verification-notice .warning-icon {
  border-color: var(--kol-accent);
  color: var(--kol-ink);
}

body[data-theme] .success-message,
body[data-theme] .success-message .success-icon,
body[data-theme] .info-message,
body[data-theme] .info-message .info-icon {
  color: var(--kol-ink);
}

body[data-theme] .agreement-checkbox label,
body[data-theme] .auth-helper-note,
body[data-theme] .resend-verification,
body[data-theme] #google-signin-note,
body[data-theme] .social-divider {
  color: var(--kol-ink-faint);
}

body[data-theme] .social-divider::before,
body[data-theme] .social-divider::after {
  border-bottom-color: var(--kol-line);
}

body[data-theme] .resend-link,
body[data-theme] .resend-link:hover {
  color: var(--kol-ink);
}

body[data-theme] .error-message.show {
  padding: var(--kol-space-3);
  border: 1px solid var(--danger-color);
  border-radius: var(--kol-radius-sm);
  background-color: transparent;
  animation: none;
}

body[data-theme] .error-message,
body[data-theme] .form-error {
  color: var(--danger-color);
  font-size: var(--kol-text-sm);
}

body[data-theme] .legal-authority-notice {
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-xs);
}

/* ==========================================================================
   14. Playground
   ========================================================================== */
/* playground.css fills every field with #444 in dark and playground-fixes.css
   hardcodes #f5f5f5 / #2a2a2a on the request textarea. Fields are surfaces. */
body[data-theme="dark"] .playground-form input,
body[data-theme="dark"] .playground-form select,
body[data-theme="dark"] .playground-form textarea,
body[data-theme] #request-json,
body[data-theme] #raw-response-content,
body[data-theme] .playground-form input,
body[data-theme] .playground-form select,
body[data-theme] .playground-form textarea {
  border: 1px solid var(--kol-line-strong);
  background-color: var(--kol-surface);
  color: var(--kol-ink);
}

body[data-theme] #request-json,
body[data-theme] #raw-response-content {
  font-family: var(--kol-font-mono);
  font-size: var(--kol-text-sm);
}

body[data-theme="dark"] .input-method-toggle,
body[data-theme] .input-method-toggle {
  background-color: var(--kol-sunk);
}

body[data-theme="dark"] .input-method-toggle button:hover {
  background-color: transparent;
}

/* A two-way choice is the kit's switch: a quiet track, and the live side is a
   raised surface. It is not a primary action, so it is not a block of amber. */
body[data-theme] .input-method-toggle {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-pill);
  background-color: var(--kol-sunk);
}

body[data-theme] .input-method-toggle button {
  flex: 0 1 auto;
  min-height: 36px;
  padding: 0 var(--kol-space-4);
  border: 1px solid transparent;
  border-radius: var(--kol-radius-pill);
  background-color: transparent;
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
  font-weight: 500;
  box-shadow: none;
  transform: none;
}

body[data-theme] .input-method-toggle button:hover {
  background-color: transparent;
  color: var(--kol-ink);
}

body[data-theme] .input-method-toggle button.active,
body[data-theme] .input-method-toggle button.active:hover {
  border-color: var(--kol-line);
  background-color: var(--kol-surface);
  color: var(--kol-ink);
  font-weight: 600;
  box-shadow: none;
  transform: none;
}

body[data-theme] .playground-output,
body[data-theme] .placeholder-message {
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-sunk);
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

body[data-theme] .placeholder-message {
  color: var(--kol-ink-faint);
  text-align: center;
}

body[data-theme] .spinner,
body[data-theme] .spinner-border {
  border-color: var(--kol-line);
  border-top-color: var(--kol-accent);
}

/* ==========================================================================
   15. Icons — the legacy Font Awesome glyphs inherit ink, never a brand colour
   ========================================================================== */
body[data-theme] .fas,
body[data-theme] .far,
body[data-theme] .fab,
body[data-theme] .fa {
  color: inherit;
}

body[data-theme] .icon,
body[data-theme] .feature-item i,
body[data-theme] .capability i,
body[data-theme] .how-it-works-item i {
  color: var(--kol-ink-faint);
  background: none;
  -webkit-text-fill-color: currentColor;
}

/* ==========================================================================
   16. Phone
   ========================================================================== */
@media (max-width: 767px) {
  body[data-theme] .main-content,
  body[data-theme] .console-main {
    padding-block: var(--kol-space-5) var(--kol-space-7);
  }

  body[data-theme] .widget,
  body[data-theme] .usage-section,
  body[data-theme] .billing-section,
  body[data-theme] .setting-section,
  body[data-theme] .playground-card,
  body[data-theme] .input-section,
  body[data-theme] .model-card,
  body[data-theme] .pricing-card {
    padding: var(--kol-space-4);
  }

  body[data-theme] .modal-content {
    padding: var(--kol-space-4);
  }

  body[data-theme] .preset-amounts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--kol-space-2);
  }

  body[data-theme] .modal-footer .button,
  body[data-theme] .modal-footer .button-secondary,
  body[data-theme] .modal-footer .button-danger {
    flex: 1 1 100%;
  }

  body[data-theme] .model-choice-guide .model-choice-list {
    grid-template-columns: 1fr;
  }

  body[data-theme] .model-group-heading {
    display: block;
  }

  body[data-theme] .model-group-heading p {
    margin-block-start: var(--kol-space-1);
  }
}

/* At the narrowest supported width, translated credit and currency labels need
   the full modal row. Two columns make RTL labels collide even though the page
   itself has no horizontal overflow. */
@media (max-width: 420px) {
  body[data-theme] #billing-package-options {
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-theme] #billing-package-options .preset-amount {
    min-width: 0;
    width: 100%;
    padding-inline: var(--kol-space-3);
    overflow-wrap: anywhere;
  }
}

/* ==========================================================================
   17. The API landing page and the public reference
   --------------------------------------------------------------------------
   css/api_landing.css predates the kit: it paints radial cyan and purple
   glows, coloured shadows, backdrop blur and staggered fade-ins. None of that
   survives here. The page becomes the same flat paper as everything else.
   ========================================================================== */
/* api_landing.css keeps its own GitHub-blue palette in `:root` and in a
   `body[data-theme="light"]` block, both of which outrank the token remap at
   the top of this file. Re-point them here, at matching specificity, or the
   landing page keeps a blue primary and a green "success" button. */
body[data-theme="dark"],
body[data-theme="light"] {
  --bg-color: var(--kol-paper);
  --header-bg: var(--kol-surface);
  --card-bg: var(--kol-surface);
  --border-color: var(--kol-line);
  --text-primary: var(--kol-ink);
  --text-secondary: var(--kol-ink-muted);
  /* These four are read as a text or border colour as often as they are read
     as a button background, so they resolve to ink; the amber lives only in
     the explicit primary-button rules in section 5. */
  --primary-accent: var(--kol-ink);
  --primary-accent-hover: var(--kol-ink);
  --success-color: var(--kol-ink);
  --special-accent: var(--kol-ink);
  --cyan-glow: transparent;
  --font-family: var(--kol-font-sans);
  --border-radius: var(--kol-radius);
  --box-shadow: none;
  --transition-speed: var(--kol-motion);
}

/* The landing sheet reserved 60px of body padding for its old fixed header. */
body[data-theme="dark"],
body[data-theme="light"],
body[data-i18n-skip] {
  padding: 0;
}

body[data-theme] .container {
  width: 100%;
  max-width: var(--kol-max);
  margin-inline: auto;
  padding-inline: var(--kol-gutter);
}

body[data-theme] .hero,
body[data-theme] .section,
body[data-theme] .section-bg,
body[data-theme] .cta-section,
body[data-theme] #oracle-announcement,
body[data-theme] .pricing-section,
body[data-theme] .benchmarks,
body[data-theme] .model-comparison-section {
  background: var(--kol-paper);
  background-image: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body[data-theme] .section-bg,
body[data-theme] .cta-section {
  background: var(--kol-surface);
}

body[data-theme] .hero,
body[data-theme] .section,
body[data-theme] .cta-section {
  padding-block: var(--kol-section-y);
  border-top: 1px solid var(--kol-line);
  text-align: start;
  overflow: visible;
}

body[data-theme] .hero {
  border-top: 0;
}

body[data-theme] .hero h1 {
  max-width: 24ch;
  margin-bottom: var(--kol-space-4);
  font-size: var(--kol-text-hero);
  font-weight: 600;
  line-height: var(--kol-leading-tight);
  letter-spacing: var(--kol-tracking-tight);
  animation: none;
}

body[data-theme] .hero .lead,
body[data-theme] .lead {
  max-width: var(--kol-measure);
  margin: 0 0 var(--kol-space-6);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-lg);
  line-height: var(--kol-leading-snug);
  animation: none;
}

body[data-theme] .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: var(--kol-space-3);
  animation: none;
}

body[data-theme] .section-title {
  max-width: var(--kol-measure);
  margin: 0 0 var(--kol-space-6);
  text-align: start;
}

body[data-theme] .section-title h2 {
  margin-bottom: var(--kol-space-2);
  font-size: var(--kol-text-2xl);
  font-weight: 600;
  letter-spacing: var(--kol-tracking-tight);
}

body[data-theme] .section-title p {
  max-width: var(--kol-measure);
  margin: 0;
  font-size: var(--kol-text-base);
  color: var(--kol-ink-muted);
}

/* The one list of facts on the landing page. Rows, not badges. */
body[data-theme] .api-facts {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--kol-line);
}

body[data-theme] .api-facts > li {
  padding: var(--kol-space-4) 0;
  border-bottom: 1px solid var(--kol-line);
  color: var(--kol-ink);
  font-size: var(--kol-text-base);
}

@media (min-width: 768px) {
  body[data-theme] .api-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--kol-space-7);
  }
}

body[data-theme] .credit-unit-price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--kol-space-3);
  margin: 0 0 var(--kol-space-5);
  padding: var(--kol-space-3) var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius-sm);
  background: var(--kol-surface);
  color: var(--kol-ink-muted);
  font-size: var(--kol-text-sm);
}

body[data-theme] .credit-unit-price strong {
  color: var(--kol-ink);
  font-size: var(--kol-text-lg);
  font-variant-numeric: tabular-nums;
}

body[data-theme] .pricing-note {
  max-width: var(--kol-measure);
  margin-top: var(--kol-space-5);
  color: var(--kol-ink-faint);
  font-size: var(--kol-text-sm);
}

body[data-theme] .model-comparison-scroll {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
}

body[data-theme] .model-name {
  color: var(--kol-ink);
  font-weight: 600;
}

body[data-theme] .model-rate {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body[data-theme] .tag.flagship {
  border-color: var(--kol-accent);
  background: var(--kol-accent-quiet);
}

/* The landing page's code samples are the product demo, so they get the
   framed treatment the kit gives a screenshot. */
body[data-theme] .hero + .section .code-block-wrapper,
body[data-theme] #quickstart .code-block-wrapper {
  margin-bottom: var(--kol-gap);
  border-radius: var(--kol-radius-lg);
  box-shadow: var(--kol-shadow);
}

body[data-theme] .code-block-wrapper pre {
  margin: 0;
  border-radius: 0;
}

body[data-theme] #quickstart .code-block-wrapper pre {
  padding: var(--kol-space-5);
}

/* index.html uses .chart-container as the wrapper around its benchmark chart
   boxes; api_usage.html uses the same class name for each chart card. Only
   the landing page's is a bare grid. */
body[data-theme] #benchmarks .chart-container {
  display: grid;
  gap: var(--kol-gap);
  grid-template-columns: 1fr;
  padding: 0;
  border: 0;
  background: none;
}

body[data-theme] .chart-wrapper {
  min-height: 240px;
}

/* No lift, no coloured shadow, on anything. */
body[data-theme] .btn:hover,
body[data-theme] .feature-item:hover,
body[data-theme] .pricing-card:hover,
body[data-theme] .card:hover {
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   css/auto-recharge.css paints its rows with hardcoded blue and green washes.
   The billing page gets the same quiet fill as every other surface.
   -------------------------------------------------------------------------- */
body[data-theme] .setting-item,
body[data-theme] .setting-section,
body[data-theme] .threshold-input-row,
body[data-theme] .payment-method-section,
body[data-theme] .payment-method,
body[data-theme] .recharge-info,
body[data-theme] .custom-amount-section,
body[data-theme] .preset-amounts,
body[data-theme] .currency-symbol,
body[data-theme] .threshold-input-container .currency-symbol,
body[data-theme] .threshold-input .currency-symbol {
  border-color: var(--kol-line);
  background-color: transparent;
  box-shadow: none;
}

/* Every `rgba(0, 102, 204, …)` wash in css/styles.css and
   css/auto-recharge.css becomes the one quiet fill. */
body[data-theme] .auto-recharge,
body[data-theme] .auto-recharge-explanation,
body[data-theme] .current-balance-section,
body[data-theme] .selected-amount-summary,
body[data-theme] .funds-alert-container,
body[data-theme] .settings-display,
body[data-theme] .alert-status-container,
body[data-theme] .alert-status {
  padding: var(--kol-space-4);
  border: 1px solid var(--kol-line);
  border-inline-start-width: 1px;
  border-radius: var(--kol-radius-sm);
  background-color: var(--kol-sunk);
  color: var(--kol-ink-muted);
}

body[data-theme] .auto-recharge-explanation p,
body[data-theme] .settings-display,
body[data-theme] .current-settings h4 {
  color: var(--kol-ink-muted);
}

/* The toggle switch: the track is a hairline, the live state is the accent. */
body[data-theme] .toggle-slider {
  background-color: var(--kol-line-strong);
}

body[data-theme] .toggle-switch input:checked + .toggle-slider {
  background-color: var(--kol-accent);
}

body[data-theme] input[type="range"] {
  accent-color: var(--kol-accent);
}

/* ==========================================================================
   18. The status page
   --------------------------------------------------------------------------
   css/status.css is the console's one self-contained sheet and it loads on a
   page whose <body> carries no data-theme until the chrome script runs, so
   these rules are deliberately unprefixed. "Operational" is quiet: a green
   badge for a service that is simply working is decoration. Degraded spends
   the one accent; an outage keeps a red, which carries information.
   ========================================================================== */
.status-dot.operational,
.legend.operational,
.uptime-bar.operational {
  background: var(--kol-ink-muted);
}

.status-dot.degraded,
.legend.degraded,
.uptime-bar.degraded {
  background: var(--kol-accent);
}

.status-dot.outage,
.legend.outage,
.uptime-bar.outage {
  background: #b3261e;
}

.status-dot.unknown,
.legend.unknown,
.uptime-bar.unknown {
  background: var(--kol-line-strong);
}

.status-label.operational {
  color: var(--kol-ink);
  background: var(--kol-sunk);
}

.status-label.degraded {
  color: var(--kol-ink);
  background: var(--kol-accent-quiet);
}

.status-label.outage {
  color: #b3261e;
  background: var(--kol-sunk);
}

/* The selected period uses the current theme's ink as its fill. In dark mode
   that fill is light, so its paired inverse ink must stay dark. */
.period-control button[aria-pressed="true"] {
  color: var(--kol-ink-invert);
}

body[data-i18n-skip] {
  font-family: var(--kol-font-sans);
}

.status-intro,
.history-section,
.incidents-section,
.components {
  color: var(--kol-ink);
}

/* ==========================================================================
   19. debug.html — the unlinked diagnostics page
   --------------------------------------------------------------------------
   Its <body> carries no data-theme until the chrome script runs, and its inline
   styles hardcode a light card, a blue button and three status washes. Kept
   plain, because a diagnostics page should look like one.
   ========================================================================== */
.debug-section {
  padding: var(--kol-space-5);
  border: 1px solid var(--kol-line);
  border-radius: var(--kol-radius);
  background: var(--kol-surface);
  box-shadow: none;
}

.debug-section h2 {
  color: var(--kol-ink);
  font-size: var(--kol-text-base);
}

.debug-section button {
  min-height: 36px;
  padding: 0 var(--kol-space-4);
  border: 1px solid var(--kol-line-strong);
  border-radius: var(--kol-radius-pill);
  background-color: transparent;
  color: var(--kol-ink);
  font-size: var(--kol-text-sm);
  font-weight: 600;
}

.debug-section button:hover {
  background-color: var(--kol-sunk);
}

.debug-section button:disabled {
  background-color: transparent;
  opacity: 0.5;
}

.log-entry,
.debug-section .code,
.status {
  border-radius: var(--kol-radius-sm);
  background-color: var(--kol-sunk);
  color: var(--kol-ink);
  font-family: var(--kol-font-mono);
}

.status.error {
  color: #b3261e;
}

/* ==========================================================================
   20. Print and reduced motion
   ========================================================================== */
@media print {
  .kol-header,
  .kol-sheet,
  .kol-console-footer,
  #a11y-toggle,
  #a11y-menu {
    display: none !important;
  }
}

/* Add-usage-credits modal: styles.css paints the total in the accent colour
   on the summary wash (1.5:1). Ink carries the emphasis; weight does the rest. */
body[data-theme] .selected-amount-summary .purchase-total,
body[data-theme] .selected-amount-summary .purchase-total span {
  color: var(--kol-ink);
  font-weight: 700;
}

/* Google's own sign-in button (rendered in-DOM by the GIS client) keeps
   Google's colours. styles.css's `body[data-theme="dark"] *` and the kit's
   `inherit` neutralisation both outrank Google's class rule, which painted
   the label light on the button's white face. */
body[data-theme] #google-signin-button .nsm7Bb-HzV7m-LgbsSe,
body[data-theme] #google-signin-button .nsm7Bb-HzV7m-LgbsSe * {
  color: #3c4043;
}

/* Reference tables: a `table` box cannot scroll its own overflow, so at phone
   widths (and in RTL, off the start edge) the wide parameter tables were cut.
   As a block box the table scrolls horizontally inside its column. */
body[data-theme] .param-table,
body[data-theme] .model-comparison-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}