/* ============================================
   RD Design System - Reploid
   Self-contained base bundle: tokens, primitives, components.

   Keep product-specific selectors out of this file.
   Poolday extends this base from styles/poolday.css.
   ============================================ */

/* === RD TOKENS === */

/* ============================================
   RD Design System - Tokens
   CSS Custom Properties (Design Tokens)

   Architecture: tokens → primitives → components
   Tokens are raw values only — no selectors, no rules.
   Every magic number in the system traces back here.
   ============================================ */

/* Animatable custom property for prism rotation */
@property --prism-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: true;
}

:root {
  /* === COLORS === */
  /* Binary palette: black on white. Projects add their own accent colors. */
  --fg: #000000;
  --bg: #FFFFFF;

  /* === FONT === */
  /* One typeface, two voices. Same monospace stack everywhere —
     differentiation comes from CSS properties (tracking, leading, weight),
     not font-family swaps. */
  --font: 'SF Mono', 'Menlo', 'Consolas', 'DejaVu Sans Mono', monospace;

  /* Voice: "set" — typeset, structured, scanned.
     Used for UI chrome: buttons, headers, labels, badges, nav.
     Tight leading, wide tracking, medium weight. */
  --font-set-tracking: 0.08em;
  --font-set-leading: 1.3;
  --font-set-weight: 500;

  /* Voice: "read" — flowing, natural, content.
     Used for body text, inputs, long-form content.
     No tracking, open leading, regular weight. */
  --font-read-tracking: 0;
  --font-read-leading: 1.6;
  --font-read-weight: 400;

  /* Extended type tokens — optical adjustments for specific type classes.
     These extend beyond the two voices for display, heading, label, and code. */
  --font-weight-light: 300;
  --font-weight-bold: 700;
  --font-leading-tight: 1.2;
  --font-leading-snug: 1.4;
  --font-tracking-code: -0.02em;
  --font-tracking-heading: 0.02em;
  --font-tracking-label: 0.1em;
  --font-tracking-display: 0.25em;

  /* === FONT SIZES === */
  /* 7-step scale, ~1.2x ratio, rounded to whole pixels.
     xs(10) → sm(12) → base(15) → lg(18) → xl(22) → 2xl(26) → display(32) */
  --font-size-xs:      10px;
  --font-size-sm:      12px;
  --font-size-base:    15px;
  --font-size-lg:      18px;
  --font-size-xl:      22px;
  --font-size-2xl:     26px;
  --font-size-display: 32px;

  /* === SPACING === */
  /* Base-8 scale: 2 → 4 → 8 → 16 → 24 → 32 */
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* === TRANSITIONS === */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;

  /* === BORDER WIDTHS === */
  /* Width is thickness only — semantic meaning comes from style:
     solid = default, dotted = ghost/info, dashed = warning, double = error */
  --border-sm: 0.5px;
  --border-md: 1px;
  --border-lg: 2px;

  /* === OPACITY === */
  /* Binary: soft (de-emphasized but readable) and disabled (clearly inactive).
     Memorable values — no ambiguous middle tiers. */
  --opacity-soft: 0.777;
  --opacity-disabled: 0.444;

  /* === Z-INDEX === */
  /* Stacking order for layered UI. Keep gaps for project-specific layers. */
  --z-dropdown: 100;
  --z-toast: 200;
  --z-modal: 10000;

  /* === ACCENT === */
  /* Prism: full-spectrum conic gradient. Max one per page.
     Requires @property --prism-angle above for CSS animation. */
  --prism: conic-gradient(
    from var(--prism-angle, 0deg),
    #ff0000, #ff8000, #ffff00, #00ff00, #00ffff, #0080ff, #8000ff, #ff0080, #ff0000
  );
}

/* === DARK MODE ===
   To enable, override --fg and --bg in a media query or class scope:

   @media (prefers-color-scheme: dark) {
     :root {
       --fg: #FFFFFF;
       --bg: #000000;
       color-scheme: dark;
     }
   }

   Known limitation: the native <select> arrow in the RD components section uses an
   inline SVG with hardcoded black fill. For theme-safe dropdowns, use the
   .select-custom component which renders its arrow via CSS currentColor.
*/

