/* SPDX-License-Identifier: GPL-3.0-or-later */
/* Curve Workshop. The shared look lives in /core/static/core.css; the parts
   below follow Fourier Draw (stage + live panel). */

[hidden] { display: none !important; }

/* stage tabs: big canvas + live panel on the right */
#view-main.active, #view-spl.active, #view-fit.active, #view-font.active {
  display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 14px; overflow: hidden;
}
.stage canvas.draw-cursor { cursor: crosshair; }
.hud-top {
  position: absolute; top: 14px; left: 16px; right: 54%; text-align: left; pointer-events: none; line-height: 1.6;
  font: 600 12px var(--mono); color: var(--yellow); letter-spacing: .05em;
}
.hint kbd { font-size: 9px; padding: 0 4px; color: var(--muted); }
.stage .hint { max-width: min(420px, 48%); }
.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: 14px 0 4px; }
.live h3:first-child { margin-top: 2px; }
.live h3 + .sub { margin-top: 2px; }

/* readouts: label / value rows */
.readouts { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; font-size: 12px; margin-top: 6px; }
.readouts .k { color: var(--muted); }
.readouts .v { font-family: var(--mono); text-align: right; color: var(--text); }
.readouts .v.big { font-size: 20px; font-weight: 800; color: var(--yellow); }
.readouts .v.good { color: var(--green); }
.readouts .v.bad { color: var(--pink); }

canvas.weights { width: 100%; height: 104px; display: block; cursor: pointer; }
.small-formula { font-size: 15px; padding: 6px 0; text-align: left; }
.small-formula.terms { font-size: 15px; line-height: 1.8; margin: 4px 0; }
.small-formula .term { padding: 0 3px; }
.formula { font-size: 22px; text-align: center; padding: 14px 0; overflow-x: auto; }
.formula math { color: var(--text); }

