/* Shared component and slide classes. Every preview links tokens.css then
   ui.css. Class names mirror the Linear vocabulary they were derived from. */

/* Typography roles */

.title-hero {
  font-size: var(--title-8-size);
  font-weight: var(--font-weight-medium);
  line-height: 1;
  letter-spacing: var(--title-large-letter-spacing);
  color: var(--color-text-primary);
}

.title-7 { font-size: var(--title-7-size); }
.title-6 { font-size: var(--title-6-size); }
.title-5 { font-size: var(--title-5-size); }
.title-7, .title-6, .title-5 {
  font-weight: var(--font-weight-title);
  line-height: 1.1;
  letter-spacing: var(--title-large-letter-spacing);
  color: var(--color-text-primary);
}

.title-4 { font-size: var(--title-4-size); line-height: 1.125; }
.title-3 { font-size: var(--title-3-size); line-height: 1.33; }
.title-2 { font-size: var(--title-2-size); line-height: 1.33; }
.title-1 { font-size: var(--title-1-size); line-height: 1.4; }
.title-4, .title-3, .title-2, .title-1 {
  font-weight: var(--font-weight-title);
  letter-spacing: var(--title-small-letter-spacing);
  color: var(--color-text-primary);
}

.text-large {
  font-size: var(--text-large-size);
  line-height: 1.6;
  letter-spacing: 0;
}

.text-regular {
  font-size: var(--text-regular-size);
  line-height: 1.6;
  letter-spacing: var(--text-regular-letter-spacing);
}

.text-small {
  font-size: var(--text-small-size);
  line-height: 1.5;
  letter-spacing: var(--text-small-letter-spacing);
}

.text-mini {
  font-size: var(--text-mini-size);
  line-height: 1.5;
  letter-spacing: var(--text-mini-letter-spacing);
}

.text-micro {
  font-size: var(--text-micro-size);
  line-height: 1.4;
  letter-spacing: 0;
}

.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-quaternary { color: var(--color-text-quaternary); }
.mono { font-family: var(--font-monospace); }

/* Index label: Linear's numbered section metadata ("2.1 Plan"). On slides it
   encodes real deck position, so order carries information. */
.index-label {
  display: inline-flex;
  gap: var(--space-3);
  align-items: baseline;
  font-size: var(--text-mini-size);
  letter-spacing: var(--text-mini-letter-spacing);
  color: var(--color-text-quaternary);
}
.index-label .index-num { color: var(--color-text-tertiary); }

/* Buttons */

/* Buttons are rounded rectangles (Linear's product treatment), never pills.
   The pill shape belongs to badges/tags only. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-3);
  border: none;
  border-radius: var(--radius-8);
  font-family: var(--font-regular);
  font-size: var(--text-mini-size);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--text-mini-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--speed-quick) var(--ease-out-quad),
    color var(--speed-quick) var(--ease-out-quad);
}

.btn-primary {
  background: var(--color-button-invert-bg);
  color: var(--color-button-invert-text);
}
.btn-primary:hover { background: var(--color-button-invert-bg-hover); }

.btn-accent {
  background: var(--color-accent);
  color: #fff;
}
.btn-accent:hover { background: var(--color-accent-hover); }

.btn-ghost {
  background: transparent;
  color: var(--color-text-tertiary);
}
.btn-ghost:hover { color: var(--color-text-primary); }

.btn-outline {
  background: var(--color-bg-translucent);
  border: 1px solid var(--color-border-translucent);
  color: var(--color-text-primary);
}
.btn-outline:hover { border-color: var(--color-border-secondary); }

.btn-large { height: 40px; padding: 0 var(--space-4); font-size: var(--text-regular-size); border-radius: 10px; }

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Badges / pills */

