/* KCDS component specimens; tokens are defined in tokens.css. */
@layer components {

/* ============================================================
       KCDS — Tier 1 + Tier 2 tokens
       Synced with kc-design-foundations v1.18.0 · 01-foundations/tokens.css
       ADR 032 — suite accents (Learn vermilion · Comply blue · Grow emerald)
       ADR 035 — fourth suite Hire (periwinkle #6A5DF8) · v1.15.0
       ADR 033 — internal/admin tools carry the KC master orange
       ADR 034 — -on-tint text tier; severity + sensitivity families defined
       ============================================================ */
:root {
/* === Tier 1 — PRIMITIVES === */
/* Brand orange — logo mark · legacy :root chain · status-warning · internal */
/* Suite accent — Learn (Vermilion) */
/* Suite accent — Comply (Blue) — also the status-info ramp */
/* Suite accent — Grow (Emerald) — NOT status-success green */
/* Suite accent — Hire (Periwinkle) — ADR 035. 21° from AI-violet: never hue alone */
/* Neutrals */
/* Status palettes */
/* Slate — a primitive for other uses; retired as a suite accent (ADR 032) */
/* Dark canvas primitives (Tier 1 — alongside grays, not replacing them) */
/* === Tier 2 — SEMANTIC (default = legacy orange chain) === */
/* direct primitive — Indirection rule */
/* Accent ramp — resolves per suite, so a component can reach any stop (ADR 020) */
/* Text — secondary/tertiary hold their own AA-cleared values (ADR 018) */
/* 4.7:1 */
/* 5.6:1 */
/* direct primitive — Indirection rule */
/* progress / slider / meter container */
/* direct primitive — Indirection rule */
/* Status — base (on canvas) · -bg (tint) · -fill (solid) · -border · -on-tint (text ON the tint) */
/* Severity 1–5 — risk / incident classification (system-fixed, never per suite) */
/* Sensitivity tiers — PII / regulatory data (system-fixed, never per suite) */
/* AI — 02-cross-cutting/ai-augmentation.md. A system colour, never tenant-themed
         and never suite-themed: an AI chip in KC Grow stays violet, not emerald, and in
         KC Hire always carries the AI icon + violet tint badge (ADR 035).
         These three are the whole sanctioned AI palette — there is no violet 100–400,
         so an AI surface never invents an intermediate tint. */
/* Typography / Spacing / Radius / Shadow */
/* Motion — 01-foundations/motion.md. Default is 200ms / ease-out. */
/* Icon sizes — 01-foundations/iconography.md. Lucide, 24×24 grid, 2px stroke. */
/* Control heights — 02-cross-cutting/density.md "Density tokens" + actions.md /
         inputs.md size tables. These are the COMFORTABLE values; .density--compact
         redeclares them. Buttons and inputs share sm (48) and diverge at md/lg because
         an input's md sits one step below a button's (52 vs 56).
         NOTE: these names are not yet in 01-foundations/tokens.json — see the
         open question in the release note below. */
/* default */
/* hero CTA only — not an everyday form size */
/* default */
/* density.md publishes these two names for the medium defaults — aliased so both
         spellings resolve to one value rather than drifting apart */
/* Density tokens — 02-cross-cutting/density.md. Comfortable values. */
}
/* ============================================================
       PRODUCT CATEGORY ACCENTS (v1.15.0 · ADR 032/033/035) — light theme
       Four suites — learn · comply · grow · hire — plus internal (KC orange).
       Each block redeclares EVERY dependent token as a direct primitive
       per the Indirection rule. var() chains break the cascade.
       ============================================================ */
[data-kcds-product-category="learn"] {
/* Learn = vermilion #D63F13. White on-primary 4.59:1, link 4.59:1, on-tint 6.43:1 — all AA. */
}
[data-kcds-product-category="comply"] {
/* Comply = blue #1567D2. White on-primary 5.38:1, link 5.38:1, on-tint 7.26:1.
         Known collision: status-info also resolves to blue-500 — separated by role (F-068). */
}
[data-kcds-product-category="grow"] {
/* Grow = emerald #0A8558. White on-primary 4.66:1, link 4.66:1, on-tint 6.50:1.
         Grow green is NOT status-success green — never signal completion with the accent (F-068). */
}
[data-kcds-product-category="hire"] {
/* Hire = periwinkle #6A5DF8 (ADR 035). KC Recruit · KC Onboard · KC Talent.
         White on-primary 4.63:1, link 4.63:1, on-tint 6.53:1 — all AA.
         21° from AI-violet #8543DA: an AI marker inside Hire always carries the AI icon
         and the violet tint badge, never hue alone (F-068). */
}
[data-kcds-product-category="internal"] {
/* Internal / admin & infrastructure tools = KC master orange #FF881A (ADR 033).
         Not a suite — the corporate colour, so internal tools read as "KC itself".
         White on-primary (2.39:1) and orange-700 links (4.15:1) are the ADR 012 exception.
         Status-warning is also orange: differentiate warnings by icon + leading-stripe. */
}
/* An element that declares data-kcds-product-category="" is asking for the LEGACY
       chain, not "whatever my ancestor has". Custom properties inherit, so an empty
       value matches no category rule and would silently pick up the ancestor's suite —
       a legacy sample nested in a `learn` page would render vermilion. The legacy
       chain is therefore redeclared explicitly. This is the Indirection rule applied
       one level up: a scope that means "default" must say so. */
/* ============================================================
       DARK THEME — overrides Tier 2 for dark surfaces
       Cascades over data-kcds-product-category — accent hue preserved,
       tints/fills become rgba overlays.
       ============================================================ */
[data-kcds-theme="dark"] {
/* Surface */
/* Text */
/* Border */
/* Status — lightened for dark contrast. In dark every family already clears
         4.5:1 on its own tint, so each -on-tint resolves to the base: one token
         name works in both themes and a consumer never branches on theme. */
/* v1.18.0 — current blue-500 @15% */
/* Severity — base hue preserved, lightened for legibility */
/* Sensitivity */
/* AI — declared explicitly, not left to resolve through var(--kcds-violet-50).
         --kcds-color-ai-bg is declared on :root, so its var() resolves against :root's
         violet-50 and the dark redefinition below would never reach it. Indirection rule. */
/* Tier 1 tint aliases used directly as alert/badge backgrounds */
}
/* Dark legacy orange — recomputed tints as rgba overlays */
[data-kcds-theme="dark"]:not([data-kcds-product-category]) {
/* accepted AA exception (2.39:1) — ADR 012 */
}
/* Dark category overrides — every token redeclared as primitive.
       Primary holds the light 500 (already reads on the dark surface);
       link / on-tint lift to the ramp 300. */
[data-kcds-theme="dark"][data-kcds-product-category="hire"] {
/* Hire dark (ADR 035): primary 3.66:1 on #181D22, link/on-tint periwinkle-300 7.93:1. */
}
/* Nested legacy scope in dark — same reason as the light rule above */
/* ============================================================
       Base
       ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
}
/* .sr-only is NOT globally injected — every KCDS page defines it (zero rule 12) */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body {
  font-family:'Lato',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-feature-settings:"liga" 0;
  font-size: var(--kcds-text-body-m);
  line-height: 1.625;
  color: var(--kcds-color-text-primary);
  background: var(--kcds-color-surface-default);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 {
  margin: 0;
  font-weight: 700;
}
p {
  margin: 0;
}
a {
  color: var(--kcds-color-text-link);
  text-decoration: none;
}
button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}
*:focus-visible {
  outline: 2px solid var(--kcds-color-border-focus);
  outline-offset: 2px;
}
/* Documentation chrome, not a KCDS component. 13px is a deliberate optical
       adjustment: JetBrains Mono renders visually larger than Lato at the same size,
       so inline code set to the 14px body token reads oversized next to its prose.
       This is the one sanctioned off-scale type size on the page. */
code, .mono {
  font-family: var(--doc-mono);
  font-size: 13px;
}
/* ============================================================
       DOC LAYOUT — left TOC, right content
       ============================================================ */
.doc {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  width: 100%;
}
.toc {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: var(--kcds-spacing-32) var(--kcds-spacing-20) var(--kcds-spacing-32) var(--kcds-spacing-32);
  border-right: 1px solid var(--kcds-color-border-subtle);
  background: var(--kcds-color-surface-default);
}
.toc__brand {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
  padding-bottom: var(--kcds-spacing-20);
  margin-bottom: var(--kcds-spacing-20);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.toc__brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: block;
}
.toc__brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.toc__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.toc__brand-name {
  font-size: var(--kcds-text-h5);
  font-weight: 700;
}
.toc__brand-sub {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  font-weight: 400;
}
/* === KC Logo Mark — always orange (corporate identity anchor) === */
.kc-logo {
  display: block;
  flex-shrink: 0;
}
.kc-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.kc-logo--sm {
  width: 24px;
  height: 24px;
}
.kc-logo--md {
  width: 36px;
  height: 36px;
}
.kc-logo--lg {
  width: 48px;
  height: 48px;
}
/* === Product accents / Dark theme section components === */
.accent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--kcds-spacing-12);
  margin-top: var(--kcds-spacing-12);
}
.accent-card {
  display: flex;
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  background: var(--kcds-color-surface-default);
}
.accent-card__chip {
  width: 8px;
  flex-shrink: 0;
}
.accent-card__body {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-4);
}
.accent-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcds-spacing-8);
}
.accent-card__name {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.accent-card__products {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  line-height: 1.4;
}
.accent-card__attr {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-label);
  color: var(--kcds-color-text-secondary);
  margin-top: 4px;
}
.accent-preview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--kcds-spacing-12);
  margin-top: var(--kcds-spacing-12);
}
.accent-preview {
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  background: var(--kcds-color-surface-default);
}
.accent-preview__head {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  background: var(--kcds-color-surface-canvas);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.accent-preview__title {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.accent-preview__body {
  padding: var(--kcds-spacing-16);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kcds-spacing-12);
}
.rules-list {
  margin: var(--kcds-spacing-8) 0 var(--kcds-spacing-16);
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-8);
}
.rules-list li {
  position: relative;
  padding-left: 20px;
  font-size: var(--kcds-text-body-s);
  line-height: 1.6;
  color: var(--kcds-color-text-primary);
}
.rules-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-primary);
}
.dark-tokens-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--kcds-spacing-8);
  margin-top: var(--kcds-spacing-12);
}
.dark-swatch {
  padding: var(--kcds-spacing-16) var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-4);
  border: 1px solid rgba(255,255,255,0.06);
}
.dark-swatch__name {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.dark-swatch__hex {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-caption);
  opacity: 0.7;
}
/* === Date range picker === */
.daterange {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kcds-spacing-12);
  align-items: stretch;
  padding: var(--kcds-spacing-16);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  box-shadow: var(--kcds-shadow-md);
  max-width: 100%;
}
.daterange__presets {
  display: flex;
  flex-direction: column;
  min-width: 120px;
  flex-shrink: 0;
  padding-right: var(--kcds-spacing-12);
  border-right: 1px solid var(--kcds-color-border-subtle);
}
.daterange__preset {
  padding: 6px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-primary);
  text-align: start;
  cursor: pointer;
}
.daterange__preset:hover {
  background: var(--kcds-color-surface-canvas);
}
.daterange__preset--active {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
  font-weight: 700;
}
.daterange__calendars {
  display: flex;
  gap: var(--kcds-spacing-16);
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
}
.daterange__cal {
  flex: 1 1 0;
  min-width: 180px;
  max-width: 100%;
}
.daterange__triggers {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
}
.daterange__arrow {
  color: var(--kcds-color-text-tertiary);
}
.daterange__arrow svg {
  width: 14px;
  height: 14px;
}
/* === Autocomplete === */
.autocomplete {
  position: relative;
  width: 100%;
  max-width: 360px;
}
.autocomplete__menu {
  margin-top: 4px;
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  box-shadow: var(--kcds-shadow-lg);
  padding: 6px;
}
.autocomplete__hint {
  padding: 4px 10px;
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.autocomplete__item {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
  padding: 8px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  cursor: pointer;
}
.autocomplete__item:hover {
  background: var(--kcds-color-surface-canvas);
}
.autocomplete__item--highlighted {
  background: var(--kcds-color-primary-tint);
}
.autocomplete__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.autocomplete__item-title {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
}
.autocomplete__match {
  color: var(--kcds-color-text-link);
  font-weight: 700;
}
.autocomplete__item-sub {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
.autocomplete__empty {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  text-align: center;
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
}
.autocomplete__divider {
  height: 1px;
  background: var(--kcds-color-border-subtle);
  margin: 4px 0;
}
/* === Inline confirmation card (chat) === */
.confirm-card {
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-12);
  background: var(--kcds-color-surface-default);
  overflow: hidden;
  margin-top: var(--kcds-spacing-8);
  max-width: 480px;
}
.confirm-card__head {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  background: var(--kcds-color-surface-canvas);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
}
.confirm-card__title {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.confirm-card__body {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
}
.confirm-card__row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: var(--kcds-spacing-12);
  padding: 4px 0;
  font-size: var(--kcds-text-caption);
}
.confirm-card__key {
  color: var(--kcds-color-text-tertiary);
  font-weight: 700;
}
.confirm-card__val {
  color: var(--kcds-color-text-primary);
}
.confirm-card__foot {
  padding: var(--kcds-spacing-8) var(--kcds-spacing-16);
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  border-top: 1px solid var(--kcds-color-border-subtle);
  background: var(--kcds-color-surface-canvas);
}
/* === Voice input === */
.voice-bar {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  padding: var(--kcds-spacing-8) var(--kcds-spacing-12);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-full);
  max-width: 480px;
}
.voice-bar__mic {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--kcds-radius-full);
  color: var(--kcds-color-text-tertiary);
  flex-shrink: 0;
}
.voice-bar__mic:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.voice-bar__mic svg {
  width: 16px;
  height: 16px;
}
.voice-bar__mic--listening {
  background: var(--kcds-color-ai-suggestion);
  color: var(--kcds-color-on-primary);
  animation: voice-pulse 1.6s ease-in-out infinite;
}
.voice-bar__input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-primary);
}
.voice-bar__send {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
  flex-shrink: 0;
}
.voice-bar__send svg {
  width: 16px;
  height: 16px;
}
@keyframes voice-pulse {
0%, 100% {
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--kcds-color-ai-suggestion) 60%, transparent);
}
50% {
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--kcds-color-ai-suggestion) 0%,  transparent);
}
}
.voice-waveform {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 18px;
}
.voice-waveform span {
  display: block;
  width: 3px;
  background: var(--kcds-color-ai-suggestion);
  border-radius: var(--kcds-radius-full);
  animation: voice-wave 1s ease-in-out infinite;
}
.voice-waveform span:nth-child(1) {
  height: 8px;
  animation-delay: 0s;
}
.voice-waveform span:nth-child(2) {
  height: 14px;
  animation-delay: 0.1s;
}
.voice-waveform span:nth-child(3) {
  height: 18px;
  animation-delay: 0.2s;
}
.voice-waveform span:nth-child(4) {
  height: 14px;
  animation-delay: 0.3s;
}
.voice-waveform span:nth-child(5) {
  height: 8px;
  animation-delay: 0.4s;
}
@keyframes voice-wave {
0%, 100% {
  transform: scaleY(0.4);
}
50% {
  transform: scaleY(1);
}
}
/* === Refusal / out-of-scope === */
.refusal {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  background: var(--kcds-color-surface-canvas);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  max-width: 520px;
}
.refusal__head {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  color: var(--kcds-color-text-tertiary);
  font-size: var(--kcds-text-body-s);
  margin-bottom: var(--kcds-spacing-8);
}
.refusal__head svg {
  width: 16px;
  height: 16px;
}
.refusal__list {
  margin: 0 0 var(--kcds-spacing-8) 0;
  padding-left: var(--kcds-spacing-20);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-primary);
  line-height: 1.7;
}
.refusal__list li::marker {
  color: var(--kcds-color-text-link);
}
.refusal__sub {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  line-height: 1.5;
}
/* === Resume banner === */
.resume-banner {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  padding: 6px var(--kcds-spacing-16);
  background: var(--kcds-color-surface-canvas);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-full);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  font-weight: 700;
}
.resume-banner svg {
  width: 14px;
  height: 14px;
}
/* === Export dialog (uses .modal but with form rows) === */
.export-rows {
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-16);
}
.export-row {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
  font-size: var(--kcds-text-body-s);
}
.export-row__label {
  color: var(--kcds-color-text-tertiary);
  min-width: 64px;
  font-weight: 700;
}
.export-row__choices {
  display: flex;
  gap: var(--kcds-spacing-16);
}
.export-row__choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}
/* === Clarification chips (confidence threshold) === */
.clarify {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--kcds-spacing-8);
  max-width: 480px;
}
.clarify__chip {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  padding: 8px var(--kcds-spacing-12);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-primary);
  text-align: start;
  cursor: pointer;
}
.clarify__chip:hover {
  background: var(--kcds-color-primary-tint);
  border-color: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary-tint);
}
.clarify__chip svg {
  width: 14px;
  height: 14px;
  color: var(--kcds-color-text-tertiary);
  margin-left: auto;
  flex-shrink: 0;
}
.clarify__or {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  text-align: center;
  padding: 2px 0;
}
/* === Dark-theme overrides for surfaces in the doc === */
[data-kcds-theme="dark"] body {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
[data-kcds-theme="dark"] .toc {
  background: var(--kcds-color-surface-default);
}
[data-kcds-theme="dark"] .mobile-header {
  background: var(--kcds-color-surface-default);
  border-bottom-color: var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] .toc__switcher {
  background: var(--kcds-color-surface-canvas);
  border-color: var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] .toc__seg {
  background: var(--kcds-color-surface-elevated);
  border-color: var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] code {
  background: var(--kcds-color-surface-canvas);
  border-color: var(--kcds-color-border-subtle);
  color: var(--kcds-color-text-primary);
}
/* .ai-panel needs no dark override — its gradient reads surface-default and
       --kcds-color-ai-bg, both of which flip with the theme. */
[data-kcds-theme="dark"] .accent-card,
    [data-kcds-theme="dark"] .accent-preview,
    [data-kcds-theme="dark"] .density-split__col,
    [data-kcds-theme="dark"] .card,
    [data-kcds-theme="dark"] .swatch,
    [data-kcds-theme="dark"] .table-wrap,
    [data-kcds-theme="dark"] .list-wrap,
    [data-kcds-theme="dark"] .file-row,
    [data-kcds-theme="dark"] .file-upload,
    [data-kcds-theme="dark"] .menu,
    [data-kcds-theme="dark"] .select-menu,
    [data-kcds-theme="dark"] .popover,
    [data-kcds-theme="dark"] .modal,
    [data-kcds-theme="dark"] .drawer,
    [data-kcds-theme="dark"] .sheet,
    [data-kcds-theme="dark"] .sidenav,
    [data-kcds-theme="dark"] .topnav-sample,
    [data-kcds-theme="dark"] .datepicker,
    [data-kcds-theme="dark"] .rte,
    [data-kcds-theme="dark"] .input,
    [data-kcds-theme="dark"] .input-group,
    [data-kcds-theme="dark"] .textarea,
    [data-kcds-theme="dark"] .input-stepper,
    [data-kcds-theme="dark"] .multiselect,
    [data-kcds-theme="dark"] .select,
    [data-kcds-theme="dark"] .btn--secondary,
    [data-kcds-theme="dark"] .spec-table,
    [data-kcds-theme="dark"] .state-grid {
  background: var(--kcds-color-surface-default);
  border-color: var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] .accent-preview__head,
    [data-kcds-theme="dark"] .modal__foot,
    [data-kcds-theme="dark"] .drawer__foot,
    [data-kcds-theme="dark"] .rte__toolbar,
    [data-kcds-theme="dark"] .density-split__head,
    [data-kcds-theme="dark"] .state-grid__label,
    [data-kcds-theme="dark"] .table th,
    [data-kcds-theme="dark"] .spec-table th,
    [data-kcds-theme="dark"] .showcase__caption {
  background: var(--kcds-color-surface-subtle);
}
[data-kcds-theme="dark"] .density-split__col--compact .density-split__head {
  background: rgba(133, 67, 218, 0.15);
  border-bottom-color: rgba(133, 67, 218, 0.32);
}
[data-kcds-theme="dark"] .showcase__demo {
  background: var(--kcds-color-surface-canvas);
  background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
                        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
}
[data-kcds-theme="dark"] .table tbody tr:hover,
    [data-kcds-theme="dark"] .list-row:hover {
  background: var(--kcds-color-surface-subtle);
}
[data-kcds-theme="dark"] .table tbody tr.is-selected {
  background: var(--kcds-color-primary-tint);
}
[data-kcds-theme="dark"] .toast {
  background: var(--kcds-color-surface-elevated);
  border: 1px solid var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] .tooltip {
  background: var(--kcds-darkgray-border);
  color: var(--kcds-color-text-primary);
}
[data-kcds-theme="dark"] .chip {
  background: var(--kcds-color-surface-default);
}
[data-kcds-theme="dark"] .segmented {
  background: var(--kcds-color-surface-canvas);
}
[data-kcds-theme="dark"] .segmented__item--active {
  background: var(--kcds-color-surface-elevated);
}
[data-kcds-theme="dark"] .btn-group {
  background: var(--kcds-color-surface-default);
  border-color: var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] .check, [data-kcds-theme="dark"] .radio {
  background: var(--kcds-color-surface-default);
}
[data-kcds-theme="dark"] .switch {
  background: var(--kcds-color-surface-elevated);
}
[data-kcds-theme="dark"] .switch::after {
  background: var(--kcds-color-border-strong);
}
[data-kcds-theme="dark"] .switch--on {
  background: var(--kcds-color-primary);
}
[data-kcds-theme="dark"] .switch--on::after {
  background: var(--kcds-gray-0);
}
/* Progress tracks now use --kcds-color-track-bg (v1.0) — auto-inverts per theme */
[data-kcds-theme="dark"] .skeleton {
  background: linear-gradient(90deg, var(--kcds-color-surface-canvas) 0%, var(--kcds-color-surface-subtle) 50%, var(--kcds-color-surface-canvas) 100%);
  background-size: 200% 100%;
}
/* Status badges need NO dark override — the -bg / -on-tint tokens carry the theme
       (ADR 034). Only the AI badge keeps a dark-specific border. */
[data-kcds-theme="dark"] .badge--ai {
  border-color: rgba(167, 139, 250, 0.3);
}
[data-kcds-theme="dark"] .badge--ai-mark {
  background: linear-gradient(135deg, rgba(167,139,250,0.10) 0%, rgba(167,139,250,0.20) 100%);
  color: var(--kcds-color-ai-suggestion);
  border-color: rgba(167,139,250,0.32);
}
/* Alerts need no dark override either — -bg / -border / -on-tint carry the theme. */
[data-kcds-theme="dark"] .alert--ai {
  background: rgba(167, 139, 250, 0.12);
  border-color: rgba(167, 139, 250, 0.24);
}
[data-kcds-theme="dark"] .citation {
  background: var(--kcds-color-surface-subtle);
}
[data-kcds-theme="dark"] .suggested-chip {
  background: var(--kcds-color-surface-default);
}
[data-kcds-theme="dark"] .multiselect__tag {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
}
[data-kcds-theme="dark"] .multiselect__tag-close {
  color: var(--kcds-color-on-primary-tint);
}
[data-kcds-theme="dark"] .chip--active,
    [data-kcds-theme="dark"] .sidenav__item--active,
    [data-kcds-theme="dark"] .select-menu__item--selected {
  color: var(--kcds-color-on-primary-tint);
}
[data-kcds-theme="dark"] .ramp__step[style*="#FFFFFF"] {
  box-shadow: inset 0 0 0 1px var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] .toc__cat--active {
  border-color: var(--kcds-color-text-primary);
}
/* New components — dark theme */
[data-kcds-theme="dark"] .daterange,
    [data-kcds-theme="dark"] .autocomplete__menu,
    [data-kcds-theme="dark"] .confirm-card,
    [data-kcds-theme="dark"] .voice-bar {
  background: var(--kcds-color-surface-default);
  border-color: var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] .confirm-card__head,
    [data-kcds-theme="dark"] .confirm-card__foot {
  background: var(--kcds-color-surface-subtle);
}
[data-kcds-theme="dark"] .refusal,
    [data-kcds-theme="dark"] .resume-banner {
  background: var(--kcds-color-surface-subtle);
  border-color: var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] .clarify__chip {
  background: var(--kcds-color-surface-default);
  border-color: var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] .autocomplete__match {
  color: var(--kcds-color-text-link);
}
/* Opinion scales + Rating (v1.0) */
[data-kcds-theme="dark"] .opinion-scale__option {
  background: var(--kcds-color-surface-default);
  border-color: var(--kcds-color-border-default);
}
[data-kcds-theme="dark"] .opinion-scale__option:hover {
  background: var(--kcds-color-surface-subtle);
}
[data-kcds-theme="dark"] .kcds-rating__star {
  color: var(--kcds-color-border-default);
}
[data-kcds-theme="dark"] .kcds-rating__star.is-filled,
    [data-kcds-theme="dark"] .kcds-rating__star.is-preview {
  color: var(--kcds-color-text-link);
}
/* Code block in doc prose */
.doc-code {
  margin: var(--kcds-spacing-12) 0 0;
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  background: var(--kcds-color-surface-subtle);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-8);
  overflow-x: auto;
}
.doc-code code {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-caption);
  line-height: 1.7;
  color: var(--kcds-color-text-primary);
}
/* Platform scope of this document — web. Native iOS / Android live in kc-ds-mobile. */
.platform-scope {
/* Full block width, so it lines up with the search field above it rather
         than sitting as a ragged content-width pill. */
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--kcds-spacing-8);
  min-height: 32px;
  padding: 0 var(--kcds-spacing-12);
  margin-bottom: var(--kcds-spacing-16);
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-caption);
  font-weight: 700;
}
.platform-scope svg {
  width: var(--kcds-icon-sm);
  height: var(--kcds-icon-sm);
  flex-shrink: 0;
}
/* Live switcher in TOC */
.toc__switcher {
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-12);
  padding: var(--kcds-spacing-12) 10px;
  margin-bottom: var(--kcds-spacing-20);
  background: var(--kcds-color-surface-canvas);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
}
.toc__switcher-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.toc__switcher-label {
  font-size: var(--kcds-text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kcds-color-text-tertiary);
}
.toc__seg {
  display: inline-flex;
  padding: 3px;
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-8);
  width: 100%;
}
.toc__seg-item {
  flex: 1;
  padding: 5px 10px;
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  border-radius: var(--kcds-radius-4);
  transition: background 100ms ease, color 100ms ease;
}
.toc__seg-item:hover {
  color: var(--kcds-color-text-primary);
}
.toc__seg-item--active {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
}
.toc__cats {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  width: 100%;
  min-width: 0;
}
.toc__cat {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--kcds-radius-full);
  display: grid;
  place-items: center;
  background: transparent;
  border: 2px solid transparent;
  padding: 0;
  transition: border-color 120ms ease;
  cursor: pointer;
}
.toc__cat span {
  width: 18px;
  height: 18px;
  border-radius: var(--kcds-radius-full);
  display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.toc__cat:hover {
  border-color: var(--kcds-color-border-default);
}
.toc__cat--active {
  border-color: var(--kcds-color-text-primary);
}
.toc__group {
  margin-bottom: var(--kcds-spacing-20);
}
.toc__group-title {
  font-size: var(--kcds-text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kcds-color-text-tertiary);
  padding: 0 var(--kcds-spacing-12);
  margin-bottom: var(--kcds-spacing-4);
}
.toc__link {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  padding: 6px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
  transition: background 100ms ease, color 100ms ease;
}
.toc__link:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.toc__link--active {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
  font-weight: 700;
}
.content {
  padding: var(--kcds-spacing-48) var(--kcds-spacing-48);
  min-width: 0;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
/* ============================================================
       Doc primitives — section, h1/h2, lede, anchor
       ============================================================ */
.doc-section {
  padding-top: var(--kcds-spacing-32);
  padding-bottom: var(--kcds-spacing-48);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.doc-section:first-child {
  padding-top: 0;
}
.doc-section:last-child {
  border-bottom: none;
}
.anchor-target {
  scroll-margin-top: 24px;
}
.doc-eyebrow {
  display: inline-block;
  font-size: var(--kcds-text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kcds-color-text-link);
  margin-bottom: var(--kcds-spacing-8);
}
.doc-h1 {
  font-size: var(--kcds-text-h1);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: var(--kcds-spacing-12);
}
.doc-h2 {
  font-size: var(--kcds-text-h3);
  font-weight: 700;
  margin-top: var(--kcds-spacing-32);
  margin-bottom: var(--kcds-spacing-12);
}
.doc-h3 {
  font-size: var(--kcds-text-h4);
  font-weight: 700;
  margin-top: var(--kcds-spacing-24);
  margin-bottom: var(--kcds-spacing-8);
}
.doc-lede {
  font-size: var(--kcds-text-body-l);
  line-height: 1.6;
  color: var(--kcds-color-text-tertiary);
  max-width: 720px;
  margin-bottom: var(--kcds-spacing-12);
}
.doc-text {
  font-size: var(--kcds-text-body-m);
  line-height: 1.625;
  color: var(--kcds-color-text-primary);
  max-width: 720px;
  margin-bottom: var(--kcds-spacing-12);
}
.doc-text--muted {
  color: var(--kcds-color-text-tertiary);
  font-size: var(--kcds-text-body-s);
}
/* ============================================================
       Showcase — the canonical "demo box + state label" container
       ============================================================ */
.showcase {
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  margin-top: var(--kcds-spacing-12);
}
.showcase__demo {
  padding: var(--kcds-spacing-32);
  background: var(--kcds-color-surface-default);
  background-image: linear-gradient(var(--kcds-color-border-subtle) 1px, transparent 1px),
                        linear-gradient(90deg, var(--kcds-color-border-subtle) 1px, transparent 1px);
  background-size: 16px 16px;
  background-position: -1px -1px;
}
.showcase__demo--plain {
  background-image: none;
}
.showcase__caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcds-spacing-12);
  padding: var(--kcds-spacing-12) var(--kcds-spacing-20);
  background: var(--kcds-color-surface-canvas);
  border-top: 1px solid var(--kcds-color-border-subtle);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  font-family: var(--doc-mono);
}
.showcase__caption strong {
  color: var(--kcds-color-text-primary);
  font-weight: 700;
}
/* State row: label on left, demo elements on right */
.state-grid {
  display: grid;
  grid-template-columns: minmax(120px, 160px) 1fr;
  gap: 0;
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  margin-top: var(--kcds-spacing-12);
}
.state-grid__label {
  padding: var(--kcds-spacing-16) var(--kcds-spacing-20);
  background: var(--kcds-color-surface-canvas);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  border-right: 1px solid var(--kcds-color-border-subtle);
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  display: flex;
  flex-direction: column;
  gap: 2px;
  justify-content: center;
}
.state-grid__label strong {
  font-family: 'Lato', sans-serif;
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-primary);
  font-weight: 700;
}
.state-grid__demo {
  padding: var(--kcds-spacing-20);
  background: var(--kcds-color-surface-default);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--kcds-spacing-12);
  min-width: 0;
