/* ==========================================================================
   The Unbounded Organ — Bamboo console

   Species: an organ console as a single body, with its casework and material
   hierarchy informed by the Bamboo Organ of Las Piñas. The reference is
   structural rather than illustrative: a stepped central rank, bamboo culms
   and nodes, dark timber joinery, and pale adobe light. No external image or
   copied ornament is used.

   Lightness is mixed by function, not by theme: dried-bamboo controls (the
   things you touch) sit inside a charred-timber field (the things you read).
   It commits to one look — there is no light/dark switch, and every colour is
   painted explicitly.

   The surface drifts. --drift runs 0→1 with the log of pipe length and thins
   the console's chroma as the pipe outgrows the air; --breath is the pipe's
   own period, log-compressed into visibility (2.6 s–26 s), and the body
   breathes at it.

   Palette obeys principles/xyh-design-calibration.md §Color:
     · No zero-chroma anywhere — every neutral carries hue
     · Four poles occupied: timber (low L), bamboo (high L), metal (low C),
       rose (high C)
     · Warm timber + honey bamboo + cool weathered metal + rose
     · NOTE/ECHO/DRIFT are amber/aqua/blurple — three kinds, deliberately
       NOT a severity ramp. They must never read green→amber→red.
   ========================================================================== */

:root {
  /* --- The field: charred casework and old narra-toned timber ---------- */
  --lacquer:       oklch(0.170 0.044 48);
  --lacquer-lift:  oklch(0.225 0.050 54);
  --lacquer-deep:  oklch(0.125 0.030 42);
  --timber:        oklch(0.310 0.075 55);
  --timber-lift:   oklch(0.405 0.085 62);

  /* --- Console furniture: sun-dried bamboo ----------------------------- */
  --bone:          oklch(0.905 0.075 86);
  --bone-shade:    oklch(0.820 0.095 80);
  --bone-deep:     oklch(0.705 0.105 70);
  --bamboo-node:   oklch(0.535 0.095 58);
  --adobe:         oklch(0.790 0.045 73);

  /* --- The organ's metal minority, cool against the bamboo ------------ */
  --metal:         oklch(0.625 0.045 214);
  --metal-dim:     oklch(0.475 0.040 218);
  --metal-lift:    oklch(0.790 0.040 205);

  /* --- The three kinds (triad). No severity ordering implied. ---------- */
  --note:          oklch(0.800 0.150 62);
  --echo:          oklch(0.780 0.128 190);
  --drift-c:       oklch(0.700 0.160 292);

  /* --- The one loud colour: forcing through the cutoff ---------------- */
  --rose:          oklch(0.660 0.215 358);
  --rose-lift:     oklch(0.760 0.170 356);

  /* --- Ink ------------------------------------------------------------ */
  --ink-on-bone:   oklch(0.245 0.055 47);
  --ink-on-bone-2: oklch(0.405 0.050 52);
  --ink-on-dark:   oklch(0.910 0.050 85);
  --ink-on-dark-2: oklch(0.745 0.050 79);
  --ink-on-dark-3: oklch(0.625 0.045 72);

  --hairline:      oklch(0.405 0.065 58);
  --hairline-soft: oklch(0.285 0.050 52);

  --font-display: 'Alegreya', Georgia, serif;
  --font-body:    'Alegreya Sans', system-ui, sans-serif;
  --font-engrave: 'Alegreya', Georgia, serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  /* Driven from src/skin.js */
  --drift: 0;
  --breath: 6s;
  --kind: var(--note);
}

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

html {
  color-scheme: dark;
  background: var(--lacquer-deep);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0 0 5rem;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-on-dark);
  -webkit-font-smoothing: antialiased;

  /* Charred casework under a spill of adobe-coloured church light. */
  background:
    radial-gradient(78% 48% at 76% -4%,
      oklch(0.520 0.075 76 / calc(0.22 - var(--drift) * 0.12)) 0%,
      transparent 72%),
    radial-gradient(105% 90% at 10% 0%,
      oklch(0.285 0.070 55 / calc(0.78 - var(--drift) * 0.38)) 0%,
      transparent 62%),
    radial-gradient(140% 120% at 50% 118%,
      var(--lacquer-deep) 0%, transparent 70%),
    var(--lacquer);
  background-attachment: fixed;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ==========================================================================
   Masthead — the nameboard above the jamb
   ========================================================================== */

