/* Phantom Space — panel restyled on the Tessa Compressor design system (tessacompressor.vercel.app).
 *
 * Loaded after style.css. Everything sits on html[data-theme][data-color][data-ui] -- three attribute
 * selectors -- so it outranks style.css (two) and moth-ds without !important. style.css still owns
 * layout and spacing logic; this file swaps the look:
 *   warm off-white tiles on Moth's OKLCH neutral axis, hairline rules, 12 px uppercase labels,
 *   monospaced blue values, 3 px slider tracks with round blue thumbs, pill toggles, "+ / –" folds.
 * The panels keep Tessa's light tiles in both canvas modes; only the canvas itself goes black or white.
 */

html[data-theme][data-color][data-ui] {
  --theme-hue: 67.8;
  --theme-chroma: 0.0017;
  --n-00: oklch(  0%    var(--theme-chroma) var(--theme-hue));
  --n-31: oklch( 31%    var(--theme-chroma) var(--theme-hue));
  --n-50: oklch( 49.62% var(--theme-chroma) var(--theme-hue));
  --n-68: oklch( 68%    var(--theme-chroma) var(--theme-hue));
  --n-76: oklch( 76%    var(--theme-chroma) var(--theme-hue));
  --n-86: oklch( 86%    var(--theme-chroma) var(--theme-hue));
  --n-91: oklch( 91%    var(--theme-chroma) var(--theme-hue));
  --n-93: oklch( 92.8%  var(--theme-chroma) var(--theme-hue));
  --n-94: oklch( 94%    var(--theme-chroma) var(--theme-hue));
  --n-99: oklch( 98.56% var(--theme-chroma) var(--theme-hue));
  --a-blue:      oklch(74.61% 0.1557 233.78);
  --a-blue-text: oklch(54.70% 0.1557 233.78);
  --a-red-text:  oklch(58.10% 0.2568 29.01);

  --tc-page: var(--n-99);        /* inside controls: selects, cards, canvases */
  --tc-tile: var(--n-94);        /* every box */
  --tc-tile-hover: var(--n-91);
  --tc-rule: var(--n-86);
  --tc-text: var(--n-31);
  --tc-emph: var(--n-00);
  --tc-muted: var(--n-50);
  --tc-track: var(--n-76);
  --tc-cta: var(--a-blue-text);
  --tc-cta-ink: var(--n-99);
  --tc-mono: "Riforma Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* style.css draws with these; re-seating them recolours everything that uses them */
  --g-surface: var(--tc-tile);
  --g-line: var(--tc-rule);
  --g-text: var(--tc-text);
  --g-muted: var(--tc-muted);
  --g-accent: var(--tc-cta);
  --g-accent-dim: var(--a-blue);
  --g-on-accent: var(--tc-cta-ink);
  --c-thumb: var(--tc-cta);
  --c-thumb-hover: var(--tc-cta);
  --c-engaged: var(--tc-cta);
  --c-cta: var(--tc-cta);

  --gap: 12px;
  --pad: 16px;
  --pad-ctl: 8px 12px;
}

/* ---------- panel: a little wider ---------- */
html[data-theme][data-color][data-ui] .panel { width: 336px; }
html[data-theme][data-color][data-ui="technical"] .panel { width: 420px; }
@media (max-width: 640px) { html[data-theme][data-color][data-ui] .panel { width: auto; } }

/* ---------- boxes ---------- */
html[data-theme][data-color][data-ui] .group,
html[data-theme][data-color][data-ui] .panel > .switch,
html[data-theme][data-color][data-ui] .panel > .row > .button {
  border: 1px solid var(--tc-rule); }
html[data-theme][data-color][data-ui] .group {
  padding: var(--pad); border-radius: 12px; background: var(--tc-tile); color: var(--tc-text); }
html[data-theme][data-color][data-ui] details.sub { border-top: 1px solid var(--tc-rule); padding-top: var(--gap); }

/* section titles: Tessa's "+ LEARN MORE" fold */
html[data-theme][data-color][data-ui] .panel .tag {
  font-weight: 400; font-size: 12px; letter-spacing: .7px; text-transform: uppercase; color: var(--tc-emph); }