/* allow grid cell to shrink below children's intrinsic width */
  overflow: hidden;
/* clip any rare overflow rather than blow out the layout */
}
/* Any fixed-width preview component inside a demo cell shrinks to fit.
       Modal / drawer / sheet / popover / autocomplete / multiselect / select
       all have width:N — without this they overflow narrow column cells. */
.state-grid__demo .modal,
    .state-grid__demo .drawer,
    .state-grid__demo .sheet,
    .state-grid__demo .popover,
    .state-grid__demo .multiselect,
    .state-grid__demo .select,
    .state-grid__demo .autocomplete,
    .state-grid__demo .menu,
    .state-grid__demo .select-menu,
    .state-grid__demo .confirm-card,
    .state-grid__demo .voice-bar,
    .state-grid__demo .file-upload,
    .state-grid__demo .rte,
    .state-grid__demo .datepicker,
    .state-grid__demo .daterange,
    .state-grid__demo .topnav-sample,
    .state-grid__demo .chat,
    .state-grid__demo .refusal,
    .state-grid__demo .clarify,
    .state-grid__demo .field,
    .state-grid__demo > div[style*="max-width"] {
  max-width: 100%;
  width: 100%;
}
.state-grid > .state-grid__label:nth-last-child(2),
    .state-grid > .state-grid__demo:last-child {
  border-bottom: none;
}
/* ============================================================
       Token / spec table
       ============================================================ */
.spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kcds-text-body-s);
  margin-top: var(--kcds-spacing-12);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
}
.spec-table th,
    .spec-table td {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  text-align: start;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  vertical-align: top;
}
.spec-table th {
  background: var(--kcds-color-surface-canvas);
  font-weight: 700;
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.spec-table tbody tr:last-child td {
  border-bottom: none;
}
.spec-table .mono {
  color: var(--kcds-color-text-tertiary);
}
.spec-table .swatch-inline {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: var(--kcds-radius-4);
  vertical-align: -4px;
  margin-right: 8px;
  border: 1px solid var(--kcds-color-border-subtle);
}
/* ============================================================
       Color swatches
       ============================================================ */
.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--kcds-spacing-12);
  margin-top: var(--kcds-spacing-12);
}
.swatch {
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  background: var(--kcds-color-surface-default);
}
.swatch__chip {
  height: 80px;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.swatch__body {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
}
.swatch__name {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  margin-bottom: 2px;
}
.swatch__token {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
/* === Suite → products list ===
       Each column is scoped to its own data-kcds-product-category, so the badge
       and the icon tiles resolve from the suite accent with no per-suite CSS. */
.suitelist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--kcds-spacing-16);
  margin-top: var(--kcds-spacing-16);
}
.suitelist__group {
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-16);
  padding: var(--kcds-spacing-12);
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-4);
}
.suitelist__badge {
  align-self: flex-start;
  padding: 3px var(--kcds-spacing-8);
  margin-bottom: var(--kcds-spacing-4);
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
  font-size: var(--kcds-text-caption);
  font-weight: 700;
}
.suitelist__row {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
  padding: var(--kcds-spacing-8);
  border-radius: var(--kcds-radius-12);
  color: var(--kcds-color-text-primary);
  text-decoration: none;
  min-height: 44px;
}
.suitelist__row:hover {
  background: var(--kcds-color-primary-tint);
}
.suitelist__icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--kcds-radius-8);
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-text-link);
}
.suitelist__icon svg {
  width: 18px;
  height: 18px;
}
.suitelist__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.suitelist__name {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.suitelist__name b {
  color: var(--kcds-color-text-tertiary);
  font-weight: 700;
}
.suitelist__former {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.suitelist__chev {
  color: var(--kcds-color-text-tertiary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.suitelist__chev svg {
  width: 16px;
  height: 16px;
}
.suitelist__hex {
  margin-top: var(--kcds-spacing-8);
  padding-top: var(--kcds-spacing-8);
  border-top: 1px solid var(--kcds-color-border-subtle);
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-label);
  color: var(--kcds-color-text-tertiary);
}
/* Brand ramp */
.ramp-cap {
  display: flex;
  align-items: baseline;
  gap: var(--kcds-spacing-8);
  margin-top: var(--kcds-spacing-20);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.ramp-cap__swatch {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: var(--kcds-radius-full);
  align-self: center;
}
.ramp-cap__meta {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-label);
  font-weight: 400;
  color: var(--kcds-color-text-tertiary);
}
.ramp-cap + .ramp {
  margin-top: var(--kcds-spacing-8);
}
.ramp {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  margin-top: var(--kcds-spacing-12);
}
.ramp__step {
  padding: var(--kcds-spacing-16) var(--kcds-spacing-12);
  font-size: var(--kcds-text-caption);
  font-weight: 700;
}
.ramp__step span {
  display: block;
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-label);
  font-weight: 400;
  margin-top: 2px;
  opacity: 0.75;
}
/* ============================================================
       Type specimens
       ============================================================ */
.type-row {
  display: grid;
  grid-template-columns: 200px 1fr 200px;
  align-items: baseline;
  gap: var(--kcds-spacing-24);
  padding: var(--kcds-spacing-20) 0;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.type-row:first-of-type {
  border-top: 1px solid var(--kcds-color-border-subtle);
}
.type-row__token {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
}
.type-row__sample-display {
  font-size: 64px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.type-row__sample-h1 {
  font-size: var(--kcds-text-h1);
  font-weight: 700;
  line-height: 1.31;
}
.type-row__sample-h2 {
  font-size: var(--kcds-text-h2);
  font-weight: 700;
  line-height: 1.42;
}
.type-row__sample-h3 {
  font-size: var(--kcds-text-h3);
  font-weight: 700;
  line-height: 1.40;
}
.type-row__sample-h4 {
  font-size: var(--kcds-text-h4);
  font-weight: 700;
  line-height: 1.55;
}
.type-row__sample-bodyl {
  font-size: var(--kcds-text-body-l);
  font-weight: 400;
  line-height: 1.55;
}
.type-row__sample-bodym {
  font-size: var(--kcds-text-body-m);
  font-weight: 400;
  line-height: 1.625;
}
.type-row__sample-bodys {
  font-size: var(--kcds-text-body-s);
  font-weight: 400;
  line-height: 1.43;
}
.type-row__sample-cap {
  font-size: var(--kcds-text-caption);
  font-weight: 400;
  line-height: 1.33;
  color: var(--kcds-color-text-tertiary);
}
.type-row__sample-label {
  font-size: var(--kcds-text-label);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kcds-color-text-tertiary);
}
.type-row__meta {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-secondary);
  text-align: end;
}
/* ============================================================
       Spacing / radius
       ============================================================ */
.spacing-list {
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  margin-top: var(--kcds-spacing-12);
}
.spacing-row {
  display: grid;
  grid-template-columns: 140px 80px 1fr;
  align-items: center;
  gap: var(--kcds-spacing-16);
  padding: var(--kcds-spacing-12) var(--kcds-spacing-20);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  font-size: var(--kcds-text-body-s);
}
.spacing-row:last-child {
  border-bottom: none;
}
.spacing-row__token {
  font-family: var(--doc-mono);
  color: var(--kcds-color-text-tertiary);
}
.spacing-row__value {
  font-weight: 700;
}
.spacing-row__bar {
  height: 16px;
  background: var(--kcds-color-primary);
  border-radius: var(--kcds-radius-4);
}
.radius-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--kcds-spacing-16);
  margin-top: var(--kcds-spacing-12);
}
.radius-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kcds-spacing-8);
}
.radius-card__shape {
  width: 100%;
  height: 80px;
  background: var(--kcds-color-primary-tint);
  border: 1px solid var(--kcds-color-primary-fill);
}
.radius-card__name {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
.shadow-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--kcds-spacing-24);
  margin-top: var(--kcds-spacing-12);
  padding: var(--kcds-spacing-32) var(--kcds-spacing-12);
  background: var(--kcds-color-surface-canvas);
  border-radius: var(--kcds-radius-12);
}
.shadow-card {
  background: var(--kcds-color-surface-default);
  border-radius: var(--kcds-radius-12);
  padding: var(--kcds-spacing-20) var(--kcds-spacing-16);
  text-align: center;
}
.shadow-card--sm {
  box-shadow: var(--kcds-shadow-sm);
}
.shadow-card--md {
  box-shadow: var(--kcds-shadow-md);
}
.shadow-card--lg {
  box-shadow: var(--kcds-shadow-lg);
}
.shadow-card__name {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
/* Dark elevation — shadows replaced by surface step-up + borders.
       Skill v0.12: shadows are invisible on dark, hierarchy reads via lightness. */
[data-kcds-theme="dark"] .shadow-card {
  box-shadow: none;
  border: 1px solid var(--kcds-color-border-subtle);
}
[data-kcds-theme="dark"] .shadow-card--sm {
  background: var(--kcds-color-surface-default);
/* same plane as canvas-card */
}
[data-kcds-theme="dark"] .shadow-card--md {
  background: var(--kcds-color-surface-elevated);
/* step up — popover plane */
  border-color: var(--kcds-color-border-default);
}
[data-kcds-theme="dark"] .shadow-card--lg {
  background: var(--kcds-color-surface-elevated);
/* step up + outer ring */
  border-color: var(--kcds-color-border-strong);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
}
.shadow-card__hint {
  display: block;
  font-family: 'Lato', sans-serif;
  font-size: var(--kcds-text-caption);
  font-weight: 400;
  color: var(--kcds-color-text-tertiary);
  margin-top: 6px;
  opacity: 0.7;
}
/* ============================================================
       Density side-by-side
       ============================================================ */
.density-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kcds-spacing-16);
  margin-top: var(--kcds-spacing-12);
}
.density-col {
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
}
.density-col__head {
  padding: var(--kcds-spacing-16) var(--kcds-spacing-20);
  background: var(--kcds-color-surface-canvas);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.density-col__name {
  font-size: var(--kcds-text-body-m);
  font-weight: 700;
}
.density-col__sub {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  margin-top: 2px;
}
.density-col__body {
  padding: var(--kcds-spacing-20);
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-16);
  background: var(--kcds-color-surface-default);
}
.density-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: center;
  gap: var(--kcds-spacing-12);
}
.density-row__label {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
/* ============================================================
       BUTTONS
       ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kcds-spacing-8);
  font-family: inherit;
  font-size: var(--kcds-text-body-m);
  font-weight: 400;
  line-height: 1;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn svg {
  width: 18px;
  height: 18px;
}
.btn--lg {
  height: var(--kcds-button-height-lg);
  padding: 0 var(--kcds-spacing-32);
  border-radius: var(--kcds-radius-24);
}
.btn--md {
  height: var(--kcds-button-height-md);
  padding: 0 var(--kcds-spacing-24);
  border-radius: var(--kcds-radius-20);
}
.btn--sm {
  height: var(--kcds-button-height-sm);
  padding: 0 var(--kcds-spacing-16);
  border-radius: var(--kcds-radius-16);
  font-size: var(--kcds-text-body-s);
}
.btn--primary {
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
}
.btn--primary:hover {
  background: var(--kcds-color-primary-hover);
}
.btn--primary:active {
  background: var(--kcds-color-primary-active);
}
.btn--secondary {
  background: var(--kcds-color-surface-default);
  color: var(--kcds-color-text-primary);
  border-color: var(--kcds-color-border-default);
}
.btn--secondary:hover {
  background: var(--kcds-color-surface-canvas);
  border-color: var(--kcds-color-border-strong);
}
.btn--secondary:active {
  background: var(--kcds-gray-200);
}
.btn--tertiary {
  background: transparent;
  color: var(--kcds-color-text-primary);
}
.btn--tertiary:hover {
  background: var(--kcds-color-surface-canvas);
}
.btn--tertiary:active {
  background: var(--kcds-gray-200);
}
.btn--destructive {
  background: var(--kcds-color-status-error-fill);
  color: var(--kcds-color-on-primary);
}
.btn--destructive:hover {
  background: var(--kcds-red-600);
}
.btn[disabled], .btn:disabled, .btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* Forced state classes for documentation (so we can show all states statically) */
.btn--state-hover.btn--primary {
  background: var(--kcds-color-primary-hover);
}
.btn--state-active.btn--primary {
  background: var(--kcds-color-primary-active);
}
.btn--state-focus.btn--primary {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 35%, transparent);
}
.btn--state-hover.btn--secondary {
  background: var(--kcds-color-surface-canvas);
  border-color: var(--kcds-color-border-strong);
}
.btn--state-active.btn--secondary {
  background: var(--kcds-gray-200);
  border-color: var(--kcds-color-border-strong);
}
.btn--state-focus.btn--secondary {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 35%, transparent);
  border-color: var(--kcds-color-primary);
}
.btn--state-hover.btn--tertiary {
  background: var(--kcds-color-surface-canvas);
}
.btn--state-focus.btn--tertiary {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 35%, transparent);
}
.btn--state-hover.btn--destructive {
  background: var(--kcds-red-600);
}
.btn--state-focus.btn--destructive {
  box-shadow: 0 0 0 3px rgba(240,62,62,.35);
}
/* Compact density button */
.btn-cm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
/* fixed on purpose — this demo button shows the COMPACT value while sitting in a comfortable column, so it must not follow --kcds-button-height-md */
  padding: 0 var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  border: 1px solid transparent;
}
.btn-cm svg {
  width: 14px;
  height: 14px;
}
.btn-cm--primary {
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
}
.btn-cm--secondary {
  background: var(--kcds-color-surface-default);
  color: var(--kcds-color-text-primary);
  border-color: var(--kcds-color-border-default);
}
/* Icon button */
.iconbtn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--kcds-radius-full);
  color: var(--kcds-color-text-tertiary);
  position: relative;
  transition: background 120ms ease, color 120ms ease;
}
.iconbtn:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.iconbtn svg {
  width: 20px;
  height: 20px;
}
.iconbtn--state-hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.iconbtn--state-focus {
  box-shadow: 0 0 0 2px var(--kcds-color-primary);
}
.iconbtn--state-active {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
}
.iconbtn--state-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
.iconbtn__dot {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 8px;
  height: 8px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-status-error);
  border: 2px solid var(--kcds-color-surface-default);
}
/* Button group */
.btn-group {
  display: inline-flex;
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  background: var(--kcds-color-surface-default);
}
.btn-group__item {
  padding: 10px var(--kcds-spacing-16);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  background: transparent;
  border-right: 1px solid var(--kcds-color-border-subtle);
}
.btn-group__item:last-child {
  border-right: none;
}
.btn-group__item:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.btn-group__item--active {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
}
/* ============================================================
       INPUTS
       ============================================================ */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-8);
  min-width: 240px;
  max-width: 360px;
}
.field__label {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
}
.field__hint {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
.field__hint--error {
  color: var(--kcds-color-status-error-on-tint);
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
}
.field__hint--error svg {
  width: 12px;
  height: 12px;
}
.input {
  height: var(--kcds-input-height-md);
  padding: 0 var(--kcds-spacing-16);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-20);
  background: var(--kcds-color-surface-default);
  font-family: inherit;
  font-size: var(--kcds-text-body-m);
  color: var(--kcds-color-text-primary);
  width: 100%;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.input::placeholder {
  color: var(--kcds-color-text-secondary);
}
.input:hover {
  border-color: var(--kcds-color-border-strong);
}
.input:focus {
  border-color: var(--kcds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 18%, transparent);
}
.input--state-hover {
  border-color: var(--kcds-color-border-strong);
}
.input--state-focus {
  border-color: var(--kcds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 18%, transparent);
}
.input--state-error {
  border-color: var(--kcds-color-status-error);
}
.input--state-error.input--state-focus {
  box-shadow: 0 0 0 3px rgba(240,62,62,.18);
}
.input[disabled], .input:disabled, .input--state-disabled {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-disabled);
  cursor: not-allowed;
  border-color: var(--kcds-color-border-subtle);
}
/* Input group (with leading icon) */
.input-group {
  display: flex;
  align-items: center;
  height: var(--kcds-input-height-md);
  padding: 0 var(--kcds-spacing-16);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-20);
  gap: var(--kcds-spacing-8);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  width: 100%;
}
.input-group:focus-within {
  border-color: var(--kcds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 18%, transparent);
}
.input-group svg {
  width: 18px;
  height: 18px;
  color: var(--kcds-color-text-tertiary);
  flex-shrink: 0;
}
.input-group input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--kcds-text-body-m);
  color: var(--kcds-color-text-primary);
}
.input-group input::placeholder {
  color: var(--kcds-color-text-secondary);
}
/* Textarea */
.textarea {
  min-height: 120px;
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-16);
  background: var(--kcds-color-surface-default);
  font-family: inherit;
  font-size: var(--kcds-text-body-m);
  line-height: 1.5;
  color: var(--kcds-color-text-primary);
  width: 100%;
  outline: none;
  resize: vertical;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.textarea:focus {
  border-color: var(--kcds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 18%, transparent);
}
/* Switch */
.switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--kcds-gray-300);
  border-radius: var(--kcds-radius-full);
  cursor: pointer;
  transition: background 160ms ease, box-shadow 120ms ease;
  flex-shrink: 0;
  display: inline-block;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-surface-default);
  box-shadow: var(--kcds-shadow-sm);
  transition: transform 160ms ease;
}
.switch--on {
  background: var(--kcds-color-primary);
}
.switch--on::after {
  transform: translateX(20px);
}
.switch--state-focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 35%, transparent);
}
.switch--state-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Checkbox */
.check {
  width: 20px;
  height: 20px;
  border-radius: var(--kcds-radius-4);
  border: 2px solid var(--kcds-color-border-default);
  background: var(--kcds-color-surface-default);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
  cursor: pointer;
}
.check svg {
  width: 12px;
  height: 12px;
  color: var(--kcds-color-on-primary);
  display: none;
}
.check--on {
  background: var(--kcds-color-primary);
  border-color: var(--kcds-color-primary);
}
.check--on svg {
  display: block;
}
.check--indeterminate {
  background: var(--kcds-color-primary);
  border-color: var(--kcds-color-primary);
  position: relative;
}
.check--indeterminate::after {
  content: '';
  width: 10px;
  height: 2px;
  background: var(--kcds-color-on-primary);
  border-radius: 1px;
}
.check--state-hover {
  border-color: var(--kcds-color-border-strong);
}
.check--state-focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 25%, transparent);
}
.check--state-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Radio */
.radio {
  width: 20px;
  height: 20px;
  border-radius: var(--kcds-radius-full);
  border: 2px solid var(--kcds-color-border-default);
  background: var(--kcds-color-surface-default);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  transition: border-color 120ms ease, box-shadow 120ms ease;
  cursor: pointer;
}
.radio--on {
  border-color: var(--kcds-color-primary);
}
.radio--on::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-primary);
}
.radio--state-hover {
  border-color: var(--kcds-color-border-strong);
}
.radio--state-focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 25%, transparent);
}
.radio--state-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* ============================================================
       BADGES
       ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
  padding: 4px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-full);
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.badge svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
/* Badge = family -bg tint + family -on-tint label (ADR 034, F-102).
       Never the accent: status is status, accent is accent. The -on-tint tokens
       flip with the theme, so no dark-theme override is needed here. */
.badge--success {
  background: var(--kcds-color-status-success-bg);
  color: var(--kcds-color-status-success-on-tint);
}
.badge--error {
  background: var(--kcds-color-status-error-bg);
  color: var(--kcds-color-status-error-on-tint);
}
.badge--info {
  background: var(--kcds-color-status-info-bg);
  color: var(--kcds-color-status-info-on-tint);
}
.badge--warning {
  background: var(--kcds-color-status-warning-bg);
  color: var(--kcds-color-status-warning-on-tint);
}
.badge--featured {
  background: var(--kcds-color-status-featured-bg);
  color: var(--kcds-color-status-featured-on-tint);
}
.badge--neutral {
  background: var(--kcds-color-status-neutral-bg);
  color: var(--kcds-color-status-neutral-on-tint);
}
.badge--ai {
  background: var(--kcds-color-status-featured-bg);
  color: var(--kcds-color-status-featured-on-tint);
  border: 1px solid rgba(133,67,218,.18);
}
.severity {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
  padding: 4px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-4);
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Severity 1–5 (ADR 034) — the base severity-N hue is the SIGNAL (matrix cell,
       icon, card left-border), never text on its own tint. A chip is -bg + -on-tint;
       a solid red/amber/green fill fails AA. System-fixed — never tinted per suite. */
.severity--5, .severity--critical {
  background: var(--kcds-color-severity-5-bg);
  color: var(--kcds-color-severity-5-on-tint);
}
.severity--4, .severity--high {
  background: var(--kcds-color-severity-4-bg);
  color: var(--kcds-color-severity-4-on-tint);
}
.severity--3, .severity--medium {
  background: var(--kcds-color-severity-3-bg);
  color: var(--kcds-color-severity-3-on-tint);
}
.severity--2, .severity--low {
  background: var(--kcds-color-severity-2-bg);
  color: var(--kcds-color-severity-2-on-tint);
}
.severity--1, .severity--info {
  background: var(--kcds-color-severity-1-bg);
  color: var(--kcds-color-severity-1-on-tint);
}
/* Filter chip */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-full);
  border: 1px solid var(--kcds-color-border-default);
  background: var(--kcds-color-surface-default);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-primary);
  transition: background 120ms ease, border-color 120ms ease;
  cursor: pointer;
}
.chip:hover {
  background: var(--kcds-color-surface-canvas);
}
.chip svg {
  width: 14px;
  height: 14px;
}
.chip--state-hover {
  background: var(--kcds-color-surface-canvas);
}
.chip--state-focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 25%, transparent);
}
.chip--active {
  background: var(--kcds-color-primary-tint);
  border-color: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary-tint);
  font-weight: 700;
}
.chip--state-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}
/* ============================================================
       ALERTS / TOAST / AI panel
       ============================================================ */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--kcds-spacing-12);
  padding: var(--kcds-spacing-16) var(--kcds-spacing-20);
  border-radius: var(--kcds-radius-12);
  border: 1px solid transparent;
}
.alert svg.alert__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.alert__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.alert__title {
  font-weight: 700;
  font-size: var(--kcds-text-body-m);
}
.alert__sub {
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
}
/* Alert = family -bg + -border; the ICON takes -on-tint (F-100 — the base hue
       measures 2.1–3.0:1 on its own tint, under the 3:1 non-text floor).
       Title and body stay default ink — the icon carries the severity, not the text. */
.alert--info {
  background: var(--kcds-color-status-info-bg);
  border-color: var(--kcds-color-status-info-border);
}
.alert--info    svg.alert__icon {
  color: var(--kcds-color-status-info-on-tint);
}
.alert--success {
  background: var(--kcds-color-status-success-bg);
  border-color: var(--kcds-color-status-success-border);
}
.alert--success svg.alert__icon {
  color: var(--kcds-color-status-success-on-tint);
}
.alert--warning {
  background: var(--kcds-color-status-warning-bg);
  border-color: var(--kcds-color-status-warning-border);
}
.alert--warning svg.alert__icon {
  color: var(--kcds-color-status-warning-on-tint);
}
.alert--error {
  background: var(--kcds-color-status-error-bg);
  border-color: var(--kcds-color-status-error-border);
}
.alert--error   svg.alert__icon {
  color: var(--kcds-color-status-error-on-tint);
}
.alert--ai {
  background: var(--kcds-color-status-featured-bg);
  border-color: var(--kcds-color-status-featured-border);
}
.alert--ai      svg.alert__icon {
  color: var(--kcds-color-ai-suggestion);
}
.toast {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  background: var(--kcds-color-surface-dark);
  color: var(--kcds-color-on-primary);
  border-radius: var(--kcds-radius-12);
  box-shadow: var(--kcds-shadow-lg);
  font-size: var(--kcds-text-body-s);
  max-width: 480px;
}
.toast svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.toast__icon-success {
  color: var(--kcds-green-500);
}
.toast__icon-error {
  color: var(--kcds-red-500);
}
.toast__close {
  color: rgba(255,255,255,.6);
  margin-left: auto;
}
.toast__close:hover {
  color: var(--kcds-gray-0);
}
.ai-panel {
  background: linear-gradient(135deg, var(--kcds-color-surface-default) 0%, var(--kcds-color-ai-bg) 100%);
  border: 1px solid var(--kcds-color-ai-border);
  border-radius: var(--kcds-radius-16);
  padding: var(--kcds-spacing-20);
  display: flex;
  gap: var(--kcds-spacing-16);
  max-width: 640px;
}
.ai-panel__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--kcds-radius-12);
  background: var(--kcds-color-ai-suggestion);
  color: var(--kcds-color-on-primary);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ai-panel__icon svg {
  width: 20px;
  height: 20px;
}
.ai-panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-8);
}
.ai-panel__title {
  font-weight: 700;
  font-size: var(--kcds-text-body-m);
}
.ai-panel__sub {
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
}
.ai-panel__actions {
  display: flex;
  gap: var(--kcds-spacing-8);
  margin-top: var(--kcds-spacing-8);
}
/* ============================================================
       PROGRESS / TABLE / TABS
       ============================================================ */
.progress {
  width: 100%;
  max-width: 320px;
}
.progress__track {
  height: 8px;
  background: var(--kcds-color-track-bg);
  border-radius: var(--kcds-radius-full);
  overflow: hidden;
}
.progress__bar {
  height: 100%;
  background: var(--kcds-color-primary);
  border-radius: var(--kcds-radius-full);
  transition: width 200ms ease;
}
.progress__bar--success {
  background: var(--kcds-color-status-success);
}
.progress__bar--error {
  background: var(--kcds-color-status-error);
}
.progress__meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  margin-top: 6px;
}
.progress-inline {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
}
.progress-inline__track {
  height: 6px;
  background: var(--kcds-color-track-bg);
  border-radius: var(--kcds-radius-full);
  overflow: hidden;
  width: 120px;
}
.progress-inline__bar {
  height: 100%;
  background: var(--kcds-color-status-success);
  border-radius: var(--kcds-radius-full);
}
.progress-inline__bar--warn {
  background: var(--kcds-color-primary);
}
.progress-inline__bar--danger {
  background: var(--kcds-color-status-error);
}
.progress-inline__value {
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  min-width: 32px;
}
.table-wrap {
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  background: var(--kcds-color-surface-default);
}
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--kcds-text-body-s);
}
.table th, .table td {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  text-align: start;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  vertical-align: middle;
}
.table th {
  background: var(--kcds-color-surface-canvas);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  font-size: var(--kcds-text-caption);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.table tbody tr:last-child td {
  border-bottom: none;
}
.table tbody tr {
  transition: background 100ms ease;
}
.table tbody tr:hover {
  background: var(--kcds-color-surface-canvas);
}
.table tbody tr.is-selected {
  background: var(--kcds-color-primary-tint);
}
.cell-name {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
}
.cell-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-primary-fill);
  color: var(--kcds-color-on-primary-tint);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--kcds-text-caption);
  flex-shrink: 0;
  overflow: hidden;
}
.cell-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.cell-name__main {
  font-weight: 700;
  color: var(--kcds-color-text-primary);
}
.cell-name__sub {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
/* Tabs */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  width: 100%;
}
.tab {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-20);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 120ms ease, border-color 120ms ease;
}
.tab:hover {
  color: var(--kcds-color-text-primary);
}
.tab--active {
  color: var(--kcds-color-on-primary-tint);
  border-bottom-color: var(--kcds-color-primary);
}
.tab--state-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
/* Cards */
.card-kpi {
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-16);
  padding: var(--kcds-spacing-20);
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-12);
  width: 240px;
}
.card-kpi__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-kpi__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--kcds-radius-8);
  display: grid;
  place-items: center;
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
}
.card-kpi__icon svg {
  width: 18px;
  height: 18px;
}
/* DISPLAY NUMERALS — a documented gap in the type scale, not a stray literal.
       The scale jumps h1 32px → display 80px, and a KPI/stat value needs the steps in
       between (28 / 40 / 64). Kept literal and flagged rather than forced onto 32 or 80,
       which would misread the component. Needs a display-numeral tier in typography.md. */