.masthead {
  padding: 2.6rem 0 1.8rem;
  position: relative;
}

.masthead-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.masthead-copy { max-width: 52rem; }

.kicker {
  margin: 0 0 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--metal-lift);
}

.masthead h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 5.6vw, 4.0rem);
  line-height: 1.0;
  letter-spacing: -0.015em;
  margin: 0 0 0.85rem;
  color: oklch(0.930 0.070 88);
  text-wrap: balance;
  text-shadow:
    0 1px 0 oklch(0.99 0.02 80 / 0.28),
    0 -1px 0 oklch(0.10 0.04 45 / 0.62),
    0 8px 26px oklch(0.08 0.04 45 / 0.52);
}

.standfirst {
  font-family: var(--font-engrave);
  font-size: clamp(1rem, 1.9vw, 1.16rem);
  line-height: 1.5;
  color: var(--ink-on-dark-2);
  max-width: 64ch;
  margin: 0 0 1rem;
  text-wrap: pretty;
}

.masthead-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 0.5rem;
}

.doc-link {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--echo);
  text-decoration: none;
  border-bottom: 1px solid oklch(0.78 0.128 190 / 0.4);
  padding-bottom: 2px;
  transition: color 150ms ease, border-color 150ms ease;
}

.doc-link:hover {
  color: var(--note);
  border-bottom-color: var(--note);
}

/* ==========================================================================
   The body of the console
   Anti-lattice: panels are compartments cut into one shell, with distinct,
   non-repeating corner cuts rather than regular grid tiles.
   ========================================================================== */

main.container {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.4rem;
  padding-top: 0.5rem;
}

.panel {
  position: relative;
  min-width: 0;
  padding: 1.6rem 1.6rem 1.8rem;
  background:
    linear-gradient(90deg, transparent 0 2.55rem, oklch(0.65 0.11 70 / 0.075) 2.58rem 2.65rem, transparent 2.68rem),
    linear-gradient(174deg,
      oklch(0.235 0.052 55 / 0.95) 0%,
      oklch(0.175 0.042 48 / 0.97) 60%,
      oklch(0.140 0.034 44 / 0.99) 100%);
  border: 1px solid var(--hairline);
  box-shadow:
    inset 0 1px 0 oklch(0.99 0.02 80 / 0.18),
    0 12px 36px oklch(0.08 0.03 44 / calc(0.55 + var(--drift) * 0.2)),
    0 0 24px oklch(0.78 0.128 190 / calc(0.03 + var(--drift) * 0.05));
  backdrop-filter: blur(8px);
  animation: console-breath var(--breath) ease-in-out infinite;
}

@keyframes console-breath {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 oklch(0.99 0.02 80 / 0.18),
      0 12px 36px oklch(0.08 0.03 44 / calc(0.55 + var(--drift) * 0.2)),
      0 0 24px oklch(0.78 0.128 190 / calc(0.03 + var(--drift) * 0.05));
    border-color: oklch(0.36 0.03 162 / 0.85);
  }
  50% {
    box-shadow:
      inset 0 1px 0 oklch(0.99 0.02 80 / 0.32),
      0 16px 44px oklch(0.08 0.03 44 / calc(0.75 + var(--drift) * 0.2)),
      0 0 32px oklch(0.78 0.128 190 / calc(0.08 + var(--drift) * 0.08));
    border-color: oklch(0.44 0.035 162 / 0.95);
  }
}