/* === RD PRIMITIVES === */

/* ============================================
   RD Design System - Primitives
   Reset, Typography, Element Defaults, Border Utilities

   This layer sits between tokens (raw values) and components
   (specific UI elements). It defines:
   - Browser reset for consistent cross-platform rendering
   - Type classes that compose voice tokens + size tokens
   - Defaults for bare HTML elements (inputs, tables, code)
   - Border utility classes (meaning encoded in style, not color)
   - State and layout utility classes

   This layer has NO knowledge of component class names.
   Components are fully self-contained in the RD components section.
   ============================================ */

/* === RESET === */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  tap-highlight-color: transparent;
}

button {
  border: none;
  background: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

input,
textarea,
select {
  appearance: none;
  -webkit-appearance: none;
}

html {
  font-size: var(--font-size-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--bg);
  color: var(--fg);
  color-scheme: light;
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--fg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  box-shadow: 0 0 0 1000px var(--bg) inset !important;
  transition: background-color 9999s ease-out 0s;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--fg) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset !important;
  box-shadow: 0 0 0 1000px var(--bg) inset !important;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--font-size-lg);
  font-weight: var(--font-read-weight);
  line-height: var(--font-read-leading);
}

/* === LINKS === */
a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: var(--border-sm) dotted var(--fg);
}

a:hover {
  border-bottom-style: solid;
}

a.link-secondary {
  opacity: var(--opacity-soft);
  cursor: pointer;
}

a.link-secondary:hover {
  opacity: 1;
  border-bottom-style: solid;
}

/* === TYPOGRAPHY === */
/* Type classes compose voice tokens (set/read) with size tokens.
   "set" voice → UI chrome (buttons, headers, labels): tracked, tight, weighted.
   "read" voice → content (body, inputs, captions): untracked, open, light.
   font-family is inherited from body — not redeclared. */

.type-display {
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-light);
  line-height: var(--font-leading-tight);
  letter-spacing: var(--font-tracking-display);
}

.type-h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-set-weight);
  line-height: var(--font-set-leading);
  letter-spacing: var(--font-tracking-heading);
  margin-bottom: var(--space-md);
}

.type-h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-set-weight);
  line-height: var(--font-leading-snug);
  letter-spacing: var(--font-tracking-heading);
}

.type-body {
  font-size: var(--font-size-lg);
  font-weight: var(--font-read-weight);
  line-height: var(--font-read-leading);
  letter-spacing: var(--font-read-tracking);
}

.type-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-tight);
  letter-spacing: var(--font-tracking-label);
  text-transform: uppercase;
}

.type-ui {
  font-size: var(--font-size-base);
  font-weight: var(--font-set-weight);
  line-height: var(--font-set-leading);
  letter-spacing: var(--font-set-tracking);
  text-transform: uppercase;
}

.type-caption {
  font-size: var(--font-size-sm);
  font-weight: var(--font-read-weight);
  line-height: var(--font-leading-snug);
  letter-spacing: var(--font-read-tracking);
}

/* === HTML ELEMENT DEFAULTS === */
/* Consolidated rules for bare HTML elements.
   Each element block is self-contained — no scattered property groups.
   font-family is inherited from body via the * { font: inherit } reset. */

/* Restore semantic inline elements nuked by * { font: inherit } */
strong, b { font-weight: var(--font-weight-bold); }
em, i { font-style: italic; }
small { font-size: var(--font-size-sm); }

input,
textarea,
select {
  border: var(--border-md) solid var(--fg);
  padding: var(--space-sm);
  width: 100%;
  font-size: var(--font-size-lg);
  letter-spacing: var(--font-read-tracking);
  background: var(--bg);
  color: var(--fg);
}

select {
  cursor: pointer;
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-base);
}

th,
td {
  border: var(--border-sm) solid var(--fg);
  padding: var(--space-sm);
  text-align: left;
}

th {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--font-set-tracking);
}

pre {
  border: var(--border-sm) solid var(--fg);
  padding: var(--space-md);
  font-size: var(--font-size-base);
  letter-spacing: var(--font-tracking-code);
  overflow-x: auto;
  white-space: pre;
}

