/*!
 * Kohort iQ — component layer
 * Depends on: ../tokens/kohortiq.css
 *
 * Hand-written (unlike the token files) and safe to edit, but every value here
 * resolves to a token. A literal hex, px or ms in this file is a bug.
 *
 * Contents
 *   1. Base and browser surfaces
 *   2. Typography
 *   3. Layout: container, grid, section, colour block
 *   4. Buttons
 *   5. Form fields
 *   6. Cards and panels
 *   7. Navigation
 *   8. Tags, chips, badges, status
 *   9. Tables and data
 *  10. Charts
 *  11. Alerts and empty states
 *  12. Utilities
 */

/* ============================================ 1. base and browser surfaces */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--kiq-surface-page);
  color: var(--kiq-ink-primary);
  font-family: var(--kiq-font-text);
  font-size: var(--kiq-text-body-size);
  line-height: var(--kiq-text-body-lh);
  font-weight: var(--kiq-text-body-weight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-variant-numeric: proportional-nums;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }

hr {
  border: 0;
  border-top: 1px solid var(--kiq-border-subtle);
  margin: var(--kiq-space-10) 0;
}

/* Scrollbars belong to the design system too. */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--kiq-border-default);
  border: 3px solid var(--kiq-surface-page);
  border-radius: var(--kiq-radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--kiq-ink-muted); }

/* ================================================ 2. typography */

.kiq-display-1, .kiq-display-2, .kiq-h1, .kiq-h2, .kiq-h3, .kiq-h4 {
  margin: 0;
  text-wrap: balance;
}

.kiq-display-1 {
  font-family: var(--kiq-font-display);
  font-size: var(--kiq-text-display-1-size);
  line-height: var(--kiq-text-display-1-lh);
  letter-spacing: var(--kiq-text-display-1-ls);
  font-weight: var(--kiq-text-display-1-weight);
}
.kiq-display-2 {
  font-family: var(--kiq-font-display);
  font-size: var(--kiq-text-display-2-size);
  line-height: var(--kiq-text-display-2-lh);
  letter-spacing: var(--kiq-text-display-2-ls);
  font-weight: var(--kiq-text-display-2-weight);
}
.kiq-h1 {
  font-family: var(--kiq-font-display);
  font-size: var(--kiq-text-h1-size);
  line-height: var(--kiq-text-h1-lh);
  letter-spacing: var(--kiq-text-h1-ls);
  font-weight: var(--kiq-text-h1-weight);
}
.kiq-h2 {
  font-size: var(--kiq-text-h2-size);
  line-height: var(--kiq-text-h2-lh);
  letter-spacing: var(--kiq-text-h2-ls);
  font-weight: var(--kiq-text-h2-weight);
}
.kiq-h3 {
  font-size: var(--kiq-text-h3-size);
  line-height: var(--kiq-text-h3-lh);
  letter-spacing: var(--kiq-text-h3-ls);
  font-weight: var(--kiq-text-h3-weight);
}
.kiq-h4 {
  font-size: var(--kiq-text-h4-size);
  line-height: var(--kiq-text-h4-lh);
  letter-spacing: var(--kiq-text-h4-ls);
  font-weight: var(--kiq-text-h4-weight);
}

.kiq-lead {
  font-size: var(--kiq-text-body-lg-size);
  line-height: var(--kiq-text-body-lg-lh);
  letter-spacing: var(--kiq-text-body-lg-ls);
  color: var(--kiq-ink-secondary);
  max-width: var(--kiq-measure-tight);
  margin: 0;
  text-wrap: pretty;
}
.kiq-body { max-width: var(--kiq-measure); margin: 0; text-wrap: pretty; }
.kiq-small { font-size: var(--kiq-text-body-sm-size); line-height: var(--kiq-text-body-sm-lh); }
.kiq-caption {
  font-size: var(--kiq-text-caption-size);
  line-height: var(--kiq-text-caption-lh);
  letter-spacing: var(--kiq-text-caption-ls);
  color: var(--kiq-ink-muted);
}
.kiq-overline {
  font-size: var(--kiq-text-overline-size);
  line-height: var(--kiq-text-overline-lh);
  letter-spacing: var(--kiq-text-overline-ls);
  font-weight: var(--kiq-text-overline-weight);
  text-transform: uppercase;
  color: var(--kiq-ink-muted);
}
.kiq-mono {
  font-family: var(--kiq-font-mono);
  font-size: var(--kiq-text-mono-size);
  line-height: var(--kiq-text-mono-lh);
  letter-spacing: var(--kiq-text-mono-ls);
  font-variant-ligatures: none;
}