/* Cabinet joints: related, but no repeated corner cut. */
.panel-pipe           { grid-column: 1 / -1; border-radius: 4px 24px 5px 18px; }
.panel-digital-medium { grid-column: span 5; border-radius: 18px 3px 22px 4px; }
.panel-waveguide      { grid-column: span 7; border-radius: 3px 20px 5px 26px; }
.panel-atmosphere     { grid-column: span 5; border-radius: 4px 22px 3px 17px; }
.panel-limits         { grid-column: span 7; border-radius: 21px 4px 25px 3px; }
.panel-render         { grid-column: span 5; border-radius: 3px 26px 4px 19px; }
.panel-score          { grid-column: span 7; border-radius: 24px 3px 18px 5px; }

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: 0 0 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--hairline-soft);
}

.panel h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--bone);
  text-shadow: 0 1px 0 oklch(0.99 0.02 80 / 0.22);
}

.panel-description {
  font-family: var(--font-engrave);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink-on-dark-2);
  margin: 0 0 1.25rem;
  max-width: 58ch;
}

/* ==========================================================================
   Console furniture: Bone-pale interactive controls
   ========================================================================== */

.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  min-width: 0;
}

.field-label,
.jump-label,
.metric-label,
.matrix-header {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-on-dark-3);
  font-weight: 700;
}

.field-label span {
  float: right;
  color: var(--metal);
  font-weight: 400;
  letter-spacing: 0;
}

.field-help,
.field-hint,
.scale-note,
.preset-note,
.validity-note,
.regime-note,
.modes-info {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--ink-on-dark-2);
}

select,
input[type="number"],
input[type="text"],
.custom-input {
  width: 100%;
  min-height: 2.65rem;
  padding: 0.52rem 0.75rem;
  color: var(--ink-on-bone);
  background:
    repeating-linear-gradient(90deg, transparent 0 2.1rem, oklch(0.48 0.09 60 / 0.14) 2.14rem 2.21rem, transparent 2.24rem),
    linear-gradient(172deg, var(--bone) 0%, var(--bone-shade) 100%);
  border: 1px solid var(--bone-deep);
  border-radius: 12px 7px 14px 8px;
  outline: none;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.5),
    inset 0 -2px 4px oklch(0.5 0.07 62 / 0.25),
    0 2px 6px oklch(0.06 0.03 44 / 0.42);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

select { cursor: pointer; }

select:focus-visible,
input:focus-visible,
button:focus-visible,
input[type="range"]:focus-visible {
  outline: 2px solid var(--echo);
  outline-offset: 3px;
}

.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

/* ==========================================================================
   Pipe length control strip
   ========================================================================== */

.length-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.6fr);
  gap: 1rem 1.8rem;
  align-items: end;
}

.control-row,
.quick-jumps-wrap { grid-column: 1 / -1; }

.control-row {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.length-entry-row,
.input-with-unit,
.render-config-row {
  display: flex;
  align-items: end;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.input-with-unit { flex-wrap: nowrap; }
.input-with-unit input { min-width: 8rem; }
.input-with-unit select { width: auto; min-width: 5.5rem; }

/* Range slider: continuous ribbon */
input[type="range"] {
  width: 100%;
  height: 1.6rem;
  margin: 0;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: ew-resize;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--note) 0%, var(--echo) 50%, var(--drift-c) 100%);
  box-shadow: inset 0 1px 3px oklch(0.06 0.03 155 / 0.8);
}

input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--note) 0%, var(--echo) 50%, var(--drift-c) 100%);
  box-shadow: inset 0 1px 3px oklch(0.06 0.03 155 / 0.8);
}

input[type="range"]::-webkit-slider-thumb {
  width: 22px;
  height: 22px;
  margin-top: -8px;
  appearance: none;
  background: linear-gradient(172deg, var(--bone) 0%, var(--bone-deep) 100%);
  border: 2px solid var(--lacquer-deep);
  border-radius: 50%;
  box-shadow:
    0 2px 8px oklch(0.06 0.03 155 / 0.7),
    0 0 0 3px oklch(0.912 0.036 78 / 0.25);
  transition: transform 120ms ease;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: linear-gradient(172deg, var(--bone) 0%, var(--bone-deep) 100%);
  border: 2px solid var(--lacquer-deep);
  border-radius: 50%;
  box-shadow:
    0 2px 8px oklch(0.06 0.03 155 / 0.7),
    0 0 0 3px oklch(0.912 0.036 78 / 0.25);
}

