/* SPDX-License-Identifier: GPL-3.0-or-later */
/* Chladni Patterns. The shared look lives in /core/static/core.css; the pieces
   below copy the Fourier Draw lab (stage HUD, live panel, tables). */

.hint kbd { font-size: 9px; padding: 0 4px; color: var(--muted); }
.lesson-wide p { color: #c3cbe0; max-width: 900px; }
.formula { font-size: 20px; text-align: center; padding: 10px 0; overflow-x: auto; }
.formula math { color: var(--text); }
.table-wrap { max-height: 420px; overflow: auto; scrollbar-width: thin; }
.side a, .sub a, .lesson a, .lesson-wide a { color: var(--yellow); }

/* sound button */
.sound-btn { margin-top: 0; font-weight: 600; }
.sound-btn.on { background: var(--pink); border-color: var(--pink); color: #fff; box-shadow: 0 0 18px rgba(255, 92, 138, .4); }
#plBSound.on { box-shadow: inset 0 0 0 1px var(--pink); background: rgba(255, 92, 138, .25); }
.quick button.on { border-color: var(--yellow); color: var(--yellow); }
.quick button.wide-q { flex: 2; font-family: var(--sans); }

/* ------------------------------------------------------------ plate */
#view-plate.active { display: grid; grid-template-columns: 1fr 310px; gap: 14px; overflow: hidden; }
.stage canvas#cvPlate { cursor: crosshair; }
.hud-top {
  position: absolute; top: 14px; left: 0; right: 0; text-align: center; pointer-events: none;
  font: 600 12px var(--mono); color: var(--yellow); letter-spacing: .05em; min-height: 16px;
}
.pl-hud { position: absolute; left: 16px; bottom: 10px; max-width: calc(100% - 300px); pointer-events: none; text-shadow: 0 2px 12px #000; }
#plStage .stage-ctrl { left: auto; right: 12px; transform: none; }
#plStage .stage-credit { left: 14px; right: auto; top: 14px; bottom: auto; }
@media (max-width: 1500px) { #plStage .hint { display: none; } }
.drum-stage .hint { top: auto; bottom: 12px; right: 0; left: 0; max-width: none; text-align: center; }
.pl-hud-freq { font: 800 24px var(--mono); color: var(--yellow); letter-spacing: -.02em; line-height: 1.1; }
#plStage .hint { max-width: calc(100% - 28px); top: 14px; }
.pl-hud-msg { font: 600 12px var(--mono); color: var(--green); min-height: 15px; }
.pl-hud-mode { font: 13px var(--mono); color: var(--muted); }
.live {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; overflow-y: auto; scrollbar-width: thin;
}
.live h3 { font-size: 13px; margin-top: 4px; }
.live h3 + .sub { margin-top: 2px; }
canvas.resp { width: 100%; height: 170px; display: block; cursor: crosshair; }
.pl-now { background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin: 6px 0 12px; }
.pl-now .lab-big { font-size: 30px; }
.pl-now .sub { margin: 2px 0 6px; }
.pl-formula { font: 12px var(--mono); color: var(--text); }
.energy { margin: 0 0 14px; }
.energy-label { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.energy-label b { color: var(--green); font-family: var(--mono); }
.bar { height: 8px; border-radius: 4px; background: var(--bg2); overflow: hidden; margin-top: 4px; }
.bar div { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--green)); transition: width .15s; }
.pl-near { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 6px 0 10px; }
.pl-near button {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 9px; padding: 5px 8px; cursor: pointer;
  text-align: left; font: 12px var(--mono); color: var(--muted); display: flex; gap: 6px; align-items: center;
}
.pl-near button canvas { width: 30px; height: 30px; border-radius: 5px; flex: none; }
.pl-near button b { color: var(--text); font-weight: 600; display: block; }
.pl-near button:hover { border-color: var(--yellow); color: var(--yellow); }
.pl-near button.cur { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.pl-near button.weak { opacity: .45; }
.model-note { font-size: 11px; color: var(--dim); }

/* ------------------------------------------------------------ gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin-top: 10px; }
.tile {
  background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer;
  transition: .15s; color: inherit; font: inherit; text-align: center;
}
.tile:hover { border-color: var(--yellow); transform: translateY(-2px); }
.tile.cur { border-color: var(--yellow); box-shadow: 0 0 0 1px var(--yellow); }
.tile canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 6px; }
.tile .tl1 { font: 600 12px var(--mono); color: var(--text); margin-top: 4px; }
.tile .tl2 { font: 10px var(--mono); color: var(--muted); white-space: nowrap; }
.tile .tl2 b { color: var(--yellow); }

/* ------------------------------------------------------------ drum */
.drum-top { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; margin-bottom: 14px; }
.drum-stage { position: relative; padding: 0; overflow: hidden; margin: 0; min-height: 520px; }
.drum-stage canvas {
  width: 100%; height: 100%; min-height: 520px; display: block; cursor: pointer; touch-action: none;
  background: radial-gradient(circle at 50% 45%, #0f1628 0%, #070a12 75%);
}
.drum-side .panel { margin-bottom: 14px; }
.drum-side .panel:last-child { margin-bottom: 0; }
canvas.drum-spec { width: 100%; height: 200px; display: block; }
.dr-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 6px; }
.dr-modes button {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 0; cursor: pointer;
  font: 11px var(--mono); color: var(--text);
}
.dr-modes button small { display: block; color: var(--muted); font-size: 10px; }
.dr-modes button:hover { border-color: var(--yellow); color: var(--yellow); }
.dr-modes button.on { background: var(--yellow); border-color: var(--yellow); color: var(--bg); }
.dr-modes button.on small { color: var(--bg); }
.dr-play button { padding: 6px 0; font-family: var(--sans); }
.mix { display: flex; flex-direction: column; gap: 3px; font: 12px var(--mono); max-height: 190px; overflow-y: auto; scrollbar-width: thin; }
.mix-row { display: grid; grid-template-columns: 58px 64px 1fr; gap: 8px; align-items: center; }
.mix-row .mx-n { color: var(--yellow); }
.mix-row .mx-r { color: var(--text); text-align: right; }
.mix-row .mx-bar { height: 7px; background: var(--bg2); border-radius: 4px; overflow: hidden; }
.mix-row .mx-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--yellow), var(--pink)); }
table.check { border-collapse: collapse; width: 100%; font: 12px var(--mono); }
table.check th { position: sticky; top: 0; background: var(--panel2); color: var(--muted); font-weight: 600; text-align: right; padding: 6px 8px; }
table.check td { text-align: right; padding: 4px 8px; border-bottom: 1px solid var(--line); }
table.check th:first-child, table.check td:first-child { text-align: left; }
table.check td.ok { color: var(--green); }
table.check td.bad { color: var(--pink); }
table.check tr.sel td { background: rgba(255, 201, 60, .1); }
table.check tr.click { cursor: pointer; }
table.check tr.click:hover td { background: rgba(255, 201, 60, .07); }

/* ------------------------------------------------------------ string */
canvas.string-main { width: 100%; height: 300px; display: block; cursor: grab; touch-action: none; }
canvas.st-modes { width: 100%; height: 420px; display: block; }
canvas.st-spec { width: 100%; height: 260px; display: block; }

/* ------------------------------------------------------------ your drum */
.shape-top { display: grid; grid-template-columns: minmax(360px, 560px) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.shape-top .panel { margin: 0; }
#cvShape { width: 100%; aspect-ratio: 1; display: block; cursor: crosshair; touch-action: none; border-radius: 10px; background: var(--bg2); }
.sh-status { font-size: 12px; color: var(--muted); margin-top: 8px; min-height: 18px; display: flex; gap: 6px; align-items: center; }
.sh-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 6px; }
.sh-presets button {
  background: var(--panel2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 2px; cursor: pointer;
  font-size: 11px; color: var(--text);
}
.sh-presets button:hover { border-color: var(--yellow); color: var(--yellow); }
.sh-presets button.on { border-color: var(--yellow); color: var(--yellow); box-shadow: inset 0 0 0 1px var(--yellow); }
.sh-modes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.sh-modes .tile canvas { background: var(--bg); }
.iso { display: grid; grid-template-columns: 230px 230px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 10px; }
.iso-drum { text-align: center; }
.iso-drum canvas { width: 100%; aspect-ratio: 1; display: block; border-radius: 10px; background: var(--bg2); margin-bottom: 6px; }

/* ------------------------------------------------------------ ripple tank */
.tank-stage { height: min(640px, calc(100vh - 140px)); min-height: 420px; margin-bottom: 14px; }
.stage canvas#cvTank { cursor: crosshair; }
.tank-stage .hint { top: auto; bottom: 18px; max-width: 30%; }
.tank-text .panel { margin: 0; }

@media (max-width: 1200px) {
  #view-plate.active { grid-template-columns: 1fr; grid-template-rows: minmax(480px, 1fr) auto; overflow-y: auto; }
  .live { overflow: visible; }
  .drum-top, .shape-top { grid-template-columns: 1fr; }
  .iso { grid-template-columns: 1fr 1fr; }
  .iso-table { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  #view-plate.active { grid-template-rows: 80vw auto; }
  .sh-modes { grid-template-columns: repeat(3, 1fr); }
}