/* Thermalsock Labs — "Soundings" skin.
 *
 * The site is a nautical chart of a fjord that isn't there. Every page is a
 * sheet of that chart: paper, a neat-line border, navy survey ink, and one
 * magenta for the recommended track (the primary action, the live state,
 * the thing to follow). Buoy colours carry meaning, not decoration.
 *
 * Loaded LAST on every page, after chrome.css and the app's own CSS, so it
 * wins without !important. Three jobs:
 *
 *   1. Re-point both token families (chrome's --paper/--ink/--rust and the
 *      apps' --chassis/--panel/--text/--accent) at the chart palette.
 *   2. Skin the shared components (.card, .btn, .seg, fields, sliders) and
 *      every app's own button classes as printed chart furniture.
 *   3. .deep — deep water. A dark navy token scope for anything that draws
 *      light-on-dark (scopes, spectrograms, device panels' surroundings).
 *      Old class names .clay-screen / .clay-glass are kept as aliases.
 *
 * Palette
 *   paper    #FBFAF4   the sheet
 *   land     #EDDDA0   land tint, used for raised/selected surfaces
 *   shallows #BFDDEF   water tint, hover and wells
 *   ink      #13283C   survey ink: text, rules, borders
 *   magenta  #B0287A   the track: primary, live, focus
 *   port     #C8341F   red buoy    — composing tools, record, danger
 *   stbd     #2E7D46   green buoy  — live-input tools, ok
 *   special  #D9A21B   yellow buoy — visuals and training
 *   deep     #0F2233   deep water: displays
 */

:root:root {
  --chart-paper: #FBFAF4;
  --chart-land: #EDDDA0;
  --chart-shallows: #BFDDEF;
  --chart-mid: #DCEBF3;
  --chart-ink: #13283C;
  --chart-ink-soft: #34506B;
  --chart-ink-faint: #56708A;
  --chart-magenta: #B0287A;
  --chart-magenta-deep: #8E1D61;
  --chart-port: #C8341F;
  --chart-stbd: #2E7D46;
  --chart-special: #D9A21B;
  --chart-deep: #0F2233;
  --chart-deep-2: #16304A;
  --chart-light: #F5D76E;

  --display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --ui: 'Azeret Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --body: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --rule: 1.5px solid var(--chart-ink);
  --hair: 1px solid rgba(19, 40, 60, 0.22);

  /* aliases the earlier skin exported; kept so nothing that used them breaks */
  --clay: var(--chart-paper);
  --clay-deep: var(--chart-mid);
  --clay-lift: var(--chart-paper);
  --ember: var(--chart-magenta);
  --ember-hi: #C9449A;
  --ember-deep: var(--chart-magenta-deep);
  --glass: var(--chart-deep);
  --glass-2: var(--chart-deep-2);
  --glow: var(--chart-light);
  --silk: var(--display);
  --raise: none;
  --raise-sm: none;
  --raise-xs: none;
  --press: inset 0 0 0 1.5px var(--chart-ink);
  --well: inset 0 0 0 1px rgba(19, 40, 60, 0.35);
  --shade: rgba(19, 40, 60, 0.18);
  --shine: transparent;

  /* chrome.css family */
  --paper: var(--chart-paper);
  --paper-deep: var(--chart-paper);
  --void: #EEF3F4;
  --grid-line: rgba(19, 40, 60, 0.06);
  --ink: var(--chart-ink);
  --ink-soft: var(--chart-ink-soft);
  --ink-faint: var(--chart-ink-faint);
  --rust: var(--chart-magenta);
  --rust-hi: #C9449A;
  --hairline: rgba(19, 40, 60, 0.22);
  --danger: var(--chart-port);
  --serif-display: var(--display);
  --serif-body: var(--body);
  --serif: var(--display);
  --mono: var(--ui);
  --app-accent: var(--chart-magenta);

  /* app family */
  --chassis: var(--chart-paper);
  --panel: var(--chart-paper);
  --panel-raised: #FFFFFF;
  --hairline-strong: rgba(19, 40, 60, 0.45);
  --text: var(--chart-ink);
  --text-dim: var(--chart-ink-soft);
  --sans: var(--ui);
  --accent: var(--chart-magenta);
  --accent-dim: rgba(176, 40, 122, 0.25);
  --accent-fg: #FFFFFF;

  /* chip hues: buoy colours first, then two more for apps that need five */
  --amber: var(--chart-special);
  --violet: #5B4BB0;
  --teal: var(--chart-stbd);
  --pink: var(--chart-magenta);
  --blue: #2B6FB0;
  --gold: var(--chart-special);

  color-scheme: light;
}

