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

.dm-stage,.dm-card{padding:1rem;display:grid;gap:0.75rem;align-content:start;min-width:0}
.dm-side{display:grid;gap:1.125rem;align-content:start;min-width:0}
@media(max-width:520px){.dm-stage{padding:0.625rem 0.5rem;gap:0.625rem}.dm-card{padding:0.75rem}}
.dm-stage .k,.dm-card .k{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.dm-h{margin:0;font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
.dm-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
#msg:empty,#exmsg:empty,#chaininfo:empty{display:none}
.dm-stage button:focus-visible,.dm-card button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.dm-btnrow{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}

/* transport */
.dm-transport{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0.5rem 0.625rem;align-items:center}
.dm-play{min-width:6.25rem;height:3rem;font-size:1rem}
.dm-play[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.dm-bpm{display:flex;align-items:center;min-width:0;background:var(--surface-2);border:1px solid var(--line);border-radius:0.625rem;box-shadow:inset 0.1875rem 0 0 var(--signal);height:3rem}
.dm-bpm input{flex:1;min-width:0;width:100%;border:0;background:transparent;font-family:var(--mono);font-size:1.5rem;font-weight:600;padding:0 0 0 0.75rem;-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}
.dm-bpm input:focus{box-shadow:none}
.dm-bpm:focus-within{border-color:var(--accent);box-shadow:inset 0.1875rem 0 0 var(--signal),0 0 0 3px var(--accent-soft)}
.dm-bpm input::-webkit-inner-spin-button,.dm-bpm input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.dm-unit{flex:none;padding-right:0.625rem;font-family:var(--mono);font-size:0.8125rem;color:var(--muted)}
.dm-tap{height:3rem;min-width:4rem}
.dm-swing{grid-column:1 / -1;margin:0}
.dm-swing .head{margin-bottom:0.125rem}
@media(min-width:700px){.dm-transport{grid-template-columns:auto 9rem auto minmax(10rem,1fr)}.dm-swing{grid-column:auto}}

/* pattern bar */
.dm-patbar{display:flex;flex-wrap:wrap;gap:0.375rem;align-items:center}
.dm-pats{display:flex;gap:0.25rem}
.dm-pat{min-width:2.5rem;padding:0.4375rem 0.5rem;font-family:var(--mono);font-weight:650}
.dm-pat.playing{box-shadow:inset 0 -0.1875rem 0 var(--signal)}
.dm-steps{display:grid;gap:0.25rem}
.dm-steps select{width:auto;font-family:var(--mono);font-size:0.8125rem}
.dm-acc{margin-left:auto}
.dm-acc[aria-pressed=true],.dm-padopts .chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--bg)}

/* grid */
.dm-gridwrap{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}
.dm-grid{display:grid;gap:0.1875rem;min-width:0}
.dm-row{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:0.25rem;align-items:stretch}
.dm-lab{border:0;background:transparent;padding:0;font:inherit;font-family:var(--mono);font-size:0.6875rem;font-weight:600;color:var(--ink-2);text-align:left;cursor:pointer;border-radius:0.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-lab .long{display:none}
.dm-row.off .dm-lab{color:var(--muted);text-decoration:line-through}
.dm-cells{display:grid;grid-template-columns:repeat(var(--n,16),minmax(0,1fr));gap:0.125rem}
.dm-cell{height:2.125rem;min-width:0;padding:0;border:1px solid var(--line-2);border-radius:0.25rem;background:var(--surface-2);cursor:pointer;touch-action:manipulation;transition:background-color .05s}
.dm-cell.beat{background:var(--surface);border-color:var(--line-2)}
.dm-cell.on{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 0.25rem var(--surface-2)}
.dm-cell.beat.on{box-shadow:inset 0 0 0 0.25rem var(--surface)}
.dm-cell.acc{background:var(--accent);border-color:var(--accent)}
.dm-cell.now{box-shadow:inset 0 0 0 2px var(--signal)}
.dm-cell.on.now{background:var(--signal);border-color:var(--signal);box-shadow:inset 0 0 0 0.25rem var(--surface-2)}
.dm-cell.acc.now{background:var(--signal);border-color:var(--signal);box-shadow:none}
.dm-row.off .dm-cell.on,.dm-row.off .dm-cell.acc{opacity:.45}
.dm-grid.n32 .dm-cells{min-width:38rem}
@media(min-width:521px){.dm-row{grid-template-columns:4.75rem minmax(0,1fr)}.dm-lab{font-size:0.75rem}.dm-lab .long{display:inline}.dm-lab .short{display:none}.dm-cell{height:2.375rem}.dm-cells{gap:0.1875rem}}
@media(min-width:1280px){.dm-cell{height:2.625rem}}

/* pads */
.dm-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.375rem}
.dm-pad{height:3.5rem;border:1px solid var(--line-2);border-radius:0.5rem;background:var(--surface);color:var(--ink);font:inherit;font-weight:600;font-size:0.8125rem;cursor:pointer;touch-action:manipulation;display:grid;place-content:center;gap:0.0625rem;user-select:none;-webkit-user-select:none}
.dm-pad kbd{font-family:var(--mono);font-size:0.6875rem;color:var(--muted);background:none;border:0;padding:0}
.dm-pad.hit{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.dm-pad.hit kbd{color:var(--signal-ink)}
@media(min-width:700px){.dm-pads{grid-template-columns:repeat(8,minmax(0,1fr))}}
.dm-padopts{display:flex;flex-wrap:wrap;gap:0.375rem 0.625rem;align-items:center}

.dm-patrow{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:end}
.dm-name{display:grid;gap:0.25rem;flex:1 1 12rem;min-width:0}
.dm-patbtns{display:flex;flex-wrap:wrap;gap:0.375rem}

/* side cards */
.dm-shared{border-color:var(--accent);box-shadow:inset 0.25rem 0 0 var(--accent)}
#sharedname{font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.dm-starters{display:grid;gap:0.375rem}
.dm-starter{display:grid;gap:0.125rem;text-align:left;padding:0.5rem 0.75rem;line-height:1.35}
.dm-starter b{color:var(--ink)}
.dm-starter span{font-size:0.78125rem;font-weight:450;color:var(--muted)}
.dm-mix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.25rem 0.5rem}
.dm-mixrow{display:flex;align-items:center;gap:0.25rem;min-width:0}
.dm-mixname{flex:1;min-width:0;border:1px solid transparent;background:transparent;font:inherit;font-size:0.8125rem;font-weight:550;color:var(--ink);text-align:left;padding:0.3125rem 0.375rem;border-radius:0.375rem;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm-mixname.sel{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)}
.dm-ms{flex:none;width:1.875rem;height:1.875rem;padding:0;font-family:var(--mono);font-size:0.75rem;font-weight:650;border:1px solid var(--line-2);border-radius:0.375rem;background:var(--surface);color:var(--muted);cursor:pointer}
.dm-ms[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.dm-ms.solo[aria-pressed=true]{background:var(--signal);color:var(--signal-ink);border-color:var(--signal)}
.dm-voiceedit{display:grid;gap:0.5rem;padding-top:0.25rem;border-top:1px solid var(--line)}
.dm-voiceedit .field .head,.dm-card>.field .head{margin-bottom:0.125rem}
.dm-vname{margin:0.25rem 0 0;font-size:0.875rem}
.dm-cardhead{display:flex;justify-content:space-between;align-items:center;gap:0.75rem}
.dm-switch{display:inline-flex;align-items:center;gap:0.375rem;font-weight:600;font-size:0.875rem;cursor:pointer}
.dm-switch input,.dm-exopts input[type=checkbox],.dm-exopts input[type=radio]{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}
.dm-chain{display:flex;flex-wrap:wrap;gap:0.25rem;min-height:2.25rem}
.dm-link{min-width:2.25rem;padding:0.375rem 0.5rem;font-family:var(--mono);font-weight:650}
.dm-link.now{border-color:var(--signal);box-shadow:inset 0 -0.1875rem 0 var(--signal)}
.dm-addrow .chip{font-family:var(--mono)}
.dm-exopts{display:grid;gap:0.5rem;font-size:0.875rem}
.dm-exopts label{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap}
.dm-exopts input[type=number]{width:4.5rem;font-family:var(--mono)}
.dm-exopts select{width:auto}
#sharelink{font-family:var(--mono);font-size:0.75rem}