/* Interface of the wave demo: start screen, control panel, preset list, stats.
   Dark Craft roles, copied from craft/assets/shared/tokens.css (dark theme only:
   the wave is always on a dark field). System fonts, no network. The wave itself
   is the canvas and has no styles here besides covering the window. */
:root {
  color-scheme: dark;
  --bg: #111;
  --bg-veil: rgb(17 17 17 / .9);
  --raise: rgb(238 238 238 / .07);
  --track: rgb(238 238 238 / .12);
  --line: rgb(238 238 238 / .14);
  --text: #eee;
  --text-body: rgb(238 238 238 / .82);
  --muted: rgb(238 238 238 / .66);
  --disabled: rgb(238 238 238 / .38);
  --accent: #ff6672;
  --accent-mark: #ff3f4d;
  --accent-fill: #c5303d;
  --accent-fill-hover: #a92633;
  --accent-tint: rgb(255 63 77 / .14);
  --on-accent: #fff;
  --selection: rgb(230 57 70 / .32);
  --font: system-ui, "Liberation Sans", sans-serif;
  --font-mono: ui-monospace, "JetBrains Mono", monospace;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --panel-w: 344px;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
::selection { background: var(--selection); }
html, body { margin: 0; height: 100%; background: #0b0000; overflow: hidden; }
body { font: 14px/1.45 var(--font); color: var(--text); -webkit-font-smoothing: antialiased; }
canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent-mark); outline-offset: 2px; }
h1, h2 { margin: 0; font-weight: 650; letter-spacing: 0; }
p { margin: 0; }
svg.icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6;
           stroke-linecap: round; stroke-linejoin: round; flex: none; }
kbd { display: inline-block; min-width: 1.6em; padding: 0 5px; border: 1px solid var(--line);
      font: 12px/18px var(--font); color: var(--text); text-align: center; }

/* ---- buttons ------------------------------------------------------------------------------ */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
          min-height: 36px; padding: 0 var(--s3); border: 1px solid var(--line); background: var(--raise);
          cursor: pointer; white-space: nowrap; transition: color 160ms var(--ease); }
.button:hover { color: var(--accent); }
.button--primary { min-height: 44px; padding: 0 var(--s6); font-size: 16px; font-weight: 600;
                   color: var(--on-accent); background: var(--accent-fill); border-color: var(--accent-fill); }
.button--primary:hover { color: var(--on-accent); background: var(--accent-fill-hover); border-color: var(--accent-fill-hover); }
.button--quiet { border-color: transparent; background: transparent; color: var(--muted); }
.button--icon { width: 36px; padding: 0; }
.button--stable { display: inline-grid; }
.button--stable > span { grid-area: 1 / 1; }
.button--stable[aria-pressed="false"] .label-pressed,
.button--stable[aria-pressed="true"] .label-rest { visibility: hidden; }

/* ---- intro and dock, bottom left ----------------------------------------------------------- */
#dock { position: fixed; left: var(--s7); bottom: var(--s7); z-index: 5; max-width: calc(100vw - var(--panel-w) - 2 * var(--s7));
        display: grid; gap: var(--s5); transition: opacity 400ms var(--ease); }
#intro { display: grid; gap: var(--s3); max-width: 36rem; }
#intro h1 { font-size: 32px; line-height: 1.15; }
#intro .lede { font-size: 16px; color: var(--text-body); max-width: 32rem; }
#intro .keys { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: 12px; color: var(--muted); margin-top: var(--s1); }
#intro .keys span { display: inline-flex; gap: var(--s1); align-items: center; }
body.intro-done #intro { display: none; }
#dock .controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
#dock .controls > .button { background: var(--bg-veil); }
#dock .controls > .button--primary { background: var(--accent-fill); }
/* playlist: prev, the track list, next as one strip; the list draws no side borders,
   the buttons next to it own those edges */
#dock .player { display: inline-flex; align-items: stretch; min-width: 0; }
#dock .player > .button { background: var(--bg-veil); }
#dock .player .select-control { flex: 1; min-width: 0; }
#dock .player select { width: 16rem; max-width: 100%; min-height: 36px; padding: 0 32px 0 var(--s3);
                       border: 1px solid var(--line); border-left: 0; border-right: 0; border-radius: 0;
                       background: var(--bg-veil); text-overflow: ellipsis; transition: color 160ms var(--ease); }
#dock .player select:hover { color: var(--accent); }
#dock .player .select-control:has(select:hover) svg { stroke: var(--text); }
/* once the sound plays the button turns neutral: the main action is done */
#dock #start[aria-pressed="true"] { color: var(--text); background: var(--bg-veil); border-color: var(--line); font-weight: 400; font-size: 14px; }
#dock #start[aria-pressed="true"]:hover { color: var(--accent); }
#start > span { display: inline-flex; align-items: center; gap: var(--s2); }
#track:empty { display: none; }
#dock .now { display: inline-flex; align-items: center; gap: var(--s1); min-width: 0; padding-left: var(--s2);
             font-size: 12px; color: var(--muted); }