/* Benchmark figures. Display serif, tabular, so a column of them aligns. */
.kiq-metric {
  font-family: var(--kiq-font-display);
  font-size: var(--kiq-text-metric-size);
  line-height: var(--kiq-text-metric-lh);
  letter-spacing: var(--kiq-text-metric-ls);
  font-weight: var(--kiq-text-metric-weight);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  display: block;
}
.kiq-metric--sm {
  font-size: var(--kiq-text-metric-sm-size);
  line-height: var(--kiq-text-metric-sm-lh);
  letter-spacing: var(--kiq-text-metric-sm-ls);
}
.kiq-metric__unit { font-size: 0.45em; letter-spacing: 0; vertical-align: 0.55em; margin-left: 0.06em; }

/* Body links: an underline the design system owns. */
.kiq-prose a,
a.kiq-link {
  color: var(--kiq-ink-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklab, currentColor 40%, transparent);
  transition: text-decoration-color var(--kiq-dur-1) var(--kiq-ease-out);
}
.kiq-prose a:hover,
a.kiq-link:hover { text-decoration-color: currentColor; }

.kiq-prose { max-width: var(--kiq-measure); }
.kiq-prose > * + * { margin-top: var(--kiq-space-5); }
.kiq-prose h2 { margin-top: var(--kiq-space-11); margin-bottom: var(--kiq-space-4); }
.kiq-prose h3 { margin-top: var(--kiq-space-9); margin-bottom: var(--kiq-space-3); }
.kiq-prose code {
  font-family: var(--kiq-font-mono);
  font-size: 0.875em;
  background: var(--kiq-surface-muted);
  border: 1px solid var(--kiq-border-subtle);
  border-radius: var(--kiq-radius-xs);
  padding: 0.1em 0.34em;
}

/* ============================== 3. layout: container, grid, section, block */

.kiq-container {
  width: 100%;
  max-width: var(--kiq-container);
  margin-inline: auto;
  padding-inline: var(--kiq-margin);
}
.kiq-container--wide { max-width: var(--kiq-container-wide); }
.kiq-container--text { max-width: var(--kiq-container-text); }
@media (min-width: 768px) { .kiq-container { padding-inline: var(--kiq-margin-lg); } }

.kiq-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--kiq-gutter);
}
@media (min-width: 640px)  { .kiq-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .kiq-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--kiq-gutter-lg); } }

.kiq-section { padding-block: var(--kiq-space-12); }
.kiq-section--tight { padding-block: var(--kiq-space-10); }
.kiq-section--loose { padding-block: var(--kiq-space-14); }

/**
 * Colour block.
 * The system's primary structural device: a field of one flat brand colour that
 * owns a whole region. Always square-cornered, always full-bleed to at least one
 * page edge, never nested inside another block.
 */
.kiq-block {
  --kiq-surface-page: var(--kiq-block-bg);
  background: var(--kiq-block-bg);
  color: var(--kiq-block-ink);
  border-radius: var(--kiq-radius-none);
  position: relative;
  /* Own stacking context, so the contour ground can sit at z-index -1: above the
     block's background, below its content, without forcing `position` onto every
     child. A blanket `position: relative` on children would silently break any
     element the page wants to place absolutely. */
  isolation: isolate;
}
.kiq-block--petrol  { --kiq-block-bg: var(--kiq-petrol-900); --kiq-block-ink: var(--kiq-bone-50); }
.kiq-block--ink     { --kiq-block-bg: var(--kiq-petrol-950); --kiq-block-ink: var(--kiq-bone-50); }
.kiq-block--coral   { --kiq-block-bg: var(--kiq-coral-500);  --kiq-block-ink: var(--kiq-petrol-950); }
.kiq-block--harbour { --kiq-block-bg: var(--kiq-harbour-700);--kiq-block-ink: var(--kiq-bone-50); }
.kiq-block--bone    { --kiq-block-bg: var(--kiq-bone-200);   --kiq-block-ink: var(--kiq-petrol-950); }
.kiq-block--slate   { --kiq-block-bg: var(--kiq-slate-100);  --kiq-block-ink: var(--kiq-petrol-950); }