code {
  border: var(--border-sm) solid var(--fg);
  padding: var(--space-xxs) var(--space-xs);
  font-size: var(--font-size-base);
  letter-spacing: var(--font-tracking-code);
}

pre code {
  padding: 0;
  border: none;
}

/* === BORDER UTILITIES === */
/* In a B&W system, border *style* carries semantic meaning:
   solid   = default, confirmed, interactive
   dotted  = ghost, info, pending
   dashed  = warning, caution
   double  = error, critical
   Width adds weight: sm(0.5px) subtle, md(1px) standard, lg(2px) elevated/error.
   Color is always --fg — no color-coded borders. */

.border-default {
  border: var(--border-md) solid var(--fg);
}

.border-subtle {
  border: var(--border-sm) solid var(--fg);
}

.border-ghost {
  border: var(--border-md) dotted var(--fg);
}

.border-info {
  border: var(--border-sm) dotted var(--fg);
}

.border-warning {
  border: var(--border-md) dashed var(--fg);
}

.border-error {
  border: var(--border-lg) double var(--fg);
}

.border-elevated {
  border: var(--border-lg) solid var(--fg);
}

.border-disabled {
  border: var(--border-md) solid var(--fg);
  opacity: var(--opacity-disabled);
}

.border-prism {
  border: var(--border-lg) solid transparent;
  background:
    linear-gradient(var(--bg), var(--bg)) padding-box,
    var(--prism) border-box;
}

/* === STATES === */

.inverted,
::selection {
  background: var(--fg);
  color: var(--bg);
}

/* === UTILITIES === */

.soft { opacity: var(--opacity-soft); }
.flex-col { display: flex; flex-direction: column; }
.hidden { display: none; }

/* === FOCUS === */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: var(--border-md) solid var(--fg);
  outline-offset: var(--border-sm);
}

/* === SIZING === */
.w-full { width: 100%; }
.h-full { height: 100%; }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }

/* === UTILITY STATES === */
.cursor-pointer { cursor: pointer; }
.cursor-not-allowed { cursor: not-allowed; }
.select-none { user-select: none; }
.pointer-events-none { pointer-events: none; }

/* Visibility */
[hidden] { display: none !important; }

/* === SCROLLBAR === */
::-webkit-scrollbar {
  width: var(--space-sm);
  height: var(--space-sm);
}

::-webkit-scrollbar-track {
  background: var(--bg);
  border-left: var(--border-sm) solid var(--fg);
}

::-webkit-scrollbar-thumb {
  background: var(--fg);
}

/* === MOTION === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* === RD COMPONENTS === */

/* ============================================
   RD Design System - Components
   UI Component Styles

   Each component is fully self-contained — it declares every property
   it needs. No component relies on shared pattern groups in primitives.
   Primitives provides only element defaults (input, table, pre, code)
   and utility classes.

   Projects may override or extend these with project-specific CSS.
   ============================================ */

/* === PANELS === */

.panel {
  border: var(--border-md) solid var(--fg);
  padding: var(--space-md);
}

.panel-soft {
  opacity: var(--opacity-soft);
}

.panel-header {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-sm) solid var(--fg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-set-tracking);
  text-transform: uppercase;
}

.panel-body {
  padding: var(--space-md);
}

/* === BUTTONS === */

/*
 * Button component
 * - States: default, hover (inverted), active (inset border), disabled
 * - Variants: secondary (default), primary, ghost, prism
 */