input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }

/* Boundary toggle: compound organ stop */
.mode-toggle {
  display: flex;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 1px solid var(--bone-deep);
  border-radius: 14px 8px 15px 9px;
  overflow: hidden;
  box-shadow: 0 2px 6px oklch(0.06 0.03 155 / 0.35);
}

.mode-toggle label {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.65rem;
  padding: 0.52rem 0.85rem;
  color: var(--ink-on-bone-2);
  background: linear-gradient(172deg, var(--bone-shade) 0%, var(--bone-deep) 100%);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  user-select: none;
  transition: color 140ms ease, background 140ms ease;
}

.mode-toggle label + label { border-left: 1px solid var(--bone-deep); }

.mode-toggle label:has(input:checked) {
  color: var(--ink-on-bone);
  background: linear-gradient(172deg, var(--bone) 0%, var(--bone-shade) 100%);
  font-weight: 700;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.6);
}

.mode-toggle input[type="radio"] {
  width: 0.85rem;
  height: 0.85rem;
  margin: 0;
  accent-color: var(--lacquer);
}

.scale-note {
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--metal-lift);
}

.quick-jumps-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--hairline-soft);
}

.quick-jumps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.quick-jumps button {
  padding: 0.35rem 0.65rem;
  color: var(--metal-lift);
  background: linear-gradient(172deg, oklch(0.24 0.03 162 / 0.8) 0%, oklch(0.18 0.028 158 / 0.9) 100%);
  border: 1px solid var(--hairline);
  border-radius: 12px 6px 13px 7px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  box-shadow: 0 1px 4px oklch(0.06 0.03 155 / 0.35);
  transition: color 140ms ease, border-color 140ms ease, transform 120ms ease;
}

.quick-jumps button:hover {
  color: var(--bone);
  border-color: var(--echo);
  transform: translateY(-1px);
}

/* ==========================================================================
   Live readout window — Glass aperture with category underglow
   ========================================================================== */

.readout-box {
  display: grid;
  grid-template-columns: minmax(13rem, 0.75fr) minmax(0, 1fr);
  gap: 1.4rem 2rem;
  margin-top: 1.6rem;
  padding: clamp(1.2rem, 2.5vw, 1.8rem);
  color: var(--ink-on-dark);
  background: linear-gradient(175deg,
    oklch(0.135 0.030 156 / 0.98) 0%,
    oklch(0.095 0.026 154 / 0.99) 100%);
  border: 1px solid oklch(0.40 0.035 162 / 0.7);
  border-top: 4px solid var(--kind);
  border-radius: 20px 14px 24px 16px;
  box-shadow:
    inset 0 2px 6px oklch(0.05 0.02 150 / 0.8),
    0 8px 24px oklch(0.06 0.03 155 / 0.6);
}

.pitch-display { min-width: 0; }

