/* /tone-generator/ 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}
.tg-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.tg-head .sub{margin-bottom:1rem}
@media(max-width:520px){.tg-head h1{margin-bottom:0.25rem}.tg-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}
@media(min-width:920px){.tg-duo{grid-template-columns:minmax(0,1.3fr) minmax(20rem,.8fr)}}

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

.tg-tabrow{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center}
.tg-tabs{display:contents}
.tg-tab{display:inline-flex;flex-direction:column;align-items:flex-start;gap:0.0625rem;padding:0.375rem 0.625rem;line-height:1.2}
.tg-tabn{font-size:0.6875rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.05em;opacity:.8}
.tg-tabf{font-family:var(--mono);font-size:0.8125rem}
.tg-add,.tg-rm{align-self:stretch}
.tg-add:disabled{opacity:.45;cursor:not-allowed}
.tg-tabrow .chip:focus-visible,.tg-opt .chip:focus-visible,.tg-card .chip:focus-visible,.tg-step:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

.tg-freq{display:grid;gap:0.5rem}
.tg-numrow{display:flex;gap:0.375rem;align-items:stretch}
.tg-step{flex:none;min-width:2.75rem;padding:0.5rem 0.5rem;font-family:var(--mono)}
.tg-num{flex:1;min-width:0;display:flex;align-items:center;position:relative;background:var(--surface-2);border:1px solid var(--line);border-radius:0.625rem;box-shadow:inset 0.1875rem 0 0 var(--signal)}
.tg-num input{border:0;background:transparent;font-family:var(--mono);font-size:1.75rem;font-weight:550;padding:0.375rem 0 0.375rem 0.875rem;text-align:left;-moz-appearance:textfield;appearance:textfield}
.tg-num input:focus{box-shadow:none}
.tg-num:focus-within{border-color:var(--accent);box-shadow:inset 0.1875rem 0 0 var(--signal),0 0 0 3px var(--accent-soft)}
.tg-num input::-webkit-inner-spin-button,.tg-num input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.tg-unit{flex:none;padding-right:0.75rem;font-family:var(--mono);font-size:0.9375rem;color:var(--muted)}
@media(max-width:400px){.tg-num input{font-size:1.375rem;padding-left:0.625rem}.tg-step{min-width:2.375rem;padding:0.5rem 0.25rem;font-size:0.8125rem}}
.tg-note{margin:0;font-family:var(--mono);font-size:0.9375rem;font-weight:600;color:var(--ink-2)}
.tg-scale{display:flex;justify-content:space-between;font-family:var(--mono);font-size:0.6875rem;color:var(--muted);margin-top:-0.125rem}

.tg-playrow{display:flex;gap:1rem;align-items:center}
.tg-play{flex:none;min-width:7.5rem;height:3rem;font-size:1rem}
.tg-play[aria-pressed=true],#noiseplay[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.tg-vol{flex:1;min-width:0;margin:0}
.tg-vol .head{margin-bottom:0.25rem}
.tg-caution{margin:0;padding:0.5rem 0.75rem;border-left:0.1875rem solid var(--warn);background:var(--surface-2);border-radius:0.375rem;font-size:0.8125rem;line-height:1.5;color:var(--ink-2)}

.tg-opts{display:grid;gap:0.75rem}
.tg-opt{display:grid;gap:0.375rem}
.tg-opt .chips,.tg-card .chips{display:flex;flex-wrap:wrap;gap:0.375rem}
.tg-a4{display:flex;align-items:center;gap:0.5rem;font-size:0.875rem}
.tg-a4 input{width:6rem;font-family:var(--mono)}
.tg-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
#msg:empty,.tg-status:empty{display:none}
.tg-status{margin:0;font-family:var(--mono);font-size:0.875rem;color:var(--ink-2)}

.tg-row{display:flex;flex-wrap:wrap;gap:0.75rem;align-items:flex-end}
.tg-sleep{display:grid;gap:0.25rem;flex:1;min-width:8rem}
.tg-sweep{display:grid;grid-template-columns:1fr 1fr;gap:0.625rem}
.tg-sweep label{display:grid;gap:0.25rem;min-width:0}
.tg-sweep input{font-family:var(--mono)}