/* CompactDeckController.swift and DeckTheme.swift, in CSS pixels per app point. */
:root{--deck-panel:#30363e;--deck-recessed:#292e35;--deck-text:#ecf2f8;--deck-secondary:#acb7c5;--deck-border:rgba(125,140,155,.16);--depth:.4}
.canvas{overflow:clip;overflow-anchor:none}
.native-symbol{display:inline-block;flex:none;width:24px;height:24px;background:currentColor;mask:var(--symbol) center/24px 24px no-repeat;-webkit-mask:var(--symbol) center/24px 24px no-repeat;vertical-align:middle;pointer-events:none}
.controller,.settings-modal{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;color:var(--deck-text);font-synthesis:none}
.controller{position:absolute;left:0;top:0;right:auto;bottom:auto;transform:none;width:216px;height:var(--controller-height,388px);padding:8px;border:0;border-radius:28px;background:var(--deck-panel);box-shadow:-5px -5px 11px rgba(89,99,113,calc(.48 * var(--depth))),6px 6px 12px rgba(21,25,30,calc(1.44 * var(--depth)));display:flex;flex-direction:column;gap:6px;z-index:25;transition:width .16s,height .16s,border-radius .16s;isolation:isolate;touch-action:none}
.controller:before{content:"";position:absolute;inset:0;border:1px solid var(--deck-border);border-radius:inherit;pointer-events:none;z-index:5}
.controller-header{height:44px;min-height:44px;display:flex;align-items:center;gap:0}
.controller-header .grip{width:44px;height:44px;flex:none;padding:0;display:flex;align-items:center;justify-content:center;color:rgba(172,183,197,.6);cursor:grab;touch-action:none}
.grip-dots{width:9px;height:15.5px;background:radial-gradient(circle at 1.25px 1.25px,currentColor 1.25px,transparent 1.3px) 0 0/6.5px 6.5px;pointer-events:none}
.controller-heading{flex:1;min-width:0;text-align:center;font-size:11px;font-weight:600}
.controller-header .deck-icon{height:44px;width:44px;flex:none;border-radius:12px;padding:0;display:flex;align-items:center;justify-content:center;color:var(--deck-text);background:transparent;border:0}
.controller-preview .controller-header .deck-icon[aria-pressed=true]{border:1px solid var(--deck-border);color:var(--accent);background:var(--deck-recessed)}
.controller-header .deck-icon:active{color:var(--accent);background:var(--deck-recessed)}
.controller-body{display:flex;flex-direction:column;gap:6px;flex:1;min-height:0}
.controller .wheel{position:relative;flex:none;width:172px;height:172px;margin:0 auto;border:0;border-radius:50%;background:var(--deck-recessed);box-shadow:inset 0 0 0 1px var(--deck-border);touch-action:none;cursor:grab}
.controller .wheel-dial{width:172px;height:172px;display:block;pointer-events:none}
.controller .wheel-dial line{stroke:var(--deck-secondary);stroke-width:2;stroke-linecap:round;opacity:.7}
.controller .wheel-dial line.minor{stroke:var(--deck-secondary);stroke-width:2;opacity:.25}
.controller .wheel-arc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:17 83;transform:rotate(-120deg);transform-origin:center;opacity:.65}
.controller .wheel.tracking .wheel-arc{opacity:1}
.controller .ring-input{position:absolute;inset:0;border-radius:50%;z-index:1;cursor:grab;touch-action:none}
.controller .joystick{position:absolute;left:46px;top:46px;width:80px;height:80px;border:0;border-radius:50%;padding:0;background:var(--deck-recessed);box-shadow:inset 0 0 0 1px var(--deck-border);display:flex;align-items:center;justify-content:center;color:var(--deck-text);cursor:move;touch-action:none;z-index:2;transform:none}
.joystick-thumb{width:44px;height:44px;display:flex;flex-direction:column;gap:2px;align-items:center;justify-content:center;border:1px solid var(--deck-border);border-radius:22px;background:var(--deck-panel);box-shadow:-5px -5px 11px rgba(89,99,113,calc(.48 * var(--depth))),6px 6px 12px rgba(21,25,30,calc(1.44 * var(--depth)));pointer-events:none;transform:translate(var(--thumb-x,0px),var(--thumb-y,0px));transition:transform .2s cubic-bezier(.2,.8,.4,1.2)}
.joystick.tracking{color:var(--accent)}
.joystick.tracking .joystick-thumb{transition:none}
.joystick-thumb .native-symbol{height:20px}
.controller .joystick #controller-zoom{font-size:9px;line-height:11px;font-weight:600;letter-spacing:0;margin:0;font-variant-numeric:tabular-nums}
.controller .joystick .controller-zoom{font-size:9px;line-height:11px;font-weight:600;letter-spacing:0;margin:0;font-variant-numeric:tabular-nums}
.controller .deck-shortcuts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:44px;align-content:start;gap:6px;min-height:0;flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;touch-action:pan-y}
.controller .deck-shortcuts::-webkit-scrollbar{display:none}
.controller .deck-key{height:44px;min-height:44px;min-width:0;padding:0 1px;border:1px solid var(--deck-border);border-radius:12px;background:var(--deck-panel);box-shadow:none;display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;color:var(--deck-text);touch-action:pan-y}
.controller .deck-key .native-symbol{width:24px;height:20px}
.controller .deck-key>span:last-child:not(.native-symbol){font-size:9px;line-height:11px;font-weight:500;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.controller .deck-key.destructive{color:#ff967d}
.controller .deck-key:active,.controller .deck-key.flash,.controller .deck-key[aria-pressed=true]{background:var(--deck-recessed);color:var(--accent)}
.controller .deck-key:active,.controller .deck-key.flash{transform:scale(.96)}
.controller .deck-key.destructive:active,.controller .deck-key.destructive.flash{color:#ff967d}
.controller .deck-key:disabled{opacity:.3;cursor:default}
.controller.no-labels .deck-key>span:last-child:not(.native-symbol){display:none}
.controller .controller-footer{display:flex;gap:4px;align-items:center;justify-content:space-between;flex:none;height:44px;min-height:44px;margin:0}
.controller-footer #controller-status{display:block;flex:1;min-width:0;max-width:none;font-size:10px;line-height:16px;font-weight:500;color:var(--deck-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.controller .controller-footer>button{display:flex;flex-direction:column;gap:3px;align-items:center;justify-content:center;flex:none;width:44px;height:44px;min-height:44px;padding:0;color:var(--deck-text);font-size:9px;line-height:11px;font-weight:500}
.controller-footer>button .native-symbol{width:18px;height:18px}
.controller.collapsed{width:60px;height:104px;border-radius:24px;padding:8px;gap:0}
.controller.collapsed .controller-header{height:44px;min-height:44px;justify-content:center}
.controller.collapsed .controller-header>*:not(.grip),.controller.collapsed .controller-body{display:none}
.controller .collapsed-controller{display:none}
.controller.collapsed .collapsed-controller{height:44px;width:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center;flex:none;color:var(--accent)}
.controller .collapsed-controller .native-symbol{width:24px;height:24px}
.controller.no-navigation .wheel{display:none}
.controller.dragging .grip{cursor:grabbing}
.controller.dragging .deck-key,.controller.dragging .deck-icon,.controller.dragging .collapsed-controller{pointer-events:none}
.controller-guide{right:26px;top:calc(32% - 105px);width:156px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* The compact controller customiser uses the app's draft/save workflow. */
.settings-modal{--accent:#71d5ff;--accent-rgb:113,213,255;position:fixed;inset:0;width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:transparent;box-shadow:none;overflow:hidden;color-scheme:dark}
.settings-modal::backdrop{background:rgba(0,0,0,.42)}
.settings-panel{position:absolute;right:24px;top:110px;width:min(466px,calc(100% - 48px));height:min(882px,calc(100dvh - 132px));padding:24px;border:1px solid var(--deck-border);border-radius:32px;background:var(--deck-panel);box-shadow:-5px -5px 11px rgba(89,99,113,calc(.48 * var(--depth))),6px 6px 12px rgba(21,25,30,calc(1.44 * var(--depth)));display:flex;flex-direction:column;gap:16px}
.settings-panel .modal-heading{align-items:center;margin:0;gap:0;flex:none}
.settings-panel .modal-heading h2{font-size:23px;line-height:28px;font-weight:600;letter-spacing:0}
.settings-panel .modal-heading>.icon-button{width:44px;height:44px;margin:0 -8px 0 0;color:var(--deck-text)}
.settings-panel .icon-button svg{width:24px;height:24px}
.deck-segments{display:flex;gap:4px;padding:4px;background:var(--deck-recessed);border-radius:14px;flex:none}
.deck-segments button{flex:1;min-height:44px;padding:0 8px;border-radius:10px;color:var(--deck-secondary);font-size:13px;font-weight:600;white-space:nowrap}
.deck-segments button[aria-selected=true],.deck-segments button[aria-pressed=true]{background:var(--deck-panel);color:var(--accent);box-shadow:3px 3px 6px rgba(21,25,30,calc(1.44 * var(--depth))),-3px -3px 5px rgba(89,99,113,.24)}
.customiser-content{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain;padding:8px 3px}
.customiser-content section{display:flex;flex-direction:column;gap:18px}
.customiser-content h3{margin:0;font-size:14px;line-height:20px;font-weight:600}
#selected-slot-number{font-size:16px;margin-left:4px}
.slot-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px;padding:8px}
.slot-button{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:44px;margin:auto;padding:0;width:68px;color:var(--deck-text)}
.slot-glyph{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--deck-border);border-radius:16px;background:var(--deck-panel);box-shadow:-5px -5px 11px rgba(89,99,113,calc(.48 * var(--depth))),6px 6px 12px rgba(21,25,30,calc(1.44 * var(--depth)))}
.slot-glyph svg{width:24px;height:24px}
.slot-button>span:last-child:not(.slot-glyph){font-size:12px;line-height:14px;font-weight:500;overflow-wrap:anywhere}
.slot-button[aria-pressed=true]{color:var(--accent)}
.slot-button[aria-pressed=true] .slot-glyph{background:var(--deck-recessed);border-color:var(--accent)}
.settings-modal.compact-density .slot-button{width:56px}
.settings-modal.compact-density .slot-glyph{width:44px;height:44px}
.settings-modal.no-labels .slot-button>span:last-child:not(.slot-glyph){display:none}
.reorder-row{display:flex;align-items:center;gap:8px;margin-top:-8px;color:var(--deck-secondary)}
.reorder-row p{flex:1;font-size:12px;line-height:17px}
.deck-menu{position:relative;flex:none;font-size:13px}
.deck-menu summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;color:var(--deck-text);border-radius:12px}
.deck-menu summary::-webkit-details-marker{display:none}
.deck-menu summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.deck-menu>div{position:absolute;right:0;top:100%;z-index:4;min-width:185px;padding:6px;border:1px solid var(--deck-border);border-radius:12px;background:var(--deck-recessed);box-shadow:0 6px 20px #15191e66}
.deck-menu button{display:block;width:100%;padding:10px 12px;min-height:44px;text-align:left;border-radius:8px;font-size:13px}
.deck-menu button:hover{background:var(--deck-panel);color:var(--accent)}
.customiser-content hr{width:100%;margin:0;border:0;border-top:1px solid var(--deck-border)}
.command-search{display:flex;align-items:center;gap:8px;padding:0 12px;height:44px;flex:none;border:1px solid var(--deck-border);border-radius:12px;background:var(--deck-recessed);color:var(--deck-secondary)}
.command-search svg{width:24px;height:24px}
.command-search input,.custom-label input{width:100%;min-width:0;border:0;background:transparent;color:var(--deck-text);font-size:14px;outline-offset:0}
.command-search input::placeholder,.custom-label input::placeholder{color:var(--deck-secondary);opacity:.7}
.command-list{height:210px;flex:none;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:4px;display:flex;flex-direction:column;gap:6px}
.command-list>button{display:flex;align-items:center;gap:10px;min-height:44px;flex:none;padding:0 10px;border:1px solid var(--deck-border);border-radius:16px;background:var(--deck-panel);box-shadow:3px 3px 6px rgba(21,25,30,calc(.72 * var(--depth)));color:var(--deck-text);text-align:left;font-size:14px}
.command-list>button>span:nth-last-child(2){flex:1}
.command-list>button>span:last-child{font-size:12px;color:var(--deck-secondary);white-space:nowrap}
.command-list>button[aria-pressed=true]{border-color:var(--accent);background:var(--deck-recessed);color:var(--accent)}
.command-list>button>svg{width:24px;height:24px;flex:none}
.command-list .empty-commands{padding:12px;font-size:13px;color:var(--deck-secondary)}
.assignment-note{font-size:12px;line-height:17px;color:var(--accent)}
.command-hint{font-size:12px;line-height:17px;color:var(--deck-secondary)}
.command-hint:empty{display:none}
.custom-label{padding:12px;border:1px solid var(--deck-border);border-radius:12px;background:var(--deck-recessed)}
.custom-label input{font-size:13px}
.settings-panel .settings-footer{display:flex;align-items:center;gap:12px;margin:0;flex:none}
.reset-menu summary{width:96px;border:1px solid var(--deck-border);border-radius:16px;background:var(--deck-panel);font-weight:600}
.reset-menu>div{right:auto;left:0;top:auto;bottom:calc(100% + 8px)}
.save-controls{flex:1;min-height:44px;border:1px solid var(--accent);border-radius:16px;background:var(--deck-recessed);color:var(--accent);font-size:14px;font-weight:600}
.settings-preview{display:none;position:absolute;left:max(30px,calc((100vw - 466px - 294px)*.35));top:112px;width:294px}
.settings-preview>p{margin:0 0 20px;font-size:12px;font-weight:600;color:var(--accent)}
.controller.controller-preview{position:relative;left:auto;top:auto;right:auto;bottom:auto;width:216px;height:424px;transform:none;transition:none}
.controller-preview .controller-footer{height:16px;min-height:16px}
.controller-preview .controller-footer>span{font-size:10px;color:var(--deck-secondary);white-space:nowrap;max-width:none;flex:1}
.controller-preview .controller-footer>button,.controller-preview .collapsed-controller{display:none}
.controller-preview .grip,.controller-preview .deck-icon,.controller-preview .ring-input,.controller-preview .joystick{pointer-events:none}
.appearance-preview{display:flex;gap:20px;padding:16px;align-items:center;min-height:100px;pointer-events:none}
.appearance-preview .appearance-key{display:flex;align-items:center;gap:8px;padding:8px 14px;border:1px solid var(--deck-border);border-radius:16px;min-height:54px;background:var(--deck-panel);box-shadow:4px 4px 8px rgba(21,25,30,calc(.72 * var(--depth)))}
.appearance-key>span:last-child{display:flex;flex-direction:column;gap:1px;font-size:12px;font-weight:600}
.appearance-key small{font-size:10px;font-weight:400;color:var(--deck-secondary)}
.settings-modal.no-labels .appearance-key>span:last-child{display:none}
.appearance-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;font-size:14px}
.appearance-row>.deck-segments{max-width:250px;flex:1}
.settings-panel .accent-options{display:flex;gap:12px}
.settings-panel .accent-options button{flex:none;width:44px;min-height:44px;height:44px;padding:0;border:0;border-radius:0;background:none}
.settings-panel .swatch{width:26px;height:26px;border-radius:50%;border:2px solid transparent}
.settings-panel .accent-options button[aria-pressed=true] .swatch{border-color:var(--deck-text)}
.settings-panel .swatch.arctic{background:#71d5ff}.settings-panel .swatch.violet{background:#b59dff}.settings-panel .swatch.mint{background:#7ee1c3}
.settings-panel .toggle-row{border:0;min-height:44px;font-size:14px;color:var(--deck-text)}
.settings-panel .toggle-row input{appearance:none;width:51px;height:31px;border:0;border-radius:16px;background:#595f67;position:relative;cursor:pointer}
.settings-panel .toggle-row input:before{content:"";position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 3px #0003;transition:transform .16s}
.settings-panel .toggle-row input:checked{background:var(--accent)}
.settings-panel .toggle-row input:checked:before{transform:translateX(20px)}
.depth-control{display:flex;flex-direction:column;gap:12px;font-size:14px}
.depth-control>span{display:flex;justify-content:space-between}
.depth-control output{color:var(--deck-secondary)}
.depth-control input{width:100%;min-height:44px;margin:0;accent-color:var(--accent);cursor:pointer}
.position-value{color:var(--accent)}
.position-note{font-size:13px;line-height:18px;color:var(--deck-secondary)}
@media(min-width:881px){.settings-preview{display:block}}
@media(max-width:600px){.controller-guide{display:none}.settings-panel .modal-heading h2{font-size:23px}.settings-panel{padding:24px}.appearance-row>.deck-segments{max-width:225px}.appearance-row>.deck-segments button{padding:0 6px;font-size:12px}}
@media(max-height:431px){.settings-panel{top:16px;height:calc(100dvh - 32px)}.settings-preview{top:28px}.controller-guide{display:none}}
@media(prefers-reduced-motion:reduce){.controller,.joystick-thumb,.settings-panel .toggle-row input:before{transition:none}}

.profile-select,.ring-function-row select,.profile-label select,.catalogue-filters select{color:var(--accent);background:var(--deck-panel);border:0;border-radius:8px;min-height:44px;font:inherit;max-width:100%}
.profile-select{width:68px;font-size:11px;cursor:pointer;padding:0 1px}.controller.collapsed .profile-select{display:none}
.ring-function-row{display:flex;gap:4px;min-height:44px;align-items:center}.ring-function-row select{flex:1;min-width:0;font-size:11px}.ring-function-row button{display:flex;align-items:center;justify-content:center;gap:4px;min-height:44px;background:transparent;color:var(--deck-text);border:0;font:inherit;font-size:11px}.ring-function-row svg{width:16px;height:16px}.controller.no-navigation .ring-function-row{display:none}
.profile-label,.catalogue-filters{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px}.profile-note{font-size:12px;color:var(--deck-secondary);line-height:1.5}.catalogue-filters select{max-width:65%;font-size:12px}.custom-keys{margin:16px 0;font-size:12px}.custom-keys>div{display:flex;gap:8px;margin:8px 0}.custom-keys input{min-width:0;flex:1;min-height:44px;background:var(--deck-recessed);border:1px solid var(--deck-border);border-radius:10px;padding:8px;color:var(--deck-text);font:inherit}.custom-keys button{min-height:44px;background:var(--deck-panel);color:var(--accent);border:1px solid var(--deck-border);border-radius:10px;padding:8px}.custom-keys p{color:var(--deck-secondary)}

.swatch.amber{background:#f2bd78}

.controller-header .collapse-button svg,.controller .collapsed-controller svg{width:24px;height:24px}

/* The demo editor bar drives the status-only puck, as Figma does in the app. */
.demo-mode-bar{position:absolute;bottom:78px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;background:#292929;border:1px solid #555;border-radius:14px;z-index:8;box-shadow:0 8px 24px #0003;white-space:nowrap;color:#ddd;font-size:12px}
.demo-mode-bar>span{padding:0 8px;color:#aaa}.demo-mode-bar button{min-height:40px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#ddd;cursor:pointer}.demo-mode-bar button[aria-pressed=true]{background:#ece7df;color:#242424}.demo-mode-bar button:focus-visible{outline:2px solid #b8afff;outline-offset:2px}
.controller .profile-select{display:flex;align-items:center;cursor:default}.controller.collapsed .profile-select{display:none}
.development-work{margin:24px 0}.development-work h3{margin-bottom:4px}.development-work>p{font-size:12px;color:#666}.development-work details{margin:12px 0}.about-modal{max-height:85dvh;overflow:auto}
@media(max-width:600px){.demo-mode-bar{bottom:82px;max-width:calc(100% - 20px)}.demo-mode-bar>span{display:none}.demo-mode-bar button{padding:0 10px}}