/* Badges/tags own the pill shape: outlined, near-transparent, quiet text,
   colored dot (Linear's issue-tag treatment). */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-rounded);
  border: 1px solid var(--color-border-primary);
  background: transparent;
  font-size: var(--text-micro-size);
  color: var(--color-text-tertiary);
  white-space: nowrap;
}
.badge .dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
}
.badge-accent { border-color: var(--color-accent-tint); background: var(--color-accent-tint); color: var(--color-accent-hover); }
.badge .dot-green { background: var(--color-green); }
.badge .dot-orange { background: var(--color-orange); }
.badge .dot-teal { background: var(--color-teal); }

/* Cards: the rounded, subtly-bordered elevated frame Linear puts screenshots in */

.card {
  background: var(--color-bg-level-1);
  border: 1px solid var(--color-border-translucent);
  border-radius: var(--radius-12);
  box-shadow: var(--shadow-low);
}

.card-elevated {
  background: var(--color-bg-level-1);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-high);
}

.card-pad { padding: var(--space-5); }

/* Stat block */

.stat .stat-value {
  font-size: var(--title-5-size);
  font-weight: var(--font-weight-title);
  letter-spacing: var(--title-large-letter-spacing);
  line-height: 1.1;
  color: var(--color-text-primary);
}
.stat .stat-label {
  margin-top: var(--space-2);
  font-size: var(--text-mini-size);
  color: var(--color-text-tertiary);
}

/* List rows (Linear issue-row style) */

.row-list { display: flex; flex-direction: column; }
.row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--color-line-tertiary);
  font-size: var(--text-mini-size);
  color: var(--color-text-secondary);
}
.row:last-child { border-bottom: none; }
.row .row-title { color: var(--color-text-primary); }
.row .row-meta { margin-left: auto; color: var(--color-text-quaternary); }

/* Keyboard-key / code chip */

.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-6);
  background: var(--color-bg-level-3);
  border: 1px solid var(--color-border-primary);
  font-family: var(--font-monospace);
  font-size: var(--text-micro-size);
  color: var(--color-text-secondary);
}

/* Wordmark */

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-weight: var(--font-weight-title);
  letter-spacing: var(--title-small-letter-spacing);
  color: var(--color-text-primary);
  white-space: nowrap;
}
.wordmark .mark {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-6);
  background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-brand-base) 100%);
}

/* Layout primitives */

/* Constrain page content to the DS max width; use inside .section, .nav,
   .footer rather than as a full-bleed replacement for them. */
.container {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-inline);
}

/* Vertical rhythm between page blocks, on the 4-base spacing scale. */
.section { padding-block: var(--space-9); }
.section-sm { padding-block: var(--space-7); }
.section-lg { padding-block: var(--space-10); }

.grid { display: grid; gap: var(--space-5); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-sm { gap: var(--space-2); }
.stack-lg { gap: var(--space-5); }

/* Top navigation bar */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--header-height);
  background: var(--header-bg);
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  border-bottom: 1px solid var(--color-border-primary);
}
.nav-inner {
  max-width: var(--page-max-width);
  height: 100%;
  margin-inline: auto;
  padding-inline: var(--page-padding-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  list-style: none;
}
.nav-links a {
  font-size: var(--text-mini-size);
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--speed-quick) var(--ease-out-quad);
}
.nav-links a:hover { color: var(--color-text-primary); }
.nav-actions { display: flex; align-items: center; gap: var(--space-3); }
/* On mobile the fixed-height row cannot hold the wordmark, the link list, and
   the CTA without wrapping the wordmark and cramping tap targets. Collapse to
   the wordmark plus the primary action (drop the secondary links), and let the
   bar grow to fit. */
@media (max-width: 720px) {
  .nav { height: auto; }
  .nav-inner { padding-block: var(--space-3); gap: var(--space-3); }
  .nav-links { display: none; }
}

/* Page hero: bakes in its own max width and generous vertical padding, so
   it does not need a separate .container wrapper. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding: var(--space-10) var(--page-padding-inline) var(--space-9);
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Page footer */