html[data-theme][data-color][data-ui] summary.tag::before {
  content: "+"; display: inline-block; width: 16px; text-align: center; font-family: var(--tc-mono); color: var(--tc-cta); }
html[data-theme][data-color][data-ui] details[open] > summary.tag::before { content: "–"; }
html[data-theme][data-color][data-ui] summary.tag:hover { color: var(--tc-cta); }

/* ---------- text ---------- */
html[data-theme][data-color][data-ui] .panel .mini { color: var(--tc-muted); font-size: 12px; line-height: 18px; }
html[data-theme][data-color][data-ui] .panel .info { color: var(--tc-muted); font-size: 12px; line-height: 18px; text-align: justify; }
html[data-theme][data-color][data-ui] .panel .info.note,
html[data-theme][data-color][data-ui] .panel .info.card {
  background: var(--tc-page); border: 1px solid var(--tc-rule); border-radius: 8px; padding: 12px 14px; }

/* ---------- sliders: label left, mono blue value right, thin track, round thumb ---------- */
html[data-theme][data-color][data-ui] .panel .slider .slider-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--tc-emph); }
html[data-theme][data-color][data-ui] .panel .slider .slider-value {
  font-family: var(--tc-mono); font-size: 13px; color: var(--tc-cta); }
html[data-theme][data-color][data-ui] .panel input[type=range] {
  --track-height: 3px; --thumb-size: 14px; --border-radius: 7px;
  --track-color: var(--tc-track);
  height: 22px; cursor: pointer; }
html[data-theme][data-color][data-ui] .panel .slider .slider-row input[type=range] { height: 22px; margin-top: 2px; }
html[data-theme][data-color][data-ui] .panel input[type=range]::-webkit-slider-runnable-track { border: none; background: var(--tc-track); }
html[data-theme][data-color][data-ui] .panel input[type=range]::-moz-range-track { border: none; background: var(--tc-track); }
html[data-theme][data-color][data-ui] .panel input[type=range]::-webkit-slider-thumb { border-radius: 50%; background-color: var(--tc-cta); margin-top: -5.5px; }
html[data-theme][data-color][data-ui] .panel input[type=range]::-moz-range-thumb { border-radius: 50%; background-color: var(--tc-cta); }
html[data-theme][data-color][data-ui] .panel input[type=range]:disabled::-webkit-slider-thumb { background-color: var(--tc-track); }
/* the τ scrubber sits in a row beside its play button */
html[data-theme][data-color][data-ui] .panel .slider.tau .slider-row input[type=range] { margin-top: 0; }

/* ---------- buttons ---------- */
html[data-theme][data-color][data-ui] .panel .button {
  padding: var(--pad-ctl); border: 1px solid var(--tc-rule); border-radius: 8px;
  background: var(--tc-page); color: var(--tc-text); font-size: 13.5px;
  transition: background-color .18s ease, border-color .18s ease; }
html[data-theme][data-color][data-ui] .panel .button:hover { background: var(--tc-tile-hover); border-color: var(--tc-cta); color: var(--tc-text); }
/* primary action: Tessa's solid blue "Process" */
html[data-theme][data-color][data-ui] .panel .button.cta {
  background: var(--tc-cta); border-color: var(--tc-cta); color: var(--tc-cta-ink); }
html[data-theme][data-color][data-ui] .panel .button.cta:hover { filter: brightness(1.1); background: var(--tc-cta); color: var(--tc-cta-ink); }
/* secondary text actions: Tessa's underlined blue link */
html[data-theme][data-color][data-ui] .panel .button.bare {
  background: none; border-color: transparent; color: var(--tc-cta);
  text-decoration: underline; text-underline-offset: 2px; }
html[data-theme][data-color][data-ui] .panel .button.bare:hover { background: none; border-color: transparent; }
/* a selected option: Tessa's chosen mode card -- blue edge, lighter fill */
html[data-theme][data-color][data-ui] .panel .button.on,
html[data-theme][data-color][data-ui] .panel .button.on:hover {
  background: var(--n-99); border-color: var(--tc-cta); color: var(--tc-emph); box-shadow: inset 0 0 0 1px var(--tc-cta); }
