/* Canary Options · accessible studio controls and continuous timeline. */
:root{--accent:#a7c7e7;--accent-ink:#101b2b;--room-lime:#a7c7e7;--room-purple:#c7b8ee;--room-peach:#efb2a0;--coral:#efb2a0;--gold:#c7b8ee;--mint:#b2c9e0;--blue:#a7c7e7;--bg:#101925;--panel:#192536;--line:#35465c;--text:#e9eff7;--muted:#b3c1d2}
body{background:var(--bg);color:var(--text)}
.studio-shell>.transport{background:#1b2a3ded;border-color:#465e7d}
.panel,.pad-inspector{background:var(--panel);border-color:var(--line)}
.room-card{color:#101b2b;border-color:#7c99b9}.room-instrument,.room-sampler{color:#101b2b}
.room-dock{background:#1b2a3df5;border-color:#465e7d}.room-dock button{color:#c4d4e7}.room-dock button.active{color:#101b2b}
.band-invite{background:linear-gradient(110deg,#23374e,#182535);border-color:#415a76}
.band-live{background:#1d2e43;border-color:#465e7d}.band-members li{background:#142034}
.band-live p,.band-live details,.band-members small,.band-members li>span:not(.member-dot),.small-note,.section-intro p,.home-stage>p,.band-invite p{color:#bbcadb}
.button,.button.primary,.play-button,.assign-pad{background:#a7c7e7;color:#101b2b;border-color:#7c99b9;font-weight:750}
.button:hover,.button.primary:hover,.play-button:hover,.assign-pad:hover{background:#c2d9ef;border-color:#94b4d6;color:#101b2b}
.button:disabled{opacity:.42;cursor:not-allowed}
.text-button,.text-button.subtle,.quiet-button{color:#b9d6f0;font-weight:700}
.icon-button{color:#bed7f1}.text-input,.tempo-control input{background:#111d2c;color:#e9eff7;border-color:#536b86}
.badge{background:#253951;color:#d4e4f6;border-color:#526b88}
.button.danger,.session-exit,[data-action="close-modal"].button,[data-action="clear-pattern"],[data-action="sequence-remove"],[data-action="delete-clip"],[data-action="stop"],.pad-loop.looping{background:#efa8ac;color:#2d1017;border-color:#d27885;font-weight:750}
.button.danger:hover,.pad-loop.looping:hover{background:#ffc0c3;color:#2d1017}
.modal-actions button[type="submit"],.editor-save,.button[data-action="backup"]{background:#a5d7b9;color:#11291b;border-color:#74af8d}
.session-strip #save-state{color:#c1d3e6}.room-dock button.active,.nav-item.active{background:var(--accent);color:#101b2b}
.coral{--pad-color:#efb2a0;--pad-bg:#332a2d}.gold{--pad-color:#c7b8ee;--pad-bg:#302c42}.mint{--pad-color:#b2c9e0;--pad-bg:#233248}.blue{--pad-color:#a7c7e7;--pad-bg:#24344c}
.pad-slot{min-width:0;display:flex;flex-direction:column;border:1px solid #40536d;border-radius:13px;overflow:hidden;background:#142132}
.pad-slot .pad{width:100%;flex:1;border-radius:12px 12px 0 0;border:0;border-bottom:1px solid #40536d;background:var(--pad-color);color:#101b2b;min-height:120px}
.pad-slot .pad:hover{background:color-mix(in srgb,var(--pad-color) 84%,#fff)}
.pad-slot .pad.selected{box-shadow:inset 0 0 0 3px #314b70}
.pad-slot .pad.hit{background:#dcecff;color:#101b2b}
.pad-top,.pad-kind{opacity:.85}.pad-name{font-size:14px;font-weight:800}.pad-kind{font-size:9px!important;letter-spacing:.04em}
.pad-controls{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:6px}
.pad-controls .button{font-size:11px;padding:7px 3px;gap:4px;min-height:40px;border-radius:6px}
.pad-controls .icon{width:13px;height:13px}.pad-slot .empty-pad{background:#283e59;color:#d6e8fc}
.sequence-scroll{padding:0!important;overflow:auto;max-height:65vh;overscroll-behavior-x:contain;touch-action:pan-y;cursor:grab;scrollbar-width:auto;scrollbar-color:#a7c7e7 #101b2b;scrollbar-gutter:stable}
.sequence-scroll.dragging{cursor:grabbing;user-select:none}
.sequence-scroll::-webkit-scrollbar{height:15px;width:12px}.sequence-scroll::-webkit-scrollbar-thumb{background:#9dbbdc;border:3px solid #172436;border-radius:10px}.sequence-scroll::-webkit-scrollbar-track{background:#172436}
.sequence-grid.timeline-grid{--sequence-label:160px;display:block;position:relative;min-width:672px;gap:0;padding:0 0 6px;background:#131e2d}
.timeline-row,.timeline-ruler{display:flex;position:relative;width:100%;min-height:68px;border-bottom:1px solid #324761}
.timeline-ruler{height:38px;min-height:38px;position:sticky;top:0;z-index:6;background:#21334a}
.timeline-grid .sequence-track,.timeline-grid .sequence-corner{position:sticky;left:0;z-index:5;width:var(--sequence-label);min-width:var(--sequence-label);max-width:var(--sequence-label);padding:8px;box-sizing:border-box;background:#203148;border-right:1px solid #56718f;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.timeline-grid .sequence-corner{font-size:10px;padding:12px 8px;justify-content:center}
.timeline-grid .sequence-label{position:static;background:none;color:#d7e5f6;font-size:12px;font-weight:700;white-space:normal;min-height:22px}
.sequence-label>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.track-tools{display:flex;justify-content:space-between;gap:5px}.track-tools .button{min-height:27px;padding:4px 7px;font-size:10px}.track-tools .icon-button{width:28px;min-height:27px;height:27px;border-radius:5px}
.timeline-lane{position:relative;flex-shrink:0;min-height:inherit;background:repeating-linear-gradient(90deg,transparent 0 127px,#536e8f55 127px 128px)}
.timeline-grid .step{position:absolute;top:0;width:32px;height:100%;min-height:68px;border:0;border-right:1px solid #3e526b66;border-radius:0;background:#1b2b4055;touch-action:pan-y}
.timeline-grid .step.group-shade{background:#293e5555}.timeline-grid .step:hover{background:#42618b66}
.timeline-grid .step-number{position:absolute;top:0;width:32px;height:38px;display:grid;place-items:center;padding:0;color:#a8bdd6;font-size:11px}.timeline-grid .step-number.beat{color:#e1ecf8;font-weight:700}
.sequence-block{position:absolute;top:6px;height:56px;min-width:2px;background:var(--pad-color);color:#101b2b;border:1px solid #091522;border-radius:6px;overflow:hidden;text-align:left;display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0;touch-action:pan-y;box-sizing:border-box;box-shadow:0 2px 7px #0004;font-size:12px;font-weight:800;white-space:nowrap}
.sequence-block span,.sequence-block small{padding-left:5px;overflow:hidden;pointer-events:none}.sequence-block small{font-size:10px;font-weight:600}.sequence-block:hover{filter:brightness(1.12)}
.timeline-playhead{position:absolute;top:38px;bottom:6px;width:2px;background:#f7c0ad;z-index:4;pointer-events:none;box-shadow:0 0 5px #f7c0ad88}
.timeline-playhead[hidden]{display:none}
.timeline-hint{font-size:12px;color:#bed0e4;padding:12px 20px;line-height:1.6;border-top:1px solid #334d6b}
.sequence-position{display:flex;align-items:center;gap:16px;padding:14px 20px;background:#203148;font-size:12px;color:#cfdef0}.sequence-position input{flex:1;min-width:60px;accent-color:#a7c7e7;height:28px}
.sequence-length,.sequence-pages{flex-wrap:wrap}.sequence-length .button,.sequence-pages .button{min-height:40px}.sequence-pages input[type=checkbox]{accent-color:#a7c7e7}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #9bc8f6;outline-offset:3px}
.toast{display:none;max-width:min(620px,calc(100vw - 28px));white-space:normal;align-items:center;gap:16px;background:#253b55;color:#e6f1ff;border:1px solid #6a8db3;line-height:1.5}.toast.visible{display:flex;pointer-events:auto}.toast button{flex-shrink:0;background:#a7c7e7;color:#101b2b;font-weight:750;border:0;border-radius:6px;padding:10px}.toast.error{background:#502d39;border-color:#d48798}
@media(max-width:700px){.pads-panel{padding:0}.pads-grid{padding:0 12px 16px;gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}.pad-slot .pad{min-height:108px}.pad-name{font-size:14px}.pad-controls .button{min-height:44px;font-size:12px}.pad-controls .icon{width:15px;height:15px}.pad-inspector{scroll-margin-top:150px}.sequence-length,.sequence-pages{padding-left:12px;padding-right:12px;gap:8px}.timeline-hint{padding:12px}.sequence-position{padding:9px 12px;gap:8px;font-size:11px}.sequencer-panel .heading-actions .button{min-height:44px}.timeline-grid .sequence-track{padding:7px}.sequence-block{font-size:12px}.sequence-scroll{max-height:58vh}.section-intro p{font-size:14px}.pad-kind{font-size:9px!important}}
@media(min-width:701px) and (max-width:1100px){.sampler-layout{grid-template-columns:1fr}.pad-controls .button{font-size:12px}}

dialog{background:#1d2b3d;border-color:#536d8b;color:#e9eff7}.text-button[data-action="clear-pattern"]{color:#2d1017;border-radius:7px;padding:10px}.button[data-action="account"].account-access{background:#a5d7b9;color:#11291b;border-color:#74af8d}
@media(max-width:700px){.sequence-grid.timeline-grid{--sequence-label:120px}.timeline-grid .sequence-corner{font-size:9px}.sequencer-panel .heading-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sequencer-panel .heading-actions .button,.sequencer-panel .heading-actions .text-button{font-size:11px;min-height:44px;padding:8px}.sequencer-panel .heading-actions .button:first-child{grid-column:1/-1}}

/* 3.5.1: numbered positions and explicit placement. */
.timeline-ruler{height:60px;min-height:60px}
.timeline-grid .step-number{top:26px;height:34px;font-variant-numeric:tabular-nums}
.bar-number{position:absolute;top:0;width:512px;height:26px;box-sizing:border-box;padding:4px 8px;border-left:1px solid #718daf;color:#d3e2f5;font-size:11px;font-weight:700}
.track-number{display:block;color:#c5def7;font-size:11px;font-weight:800;font-variant-numeric:tabular-nums}
.timeline-row{min-height:90px}.timeline-playhead{top:60px}
.timeline-grid .step:hover{background:#1b2b4055}.timeline-grid .step.group-shade:hover{background:#293e5555}
.sequence-block{top:23px}.block-position{color:#c5def7;font-weight:700}

/* 3.6: direct arrangement editing. */
.sequence-block{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sequence-block.selected{outline:2px solid #e7f1ff;outline-offset:-3px}
.sequence-block.is-loop{background-image:repeating-linear-gradient(90deg,transparent 0,transparent calc(var(--loop-width) - 2px),#132d4c66 calc(var(--loop-width) - 2px),#132d4c66 var(--loop-width))}
.sequence-block.moving{opacity:.82;z-index:8;outline:3px solid #fff;box-shadow:0 8px 20px #0009;cursor:grabbing}
.sequence-scroll.moving-block{cursor:grabbing;user-select:none}
.block-drag-hint{position:fixed;z-index:200;pointer-events:none;padding:9px 12px;border-radius:7px;background:#a7c7e7;color:#101b2b;font-size:12px;font-weight:800;box-shadow:0 5px 16px #0008}
.sequence-edit-options{display:flex;align-items:center;gap:14px;padding:6px 20px;color:#c4d9ef;font-size:12px;flex-wrap:wrap}.sequence-edit-options label{display:flex;gap:8px;align-items:center;font-weight:700}.sequence-edit-options input{width:18px;height:18px;accent-color:#a7c7e7}
#sequence-selection{min-height:82px;box-sizing:border-box;padding:10px 20px;background:#203148;display:flex;flex-direction:column;justify-content:center;gap:9px;font-size:12px;border-block:1px solid #3e5877}
.selection-empty{color:#b8cce4}.selection-actions{display:flex;gap:8px;flex-wrap:wrap}.selection-actions .button{min-height:40px;font-size:12px}
@media(max-width:700px){#sequence-selection{padding:10px 12px;min-height:126px}.selection-actions{display:grid;grid-template-columns:1fr 1fr}.selection-actions .button{min-height:44px}.sequence-edit-options{padding:8px 12px}.block-drag-hint{font-size:11px}}