.card-kpi__label {
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
  font-weight: 700;
}
.card-kpi__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.card-kpi__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
  font-size: var(--kcds-text-caption);
  font-weight: 700;
}
.card-kpi__trend svg {
  width: 14px;
  height: 14px;
}
.card-kpi__trend--up {
  color: var(--kcds-color-status-success-text);
}
.card-kpi__trend--down {
  color: var(--kcds-color-status-error-on-tint);
}
/* Avatar */
.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-primary-fill);
  color: var(--kcds-color-on-primary-tint);
  display: inline-grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--kcds-text-body-s);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar--sm {
  width: 28px;
  height: 28px;
  font-size: var(--kcds-text-caption);
}
.avatar--lg {
  width: 56px;
  height: 56px;
  font-size: var(--kcds-text-body-l);
}
.avatar--xl {
  width: 80px;
  height: 80px;
  font-size: 28px;
}
.avatar--blue {
  background: var(--kcds-color-status-info-bg);
  color: var(--kcds-color-status-info-on-tint);
}
.avatar--violet {
  background: var(--kcds-color-status-featured-bg);
  color: var(--kcds-color-status-featured-on-tint);
}
.avatar--gray {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-tertiary);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-stack {
  display: inline-flex;
  padding-inline-start: 12px;
}
.avatar-stack .avatar {
  border: 2px solid var(--kcds-color-surface-default);
  margin-inline-start: -12px;
}
/* Tooltip (always-on display) */
.tooltip {
  display: inline-block;
  padding: 6px var(--kcds-spacing-12);
  background: var(--kcds-color-surface-dark);
  color: var(--kcds-color-on-primary);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-caption);
  box-shadow: var(--kcds-shadow-md);
}
/* Modal preview */
.modal {
  width: 480px;
  max-width: 100%;
  background: var(--kcds-color-surface-default);
  border-radius: var(--kcds-radius-16);
  box-shadow: var(--kcds-shadow-lg);
  border: 1px solid var(--kcds-color-border-subtle);
  overflow: hidden;
}
.modal__head {
  padding: var(--kcds-spacing-20) var(--kcds-spacing-24);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.modal__title {
  font-size: var(--kcds-text-h4);
  font-weight: 700;
}
.modal__body {
  padding: var(--kcds-spacing-24);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
  line-height: 1.6;
}
.modal__foot {
  padding: var(--kcds-spacing-16) var(--kcds-spacing-24);
  display: flex;
  justify-content: flex-end;
  gap: var(--kcds-spacing-8);
  flex-wrap: wrap;
  border-top: 1px solid var(--kcds-color-border-subtle);
  background: var(--kcds-color-surface-canvas);
}
/* Pagination */
.pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
}
.pagination__btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  transition: background 100ms ease, color 100ms ease;
}
.pagination__btn:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.pagination__btn--active {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
}
.pagination__btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}
/* Skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--kcds-color-surface-canvas) 0%, var(--kcds-gray-200) 50%, var(--kcds-color-surface-canvas) 100%);
  background-size: 200% 100%;
  border-radius: var(--kcds-radius-8);
  animation: skeleton-pulse 1.4s ease-in-out infinite;
}
@keyframes skeleton-pulse {
0% {
  background-position: 200% 0;
}
100% {
  background-position: -200% 0;
}
}
.skeleton--text {
  height: 12px;
}
.skeleton--title {
  height: 18px;
}
.skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--kcds-radius-full);
}
.skeleton--card {
  height: 140px;
  border-radius: var(--kcds-radius-16);
}
/* Spinner */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--kcds-color-border-subtle);
  border-top-color: var(--kcds-color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
.spinner--sm {
  width: 16px;
  height: 16px;
  border-width: 2px;
}
.spinner--lg {
  width: 40px;
  height: 40px;
  border-width: 4px;
}
@keyframes spin {
to {
  transform: rotate(360deg);
}
}
/* Empty state */
.empty {
  padding: var(--kcds-spacing-40) var(--kcds-spacing-24);
  text-align: center;
  max-width: 420px;
  margin: 0 auto;
}
.empty__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-tertiary);
  display: grid;
  place-items: center;
  margin: 0 auto var(--kcds-spacing-16);
}
.empty__icon svg {
  width: 24px;
  height: 24px;
}
.empty__title {
  font-size: var(--kcds-text-h4);
  font-weight: 700;
  margin-bottom: var(--kcds-spacing-4);
}
.empty__sub {
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
  margin-bottom: var(--kcds-spacing-16);
  line-height: 1.5;
}
/* ============================================================
       Link
       ============================================================ */
.link {
  color: var(--kcds-color-text-link);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 100ms ease, color 100ms ease;
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
}
.link:hover {
  border-bottom-color: var(--kcds-color-primary);
}
.link:visited {
  color: var(--kcds-violet-500);
}
.link svg {
  width: 14px;
  height: 14px;
}
.link--state-hover {
  border-bottom-color: var(--kcds-color-primary);
}
.link--state-focus {
  outline: 2px solid var(--kcds-color-primary);
  outline-offset: 2px;
  border-radius: var(--kcds-radius-4);
}
.link--state-visited {
  color: var(--kcds-violet-500);
}
.link--state-disabled {
  color: var(--kcds-color-text-disabled);
  pointer-events: none;
}
.link--external svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}
/* ============================================================
       Number / Password / Email / Date inputs
       (reuse .input as base, add per-type wrappers)
       ============================================================ */
.input-stepper {
  display: flex;
  align-items: center;
  height: var(--kcds-input-height-md);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-20);
  background: var(--kcds-color-surface-default);
  overflow: hidden;
  width: 140px;
}
.input-stepper:focus-within {
  border-color: var(--kcds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 18%, transparent);
}
.input-stepper__btn {
  width: 40px;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--kcds-color-text-tertiary);
  border-right: 1px solid var(--kcds-color-border-subtle);
}
.input-stepper__btn:last-child {
  border-right: none;
  border-left: 1px solid var(--kcds-color-border-subtle);
}
.input-stepper__btn:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.input-stepper__btn svg {
  width: 16px;
  height: 16px;
}
.input-stepper input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  font-family: inherit;
  font-size: var(--kcds-text-body-m);
  color: var(--kcds-color-text-primary);
}
.password-input {
  position: relative;
  width: 100%;
}
.password-input input {
  padding-right: 48px;
}
.password-input__reveal {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: var(--kcds-color-text-tertiary);
  border-radius: var(--kcds-radius-8);
}
.password-input__reveal:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.password-input__reveal svg {
  width: 16px;
  height: 16px;
}
/* Date picker (visual representation only) */
.datepicker {
  width: 280px;
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  padding: var(--kcds-spacing-16);
  box-shadow: var(--kcds-shadow-md);
}
.datepicker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--kcds-spacing-12);
}
.datepicker__title {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.datepicker__nav {
  display: flex;
  gap: 2px;
}
.datepicker__nav-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--kcds-radius-8);
  display: grid;
  place-items: center;
  color: var(--kcds-color-text-tertiary);
}
.datepicker__nav-btn:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.datepicker__nav-btn svg {
  width: 14px;
  height: 14px;
}
.datepicker__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.datepicker__weekday {
  font-size: var(--kcds-text-label);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  text-align: center;
  padding: 4px 0;
  text-transform: uppercase;
}
.datepicker__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
  border-radius: var(--kcds-radius-8);
  cursor: pointer;
}
.datepicker__day:hover {
  background: var(--kcds-color-surface-canvas);
}
.datepicker__day--muted {
  color: var(--kcds-color-text-disabled);
}
.datepicker__day--today {
  color: var(--kcds-color-text-link);
  font-weight: 700;
}
.datepicker__day--selected {
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
}
.datepicker__day--in-range {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
  border-radius: 0;
}
.datepicker__day--range-start {
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
  border-radius: var(--kcds-radius-8) 0 0 var(--kcds-radius-8);
}
.datepicker__day--range-end {
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
  border-radius: 0 var(--kcds-radius-8) var(--kcds-radius-8) 0;
}
/* File upload */
.file-upload {
  border: 1.5px dashed var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-12);
  padding: var(--kcds-spacing-32) var(--kcds-spacing-24);
  text-align: center;
  background: var(--kcds-color-surface-default);
  transition: border-color 120ms ease, background 120ms ease;
}
.file-upload:hover, .file-upload--state-dragover {
  border-color: var(--kcds-color-primary);
  background: var(--kcds-color-primary-tint);
}
.file-upload__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-tertiary);
  display: grid;
  place-items: center;
  margin: 0 auto var(--kcds-spacing-12);
}
.file-upload__icon svg {
  width: 24px;
  height: 24px;
}
.file-upload__title {
  font-size: var(--kcds-text-body-m);
  font-weight: 700;
  margin-bottom: 4px;
}
.file-upload__sub {
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
  margin-bottom: var(--kcds-spacing-16);
}
.file-upload__cta {
  color: var(--kcds-color-text-link);
  font-weight: 700;
}
.file-row {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
  padding: var(--kcds-spacing-12);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-8);
  background: var(--kcds-color-surface-default);
}
.file-row__icon {
  width: 36px;
  height: 36px;
  border-radius: var(--kcds-radius-8);
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.file-row__icon svg {
  width: 18px;
  height: 18px;
}
.file-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.file-row__name {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.file-row__meta {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
/* Rich text editor */
.rte {
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-12);
  background: var(--kcds-color-surface-default);
  overflow: hidden;
}
.rte:focus-within {
  border-color: var(--kcds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 18%, transparent);
}
.rte__toolbar {
  display: flex;
  gap: 2px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  background: var(--kcds-color-surface-canvas);
  flex-wrap: wrap;
}
.rte__btn {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: var(--kcds-radius-4);
  color: var(--kcds-color-text-tertiary);
}
.rte__btn:hover {
  background: var(--kcds-color-surface-default);
  color: var(--kcds-color-text-primary);
}
.rte__btn--active {
  background: var(--kcds-color-surface-default);
  color: var(--kcds-color-on-primary-tint);
}
.rte__btn svg {
  width: 16px;
  height: 16px;
}
.rte__divider {
  width: 1px;
  height: 18px;
  background: var(--kcds-color-border-subtle);
  margin: 0 4px;
}
.rte__body {
  min-height: 120px;
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  font-size: var(--kcds-text-body-m);
  line-height: 1.6;
  color: var(--kcds-color-text-primary);
}
.rte__body p {
  margin: 0 0 var(--kcds-spacing-8);
}
/* ============================================================
       Select / Dropdown
       ============================================================ */
.select {
  display: flex;
  align-items: center;
  height: var(--kcds-input-height-md);
  padding: 0 var(--kcds-spacing-16);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-20);
  background: var(--kcds-color-surface-default);
  gap: var(--kcds-spacing-8);
  width: 100%;
  font-size: var(--kcds-text-body-m);
  color: var(--kcds-color-text-primary);
  transition: border-color 120ms ease, box-shadow 120ms ease;
  cursor: pointer;
}
.select:hover {
  border-color: var(--kcds-color-border-strong);
}
.select--state-focus, .select--state-open {
  border-color: var(--kcds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 18%, transparent);
}
.select--state-disabled {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-disabled);
  cursor: not-allowed;
}
.select__placeholder {
  color: var(--kcds-color-text-secondary);
  flex: 1;
}
.select__value {
  flex: 1;
}
.select svg {
  width: 16px;
  height: 16px;
  color: var(--kcds-color-text-tertiary);
  flex-shrink: 0;
}
.select--state-open svg.select__chevron {
  transform: rotate(180deg);
}
.select-menu {
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  box-shadow: var(--kcds-shadow-lg);
  padding: 6px;
  min-width: 240px;
  max-width: 320px;
}
.select-menu__item {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  padding: 8px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-primary);
  cursor: pointer;
}
.select-menu__item:hover {
  background: var(--kcds-color-surface-canvas);
}
.select-menu__item--selected {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
  font-weight: 700;
}
.select-menu__item svg.tick {
  width: 14px;
  height: 14px;
  margin-left: auto;
  color: var(--kcds-color-text-link);
}
.select-menu__divider {
  height: 1px;
  background: var(--kcds-color-border-subtle);
  margin: 6px 4px;
}
/* Multi-select with tags */
.multiselect {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: var(--kcds-input-height-md);
  padding: 8px var(--kcds-spacing-12);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-20);
  background: var(--kcds-color-surface-default);
  width: 100%;
}
.multiselect:focus-within {
  border-color: var(--kcds-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--kcds-color-primary) 18%, transparent);
}
.multiselect__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
  padding: 3px 4px 3px 10px;
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
  border-radius: var(--kcds-radius-full);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.multiselect__tag-close {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: var(--kcds-radius-full);
  color: var(--kcds-color-on-primary-tint);
}
.multiselect__tag-close:hover {
  background: var(--kcds-color-primary-fill);
}
.multiselect__tag-close svg {
  width: 12px;
  height: 12px;
}
.multiselect input {
  flex: 1;
  min-width: 80px;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: var(--kcds-text-body-m);
}
/* Segmented control */
.segmented {
  display: inline-flex;
  padding: 4px;
  background: var(--kcds-color-surface-canvas);
  border-radius: var(--kcds-radius-12);
}
.segmented__item {
  padding: 6px var(--kcds-spacing-16);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  border-radius: var(--kcds-radius-8);
  transition: background 120ms ease, color 120ms ease;
}
.segmented__item:hover {
  color: var(--kcds-color-text-primary);
}
.segmented__item--active {
  background: var(--kcds-color-surface-default);
  color: var(--kcds-color-on-primary-tint);
  box-shadow: var(--kcds-shadow-sm);
}
/* ============================================================
       Status — extra badges (Sensitivity / AI / Count)
       ============================================================ */
.sensitivity {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
  padding: 4px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-4);
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
}
.sensitivity svg {
  width: 12px;
  height: 12px;
}
/* Sensitivity — canonical 4 tiers (02-cross-cutting/sensitivity-tiers.md).
       Tier 0 Public · Tier 1 Internal · Tier 2 Confidential · Tier 3 Highly Sensitive.
       Tint + -on-tint, system-fixed; the orange of Tier 2 is the sensitivity hue,
       not the product accent — it must not shift with data-kcds-product-category. */
.sensitivity--public {
  color: var(--kcds-color-sensitivity-public-on-tint);
  background: var(--kcds-color-sensitivity-public-bg);
  border-color: var(--kcds-color-border-default);
}
.sensitivity--internal {
  color: var(--kcds-color-sensitivity-internal-on-tint);
  background: var(--kcds-color-sensitivity-internal-bg);
  border-color: rgba(21,103,210,.3);
}
.sensitivity--confidential {
  color: var(--kcds-color-sensitivity-confidential-on-tint);
  background: var(--kcds-color-sensitivity-confidential-bg);
  border-color: rgba(255,111,0,.3);
}
.sensitivity--highly-sensitive {
  color: var(--kcds-color-sensitivity-highly-sensitive-on-tint);
  background: var(--kcds-color-sensitivity-highly-sensitive-bg);
  border-color: rgba(240,62,62,.3);
}
.badge--ai-mark {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
  padding: 2px var(--kcds-spacing-8);
  border-radius: var(--kcds-radius-full);
  font-size: var(--kcds-text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: linear-gradient(135deg, var(--kcds-color-surface-default) 0%, var(--kcds-color-ai-bg) 100%);
  color: var(--kcds-color-ai-suggestion);
  border: 1px solid var(--kcds-color-ai-border);
}
.badge--ai-mark svg {
  width: 10px;
  height: 10px;
}
.badge-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
  font-size: var(--kcds-text-label);
  font-weight: 700;
  line-height: 1;
}
.badge-count--neutral {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-tertiary);
}
.badge-count--error {
  background: var(--kcds-color-status-error-fill);
}
.badge-count--ninetynine::before {
  content: '99+';
}
/* ============================================================
       Card / List rows / Key-value / Stat
       ============================================================ */
.card {
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-16);
  padding: var(--kcds-spacing-20);
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-12);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.card--clickable {
  cursor: pointer;
}
.card--clickable:hover {
  border-color: var(--kcds-color-border-strong);
  box-shadow: var(--kcds-shadow-md);
}
.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--kcds-spacing-12);
  min-width: 0;
}
.card__head > :first-child {
  min-width: 0;
  flex: 1;
}
.card__head > .badge {
  flex-shrink: 0;
  white-space: nowrap;
}
.card__title {
  font-size: var(--kcds-text-h4);
  font-weight: 700;
  line-height: 1.4;
}
.card__sub {
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
}
.card__body {
  font-size: var(--kcds-text-body-s);
  line-height: 1.6;
  color: var(--kcds-color-text-primary);
}
.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--kcds-spacing-12);
  border-top: 1px solid var(--kcds-color-border-subtle);
}
/* List row */
.list-row {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-16);
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  background: var(--kcds-color-surface-default);
  transition: background 100ms ease;
}
.list-row:last-child {
  border-bottom: none;
}
.list-row:hover {
  background: var(--kcds-color-surface-canvas);
}
.list-row__leading {
  flex-shrink: 0;
}
.list-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.list-row__title {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.list-row__sub {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
.list-row__trailing {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
}
.list-wrap {
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  background: var(--kcds-color-surface-default);
}
/* Key-value */
.kv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: var(--kcds-spacing-16);
  padding: var(--kcds-spacing-12) 0;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  font-size: var(--kcds-text-body-s);
}
.kv:last-child {
  border-bottom: none;
}
.kv__key {
  color: var(--kcds-color-text-tertiary);
  font-weight: 700;
}
.kv__val {
  color: var(--kcds-color-text-primary);
}
/* Stat — large number with label */
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-4);
}
.stat__value {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--kcds-color-text-primary);
}
.stat__value--display {
  font-size: 64px;
}
.stat__label {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.stat__delta {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  margin-top: 4px;
}
/* ============================================================
       Inline message / Error state
       ============================================================ */
.inline-msg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kcds-text-caption);
  font-weight: 700;
}
.inline-msg svg {
  width: 12px;
  height: 12px;
}
.inline-msg--success {
  color: var(--kcds-color-status-success-text);
}
.inline-msg--error {
  color: var(--kcds-color-status-error-on-tint);
}
.inline-msg--warning {
  color: var(--kcds-color-on-primary-tint);
}
.inline-msg--info {
  color: var(--kcds-color-status-info);
}
.error-state {
  padding: var(--kcds-spacing-40) var(--kcds-spacing-24);
  text-align: center;
  max-width: 480px;
  margin: 0 auto;
}
.error-state__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-status-error-bg);
  color: var(--kcds-color-status-error-on-tint);
  display: grid;
  place-items: center;
  margin: 0 auto var(--kcds-spacing-16);
}
.error-state__icon svg {
  width: 24px;
  height: 24px;
}
.error-state__title {
  font-size: var(--kcds-text-h4);
  font-weight: 700;
  margin-bottom: var(--kcds-spacing-4);
}
.error-state__sub {
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
  margin-bottom: var(--kcds-spacing-16);
  line-height: 1.5;
}
.error-state__actions {
  display: flex;
  gap: var(--kcds-spacing-8);
  justify-content: center;
  flex-wrap: wrap;
}
/* ============================================================
       Navigation — Breadcrumbs / Side nav / Top nav / Menu / Back / Stepper
       ============================================================ */
