/* /spectrogram/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.sp-head .sub{margin-bottom:1rem}
@media(max-width:520px){.sp-head h1{margin-bottom:0.25rem}.sp-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}
@media(min-width:920px){.sp-duo{grid-template-columns:minmax(0,1.6fr) minmax(19rem,.7fr)}}

.sp-stage,.sp-card{padding:1rem;display:grid;gap:0.75rem;align-content:start;min-width:0}
.sp-side{display:grid;gap:1.375rem;align-content:start}
@media(max-width:520px){.sp-stage,.sp-card{padding:0.75rem;gap:0.625rem}}
.sp-h{margin:0;font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
.sp-f .k,.sp-zoom .k,.sp-r .k{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}

/* source row */
.sp-src{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.sp-src .btn{flex:1 1 9rem}
.sp-filebtn{display:inline-flex;align-items:center;justify-content:center;text-align:center}
.sp-hide{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sp-hide:focus-visible+.sp-filebtn{outline:3px solid var(--accent);outline-offset:2px}
.sp-msg{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.sp-msg.bad{color:var(--bad)}

/* readout */
.sp-readout{display:flex;flex-wrap:wrap;gap:0.25rem 1rem;min-height:2.5rem;align-items:center;background:var(--surface-2);border:1px solid var(--line);border-radius:0.625rem;padding:0.375rem 0.75rem;box-shadow:inset 0.1875rem 0 0 var(--signal);font-family:var(--mono);font-size:0.8125rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.sp-readout b{color:var(--ink);font-weight:600}
.sp-r{white-space:nowrap}
.sp-pk b{color:var(--s1)}
.sp-hint{font-family:var(--sans);color:var(--muted)}

/* the picture */
.sp-view{position:relative;border-radius:0.5rem;overflow:hidden}
.sp-view canvas{display:block;width:100%;height:18.5rem;touch-action:none;cursor:crosshair;background:var(--surface)}
@media(min-width:920px){.sp-view canvas{height:28rem}}
.sp-view canvas:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}
.sp-zoom{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center}
.sp-zoom .btn{height:2.25rem;min-width:2.5rem;padding:0 0.75rem;font-size:0.9375rem}
.sp-zoom .k{margin-left:0.25rem}
.sp-zoom .btn:disabled,.sp-card .btn:disabled{opacity:.45;cursor:default;filter:none}
.sp-tip{margin:0;font-size:0.75rem;line-height:1.5;color:var(--muted)}

/* settings */
.sp-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem}
.sp-span{grid-column:1/-1}
.sp-f{display:grid;gap:0.3125rem;min-width:0}
.sp-f select,.sp-f input{padding:0.5rem 0.625rem}
.sp-modes{margin:0}
.sp-modes button{padding:0.375rem}
.sp-bar{display:flex;align-items:center;gap:0.5rem;font-family:var(--mono);font-size:0.6875rem;color:var(--muted);white-space:nowrap}
.sp-swatch{flex:1;height:0.625rem;border-radius:1px;box-shadow:inset 0 0 0 1px var(--line)}
.sp-note{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.sp-note:empty{display:none}
.sp-cut{margin:0;padding:0.5rem 0.75rem;border-left:0.1875rem solid var(--accent);background:var(--surface-2);border-radius:0.375rem;font-size:0.875rem;line-height:1.5}
.sp-row{display:flex;flex-wrap:wrap;gap:0.5rem 0.75rem;align-items:center}
.sp-stage .btn:focus-visible,.sp-card .btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}