#track { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
#track[data-busy] { color: var(--text); font-variant-numeric: tabular-nums; }
#track[data-error] { color: var(--text); white-space: normal; }
#track[data-error]::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--s2); background: var(--accent-mark); }
/* the dock and the panel button fade when the pointer rests, the wave stays alone */
body.idle #dock, body.idle #panel-open { opacity: 0; pointer-events: none; }
body.idle { cursor: none; }
#drop-hint { position: fixed; inset: var(--s4); z-index: 40; display: none; place-items: center; font-size: 18px;
             color: var(--text); border: 1px dashed var(--muted); background: rgb(17 17 17 / .6); pointer-events: none; }
body.drop #drop-hint { display: grid; }

/* ---- panel ---------------------------------------------------------------------------------- */
#panel { position: fixed; top: 0; right: 0; bottom: 0; width: var(--panel-w); z-index: 10;
         overflow-y: auto; overscroll-behavior: contain; background: var(--bg-veil);
         border-left: 1px solid var(--line); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#panel.hidden { display: none; }
#panel .ph { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--s1);
             padding: var(--s3) var(--s3) var(--s3) var(--s5); background: var(--bg); border-bottom: 1px solid var(--line); }
#panel .ph h2 { flex: 1; font-size: 18px; }
#panel .sec { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
#panel .cap { font-size: 12px; color: var(--muted); }
#panel .prow { display: flex; gap: var(--s2); align-items: center; }
#panel .prow > input[type=text] { flex: 1; min-width: 0; }
#panel input[type=text], #panel input.num, #panel textarea, #panel select {
  min-height: 36px; padding: 0 var(--s2); border: 1px solid var(--line); border-radius: 0; background: var(--raise);
  transition: border-color 160ms var(--ease); }
#panel input[type=text]:hover, #panel input.num:hover, #panel textarea:hover, #panel select:hover { border-color: var(--muted); }
#panel input::placeholder, #panel textarea::placeholder { color: var(--disabled); }
.select-control { position: relative; display: block; }
.select-control select { width: 100%; appearance: none; padding-right: 32px; cursor: pointer; }
.select-control select option { background: var(--bg); }
.select-control svg { position: absolute; right: var(--s3); top: 50%; width: 12px; height: 8px; transform: translateY(-50%);
                      fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }

/* parameter groups */
#panel details.group { border-bottom: 1px solid var(--line); }
#panel summary { display: flex; align-items: center; gap: var(--s2); min-height: 44px; padding: 0 var(--s3) 0 var(--s5);
                 cursor: pointer; list-style: none; font-weight: 600; }
#panel summary::-webkit-details-marker { display: none; }
#panel summary > .icon { color: var(--muted); transition: transform 160ms var(--ease); }
#panel details[open] > summary > .icon { transform: rotate(90deg); }
#panel summary > .t { flex: 1; }
#panel summary:hover > .t { color: var(--accent); }
#panel summary .reset { visibility: hidden; }
#panel details.mod > summary .reset { visibility: visible; }
#panel .items { padding: 0 var(--s5) var(--s4); display: grid; gap: var(--s2); }

/* one parameter: label and value on a line, the slider under them */
#panel .row { position: relative; display: grid; grid-template-columns: 1fr auto auto; align-items: center;
              column-gap: var(--s1); }
#panel .row .lab { color: var(--text-body); cursor: help; }
#panel .row.mod::before { content: ""; position: absolute; left: calc(-1 * var(--s5)); top: 4px; bottom: 4px;
                          width: 2px; background: var(--accent-mark); }
#panel .row.mod .lab { color: var(--text); }
#panel .row .reset { visibility: hidden; width: 28px; min-height: 28px; }
#panel .row.mod .reset { visibility: visible; }
#panel input.num { width: 76px; min-height: 28px; padding: 0 6px; text-align: right;
                   font: 13px var(--font); font-variant-numeric: tabular-nums; appearance: textfield; -moz-appearance: textfield; }
#panel input.num::-webkit-inner-spin-button, #panel input.num::-webkit-outer-spin-button { appearance: none; margin: 0; }
#panel .row .range { grid-column: 1 / -1; }

/* slider: the passed part is filled, the round thumb has a gap in the background color */
.range { --value: 0%; width: 100%; height: 24px; margin: 0; padding: 0; appearance: none; background: transparent; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 24px;
  background: linear-gradient(var(--accent-mark) 0 0) no-repeat 0 50% / var(--value) 4px,
              linear-gradient(var(--track) 0 0) no-repeat 0 50% / 100% 4px; }