/* Secondary text inside a block is tinted from the block's own ink, never grey. */
/* 82% is not a taste value: it is the lowest mix that still clears 4.5:1 on the
   tightest block ground (Coral, at 4.70:1). Lower it and captions fail on Coral. */
.kiq-block .kiq-caption,
.kiq-block .kiq-overline { color: color-mix(in oklab, var(--kiq-block-ink) 82%, transparent); }
.kiq-block .kiq-lead { color: color-mix(in oklab, var(--kiq-block-ink) 84%, transparent); }

/**
 * Block split — the signature composition.
 * Two colour fields meeting on a hard vertical edge that sits on a grid line
 * rather than at the centre. The asymmetry is the point: a 50/50 split reads as
 * a template, a 7/5 split reads as a decision.
 */
.kiq-split {
  display: grid;
  grid-template-columns: 1fr;
  min-height: min(78vh, 720px);
}
@media (min-width: 900px) {
  .kiq-split { grid-template-columns: 7fr 5fr; }
  .kiq-split--reverse { grid-template-columns: 5fr 7fr; }
  .kiq-split--wide { grid-template-columns: 8fr 4fr; }
}
.kiq-split > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--kiq-space-10) var(--kiq-margin);
}
@media (min-width: 900px) { .kiq-split > * { padding: var(--kiq-space-13) var(--kiq-space-12); } }

/* The contour field, used as a ground inside a block. */
.kiq-contour {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--kiq-block-ink, var(--kiq-ink-primary));
  z-index: -1;
}
/* One dial: set opacity on .kiq-contour itself. 0.30 is the loudest the ground
   should ever be, and it never sits behind body copy. */
.kiq-contour { opacity: 0.24; }

.kiq-contour > svg,
.kiq-contour > img { width: 100%; height: 100%; object-fit: cover; }

/* A measured rule: the survey line that separates sections. */
.kiq-rule {
  border: 0;
  border-top: 2px solid currentColor;
  opacity: 0.25;
  margin: 0;
}
.kiq-rule--hair { border-top-width: 1px; opacity: 0.18; }

/* ==================================================== 4. buttons */