/* sidebar bits */
.deg-row { display: flex; align-items: baseline; gap: 8px; font-size: 12px; color: var(--muted); }
.deg-big { font: 800 26px var(--mono); color: var(--yellow); }
.deg-sub { margin: 0; }
.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.btn-grid .btn { padding: 6px 6px; }
.split-keep { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.split-keep .sub { margin: 0; }
.split-keep .btn { flex: 1; }
#bezPresets button { flex: 1 0 auto; padding: 3px 8px; }
#bKeepL { border-color: var(--blue); color: var(--blue); }
#bKeepR { border-color: var(--pink); color: var(--pink); }
.kind-list { display: flex; flex-direction: column; gap: 4px; }
.kind-list button {
  display: flex; align-items: center; gap: 8px; text-align: left; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 9px; padding: 6px 9px; cursor: pointer; color: var(--muted); font-size: 12px;
}
.kind-list button span { flex: 1; }
.kind-list button:hover { border-color: var(--muted); color: var(--text); }
.kind-list button.on { border-color: var(--yellow); color: var(--text); background: var(--panel2); }
.kind-list kbd { font-size: 9px; padding: 0 4px; }
.sw { width: 14px; height: 4px; border-radius: 2px; background: var(--c); display: inline-block; flex: none; }
.letter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.letter-grid button {
  aspect-ratio: 1; border-radius: 10px; border: 1px solid var(--line); background: var(--bg2);
  font-size: 26px; cursor: pointer; color: var(--text); line-height: 1;
}
.letter-grid button:hover { border-color: var(--yellow); color: var(--yellow); }
.letter-grid button.on { background: var(--yellow); color: var(--bg); border-color: var(--yellow); }
.font-kind { margin-top: 8px; }
.ease-presets button { flex: none; padding: 4px 8px; }
.ease-presets button.on { border-color: var(--yellow); color: var(--yellow); background: rgba(255, 201, 60, .1); }
.try-list { display: flex; flex-direction: column; gap: 6px; }
.try-list .btn { text-align: left; white-space: normal; line-height: 1.3; }
.map { display: flex; flex-direction: column; gap: 4px; }
.map button {
  display: flex; gap: 10px; align-items: flex-start; text-align: left; background: var(--bg2);
  border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; cursor: pointer; color: var(--text);
}
.map button:hover { border-color: var(--yellow); }
.map .mi { font-size: 18px; line-height: 1.2; width: 22px; text-align: center; }
.map b { display: block; font-size: 13px; }
.map small { color: var(--muted); font-size: 11px; line-height: 1.35; display: block; }

/* Bernstein */
canvas.basis { width: 100%; height: 300px; display: block; cursor: crosshair; touch-action: none; }
canvas.sumbar { width: 100%; height: 46px; display: block; margin-top: 10px; }
canvas.pull {
  width: 100%; height: 392px; display: block; border-radius: 12px; touch-action: none;
  background: radial-gradient(circle at 50% 45%, #0f1628 0%, #070a12 75%);
}
.terms { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; font-size: 18px; margin: 8px 0; line-height: 2; }
.term { padding: 0 6px; border-radius: 8px; transition: background .1s; cursor: default; border: 1px solid transparent; }
.term:hover, .term.hl { background: rgba(255, 92, 138, .15); border-color: rgba(255, 92, 138, .5); }
.plus { color: var(--dim); }
.bern-bottom { margin-top: 6px; }
.pascal { font: 12px var(--mono); color: var(--dim); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pascal div { display: flex; gap: 4px; }
.pascal span { min-width: 30px; text-align: center; padding: 1px 0; border-radius: 5px; }
.pascal div.cur span { color: var(--bg); font-weight: 700; }
.facts { margin: 6px 0 0; padding-left: 18px; color: #c3cbe0; font-size: 13px; }
.facts li { margin: 5px 0; }
.facts.small { font-size: 12px; padding-left: 16px; }
.facts.small li { margin: 4px 0; color: var(--muted); }
.facts.small b { color: var(--text); }

/* Splines */
.badge-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.badge {
  font: 600 11px var(--mono); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); background: var(--bg2);
}
.badge.on { color: var(--bg); background: var(--c, var(--yellow)); border-color: var(--c, var(--yellow)); }
.local-box { text-align: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; padding: 10px; }
.local-box .sub { margin: 4px 0 0; }
.joint-counts { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 2px; }
.jc { flex: 1; min-width: 56px; text-align: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 6px 4px; }
.jc b { display: block; font: 800 18px var(--mono); color: var(--c); }
.jc span { font: 11px var(--mono); color: var(--muted); }
.jc.zero { opacity: .35; }

/* Fit */
.fit-samples h4 { margin: 12px 0 6px; font: 600 10px/1 var(--mono); letter-spacing: .15em; color: var(--muted); text-transform: uppercase; }
.sample-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; max-height: 260px; overflow-y: auto; scrollbar-width: thin; padding: 2px; }
.sample {
  aspect-ratio: 1; border-radius: 9px; border: 1px solid var(--line); background: #e9edf5;
  padding: 5px; cursor: pointer; transition: .15s; position: relative;
}
.sample img { width: 100%; height: 100%; object-fit: contain; display: block; }
.sample:hover { transform: translateY(-2px) scale(1.05); border-color: var(--yellow); }
.sample.on { outline: 3px solid var(--yellow); outline-offset: 1px; }
.status { font-size: 12px; color: var(--muted); margin: 8px 0 0; min-height: 18px; }
.status.err { color: var(--pink); }
.zip-bar { height: 8px; border-radius: 4px; background: var(--bg2); overflow: hidden; margin: 8px 0 4px; }
.zip-bar div { height: 100%; width: 0; background: linear-gradient(90deg, var(--blue), var(--green)); transition: width .3s; }
.fit-chart-head { margin-top: 12px; }
.fit-chart-head h3 { margin: 0; }
.fit-chart-head .seg button { white-space: nowrap; padding: 3px 8px; }
canvas.fitchart { width: 100%; height: 190px; display: block; margin-top: 6px; cursor: crosshair; }
canvas.fitfourier { width: 100%; height: 170px; display: block; border-radius: 10px; background: var(--bg2); }

/* Letters */
.font-legend {
  position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 4px;
  font-size: 11px; color: var(--muted); pointer-events: none;
}
.font-legend > span { display: flex; align-items: center; gap: 7px; }
.font-legend i { width: 10px; height: 10px; display: inline-block; }
.pt-on { background: var(--yellow); border-radius: 2px; }
.pt-off { border: 2px solid var(--blue); border-radius: 50%; }
.pt-imp { border: 1.5px dashed var(--muted); border-radius: 50%; }
canvas.fontsizes { width: 100%; height: 110px; display: block; border-radius: 10px; background: var(--bg2); }
.font-info p { color: #c3cbe0; font-size: 12px; margin: 6px 0; }

/* Easing */
.ease-layout { display: grid; grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr); gap: 14px; margin-bottom: 14px; }
.ease-layout .panel { margin: 0; }
.ease-right { display: flex; flex-direction: column; gap: 14px; }
canvas.ease-canvas { width: 100%; height: 600px; display: block; touch-action: none; }
.ease-name { font: 600 13px var(--mono); color: var(--yellow); }
canvas.ease-anim { width: 100%; height: 230px; display: block; margin-top: 8px; }
.ease-dur { margin: 0; min-width: 190px; }
.css-row { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.css-row .sub { margin: 0; flex: none; max-width: 170px; }
.css-track { position: relative; flex: 1; height: 30px; overflow: hidden; border-radius: 15px; background: var(--bg2); border: 1px solid var(--line); }
.css-ball {
  position: absolute; left: 10%; top: 4px; margin-left: -10px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 12px rgba(61, 220, 151, .6);
}
pre.css-code {
  font: 13px/1.6 var(--mono); background: var(--bg2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 14px; margin: 10px 0; color: var(--text); white-space: pre-wrap; word-break: break-all;
}
pre.css-code .n { color: var(--yellow); }
.ease-facts { text-align: center; }
.ease-facts .lab-big { font-size: 30px; }
.lesson-wide p { color: #c3cbe0; max-width: 900px; }

/* The circle */
canvas.conic { height: 420px; cursor: grab; touch-action: none; }

@media (max-width: 1200px) {
  #view-main.active, #view-spl.active, #view-fit.active, #view-font.active {
    grid-template-columns: 1fr; grid-template-rows: minmax(440px, 1fr) auto; overflow-y: auto;
  }
  .live { overflow: visible; }
  .ease-layout { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  #view-main.active, #view-spl.active, #view-fit.active, #view-font.active { grid-template-rows: 70vh auto; }
  .font-legend { display: none; }
}
/* the floating controls need the room on narrow stages */
@media (max-width: 1500px) { .stage-credit { display: none; } }