.breadcrumbs {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--kcds-text-body-s);
}
.breadcrumbs__item {
  color: var(--kcds-color-text-tertiary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.breadcrumbs__item--current {
  color: var(--kcds-color-text-primary);
  font-weight: 700;
}
.breadcrumbs__item:hover:not(.breadcrumbs__item--current) {
  color: var(--kcds-color-text-primary);
}
.breadcrumbs svg.breadcrumbs__sep {
  width: 12px;
  height: 12px;
  color: var(--kcds-color-text-disabled);
}
/* Side nav (sample) */
.sidenav {
  width: 240px;
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  padding: var(--kcds-spacing-12);
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-4);
}
.sidenav__group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--kcds-spacing-8);
}
.sidenav__group:first-child {
  padding-top: 0;
}
.sidenav__group-title {
  padding: 6px var(--kcds-spacing-12) 4px;
  font-size: var(--kcds-text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kcds-color-text-tertiary);
}
.sidenav__item {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
  padding: 8px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  position: relative;
  transition: background 100ms ease, color 100ms ease;
}
.sidenav__item:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.sidenav__item svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.sidenav__item-count {
  margin-left: auto;
  min-width: 20px;
  height: 18px;
  padding: 0 6px;
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-tertiary);
  border-radius: var(--kcds-radius-full);
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sidenav__item--active {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
}
.sidenav__item--active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--kcds-color-primary);
  border-radius: 0 var(--kcds-radius-4) var(--kcds-radius-4) 0;
}
.sidenav__item--active .sidenav__item-count {
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
}
/* Top nav (sample - admin pattern B compact representation) */
.topnav-sample {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-16);
  padding: 10px var(--kcds-spacing-16);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
}
.topnav-sample__brand {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  font-weight: 700;
  font-size: var(--kcds-text-body-s);
}
.topnav-sample__brand-mark {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
}
.topnav-sample__brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.topnav-sample__breadcrumbs {
  flex: 1;
}
/* Menu / dropdown */
.menu {
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  box-shadow: var(--kcds-shadow-lg);
  padding: 6px;
  min-width: 220px;
}
.menu__item {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
  padding: 8px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-primary);
  cursor: pointer;
}
.menu__item:hover {
  background: var(--kcds-color-surface-canvas);
}
.menu__item svg {
  width: 16px;
  height: 16px;
  color: var(--kcds-color-text-tertiary);
}
.menu__item:hover svg {
  color: var(--kcds-color-text-primary);
}
.menu__item--destructive {
  color: var(--kcds-color-status-error-on-tint);
}
.menu__item--destructive svg {
  color: var(--kcds-color-status-error-on-tint);
}
.menu__item--destructive:hover {
  background: var(--kcds-color-status-error-bg);
}
.menu__shortcut {
  margin-left: auto;
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-label);
  color: var(--kcds-color-text-tertiary);
}
.menu__divider {
  height: 1px;
  background: var(--kcds-color-border-subtle);
  margin: 6px 4px;
}
.menu__label {
  padding: 6px var(--kcds-spacing-12) 4px;
  font-size: var(--kcds-text-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kcds-color-text-tertiary);
}
/* Back button */
.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-tertiary);
  transition: background 100ms ease, color 100ms ease;
}
.back-btn:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.back-btn svg {
  width: 16px;
  height: 16px;
}
/* Stepper */
.stepper {
  display: flex;
  align-items: center;
  gap: 0;
}
.stepper__step {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  flex-shrink: 0;
}
.stepper__num {
  width: 28px;
  height: 28px;
  border-radius: var(--kcds-radius-full);
  display: grid;
  place-items: center;
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  flex-shrink: 0;
}
.stepper__label {
  display: flex;
  flex-direction: column;
}
.stepper__label-title {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
}
.stepper__label-sub {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
.stepper__connector {
  flex: 1;
  min-width: 24px;
  height: 1px;
  background: var(--kcds-color-border-subtle);
}
.stepper__step--complete .stepper__num {
  background: var(--kcds-color-status-success);
  color: var(--kcds-color-on-primary);
}
.stepper__step--current .stepper__num {
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
}
.stepper__step--current .stepper__label-title {
  color: var(--kcds-color-on-primary-tint);
}
.stepper__step--upcoming .stepper__num {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-tertiary);
  border: 1px solid var(--kcds-color-border-default);
}
.stepper__step--upcoming .stepper__label-title {
  color: var(--kcds-color-text-tertiary);
}
.stepper__connector--complete {
  background: var(--kcds-color-status-success);
}
/* ============================================================
       Overlays — Drawer / Popover / Sheet
       ============================================================ */
.drawer {
  width: 380px;
  max-width: 100%;
  background: var(--kcds-color-surface-default);
  border-left: 1px solid var(--kcds-color-border-subtle);
  box-shadow: var(--kcds-shadow-lg);
  display: flex;
  flex-direction: column;
  max-height: 480px;
}
.drawer__head {
  padding: var(--kcds-spacing-16) var(--kcds-spacing-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.drawer__title {
  font-size: var(--kcds-text-h4);
  font-weight: 700;
}
.drawer__body {
  padding: var(--kcds-spacing-20);
  overflow-y: auto;
  flex: 1;
  font-size: var(--kcds-text-body-s);
  line-height: 1.6;
  color: var(--kcds-color-text-tertiary);
}
.drawer__foot {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-20);
  display: flex;
  justify-content: flex-end;
  gap: var(--kcds-spacing-8);
  border-top: 1px solid var(--kcds-color-border-subtle);
  background: var(--kcds-color-surface-canvas);
}
.popover {
  width: 320px;
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  box-shadow: var(--kcds-shadow-md);
  padding: var(--kcds-spacing-16);
  position: relative;
}
.popover::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 24px;
  width: 12px;
  height: 12px;
  background: var(--kcds-color-surface-default);
  border-top: 1px solid var(--kcds-color-border-subtle);
  border-left: 1px solid var(--kcds-color-border-subtle);
  transform: rotate(45deg);
}
.popover__title {
  font-size: var(--kcds-text-body-m);
  font-weight: 700;
  margin-bottom: 4px;
}
.popover__body {
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
  line-height: 1.5;
}
.popover__foot {
  display: flex;
  gap: var(--kcds-spacing-8);
  margin-top: var(--kcds-spacing-12);
}
.sheet {
  width: 100%;
  max-width: 360px;
  background: var(--kcds-color-surface-default);
  border-radius: var(--kcds-radius-24) var(--kcds-radius-24) 0 0;
  box-shadow: var(--kcds-shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.sheet__handle {
  width: 36px;
  height: 4px;
  background: var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-full);
  margin: 12px auto 0;
}
.sheet__head {
  padding: var(--kcds-spacing-16) var(--kcds-spacing-20);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.sheet__title {
  font-size: var(--kcds-text-h4);
  font-weight: 700;
}
.sheet__body {
  padding: var(--kcds-spacing-20);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
  line-height: 1.6;
}
.sheet__foot {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-20);
  border-top: 1px solid var(--kcds-color-border-subtle);
  display: flex;
  gap: var(--kcds-spacing-8);
}
/* ============================================================
       Conversational UI — Message bubbles / Citation / Suggested chips
       ============================================================ */
.chat {
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-16);
  padding: var(--kcds-spacing-20);
  background: var(--kcds-color-surface-canvas);
  border-radius: var(--kcds-radius-12);
  max-width: 600px;
}
.msg {
  display: flex;
  gap: var(--kcds-spacing-12);
}
.msg__avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--kcds-radius-full);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: var(--kcds-text-caption);
}
.msg__avatar--user {
  background: var(--kcds-color-primary-fill);
  color: var(--kcds-color-on-primary-tint);
}
.msg__avatar--ai {
  background: var(--kcds-color-ai-suggestion);
  color: var(--kcds-gray-0);
}
.msg__body {
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-8);
  flex: 1;
  min-width: 0;
}
.msg__bubble {
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  font-size: var(--kcds-text-body-s);
  line-height: 1.6;
  color: var(--kcds-color-text-primary);
  max-width: 100%;
}
.msg--user .msg__bubble {
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
  border-color: var(--kcds-color-primary);
}
.msg__meta {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
}
.citations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.citation {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
  padding: 3px 8px;
  background: var(--kcds-color-surface-canvas);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-full);
  font-size: var(--kcds-text-label);
  color: var(--kcds-color-text-tertiary);
  font-weight: 700;
}
.citation:hover {
  background: var(--kcds-color-primary-tint);
  border-color: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary-tint);
}
.citation svg {
  width: 11px;
  height: 11px;
}
.citation__num {
  width: 14px;
  height: 14px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
  display: grid;
  place-items: center;
  font-size: var(--kcds-text-label);
  font-weight: 700;
}
.suggested-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--kcds-spacing-4);
}
.suggested-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--kcds-spacing-12);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-full);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-primary);
  cursor: pointer;
}
.suggested-chip:hover {
  background: var(--kcds-color-primary-tint);
  border-color: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary-tint);
}
.suggested-chip svg {
  width: 12px;
  height: 12px;
  opacity: 0.6;
}
/* Streaming dots */
.typing-dots {
  display: inline-flex;
  gap: var(--kcds-spacing-4);
  padding: 4px 0;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-text-tertiary);
  animation: typing 1.2s infinite ease-in-out;
}
.typing-dots span:nth-child(2) {
  animation-delay: 0.2s;
}
.typing-dots span:nth-child(3) {
  animation-delay: 0.4s;
}
@keyframes typing {
0%, 60%, 100% {
  opacity: 0.3;
  transform: translateY(0);
}
30% {
  opacity: 1;
  transform: translateY(-3px);
}
}
/* ============================================================
       Opinion scales — Likert / NPS / CSAT (v1.0)
       Discrete-choice spectrum. ONLY the selected position is filled
       (isolated highlight) — NOT cumulative. Opposite of Rating.
       ============================================================ */
.opinion-scale-block {
  border: none;
  padding: 0;
  margin: 0;
  max-width: 100%;
}
.opinion-scale__question {
  font-size: var(--kcds-text-body-m);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
  padding: 0;
  margin: 0 0 var(--kcds-spacing-4) 0;
}
.opinion-scale__instruction {
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
  margin: 0 0 var(--kcds-spacing-12) 0;
}
.opinion-scale {
  display: flex;
  gap: var(--kcds-spacing-8);
}
.opinion-scale__option {
  flex: 1;
  min-width: 40px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.opinion-scale__option:hover {
  background: var(--kcds-color-surface-canvas);
  border-color: var(--kcds-color-text-tertiary);
}
.opinion-scale__option.is-selected {
  background: var(--kcds-color-primary);
  border-color: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
}
.opinion-scale__option--smiley {
  font-size: var(--kcds-text-h3);
}
.opinion-scale__anchors {
  display: flex;
  justify-content: space-between;
  margin-top: var(--kcds-spacing-8);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
/* ============================================================
       Rating — star rating (v1.0)
       Cumulative fill. Stars 1..N are all filled when rating=N.
       Opposite of Opinion scales.
       ============================================================ */
.kcds-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
}
.kcds-rating__stars {
  display: inline-flex;
  gap: 6px;
}
.kcds-rating__star {
  display: inline-flex;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kcds-color-border-default);
  transition: color 120ms ease, transform 120ms ease;
}
.kcds-rating__star svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}
.kcds-rating__star.is-filled {
  color: var(--kcds-color-text-link);
}
.kcds-rating__star.is-preview {
  color: var(--kcds-color-text-link);
  opacity: 0.5;
}
.kcds-rating--sm .kcds-rating__stars {
  gap: var(--kcds-spacing-4);
}
.kcds-rating--sm .kcds-rating__star svg {
  width: 16px;
  height: 16px;
}
.kcds-rating--lg .kcds-rating__stars {
  gap: var(--kcds-spacing-8);
}
.kcds-rating--lg .kcds-rating__star svg {
  width: 32px;
  height: 32px;
}
.kcds-rating--display .kcds-rating__star {
  cursor: default;
  pointer-events: none;
}
.kcds-rating__value {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
}
.kcds-rating__count {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
.kcds-rating--disabled {
  opacity: 0.4;
  pointer-events: none;
}
.kcds-rating__prompt {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
  margin-bottom: var(--kcds-spacing-8);
}
/* Half-star: split fill via clip-path */
.kcds-rating__star--half {
  position: relative;
}
.kcds-rating__star--half svg {
  color: var(--kcds-color-border-default);
}
.kcds-rating__star--half::before {
  content: '★';
  position: absolute;
  inset: 0;
  color: var(--kcds-color-text-link);
  font-size: var(--kcds-text-h3);
  line-height: 1;
  width: 50%;
  overflow: hidden;
  pointer-events: none;
}
/* ============================================================
       Density side-by-side per component
       Each component section gets a 2-column grid, left = comfortable,
       right = compact. The compact column has class .density--compact,
       which scopes overrides to ALL components inside it.
       ============================================================ */
.density-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--kcds-spacing-16);
  margin-top: var(--kcds-spacing-12);
  align-items: stretch;
}
.density-split__col {
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--kcds-color-surface-default);
}
.density-split__head {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-20);
  background: var(--kcds-color-surface-canvas);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcds-spacing-8);
}
.density-split__name {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
}
.density-split__name-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-label);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--kcds-color-text-tertiary);
}
.density-split__col--compact .density-split__head {
  background: var(--kcds-color-status-featured-bg);
  border-bottom-color: rgba(133,67,218,.18);
}
.density-split__col--compact .density-split__name-tag {
  background: var(--kcds-color-surface-default);
  border-color: rgba(133,67,218,.24);
  color: var(--kcds-color-status-featured);
}
.density-split__body {
  padding: var(--kcds-spacing-20);
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-12);
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
/* All wide preview components inside a density-split column scale to fit.
       Many components (modal, popover, etc.) have a fixed pixel width — without
       this they overflow narrow density-split columns.
       NOTE: drawer/sheet intentionally NOT in this list — their demos use a
       canvas-strip wrapper to show the "slides from edge" pattern; forcing them
       to 100% loses that visual meaning. They constrain via max-width: 100% only. */
.density-split__body .modal,
    .density-split__body .popover,
    .density-split__body .menu,
    .density-split__body .select-menu,
    .density-split__body .multiselect,
    .density-split__body .select,
    .density-split__body .autocomplete,
    .density-split__body .confirm-card,
    .density-split__body .voice-bar,
    .density-split__body .file-upload,
    .density-split__body .rte,
    .density-split__body .datepicker,
    .density-split__body .daterange,
    .density-split__body .topnav-sample,
    .density-split__body .chat,
    .density-split__body .refusal,
    .density-split__body .clarify,
    .density-split__body .field,
    .density-split__body .error-state,
    .density-split__body .empty,
    .density-split__body .list-wrap,
    .density-split__body .table-wrap,
    .density-split__body .card,
    .density-split__body .sidenav {
  max-width: 100%;
  width: 100%;
}
/* Drawer & sheet: constrain to fit, but keep their native intrinsic widths
       so the "slides from edge" demo wrapper reads visually. */
.density-split__body .drawer,
    .density-split__body .sheet {
  max-width: 100%;
}
/* Daterange inside density-split: there isn't enough horizontal room
       for presets + two side-by-side calendars (~620px min, column is ~440px).
       Stack vertically — presets row on top, single calendar below.
       Skill explicitly allows this layout: "sequential single calendar on mobile,
       connected dual on desktop". */
.density-split__body .daterange {
  flex-direction: column;
  align-items: center;
}
.density-split__body .daterange__presets {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--kcds-spacing-4);
  min-width: 0;
  padding-right: 0;
  padding-bottom: var(--kcds-spacing-12);
  margin-bottom: var(--kcds-spacing-4);
  border-right: none;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  width: 100%;
}
.density-split__body .daterange__preset {
  padding: 4px var(--kcds-spacing-12);
  font-size: var(--kcds-text-caption);
  border-radius: var(--kcds-radius-full);
  border: 1px solid var(--kcds-color-border-subtle);
}
.density-split__body .daterange__preset--active {
  border-color: var(--kcds-color-primary);
}
.density-split__body .daterange__calendars {
  flex-direction: column;
  gap: var(--kcds-spacing-12);
  width: 100%;
  align-items: center;
}
.density-split__body .daterange__cal {
  width: 100%;
  max-width: 260px;
/* keep day cells reasonable square size */
}
/* Hide the second calendar in density-split context — keep just one.
       Users still see "Connected dual" demo on real desktop pages where
       there's room; in doc preview we show the simpler stacked variant. */
.density-split__body .daterange__calendars .daterange__cal:nth-child(2) {
  display: none;
}
/* Grey-canvas modal/sheet wrappers: any inline-grid container with place-items
       in a density-split also needs constraint so the centered child can shrink */
.density-split__body > div[style*="place-items"],
    .density-split__body > div[style*="background:"] {
  max-width: 100%;
  box-sizing: border-box;
}
/* state-grid INSIDE a split-col: drop its own border and round corners,
       to avoid double-border with the column wrapper.
       Also stack vertically — gives the demo cell the full column width,
       which fixes large components (modal, error-state, drawer) being clipped. */
.density-split__col .state-grid {
  border: none;
  border-radius: 0;
  margin-top: 0;
  grid-template-columns: 1fr;
}
.density-split__col .state-grid__label {
  background: transparent;
  border-right: none;
  padding-bottom: 6px;
  padding-top: var(--kcds-spacing-12);
}
.density-split__col .state-grid__demo {
  padding-top: 6px;
  padding-bottom: var(--kcds-spacing-12);
}
/* =================================================================
       COMPACT DENSITY OVERRIDES — scoped to .density--compact
       Same tokens, smaller resolved values per KCDS density spec.
       ================================================================= */
/* The density tokens themselves resolve here — components read the token and
       never branch on density (02-cross-cutting/density.md, "Components never
       branch on density themselves"). */