.pitch-lead {
  overflow-wrap: anywhere;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: clamp(2.4rem, 5.2vw, 4.8rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
  color: var(--bone);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px var(--kind);
}

.pitch-trail {
  margin-top: 0.75rem;
  color: var(--metal-lift);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.35;
}

.category-display { min-width: 0; }
.chip-row { display: flex; gap: 0.55rem; flex-wrap: wrap; }

.chip {
  display: inline-flex;
  max-width: 100%;
  padding: 0.3rem 0.6rem;
  color: var(--ink-on-bone);
  background: var(--bone);
  border: 1px solid var(--bone-deep);
  border-radius: 9px 5px 10px 6px;
  font-family: var(--font-mono);
  font-size: 0.70rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 1px 4px oklch(0.06 0.03 155 / 0.4);
}

.chip.category-note {
  color: oklch(0.22 0.04 62);
  background: linear-gradient(172deg, var(--note) 0%, oklch(0.70 0.14 62) 100%);
  border-color: oklch(0.65 0.13 62);
}

.chip.category-echo {
  color: oklch(0.18 0.04 190);
  background: linear-gradient(172deg, var(--echo) 0%, oklch(0.68 0.12 190) 100%);
  border-color: oklch(0.60 0.11 190);
}

.chip.category-drift {
  color: oklch(0.18 0.04 292);
  background: linear-gradient(172deg, var(--drift-c) 0%, oklch(0.60 0.14 292) 100%);
  border-color: oklch(0.55 0.13 292);
}

.chip-regime {
  background: linear-gradient(172deg, var(--bone-shade) 0%, var(--bone-deep) 100%);
  color: var(--ink-on-bone);
}

.chip-below-cutoff {
  color: oklch(0.99 0.02 350);
  background: linear-gradient(172deg, var(--rose) 0%, oklch(0.52 0.19 358) 100%);
  border-color: oklch(0.44 0.16 358);
}

.category-display .category-note {
  margin: 0.95rem 0 0.45rem;
  padding: 0;
  color: var(--bone);
  background: transparent;
  font-family: var(--font-engrave);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  line-height: 1.4;
}

.category-display .regime-note,
.category-display .modes-info {
  color: var(--metal-lift);
}

.category-display .modes-info {
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
}

.validity-note {
  grid-column: 1 / -1;
  color: var(--rose-lift);
  font-size: 0.85rem;
  line-height: 1.45;
}

/* ==========================================================================
   Engraved metric plaques
   ========================================================================== */

.metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.95rem 1.05rem;
  background: linear-gradient(172deg,
    oklch(0.205 0.032 162 / 0.85) 0%,
    oklch(0.155 0.028 158 / 0.90) 100%);
  border: 1px solid var(--hairline-soft);
  border-radius: 16px 10px 18px 11px;
  box-shadow:
    inset 0 1px 0 oklch(0.99 0.02 80 / 0.12),
    0 2px 6px oklch(0.06 0.03 155 / 0.35);
}

.metric-card:nth-child(even) { border-radius: 10px 18px 11px 16px; }

.metric-span-2 { grid-column: span 2; }

.metric-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-on-dark-3);
}

.metric-val,
.val-good,
.val-bad {
  overflow-wrap: anywhere;
  color: var(--bone-shade);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.val-bad { color: var(--rose-lift); }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap {
  margin-top: 1.25rem;
  overflow-x: auto;
  border-top: 1px solid var(--hairline-soft);
}

.data-table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.data-table th,
.data-table td {
  padding: 0.55rem 0.6rem 0.55rem 0;
  text-align: left;
  border-bottom: 1px solid var(--hairline-soft);
}

.data-table th {
  color: var(--ink-on-dark-3);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.data-table td {
  font-family: var(--font-mono);
  color: var(--ink-on-dark-2);
  font-variant-numeric: tabular-nums;
}

.warn-cell { color: var(--rose-lift); }

/* ==========================================================================
   The limits matrix
   ========================================================================== */

.limits-matrix {
  display: grid;
  grid-template-columns: minmax(8rem, 0.85fr) minmax(12rem, 1.4fr) minmax(10rem, 1fr);
  gap: 0.65rem 0.85rem;
  margin-top: 1.25rem;
  border-top: 1px solid var(--hairline-soft);
  padding-top: 0.85rem;
}

.matrix-header {
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--hairline-soft);
}

.matrix-cell {
  min-width: 0;
  padding: 0.65rem 0;
  font-size: 0.84rem;
  color: var(--ink-on-dark-2);
  border-bottom: 1px solid var(--hairline-soft);
}

.title-cell {
  font-family: var(--font-engrave);
  font-size: 0.96rem;
  color: var(--bone);
}

.chip-limit-idle {
  color: var(--ink-on-bone);
  background: var(--bone-shade);
}

.chip-limit-active {
  color: oklch(0.99 0.02 350);
  background: linear-gradient(172deg, var(--rose) 0%, oklch(0.52 0.19 358) 100%);
  border-color: oklch(0.44 0.16 358);
}

/* ==========================================================================
   Buttons — pressed metal and draw-stops
   ========================================================================== */

.btn {
  font-family: var(--font-body);
  font-size: 0.90rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--bone-shade);
  background: linear-gradient(172deg,
    oklch(0.325 0.030 292 / 0.85) 0%,
    oklch(0.235 0.028 292 / 0.92) 100%);
  border: 1px solid oklch(0.44 0.032 292 / 0.75);
  border-radius: 13px 8px 14px 9px;
  padding: 0.58rem 1.15rem;
  min-height: 2.65rem;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 oklch(0.75 0.03 292 / 0.28),
    0 3px 8px oklch(0.06 0.03 155 / 0.45);
  transition: transform 140ms ease, box-shadow 160ms ease, color 160ms ease, background 160ms ease;
}