html[data-theme][data-color][data-ui] .panel .button:disabled {
  background: var(--tc-tile); color: var(--n-68); border-color: var(--tc-rule); filter: none; }
html[data-theme][data-color][data-ui] .panel .button.recording { color: var(--a-red-text); }
html[data-theme][data-color][data-ui] .panel .row.time > .button { padding: 0 10px; }

/* ---------- selects & the key field ---------- */
html[data-theme][data-color][data-ui] .panel .field-select select,
html[data-theme][data-color][data-ui] .panel input[type=password] {
  padding: 8px 11px; border-radius: 8px; background: var(--tc-page); color: var(--tc-text);
  outline: 1px solid var(--tc-rule); outline-offset: -1px; font-size: 13.5px; }
html[data-theme][data-color][data-ui] .panel .field-select select:hover,
html[data-theme][data-color][data-ui] .panel .field-select select:focus,
html[data-theme][data-color][data-ui] .panel input[type=password]:focus { outline-color: var(--tc-cta); }
html[data-theme][data-color][data-ui] .panel .keyfield .keylabel {
  font-size: 12px; text-transform: uppercase; letter-spacing: .7px; color: var(--tc-emph); }

/* ---------- checkboxes become Tessa's pill toggles ---------- */
html[data-theme][data-color][data-ui] .panel .checkbox { display: flex; align-items: center; gap: 10px; cursor: pointer; }
html[data-theme][data-color][data-ui] .panel .checkbox-box {
  width: 34px; height: 19px; border-radius: 19px; background-color: var(--tc-track); corner-shape: round; }
html[data-theme][data-color][data-ui] .panel .checkbox-box::after {
  left: 2px; top: 2px; width: 15px; height: 15px; border: none; border-radius: 50%;
  background: var(--n-99); transform: none; transition: transform .18s ease; }
html[data-theme][data-color][data-ui] .panel input[type=checkbox]:checked + .checkbox-box { background-color: var(--tc-cta); }
html[data-theme][data-color][data-ui] .panel input[type=checkbox]:checked + .checkbox-box::after { transform: translateX(15px); }
html[data-theme][data-color][data-ui] .panel input[type=checkbox]:focus-visible + .checkbox-box { outline: 2px solid var(--tc-cta); outline-offset: 2px; }
html[data-theme][data-color][data-ui] .panel kbd {
  font-family: var(--tc-mono); font-size: 10.5px; text-transform: uppercase; color: var(--tc-muted);
  background: var(--tc-page); border: 1px solid var(--tc-rule); border-radius: 4px; padding: 0 5px; }

/* ---------- the two switches at the top (vibe/technical, light mode) ---------- */
html[data-theme][data-color][data-ui] .switch {
  padding: 10px 14px; border-radius: 12px; background: var(--tc-tile); color: var(--tc-muted); justify-content: space-between; }
html[data-theme][data-color][data-ui] .switch i {
  width: 34px; height: 19px; border: none; border-radius: 19px; background: var(--tc-track); }
html[data-theme][data-color][data-ui] .switch i::after {
  top: 2px; left: 2px; width: 15px; height: 15px; background: var(--n-99); transition: transform .18s ease; }
html[data-theme][data-color][data-ui] .switch[aria-checked="true"] i { background: var(--tc-cta); }
html[data-theme][data-color][data-ui] .switch[aria-checked="true"] i::after { transform: translateX(15px); }
html[data-theme][data-color][data-ui] .switch .lv,
html[data-theme][data-color][data-ui] .switch .lt { color: var(--tc-muted); }
html[data-theme][data-color][data-ui] .switch[aria-checked="true"] .lt,
html[data-theme][data-color][data-ui] .switch:not([aria-checked="true"]) .lv { color: var(--tc-emph); }

/* ---------- canvases inside boxes (meter, video thumbnail, morph pair) ---------- */
html[data-theme][data-color][data-ui] .panel #smeter {
  border: 1px solid var(--tc-rule); border-radius: 8px; background: var(--tc-page); color: var(--tc-cta); }
