/* squatch-rig chrome. Palette and type follow design/DIRECTION.md (squatch.cc warm).
   These custom properties are the ONE source of colour: the canvas reads them too
   (web/js/ui/theme.js), so seal red and every other colour is defined here once. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/inter-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/lora-latin-var.woff2') format('woff2'); }
@font-face { font-family: 'Lora'; font-style: italic; font-weight: 400 700; font-display: swap; src: url('../fonts/lora-latin-italic-var.woff2') format('woff2'); }

:root, [data-theme="dark"] {
  --canvas: #100D09; --paper: #1A150F; --paper-2: #231D15; --paper-hi: #201A12;
  --ink: #EDE6D8; --ink-soft: #A89878; --ink-faint: #4A4034; --rule: #3A3226;
  --accent: #D4A93F; --accent-ink: #17130D;
  --seal: #D9553D; /* the limit only: gain reduction, clipping, errors. Approved 2026-09-24 (squatch-skin DECISIONS.md D1). */
  --shadow: #000000;
  /* Bloom's lacquer finish (design/BLOOM-DIRECTION.md): a green field, gold leaf on it, a lamp that passes on green */
  --bloom: #1F3A2C; --bloom-leaf: #D4A93F; --bloom-led: #D9553D; /* the lamp is hardware.led.limit, the D1 seal; it was the pre-D1 #E0674F */
  color-scheme: dark;
}
:root[data-theme="light"], [data-theme="light"] {
  --canvas: #EEE9DF; --paper: #F7F5F0; --paper-2: #E8E0D4; --paper-hi: #FCFBF8;
  --ink: #1C160E; --ink-soft: #6B5B3E; --ink-faint: #CBBFA9; --rule: #D4CBBB;
  --accent: #86610A; --accent-ink: #FFFFFF;
  --seal: #9A2E1B;
  --shadow: #6B5B3E;
  --bloom: #1F3A2C; --bloom-leaf: #C9A04A; --bloom-led: #D9553D; /* leaf 5.1:1 and lamp 3.1:1 on the field (a lamp keeps the dark-stage seal: light --seal is 1.6:1 there); --accent is 2.8:1 */
  color-scheme: light;
}
:root {
  /* aliases used by modules written against the earlier token names */
  --bg: var(--canvas); --panel: var(--paper); --panel-2: var(--paper-2); --ink-dim: var(--ink-soft); --line: var(--rule);
  --danger: var(--seal); --focus: var(--accent);
  --ui: Inter, ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font: var(--ui);
  --hand: Lora, ui-serif, Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --d-fast: 140ms; --d-med: 240ms; --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --gap: 8px; --pad: 12px; --radius: 6px; --ctl: 30px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--canvas); color: var(--ink); font: 13px/1.4 var(--ui);
  display: grid; grid-template-rows: auto 1fr auto; overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, select, input { font: inherit; color: inherit; }