/* ---------- Deep water: a dark token scope for displays ---------- */
.deep,
.clay-screen {
  --paper: var(--chart-deep);
  --paper-deep: var(--chart-deep-2);
  --void: #0A1826;
  --ink: #EAF1F5;
  --ink-soft: #A9BED0;
  --ink-faint: #7F98AE;
  --hairline: rgba(191, 221, 239, 0.16);
  --grid-line: rgba(191, 221, 239, 0.07);
  --chassis: var(--chart-deep);
  --panel: var(--chart-deep);
  --panel-raised: var(--chart-deep-2);
  --hairline-strong: rgba(191, 221, 239, 0.3);
  --text: #EAF1F5;
  --text-dim: #A9BED0;
  --accent: var(--chart-light);
  --rust: var(--chart-light);
  --accent-fg: var(--chart-deep);
  --amber: #F5C451;
  --violet: #B7A8FF;
  --teal: #6FD3A6;
  --pink: #FF8CC6;
  --blue: #8CC4F0;
  color-scheme: dark;
  background: var(--chart-deep);
  color: var(--text);
  border: var(--rule);
  border-radius: 0;
}

/* ---------- The sheet ---------- */
html { background: var(--chart-paper); }
body {
  background-color: var(--chart-paper);
  background-image:
    linear-gradient(rgba(19, 40, 60, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 40, 60, 0.045) 1px, transparent 1px);
  background-size: 120px 120px;
  background-position: -1px -1px;
  color: var(--chart-ink);
  font-family: var(--body);
}
::selection { background: rgba(176, 40, 122, 0.22); }
:focus-visible { outline: 2px solid var(--chart-magenta); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: rgba(19, 40, 60, 0.4) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(19, 40, 60, 0.35); border: 3px solid var(--chart-paper); }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Title block: every page header is a chart's title panel ---------- */
.ts-topbar,
.topbar {
  position: relative;
  margin: 0;
  padding: 14px 28px;
  border: 0;
  border-radius: 0;
  background: var(--chart-paper);
  box-shadow: none;
  /* a chart neat-line: a heavy rule with a hairline inside it */
  border-bottom: 3px solid var(--chart-ink);
  outline: none;
}
.ts-topbar::after,
.topbar::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 3px;
  height: 1px;
  background: var(--chart-ink);
  opacity: 0.6;
  pointer-events: none;
}
.brand-mark { color: var(--chart-magenta); }
.brand-mark rect[stroke], .brand-mark line { stroke: var(--chart-ink); }
.brand-appname {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--chart-ink);
  line-height: 1.05;
}
.brand-sub {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--chart-ink-faint);
  margin-top: 3px;
}
.brand-lockup:hover .brand-appname { color: var(--chart-magenta); filter: none; }

/* ---------- Buttons: printed boxes ---------- */
.btn,
button.pill,
a.pill,
.seg button,
.ts-session-note button,
html body :is(.pill.action, .pill.record, .pill.toggle, .pill.toggle-pill, .pill.help-btn, .pill.audition,
  .btn-small, .tsl, .io-btn, .btn-secondary, .stage-bypass, .rack-pill, .view-tab,
  .panel-toggle, .transport-btn, .hs-btn, .tut-btn, .toggle-btn, .mode-tab, .mini-btn,
  .add-route, .af-btn, .af-addport, .lesson-play-btn, .snapshot-btn,
  .try-choice-btn, .grow, .spaced) {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--chart-ink);
  background: var(--chart-paper);
  border: var(--rule);
  border-radius: 0;
  box-shadow: none;
  filter: none;
  transition: background-color .12s, color .12s;
}
.btn,
button.pill,
a.pill { padding: 8px 14px; }
.btn:hover,
button.pill:hover,
a.pill:hover,
.seg button:hover,
.ts-session-note button:hover,
html body :is(.pill.action, .pill.record, .pill.toggle, .pill.toggle-pill, .pill.help-btn, .pill.audition,
  .btn-small, .tsl, .io-btn, .btn-secondary, .stage-bypass, .rack-pill, .view-tab, .panel-toggle,
  .transport-btn, .hs-btn, .tut-btn, .toggle-btn, .mode-tab, .mini-btn, .add-route, .af-btn,
  .af-addport, .lesson-play-btn, .snapshot-btn, .try-choice-btn, .grow, .spaced):hover {
  background: var(--chart-shallows);
  color: var(--chart-ink);
  border-color: var(--chart-ink);
}
.btn:active,
.seg button:active { transform: translateY(1px); box-shadow: none; }