.kiq-btn {
  --kiq-btn-bg: transparent;
  --kiq-btn-ink: var(--kiq-ink-primary);
  --kiq-btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kiq-space-3);
  min-height: 44px;
  padding: var(--kiq-space-4) var(--kiq-space-7);
  border: 1px solid var(--kiq-btn-border);
  border-radius: var(--kiq-radius-sm);
  background: var(--kiq-btn-bg);
  color: var(--kiq-btn-ink);
  font-family: inherit;
  font-size: var(--kiq-text-body-sm-size);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--kiq-dur-2) var(--kiq-ease-out),
    border-color var(--kiq-dur-2) var(--kiq-ease-out),
    color var(--kiq-dur-2) var(--kiq-ease-out),
    transform var(--kiq-dur-1) var(--kiq-ease-out);
}
.kiq-btn:active { transform: translateY(1px); }
.kiq-btn:disabled,
.kiq-btn[aria-disabled='true'] {
  /* Disabled controls are exempt from WCAG 1.4.3, but 42% was unreadable.
     55% keeps the state obvious and the label legible. */
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* Primary: the brand's own action. Coral field, Petrol ink — 4.81:1.
   Never white ink on Coral: that pair measures 2.81:1 and fails. */
.kiq-btn--primary {
  --kiq-btn-bg: var(--kiq-coral-500);
  --kiq-btn-ink: var(--kiq-petrol-950);
  --kiq-btn-border: var(--kiq-coral-500);
}
.kiq-btn--primary:hover:not(:disabled) { --kiq-btn-bg: var(--kiq-coral-400); --kiq-btn-border: var(--kiq-coral-400); }

.kiq-btn--solid {
  --kiq-btn-bg: var(--kiq-petrol-900);
  --kiq-btn-ink: var(--kiq-bone-50);
  --kiq-btn-border: var(--kiq-petrol-900);
}
.kiq-btn--solid:hover:not(:disabled) { --kiq-btn-bg: var(--kiq-petrol-800); --kiq-btn-border: var(--kiq-petrol-800); }

.kiq-btn--outline {
  --kiq-btn-ink: var(--kiq-ink-primary);
  --kiq-btn-border: var(--kiq-border-strong);
}
.kiq-btn--outline:hover:not(:disabled) { --kiq-btn-bg: var(--kiq-surface-hover); }

.kiq-btn--ghost { --kiq-btn-ink: var(--kiq-ink-secondary); }
.kiq-btn--ghost:hover:not(:disabled) { --kiq-btn-bg: var(--kiq-surface-hover); --kiq-btn-ink: var(--kiq-ink-primary); }

.kiq-btn--danger {
  --kiq-btn-bg: var(--kiq-danger);
  --kiq-btn-ink: var(--kiq-bone-50);
  --kiq-btn-border: var(--kiq-danger);
}

/* On a colour block — or an inverse header — buttons take their contrast from
   the block's own ink rather than from the page's. */
.kiq-block .kiq-btn--outline,
.kiq-header--inverse .kiq-btn--outline { --kiq-btn-ink: var(--kiq-block-ink); --kiq-btn-border: color-mix(in oklab, var(--kiq-block-ink) 45%, transparent); }
.kiq-block .kiq-btn--outline:hover:not(:disabled),
.kiq-header--inverse .kiq-btn--outline:hover:not(:disabled) { --kiq-btn-bg: color-mix(in oklab, var(--kiq-block-ink) 12%, transparent); }
.kiq-block .kiq-btn--ghost,
.kiq-header--inverse .kiq-btn--ghost { --kiq-btn-ink: color-mix(in oklab, var(--kiq-block-ink) 80%, transparent); }
.kiq-block--coral .kiq-btn--solid { --kiq-btn-bg: var(--kiq-petrol-950); --kiq-btn-border: var(--kiq-petrol-950); }

.kiq-btn--sm { min-height: 34px; padding: var(--kiq-space-3) var(--kiq-space-5); font-size: var(--kiq-text-caption-size); }
.kiq-btn--lg { min-height: 54px; padding: var(--kiq-space-5) var(--kiq-space-9); font-size: var(--kiq-text-body-size); }
.kiq-btn--block { display: flex; width: 100%; }

.kiq-btn[data-loading='true'] { color: transparent; position: relative; pointer-events: none; }
.kiq-btn[data-loading='true']::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid color-mix(in oklab, var(--kiq-btn-ink) 30%, transparent);
  border-top-color: var(--kiq-btn-ink);
  border-radius: var(--kiq-radius-pill);
  animation: kiq-spin 620ms linear infinite;
}
@keyframes kiq-spin { to { transform: rotate(360deg); } }

/* ================================================= 5. form fields */

.kiq-field { display: flex; flex-direction: column; gap: var(--kiq-space-3); }
.kiq-label {
  font-size: var(--kiq-text-label-size);
  font-weight: var(--kiq-text-label-weight);
  letter-spacing: var(--kiq-text-label-ls);
  color: var(--kiq-ink-primary);
}
.kiq-label[data-optional]::after {
  content: ' ' attr(data-optional);
  font-weight: 400;
  color: var(--kiq-ink-muted);
}

.kiq-input,
.kiq-select,
.kiq-textarea {
  width: 100%;
  min-height: 44px;
  padding: var(--kiq-space-4) var(--kiq-space-5);
  font-family: inherit;
  font-size: var(--kiq-text-body-size);
  line-height: 1.4;
  color: var(--kiq-ink-primary);
  background: var(--kiq-surface-raised);
  border: 1px solid var(--kiq-border-default);
  border-radius: var(--kiq-radius-xs);
  transition: border-color var(--kiq-dur-2) var(--kiq-ease-out), box-shadow var(--kiq-dur-2) var(--kiq-ease-out);
}
.kiq-textarea { min-height: 120px; resize: vertical; }
.kiq-input::placeholder,
.kiq-textarea::placeholder { color: var(--kiq-ink-muted); }

