/* The lab's green set (runtime/acquisition/static/experiment-builder.css :root), extended with
   density and the basis hues of design/cues.ts. */
:root {
  color-scheme: dark;

  /* Elevation (docs/design/lab-interface-rules.md R5): depth is carried by surface steps, not borders.
     Each step is a little larger than the last (1.09, 1.12, 1.15, 1.18 contrast). */
  --surface-0: #0c0e0e; /* page */
  --surface-1: #131616; /* panes, fields */
  --surface-2: #1a1e1d; /* cards */
  --surface-3: #232827; /* raised: hover, selected, nested card */
  --surface-4: #2c3230; /* overlays: hover cards, popovers, dialogs (with --shadow) */
  --shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.45), 0 0 0 1px var(--edge);

  /* Edges: --edge is decorative (may be absent); --edge-strong marks a control's boundary
     and holds ≥ 3:1 on surfaces 0–3 (WCAG 1.4.11). */
  --edge: #2e3533;
  --edge-strong: #69736f;

  /* Text: four levels, each ≥ 4.5:1 on surfaces 0–3. */
  --text-strong: #f5f7f5;
  --text: #e4e8e5;
  --muted: #a8b1ac;
  --faint: #88928d;

  /* Hue roles (R6). Graphite carries the atmosphere; green is the interactive accent, amber the
     warm signal (focus, attention, the save state, the island), each used sparingly. */
  --signal: #e3c27a;
  --signal-ink: #1d1606;
  --info: #a9c7e8;

  /* Family hues: what kind of module (R1 keeps basis hues for what it measures or cultivates). */
  --family-composition: #d5d9d6;
  --family-phase: #9fb6c9;
  --family-intervention: #e3c27a;
  --family-sequence: #9fabec; /* authored sequences: night indigo */
  /* Retrospectives are first-class: one orchid purple, used for nothing else (cards, glyphs, dial). */
  --retro: #d29be6;

  /* State intensity: one solid use per view (the primary action); everything else tints. */
  --tint: 14%;
  --tint-strong: 24%;

  /* Elevation (R14): z-height as a state. Each step lifts the element (y offset), deepens its
     shadow, and may add a glow; the step chosen says how selected or active it is. */
  --lift-0: translateY(0);
  --lift-1: translateY(-1px);
  --lift-2: translateY(-2px);
  --lift-3: translateY(-0.25rem);
  --drop-1: 0 1px 2px rgb(0 0 0 / 0.45);
  --drop-2: 0 0.1875rem 0.5rem rgb(0 0 0 / 0.5), 0 1px 2px rgb(0 0 0 / 0.4);
  --drop-3: 0 0.5rem 1.25rem rgb(0 0 0 / 0.55), 0 0.125rem 0.25rem rgb(0 0 0 / 0.4);
  --glow: 0 0 0.625rem color-mix(in srgb, var(--signal) 55%, transparent);
  --glow-soft: 0 0 1.25rem color-mix(in srgb, var(--signal) 22%, transparent);
  --lift-ease: transform 0.14s ease, box-shadow 0.14s ease, color 0.14s ease;

  /* The surface (R13): asymmetric corners with a bevelled top-left, lit edges, the field texture. */
  --cut: 0.5rem; /* chamfer */
  --round: 0.875rem; /* the one soft corner, bottom-right */
  --nib: 0.1875rem; /* the near-square corners */
  --field-tex: none; /* set by design/field.ts */
  --lit: inset 1px 1px 0 rgb(255 255 255 / 0.055), inset -1px -1px 0 rgb(0 0 0 / 0.4);

  /* Light and shade as tokens, so each appearance sets its own (the light set is below). */
  --well: inset 0 1px 0.1875rem rgb(0 0 0 / 0.45); /* a recessed trough: fields, rails, toggles */
  --bevel-hi: rgb(255 255 255 / 0.09); /* the lit top edge of a raised control */
  --bevel-lo: rgb(0 0 0 / 0.4); /* its shaded bottom edge */
  --shade: rgb(0 0 0 / 0.45); /* scroll fades: content passing under an edge */
  --emboss: 0 1px 2px rgb(0 0 0 / 0.6); /* the selected tab's label, pressed into the frame */
  --bead: radial-gradient(circle at 38% 30%, #f4f6f5 0, #c4cac7 42%, #7d8682 100%);
  --bead-drop:
    0 0.25rem 0.3125rem -0.0625rem rgb(0 0 0 / 0.7),
    0 0.3125rem 0.625rem color-mix(in srgb, #c4cac7 14%, transparent);
  --accent-hover: #d6eed5;
  --accent-hover-ink: #102919;

  /* Code (molecules/CodeView): YAML on the green ground, JSON in its own palette. */
  --code-ln: #7b9686;
  --code-key: #b9dfbd;
  --code-str: #e7d6a8;
  --code-num: #a9c7e8;
  --code-bool: #e3a7b8;
  --code-comment: #7d9688;
  --code-punct: #8fa89a;
  --code-anchor: #c3a6e0;
  --code-json-ln: #6b8597;
  --code-json-key: #a9c7e8;
  --code-json-str: #c3dc8f;
  --code-json-num: #e3c27a;
  --code-json-bool: #c3a6e0;
  --code-json-punct: #6f7b76;

  /* Aliases kept while components migrate to the names above. */
  --bg: var(--surface-0);
  --panel: var(--surface-2);
  --panel-2: var(--surface-3);
  --field: var(--surface-1);
  --line: #3a4340;
  --line-soft: var(--edge);
  --hover: var(--surface-3);
  --accent: #b9dfbd;
  --accent-dark: #193622;
  --focus: #e3c27a;
  --danger: #efb9a9;
  --radius: 0.5rem;

  /* density: the components read these, the shell sets them */
  --pad: 0.75rem;
  --gap: 0.625rem;
  --row: 2.625rem;
  --type: 0.9375rem;
  --glyph: 2.75rem;

  /* scroll areas: one trough and thumb for both axes, everywhere */
  --scroll-size: 0.625rem;
  --scroll-track: #0e1111;
  --scroll-thumb: #3a4340;
  --scroll-thumb-hover: #6b7571;
  --scroll-thumb-active: var(--accent);
  --scroll-radius: 999px;
  --scroll-inset: 2px;
  --scroll-fade: 1.25rem;

  /* layout: widths are fractions of their container, bounded in rem; tiers are in rem too
     (design/layout.ts holds the same numbers for code). */
  --pane-library: clamp(14rem, 20%, 26rem);
  --pane-inspector: clamp(18rem, 26%, 32rem);
  --page-max: 100rem;
  --gutter: clamp(1rem, 2.5vw, 2rem);
}
/* Light appearance (html[data-appearance="light"], set by Commons' appearance switch and the
   island's own). The same roles and steps as the dark set: depth is still carried by surface steps
   (R5), but light reads down the ladder: the page is the darkest ground, cards and overlays are
   white and lifted by shadow, and hover and selected states tint darker. Text holds >= 4.5:1 and
   --edge-strong >= 3:1 on surfaces 0-3. The selector outranks Commons' shared sheet. */
:root[data-appearance="light"] {
  color-scheme: light;
  --surface-0: #eef1ee;
  --surface-1: #f6f8f6;
  --surface-2: #ffffff;
  --surface-3: #e3e9e5;
  --surface-4: #ffffff;
  --shadow: 0 0.5rem 1.5rem rgb(23 45 33 / 0.16), 0 0 0 1px var(--edge);

  --edge: #d3dbd6;
  --edge-strong: #76837c;

  --text-strong: #0e1915;
  --text: #1d2a25;
  --muted: #45544d;
  --faint: #56655e;

  --signal: #8a5a0a;
  --signal-ink: #ffffff;
  --info: #2a5c8f;

  --family-composition: #4a524e;
  --family-phase: #3b6283;
  --family-intervention: #8a5a0a;
  --family-sequence: #4450a6;
  --retro: #86399f;

  --drop-1: 0 1px 2px rgb(23 45 33 / 0.14);
  --drop-2: 0 0.1875rem 0.5rem rgb(23 45 33 / 0.14), 0 1px 2px rgb(23 45 33 / 0.1);
  --drop-3: 0 0.5rem 1.25rem rgb(23 45 33 / 0.18), 0 0.125rem 0.25rem rgb(23 45 33 / 0.12);
  --glow: 0 0 0.625rem color-mix(in srgb, var(--signal) 30%, transparent);
  --glow-soft: 0 0 1.25rem color-mix(in srgb, var(--signal) 12%, transparent);
  --lit: inset 1px 1px 0 rgb(255 255 255 / 0.9), inset -1px -1px 0 rgb(23 45 33 / 0.07);

  --well: inset 0 1px 0.1875rem rgb(23 45 33 / 0.14);
  --bevel-hi: rgb(255 255 255 / 0.95);
  --bevel-lo: rgb(23 45 33 / 0.12);
  --shade: rgb(23 45 33 / 0.1);
  --emboss: 0 1px 0 rgb(255 255 255 / 0.9);
  --bead: radial-gradient(circle at 38% 30%, #ffffff 0, #b9c2bd 45%, #6f7a75 100%);
  --bead-drop:
    0 0.1875rem 0.3125rem -0.0625rem rgb(23 45 33 / 0.35), 0 0.25rem 0.5rem rgb(23 45 33 / 0.08);
  --accent: #2b6650;
  --accent-dark: #ffffff;
  --accent-hover: #20543f;
  --accent-hover-ink: #ffffff;
  --focus: #885c13;
  --danger: #9c392a;
  --line: #c9d3cd;

  --scroll-track: #e7ece8;
  --scroll-thumb: #b9c4be;
  --scroll-thumb-hover: #76837c;

  /* Code on white: every token >= 4.5:1 (most >= 6:1); hue roles kept from the dark set. */
  --code-ln: #5c6e64;
  --code-key: #1f6b3f;
  --code-str: #845400;
  --code-num: #1d5a94;
  --code-bool: #a3284f;
  --code-comment: #5f6f66;
  --code-punct: #56655e;
  --code-anchor: #6b3fa0;
  --code-json-ln: #55697a;
  --code-json-key: #1d5a94;
  --code-json-str: #3d6b12;
  --code-json-num: #8a5a0a;
  --code-json-bool: #6b3fa0;
  --code-json-punct: #5f6b66;
}
[data-density="compact"] {
  --pad: 0.4375rem;
  --gap: 0.375rem;
  --row: 2.125rem;
  --type: 0.875rem;
  --glyph: 1.875rem;
}
[data-density="spacious"] {
  --pad: 1.125rem;
  --gap: 0.875rem;
  --row: 3rem;
  --type: 1rem;
  --glyph: 4rem;
}

* {
  box-sizing: border-box;
}
html,
body,
#root {
  height: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font:
    16px / 1.5 system-ui,
    sans-serif;
}
button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  border: 1px solid var(--edge-strong);
  border-radius: 6px;
  background: var(--field);
  padding: 8px 11px;
  max-width: 100%;
}
button {
  cursor: pointer;
  min-height: var(--row);
}
button:hover:not(:disabled) {
  background: var(--surface-3);
  border-color: var(--muted);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
a {
  color: var(--accent);
  text-underline-offset: 3px;
}
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
h1,
h2,
h3,
h4,
p {
  margin-top: 0;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Scroll troughs. Blink and WebKit take the pseudo-elements; Firefox takes the standard properties. */
::-webkit-scrollbar {
  width: var(--scroll-size);
  height: var(--scroll-size);
}
::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: var(--scroll-radius);
}
::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: var(--scroll-radius);
  border: var(--scroll-inset) solid var(--scroll-track);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
}
::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active);
}
::-webkit-scrollbar-corner {
  background: var(--scroll-track);
}
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-color: var(--scroll-thumb) var(--scroll-track);
    scrollbar-width: thin;
  }
}

/* Pane headings (Modules, Sequence, Equipment, Phase settings): one size and weight. */
.pane-title,
#library-title,
#sequence-title,
#settings-title,
.o-equip__label {
  margin: 0;
  font-size: 0.8125rem !important;
  font-weight: 650 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-strong);
}