/* Latched: filled with ink, like a shaded symbol on the chart. */
.btn[aria-pressed="true"]:not(.primary),
.seg button.active,
.seg button[aria-pressed="true"],
html body :is(.pill.toggle, .pill.toggle-pill, .pill.record, .btn-small, .tsl, .io-btn, .stage-bypass, .rack-pill,
  .view-tab, .panel-toggle, .transport-btn, .hs-btn, .toggle-btn, .mode-tab, .mini-btn, .snapshot-btn,
  .try-choice-btn, .grow, .spaced):is(.on, .active, [aria-pressed="true"], [aria-selected="true"]) {
  background: var(--chart-ink);
  color: var(--chart-paper);
  border-color: var(--chart-ink);
  box-shadow: none;
}

/* The one thing a panel is for: magenta, the recommended track. */
.btn.primary,
html body :is(.btn-primary, .tsl.primary, .tut-btn.primary, .tb-primary, .af-btn-primary, .gen-btn) {
  color: #FFFFFF;
  background: var(--chart-magenta);
  border: 1.5px solid var(--chart-magenta);
  border-radius: 0;
  box-shadow: none;
  filter: none;
  font-family: var(--ui);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.btn.primary:hover,
html body :is(.btn-primary, .tsl.primary, .tut-btn.primary, .tb-primary, .af-btn-primary, .gen-btn):hover {
  background: var(--chart-magenta-deep);
  border-color: var(--chart-magenta-deep);
  color: #FFFFFF;
  filter: none;
}
.btn.quiet,
html body .tut-skip {
  background: transparent;
  border-color: transparent;
  color: var(--chart-ink-soft);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.btn.quiet:hover { background: transparent; color: var(--chart-magenta); }
.btn:disabled,
button:disabled { opacity: 0.4; cursor: not-allowed; }
html body :is(.btn.danger, .btn-small.danger, .tsl.danger, .mini-btn.danger, .hs-btn.danger, .tb-danger) { color: var(--chart-port); }

/* Readouts: values in a boxed legend, never pressable. */
.pill,
.readout-pill,
html body .topbar-right :is(.pill.live, .pill.mode, span.pill:not(.toggle)) {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--chart-ink-soft);
  background: transparent;
  border: var(--hair);
  border-radius: 0;
  box-shadow: none;
  padding: 7px 11px;
}
.status-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--chart-ink-faint);
  box-shadow: none;
}
.status-dot.live {
  background: var(--chart-magenta);
  border-color: var(--chart-magenta);
  box-shadow: 0 0 0 3px rgba(176, 40, 122, 0.18);
  animation: ts-flash 2s steps(1) infinite;
}
@keyframes ts-flash { 0%, 80% { opacity: 1; } 85%, 100% { opacity: 0.25; } }

/* ---------- Panels: chart insets ---------- */
.card {
  background: var(--chart-paper);
  border: var(--rule);
  border-radius: 0;
  box-shadow: 4px 4px 0 rgba(19, 40, 60, 0.12);
  padding: 18px;
}
.card-title,
.card > h3,
.panel-group h2,
.panel-group h3 {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--chart-ink);
}
.card-title { border-bottom: 1px dashed rgba(19, 40, 60, 0.35); padding-bottom: 10px; }
.chip {
  border-radius: 50%;
  background: var(--chart-paper) !important;
  border: 1.5px solid currentColor;
  box-shadow: none;
}
.chip.amber  { color: var(--chart-special); }
.chip.violet { color: #5B4BB0; }
.chip.teal   { color: var(--chart-stbd); }
.chip.pink   { color: var(--chart-magenta); }
.chip.blue   { color: #2B6FB0; }
.chip.cyan   { color: var(--chart-magenta); }

.readout dd,
.readout-line b,
.slider-row > .val { color: var(--chart-magenta); font-family: var(--ui); }
.field > span,
.field > label,
.slider-row > label {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--chart-ink-soft);
}

/* ---------- Form controls ---------- */
select,
input[type="text"],
input[type="number"],
input[type="search"],
input[type="email"],
input[type="url"],
textarea,
.card select,
.card input[type="text"],
.card input[type="number"],
.card input[type="search"] {
  background-color: #FFFFFF;
  color: var(--chart-ink);
  border: 1px solid rgba(19, 40, 60, 0.55);
  border-radius: 0;
  box-shadow: none;
  font-family: var(--ui);
  font-size: 12px;
}
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 30px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--chart-ink) 50%),
    linear-gradient(135deg, var(--chart-ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
select:focus,
input:focus,
textarea:focus,
.card select:focus,
.card input:focus {
  outline: none;
  border-color: var(--chart-magenta);
  box-shadow: 0 0 0 2px rgba(176, 40, 122, 0.25);
}
input[type="checkbox"],
input[type="radio"] { accent-color: var(--chart-magenta); }

input[type="range"],
input[type="range"].tsl-range {
  -webkit-appearance: none;
  appearance: none;
  height: 3px;
  border-radius: 0;
  background: var(--chart-ink);
  box-shadow: none;
  accent-color: var(--chart-magenta);
  outline: none;
}
input[type="range"]::-webkit-slider-thumb,
input[type="range"].tsl-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--chart-ink);
  cursor: pointer;
  background: var(--chart-paper);
  box-shadow: none;
}
input[type="range"]::-moz-range-thumb,
input[type="range"].tsl-range::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--chart-ink);
  cursor: pointer;
  background: var(--chart-paper);
  box-shadow: none;
}
input[type="range"]:focus-visible::-webkit-slider-thumb { background: var(--chart-magenta); border-color: var(--chart-magenta); }
input[type="range"]::-moz-range-progress { background: var(--chart-magenta); height: 3px; }