.footer {
  border-top: 1px solid var(--color-line-secondary);
  padding-block: var(--space-8) var(--space-6);
}
.footer-inner {
  max-width: var(--page-max-width);
  margin-inline: auto;
  padding-inline: var(--page-padding-inline);
}
.footer-cols {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-7);
}
.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-line-tertiary);
}
@media (max-width: 720px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* Form controls */

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.label {
  font-size: var(--text-mini-size);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}
.input, .textarea, .select {
  width: 100%;
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-8);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-regular);
  font-size: var(--text-regular-size);
  color: var(--color-text-primary);
  transition: border-color var(--speed-quick) var(--ease-out-quad);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-quaternary); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--color-border-secondary); }
.input:focus-visible, .textarea:focus-visible, .select:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-color: var(--color-border-secondary);
}
.textarea { min-height: 120px; resize: vertical; }
.select { appearance: none; }

/* Links */

.link {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--speed-quick) var(--ease-out-quad);
}
.link:hover { color: var(--color-accent-hover); text-decoration: underline; }

.link-quiet {
  color: var(--color-text-tertiary);
  text-decoration: none;
  transition: color var(--speed-quick) var(--ease-out-quad);
}
.link-quiet:hover { color: var(--color-text-primary); }

/* Slides: 1920x1080 fixed frames */

.slide {
  position: relative;
  width: 1920px;
  height: 1080px;
  overflow: hidden;
  background: var(--color-bg-primary);
  /* Re-resolve inherited text color inside this element's theme scope, so a
     data-theme override on the slide re-colors untinted text too. */
  color: var(--color-text-primary);
  display: flex;
  flex-direction: column;
  padding: var(--space-9) var(--space-10);
}

/* Main content area: fills the frame and centers vertically so slides never
   pool content at the top with dead space below. */
.slide-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: var(--space-7);
}

.slide-footer {
  position: absolute;
  left: 120px;
  right: 120px;
  bottom: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--text-mini-size);
  color: var(--color-text-quaternary);
}

.slide-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

/* The default content grid: headline left, supporting copy right */
.slide-cols {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-10);
  align-items: start;
  flex: 1;
}

.slide h1, .slide h2 { text-wrap: balance; }

/* Hairline divider */
.divider { border: none; border-top: 1px solid var(--color-line-secondary); }

/* ============================================================
   Enriched component library (Phase 2). Atoms then app primitives.
   Every rule is token-only; classes are registered in contract/*.md.
   ============================================================ */

/* Avatar */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  background: var(--color-bg-level-3);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-mini-size);
  overflow: hidden;
  flex-shrink: 0;
}
.avatar-sm { width: 16px; height: 16px; font-size: var(--text-micro-size); }
.avatar-lg { width: 32px; height: 32px; font-size: var(--text-small-size); }
.avatar-accent { background: var(--color-accent-tint); color: var(--color-accent-hover); }
.avatar img { width: 100%; height: 100%; border-radius: var(--radius-circle); object-fit: cover; }
.avatar-status { position: relative; display: inline-flex; }
.avatar-dot {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  box-sizing: content-box;
  border-radius: var(--radius-circle);
  border: 2px solid var(--color-bg-primary);
  background: var(--color-green);
}
.avatar-dot-green { background: var(--color-green); }
.avatar-dot-orange { background: var(--color-orange); }

/* Tooltip */
.tooltip { position: relative; display: inline-flex; }
.tooltip-bubble {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: var(--color-bg-level-3);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-6);
  box-shadow: var(--shadow-medium);
  font-size: var(--text-mini-size);
  letter-spacing: var(--text-mini-letter-spacing);
  white-space: nowrap;
  padding: var(--space-1) var(--space-2);
  pointer-events: none;
}
.tooltip-bubble-top { bottom: calc(100% + var(--space-2)); }
.tooltip-bubble-top::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-bg-level-3);
}
.tooltip-bubble-bottom { top: calc(100% + var(--space-2)); }
.tooltip-bubble-bottom::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--color-bg-level-3);
}