.btn {
  --btn-air-bg: linear-gradient(
    122deg,
    color-mix(in srgb, #00ffff 5%, var(--bg)) 0%,
    color-mix(in srgb, #ff0080 3%, var(--bg)) 42%,
    color-mix(in srgb, #ffff00 4%, var(--bg)) 100%
  );
  --btn-air-bg-hover: linear-gradient(
    122deg,
    color-mix(in srgb, #00ffff 12%, var(--bg)) 0%,
    color-mix(in srgb, #ff0080 7%, var(--bg)) 42%,
    color-mix(in srgb, #ffff00 9%, var(--bg)) 100%
  );
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-md) solid color-mix(in srgb, var(--fg) 82%, #00ffff 18%);
  background: var(--btn-air-bg);
  color: var(--fg);
  font-size: var(--font-size-base);
  font-weight: var(--font-set-weight);
  text-transform: uppercase;
  letter-spacing: var(--font-set-tracking);
  text-decoration: none;
  cursor: pointer;
  box-shadow:
    0 0 16px color-mix(in srgb, #00ffff 6%, transparent),
    0 0 28px color-mix(in srgb, #ff0080 4%, transparent);
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.btn:hover,
.btn:active {
  background: var(--btn-air-bg-hover);
  border-color: color-mix(in srgb, var(--fg) 70%, #00ffff 30%);
  color: var(--fg);
  box-shadow:
    inset 0 calc(-1 * var(--border-lg)) 0 color-mix(in srgb, #00ffff 54%, transparent),
    0 0 20px color-mix(in srgb, #00ffff 10%, transparent),
    0 0 30px color-mix(in srgb, #ff0080 6%, transparent);
}

.btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 var(--border-sm) color-mix(in srgb, var(--fg) 62%, #00ffff 38%),
    inset 0 calc(-1 * var(--border-lg)) 0 color-mix(in srgb, #ff0080 42%, transparent),
    0 0 18px color-mix(in srgb, #ffff00 10%, transparent),
    0 0 24px color-mix(in srgb, #00ffff 8%, transparent);
}

.btn:focus-visible {
  outline: var(--border-md) solid var(--fg);
  outline-offset: var(--border-sm);
}

/* Primary variant */
.btn-primary {
  background: linear-gradient(
    122deg,
    color-mix(in srgb, #00ffff 9%, var(--bg)) 0%,
    color-mix(in srgb, #ff0080 5%, var(--bg)) 48%,
    color-mix(in srgb, #ffff00 8%, var(--bg)) 100%
  );
  color: var(--fg);
  border-color: var(--fg);
  box-shadow:
    inset 0 0 0 var(--border-md) color-mix(in srgb, var(--fg) 76%, transparent),
    0 0 18px color-mix(in srgb, #00ffff 8%, transparent),
    0 0 26px color-mix(in srgb, #ff0080 5%, transparent);
}

.btn-primary:hover {
  background: var(--btn-air-bg-hover);
  box-shadow:
    inset 0 0 0 var(--border-md) var(--fg),
    inset 0 calc(-1 * var(--border-lg)) 0 color-mix(in srgb, #00ffff 58%, transparent),
    0 0 22px color-mix(in srgb, #00ffff 12%, transparent),
    0 0 32px color-mix(in srgb, #ff0080 7%, transparent);
}

.btn-primary:active {
  box-shadow:
    inset 0 0 0 var(--border-sm) color-mix(in srgb, var(--fg) 68%, #00ffff 32%),
    inset 0 calc(-1 * var(--border-lg)) 0 color-mix(in srgb, #ff0080 48%, transparent),
    0 0 18px color-mix(in srgb, #ffff00 12%, transparent),
    0 0 24px color-mix(in srgb, #00ffff 8%, transparent);
}

/* Operation button.
   For commands that cross a runtime or trust boundary. */
.btn-op {
  --op-cell: 2.05em;
  --op-progress: 0;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 40px;
  padding-left: calc(var(--op-cell) + var(--space-sm));
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.btn-op::before {
  content: attr(data-op);
  position: absolute;
  inset-block: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--op-cell);
  border-right: var(--border-md) solid currentColor;
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #00ffff 10%, var(--bg)) 0%,
    color-mix(in srgb, #ff0080 5%, var(--bg)) 100%
  );
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}

.btn-op::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--border-md);
  background: currentColor;
  opacity: 0.72;
  transform: scaleX(var(--op-progress));
  transform-origin: left center;
  transition: transform var(--transition-normal);
}

.btn-op:hover {
  --op-progress: 1;
  transform: translateY(-1px);
}

.btn-op:hover::after {
  transform: scaleX(1);
}

.btn-op:active {
  transform: translateY(0);
  box-shadow:
    inset 0 0 0 var(--border-sm) color-mix(in srgb, var(--fg) 64%, #00ffff 36%),
    inset 0 calc(-1 * var(--border-lg)) 0 color-mix(in srgb, #facc15 28%, #ff0080 24%),
    0 0 14px color-mix(in srgb, #ffff00 10%, transparent),
    0 0 20px color-mix(in srgb, #00ffff 7%, transparent);
}

.btn-primary.btn-op {
  background: var(--btn-air-bg);
  color: var(--fg);
  box-shadow:
    inset 0 0 0 var(--border-md) color-mix(in srgb, var(--fg) 78%, transparent),
    0 0 18px color-mix(in srgb, #00ffff 8%, transparent),
    0 0 28px color-mix(in srgb, #ff0080 5%, transparent);
}

.btn-primary.btn-op:hover,
.btn-primary.btn-op:active {
  background: var(--btn-air-bg-hover);
  color: var(--fg);
}

.btn-primary.btn-op:active {
  background: linear-gradient(
    122deg,
    color-mix(in srgb, #ff0080 8%, var(--bg)) 0%,
    color-mix(in srgb, #ffff00 7%, var(--bg)) 50%,
    color-mix(in srgb, #00ffff 9%, var(--bg)) 100%
  );
  box-shadow:
    inset 0 0 0 var(--border-sm) color-mix(in srgb, var(--fg) 66%, #00ffff 34%),
    inset 0 calc(-1 * var(--border-lg)) 0 color-mix(in srgb, #facc15 30%, #ff0080 24%),
    0 0 14px color-mix(in srgb, #ffff00 11%, transparent),
    0 0 22px color-mix(in srgb, #00ffff 8%, transparent);
}

.btn-primary.btn-op::before {
  border-right-color: color-mix(in srgb, var(--fg) 60%, #00ffff 40%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #00ffff 16%, var(--bg)) 0%,
    color-mix(in srgb, #ff0080 8%, var(--bg)) 100%
  );
  color: var(--fg);
}

.btn-primary.btn-op:hover::before,
.btn-primary.btn-op:active::before {
  border-right-color: color-mix(in srgb, var(--fg) 72%, #00ffff 28%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #00ffff 22%, var(--bg)) 0%,
    color-mix(in srgb, #ff0080 12%, var(--bg)) 100%
  );
  color: var(--fg);
}

.btn-primary.btn-op:active::before {
  border-right-color: color-mix(in srgb, var(--fg) 64%, #facc15 36%);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, #00ffff 14%, var(--bg)) 0%,
    color-mix(in srgb, #facc15 12%, var(--bg)) 100%
  );
}

.btn-op.loading,
.btn-op[aria-busy="true"] {
  --op-progress: 1;
  pointer-events: none;
}

.btn-op.loading::after,
.btn-op[aria-busy="true"]::after {
  background: repeating-linear-gradient(
    90deg,
    currentColor 0,
    currentColor 18%,
    transparent 18%,
    transparent 36%
  );
  background-size: var(--op-cell) 100%;
  animation: op-rail 0.9s linear infinite;
}

.btn-op:disabled::after {
  transform: scaleX(0);
}

@keyframes op-rail {
  to { background-position: var(--op-cell) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn-op,
  .btn-op::after {
    transition: none;
    animation: none;
  }
}

/* Rainbow button (special — max 1 per page).
   Uses layered pseudo-elements: ::before for prism border, ::after for bg mask.
   z-index values are local stacking context, not global --z-* tokens. */
.btn-prism {
  --prism-angle: 0deg;
  position: relative;
  background: var(--bg);
  color: var(--fg);
  border: none;
  z-index: 1;
}

.btn-prism::before {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--border-lg));
  background: var(--prism);
  z-index: -1;
}

.btn-prism::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: -1;
}

/* Hover: border animates, text stays black.
   Animation durations are prism-specific, not transition tokens. */
.btn-prism:hover {
  color: var(--fg);
  animation: prism-spin 1.6s linear infinite;
}

/* Active: background fills with prism.
   text-shadow uses rgba — the only non-token color in the system,
   needed for legibility over the moving gradient. */
.btn-prism:active {
  color: var(--bg);
  text-shadow: 0 0 2px rgba(0,0,0,0.5);
  animation: prism-spin 0.6s linear infinite;
}

.btn-prism:active::after {
  background: var(--prism);
}

@keyframes prism-spin {
  to { --prism-angle: 360deg; }
}

/* Ghost variant */
.btn-ghost {
  border-style: dotted;
  opacity: var(--opacity-soft);
}

.btn-ghost:hover {
  border-style: solid;
  opacity: 1;
}

.btn-ghost:active {
  box-shadow: inset 0 0 0 var(--border-md) var(--bg);
}

/* Disabled state */
.btn:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
  border-style: solid;
}

.btn:disabled:hover,
.btn:disabled:active {
  background: var(--bg);
  color: var(--fg);
  box-shadow: none;
  transform: none;
}

/* === CHIPS === */

/* --chip-bg and --chip-fg are consumer-set overrides (not in rd-tokens).
   Defaults to inverted (fg on bg). Set per-element or via a parent scope. */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  border: none;
  padding: var(--space-xxs) var(--space-xs);
  background: var(--chip-bg, var(--fg));
  color: var(--chip-fg, var(--bg));
  line-height: var(--font-leading-tight);
}

/* === INPUTS === */

/*
 * Input component — extends element defaults from primitives.
 * Primitives provides: border, padding, width, font-size, background, color.
 * This section adds state overrides: empty, focus, disabled, error.
 */

/* Empty state: dotted border */
input:placeholder-shown,
textarea:placeholder-shown {
  border-style: dotted;
}

/* Focus: solid border (cursor is enough feedback) */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-style: solid;
}

/* Disabled — primitives handles opacity/cursor, this adds border style */
input:disabled,
textarea:disabled,
select:disabled {
  border-style: solid;
}

/* Error state */
input.error,
textarea.error,
select.error {
  border-style: double;
}

/* Error with symbol (use wrapper) */
.input-error {
  position: relative;
}

.input-error::before {
  content: '\2612';
  position: absolute;
  left: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.input-error input,
.input-error textarea {
  padding-left: calc(var(--space-sm) + 1.5em);
}

input::placeholder,
textarea::placeholder {
  color: var(--fg);
  opacity: var(--opacity-soft);
}

textarea {
  resize: vertical;
  min-height: 80px;
}

/* Native select arrow — hardcoded black SVG fill.
   For theme-safe dropdowns, use .select-custom instead. */
select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-sm) center;
  padding-right: var(--space-lg);
}

/* === CUSTOM SELECT === */

/* Theme-safe dropdown — arrow uses CSS currentColor, not an SVG. */

.select-custom {
  position: relative;
  display: inline-block;
  width: 100%;
}

.select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: var(--border-md) solid var(--fg);
  padding: var(--space-sm);
  width: 100%;
  font-size: var(--font-size-lg);
  letter-spacing: var(--font-read-tracking);
  background: var(--bg);
  color: var(--fg);
  cursor: pointer;
}

.select-trigger:hover {
  background: var(--fg);
  color: var(--bg);
}

.select-trigger:focus-visible {
  outline: var(--border-md) solid var(--fg);
  outline-offset: var(--border-sm);
}

/* Arrow indicator — CSS triangle via borders, inherits currentColor */
.select-trigger::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentColor;
}

.select-custom.open .select-trigger::after {
  border-top: none;
  border-bottom: 5px solid currentColor;
}

.select-options {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: var(--border-md) solid var(--fg);
  border-top: none;
  max-height: 200px;
  overflow-y: auto;
  z-index: var(--z-dropdown);
  background: var(--bg);
}

.select-custom.open .select-options {
  display: block;
}

.select-option {
  padding: var(--space-sm);
  font-size: var(--font-size-lg);
  letter-spacing: var(--font-read-tracking);
  border-bottom: var(--border-sm) solid var(--fg);
  cursor: pointer;
}

.select-option:hover,
.select-option.selected {
  background: var(--fg);
  color: var(--bg);
}

.select-option:last-child {
  border-bottom: none;
}

/* === CHECKBOX & RADIO === */

input[type="checkbox"],
input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: var(--space-md);
  height: var(--space-md);
  padding: 0;
  margin: 0;
  accent-color: var(--fg);
}

.checkbox-label,
.radio-label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  border: var(--border-sm) solid var(--fg);
  background: var(--bg);
  cursor: pointer;
}

/* === PROGRESS BAR === */

.progress {
  border: var(--border-sm) solid var(--fg);
  width: 100%;
  height: var(--space-sm);
  overflow: hidden;
  background: var(--bg);
}

.progress-fill {
  height: 100%;
  background: var(--fg);
  transition: width var(--transition-fast) ease;
}

.progress-indeterminate .progress-fill {
  width: 30%;
  animation: progress-slide 1.5s ease-in-out infinite;
}

@keyframes progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Progress phase rows — differentiate source types via border-left */
.progress-phase-row {
  padding-left: var(--space-sm);
}

.progress-phase-network {
  border-left: var(--border-md) dotted var(--fg);
}

.progress-phase-disk {
  border-left: var(--border-md) dashed var(--fg);
}

.progress-phase-cache {
  border-left: var(--border-lg) solid var(--fg);
}

/* === CARDS === */

.card {
  border: var(--border-sm) solid var(--fg);
}

.card-header {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-sm) solid var(--fg);
}

.card-body {
  padding: var(--space-md);
}

.card-footer {
  padding: var(--space-sm) var(--space-md);
  border-top: var(--border-sm) solid var(--fg);
}

/* === LISTS === */

.list {
  list-style: none;
}

.list-item {
  padding: var(--space-sm) var(--space-md);
  border-bottom: var(--border-sm) solid var(--fg);
}

.list-item:hover {
  background: var(--fg);
  color: var(--bg);
}

.list-item:last-child {
  border-bottom: none;
}

/* === STATUS LIST === */

.status-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: var(--border-sm) solid var(--fg);
}

.status-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xxs);
  min-width: 0;
}

.status-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: var(--font-tracking-label);
}

.status-detail {
  font-size: var(--font-size-sm);
  opacity: var(--opacity-soft);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-xxs) var(--space-xs);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--font-set-tracking);
  border: var(--border-sm) solid var(--fg);
}

.status-row.ready,
.status-badge.ready {
  border-width: var(--border-md);
}

.status-row.pending,
.status-badge.pending {
  border-style: dotted;
}

.status-row.warn,
.status-badge.warn {
  border-style: dashed;
}

.status-row.error,
.status-badge.error {
  border-style: double;
  border-width: var(--border-lg);
}

/* === BADGES === */

.badge {
  display: inline-block;
  padding: var(--space-xxs) var(--space-sm);
  border: var(--border-sm) solid currentColor;
  font-size: var(--font-size-sm);
  font-weight: var(--font-set-weight);
  text-transform: uppercase;
  letter-spacing: var(--font-set-tracking);
}

.badge-filled {
  background: var(--fg);
  color: var(--bg);
}

/* === TAGS === */

.tag {
  display: inline-block;
  padding: var(--space-xxs) var(--space-xs);
  border: var(--border-sm) solid currentColor;
  font-size: var(--font-size-sm);
}

/* === CRITERIA LIST === */

.criteria-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.criteria-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border: var(--border-sm) solid var(--fg);
  font-size: var(--font-size-sm);
}

.criteria-item.criteria-empty {
  border-style: dotted;
}

.criteria-index {
  min-width: var(--space-md);
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  opacity: var(--opacity-soft);
}

.criteria-text {
  flex: 1;
}

/* === DIVIDERS === */

.divider {
  border: none;
  border-top: var(--border-sm) solid var(--fg);
  margin: var(--space-md) 0;
}

.divider-dashed {
  border-top-style: dashed;
}

.divider-dotted {
  border-top-style: dotted;
}

/* === MODAL === */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}

.modal-overlay.hidden {
  display: none;
}

.modal,
.modal-content {
  background: var(--bg);
  border: var(--border-md) solid var(--fg);
  width: 100%;
  min-width: 360px;
  max-width: 560px;
  max-height: 80vh;
  overflow: auto;
}

.modal-danger,
.modal-content.modal-danger {
  border-style: double;
  border-width: var(--border-lg);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md);
  border-bottom: var(--border-sm) solid var(--fg);
}

.modal-title {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--fg);
  font-size: var(--font-size-lg);
  cursor: pointer;
  opacity: var(--opacity-soft);
}

.modal-close:hover {
  opacity: 1;
}

.modal-body {
  padding: var(--space-md);
}

.modal-message {
  margin: 0;
}

.modal-details {
  margin-top: var(--space-sm);
  font-size: var(--font-size-sm);
  letter-spacing: var(--font-read-tracking);
}

.modal-footer,
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-top: var(--border-sm) solid var(--fg);
}

/* === TOAST === */

.toast-container {
  position: fixed;
  top: var(--space-md);
  right: var(--space-md);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: 400px;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  border: var(--border-sm) solid var(--fg);
  padding: var(--space-md);
  background: var(--bg);
  min-width: 280px;
  max-width: 400px;
  opacity: 0;
  transform: translateX(100%);
  transition: opacity var(--transition-normal) ease, transform var(--transition-normal) ease;
  pointer-events: auto;
  cursor: pointer;
}

.toast.visible {
  opacity: 1;
  transform: translateX(0);
}

.toast-icon {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.toast-message {
  flex: 1;
}

.toast-close {
  font-size: var(--font-size-sm);
  opacity: var(--opacity-soft);
  cursor: pointer;
}

.toast-success {
  border-left: var(--border-lg) solid var(--fg);
}

.toast-error {
  border-style: double;
  border-width: var(--border-lg);
}

.toast-warning {
  border-style: dashed;
}

.toast-info {
  border-style: dotted;
}

/* === ERROR UI (boot failure) === */

.error-ui {
  max-width: 600px;
  margin: var(--space-xl) auto;
  padding: var(--space-lg);
}

.error-ui-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
}

.error-ui-header::before {
  content: '\26A0';
  font-size: 1.5em;
}

.error-ui-description {
  opacity: var(--opacity-soft);
  line-height: var(--font-read-leading);
  margin-bottom: var(--space-md);
}

.error-ui-message {
  padding: var(--space-md);
  margin: var(--space-md) 0;
  font-size: var(--font-size-base);
  white-space: pre-wrap;
  word-break: break-all;
  border: var(--border-lg) double var(--fg);
}

.error-ui-details summary {
  cursor: pointer;
  opacity: var(--opacity-soft);
  padding: var(--space-sm) 0;
}

.error-ui-stack {
  padding: var(--space-md);
  font-size: var(--font-size-sm);
  overflow-x: auto;
  opacity: var(--opacity-soft);
  border: var(--border-sm) dotted var(--fg);
}

.error-ui-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-md);
}

.error-ui-hint {
  font-size: var(--font-size-sm);
  opacity: var(--opacity-soft);
  margin-top: var(--space-lg);
}

/* === ACCORDION === */

.accordion {
  display: flex;
  flex-direction: column;
  border: var(--border-sm) solid var(--fg);
}

.accordion-item {
  border-bottom: var(--border-sm) solid var(--fg);
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  background: var(--bg);
  color: var(--fg);
  border: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--font-set-tracking);
  text-transform: uppercase;
  text-align: left;
}

.accordion-header:hover {
  background: var(--fg);
  color: var(--bg);
}

.accordion-header[aria-expanded="true"] {
  background: var(--fg);
  color: var(--bg);
  border-bottom: var(--border-sm) solid var(--fg);
}

.accordion-header::after {
  content: '+';
  font-size: var(--font-size-base);
  font-weight: var(--font-read-weight);
}

.accordion-header[aria-expanded="true"]::after {
  content: '-';
}

.accordion-content {
  display: none;
  padding: var(--space-md);
}

.accordion-content[aria-hidden="false"] {
  display: block;
}

/* Accordion variants */
.accordion-ghost {
  border-style: dotted;
}

.accordion-ghost .accordion-item {
  border-bottom-style: dotted;
}

.accordion-ghost .accordion-header[aria-expanded="true"] {
  border-bottom-style: dotted;
}

/* === SEGMENTED CONTROLS === */

/*
 * For single-select button groups (tabs/toggles).
 * Mark the active item with `.is-active` or `aria-pressed="true"`.
 */
.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}

.segmented-btn {
  border-style: dotted;
}

.segmented-btn.is-active,
.segmented-btn[aria-pressed="true"],
.segmented-control [aria-pressed="true"] {
  border-style: solid;
  border-color: currentColor;
  background: var(--fg);
  color: var(--bg);
}