.seg {
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.seg button { border-radius: 0; margin-left: -1.5px; }
.seg button:first-child { margin-left: 0; }

/* Controls inside deep water */
.deep select, .clay-screen select,
.deep input[type="text"], .clay-screen input[type="text"],
.deep input[type="number"], .clay-screen input[type="number"],
.deep input[type="search"], .clay-screen input[type="search"] {
  background-color: #0A1826;
  color: var(--text);
  border-color: rgba(191, 221, 239, 0.35);
}
.deep .card, .clay-screen .card {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(191, 221, 239, 0.25);
  box-shadow: none;
}

/* ---------- Session note + related ---------- */
.ts-session-note {
  background: var(--chart-paper);
  border: var(--hair);
  border-radius: 0;
  box-shadow: none;
  color: var(--chart-ink-soft);
  font-family: var(--ui);
}
.ts-related a {
  font-family: var(--ui);
  font-weight: 400;
  background: var(--chart-paper);
  border: var(--hair);
  border-radius: 0;
  box-shadow: none;
  color: var(--chart-ink);
}
.ts-related a:hover { color: var(--chart-magenta); border-color: var(--chart-magenta); }
.ts-related-label { font-family: var(--ui); font-weight: 400; letter-spacing: 0.16em; }

/* ---------- Legal footer ---------- */
#legalBar {
  background: var(--chart-paper) !important;
  border-top: 3px solid var(--chart-ink) !important;
  box-shadow: none !important;
  color: var(--chart-ink-faint) !important;
  font-family: var(--ui) !important;
  font-weight: 400;
  letter-spacing: 0.06em;
}
#legalBar a { color: var(--chart-ink-soft) !important; }
#legalBar a:hover { color: var(--chart-magenta) !important; }

a { color: inherit; }
h1, h2 { color: var(--chart-ink); }

/* ==========================================================================
   Displays that draw their own dark background get a deep-water frame:
   a navy panel with a single ink border, no glass, no glow.
   ========================================================================== */
.clay-glass,
[data-app="berlin-lab"] .sig-svg,
[data-app="berlin-lab"] .scope,
[data-app="berlin-lab"] .card canvas,
[data-app="oscilloscope"] canvas#scopeCanvas,
[data-app="granulator"] .card canvas,
[data-app="spectral-mutation-lab"] canvas,
[data-app="subharmonicon"] canvas,
[data-app="sound-design"] canvas {
  background-color: var(--chart-deep);
  border: var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 rgba(19, 40, 60, 0.12) !important;
}

/* ==========================================================================
   Berlin Lab: the two machines sit on the chart as moored hulls, framed by
   a ruled inset with a mono caption, like an inset plan on a sheet.
   ========================================================================== */