/* Buttons */
.density--compact .btn--md {
/* height comes from the token — redeclared on .density--compact above */
  padding: 0 var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.density--compact .btn--lg {
/* height comes from the token */
  padding: 0 var(--kcds-spacing-16);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.density--compact .btn--sm {
/* height comes from the token */
  padding: 0 10px;
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.density--compact .btn svg {
  width: 14px;
  height: 14px;
}
/* Icon button */
.density--compact .iconbtn {
  width: 32px;
  height: 32px;
}
.density--compact .iconbtn svg {
  width: 16px;
  height: 16px;
}
.density--compact .iconbtn__dot {
  top: 5px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-width: 1.5px;
}
/* Button group */
.density--compact .btn-group {
  border-radius: var(--kcds-radius-8);
}
.density--compact .btn-group__item {
  padding: 6px var(--kcds-spacing-12);
  font-size: var(--kcds-text-body-s);
}
/* Inputs */
.density--compact .input {
/* height comes from the token */
  padding: 0 var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
}
.density--compact .input-group {
/* height comes from the token */
  padding: 0 10px;
  border-radius: var(--kcds-radius-8);
  gap: 6px;
}
.density--compact .input-group input {
  font-size: var(--kcds-text-body-s);
}
.density--compact .input-group svg {
  width: 14px;
  height: 14px;
}
.density--compact .textarea {
  min-height: 80px;
  padding: var(--kcds-spacing-8) var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
}
.density--compact .field {
  gap: 6px;
}
.density--compact .field__label {
  font-size: var(--kcds-text-body-s);
}
.density--compact .field__hint {
  font-size: var(--kcds-text-label);
}
/* Switch */
.density--compact .switch {
  width: 32px;
  height: 18px;
}
.density--compact .switch::after {
  width: 14px;
  height: 14px;
  top: 2px;
  left: 2px;
}
.density--compact .switch--on::after {
  transform: translateX(14px);
}
/* Checkbox / radio */
.density--compact .check {
  width: 16px;
  height: 16px;
  border-width: 1.5px;
  border-radius: var(--kcds-radius-4);
}
.density--compact .check svg {
  width: 10px;
  height: 10px;
}
.density--compact .check--indeterminate::after {
  width: 8px;
  height: 1.5px;
}
.density--compact .radio {
  width: 16px;
  height: 16px;
  border-width: 1.5px;
}
.density--compact .radio--on::after {
  width: 8px;
  height: 8px;
}
/* Status badges */
.density--compact .badge {
  padding: 2px var(--kcds-spacing-8);
  border-radius: var(--kcds-radius-4);
  font-size: var(--kcds-text-label);
  font-weight: 700;
}
.density--compact .badge svg {
  width: 11px;
  height: 11px;
}
/* Severity */
.density--compact .severity {
  padding: 2px 6px;
  font-size: var(--kcds-text-label);
}
/* Chip */
.density--compact .chip {
  padding: 3px 10px;
  font-size: var(--kcds-text-caption);
  gap: var(--kcds-spacing-4);
}
.density--compact .chip svg {
  width: 12px;
  height: 12px;
}
/* Progress */
.density--compact .progress__track {
  height: 6px;
}
.density--compact .progress__meta {
  font-size: var(--kcds-text-label);
}
.density--compact .progress-inline__track {
  height: 4px;
  width: 80px;
}
.density--compact .progress-inline__value {
  font-size: var(--kcds-text-label);
  min-width: 28px;
}
/* Alerts */
.density--compact .alert {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  border-radius: var(--kcds-radius-8);
  gap: var(--kcds-spacing-8);
}
.density--compact .alert svg.alert__icon {
  width: 16px;
  height: 16px;
}
.density--compact .alert__title {
  font-size: var(--kcds-text-body-s);
}
.density--compact .alert__sub {
  font-size: var(--kcds-text-caption);
}
/* Toast */
.density--compact .toast {
  padding: var(--kcds-spacing-8) var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  gap: var(--kcds-spacing-8);
}
.density--compact .toast svg {
  width: 14px;
  height: 14px;
}
/* AI panel */
.density--compact .ai-panel {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  border-radius: var(--kcds-radius-8);
  gap: var(--kcds-spacing-12);
}
.density--compact .ai-panel__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--kcds-radius-8);
}
.density--compact .ai-panel__icon svg {
  width: 14px;
  height: 14px;
}
.density--compact .ai-panel__title {
  font-size: var(--kcds-text-body-s);
}
.density--compact .ai-panel__sub {
  font-size: var(--kcds-text-caption);
}
/* Avatar */
.density--compact .avatar {
  width: 32px;
  height: 32px;
  font-size: var(--kcds-text-caption);
}
.density--compact .avatar--sm {
  width: 24px;
  height: 24px;
  font-size: var(--kcds-text-label);
}
.density--compact .avatar--lg {
  width: 40px;
  height: 40px;
  font-size: var(--kcds-text-body-s);
}
.density--compact .avatar--xl {
  width: 56px;
  height: 56px;
  font-size: var(--kcds-text-body-l);
}
/* KPI tile */
.density--compact .card-kpi {
  padding: var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  gap: var(--kcds-spacing-8);
  width: 200px;
}
.density--compact .card-kpi__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--kcds-radius-4);
}
.density--compact .card-kpi__icon svg {
  width: 14px;
  height: 14px;
}
.density--compact .card-kpi__label {
  font-size: var(--kcds-text-caption);
}
.density--compact .card-kpi__value {
  font-size: var(--kcds-text-h3);
}
.density--compact .card-kpi__trend {
  font-size: var(--kcds-text-label);
}
.density--compact .card-kpi__trend svg {
  width: 12px;
  height: 12px;
}
/* Table */
.density--compact .table {
  font-size: var(--kcds-text-body-s);
}
.density--compact .table th, .density--compact .table td {
  padding: 8px var(--kcds-spacing-12);
}
.density--compact .table th {
  font-size: var(--kcds-text-label);
}
.density--compact .cell-avatar {
  width: 24px;
  height: 24px;
  font-size: var(--kcds-text-label);
}
.density--compact .cell-name {
  gap: var(--kcds-spacing-8);
}
.density--compact .cell-name__main {
  font-size: var(--kcds-text-body-s);
}
.density--compact .cell-name__sub {
  font-size: var(--kcds-text-label);
}
/* Tabs */
.density--compact .tab {
  padding: 8px var(--kcds-spacing-12);
  font-size: var(--kcds-text-body-s);
}
/* Pagination */
.density--compact .pagination__btn {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--kcds-radius-4);
  font-size: var(--kcds-text-caption);
}
.density--compact .pagination__btn svg {
  width: 14px;
  height: 14px;
}
/* Modal */
.density--compact .modal {
  border-radius: var(--kcds-radius-8);
}
.density--compact .modal__head {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
}
.density--compact .modal__title {
  font-size: var(--kcds-text-h5);
}
.density--compact .modal__body {
  padding: var(--kcds-spacing-16);
  font-size: var(--kcds-text-body-s);
}
.density--compact .modal__foot {
  padding: var(--kcds-spacing-8) var(--kcds-spacing-16);
}
/* Tooltip */
.density--compact .tooltip {
  padding: 4px 8px;
  font-size: var(--kcds-text-label);
  border-radius: var(--kcds-radius-4);
}
/* Spinner / skeleton */
.density--compact .spinner {
  width: 18px;
  height: 18px;
  border-width: 2px;
}
.density--compact .spinner--sm {
  width: 12px;
  height: 12px;
  border-width: 1.5px;
}
.density--compact .spinner--lg {
  width: 28px;
  height: 28px;
  border-width: 3px;
}
.density--compact .skeleton--text {
  height: 10px;
}
.density--compact .skeleton--title {
  height: 14px;
}
.density--compact .skeleton--avatar {
  width: 32px;
  height: 32px;
}
.density--compact .skeleton--card {
  height: 100px;
}
/* Empty state */
.density--compact .empty {
  padding: var(--kcds-spacing-24) var(--kcds-spacing-16);
}
.density--compact .empty__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--kcds-spacing-12);
}
.density--compact .empty__icon svg {
  width: 18px;
  height: 18px;
}
.density--compact .empty__title {
  font-size: var(--kcds-text-h5);
}
.density--compact .empty__sub {
  font-size: var(--kcds-text-caption);
}
/* === Compact overrides for new components === */
/* Link */
.density--compact .link {
  font-size: var(--kcds-text-body-s);
}
.density--compact .link svg {
  width: 12px;
  height: 12px;
}
/* Number stepper */
.density--compact .input-stepper {
  border-radius: var(--kcds-radius-8);
  width: 110px;
}
.density--compact .input-stepper__btn {
  width: 28px;
}
.density--compact .input-stepper__btn svg {
  width: 12px;
  height: 12px;
}
.density--compact .input-stepper input {
  font-size: var(--kcds-text-body-s);
}
/* Password input */
.density--compact .password-input input {
  padding-right: 36px;
}
.density--compact .password-input__reveal {
  width: 24px;
  height: 24px;
  right: 6px;
}
.density--compact .password-input__reveal svg {
  width: 14px;
  height: 14px;
}
/* Datepicker */
.density--compact .datepicker {
  width: 240px;
  padding: var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
}
.density--compact .datepicker__title {
  font-size: var(--kcds-text-body-s);
}
.density--compact .datepicker__nav-btn {
  width: 22px;
  height: 22px;
}
.density--compact .datepicker__nav-btn svg {
  width: 12px;
  height: 12px;
}
.density--compact .datepicker__weekday {
  font-size: var(--kcds-text-label);
  padding: 2px 0;
}
.density--compact .datepicker__day {
  font-size: var(--kcds-text-label);
  border-radius: var(--kcds-radius-4);
}
/* File upload */
.density--compact .file-upload {
  padding: var(--kcds-spacing-20) var(--kcds-spacing-16);
  border-radius: var(--kcds-radius-8);
}
.density--compact .file-upload__icon {
  width: 36px;
  height: 36px;
  margin-bottom: var(--kcds-spacing-8);
}
.density--compact .file-upload__icon svg {
  width: 18px;
  height: 18px;
}
.density--compact .file-upload__title {
  font-size: var(--kcds-text-body-s);
}
.density--compact .file-upload__sub {
  font-size: var(--kcds-text-caption);
  margin-bottom: var(--kcds-spacing-8);
}
.density--compact .file-row {
  padding: 8px var(--kcds-spacing-8);
  border-radius: var(--kcds-radius-4);
  gap: var(--kcds-spacing-8);
}
.density--compact .file-row__icon {
  width: 28px;
  height: 28px;
  border-radius: var(--kcds-radius-4);
}
.density--compact .file-row__icon svg {
  width: 14px;
  height: 14px;
}
.density--compact .file-row__name {
  font-size: var(--kcds-text-caption);
}
.density--compact .file-row__meta {
  font-size: var(--kcds-text-label);
}
/* Rich text */
.density--compact .rte {
  border-radius: var(--kcds-radius-8);
}
.density--compact .rte__btn {
  width: 24px;
  height: 24px;
}
.density--compact .rte__btn svg {
  width: 14px;
  height: 14px;
}
.density--compact .rte__body {
  min-height: 80px;
  padding: var(--kcds-spacing-8) var(--kcds-spacing-12);
  font-size: var(--kcds-text-body-s);
}
/* Select / multiselect / segmented */
.density--compact .select {
  padding: 0 var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
}
.density--compact .select svg {
  width: 14px;
  height: 14px;
}
.density--compact .select-menu {
  padding: 4px;
  border-radius: var(--kcds-radius-8);
  min-width: 200px;
}
.density--compact .select-menu__item {
  padding: 6px 10px;
  font-size: var(--kcds-text-body-s);
  border-radius: var(--kcds-radius-4);
}
.density--compact .multiselect {
  padding: 4px 8px;
  border-radius: var(--kcds-radius-8);
  gap: var(--kcds-spacing-4);
}
.density--compact .multiselect__tag {
  font-size: var(--kcds-text-caption);
  padding: 2px 4px 2px 8px;
}
.density--compact .multiselect__tag-close {
  width: 14px;
  height: 14px;
}
.density--compact .multiselect__tag-close svg {
  width: 10px;
  height: 10px;
}
.density--compact .multiselect input {
  font-size: var(--kcds-text-body-s);
}
.density--compact .segmented {
  padding: 2px;
  border-radius: var(--kcds-radius-8);
}
.density--compact .segmented__item {
  padding: 4px var(--kcds-spacing-12);
  font-size: var(--kcds-text-body-s);
  border-radius: var(--kcds-radius-4);
}
/* Sensitivity / AI mark / count */
.density--compact .sensitivity {
  padding: 2px 8px;
  font-size: var(--kcds-text-label);
}
.density--compact .sensitivity svg {
  width: 10px;
  height: 10px;
}
.density--compact .badge--ai-mark {
  padding: 1px 6px;
  font-size: var(--kcds-text-label);
}
.density--compact .badge-count {
  min-width: 16px;
  height: 16px;
  font-size: var(--kcds-text-caption);
  padding: 0 4px;
}
/* Card */
.density--compact .card {
  padding: var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  gap: var(--kcds-spacing-8);
}
.density--compact .card__title {
  font-size: var(--kcds-text-body-s);
}
.density--compact .card__sub {
  font-size: var(--kcds-text-caption);
}
.density--compact .card__body {
  font-size: var(--kcds-text-caption);
}
/* List row */
.density--compact .list-row {
  padding: 8px var(--kcds-spacing-12);
  gap: var(--kcds-spacing-12);
}
.density--compact .list-row__title {
  font-size: var(--kcds-text-body-s);
}
.density--compact .list-row__sub {
  font-size: var(--kcds-text-label);
}
/* Key-value */
.density--compact .kv {
  grid-template-columns: 120px 1fr;
  padding: 6px 0;
  font-size: var(--kcds-text-caption);
  gap: var(--kcds-spacing-12);
}
/* Stat */
.density--compact .stat__value {
  font-size: 28px;
}
.density--compact .stat__value--display {
  font-size: 40px;
}
.density--compact .stat__label {
  font-size: var(--kcds-text-label);
}
/* Inline message */
.density--compact .inline-msg {
  font-size: var(--kcds-text-label);
}
.density--compact .inline-msg svg {
  width: 10px;
  height: 10px;
}
/* Error state */
.density--compact .error-state {
  padding: var(--kcds-spacing-24) var(--kcds-spacing-16);
}
.density--compact .error-state__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--kcds-spacing-12);
}
.density--compact .error-state__icon svg {
  width: 18px;
  height: 18px;
}
.density--compact .error-state__title {
  font-size: var(--kcds-text-h5);
}
.density--compact .error-state__sub {
  font-size: var(--kcds-text-caption);
}
/* Breadcrumbs */
.density--compact .breadcrumbs {
  font-size: var(--kcds-text-caption);
}
.density--compact .breadcrumbs svg.breadcrumbs__sep {
  width: 10px;
  height: 10px;
}
/* Side nav */
.density--compact .sidenav {
  width: 200px;
  padding: var(--kcds-spacing-8);
  border-radius: var(--kcds-radius-8);
}
.density--compact .sidenav__group-title {
  padding: 4px 8px 2px;
  font-size: var(--kcds-text-label);
}
.density--compact .sidenav__item {
  padding: 5px 8px;
  font-size: var(--kcds-text-caption);
  border-radius: var(--kcds-radius-4);
  gap: var(--kcds-spacing-8);
}
.density--compact .sidenav__item svg {
  width: 14px;
  height: 14px;
}
.density--compact .sidenav__item-count {
  font-size: var(--kcds-text-label);
  height: 14px;
  min-width: 16px;
}
.density--compact .sidenav__item--active::before {
  left: -8px;
  top: 4px;
  bottom: 4px;
  width: 2px;
}
/* Top nav sample */
.density--compact .topnav-sample {
  padding: 6px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  gap: var(--kcds-spacing-12);
}
.density--compact .topnav-sample__brand {
  font-size: var(--kcds-text-caption);
  gap: 6px;
}
.density--compact .topnav-sample__brand-mark {
  width: 20px;
  height: 20px;
}
/* Menu */
.density--compact .menu {
  padding: 4px;
  border-radius: var(--kcds-radius-8);
  min-width: 180px;
}
.density--compact .menu__item {
  padding: 6px 10px;
  font-size: var(--kcds-text-body-s);
  border-radius: var(--kcds-radius-4);
  gap: var(--kcds-spacing-8);
}
.density--compact .menu__item svg {
  width: 14px;
  height: 14px;
}
.density--compact .menu__shortcut {
  font-size: var(--kcds-text-label);
}
.density--compact .menu__label {
  padding: 4px 10px 2px;
  font-size: var(--kcds-text-label);
}
/* Back button */
.density--compact .back-btn {
  padding: 4px 8px;
  font-size: var(--kcds-text-caption);
  border-radius: var(--kcds-radius-4);
}
.density--compact .back-btn svg {
  width: 14px;
  height: 14px;
}
/* Stepper */
.density--compact .stepper__step {
  padding: 8px var(--kcds-spacing-12);
  gap: 6px;
}
.density--compact .stepper__num {
  width: 22px;
  height: 22px;
  font-size: var(--kcds-text-label);
}
.density--compact .stepper__label-title {
  font-size: var(--kcds-text-caption);
}
.density--compact .stepper__label-sub {
  font-size: var(--kcds-text-caption);
}
/* Drawer */
.density--compact .drawer {
  width: 320px;
}
.density--compact .drawer__head {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
}
.density--compact .drawer__title {
  font-size: var(--kcds-text-body-s);
}
.density--compact .drawer__body {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  font-size: var(--kcds-text-caption);
}
.density--compact .drawer__foot {
  padding: 8px var(--kcds-spacing-16);
}
/* Popover */
.density--compact .popover {
  padding: var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  width: 280px;
}
.density--compact .popover__title {
  font-size: var(--kcds-text-body-s);
}
.density--compact .popover__body {
  font-size: var(--kcds-text-caption);
}
/* Sheet */
.density--compact .sheet {
  border-radius: var(--kcds-radius-16) var(--kcds-radius-16) 0 0;
  max-width: 320px;
}
.density--compact .sheet__head {
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
}
.density--compact .sheet__title {
  font-size: var(--kcds-text-body-s);
}
.density--compact .sheet__body {
  padding: var(--kcds-spacing-16);
  font-size: var(--kcds-text-caption);
}
.density--compact .sheet__foot {
  padding: 8px var(--kcds-spacing-16);
}
/* Chat */
.density--compact .chat {
  padding: var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  gap: var(--kcds-spacing-12);
}
.density--compact .msg {
  gap: var(--kcds-spacing-8);
}
.density--compact .msg__avatar {
  width: 24px;
  height: 24px;
  font-size: var(--kcds-text-label);
}
.density--compact .msg__bubble {
  padding: 8px var(--kcds-spacing-12);
  font-size: var(--kcds-text-caption);
  border-radius: var(--kcds-radius-8);
}
.density--compact .msg__meta {
  font-size: var(--kcds-text-caption);
}
.density--compact .citation {
  padding: 2px 6px;
  font-size: var(--kcds-text-caption);
}
.density--compact .citation__num {
  width: 14px;
  height: 14px;
  font-size: var(--kcds-text-label);
}
.density--compact .suggested-chip {
  padding: 4px 10px;
  font-size: var(--kcds-text-label);
}
/* Compact — Opinion scales / Rating (v1.0) */
.density--compact .opinion-scale__question {
  font-size: var(--kcds-text-body-s);
}
.density--compact .opinion-scale__instruction {
  font-size: var(--kcds-text-label);
  margin-bottom: 8px;
}
.density--compact .opinion-scale {
  gap: var(--kcds-spacing-4);
}
.density--compact .opinion-scale__option {
  height: 32px;
  min-width: 32px;
  font-size: var(--kcds-text-caption);
  border-radius: var(--kcds-radius-4);
}
.density--compact .opinion-scale__option--smiley {
  font-size: var(--kcds-text-body-m);
}
.density--compact .opinion-scale__anchors {
  font-size: var(--kcds-text-caption);
  margin-top: 4px;
}
.density--compact .kcds-rating__prompt {
  font-size: var(--kcds-text-caption);
  margin-bottom: 4px;
}
.density--compact .kcds-rating__value {
  font-size: var(--kcds-text-caption);
}
.density--compact .kcds-rating__count {
  font-size: var(--kcds-text-caption);
}
.density--compact .kcds-rating__stars {
  gap: var(--kcds-spacing-4);
}
.density--compact .kcds-rating__star svg {
  width: 16px;
  height: 16px;
}
.density--compact .kcds-rating--lg .kcds-rating__star svg {
  width: 24px;
  height: 24px;
}
.density--compact .kcds-rating--sm .kcds-rating__star svg {
  width: 14px;
  height: 14px;
}
/* state-grid label inside compact column */
.density--compact .state-grid__label {
  font-size: var(--kcds-text-caption);
  padding: 12px 16px;
}
.density--compact .state-grid__label strong {
  font-size: var(--kcds-text-caption);
}
.density--compact .state-grid__demo {
  padding: 12px 16px;
  gap: var(--kcds-spacing-8);
}
/* Compact — Date range */
.density--compact .daterange {
  padding: var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  gap: var(--kcds-spacing-8);
}
.density--compact .daterange__presets {
  min-width: 110px;
  padding-right: 8px;
}
.density--compact .daterange__preset {
  padding: 4px 8px;
  font-size: var(--kcds-text-caption);
  border-radius: var(--kcds-radius-4);
}
.density--compact .daterange__cal {
  min-width: 0;
  flex-basis: 180px;
}
/* Compact — Autocomplete */
.density--compact .autocomplete__menu {
  padding: 4px;
  border-radius: var(--kcds-radius-8);
  margin-top: 2px;
}
.density--compact .autocomplete__item {
  padding: 5px 8px;
  gap: var(--kcds-spacing-8);
  border-radius: var(--kcds-radius-4);
}
.density--compact .autocomplete__item-title {
  font-size: var(--kcds-text-caption);
}
.density--compact .autocomplete__item-sub {
  font-size: var(--kcds-text-caption);
}
.density--compact .autocomplete__hint {
  font-size: var(--kcds-text-label);
  padding: 3px 8px;
}
.density--compact .autocomplete__empty {
  font-size: var(--kcds-text-caption);
  padding: 8px 12px;
}
/* Compact — Confirm card */
.density--compact .confirm-card {
  border-radius: var(--kcds-radius-8);
}
.density--compact .confirm-card__head {
  padding: 8px var(--kcds-spacing-12);
}
.density--compact .confirm-card__title {
  font-size: var(--kcds-text-caption);
}
.density--compact .confirm-card__body {
  padding: 8px var(--kcds-spacing-12);
}
.density--compact .confirm-card__row {
  grid-template-columns: 80px 1fr;
  padding: 2px 0;
  font-size: var(--kcds-text-label);
}
.density--compact .confirm-card__foot {
  padding: 6px var(--kcds-spacing-12);
}
/* Compact — Voice bar */
.density--compact .voice-bar {
  padding: 4px 8px;
  gap: 6px;
}
.density--compact .voice-bar__mic, .density--compact .voice-bar__send {
  width: 24px;
  height: 24px;
}
.density--compact .voice-bar__mic svg, .density--compact .voice-bar__send svg {
  width: 14px;
  height: 14px;
}
.density--compact .voice-bar__input {
  font-size: var(--kcds-text-body-s);
}
.density--compact .voice-waveform {
  height: 14px;
}
/* Compact — Refusal */
.density--compact .refusal {
  padding: 8px var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
}
.density--compact .refusal__head {
  font-size: var(--kcds-text-caption);
  gap: 6px;
  margin-bottom: 6px;
}
.density--compact .refusal__head svg {
  width: 14px;
  height: 14px;
}
.density--compact .refusal__list {
  font-size: var(--kcds-text-caption);
  line-height: 1.6;
}
.density--compact .refusal__sub {
  font-size: var(--kcds-text-caption);
}
/* Compact — Resume banner */
.density--compact .resume-banner {
  padding: 4px 10px;
  font-size: var(--kcds-text-caption);
  gap: 6px;
}
.density--compact .resume-banner svg {
  width: 12px;
  height: 12px;
}
/* Compact — Export dialog (rows) */
.density--compact .export-rows {
  gap: var(--kcds-spacing-12);
}
.density--compact .export-row {
  font-size: var(--kcds-text-caption);
  gap: var(--kcds-spacing-8);
}
.density--compact .export-row__label {
  min-width: 56px;
}
/* Compact — Clarification chips */
.density--compact .clarify__chip {
  padding: 5px 10px;
  font-size: var(--kcds-text-caption);
  border-radius: var(--kcds-radius-4);
}
.density--compact .clarify__chip svg {
  width: 12px;
  height: 12px;
}
.density--compact .clarify__or {
  font-size: var(--kcds-text-caption);
}
/* ============================================================
       Mobile sticky header — hamburger + logo + name
       Hidden on desktop, shown on tablet/mobile
       ============================================================ */