.range::-moz-range-track { height: 24px;
  background: linear-gradient(var(--accent-mark) 0 0) no-repeat 0 50% / var(--value) 4px,
              linear-gradient(var(--track) 0 0) no-repeat 0 50% / 100% 4px; }
.range::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; margin-top: 5px; border-radius: 50%;
                               background: var(--text); box-shadow: 0 0 0 3px var(--bg); }
.range::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px var(--bg); }
.range:hover::-webkit-slider-thumb { background: var(--accent-fill); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent-mark); }
.range:hover::-moz-range-thumb { background: var(--accent-fill); box-shadow: 0 0 0 3px var(--bg), 0 0 0 4px var(--accent-mark); }
.range:focus-visible { outline-offset: 0; }

/* on/off parameter */
.switch { appearance: none; flex: none; width: 36px; height: 20px; margin: 0; padding: 3px; border-radius: 999px;
          box-shadow: inset 0 0 0 1.5px var(--muted); background: transparent; cursor: pointer; display: inline-flex; align-items: center; }
.switch::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--muted); transition: transform 160ms var(--ease); }
.switch:checked { background: var(--accent-fill); box-shadow: inset 0 0 0 1.5px var(--accent-fill); }
.switch:checked::after { background: var(--on-accent); transform: translateX(16px); }
.switch:hover { box-shadow: inset 0 0 0 1.5px var(--accent-mark); }
#panel .row--bool { grid-template-columns: 1fr auto auto; min-height: 32px; }
#panel .row--bool .switch { margin-left: var(--s2); }

/* JSON in and out */
#panel textarea { width: 100%; min-height: 0; padding: var(--s2); resize: vertical;
                  font: 12px/1.4 var(--font-mono); color: var(--text-body); }
#panel .chk { display: inline-flex; gap: var(--s2); align-items: center; color: var(--muted); cursor: pointer; }
#panel .chk input { accent-color: var(--accent-fill); margin: 0; width: 16px; height: 16px; }
#panel .pstatus { min-height: 1.45em; color: var(--text); }
#panel .pstatus[data-busy]::after { content: 'пересчёт сглаживания…'; color: var(--muted); margin-left: var(--s2); }

/* the button that brings the panel back */
#panel-open { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 9; width: 44px; min-height: 44px;
              background: var(--bg-veil); transition: opacity 400ms var(--ease); }
body:not(.panel-hidden) #panel-open { display: none; }

/* ---- preset list, shown for a moment on number keys and [ ] --------------------------------- */
#preset-list { position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 20; min-width: 240px;
               max-height: 90vh; overflow: hidden; padding: var(--s2) 0; margin: 0; list-style: none;
               background: var(--bg-veil); font-size: 16px; color: var(--muted);
               pointer-events: none; opacity: 0; transition: opacity 400ms var(--ease); }
#preset-list.on { opacity: 1; }
#preset-list li { display: flex; gap: var(--s3); padding: 6px var(--s5) 6px var(--s4); border-left: 2px solid transparent; white-space: nowrap; }
#preset-list li b { min-width: 1ch; font-weight: 400; color: var(--disabled); font-variant-numeric: tabular-nums; }
#preset-list li[aria-current="true"] { border-left-color: var(--accent-mark); color: var(--text); font-weight: 600; }
#preset-list li[aria-current="true"] b { color: var(--accent); }

/* ---- stats and errors -------------------------------------------------------------------- */
#stats { position: fixed; left: var(--s4); top: var(--s4); z-index: 15; display: none; white-space: pre;
         padding: var(--s2) var(--s3); background: var(--bg-veil); color: var(--text-body);
         font: 12px/1.5 var(--font-mono); font-variant-numeric: tabular-nums; }
#error { position: fixed; inset: 0; z-index: 30; display: none; place-items: center; padding: var(--s7);
         text-align: center; font-size: 16px; color: var(--text); background: var(--bg); }

/* ---- narrow screens: the panel turns into a bottom sheet and starts hidden ------------------ */
@media (max-width: 760px) {
  #dock { left: var(--s4); right: var(--s4); bottom: var(--s4); gap: var(--s4); max-width: none; }
  #dock .controls { padding-right: 52px; }
  #dock .player { flex: 1 1 100%; }
  #dock .player select { width: 100%; }
  #dock .button--primary { padding: 0 var(--s4); font-size: 15px; }
  #intro h1 { font-size: 28px; }
  #intro .lede { font-size: 15px; }
  #panel { top: auto; left: 0; width: auto; max-height: 62vh; border-left: 0; border-top: 1px solid var(--line); }
  body:not(.panel-hidden) #dock { display: none; }
}
@media (pointer: coarse) { #intro .keys { display: none; } }
@media (prefers-reduced-motion: reduce) { #preset-list, #dock { transition: none; } }