.btn:hover:not(:disabled) {
  color: var(--bone);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 oklch(0.85 0.03 292 / 0.35),
    0 5px 12px oklch(0.06 0.03 155 / 0.55);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px oklch(0.06 0.03 155 / 0.6);
}

.btn:disabled {
  color: var(--ink-on-dark-3);
  border-color: var(--hairline-soft);
  background: oklch(0.20 0.024 292 / 0.6);
  cursor: not-allowed;
  box-shadow: none;
}

.btn-sm {
  min-height: 2.1rem;
  padding: 0.38rem 0.75rem;
  font-size: 0.78rem;
  border-radius: 9px 6px 10px 7px;
}

/* The render stop, drawn */
.btn-primary {
  color: var(--ink-on-bone);
  background: linear-gradient(172deg, var(--bone) 0%, var(--bone-shade) 62%, var(--bone-deep) 100%);
  border-color: var(--bone-deep);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.6),
    inset 0 -3px 5px oklch(0.5 0.05 66 / 0.3),
    0 4px 12px oklch(0.06 0.03 155 / 0.5);
}

.btn-primary:hover:not(:disabled) {
  color: var(--ink-on-bone);
  background: linear-gradient(172deg, oklch(0.96 0.03 78) 0%, var(--bone) 100%);
}

/* Forcing the boundary: the one loud colour, spent here and named */
.btn-primary.is-forced {
  color: oklch(0.99 0.02 350);
  background: linear-gradient(172deg,
    oklch(0.575 0.215 358) 0%,
    oklch(0.495 0.205 358) 58%,
    oklch(0.425 0.180 358) 100%);
  border-color: oklch(0.38 0.16 358);
  box-shadow:
    inset 0 1px 0 oklch(1 0 0 / 0.42),
    inset 0 -3px 6px oklch(0.38 0.16 358 / 0.5),
    0 4px 16px oklch(0.66 0.215 358 / 0.42);
}

.btn-primary.is-forced:hover:not(:disabled) {
  color: oklch(1 0 0);
  background: linear-gradient(172deg,
    oklch(0.62 0.22 358) 0%,
    oklch(0.53 0.21 358) 100%);
}

.btn-download {
  color: oklch(0.16 0.035 190);
  background: linear-gradient(172deg,
    oklch(0.86 0.14 190) 0%,
    oklch(0.74 0.13 192) 100%);
  border-color: oklch(0.60 0.11 192);
}

.render-action-row,
.result-actions,
.score-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 1.15rem;
}

/* ==========================================================================
   Render & score components
   ========================================================================== */

.render-config-row { align-items: flex-end; }
.render-config-row .field-group { flex: 1 1 9rem; }
.render-config-row .mode-toggle { flex: 2 1 17rem; }

.quote-card {
  border-radius: 18px 11px 20px 12px;
  padding: 1.05rem 1.2rem;
  margin-top: 1.15rem;
  background: linear-gradient(172deg,
    oklch(0.20 0.030 162 / 0.85) 0%,
    oklch(0.15 0.026 158 / 0.90) 100%);
  border: 1px solid var(--hairline-soft);
  box-shadow: inset 0 1px 0 oklch(0.99 0.02 80 / 0.12);
}

.quote-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.26rem 0;
  flex-wrap: wrap;
}

.quote-label {
  font-size: 0.85rem;
  color: var(--ink-on-dark-3);
}