/* Checkbox */
.checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.checkbox-box {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  width: var(--space-4);
  height: var(--space-4);
  border-radius: var(--radius-4);
  border: 1px solid var(--color-border-tertiary);
  background: var(--color-bg-level-2);
  transition: background var(--speed-quick) var(--ease-out-quad),
    border-color var(--speed-quick) var(--ease-out-quad);
}
/* The real control is a visually hidden native <input> inside the <label>;
   clicking the label toggles it and its :checked / :focus-visible state drives
   the box. The static .checkbox-box-checked class still renders a checked box for
   non-interactive specimens. */
.checkbox-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.checkbox-box-checked,
.checkbox-input:checked + .checkbox-box { background: var(--color-accent); border-color: var(--color-accent); }
.checkbox-box-checked::after,
.checkbox-input:checked + .checkbox-box::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 8px;
  border: solid var(--color-on-accent);
  border-width: 0 2px 2px 0;
  /* Center the tick, then nudge up: a rotated check's optical center sits below
     its geometric center, so -55% Y reads as vertically centered. */
  transform: translate(-50%, -55%) rotate(45deg);
}
.checkbox-input:focus-visible + .checkbox-box {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.checkbox-disabled { opacity: 0.5; cursor: not-allowed; }

/* Radio (derived from checkbox: circular, dot instead of tick; not from Figma) */
.radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  cursor: pointer;
}
/* Visually hidden native <input type="radio">; the label toggles it and its
   :checked / :focus-visible state drives the circle, mirroring .checkbox-input. */
.radio-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.radio-circle {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: none;
  border-radius: var(--radius-circle);
  border: 1px solid var(--color-border-tertiary);
  background: var(--color-bg-level-2);
  transition: border-color var(--speed-quick) var(--ease-out-quad);
}
.radio-circle-selected,
.radio-input:checked + .radio-circle { border-color: var(--color-accent); }
.radio-circle-selected::after,
.radio-input:checked + .radio-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--color-accent);
  transform: translate(-50%, -50%);
}
.radio-input:focus-visible + .radio-circle {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.radio-disabled { opacity: 0.5; cursor: not-allowed; }

/* Toggle / switch */
.toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 36px;
  height: 20px;
  padding: 0;
  border: none;
  border-radius: var(--radius-rounded);
  background: var(--color-bg-quinary);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--speed-quick) var(--ease-out-quad);
}
/* .toggle is a <label> hosting a visually hidden native checkbox; :checked drives
   the track fill and knob slide via :has() + the sibling combinator. The static
   .toggle-on class still renders an on switch for non-interactive specimens. */
.toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.toggle:focus-visible,
.toggle:has(.toggle-input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-circle);
  background: var(--color-button-invert-bg);
  transition: transform var(--speed-quick) var(--ease-out-quad);
}
.toggle-on,
.toggle:has(.toggle-input:checked) { background: var(--color-accent); }
.toggle-on .toggle-knob,
.toggle-input:checked ~ .toggle-knob { transform: translateX(16px); }
.toggle-disabled { opacity: 0.5; cursor: not-allowed; }
.toggle-row { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Kbd (keycap) */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-6);
  background: var(--color-bg-level-3);
  border: 1px solid var(--color-border-primary);
  box-shadow: var(--shadow-tiny);
  font-family: var(--font-monospace);
  font-size: var(--text-micro-size);
  color: var(--color-text-secondary);
}
.kbd-group { display: inline-flex; align-items: center; gap: var(--space-1); }

/* Tabs + segmented control */
.tabs { display: inline-flex; gap: var(--space-5); border-bottom: 1px solid var(--color-border-primary); }
.tab {
  padding-bottom: var(--space-2);
  font-size: var(--text-small-size);
  color: var(--color-text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--speed-quick) var(--ease-out-quad),
    border-color var(--speed-quick) var(--ease-out-quad);
}
.tab:hover { color: var(--color-text-secondary); }
.tab-active, .tab-active:hover { color: var(--color-text-primary); border-bottom-color: var(--color-accent); }
.segmented {
  display: inline-flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-bg-level-2);
  border-radius: var(--radius-8);
  border: 1px solid var(--color-border-primary);
}
.segment {
  /* Reset the native <button> chrome: without this, inactive segments render
     the browser's light-gray ButtonFace, which reads as a bright light-theme
     track dropped into the dark shell. Transparent segments show the dark
     .segmented track instead; .segment-active provides the raised chip. */
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: none;
  font-family: inherit;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-mini-size);
  border-radius: var(--radius-6);
  color: var(--color-text-tertiary);
  cursor: pointer;
  transition: color var(--speed-quick) var(--ease-out-quad),
    background var(--speed-quick) var(--ease-out-quad);
}
.segment:hover { color: var(--color-text-secondary); }
.segment-active, .segment-active:hover {
  background: var(--color-bg-level-3);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-tiny);
}