[data-app="berlin-lab"] .transport {
  border: 0;
  border-bottom: var(--rule);
  border-radius: 0;
  padding: 10px 28px;
  margin: 0 0 26px;
  background: rgba(251, 250, 244, 0.94);
  box-shadow: none;
  backdrop-filter: blur(6px);
}
[data-app="berlin-lab"] .transport .cap {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--chart-ink-faint);
}
[data-app="berlin-lab"] .transport input[type=number] {
  width: 80px;
  background: var(--chart-deep);
  color: var(--chart-light);
  font-family: var(--ui);
  font-size: 15px;
  text-align: center;
  border: var(--rule);
  box-shadow: none;
}
[data-app="berlin-lab"] .transport .status { font-family: var(--ui); color: var(--chart-ink-soft); }
[data-app="berlin-lab"] .rig { gap: 40px; }
[data-app="berlin-lab"] .device {
  border: var(--rule);
  border-radius: 0;
  padding: 14px 16px 18px;
  background: var(--chart-paper);
  box-shadow: 6px 6px 0 rgba(19, 40, 60, 0.12);
}
[data-app="berlin-lab"] .device > header { border-bottom: 1px dashed rgba(19, 40, 60, 0.35); margin: 0 0 14px; padding: 0 0 10px; }
[data-app="berlin-lab"] .device h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--chart-ink);
}
[data-app="berlin-lab"] .device .sub {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--chart-magenta);
}
[data-app="berlin-lab"] .panel-stage {
  background: var(--chart-mid);
  border: 1px solid rgba(19, 40, 60, 0.35);
  border-radius: 0;
  padding: 12px;
  box-shadow: none;
}
[data-app="berlin-lab"] .lab-head h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0;
  text-transform: none;
}
[data-app="berlin-lab"] .lab-head { margin: 44px 4px 16px; }
[data-app="berlin-lab"] .tools { gap: 22px; margin-top: 22px; }
[data-app="berlin-lab"] .workbench { margin-top: 22px; }
[data-app="berlin-lab"] .card canvas { margin-bottom: 14px; }
[data-app="berlin-lab"] .readout dd { font-size: 11.5px; }
[data-app="berlin-lab"] .lab-exp { border-bottom-color: var(--hairline); }
[data-app="berlin-lab"] .wb-tabs {
  border: 0;
  border-bottom: var(--rule);
  gap: 0;
  padding: 0;
  margin: 0 0 18px;
  border-radius: 0;
  box-shadow: none;
}
[data-app="berlin-lab"] .wb-tab {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  border: 0;
  margin: 0;
  padding: 10px 16px;
  border-radius: 0;
  color: var(--chart-ink-soft);
}
[data-app="berlin-lab"] .wb-tab:hover { color: var(--chart-ink); background: var(--chart-mid); }
[data-app="berlin-lab"] .wb-tab.on { color: var(--chart-paper); background: var(--chart-ink); box-shadow: none; border: 0; }

/* ==========================================================================
   Transient Lab hub strip
   ========================================================================== */
[data-app="transient-lab"] #hub-strip {
  margin: 0;
  padding: 8px 20px;
  border: 0;
  border-bottom: var(--rule);
  border-radius: 0;
  background: var(--chart-paper);
  box-shadow: none;
}
[data-app="transient-lab"] #hub-strip .hs-btn {
  font: 400 10.5px var(--ui);
  letter-spacing: 0.1em;
  background: var(--chart-paper);
  border: var(--rule);
  border-radius: 0;
  padding: 7px 12px;
  box-shadow: none;
}
[data-app="transient-lab"] #hub-strip .hs-btn:hover { background: var(--chart-shallows); }
[data-app="transient-lab"] #hub-strip .hs-search input {
  font: 400 12px var(--ui);
  border: 1px solid rgba(19, 40, 60, 0.55);
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: none;
  padding: 7px 10px;
}
[data-app="transient-lab"] #hub-strip .hs-progress { font-family: var(--ui); }
[data-app="transient-lab"] #lessonSearchResults,
[data-app="transient-lab"] #progressPanel > div {
  border: var(--rule);
  border-radius: 0;
  background: var(--chart-paper);
  box-shadow: 6px 6px 0 rgba(19, 40, 60, 0.15);
}
[data-app="transient-lab"] #support-widget .store-link {
  border: var(--rule);
  border-radius: 0;
  background: var(--chart-paper);
  box-shadow: none;
}

/* ==========================================================================
   Signal Path: the board is a chart; devices are soundings on it.
   ========================================================================== */