.kiq-input:hover,
.kiq-select:hover,
.kiq-textarea:hover { border-color: var(--kiq-ink-muted); }

.kiq-input:focus-visible,
.kiq-select:focus-visible,
.kiq-textarea:focus-visible {
  outline: none;
  border-color: var(--kiq-focus-ring);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--kiq-focus-ring) 28%, transparent);
}

.kiq-input:disabled,
.kiq-select:disabled,
.kiq-textarea:disabled {
  background: var(--kiq-surface-muted);
  color: var(--kiq-ink-muted);
  cursor: not-allowed;
}

.kiq-input[aria-invalid='true'],
.kiq-select[aria-invalid='true'],
.kiq-textarea[aria-invalid='true'] { border-color: var(--kiq-danger); }
.kiq-input[aria-invalid='true']:focus-visible { box-shadow: 0 0 0 3px color-mix(in oklab, var(--kiq-danger) 24%, transparent); }

/* A field message names the problem AND the recovery — see the copy rules. */
.kiq-field__hint { font-size: var(--kiq-text-caption-size); color: var(--kiq-ink-muted); }
.kiq-field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--kiq-space-2);
  font-size: var(--kiq-text-caption-size);
  color: var(--kiq-danger);
  font-weight: 500;
}

/* Monospace input for the things that really are code: measurement IDs,
   container IDs, event names. Never as decoration. */
.kiq-input--code { font-family: var(--kiq-font-mono); letter-spacing: -0.01em; }

.kiq-select {
  appearance: none;
  padding-right: var(--kiq-space-9);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.kiq-checkbox,
.kiq-radio {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--kiq-space-3);
  cursor: pointer;
  font-size: var(--kiq-text-body-sm-size);
}
.kiq-checkbox input,
.kiq-radio input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--kiq-coral-500); flex: none; }

.kiq-switch { display: inline-flex; align-items: center; gap: var(--kiq-space-4); cursor: pointer; }
.kiq-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.kiq-switch__track {
  width: 44px; height: 24px; flex: none;
  background: var(--kiq-border-default);
  border-radius: var(--kiq-radius-pill);
  position: relative;
  transition: background-color var(--kiq-dur-2) var(--kiq-ease-out);
}
.kiq-switch__track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: var(--kiq-surface-raised);
  border-radius: var(--kiq-radius-pill);
  transition: transform var(--kiq-dur-2) var(--kiq-ease-out);
}
.kiq-switch input:checked + .kiq-switch__track { background: var(--kiq-coral-500); }
.kiq-switch input:checked + .kiq-switch__track::after { transform: translateX(20px); }
.kiq-switch input:focus-visible + .kiq-switch__track { outline: 2px solid var(--kiq-focus-ring); outline-offset: 2px; }

/* ============================================ 6. cards and panels */

/**
 * A card is a container, not a layout. Nested cards are always wrong, and a
 * grid of identical icon-heading-text cards is not a page structure — use the
 * block split or a real table instead.
 */
.kiq-card {
  background: var(--kiq-surface-raised);
  border: 1px solid var(--kiq-border-subtle);
  border-radius: var(--kiq-radius-md);
  padding: var(--kiq-space-7);
}
.kiq-card--flat { background: transparent; border-color: var(--kiq-border-subtle); }
.kiq-card--sunken { background: var(--kiq-surface-sunken); border-color: transparent; }
.kiq-card--interactive {
  cursor: pointer;
  transition: border-color var(--kiq-dur-2) var(--kiq-ease-out), box-shadow var(--kiq-dur-2) var(--kiq-ease-out), transform var(--kiq-dur-2) var(--kiq-ease-out);
}
.kiq-card--interactive:hover {
  border-color: var(--kiq-border-default);
  box-shadow: var(--kiq-shadow-md);
  transform: translateY(-2px);
}
.kiq-card__title { margin: 0 0 var(--kiq-space-3); font-size: var(--kiq-text-h4-size); font-weight: 600; }