.mobile-header {
  display: none;
  position: sticky;
  top: 0;
  z-index: 50;
  align-items: center;
  gap: var(--kcds-spacing-12);
  height: 56px;
  padding: 0 var(--kcds-spacing-12);
  background: var(--kcds-color-surface-default);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.mobile-header__burger {
  width: 40px;
  height: 40px;
  border-radius: var(--kcds-radius-8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kcds-color-text-primary);
  flex-shrink: 0;
}
.mobile-header__burger:hover,
    .mobile-header__burger:focus-visible {
  background: var(--kcds-color-surface-canvas);
}
.mobile-header__burger svg {
  width: 22px;
  height: 22px;
}
.mobile-header__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  min-width: 0;
  flex: 1;
}
.mobile-header__logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: block;
}
.mobile-header__logo svg {
  width: 100%;
  height: 100%;
  display: block;
}
.mobile-header__title {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.mobile-nav-backdrop {
  display: none;
  position: fixed;
  inset: 56px 0 0 0;
/* below the 56px header — header stays visible */
  background: rgba(15, 20, 25, 0.5);
  z-index: 60;
  opacity: 0;
  transition: opacity 200ms ease;
}
.mobile-nav-backdrop.is-open {
  opacity: 1;
}
/* Close button INSIDE drawer — appears on mobile/tablet only, sits at top */
.mobile-nav-close {
  display: none;
  align-self: flex-end;
  width: 36px;
  height: 36px;
  border-radius: var(--kcds-radius-full);
  align-items: center;
  justify-content: center;
  color: var(--kcds-color-text-tertiary);
  margin: 0 var(--kcds-spacing-8) var(--kcds-spacing-8) auto;
  flex-shrink: 0;
}
.mobile-nav-close:hover {
  background: var(--kcds-color-surface-canvas);
  color: var(--kcds-color-text-primary);
}
.mobile-nav-close svg {
  width: 20px;
  height: 20px;
}
/* ============================================================
       Choice tiles (single-select tile group) — 06-components/selection.md
       One component, recoloured per group via --tile-accent/--tile-tint/--tile-on.
       ============================================================ */
.choicegrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--kcds-spacing-12);
/* NO overflow:hidden — it would clip the outer selection ring */
}
.choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--kcds-spacing-8);
  min-height: 88px;
  padding: var(--kcds-spacing-16) var(--kcds-spacing-12);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-12);
  cursor: pointer;
  text-align: center;
  transition: border-color .12s ease, background .12s ease;
}
/* Native radio kept in the tab order — never display:none */
.choice input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.choice:hover {
  border-color: var(--tile-accent);
}
.choice__icon {
  color: var(--kcds-color-text-tertiary);
  display: grid;
  place-items: center;
}
.choice__icon svg {
  width: 20px;
  height: 20px;
}
.choice__t {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.choice__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--kcds-radius-full);
  background: var(--tile-accent);
}
.choice:has(input:checked) {
  border-color: var(--tile-accent);
  background: var(--tile-tint);
  box-shadow: 0 0 0 1px var(--tile-accent);
/* outer ring — never inset, never clipped */
}
.choice:has(input:checked) .choice__t,
    .choice:has(input:checked) .choice__icon {
  color: var(--tile-on);
}
.choice:has(input:focus-visible) {
  outline: 2px solid var(--kcds-color-border-focus);
  outline-offset: 2px;
}
/* Preset B — severity / traffic-light. Always a TINT, never a solid fill. */
.density--compact .choice {
  min-height: 72px;
  padding: var(--kcds-spacing-12) var(--kcds-spacing-8);
  border-radius: var(--kcds-radius-8);
}
/* ============================================================
       Signature pad — 06-components/signature-pad.md
       ============================================================ */
.sigpad {
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-8);
}
.sigpad__label {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
}
.sigpad__surface {
  position: relative;
  min-height: 160px;
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-12);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.sigpad__placeholder {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  color: var(--kcds-color-text-tertiary);
  font-size: var(--kcds-text-body-s);
}
.sigpad__placeholder svg {
  width: 16px;
  height: 16px;
}
.sigpad__baseline {
  position: absolute;
  inset-inline: 24px;
  top: 75%;
  border-top: 1px solid var(--kcds-color-border-subtle);
}
.sigpad__mark {
  font-family: 'Segoe Script','Brush Script MT',cursive;
  font-size: 30px;
/* handwriting render, not UI type — exempt from the scale, like the logo */
  color: var(--kcds-color-text-primary);
}
.sigpad__attest {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  line-height: 1.5;
}
.sigpad__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcds-spacing-12);
  flex-wrap: wrap;
}
.sigpad__seal {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
.sigpad__seal svg {
  width: 14px;
  height: 14px;
}
/* Submitted & locked — hands off to tamper-proof-records.md */
.sigpad[data-state="locked"] .sigpad__surface {
  background: var(--kcds-color-surface-subtle);
  border-style: solid;
}
/* ============================================================
       Timeline — 06-components/timeline.md
       Event TYPE is encoded by shape (dot / bar / rule), never by status colour.
       ============================================================ */
.tl {
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  padding: var(--kcds-spacing-16);
}
.tl__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcds-spacing-12);
  margin-bottom: var(--kcds-spacing-12);
  flex-wrap: wrap;
}
.tl__window {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.tl__pan {
  display: flex;
  gap: var(--kcds-spacing-4);
}
.tl__body {
  position: relative;
  background: var(--kcds-color-surface-subtle);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-8);
  padding: var(--kcds-spacing-16) var(--kcds-spacing-16) 0;
  overflow: hidden;
}
.tl__track {
  position: relative;
  height: 132px;
}
/* Gridlines sit under everything and line up with the axis ticks */
.tl__grid {
  position: absolute;
  inset: 0 0 26px;
  pointer-events: none;
}
.tl__gridline {
  position: absolute;
  top: 0;
  bottom: 0;
  border-inline-start: 1px solid var(--kcds-color-border-subtle);
}
.tl__axis {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 26px;
  border-top: 1px solid var(--kcds-color-border-default);
}
.tl__tick {
  position: absolute;
  top: var(--kcds-spacing-4);
  transform: translateX(-50%);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.tl__tick--edge {
  transform: none;
}
.tl__tick--edge-end {
  transform: translateX(-100%);
}
.tl__lane {
  position: absolute;
  inset-inline: 0;
}
/* Milestone — a point. Dot + stem to the axis + label. */
.tl__milestone {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kcds-spacing-4);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
}
.tl__milestone::before {
  content: '';
  width: 11px;
  height: 11px;
  border-radius: var(--kcds-radius-full);
  background: var(--kcds-color-primary);
  box-shadow: 0 0 0 3px var(--kcds-color-surface-default);
  flex-shrink: 0;
}
.tl__milestone::after {
  content: '';
  position: absolute;
  top: 11px;
  bottom: -14px;
  border-inline-start: 1px dashed var(--kcds-color-border-default);
}
.tl__milestone span {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-primary);
  white-space: nowrap;
  background: var(--kcds-color-surface-subtle);
  padding: 0 var(--kcds-spacing-4);
  position: relative;
}
.tl__milestone:hover::before,
    .tl__milestone:focus-visible::before {
  box-shadow: 0 0 0 3px var(--kcds-color-surface-default), 0 0 0 5px var(--kcds-color-primary-fill);
}
/* Range — a bar. Label rides inside when it fits. */
.tl__range {
  position: absolute;
  height: 26px;
  border-radius: var(--kcds-radius-8);
  background: var(--kcds-color-primary-fill);
  border: 1px solid var(--kcds-color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 0 var(--kcds-spacing-8);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-on-primary-tint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 6px;
}
.tl__range:hover, .tl__range:focus-visible {
  background: var(--kcds-color-primary-tint);
}
/* Marker — a rule. Not an event. */
.tl__marker {
  position: absolute;
  top: 0;
  bottom: 26px;
  border-inline-start: 2px dashed var(--kcds-color-primary);
}
.tl__marker span {
  position: absolute;
  bottom: -1px;
  inset-inline-start: var(--kcds-spacing-4);
  font-size: var(--kcds-text-label);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--kcds-color-on-primary-tint);
  background: var(--kcds-color-primary-tint);
  border-radius: var(--kcds-radius-4);
  padding: 1px var(--kcds-spacing-4);
  font-weight: 700;
}
/* Empty window — a granularity can legitimately hold no events */
.tl__empty {
  position: absolute;
  inset: 0 0 26px;
  display: grid;
  place-items: center;
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-tertiary);
}
/* ============================================================
       Gantt — 06-components/gantt.md
       Two panes: pinned task column + date-axis track. Critical path is
       EMPHASIS (accent), never status-red.
       ============================================================ */
.gantt {
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
  overflow: hidden;
}
.gantt__row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  align-items: center;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.gantt__row:last-child {
  border-bottom: none;
}
.gantt__row--head {
  background: var(--kcds-color-surface-subtle);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-secondary);
}
.gantt__name {
  padding: var(--kcds-spacing-8) var(--kcds-spacing-12);
  font-size: var(--kcds-text-body-s);
  border-inline-end: 1px solid var(--kcds-color-border-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gantt__track {
  position: relative;
  height: 40px;
}
.gantt__scale {
  display: flex;
  justify-content: space-between;
  padding: var(--kcds-spacing-8) var(--kcds-spacing-12);
}
.gantt__bar {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 24px;
  border-radius: var(--kcds-radius-8);
  background: var(--kcds-color-primary-fill);
  border: 1px solid var(--kcds-color-primary);
  display: flex;
  align-items: center;
  padding: 0 var(--kcds-spacing-8);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-on-primary-tint);
  cursor: pointer;
}
.gantt__bar[data-critical="true"] {
  background: var(--kcds-color-primary);
  border-color: var(--kcds-color-primary-active);
  color: var(--kcds-color-on-primary);
}
.gantt__today {
  position: absolute;
  top: 0;
  bottom: 0;
  border-inline-start: 2px dashed var(--kcds-color-primary);
}
/* ============================================================
       9-box grid — 06-components/nine-box.md
       X = Performance (low→high, left→right) · Y = Potential (low→high, bottom→top).
       Fixed orientation — never transposed. Tints use the -bg status tokens only.
       ============================================================ */
.ninebox {
  display: grid;
  grid-template-columns: 20px 28px repeat(3, minmax(0, 1fr));
  gap: var(--kcds-spacing-4);
}
.ninebox__ytitle {
  grid-row: 1 / 4;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  display: grid;
  place-items: center;
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  color: var(--kcds-color-text-secondary);
}
.ninebox__ytick, .ninebox__xtick {
  display: grid;
  place-items: center;
  font-size: var(--kcds-text-label);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--kcds-color-text-tertiary);
}
.ninebox__ytick {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}
.ninebox__cell {
  min-height: 74px;
  padding: var(--kcds-spacing-8);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
/* borders stay NEUTRAL */
  border-radius: var(--kcds-radius-8);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--kcds-spacing-4);
}
.ninebox__cell--green {
  background: var(--kcds-color-status-success-bg);
}
.ninebox__cell--amber {
  background: var(--kcds-color-status-warning-bg);
}
.ninebox__cell--act {
  background: var(--kcds-color-status-error-bg);
}
.ninebox__seg {
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  line-height: 1.3;
}
.ninebox__count {
  font-size: var(--kcds-text-h4);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ninebox__xtitle {
  grid-column: 3 / 6;
  text-align: center;
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  color: var(--kcds-color-text-secondary);
  padding-top: var(--kcds-spacing-4);
}
.ninebox__spacer {
  grid-column: 1 / 3;
}
.ninebox-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kcds-spacing-16);
  margin-top: var(--kcds-spacing-12);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-secondary);
}
.ninebox-legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
}
.ninebox-legend i {
  width: 12px;
  height: 12px;
  border-radius: var(--kcds-radius-4);
  border: 1px solid var(--kcds-color-border-subtle);
}
/* ============================================================
       Per-field translations expander — 06-components/inputs.md
       ============================================================ */
.i18n-field {
  max-width: 420px;
}
.i18n-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  padding: var(--kcds-spacing-4) 0;
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-link);
  font-weight: 700;
}
.i18n-toggle svg {
  width: var(--kcds-icon-sm);
  height: var(--kcds-icon-sm);
}
.i18n-toggle__caret {
  transition: transform var(--kcds-duration-fast) var(--kcds-ease-out);
}
.i18n-toggle[aria-expanded="true"] .i18n-toggle__caret {
  transform: rotate(180deg);
}
.i18n-rows {
  display: flex;
  flex-direction: column;
  gap: var(--kcds-spacing-8);
  padding: var(--kcds-spacing-12);
  background: var(--kcds-color-surface-subtle);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
}
.i18n-rows[hidden] {
  display: none;
}
.i18n-row {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
}
.i18n-row__locale {
  flex: 0 0 96px;
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
.i18n-row .input {
  flex: 1;
  min-width: 0;
  height: 40px;
  font-size: var(--kcds-text-body-s);
}
.i18n-row__remove {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--kcds-radius-8);
  color: var(--kcds-color-text-tertiary);
}
.i18n-row__remove:hover {
  background: var(--kcds-color-surface-hover);
  color: var(--kcds-color-text-primary);
}
.i18n-row__remove svg {
  width: var(--kcds-icon-sm);
  height: var(--kcds-icon-sm);
}
.i18n-add {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
  font-size: var(--kcds-text-body-s);
  color: var(--kcds-color-text-link);
  font-weight: 700;
}
.i18n-add svg {
  width: var(--kcds-icon-sm);
  height: var(--kcds-icon-sm);
}
/* ============================================================
       Streaming cursor — 06-components/conversational-ui.md
       ============================================================ */
.stream-cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  vertical-align: text-bottom;
  background: var(--kcds-color-ai-suggestion);
  animation: kcds-blink 600ms steps(2, start) infinite;
}
@keyframes kcds-blink {
to {
  visibility: hidden;
}
}
@media (prefers-reduced-motion: reduce) {
.stream-cursor {
  animation: none;
}
}
/* ============================================================
       Charts — 06-components/data-display.md "CHARTS"
       ============================================================ */
.chartdemo {
  display: flex;
  align-items: flex-end;
  gap: var(--kcds-spacing-12);
  height: 140px;
  padding: var(--kcds-spacing-16);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-12);
}
.chartdemo__col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--kcds-spacing-4);
  height: 100%;
}
.chartdemo__track {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: var(--kcds-color-track-bg);
/* the track is ALWAYS drawn */
  border-radius: var(--kcds-radius-4);
  overflow: hidden;
}
.chartdemo__track--notrack {
  background: transparent;
}
.chartdemo__bar {
  width: 100%;
  background: var(--kcds-color-primary);
  border-radius: var(--kcds-radius-4) var(--kcds-radius-4) 0 0;
}
.chartdemo__lbl {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-secondary);
  font-variant-numeric: tabular-nums;
}
.chart-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--kcds-spacing-16);
  margin-top: var(--kcds-spacing-12);
}
.chart-compare__cap {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  margin-bottom: var(--kcds-spacing-8);
}
.chart-compare__cap--bad {
  color: var(--kcds-color-status-error-on-tint);
}
.chart-compare__cap--good {
  color: var(--kcds-color-status-success-on-tint);
}
.ramp-demo {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-radius: var(--kcds-radius-8);
  overflow: hidden;
  margin-top: var(--kcds-spacing-8);
}
.ramp-demo div {
  height: 40px;
  display: grid;
  place-items: center;
  font-size: var(--kcds-text-caption);
  font-weight: 700;
  color: var(--kcds-gray-950);
/* fixed ink: the swatches are fixed light colours in both themes */
}
/* TABLET + MOBILE: TOC becomes off-canvas drawer */
/* ============================================================
       HERO — the page's front door
       ============================================================ */
