/* JamMixLab: white work surfaces, confident accents, readable Greek typography. */
:root{--ink:#26324d;--muted:#5b6981;--line:#d9e1ed;--blue:#377ed4;--teal:#149c87;--coral:#e9576f;--purple:#6650dc;--yellow:#ecae1c;--font:'Ubuntu Sans',Arial,sans-serif}
body{background:#f3f5f9;color:var(--ink)}
.app-header,.transport-bar{background:#fff;border-color:#d9e1ed}
.project-name,.project-title input,#projectName{color:#26324d;font-weight:650}
.library{background:#fff;border-color:#d9e1ed}.library-heading h1{color:#26324d}
.library-heading h1{display:flex;align-items:center;gap:8px}.library-heading h1 .icon-svg{width:26px;height:26px}
.transport-bar .counter-caption,.clock-position .total-time,#projectLength,.tempo-limits{color:#63728b}
.transport-bar .time-display{background:transparent}
.transport-bar .musical-position,.transport-bar .clock-position{background:#f2f5fa;color:#26324d;border-color:#d4deec}
.transport-bar .meter-badge{font:750 17px/1.15 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.3px;color:#475779}
.transport-bar .play-button{background:#159b83;border-color:#0e806e;box-shadow:0 3px 0 #0c7565}
.transport-bar .stop-button{background:#fff;border-color:#eeb1bb;box-shadow:0 2px 0 #ebc2ca}
.transport-bar .transport-toggle{background:#fff;border-color:#ccd7e7;color:#425a7c}
.transport-bar .transport-toggle[aria-checked=true]{background:#d7f1e9;border-color:#329f83;box-shadow:0 2px 0 #93cbb9}
.tempo-control>button{background:#fff7df;border-color:#e0b94e;color:#755017}
.key-control>button{background:#fff;border-color:#a8bedc;color:#355574}
.genre-trigger{background:#fff;border-color:#c8d3e3;color:#33435f;box-shadow:0 2px 0 #e0e6f0}
.genre-trigger .selected-genre-name,.genre-option-name{color:#2e3b57}
.library-sections>button{background:#fff;color:#58667e;border-color:#d5deeb;box-shadow:0 2px 0 #e2e7ef}
.library-sections>button[data-library-section=patterns][aria-selected=true],.library-sections>button:first-child[aria-selected=true]{background:#286fae;color:#fff;border-color:#205f97;box-shadow:0 3px 0 #1b568c}
.library-sections>button:nth-child(2)[aria-selected=true]{background:#7050b8;color:#fff;border-color:#5b3e9c;box-shadow:0 3px 0 #50368b}
.library-sections>button:nth-child(3)[aria-selected=true]{background:#dba323;color:#392d16;border-color:#bd8613;box-shadow:0 3px 0 #b27e13}
.library-sections>button[aria-selected=true] .section-count,.library-sections>button[aria-selected=true] strong{color:inherit}
.search{background:#f2f5fa;border-color:#d5deeb;color:#546580}.search input{color:#35445f}.search input::placeholder{color:#66768f}
.phrase-category{border-color:color-mix(in srgb,var(--family-color) 65%,#c8d3e3)}
.phrase-category>h2>button{background:#fff;color:#34435f;box-shadow:inset 4px 0 var(--family-color)}
.phrase-category.is-open>h2>button{background:color-mix(in srgb,var(--family-color) 21%,white);color:#26324d}
.phrase-category-clips{background:#f8f9fc}.loop-card,.idea-card,.changes-card{background:#fff;color:#35435e;border-color:#d5deeb}
.sample-name,.idea-name,.changes-name{color:#2d3a56;font-weight:650}.sample-meta,.idea-footer,.changes-meta{color:#5c6e87}
.track-header{background:#fff;border-color:#d7dfec}.track-header.selected{background:color-mix(in srgb,var(--track-color) 10%,white)}
.track-title input{color:#26324d}.track-voice{background:#f5f7fb;color:#465774;border-color:#d6deec}
.track-controls button{background:#fff;border-color:#d4deeb}
.track-controls button[aria-checked=true]{background:color-mix(in srgb,var(--track-color) 30%,white);border-color:var(--track-color)}
.timeline-content,.lane{background-color:#fff}.ruler,.ruler-bars{background:#f6f8fb;color:#34435f}.ruler-bar{color:#465774}
.harmony-row{background:#fff;border-color:#cbd6e6}
.clip{border-color:var(--clip-color)}.clip-title{background:color-mix(in srgb,var(--clip-color) 26%,white);color:#29364e}
.clip-name{color:#29364e}.clip-key{color:#33415d}
.project-room{background:#fff;border-color:#d1dbea;box-shadow:0 24px 80px #1b294633}
.project-room::backdrop{background:#dce2edcc;backdrop-filter:blur(8px)}
.project-room h1,.project-room h2,.project-room h3,.room-form-heading h2{color:#29364f}
.entry-landing .playground-entry>button{background:#159b83;color:#fff;border-color:#0d806d;box-shadow:0 4px 0 #0b7463}
.entry-landing .playground-entry>button>span:first-child{background:#087b69;box-shadow:none}
.student-entry-actions>button{background:#6a4dc6;color:#fff;border-color:#543baa;box-shadow:0 3px 0 #4f349b}
.student-entry-actions>button:last-child{background:#f1c54d;color:#433319;border-color:#d4a52b;box-shadow:0 3px 0 #bf9120}
.student-entry-actions>button>span:first-child{background:#ffffff30}
.auth-card,.dashboard-main,.dashboard-sidebar,.saved-project,.room-open{background:#fff;color:#34445f;border-color:#d6deeb}
.room-primary{background:#6348c4;color:#fff;border-color:#5035ab;box-shadow:0 3px 0 #49309c}
.project-room input:not([type=checkbox]),.project-room select{background:#fff;color:#2e3c58;border-color:#bdcbe0}
.room-tabs{background:#f2f5fa}.room-tabs button{color:#51627c}.room-tabs button[aria-selected=true]{background:#6a4dc6;color:#fff}
.account-role-choice label{background:#fff;border-color:#cbd6e7;color:#3f506d}.account-role-choice label:has(input:checked){background:#ece7fc;border-color:#7759c8;color:#433277}
.note-editor{background:#fff;color:#28364e;border-color:#cbd6e7}.note-editor-heading{background:#fff;border-bottom:1px solid #d9e1ed}
.note-heading-copy h2{color:#2e3a55}.note-heading-copy p{color:#5c6e87}.note-editor-tools{background:#f8f9fc}
.note-editor .note-tool{background:#fff;border-color:#c6d3e6}.note-editor .note-tool[aria-pressed=true]{background:#6a4dc6;border-color:#573dad;color:#fff}
.note-editor .note-measure-corner,.note-editor .note-measure{background:#f0f3f9;color:#465774}
.note-editor .note-key{color:#52637d}.note-editor .note-finish button{color:#344967}.note-editor .note-finish .note-done{color:#fff;background:#159b83;border-color:#0d806d}
.file-menu,.context-menu,.note-context-menu,.bar-chord-picker,.voice-options,.track-icon-picker,.zoom-panel,.genre-options{background:#fff;color:#34445f;border-color:#cbd6e7}
.context-menu-item{color:#34445f}.context-menu-item:hover{background:#eef2fa}
.app-footer,.site-footer{background:#f7f9fc;color:#62738c;border-color:#d9e1ed}
.drag-artwork{display:grid;grid-template-columns:repeat(2,3px);grid-template-rows:repeat(3,3px);align-content:center;justify-content:center;gap:3px;pointer-events:none}.drag-artwork i{width:3px;height:3px;border-radius:50%;background:#6f6a92;box-shadow:0 .7px 0 #38325755}
.welcome-art{display:flex;align-items:center;justify-content:center;gap:22px;height:84px;margin-bottom:16px}
.welcome-art>span{display:grid;place-items:center;position:relative;width:68px;height:68px;animation:welcome-float 4s ease-in-out infinite}
.welcome-art>span:nth-child(2){animation-delay:-1s}.welcome-art>span:nth-child(3){animation-delay:-2.5s}.welcome-art>span:nth-child(4){animation-delay:-1.7s}
.welcome-art .instrument-picture,.welcome-art .icon-svg{width:62px;height:62px}.welcome-art .instrument-picture>.instrument-artwork{width:100%;height:100%}
.welcome-art>span:after{content:'';position:absolute;right:-13px;top:24px;width:6px;height:6px;border-radius:2px;background:#e5b231;transform:rotate(20deg)}.welcome-art>span:nth-child(2):after{background:#28af97;top:48px}.welcome-art>span:nth-child(3):after{background:#7760cf;top:7px}.welcome-art>span:last-child:after{display:none}
@keyframes welcome-float{0%,100%{transform:translateY(2px) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
@media(max-width:540px){.welcome-art{gap:12px;height:72px}.welcome-art>span{width:54px;height:54px}.welcome-art .instrument-picture,.welcome-art .icon-svg{width:50px;height:50px}.library-heading h1{font-size:16px}}
@media(prefers-reduced-motion:reduce){.welcome-art>span{animation:none}}

.genre-symbol.ui-artwork{display:block;width:26px;height:26px;flex-shrink:0}.selected-genre-icon .genre-symbol,.genre-option-icon .genre-symbol{width:100%;height:100%}
.drum-symbol.ui-artwork{display:block;width:24px;height:24px;flex-shrink:0}.note-editor.is-drums .note-key .drum-symbol.ui-artwork{width:25px;height:25px}

.brand-mark .logo-mouth{stroke:#7655d3}.brand-mark .logo-eyes{fill:#29235c}

#playgroundEntry>span:first-child .icon-svg{width:34px;height:34px}
.student-entry-actions>button{font-size:14px;min-height:56px;padding:10px 16px}.student-entry-actions>button .icon-svg{width:27px;height:27px}
.brand-mark .logo-headphones rect{fill:#7655e8;stroke:#4e38af}

.brand-ja{color:#e74d64}.brand-mix{color:#d3a01c}.brand-lab{color:#159b78}.brand-tagline{color:#566782;font-weight:600}
.project-room .room-primary{background:#6348c4;color:#fff;border-color:#5035ab;box-shadow:0 3px 0 #49309c}
.project-room .room-tabs{background:#f1f4f9}.project-room .room-tabs button{color:#4d5d77}.project-room .room-tabs button[aria-selected=true]{background:#6545c1;color:#fff;border-color:#5134a6;box-shadow:0 2px 0 #493095}
.project-room label,.project-room legend{color:#4b5a74}

.phrase-family-caret .icon-svg{width:13px;height:13px;opacity:.86}
.voice-category-caret .icon-svg{width:14px;height:14px}
.project-room .room-primary .icon-svg,.note-done .icon-svg{background:#fffcf2;border-radius:7px;padding:3px;width:26px;height:26px;object-fit:contain}

/* Harmony is musical information: each root keeps the same pitch color in
   the library, arrangement, editor and playback halo. */
.harmony-chip,.measure-chord-chip,.note-measures>.note-measure>span{
 border:1px solid color-mix(in srgb,var(--pitch-color) 48%,white);
 border-bottom:3px solid color-mix(in srgb,var(--pitch-color) 78%,#26324d);
 background:color-mix(in srgb,var(--pitch-color) 23%,white);
 color:color-mix(in srgb,var(--pitch-color) 35%,#26324d);
 font-weight:750;line-height:1.15;
}
.measure-chord{padding:0;background:color-mix(in srgb,var(--pitch-color) 23%,white);color:inherit;display:flex;align-items:stretch;justify-content:center;overflow:hidden;border-left:1px solid color-mix(in srgb,var(--pitch-color) 40%,white)}
.measure-chord.in-sequence{padding:20px 0 0}
.measure-chord-chip{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:0;box-sizing:border-box;padding:3px 1px;border:0;border-bottom:3px solid color-mix(in srgb,var(--pitch-color) 78%,#26324d);border-radius:0;font-size:12px;white-space:nowrap;pointer-events:none;overflow:hidden;text-overflow:ellipsis}
.measure-chord:hover .measure-chord-chip{background:color-mix(in srgb,var(--pitch-color) 32%,white)}
.measure-chord.is-sounding{background:color-mix(in srgb,var(--pitch-color) 34%,white);box-shadow:none}
.measure-chord.is-sounding .measure-chord-chip,.changes-card .harmony-chip.is-sounding,.note-measures>.note-measure>span.is-sounding{
 background:color-mix(in srgb,var(--pitch-color) 34%,white);
 border-color:color-mix(in srgb,var(--pitch-color) 75%,#26324d);
 box-shadow:0 0 7px 1px color-mix(in srgb,var(--pitch-color) 33%,transparent);
}
.harmony-chip,.measure-chord-chip{transition:background .15s,box-shadow .15s,border-color .15s}
.harmony-region{border-style:solid;border-color:color-mix(in srgb,var(--sequence-color) 48%,#cbd6e6);background:transparent}
.harmony-region.is-default{border-style:dashed;border-color:#b6c4d8;background:transparent}
.harmony-region>[data-sequence-handle]{background:color-mix(in srgb,var(--sequence-color) 10%,#f7f9fc);color:#50617c;font-size:10px;line-height:1.1}
.harmony-region.is-selected{border-color:var(--sequence-color);box-shadow:0 0 0 1px color-mix(in srgb,var(--sequence-color) 40%,transparent)}
.harmony-region.is-selected>[data-sequence-handle]{background:color-mix(in srgb,var(--sequence-color) 19%,white);color:#344761}
/* Crisp dice faces remain legible at this small size without scaling artwork. */
.harmony-region>.sequence-dice,.harmony-region.is-selected>.sequence-dice{width:20px;height:18px;right:2px;top:0;padding:2px;border:0;border-radius:4px;background:transparent;color:#6750a3;box-shadow:none}
.harmony-region>.sequence-dice:hover{background:transparent;color:#513587}.sequence-dice:hover .sequence-die{background:#f1ecfb;border-color:#8d76b5}
.sequence-die{display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:1px;width:14px;height:14px;padding:1px;box-sizing:border-box;border:1px solid #b8a9d4;border-radius:3px;background:#fff;pointer-events:none}
.sequence-die>i{width:2.3px;height:2.3px;border-radius:50%;background:currentColor;visibility:hidden}
.sequence-die[data-face="1"]>i:nth-child(5),
.sequence-die[data-face="2"]>i:is(:nth-child(1),:nth-child(9)),
.sequence-die[data-face="3"]>i:is(:nth-child(1),:nth-child(5),:nth-child(9)),
.sequence-die[data-face="4"]>i:is(:nth-child(1),:nth-child(3),:nth-child(7),:nth-child(9)),
.sequence-die[data-face="5"]>i:is(:nth-child(1),:nth-child(3),:nth-child(5),:nth-child(7),:nth-child(9)),
.sequence-die[data-face="6"]>i:is(:nth-child(1),:nth-child(3),:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(9)){visibility:visible}
#harmonyLibrary .changes-card{padding:11px 10px 10px;border-left-width:3px;box-shadow:0 2px 0 #e0e6f080}
#harmonyLibrary .changes-card-title{min-height:26px;margin-bottom:9px;gap:8px}
#harmonyLibrary .changes-card-title .genre-badge{flex:0 0 25px}
#harmonyLibrary .changes-card-title strong{padding:0;color:#2f405c;font-size:13px;font-weight:750;white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
#harmonyLibrary .changes-card-chords{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;align-items:stretch}
#harmonyLibrary .harmony-chip{min-height:28px;padding:4px 2px;font-size:12px;border-radius:7px;white-space:nowrap}
#harmonyLibrary .changes-card-chords:has(.is-wide){grid-template-columns:repeat(2,minmax(0,1fr))}
.changes-card-footer{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:7px;margin-top:9px;min-height:30px}
.changes-card-footer>small{color:#687993;font-size:10px;line-height:1.3;font-weight:600;overflow-wrap:anywhere;min-width:0}
.changes-card-actions{display:flex;align-items:center;gap:5px}
.changes-card-actions>button{width:30px;height:30px;padding:5px;box-shadow:0 2px 0 #e7edf5}
.changes-card-actions>button[aria-pressed=true]{background:#e4f4ed;border-color:#63b49c;box-shadow:0 1px 0 #a8d7c7}
#harmonyLibrary .changes-card-actions .edit-changes{position:static}
.changes-heading{color:#60728c}.changes-heading button{background:#fff;border-color:#c5d0e3;color:#554591;box-shadow:0 2px 0 #e5eaf3}
.arrangement-heading{background:#fbfcfe;border-bottom:1px solid #dce4f0}
.zoom-tools{background:#fff;border:1px solid #dce4ef;border-radius:12px;padding:3px;gap:3px}
.zoom-tools>.icon-button{background:#fff}.zoom-tools>.icon-button:hover{background:#edf2fa}
.app-header .project-name{background:transparent;border:1px solid transparent;border-radius:10px;padding:7px 9px}
.app-header .project-name:focus{background:#fff;border-color:#b9c8df}
.lane{background-image:linear-gradient(to right,#cbd7e9 1px,transparent 1px),linear-gradient(to right,#eef2f8 1px,transparent 1px)}
.section-symbol>small{padding:1px 4px;border-radius:5px;background:#eef2f7;font-size:9px;font-weight:700;line-height:1.25}
.library-sections>button[aria-selected=true] .section-symbol>small{background:#ffffff2c;color:inherit}
@media(max-width:760px){
 #harmonyLibrary.harmony-library{max-height:164px;align-items:stretch;padding-bottom:7px}
 #harmonyLibrary.harmony-library:has(.harmony-chip.is-wide){max-height:196px}
 #harmonyLibrary .changes-card{flex:0 0 230px;min-width:230px;max-height:none;align-self:stretch;padding:9px}
 #harmonyLibrary .changes-card-title{margin-bottom:7px}
 #harmonyLibrary .changes-card-footer{margin-top:7px}
 .zoom-tools{padding:2px;gap:1px}
}
@media(prefers-reduced-motion:reduce){.harmony-chip,.measure-chord-chip{transition:none}}

.harmony-region>.sequence-dice:before{inset:-4px}

.measure-chord.is-narrow .measure-chord-chip{flex-direction:column;gap:0;padding:1px;font-size:11px}
.measure-chord.is-narrow .chord-kind{font-size:9px;line-height:1.1}

/* Phrase names have priority over decorative and key metadata. */
.clip,.drop-ghost{--clip-heading-height:25px;container:clip / inline-size}
.clip-title{position:relative;height:var(--clip-heading-height);box-sizing:border-box;padding:3px 26px 3px 6px;gap:5px;overflow:visible}
.clip-title>.clip-name{display:block;order:1;min-width:0;flex:1 1 auto;font-size:11px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clip-title>.clip-tonic{order:2;margin-left:auto;flex:0 0 auto}
.clip-title>.clip-instrument{order:0;flex:0 0 17px;width:17px;height:17px}
.clip-title:after{display:none}
.clip-segments,.clip-content{height:calc(100% - var(--clip-heading-height))}
.clip-segments .waveform,.clip-content .waveform,.clip-repeat .waveform{height:100%}
@container clip (max-width:260px){
 .clip-title{height:40px;--clip-heading-height:40px;align-items:flex-start;padding-top:5px}
 .clip-title>.clip-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal;overflow-wrap:anywhere;line-height:1.15;font-size:10.5px}
 .clip-title>span.clip-tonic{position:absolute;top:43px;right:4px;margin:0;z-index:2;padding:1px 4px;font-size:8px;background:#ffffffed}
 .clip-segments{height:calc(100% - 40px)}
}
@container clip (max-width:110px){.clip-title>.clip-instrument{display:none}.clip-title{padding-left:5px;gap:0}.clip.compact .clip-title>.clip-name{display:-webkit-box;font-size:9px}}
.selection-name{min-width:0;max-width:260px;font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2f405d}
.selection-mode{display:flex;align-items:center;padding:2px;gap:2px;border:1px solid #d6deeb;border-radius:10px;background:#f5f7fb}
.selection-mode>button,#selectIdea.idea-selection-toggle{height:30px;min-width:0;width:auto;padding:4px 8px;border:0;border-radius:7px;box-shadow:none;background:transparent;color:#5d6b82;font-size:11px;gap:4px;white-space:nowrap}
.selection-mode #selectPhrase[aria-pressed=true]{background:#327eb9;color:white}
.selection-mode #selectIdea[aria-pressed=true]{background:#efc45b;color:#493816}
.selection-mode #selectIdea>.icon-svg,.selection-mode #selectIdea>span>.icon-svg{width:16px;height:16px}
.clip.selected:not(.idea-selected){outline:2px solid #3e80c0;outline-offset:1px}
.clip.idea-selected{outline:2px solid #c49b35;outline-offset:1px}
.clip-actions{gap:6px;flex:1;min-width:0}.timeline-tools{margin-left:auto}
.project-heading{display:grid;grid-template-columns:minmax(0,1fr);gap:3px 8px;align-content:center}
.app-header .project-heading>.project-name{grid-column:1/-1;grid-row:1}
.project-heading .save-status{grid-column:1;grid-row:2}
@media(max-width:1000px){.clip-actions{flex-wrap:wrap}.selection-name{flex:1 1 100%;max-width:none}.arrangement-heading:has(#clipActions:not([hidden])) .timeline-tools{flex-basis:auto}}
@media(max-width:650px){.project-heading{height:auto!important;min-height:44px}.selection-mode>button,#selectIdea.idea-selection-toggle{font-size:10px;padding-inline:6px}.selection-name{font-size:11px}}

.idea-voice>.idea-part-audition{display:flex;align-items:center;gap:5px;flex:1;min-width:0;width:auto;height:29px;padding:2px 3px;border:0;background:transparent;color:#34465f;box-shadow:none}
.idea-part-audition>.instrument-picture{flex:0 0 21px;width:21px;height:21px}
.idea-part-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left;font-size:11px;font-weight:650}
.idea-part-flag{width:8px;height:8px;flex:0 0 8px;border:1px solid var(--voice-color);border-radius:50%;background:var(--voice-color)}
.idea-part-audition[aria-pressed=false]{opacity:.48}.idea-part-audition[aria-pressed=false] .idea-part-flag{background:white}
.idea-part-audition:focus-visible{outline:2px solid var(--voice-color);outline-offset:1px}
.idea-voice>.piano-mini{flex:0 0 42px;width:42px;height:17px;pointer-events:none}
.idea-footer>.idea-all-parts{display:flex;align-items:center;gap:5px;width:auto;min-width:60px;padding:3px 7px;font-size:10px;color:#54647e}
.idea-all-parts .icon-svg{width:17px;height:17px}.idea-all-parts[aria-pressed=true]{background:#e6f4ef;border-color:#8ebfae}
@media(max-width:760px){.library-content>.ideas-library{max-height:224px}.ideas-library .idea-card{flex-basis:238px;min-width:238px;max-height:none}.idea-voice>.idea-part-audition{height:27px}.idea-voices{gap:2px;margin:6px 0}.idea-voice>.piano-mini{flex-basis:40px;width:40px}}

.idea-voices{grid-template-columns:minmax(0,1fr)}.idea-voice{min-width:0;width:100%;box-sizing:border-box;gap:4px}

/* A harmony drag occupies exactly its destination bars, even at far zoom. */
.harmony-drop{display:grid;grid-template-columns:repeat(var(--drop-cells,4),minmax(0,1fr));align-items:stretch;justify-content:normal;overflow:hidden;gap:1px;padding:1px;container-type:inline-size}
.harmony-drop .harmony-chip,.harmony-drop.is-single-chord .harmony-chip{min-width:0;width:100%;max-width:100%;margin:0;padding:2px 0;border-radius:4px;font-size:clamp(8px,10cqw,12px);overflow:hidden;text-overflow:ellipsis}
.harmony-drop:has(.idea-drop-label){grid-template-columns:minmax(0,1fr)}
.harmony-drop .idea-drop-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:clamp(8px,9cqw,12px);gap:4px;padding:0 3px}
.harmony-drop .idea-drop-label :is(svg,.instrument-picture){flex:0 0 18px;width:18px;height:18px}

.clip-actions>.selection-mode{display:flex}.clip-actions>.selection-name{display:block}
@media(max-width:760px){
 .app-header .project-heading>.project-name{grid-column:1;grid-row:1}
}

.harmony-drop .harmony-chip.is-wide{font-size:clamp(7px,7.8cqw,10px);letter-spacing:-.2px}
/* Matching account actions, including the older high-specificity profile rule. */
.room-identity :is(#profilePhoto,#groupLogout){box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:0 0 142px;width:142px;height:44px;min-height:44px;margin:0;padding:0 12px;border:1px solid #d1c3e5;border-radius:12px;background:#fff;color:#665181;font:650 12px/1 var(--font);white-space:nowrap;cursor:pointer}
.room-identity :is(#profilePhoto,#groupLogout)>img{width:24px;height:24px;flex:0 0 24px;object-fit:contain;pointer-events:none}
.room-identity :is(#profilePhoto,#groupLogout):hover{background:#f7f1ff;border-color:#ac90d7}
.room-identity :is(#profilePhoto,#groupLogout):focus-visible{outline:3px solid #bea8e5;outline-offset:3px}
@media(max-width:650px){.room-identity :is(#profilePhoto,#groupLogout){flex:1 1 calc((100% - 10px)/2);width:auto;min-width:0}}

/* One compact selection strip; dividers separate editing, copies and removal. */
.clip-actions{padding:5px 7px;border:1px solid #d6e0ef;border-radius:13px;background:#fff;box-sizing:border-box;gap:8px;flex-wrap:wrap}
.clip-actions .selection-name{padding:7px 10px;box-sizing:border-box;max-width:220px;border:1px solid color-mix(in srgb,var(--selection-color,#7c6bd3) 40%,#e4e8f1);border-left:3px solid var(--selection-color,#7c6bd3);border-radius:8px;background:color-mix(in srgb,var(--selection-color,#7c6bd3) 9%,white);color:#34455e;font-size:12px;line-height:1.2}
.clip-action-tools{display:flex;align-items:center;gap:3px;flex:0 0 auto}
.clip-actions .clip-action-tools>button{box-sizing:border-box;width:38px;height:38px;padding:7px;border:0;border-radius:9px;background:transparent;box-shadow:none}
.clip-actions .clip-action-tools>button:hover{background:#f0f4fb}
.clip-actions .clip-action-tools>button .icon-svg{width:24px;height:24px}
.clip-actions .clip-action-tools>#deleteClip{background:transparent}
.clip-actions .clip-action-tools>#deleteClip:hover{background:#fff0f3}
.clip-actions .action-divider{display:block;flex:0 0 1px;width:1px;height:23px;margin:0 5px;background:#dce3ed}
.selection-mode [data-phrase-icon]{display:flex;align-items:center}
.selection-mode [data-phrase-icon]>.instrument-picture{width:20px;height:20px;flex:0 0 20px}
.selection-mode>button,#selectIdea.idea-selection-toggle{height:34px}
@media(max-width:1000px){.clip-actions .selection-name{flex:0 1 auto;max-width:220px}.clip-actions{flex:1 1 100%}.arrangement-heading{flex-wrap:wrap}}
@media(max-width:650px){.clip-actions{gap:5px;padding:4px}.clip-actions .selection-name{max-width:180px;font-size:11px}.clip-action-tools{gap:1px}.clip-actions .clip-action-tools>button{width:36px;height:36px}.clip-actions .action-divider{margin-inline:3px}}
.clip-actions>.selection-mode{max-width:none;overflow:visible;flex-shrink:0}
@media(max-width:1000px){.arrangement-heading:has(#clipActions:not([hidden])) #clipActions{flex:1 1 100%;width:100%;max-width:100%}}

/* A shared baseline and hit area for selection, zoom and extending the timeline. */
.arrangement-heading{align-items:center;gap:10px;padding-top:7px;padding-bottom:7px}
.arrangement-heading .clip-actions{min-height:56px;padding:5px 7px;gap:8px;align-items:center;border-radius:13px}
.arrangement-heading .selection-name{display:flex;align-items:center;min-height:44px;margin:0;line-height:1.2}
.arrangement-heading .clip-actions .selection-mode{display:flex;align-items:center;gap:3px;box-sizing:border-box;padding:0;border-radius:10px;max-width:none}
.arrangement-heading .selection-mode>button,.arrangement-heading #selectIdea.idea-selection-toggle{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;height:44px;width:auto;padding:6px 10px;font-size:12px;line-height:1.15;border-radius:9px}
.arrangement-heading .selection-mode>button .icon-svg,.arrangement-heading .selection-mode [data-phrase-icon]>.instrument-picture{width:26px;height:26px;flex:0 0 26px}
.arrangement-heading .clip-action-tools{display:flex;align-items:center;gap:3px}
.arrangement-heading .clip-actions .clip-action-tools>button{box-sizing:border-box;width:44px;min-width:44px;height:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;margin:0;padding:7px;border-radius:9px}
.arrangement-heading .clip-actions .clip-action-tools>button .icon-svg{display:block;width:28px;height:28px;object-fit:contain}
.arrangement-heading .timeline-tools{display:flex;align-items:center;gap:10px;flex-shrink:0;margin-left:auto}
.arrangement-heading .timeline-tools .zoom-tools{display:flex;align-items:center;gap:3px;box-sizing:border-box;min-height:56px;padding:5px 7px;border:1px solid #d6e0ef;border-radius:13px;background:white}
.arrangement-heading .zoom-tools .icon-button{box-sizing:border-box;width:44px;min-width:44px;height:44px;min-height:44px;padding:7px;margin:0;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;background:transparent;box-shadow:none}
.arrangement-heading .zoom-tools .icon-button:hover:not(:disabled){background:#f0f4fb}
.arrangement-heading .zoom-tools .icon-svg{display:block;width:28px;height:28px;object-fit:contain}
.arrangement-heading .zoom-axis-divider,.arrangement-heading .action-divider{display:block;flex:0 0 1px;width:1px;height:26px;margin:0 4px;background:#dce3ed}
.arrangement-heading #extendTimeline{box-sizing:border-box;min-height:44px;height:44px;margin:0;padding:6px 11px;gap:7px;border:1px solid #d6e0ef;border-radius:10px;font-size:12px;line-height:1.15}
.arrangement-heading #extendTimeline .icon-svg{width:26px;height:26px;flex:0 0 26px}
@media(max-width:650px){.arrangement-heading{flex-wrap:wrap}.arrangement-heading .clip-actions{width:100%;gap:5px}.arrangement-heading .clip-action-tools{gap:1px}.arrangement-heading .clip-actions .selection-name{max-width:100%;font-size:11px}.arrangement-heading .clip-actions>.selection-mode{display:flex;max-width:100%;flex-shrink:1}.arrangement-heading .selection-mode>button,.arrangement-heading #selectIdea.idea-selection-toggle{gap:5px;padding:6px 7px;font-size:11px}.arrangement-heading .timeline-tools{gap:7px;justify-content:space-between;width:100%}.arrangement-heading .timeline-tools .zoom-tools{gap:0;padding:4px}.arrangement-heading .zoom-tools .icon-button{width:38px;min-width:38px;height:44px}.arrangement-heading .zoom-axis-divider{margin:0 3px}.arrangement-heading #extendTimeline{font-size:11px;padding:6px 7px;gap:4px}.arrangement-heading #extendTimeline .icon-svg{width:22px;height:22px;flex-basis:22px}}
.arrangement-heading{flex-wrap:wrap}
.arrangement-heading>#clipActions{flex:1 1 auto;max-width:100%;min-width:0;gap:8px}
.arrangement-heading #selectIdea>.icon-svg,.arrangement-heading #selectIdea>span>.icon-svg{width:26px;height:26px;flex:0 0 26px}
@media(max-width:380px){.arrangement-heading .zoom-tools .icon-button{width:35px;min-width:35px}.arrangement-heading #extendTimeline{font-size:10px;padding-inline:5px;gap:3px}}