/* The one card that earns emphasis: a solid brand field. Used once per view. */
.kiq-card--accent {
  background: var(--kiq-coral-500);
  color: var(--kiq-petrol-950);
  border-color: var(--kiq-coral-500);
  border-radius: var(--kiq-radius-none);
}

/* ==================================================== 7. navigation */

.kiq-header {
  position: sticky;
  top: 0;
  z-index: var(--kiq-z-header);
  height: var(--kiq-header-h);
  display: flex;
  align-items: center;
  background: var(--kiq-surface-page);
  border-bottom: 1px solid var(--kiq-border-subtle);
}
.kiq-header--inverse {
  --kiq-block-ink: var(--kiq-bone-50);
  background: var(--kiq-petrol-900);
  color: var(--kiq-bone-50);
  border-bottom-color: var(--kiq-petrol-800);
}
.kiq-header__inner { display: flex; align-items: center; gap: var(--kiq-space-8); width: 100%; }
.kiq-header__logo { display: flex; align-items: center; }
.kiq-header__logo svg,
.kiq-header__logo img { height: 26px; width: auto; }

.kiq-nav { display: flex; align-items: center; gap: var(--kiq-space-7); }
.kiq-nav__link {
  color: inherit;
  text-decoration: none;
  font-size: var(--kiq-text-body-sm-size);
  font-weight: 500;
  padding-block: var(--kiq-space-3);
  position: relative;
  opacity: 0.78;
  transition: opacity var(--kiq-dur-2) var(--kiq-ease-out);
}
.kiq-nav__link:hover { opacity: 1; }
.kiq-nav__link[aria-current] { opacity: 1; font-weight: 600; }
/* The indicator is a 2px coral rule — the same survey line as the section rules. */
.kiq-nav__link[aria-current]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--kiq-coral-500);
}

.kiq-tabs { display: flex; gap: var(--kiq-space-1); border-bottom: 1px solid var(--kiq-border-subtle); }
.kiq-tab {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: var(--kiq-space-4) var(--kiq-space-5);
  font: inherit;
  font-size: var(--kiq-text-body-sm-size);
  font-weight: 500;
  color: var(--kiq-ink-muted);
  cursor: pointer;
  transition: color var(--kiq-dur-2) var(--kiq-ease-out), border-color var(--kiq-dur-2) var(--kiq-ease-out);
}
.kiq-tab:hover { color: var(--kiq-ink-primary); }
.kiq-tab[aria-selected='true'] { color: var(--kiq-ink-primary); font-weight: 600; border-bottom-color: var(--kiq-coral-500); }

/* ================================ 8. tags, chips, badges, status */

.kiq-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--kiq-space-2);
  padding: 3px var(--kiq-space-3);
  border-radius: var(--kiq-radius-xs);
  background: var(--kiq-surface-muted);
  border: 1px solid var(--kiq-border-subtle);
  color: var(--kiq-ink-secondary);
  font-size: var(--kiq-text-caption-size);
  font-weight: 500;
  line-height: 1.5;
}
.kiq-tag--accent { background: var(--kiq-surface-accent-soft); border-color: transparent; color: var(--kiq-ink-accent); }
/* Event names, parameter keys and IDs are code — this is the one chip that is
   allowed to be monospace. */
.kiq-tag--code { font-family: var(--kiq-font-mono); font-size: var(--kiq-text-mono-sm-size); letter-spacing: -0.005em; }

.kiq-status {
  display: inline-flex;
  align-items: center;
  gap: var(--kiq-space-3);
  font-size: var(--kiq-text-caption-size);
  font-weight: 500;
}
/* Status is never colour alone: the dot carries a shape and the label carries
   the word. */
