/* September review: readable labels and consistent state controls. */
.ctl label,.grid-axis-head label,.grid-weight-row>span,.grid-spacing-row>span,.mode-label{font-size:16px!important}
.grid-note,.grid-stops,.disabled-reason{font-size:12px;line-height:1.5}
.disabled-reason{margin:8px 0 0;color:var(--muted)}.disabled-reason[hidden]{display:none}
.ctl.sleeping{opacity:1}.ctl.sleeping>input,.ctl.sleeping>.row{opacity:.4}
.switch-row{display:flex!important;align-items:center;gap:12px!important;font-size:15px!important;min-height:36px;cursor:pointer}
.switch-row input[type=checkbox]{appearance:none;-webkit-appearance:none;width:38px!important;height:22px!important;border:1px solid var(--muted);border-radius:30px;background:transparent;position:relative;flex:none;margin:0;cursor:pointer;transition:background .15s}
.switch-row input:before{content:'';position:absolute;width:14px;height:14px;top:3px;left:3px;border-radius:50%;background:var(--muted);transition:transform .15s}
.switch-row input:checked{background:var(--ink);border-color:var(--ink)}.switch-row input:checked:before{background:var(--paper);transform:translateX(16px)}
.switch-row input:disabled{opacity:.35;cursor:not-allowed}.switch-row input:disabled+span{opacity:.55}
.switch-row input:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.chain,#gridLink,html[data-ui-layout=modern] .chain,html[data-ui-layout=modern] #gridLink{display:inline-flex;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line);border-radius:30px;padding:5px 9px;font-size:12px;background:var(--paper-2);color:var(--ink);white-space:nowrap}
.chain-icon{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn:hover,.opt:hover,.chip:hover,#gridWeights button:hover,#gridSpacing button:hover,.polygon-control button:hover{background:var(--ink)!important;border-color:var(--ink)!important;color:var(--paper)!important}
.btn.primary:hover{background:var(--paper)!important;color:var(--ink)!important;box-shadow:inset 0 0 0 1px var(--ink)}
html[data-ui-layout=modern] .preset-menu>summary .icon-ring,html[data-ui-layout=modern] .preset-menu>summary .icon-stem{display:none!important}
html[data-ui-layout=modern] .preset-menu>summary .ui-icon{width:25px;height:25px;stroke-width:1.4}
.style-transfer{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.style-transfer .btn{flex:1 0 40%;padding:9px 6px;font-size:12px}
.settings-dialog{margin:auto;color:var(--ink);background:var(--paper);border:1px solid var(--line);width:min(680px,calc(100vw - 32px));padding:24px;max-height:90dvh}
.settings-dialog::backdrop{background:#0009}.settings-dialog form{display:flex;align-items:center;justify-content:space-between;gap:20px}.settings-dialog h2{font-size:24px;margin:0}.settings-dialog textarea{width:100%;height:40vh;resize:vertical;background:var(--paper-2);color:var(--ink);border:1px solid var(--line);padding:12px;font:12px/1.5 'Space Mono',monospace}.settings-actions{display:flex;gap:12px;margin-top:16px}
html[data-ui-layout=modern] .settings-dialog{border-radius:24px}
#packageBuildStatus{flex-basis:100%;width:100%;font-size:14px;line-height:1.5;margin:0 0 12px}.d-foot .btnrow{flex-wrap:wrap}
.arcade-dialog{margin:auto;width:min(1180px,calc(100vw - 32px));height:min(900px,calc(100dvh - 32px));max-width:none;max-height:none;padding:0;border:1px solid var(--line);background:var(--paper);color:var(--ink);overflow:hidden}
.arcade-dialog::backdrop{background:#0009}.arcade-dialog-head{display:flex;align-items:center;justify-content:space-between;height:60px;padding:10px 20px;border-bottom:1px solid var(--line)}.arcade-dialog-head>.btn{flex:none;padding:8px 16px}.arcade-dialog h2{flex:none;white-space:nowrap;margin:0;font-size:18px;font-weight:500}.arcade-dialog iframe{border:0;width:100%;height:calc(100% - 60px);display:block;background:var(--paper)}
html[data-ui-layout=modern] .arcade-dialog{border-radius:24px}.arcade-dialog-open{overflow:hidden}
@media(max-width:600px){.arcade-dialog{margin:auto;width:100vw;height:100dvh;border:0;border-radius:0!important}.ctl label{font-size:16px}.settings-dialog{padding:18px}}
@media(prefers-reduced-motion:reduce){.switch-row input,.switch-row input:before{transition:none}}

/* The style shelf shares the toolbar instead of covering the type proof. */
#topbar .preset-menu{display:flex;align-items:center;flex:1 1 0;min-width:0;margin:0;gap:18px;position:relative}
.preset-trigger{display:flex;align-items:center;gap:12px;flex:none;border:0;padding:8px 0;background:none;color:var(--ink);font-size:16px;white-space:nowrap;cursor:pointer}
.style-arrow{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.preset-menu.is-open .style-arrow{transform:rotate(180deg)}
.preset-scroll{position:relative;min-width:0;flex:1;overflow:hidden}.preset-scroll[hidden]{display:none}
#topbar .preset-menu #presetChips{position:static;display:flex;flex-wrap:nowrap;gap:8px;max-width:none;width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:5px 35px 5px 0;margin:0;border:0;border-radius:0;background:none;box-shadow:none}
#presetChips::-webkit-scrollbar{display:none}#presetChips .chip{font-size:16px!important;flex:none;white-space:nowrap;padding:9px 15px;line-height:1.3}
.preset-menu.more-presets .preset-scroll:after{content:'';pointer-events:none;position:absolute;right:0;inset-block:0;width:45px;background:linear-gradient(90deg,transparent,var(--paper))}
.corner-modes{display:flex;gap:5px;margin:4px 0 8px}.corner-modes[hidden]{display:none}
.corner-modes button,.axis-actions button{font:inherit;font-size:14px;flex:1;padding:8px 10px;border:1px solid var(--line);color:var(--ink);background:transparent;cursor:pointer}
.corner-modes button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
html[data-ui-layout=modern] .corner-modes button,html[data-ui-layout=modern] .axis-actions button{border-radius:24px}
.axis-controller{margin-bottom:22px}.axis-pad{position:relative;border:1px solid var(--line);background:var(--paper-2);touch-action:none;cursor:grab;overflow:hidden;aspect-ratio:11/7}.axis-pad:active{cursor:grabbing}.axis-pad:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.axis-pad[aria-disabled=true]{opacity:.35;cursor:default}
.axis-pad svg{display:block;width:100%;height:100%;fill:none;stroke:var(--ink);stroke-width:1}.axis-pad .axis-guides{stroke:var(--line);stroke-dasharray:2 5}.axis-pad polygon{fill:var(--ink);fill-opacity:.13;stroke-width:1.5}.axis-pad circle{fill:var(--ink);stroke:var(--paper-2);stroke-width:2}
.axis-pad span{position:absolute;bottom:9px;left:12px;font-size:12px;color:var(--muted)}.axis-actions{display:flex;gap:8px;margin:10px 0}.axis-actions button:disabled{opacity:.35;cursor:default}
html[data-ui-layout=modern] .axis-pad{border-radius:18px}
@media(max-width:850px){#topbar .preset-menu{order:5;flex-basis:100%;width:100%}.preset-trigger{font-size:15px}#presetChips .chip{font-size:15px!important}.preset-menu .preset-scroll{max-width:calc(100% - 170px)}}
@media(prefers-reduced-motion:reduce){.style-arrow{transition:none}}