/* Select menu (custom dropdown) */
.select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-8);
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-regular);
  font-size: var(--text-regular-size);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: border-color var(--speed-quick) var(--ease-out-quad);
}
.select-trigger:hover { border-color: var(--color-border-secondary); }
.select-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-color: var(--color-border-secondary); }
.select-trigger svg { flex-shrink: 0; color: var(--color-text-tertiary); transition: transform var(--speed-quick) var(--ease-out-quad); }
.select-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }
.dropdown {
  display: flex;
  flex-direction: column;
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-1);
}
.dropdown-option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-6);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--speed-quick) var(--ease-out-quad), color var(--speed-quick) var(--ease-out-quad);
}
.dropdown-option:hover { background: var(--color-bg-level-3); }
.dropdown-option:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; background: var(--color-bg-level-3); }
.dropdown-option-selected { background: var(--color-accent-tint); color: var(--color-text-primary); }
.dropdown-divider { height: 1px; margin-block: var(--space-1); background: var(--color-line-secondary); }

/* Menu / command rows */
.menu {
  background: var(--color-bg-level-2);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-8);
  box-shadow: var(--shadow-overlay);
  padding: var(--space-1);
  min-width: 240px;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-6);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--speed-quick) var(--ease-out-quad), color var(--speed-quick) var(--ease-out-quad);
}
.menu-item:hover, .menu-item-active { background: var(--color-bg-level-3); color: var(--color-text-primary); }
.menu-item-icon { display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: var(--text-small-size); color: var(--color-text-tertiary); }
.menu-item-shortcut { margin-left: auto; color: var(--color-text-quaternary); font-size: var(--text-mini-size); font-family: var(--font-monospace); }
.menu-subsection {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-mini-size);
  color: var(--color-text-quaternary);
  text-transform: uppercase;
  letter-spacing: var(--text-mini-letter-spacing);
}
.menu-divider { height: 1px; background: var(--color-line-secondary); margin: var(--space-1) 0; }

/* Modal / dialog */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}
.modal {
  background: var(--color-bg-level-1);
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-16);
  box-shadow: var(--shadow-overlay);
  width: min(480px, 100%);
  display: flex;
  flex-direction: column;
}
.modal-header {
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-line-secondary);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}
.modal-body { padding: var(--space-5); color: var(--color-text-secondary); font-size: var(--text-regular-size); }
.modal-footer {
  padding: var(--space-5);
  border-top: 1px solid var(--color-line-secondary);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}
.modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: var(--radius-8);
  color: var(--color-text-tertiary);
  font-size: var(--text-large-size);
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover { color: var(--color-text-primary); }