.kiq-status::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: var(--kiq-radius-pill);
  background: currentColor;
  flex: none;
}
.kiq-status--ok      { color: var(--kiq-success); }
.kiq-status--warn    { color: var(--kiq-warning); }
.kiq-status--error   { color: var(--kiq-danger); }
.kiq-status--info    { color: var(--kiq-info); }
.kiq-status--idle    { color: var(--kiq-ink-muted); }
.kiq-status--error::before { border-radius: var(--kiq-radius-none); transform: rotate(45deg); }
.kiq-status--warn::before  { border-radius: 1px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.kiq-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding-inline: 6px;
  border-radius: var(--kiq-radius-pill);
  background: var(--kiq-coral-500);
  color: var(--kiq-petrol-950);
  font-size: var(--kiq-text-overline-size);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ================================================ 9. tables and data */

.kiq-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kiq-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kiq-text-body-sm-size);
  font-variant-numeric: tabular-nums lining-nums;
}
.kiq-table th,
.kiq-table td {
  text-align: left;
  padding: var(--kiq-space-4) var(--kiq-space-5);
  border-bottom: 1px solid var(--kiq-border-subtle);
  vertical-align: baseline;
}
.kiq-table th {
  font-size: var(--kiq-text-overline-size);
  letter-spacing: var(--kiq-text-overline-ls);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--kiq-ink-muted);
  border-bottom-color: var(--kiq-border-default);
  white-space: nowrap;
}
.kiq-table td.kiq-num,
.kiq-table th.kiq-num { text-align: right; font-variant-numeric: tabular-nums; }
.kiq-table tbody tr:hover { background: var(--kiq-surface-hover); }
.kiq-table tbody tr:last-child td { border-bottom: 0; }
.kiq-table caption {
  caption-side: top;
  text-align: left;
  padding-bottom: var(--kiq-space-4);
  font-size: var(--kiq-text-caption-size);
  color: var(--kiq-ink-muted);
}