html[data-app="signal-path"]:root {
  --ink-rgb: 19,40,60;
  --bg: #FBFAF4;
  --grid: #E3ECF0;
  --panel: #FFFFFF;
  --panel-edge: #13283C;
  --panel-hi: #FFFFFF;
  --text: #13283C;
  --text-dim: #34506B;
  --text-faint: #56708A;
  --accent-fg: #FFFFFF;
  --c-audio: #C8341F;
  --c-midi: #2B6FB0;
  --c-cv: #2E7D46;
  --c-sync: #B0287A;
  --c-power: #D9A21B;
  --cat-controller: #5B4BB0;
  --cat-synth: #C8341F;
  --cat-fx: #2E7D46;
  --cat-mixer: #34506B;
  --cat-io: #B0287A;
}
[data-app="signal-path"] #header {
  top: 0; left: 0; right: 0;
  border: 0;
  border-bottom: 3px solid var(--chart-ink);
  border-radius: 0;
  padding: 14px 28px;
  pointer-events: auto;
  background: rgba(251, 250, 244, 0.96);
  box-shadow: none;
}
[data-app="signal-path"] #legend,
[data-app="signal-path"] #deviceSearchResults {
  border: var(--rule);
  border-radius: 0;
  background: rgba(251, 250, 244, 0.97);
  box-shadow: 4px 4px 0 rgba(19, 40, 60, 0.12);
}
[data-app="signal-path"] #legend { top: 92px; }
[data-app="signal-path"] #legend h2 { font-family: var(--ui); font-weight: 400; letter-spacing: 0.16em; }
[data-app="signal-path"] #toolbar {
  bottom: 44px;
  padding: 8px;
  border: var(--rule);
  border-radius: 0;
  background: rgba(251, 250, 244, 0.97);
  box-shadow: 4px 4px 0 rgba(19, 40, 60, 0.12);
  align-items: center;
}
[data-app="signal-path"] #toolbar button {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--chart-ink);
  background: var(--chart-paper);
  border: var(--rule);
  border-radius: 0;
  padding: 9px 13px;
  box-shadow: none;
}
[data-app="signal-path"] #toolbar button:hover:not(:disabled) { background: var(--chart-shallows); }
[data-app="signal-path"] #toolbar button.tb-primary { color: #FFFFFF; background: var(--chart-magenta); border-color: var(--chart-magenta); }
[data-app="signal-path"] #toolbar button.tb-danger:hover:not(:disabled) { color: var(--chart-port); }
[data-app="signal-path"] #toolbar .tb-sep { background: var(--hairline); }
[data-app="signal-path"] .tb-search input {
  border: 1px solid rgba(19, 40, 60, 0.55);
  border-radius: 0;
  background: #FFFFFF;
  box-shadow: none;
  font-family: var(--ui);
  padding: 9px 11px;
}

/* ==========================================================================
   404 + legal
   ========================================================================== */
.stamp-btn {
  display: inline-block;
  font-family: var(--ui) !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  color: #FFFFFF !important;
  border: 1.5px solid var(--chart-magenta) !important;
  border-radius: 0 !important;
  padding: 13px 22px !important;
  text-decoration: none;
  background: var(--chart-magenta) !important;
  box-shadow: none !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .status-dot.live { animation: none; }
  .btn, .seg button { transition: none; }
}
@media (max-width: 760px) {
  .ts-topbar, .topbar { padding: 12px 16px; }
  .brand-appname { font-size: 18px; }
}

/* ==========================================================================
   Permission gates ("Start listening"): a boxed notice on the chart.
   Six apps share the pattern; they all get the same box.
   ========================================================================== */
.gate {
  background-color: var(--chart-paper) !important;
  background-image:
    linear-gradient(rgba(19, 40, 60, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19, 40, 60, 0.045) 1px, transparent 1px) !important;
  background-size: 120px 120px !important;
}
.gate-panel {
  background: var(--chart-paper) !important;
  border: 1.5px solid var(--chart-ink) !important;
  border-radius: 0 !important;
  box-shadow: 8px 8px 0 rgba(19, 40, 60, 0.14) !important;
}
.gate-panel h1 {
  font-family: var(--display) !important;
  font-weight: 700 !important;
  font-size: 34px !important;
  letter-spacing: -0.01em !important;
  color: var(--chart-ink) !important;
}
.gate-sub {
  font-family: var(--ui) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--chart-magenta) !important;
}
.gate-copy { font-family: var(--display) !important; font-size: 16px !important; line-height: 1.55 !important; color: var(--chart-ink) !important; }
.gate-panel .btn-primary,
.gate-panel .btn-secondary { min-height: 46px; }
.gate-error { color: var(--chart-port) !important; font-family: var(--ui); }

/* The app name in the title block is the page's h1. */
h1.brand-appname { margin: 0; font-size: 21px; }
@media (max-width: 760px) { h1.brand-appname { font-size: 18px; } }