/* Table row (columnar list row: leading control + columns + trailing meta) */
.table-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border-primary);
  border-radius: var(--radius-12);
  overflow: hidden;
}
.table-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-line-tertiary);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
}
.table-row:last-child { border-bottom: none; }
.table-row:hover { background: var(--color-bg-level-1); }
.table-row-lead { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.table-row-lead .dot { width: 8px; height: 8px; border-radius: var(--radius-circle); background: var(--color-accent); }
.table-row-lead .dot-green { background: var(--color-green); }
.table-row-lead .dot-orange { background: var(--color-orange); }
.table-row-lead .dot-teal { background: var(--color-teal); }
.table-row-title { flex: 1; min-width: 0; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-row-meta { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; font-size: var(--text-mini-size); color: var(--color-text-quaternary); }
.table-row-head {
  font-size: var(--text-mini-size);
  color: var(--color-text-quaternary);
  text-transform: uppercase;
  letter-spacing: var(--text-mini-letter-spacing);
  background: var(--color-bg-level-1);
}
.table-row-head .table-row-title { color: inherit; }

/* Sidebar / nav item */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 240px;
  padding: var(--space-3);
  background: var(--color-bg-level-1);
  border-right: 1px solid var(--color-border-primary);
}
.sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-6);
  font-size: var(--text-small-size);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--speed-quick) var(--ease-out-quad), color var(--speed-quick) var(--ease-out-quad);
}
.sidebar-item:hover { background: var(--color-bg-level-3); color: var(--color-text-primary); }
.sidebar-item-selected { background: var(--color-accent-tint); color: var(--color-text-primary); }
.sidebar-item-icon { color: var(--color-text-tertiary); flex-shrink: 0; }
.sidebar-subitem { padding-left: var(--space-7); font-size: var(--text-small-size); color: var(--color-text-tertiary); }
.sidebar-label {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-mini-size);
  color: var(--color-text-quaternary);
  text-transform: uppercase;
  letter-spacing: var(--text-mini-letter-spacing);
}

/* ---- Tier A enrichments (states/variants on existing components) ---- */

/* Buttons: sizes, destructive, disabled, icon */
.btn-sm { height: 28px; padding: 0 var(--space-3); font-size: var(--text-micro-size); }
.btn-xs { height: 24px; padding: 0 var(--space-2); font-size: var(--text-micro-size); }
.btn-destructive { background: var(--color-red); color: var(--color-on-accent); }
.btn-destructive:hover { filter: brightness(1.1); }
.btn:disabled, .btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.btn-icon { padding: 0; aspect-ratio: 1 / 1; }

/* Form controls: error / hint / disabled states */
.input-error, .textarea-error, .select-error { border-color: var(--color-red); }
.field-error { color: var(--color-red); font-size: var(--text-mini-size); }
.field-hint { color: var(--color-text-tertiary); font-size: var(--text-mini-size); }
.input:disabled, .textarea:disabled, .select:disabled { opacity: 0.5; cursor: not-allowed; }

/* Badges: red status dot, status-color pills, team tag */
.badge .dot-red { background: var(--color-red); }
.badge-green { color: var(--color-green); border-color: var(--color-green); }
.badge-orange { color: var(--color-orange); border-color: var(--color-orange); }
.badge-red { color: var(--color-red); border-color: var(--color-red); }
.badge-team { color: var(--color-text-secondary); }
.badge-square { width: 12px; height: 12px; border-radius: var(--radius-4); flex-shrink: 0; }

/* Cards: interactive/hover state, header/body/footer structure */
.card-interactive {
  cursor: pointer;
  transition: border-color var(--speed-regular) var(--ease-out-quad),
              box-shadow var(--speed-regular) var(--ease-out-quad),
              transform var(--speed-regular) var(--ease-out-quad);
}
.card-interactive:hover { border-color: var(--color-border-secondary); box-shadow: var(--shadow-medium); transform: translateY(-2px); }
.card-interactive:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.card-header, .card-footer { padding: var(--space-4) var(--space-5); }
.card-header { border-bottom: 1px solid var(--color-line-secondary); }
.card-footer { border-top: 1px solid var(--color-line-secondary); }
.card-body { padding: var(--space-5); }

/* Links: focus states, external variant, CTA-row variant */
.link:focus-visible, .link-quiet:focus-visible, .link-external:focus-visible, .link-block:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-4);
}
.link-external { color: var(--color-accent); text-decoration: none; transition: color var(--speed-quick) var(--ease-out-quad); }
.link-external:hover { color: var(--color-accent-hover); text-decoration: underline; }
.link-external::after { content: " \2197"; }
.link-block {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--font-weight-medium);
  transition: color var(--speed-quick) var(--ease-out-quad);
}
.link-block:hover { color: var(--color-accent-hover); }
.link-block::after { content: "\2192"; }