/* Delta values: the sign is spelled out, so the meaning survives greyscale. */
.kiq-delta { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.kiq-delta--up   { color: var(--kiq-success); }
.kiq-delta--down { color: var(--kiq-danger); }
.kiq-delta--flat { color: var(--kiq-ink-muted); }

/* ===================================================== 10. charts */

.kiq-chart {
  background: var(--kiq-chart-surface);
  color: var(--kiq-ink-primary);
}
.kiq-chart__title { font-size: var(--kiq-text-h4-size); font-weight: 600; margin: 0 0 var(--kiq-space-2); }
.kiq-chart__note { font-size: var(--kiq-text-caption-size); color: var(--kiq-ink-muted); margin: var(--kiq-space-4) 0 0; }

.kiq-chart .kiq-grid-line { stroke: var(--kiq-chart-grid); stroke-width: 1; }
.kiq-chart .kiq-axis      { stroke: var(--kiq-chart-axis); stroke-width: 1; }
.kiq-chart .kiq-axis-text {
  fill: var(--kiq-ink-muted);
  font-family: var(--kiq-font-text);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
/* Series lines: 2px, round caps, no shadow, no gradient fill. */
.kiq-chart .kiq-series { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Bars and stacked segments carry a 2px surface gap so adjacent fills read as
   two marks rather than one block. */
.kiq-chart .kiq-bar { stroke: var(--kiq-chart-surface); stroke-width: 2; rx: 2; }
.kiq-chart .kiq-dot { stroke: var(--kiq-chart-surface); stroke-width: 2; r: 5; }

.kiq-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kiq-space-3) var(--kiq-space-6);
  padding: 0;
  margin: 0 0 var(--kiq-space-6);
  list-style: none;
  font-size: var(--kiq-text-caption-size);
}
.kiq-legend li { display: flex; align-items: center; gap: var(--kiq-space-3); color: var(--kiq-ink-secondary); }
.kiq-legend .kiq-swatch { width: 12px; height: 12px; border-radius: 2px; flex: none; }

/* The fixed categorical order. Never cycle it; an eighth series folds into the
   reserved neutral, or the chart becomes small multiples. */
.kiq-c1 { color: var(--kiq-chart-1); } .kiq-f1 { fill: var(--kiq-chart-1); } .kiq-s1 { stroke: var(--kiq-chart-1); } .kiq-bg1 { background: var(--kiq-chart-1); }
.kiq-c2 { color: var(--kiq-chart-2); } .kiq-f2 { fill: var(--kiq-chart-2); } .kiq-s2 { stroke: var(--kiq-chart-2); } .kiq-bg2 { background: var(--kiq-chart-2); }
.kiq-c3 { color: var(--kiq-chart-3); } .kiq-f3 { fill: var(--kiq-chart-3); } .kiq-s3 { stroke: var(--kiq-chart-3); } .kiq-bg3 { background: var(--kiq-chart-3); }
.kiq-c4 { color: var(--kiq-chart-4); } .kiq-f4 { fill: var(--kiq-chart-4); } .kiq-s4 { stroke: var(--kiq-chart-4); } .kiq-bg4 { background: var(--kiq-chart-4); }
.kiq-c5 { color: var(--kiq-chart-5); } .kiq-f5 { fill: var(--kiq-chart-5); } .kiq-s5 { stroke: var(--kiq-chart-5); } .kiq-bg5 { background: var(--kiq-chart-5); }
.kiq-c6 { color: var(--kiq-chart-6); } .kiq-f6 { fill: var(--kiq-chart-6); } .kiq-s6 { stroke: var(--kiq-chart-6); } .kiq-bg6 { background: var(--kiq-chart-6); }
.kiq-c7 { color: var(--kiq-chart-7); } .kiq-f7 { fill: var(--kiq-chart-7); } .kiq-s7 { stroke: var(--kiq-chart-7); } .kiq-bg7 { background: var(--kiq-chart-7); }
.kiq-cN { color: var(--kiq-chart-neutral); } .kiq-fN { fill: var(--kiq-chart-neutral); } .kiq-sN { stroke: var(--kiq-chart-neutral); } .kiq-bgN { background: var(--kiq-chart-neutral); }

/* ======================================= 11. alerts and empty states */

.kiq-alert {
  display: flex;
  gap: var(--kiq-space-4);
  padding: var(--kiq-space-5) var(--kiq-space-6);
  border: 1px solid var(--kiq-alert-border, var(--kiq-border-subtle));
  border-radius: var(--kiq-radius-sm);
  background: var(--kiq-alert-bg, var(--kiq-surface-muted));
  color: var(--kiq-ink-primary);
  font-size: var(--kiq-text-body-sm-size);
}
.kiq-alert__icon { flex: none; color: var(--kiq-alert-ink, var(--kiq-ink-secondary)); }
.kiq-alert__title { font-weight: 600; margin: 0 0 var(--kiq-space-1); }
.kiq-alert__body { margin: 0; color: var(--kiq-ink-secondary); }
.kiq-alert--success { --kiq-alert-bg: var(--kiq-success-surface); --kiq-alert-border: var(--kiq-success-border); --kiq-alert-ink: var(--kiq-success); }
.kiq-alert--warning { --kiq-alert-bg: var(--kiq-warning-surface); --kiq-alert-border: var(--kiq-warning-border); --kiq-alert-ink: var(--kiq-warning); }
.kiq-alert--danger  { --kiq-alert-bg: var(--kiq-danger-surface);  --kiq-alert-border: var(--kiq-danger-border);  --kiq-alert-ink: var(--kiq-danger); }
.kiq-alert--info    { --kiq-alert-bg: var(--kiq-info-surface);    --kiq-alert-border: var(--kiq-info-border);    --kiq-alert-ink: var(--kiq-info); }

.kiq-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--kiq-space-5);
  padding: var(--kiq-space-11) var(--kiq-space-8);
  border: 1px dashed var(--kiq-border-default);
  border-radius: var(--kiq-radius-md);
  max-width: 46ch;
}
.kiq-empty__title { margin: 0; font-size: var(--kiq-text-h3-size); font-weight: 600; }
.kiq-empty__body { margin: 0; color: var(--kiq-ink-secondary); }

.kiq-skeleton {
  background: linear-gradient(90deg,
    var(--kiq-surface-muted) 0%,
    color-mix(in oklab, var(--kiq-surface-muted) 60%, var(--kiq-surface-raised)) 50%,
    var(--kiq-surface-muted) 100%);
  background-size: 200% 100%;
  animation: kiq-shimmer 1.4s var(--kiq-ease-in-out) infinite;
  border-radius: var(--kiq-radius-xs);
  min-height: 1em;
}
@keyframes kiq-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* ==================================================== 12. utilities */

.kiq-stack > * + * { margin-top: var(--kiq-stack-gap, var(--kiq-space-5)); }
.kiq-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kiq-cluster-gap, var(--kiq-space-4)); }
.kiq-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.kiq-tabular { font-variant-numeric: tabular-nums lining-nums; }