html[data-theme][data-color][data-ui] .panel #vthumb,
html[data-theme][data-color][data-ui] .pair canvas { border: 1px solid var(--tc-rule); border-radius: 8px; }
html[data-theme][data-color][data-ui] .slotbtn { border-color: var(--tc-track); border-radius: 8px; background: var(--tc-page); }

/* ---------- status line (sits on the canvas, between boxes) ---------- */
html[data-theme][data-color][data-ui] .panel .status { font-size: 12px; color: var(--n-76); }
html[data-theme="light"][data-color][data-ui] .panel .status { color: var(--tc-muted); }
html[data-theme][data-color][data-ui] .panel .status.err { color: oklch(70% 0.20 29.01); }
html[data-theme="light"][data-color][data-ui] .panel .status.err { color: var(--a-red-text); }

/* ---------- title, byline and "what is this?" on the canvas ---------- */
html[data-theme][data-color][data-ui] .brand h1 {
  font-size: 26px; font-weight: 500; letter-spacing: -0.5px; text-transform: none; color: var(--n-99); }
html[data-theme="light"][data-color][data-ui] .brand h1 { color: var(--n-00); }
html[data-theme][data-color][data-ui] .brand h1 .by { font-size: 13px; letter-spacing: 0; color: var(--n-68); }
html[data-theme="light"][data-color][data-ui] .brand h1 .by { color: var(--n-50); }
html[data-theme][data-color][data-ui] .brand .about > summary {
  border: none; background: none; padding: 4px 0; color: var(--n-93);
  font-size: 12px; text-transform: uppercase; letter-spacing: .7px; }
html[data-theme="light"][data-color][data-ui] .brand .about > summary { color: var(--n-00); }
html[data-theme][data-color][data-ui] .brand .about > summary::before {
  content: "+"; display: inline-block; width: 16px; text-align: center; font-family: var(--tc-mono); color: var(--a-blue); }
html[data-theme][data-color][data-ui] .brand .about[open] > summary::before { content: "–"; }
html[data-theme][data-color][data-ui] .brand .about-body {
  width: 340px; padding: 16px 18px; border: 1px solid var(--tc-rule); border-radius: 12px;
  background: var(--tc-tile); color: var(--tc-muted); font-size: 13px; line-height: 1.65; text-align: justify; }
html[data-theme][data-color][data-ui] .brand .about-body h2 {
  font-size: 12px; font-weight: 400; letter-spacing: .7px; color: var(--tc-emph); }
html[data-theme][data-color][data-ui] .brand .about-body b { font-weight: 500; color: var(--tc-text); }

/* ---------- hover tip & drop target ---------- */
html[data-theme][data-color][data-ui] .tipbox {
  background: var(--tc-tile); color: var(--tc-text); border: 1px solid var(--tc-rule); border-radius: 12px;
  font-size: 12px; line-height: 18px; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }
html[data-theme][data-color][data-ui] .drop {
  border: 1.5px dashed var(--a-blue); border-radius: 12px; font-size: 17px; color: var(--n-93); }

/* ---------- fixes after the first look ---------- */
/* values sit hard right, as Tessa's do */
html[data-theme][data-color][data-ui] .panel .slider .slider-label { flex: 1 1 auto; }
html[data-theme][data-color][data-ui] .panel .slider .slider-value { margin-left: auto; width: auto; min-width: 0; text-align: right; }
/* toggles line up with everything else */
html[data-theme][data-color][data-ui] .panel .checkbox { padding: 0; }
/* a disabled link is just muted text */
html[data-theme][data-color][data-ui] .panel .button.bare:disabled {
  background: none; border-color: transparent; color: var(--n-68); text-decoration: none; }
/* title in sentence case, like "Tessa Compressor"; the byline stays as written */
html[data-theme][data-color][data-ui] .brand h1 { text-transform: capitalize; }
html[data-theme][data-color][data-ui] .brand h1 .by { text-transform: none; }
html[data-theme][data-color][data-ui] .panel #vthumb[hidden] { display: none; }