/* No decorative wash here, deliberately.
       Two attempts failed the same way: a radial blob large enough to read as
       atmosphere is always wider than the block that holds it, so it gets cut
       at an edge while still near full strength — once by `overflow: hidden`
       on an outside-positioned circle, once by the element box itself. Sizing
       it to fade out inside all four edges shrinks it to a visible spot, which
       is worse. The hero already carries its identity through real content:
       the logo mark, the suite chips in their own accents, and the primary
       search action. Colour is a budget — this block does not need to spend
       any more of it. */
.hero {
  position: relative;
  padding: var(--kcds-spacing-48) 0 var(--kcds-spacing-40);
  margin-bottom: var(--kcds-spacing-32);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.hero__top {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-16);
  margin-bottom: var(--kcds-spacing-24);
}
.hero__mark {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.hero__mark svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hero__org {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero__org-name {
  font-size: var(--kcds-text-body-l);
  font-weight: 700;
  line-height: 1.2;
}
.hero__org-sub {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
}
.hero__title {
  font-size: var(--kcds-text-h1);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: var(--kcds-spacing-16);
  max-width: 20ch;
}
.hero__lede {
  font-size: var(--kcds-text-body-l);
  line-height: 1.6;
  color: var(--kcds-color-text-secondary);
  max-width: 62ch;
  margin-bottom: var(--kcds-spacing-32);
}
.hero__lede strong {
  color: var(--kcds-color-text-primary);
  font-weight: 700;
}
/* Suite strip — the three accents, live */
.hero__suites {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kcds-spacing-8);
  margin-bottom: var(--kcds-spacing-32);
}
.hero__suite {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  padding: var(--kcds-spacing-8) var(--kcds-spacing-12);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-full);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
  text-decoration: none;
  min-height: 36px;
}
/* Each chip carries its own data-kcds-product-category, so it hovers in its own
       suite accent — the mechanic demonstrating itself. */
.hero__suite:hover {
  border-color: var(--kcds-color-primary);
  background: var(--kcds-color-primary-tint);
}
.hero__suite i {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  border-radius: var(--kcds-radius-full);
}
.hero__suite span {
  font-weight: 400;
  color: var(--kcds-color-text-tertiary);
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-label);
}
/* Facts */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--kcds-spacing-16);
  padding-top: var(--kcds-spacing-24);
  border-top: 1px solid var(--kcds-color-border-subtle);
}
.hero__fact {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hero__fact-value {
  font-size: var(--kcds-text-h3);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hero__fact-label {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
@media (max-width: 767px) {
.hero {
  padding-top: var(--kcds-spacing-32);
}
.hero__title {
  font-size: var(--kcds-text-h2);
  max-width: none;
}
.hero__lede {
  font-size: var(--kcds-text-body-m);
}
}
/* Quick jumps — the entries people actually open */
.hero__jump {
  margin-bottom: var(--kcds-spacing-32);
}
.hero__jump-label {
  display: block;
  font-size: var(--kcds-text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kcds-color-text-tertiary);
  margin-bottom: var(--kcds-spacing-12);
}
.hero__jump-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kcds-spacing-8);
}
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  min-height: 36px;
  padding: 0 var(--kcds-spacing-12);
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-8);
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
  text-decoration: none;
}
.hero__chip:hover {
  border-color: var(--kcds-color-primary);
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
}
.hero__chip svg {
  width: var(--kcds-icon-sm);
  height: var(--kcds-icon-sm);
  color: var(--kcds-color-text-tertiary);
  flex-shrink: 0;
}
.hero__chip:hover svg {
  color: currentColor;
}
.hero__chip--search {
  border-color: var(--kcds-color-primary);
  background: var(--kcds-color-primary);
  color: var(--kcds-color-on-primary);
}
.hero__chip--search svg {
  color: currentColor;
}
.hero__chip--search:hover {
  background: var(--kcds-color-primary-hover);
  color: var(--kcds-color-on-primary);
}
/* ============================================================
       v4 — DOC NAVIGATION SHELL
       Command palette, collapsible TOC, copy affordances, shortcuts.
       All chrome is built from KCDS tokens — the doc dogfoods the system.
       ============================================================ */
.toc__search {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  width: 100%;
  height: 36px;
  padding: 0 var(--kcds-spacing-12);
  margin-bottom: var(--kcds-spacing-16);
  background: var(--kcds-color-surface-subtle);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-8);
  color: var(--kcds-color-text-tertiary);
  font-size: var(--kcds-text-body-s);
  text-align: start;
  cursor: pointer;
}
.toc__search:hover {
  border-color: var(--kcds-color-border-default);
  color: var(--kcds-color-text-primary);
}
.toc__search svg {
  width: var(--kcds-icon-sm);
  height: var(--kcds-icon-sm);
  flex-shrink: 0;
}
.toc__search-label {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
kbd {
  font-family: var(--doc-mono);
  font-size: var(--kcds-text-label);
  line-height: 1;
  padding: 3px 5px;
  background: var(--kcds-color-surface-default);
  border: 1px solid var(--kcds-color-border-default);
  border-bottom-width: 2px;
  border-radius: var(--kcds-radius-4);
  color: var(--kcds-color-text-tertiary);
  white-space: nowrap;
}
/* --- Collapsible TOC groups --- */
.toc__group-toggle {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
  width: 100%;
  padding: var(--kcds-spacing-4) 0;
  color: var(--kcds-color-text-tertiary);
  font-size: var(--kcds-text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: start;
}
.toc__group-toggle:hover {
  color: var(--kcds-color-text-primary);
}
.toc__group-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform var(--kcds-duration-fast) var(--kcds-ease-out);
}
.toc__group-count {
  margin-inline-start: auto;
  font-size: var(--kcds-text-label);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--kcds-color-text-disabled);
  font-variant-numeric: tabular-nums;
}
.toc__group.is-collapsed .toc__group-caret {
  transform: rotate(-90deg);
}
.toc__group.is-collapsed .toc__link {
  display: none;
}
/* A collapsed group still shows the section you are currently reading */
.toc__group.is-collapsed .toc__link--active {
  display: block;
  opacity: .75;
}
/* --- Command palette --- */
.cmdk {
  position: fixed;
  inset: 0;
  z-index: 400;
}
.cmdk[hidden] {
  display: none;
}
.cmdk__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31,32,35,.45);
}
.cmdk__panel {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 96px));
  margin: 72px auto 0;
  display: flex;
  flex-direction: column;
  background: var(--kcds-color-surface-elevated);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-16);
  box-shadow: var(--kcds-shadow-lg);
  overflow: hidden;
}
.cmdk__search {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
  padding: 0 var(--kcds-spacing-16);
  height: 52px;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  flex-shrink: 0;
}
.cmdk__search > svg {
  width: var(--kcds-icon-md);
  height: var(--kcds-icon-md);
  color: var(--kcds-color-text-tertiary);
  flex-shrink: 0;
}
.cmdk__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  outline: none;
  font-family: inherit;
  font-size: var(--kcds-text-body-m);
  color: var(--kcds-color-text-primary);
}
.cmdk__input::placeholder {
  color: var(--kcds-color-text-tertiary);
}
.cmdk__list {
  flex: 1;
  overflow-y: auto;
  margin: 0;
  padding: var(--kcds-spacing-8);
  list-style: none;
}
.cmdk__item {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-12);
  padding: var(--kcds-spacing-8) var(--kcds-spacing-12);
  border-radius: var(--kcds-radius-8);
  cursor: pointer;
  min-height: 44px;
}
.cmdk__item[aria-selected="true"] {
  background: var(--kcds-color-primary-tint);
}
.cmdk__item-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--kcds-radius-8);
  background: var(--kcds-color-surface-subtle);
  color: var(--kcds-color-text-tertiary);
}
.cmdk__item[aria-selected="true"] .cmdk__item-icon {
  background: var(--kcds-color-surface-default);
  color: var(--kcds-color-text-link);
}
.cmdk__item-icon svg {
  width: 14px;
  height: 14px;
}
.cmdk__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cmdk__item-title {
  font-size: var(--kcds-text-body-s);
  font-weight: 700;
  color: var(--kcds-color-text-primary);
}
.cmdk__item-title mark {
  background: var(--kcds-color-primary-fill);
  color: inherit;
  border-radius: 2px;
  padding: 0 1px;
}
.cmdk__item-group {
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
}
.cmdk__empty {
  padding: var(--kcds-spacing-32) var(--kcds-spacing-16);
  text-align: center;
  color: var(--kcds-color-text-tertiary);
  font-size: var(--kcds-text-body-s);
}
.cmdk__foot {
  display: flex;
  align-items: center;
  gap: var(--kcds-spacing-16);
  padding: var(--kcds-spacing-8) var(--kcds-spacing-16);
  border-top: 1px solid var(--kcds-color-border-subtle);
  background: var(--kcds-color-surface-subtle);
  font-size: var(--kcds-text-caption);
  color: var(--kcds-color-text-tertiary);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cmdk__foot span {
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-4);
}
/* --- Copyable token chips --- */
code.is-copyable {
  cursor: pointer;
  border-radius: var(--kcds-radius-4);
  padding: 1px 4px;
  margin: 0 -1px;
  transition: background var(--kcds-duration-fast) var(--kcds-ease-out);
}
code.is-copyable:hover {
  background: var(--kcds-color-primary-tint);
  color: var(--kcds-color-on-primary-tint);
}
code.is-copyable:focus-visible {
  outline: 2px solid var(--kcds-color-border-focus);
  outline-offset: 1px;
}
/* --- Section anchor --- */
.doc-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-inline-start: var(--kcds-spacing-8);
  border-radius: var(--kcds-radius-8);
  color: var(--kcds-color-text-disabled);
  vertical-align: middle;
  opacity: 0;
  transition: opacity var(--kcds-duration-fast) var(--kcds-ease-out);
}
.doc-anchor svg {
  width: var(--kcds-icon-sm);
  height: var(--kcds-icon-sm);
}
.doc-section:hover .doc-anchor {
  opacity: 1;
}
.doc-anchor:hover {
  background: var(--kcds-color-surface-subtle);
  color: var(--kcds-color-text-primary);
}
.doc-anchor:focus-visible {
  opacity: 1;
  outline: 2px solid var(--kcds-color-border-focus);
  outline-offset: 2px;
}
/* --- Copy toast --- */
.copy-toast {
  position: fixed;
  inset-block-end: var(--kcds-spacing-24);
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: var(--kcds-spacing-8);
  padding: var(--kcds-spacing-12) var(--kcds-spacing-16);
  background: var(--kcds-color-surface-dark);
  color: var(--kcds-gray-0);
  border-radius: var(--kcds-radius-12);
  box-shadow: var(--kcds-shadow-lg);
  font-size: var(--kcds-text-body-s);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--kcds-duration-default) var(--kcds-ease-out),
                  transform var(--kcds-duration-default) var(--kcds-ease-out);
}
.copy-toast.is-shown {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.copy-toast svg {
  width: var(--kcds-icon-sm);
  height: var(--kcds-icon-sm);
  color: var(--kcds-color-status-success-fill);
}
[data-kcds-theme="dark"] .copy-toast {
  background: var(--kcds-color-surface-elevated);
  border: 1px solid var(--kcds-color-border-default);
  color: var(--kcds-color-text-primary);
}
/* --- Back to top --- */
.to-top {
  position: fixed;
  inset-block-end: var(--kcds-spacing-24);
  inset-inline-end: var(--kcds-spacing-24);
  z-index: 300;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--kcds-color-surface-elevated);
  border: 1px solid var(--kcds-color-border-default);
  border-radius: var(--kcds-radius-full);
  box-shadow: var(--kcds-shadow-md);
  color: var(--kcds-color-text-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--kcds-duration-default) var(--kcds-ease-out);
}
.to-top.is-shown {
  opacity: 1;
  pointer-events: auto;
}
.to-top:hover {
  color: var(--kcds-color-text-link);
  border-color: var(--kcds-color-primary);
}
.to-top svg {
  width: var(--kcds-icon-md);
  height: var(--kcds-icon-md);
}
/* --- Shortcuts overlay --- */
.shortcuts {
  position: fixed;
  inset: 0;
  z-index: 450;
  display: grid;
  place-items: center;
}
.shortcuts[hidden] {
  display: none;
}
.shortcuts__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31,32,35,.45);
}
.shortcuts__panel {
  position: relative;
  width: min(420px, calc(100vw - 32px));
  padding: var(--kcds-spacing-24);
  background: var(--kcds-color-surface-elevated);
  border: 1px solid var(--kcds-color-border-subtle);
  border-radius: var(--kcds-radius-16);
  box-shadow: var(--kcds-shadow-lg);
}
.shortcuts__title {
  font-size: var(--kcds-text-h4);
  font-weight: 700;
  margin-bottom: var(--kcds-spacing-16);
}
.shortcuts__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kcds-spacing-16);
  padding: var(--kcds-spacing-8) 0;
  font-size: var(--kcds-text-body-s);
  border-bottom: 1px solid var(--kcds-color-border-subtle);
}
.shortcuts__row:last-child {
  border-bottom: none;
}
.shortcuts__keys {
  display: flex;
  gap: var(--kcds-spacing-4);
  flex-shrink: 0;
}
@media (max-width: 767px) {
.cmdk__panel {
  margin-top: var(--kcds-spacing-16);
  max-height: calc(100vh - 32px);
}
.to-top {
  inset-block-end: var(--kcds-spacing-16);
  inset-inline-end: var(--kcds-spacing-16);
}
.doc-anchor {
  opacity: 1;
}
}
/* Coarse pointer forces comfortable hit areas — density.md Rule 5. Gated on
       the pointer, NOT on viewport width: a touch laptop at 1400px needs 44px
       targets just as much as a phone does, and max-width would miss it. */
@media (pointer: coarse) {
.hero__chip,
      .hero__suite,
      .toc__search {
  min-height: 44px;
}
.toc__search {
  height: 44px;
}
.cmdk__item {
  min-height: 48px;
}
.doc-anchor {
  width: 44px;
  height: 44px;
}
}
/* ============================================================
       Responsive — tablet, mobile
       Breakpoints:
         > 1100px : desktop (sticky sidebar 260px)
         768-1099px : tablet (collapsible drawer)
         < 768px : mobile (full-width drawer, larger touch targets)
       ============================================================ */
@media (max-width: 1099px) {
.doc {
  grid-template-columns: 1fr;
}
.content {
  padding: var(--kcds-spacing-32) var(--kcds-spacing-24);
}
.mobile-header {
  display: flex;
}
.mobile-nav-close {
  display: inline-flex;
}
.toc {
  position: fixed;
  top: 56px;
/* sit below the 56px sticky header */
  left: 0;
  height: calc(100vh - 56px);
  width: 320px;
  max-width: 85vw;
  z-index: 65;
  transform: translateX(-100%);
  transition: transform 240ms cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: var(--kcds-shadow-lg);
  padding-top: var(--kcds-spacing-16);
  display: flex;
  flex-direction: column;
}
/* The drawer is a scrolling flex column: without this, children shrink to fit
         the viewport instead of scrolling — the search trigger collapsed to ~18px. */
.toc > * {
  flex-shrink: 0;
}
.toc__search {
  height: 44px;
  min-height: 44px;
  font-size: var(--kcds-text-body-m, 16px);
}
.toc.is-open {
  transform: translateX(0);
}
.mobile-nav-backdrop.is-open {
  display: block;
}
/* z-index stack on mobile:
         mobile-header (80) > toc (65) > backdrop (60) > content */
.mobile-header {
  z-index: 80;
}
/* Hide redundant in-drawer brand block — header already shows it */
.toc__brand {
  display: none;
}
/* Larger touch targets in drawer */
.toc__link {
  padding: 9px var(--kcds-spacing-12);
  font-size: var(--kcds-text-body-s);
}
.toc__seg-item {
  padding: 8px 12px;
  font-size: var(--kcds-text-body-s);
}
/* Category dots stay at default 28px even on mobile — keeps all 6 in one row */
/* Component grids stack to one column */
.density-grid,
      .density-split,
      .shadow-grid {
  grid-template-columns: 1fr;
}
.ramp {
  grid-template-columns: repeat(4, 1fr);
}
.type-row {
  grid-template-columns: 1fr;
  gap: var(--kcds-spacing-8);
}
.type-row__meta {
  text-align: start;
}
/* Foundations and component preview grids — adapt for narrower width */
.accent-grid,
      .accent-preview-grid {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.dark-tokens-grid {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}
.swatch-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
/* Spec / data tables — let them scroll horizontally if needed */
.table-wrap, .spec-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table, .spec-table {
  min-width: 560px;
}
}
/* MOBILE: tighter padding, single-column ramps, stack date range */
@media (max-width: 767px) {
.content {
  padding: var(--kcds-spacing-24) var(--kcds-spacing-16);
}
/* Headings smaller on mobile */
.doc-h1 {
  font-size: var(--kcds-text-h2);
  line-height: 1.25;
}
.doc-h1[style*="text-h2"] {
  font-size: var(--kcds-text-h3) !important;
  line-height: 1.3;
}
.doc-h3 {
  font-size: var(--kcds-text-body-m);
}
.doc-lede {
  font-size: var(--kcds-text-body-m);
}
.toc {
  width: 88vw;
  max-width: 360px;
}
.ramp {
  grid-template-columns: repeat(2, 1fr);
}
.state-grid {
  grid-template-columns: 1fr;
}
.state-grid__label {
  border-right: none;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  padding: 8px 12px;
}
.state-grid__demo {
  padding: 12px;
}
/* Accent + preview grids single column on phone */
.accent-grid,
      .accent-preview-grid,
      .dark-tokens-grid,
      .swatch-grid {
  grid-template-columns: 1fr;
}
/* Date range — stack the dual calendar on phone */
.daterange {
  flex-direction: column;
  padding: var(--kcds-spacing-12);
}
.daterange__presets {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--kcds-spacing-4);
  min-width: 0;
  padding-right: 0;
  padding-bottom: var(--kcds-spacing-8);
  border-right: none;
  border-bottom: 1px solid var(--kcds-color-border-subtle);
  margin-bottom: var(--kcds-spacing-8);
}
.daterange__preset {
  padding: 4px 10px;
  font-size: var(--kcds-text-caption);
}
.daterange__calendars {
  flex-direction: column;
  gap: var(--kcds-spacing-12);
}
.daterange__cal {
  width: 100%;
}
.daterange__triggers {
  flex-direction: column;
  align-items: stretch;
  gap: var(--kcds-spacing-8);
}
.daterange__arrow {
  display: none;
}
/* Stepper — vertical on phone, way more readable */
.stepper {
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.stepper__step {
  padding: 8px 0;
  width: 100%;
}
.stepper__connector {
  width: 1px;
  height: 16px;
  margin-left: 14px;
  flex: none;
  min-width: 0;
}
/* Buttons in modals/foots — full width on phone */
.modal__foot,
      .drawer__foot,
      .sheet__foot,
      .confirm-card__foot {
  flex-direction: column-reverse;
  align-items: stretch;
}
.modal__foot .btn,
      .drawer__foot .btn,
      .sheet__foot .btn,
      .confirm-card__foot .btn {
  width: 100%;
  justify-content: center;
}
/* Forms full width */
.field {
  max-width: 100%;
}
/* TOC switcher: hide labels to save vertical space */
.toc__switcher {
  padding: var(--kcds-spacing-8);
}
/* Tabs scroll horizontally instead of wrapping */
.tabs {
  overflow-x: auto;
  flex-wrap: nowrap;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab {
  flex-shrink: 0;
}
}
/* Disable body scroll when drawer is open */
body.nav-open {
  overflow: hidden;
}
/* Existing min-screen pages: don't make TOC sticky on shorter than 600px screens
       (small laptops in landscape). Sidebar scrolling works inside its own container. */
  
}