.quote-val {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--bone-shade);
  font-variant-numeric: tabular-nums;
}

.quote-warning {
  margin-top: 0.85rem;
  padding: 0.75rem 0.9rem;
  border-radius: 12px 7px 13px 8px;
  border: 1px solid oklch(0.66 0.215 358 / 0.45);
  background: oklch(0.66 0.215 358 / 0.12);
  color: var(--rose-lift);
  font-size: 0.85rem;
  line-height: 1.5;
}

.progress-box {
  border-radius: 18px 10px 19px 11px;
  padding: 1.05rem 1.2rem;
  margin-top: 1.15rem;
  background: oklch(0.15 0.026 158 / 0.90);
  border: 1px solid var(--hairline-soft);
}

.progress-bar-track {
  height: 0.55rem;
  border-radius: 999px;
  background: var(--lacquer-deep);
  border: 1px solid var(--hairline-soft);
  overflow: hidden;
  box-shadow: inset 0 2px 4px oklch(0.05 0.02 150 / 0.8);
}

.progress-bar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--echo), var(--note));
  transition: width 180ms ease;
}

.progress-text {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--ink-on-dark-2);
  margin: 0.65rem 0 0;
  line-height: 1.5;
}

.result-box {
  border-radius: 20px 12px 18px 11px;
  padding: 1.15rem 1.25rem;
  margin-top: 1.15rem;
  background: oklch(0.15 0.026 158 / 0.90);
  border: 1px solid var(--hairline-soft);
}

.audio-preview-wrap {
  border-radius: 14px 8px 15px 9px;
  padding: 0.85rem;
  margin-top: 0.85rem;
  background: var(--lacquer-deep);
  border: 1px solid var(--hairline-soft);
}

audio { width: 100%; margin-top: 0.4rem; }

.score-box {
  border-radius: 18px 10px 20px 12px;
  padding: 1.1rem;
  margin-top: 1rem;
  background: var(--lacquer-deep);
  border: 1px solid var(--hairline-soft);
}

#score-output {
  width: 100%;
  height: 24rem;
  margin-bottom: 0;
  overflow: auto;
  white-space: pre-wrap;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-on-dark-2);
  tab-size: 2;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  max-width: 1140px;
  margin: 3.5rem auto 0;
  padding: 1.8rem 1.5rem 0;
  border-top: 1px solid var(--hairline-soft);
  font-size: 0.85rem;
  color: var(--ink-on-dark-3);
  line-height: 1.6;
}

.site-footer p { max-width: 60ch; margin: 0; }

.site-footer a {
  color: var(--echo);
  text-decoration: none;
  border-bottom: 1px solid oklch(0.78 0.128 190 / 0.35);
}

.site-footer a:hover {
  color: var(--note);
  border-bottom-color: var(--note);
}

code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--metal-lift);
}

/* ==========================================================================
   Responsive & Accessibility
   ========================================================================== */