button, select {
  background: transparent; border: 1.25px solid var(--rule); border-radius: var(--radius);
  min-height: var(--ctl); padding: 3px 10px; cursor: pointer;
  transition: border-color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease);
}
select { padding-right: 6px; }
button:hover, select:hover { border-color: var(--ink-soft); }
button.primary, .tp-play { background: var(--ink); color: var(--paper); border-color: var(--ink); font-weight: 600; }
button.primary:hover, .tp-play:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary[aria-pressed="true"], .tp-play[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.danger { color: var(--seal); }
button.toggle[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
button.icon { min-width: var(--ctl); padding: 3px 6px; display: inline-grid; place-items: center; }
button.icon svg { width: 16px; height: 16px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stage canvas:focus-visible { outline-offset: -3px; }
input[type=range] { accent-color: var(--accent); }

/* ---------------------------------------------------------------- top strip */
.bar {
  display: flex; align-items: center; gap: 6px var(--gap); flex-wrap: wrap;
  padding: 7px var(--pad); border-bottom: 1px solid var(--rule); background: var(--paper);
  position: relative; z-index: 2;
}
/* back to squatch-home, the index of every page: quiet, in the hand face, ruled off from the brand */
.home-link { display: inline-flex; align-items: baseline; gap: 4px; padding: 3px 10px 3px 0; margin-right: 2px; border-right: 1px solid var(--rule);
  color: var(--ink-soft); text-decoration: none; font: italic 500 14px/1 var(--hand); white-space: nowrap; }
.home-link:hover, .home-link:focus-visible { color: var(--ink); }
.brand { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; margin-right: 4px; }
.brand svg { width: 20px; height: 27px; flex: none; }
.brand .wordmark { font: 600 14px/1 var(--ui); letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.brand .wordmark i { font: italic 500 17px/1 var(--hand); letter-spacing: 0; text-transform: none; color: color-mix(in srgb, var(--accent) 55%, var(--ink)); margin-left: 2px; }
.bar-group { display: flex; align-items: center; gap: 6px; }
.support-link { color: var(--ink-soft); text-decoration: none; border: 1px solid var(--rule); border-radius: var(--radius); padding: 5px 9px; white-space: nowrap; }
.support-link:hover, .support-link:focus-visible { color: var(--ink); border-color: var(--ink-soft); }
.restore-output:not([hidden]) { border-color: var(--seal); color: var(--seal); font-weight: 700; }
.bar-preset { flex: 1 1 260px; min-width: 0; }
.bar-row2 { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; flex-basis: 100%; padding-top: 6px; border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
.bar-io { gap: 10px; }
.bar-io .field select { max-width: 150px; }
/* Theme, Skin and Pedal: three short picks, so they stay out of the way of the groups above */
.bar-pick { gap: 10px; }
.bar-pick .field select { max-width: 150px; }
.bar-pick .field > span { min-width: 38px; }
.bar .bar-more { display: none; }
.sep { width: 1px; height: 20px; background: var(--rule); margin: 0 2px; }
.field { display: flex; flex-direction: column; gap: 3px; }
.field.inline { flex-direction: row; align-items: center; gap: 6px; }
.field > span, .tp-field > span { color: var(--ink-soft); font: 600 10px/1 var(--ui); text-transform: uppercase; letter-spacing: 0.12em; }
.field select { max-width: 170px; }
#preset-name {
  flex: 1 1 auto; min-width: 120px; max-width: 460px; background: transparent; border: 1.25px solid transparent; border-radius: var(--radius);
  padding: 2px 8px; font: italic 500 17px/1.3 var(--hand); color: var(--ink); text-overflow: ellipsis;
}
#preset-name:hover, #preset-name:focus { border-color: var(--rule); }

/* transport (web/js/ui/transport.js owns its markup; this only places it) */
.tp { gap: 6px 12px; }
.tp-meter { background: var(--rule); height: 6px; }
.tp-meter-fill { background: var(--ink); }
.tp-meter-peak { background: var(--accent); }

/* ---------------------------------------------------------------- stage + inspector */
.main { display: grid; grid-template-rows: 1fr auto; min-height: 0; position: relative; }
.stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: var(--canvas); }
.stage canvas { display: block; outline: none; touch-action: none; }
.stage.drop::after { content: "Drop .nam on a head, .wav on a cab, or a preset .json"; position: absolute; inset: 12px; border: 1.5px dashed var(--accent); border-radius: 12px; display: grid; place-items: center; color: var(--accent); pointer-events: none; font: italic 500 16px var(--hand); }

.inspector {
  border-top: 1px solid var(--rule); background: var(--paper); padding: 12px var(--pad) 14px; overflow-y: auto;
  max-height: min(44vh, 320px);
}
.inspector:has(.insp-empty) { padding-block: 8px; }
.insp { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: 6px 28px; align-items: start; }
.insp-side { display: grid; gap: 8px; align-content: start; }
.insp-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.insp-title { flex: 1; min-width: 0; font: italic 500 22px/1.2 var(--hand); background: transparent; border: 1.25px solid transparent; border-radius: var(--radius); padding: 0 4px; margin-left: -5px; }
.insp-title:hover, .insp-title:focus { border-color: var(--rule); }
.insp-type { color: var(--ink-soft); font: 600 10px/1 var(--ui); text-transform: uppercase; letter-spacing: 0.14em; }
.insp-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.insp-note { color: var(--ink-soft); font-size: 12px; margin: 0; }
.insp-readout { font: 12px/1.5 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.insp-readout b { color: var(--ink); font-weight: 500; }
.insp-readout .gr b { color: var(--seal); }
.insp-empty { display: flex; gap: 6px 18px; align-items: baseline; flex-wrap: wrap; color: var(--ink-soft); }
.insp-empty h2 { font: italic 500 15px/1.3 var(--hand); color: var(--ink); margin: 0; }
.insp-empty p { margin: 0; font-size: 12px; }
kbd { font: 11px var(--mono); border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; color: var(--ink); }
.panel { border: 1px solid var(--rule); border-radius: 8px; padding: 10px; background: var(--paper-2); display: grid; gap: 8px; }
.panel select { width: 100%; }
.params { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 4px 24px; align-content: start; }
.param { display: grid; grid-template-columns: 74px 1fr 72px; align-items: center; gap: 10px; min-height: 30px; }
.param label { color: var(--ink-soft); font: 600 10px/1.2 var(--ui); text-transform: uppercase; letter-spacing: 0.1em; }
.param output { font: 12px var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
.param input[type=range] { width: 100%; margin: 0; }
.param select { min-height: 28px; }

/* chain strip: pans a chain wider than a phone (the Spark-app convention); a real range input */
.chain-strip { position: absolute; left: 16px; right: 16px; bottom: 10px; display: none; align-items: center; gap: 8px; z-index: 3; }
.chain-strip.on { display: flex; }
.chain-strip span { font: 600 9px/1 var(--ui); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.chain-strip input { flex: 1; margin: 0; height: 28px; }

/* ---------------------------------------------------------------- status */
.status { display: flex; align-items: center; gap: 16px; padding: 5px var(--pad); border-top: 1px solid var(--rule); background: var(--paper); color: var(--ink-soft); font-size: 11.5px; white-space: nowrap; overflow: hidden; }
.status b { color: var(--ink); font-weight: 500; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.status .grow { flex: 1; }
.status .credit { overflow: hidden; text-overflow: ellipsis; font-size: 11px; min-width: 0; }
.status a { color: inherit; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.meter { position: relative; width: 110px; height: 5px; border-radius: 3px; background: var(--rule); overflow: hidden; }
#meter-fill { position: absolute; inset: 0 auto 0 0; background: var(--ink); }
#meter-peak { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); }

.menu[hidden], .toast[hidden] { display: none; }
.menu { position: fixed; z-index: 10; background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 6px; display: grid; gap: 1px; min-width: 170px; box-shadow: 0 10px 30px color-mix(in srgb, var(--shadow) 30%, transparent); }
.menu button { text-align: left; border: 0; background: transparent; min-height: 30px; }
.menu button:hover, .menu button:focus { background: var(--paper-2); }
.toast { position: fixed; left: 50%; bottom: 44px; transform: translateX(-50%); background: var(--paper); border: 1px solid var(--rule); padding: 8px 14px; border-radius: 8px; z-index: 20; max-width: 80vw; box-shadow: 0 8px 24px color-mix(in srgb, var(--shadow) 25%, transparent); }

/* ---------------------------------------------------------------- intro: an ink wash, then the mark */
.intro { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--canvas); cursor: pointer; }
.intro svg.wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro .lockup { position: relative; display: grid; justify-items: center; gap: 14px; color: var(--paper); pointer-events: none; }
.intro .lockup svg { width: min(18vh, 150px); height: auto; }
.intro .lockup .wordmark { font: 600 clamp(18px, 3.2vh, 26px)/1 var(--ui); letter-spacing: 0.3em; text-transform: uppercase; }
.intro .lockup .wordmark i { font: italic 500 1.3em/1 var(--hand); letter-spacing: 0; text-transform: none; color: var(--accent); margin-left: 4px; }
.intro .skip { position: absolute; right: 16px; bottom: 16px; color: var(--ink-soft); border-color: var(--rule); background: var(--canvas); }
.intro.out { opacity: 0; transition: opacity 420ms var(--ease); pointer-events: none; }

/* ---------------------------------------------------------------- narrow */
@media (max-width: 1240px) {
  .bar-io .field select, .bar-pick .field select { max-width: 112px; }
}
/* the top strip is full at laptop widths: the back-link keeps just its arrow (and its title) */
@media (max-width: 1440px) { .home-link .home-label { display: none; } }
@media (max-width: 820px) {
  .insp { grid-template-columns: 1fr; }
  .params { grid-template-columns: 1fr; }
  .status .credit, .status .hide-narrow { display: none; }
}
@media (max-width: 640px) {
  .bar { padding: 6px 10px; gap: 6px; }
  .bar-preset, .bar-edit, .bar-io, .bar-pick { display: none; }
  .bar .bar-more { display: inline-grid; }
  .bar-view { margin-left: auto; }
  :root { --ctl: 38px; }
  .brand .wordmark { font-size: 11px; letter-spacing: 0.1em; }
  .bar:not(.open) .tp-meter { display: none; }
  .insp-cpu { display: none; }
  .status > span:has(> #cap), .status > span:has(> #sr), .status .meter, #renderer { display: none; }
  .bar-view { order: 3; }
  .bar-pick { order: 3; } /* with the view buttons, above the transport */
  .bar-pick .field select { max-width: 150px; } /* a phone has the room for the full labels */
  .bar-row2 { order: 4; padding-top: 6px; }
  /* phone: the strip keeps Play; everything else lives behind "More" */
  .bar:not(.open) .bar-row2 > :not(#transport):not(#play),
  .bar:not(.open) #transport > :not(.tp-play):not(.tp-meter) { display: none; }
  .bar:not(.open) .bar-row2 { border-top: 0; padding-top: 0; flex-basis: auto; order: 1; }
  .bar.open .bar-preset, .bar.open .bar-edit, .bar.open .bar-io, .bar.open .bar-pick { display: flex; flex-basis: 100%; flex-wrap: wrap; }
  .bar.open #preset-name { font-size: 15px; }
  .tp-meter { width: 64px; }
  .inspector { max-height: 46vh; }
  .inspector:has(.insp-empty) { display: none; }
  .param { grid-template-columns: 76px 1fr 64px; min-height: 40px; }
  .status { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}
.brand .mark { width: 20px; height: 27px; flex: none; background: currentColor; -webkit-mask: url(../img/squatch-mark.svg) center / contain no-repeat; mask: url(../img/squatch-mark.svg) center / contain no-repeat; }
.intro .lockup .mark { display: block; width: min(16vh, 128px); aspect-ratio: 203 / 279; background: currentColor; -webkit-mask: url(../img/squatch-mark.svg) center / contain no-repeat; mask: url(../img/squatch-mark.svg) center / contain no-repeat; }

/* Lab panel (web/js/lab/): a modal around <squatch-lab-view>; tokens only. */
.lab-dialog { width: min(1100px, 96vw); max-height: 94vh; overflow: auto; padding: var(--pad); background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.lab-dialog::backdrop { background: color-mix(in srgb, var(--shadow) 55%, transparent); }
.lab-form { display: grid; gap: var(--gap); }
.lab-dialog-head { display: flex; gap: var(--gap); align-items: baseline; flex-wrap: wrap; }
.lab-dialog-head h2 { margin: 0; font: italic 500 22px/1.2 var(--hand); }
.lab-sub { color: var(--ink-dim); font-size: 12px; }
.lab-close { margin-left: auto; }
.lab-row { display: flex; gap: var(--gap); align-items: end; flex-wrap: wrap; }
.lab-slot { display: grid; gap: 2px; font-size: 12px; color: var(--ink-dim); }
.lab-slot input { max-width: 240px; }
.lab-status { margin: 0; font: 12px var(--mono); color: var(--ink-dim); min-height: 1.4em; }