@media (max-width: 900px) {
  .masthead h1 { font-size: clamp(2rem, 7vw, 3.4rem); }

  .panel-digital-medium,
  .panel-atmosphere,
  .panel-render,
  .panel-waveguide,
  .panel-limits,
  .panel-score { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .container,
  .masthead-inner { padding: 0 1.1rem; }

  .masthead { padding: 2.2rem 0 1.2rem; }
  main.container { gap: 1rem; }
  .panel { padding: 1.25rem 1.15rem 1.45rem; }

  .length-controls,
  .readout-box,
  .grid-2col,
  .grid-3col { grid-template-columns: 1fr; }

  .control-row,
  .quick-jumps-wrap { grid-column: 1; }
  .readout-box { gap: 1.2rem; }
  .validity-note { grid-column: 1; }

  .length-entry-row,
  .render-config-row { align-items: stretch; flex-direction: column; }
  .render-config-row .mode-toggle,
  .render-config-row .field-group { flex: 0 0 auto; }
  .input-with-unit { width: 100%; }
  .input-with-unit input { flex: 1; }
  .mode-toggle { width: 100%; }

  .metrics-grid { grid-template-columns: 1fr; }
  .metric-span-2 { grid-column: span 1; }

  .limits-matrix { grid-template-columns: 1fr; }
  .matrix-header { display: none; }
  .matrix-cell { border-bottom: 0; padding: 0.35rem 0; }
  .matrix-cell:has(.chip) { padding-bottom: 0.85rem; border-bottom: 1px solid var(--hairline-soft); }

  .quote-row { flex-direction: column; gap: 0.15rem; }
  .score-actions { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Dimensioned pipe comparison */
.pipe-scale { margin: 1.4rem 0; border: 1px solid var(--hairline); background: var(--lacquer-deep); }
.scale-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .65rem; padding: .8rem 1rem; }
.scale-toolbar h3 { margin: 0; font: 1.2rem var(--font-body); color: var(--ink-on-dark); }
.scale-toolbar > div { display: flex; gap: .5rem; }
.scale-toolbar button { padding: .4rem .65rem; border: 1px solid var(--metal-dim); background: transparent; color: var(--ink-on-dark); cursor: pointer; font: .85rem var(--font-body); }
.scale-toolbar button:hover, .scale-toolbar button[aria-pressed="true"] { background: var(--timber); }
.scale-toolbar button:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }
.pipe-scale canvas { display: block; width: 100%; height: 340px; touch-action: pan-y; }
.pipe-scale figcaption { padding: .7rem 1rem; }
.pipe-scale figcaption p { margin: 0; color: var(--ink-on-dark); font-size: .95rem; }
.pipe-scale figcaption .scale-caption { margin-top: .35rem; color: var(--ink-on-dark-2); font-size: .85rem; }
@media (max-width: 480px) { .pipe-scale canvas { height: 300px; } }
.frequency-entry { display: grid; gap: .3rem; color: var(--ink-on-dark-2); font-size: .85rem; }
.frequency-entry input { width: 10rem; max-width: 100%; }

/* ---- View tabs and the rank view ------------------------------------- */

/* The panels are items of the 12-column main grid. The view wrappers must not
   become items themselves, or each collapses to a single column. */
#view-pipe, #view-rank { display: contents; }
#view-pipe[hidden], #view-rank[hidden] { display: none; }

.view-tabs { border-bottom: 1px solid var(--hairline); background: var(--lacquer-deep); }
.view-tabs-inner { display: flex; gap: .4rem; padding: .5rem 0; }
.view-tab {
  padding: .45rem 1rem; border: 1px solid var(--metal-dim); background: transparent;
  color: var(--ink-on-dark); cursor: pointer; font: .95rem var(--font-body);
}
.view-tab[aria-pressed="true"] { background: var(--timber); border-color: var(--bone); }
.view-tab:focus-visible { outline: 2px solid var(--bone); outline-offset: 3px; }

.rank-roll {
  display: block; width: 100%; height: 420px;
  border: 1px solid var(--hairline); background: var(--lacquer-deep);
  touch-action: pan-y; cursor: crosshair;
}
.rank-roll:focus-visible { outline: 2px solid var(--bone); outline-offset: 2px; }
@media (max-width: 480px) { .rank-roll { height: 340px; } }

.panel-rank           { grid-column: 1 / -1; border-radius: 4px 24px 5px 18px; }
.panel-rank-controls  { grid-column: span 7; border-radius: 18px 3px 22px 4px; }
.panel-rank-render    { grid-column: span 5; border-radius: 3px 26px 4px 19px; }

.panel-rank-score      { grid-column: 1 / -1; border-radius: 24px 3px 18px 5px; }

.rank-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.rank-summary { margin: .7rem 0 .2rem; color: var(--ink-on-dark); font-size: 1rem; }
.rank-pool, .rank-voice { margin: .2rem 0; color: var(--ink-on-dark-2); font-size: .88rem; }
.rank-pool[data-over="true"] { color: #d59b7f; }
.render-progress { margin: .5rem 0; color: var(--ink-on-dark-2); font-size: .9rem; }
.render-output { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.render-output audio { max-width: 100%; }