:root{--paper:#f6f3ed;--surface:#fffcf7;--line:#dfdcd4;--ink:#25343a;--muted:#748085;--orange:#dc6037;--amber:#b98129;--red:#cc5555;--green:#347967;font-family:Inter,"Pretendard","Malgun Gothic",system-ui,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ed9b67;outline-offset:3px}button{border:0}a{color:inherit}input,select{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px;min-width:0}input[type=checkbox]{accent-color:var(--orange)}input[type=range]{accent-color:var(--orange)}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:20px;font-weight:800;letter-spacing:-.5px}.brand small{display:block;font-size:10px;letter-spacing:2px;font-weight:500;color:var(--muted);margin-top:3px}.local-dot{height:7px;width:7px;background:var(--green);border-radius:100%}.workspace{display:grid;grid-template-columns:280px minmax(420px,1fr) 294px;min-height:calc(100vh - 126px)}.catalog-panel{border-right:1px solid var(--line);padding:28px 18px 18px;background:var(--surface);display:flex;flex-direction:column}.search-field{display:flex;align-items:center;border:1px solid var(--line);border-radius:6px;background:var(--paper);gap:8px;padding:0 10px}.search-field span{font-size:24px;line-height:1;color:var(--muted)}.search-field input{border:0;background:transparent;font-size:12px;width:100%;padding:11px 0}.catalog-meta{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--muted);margin:18px 0 10px}.catalog-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:calc(100vh - 334px);min-height:280px;overflow-y:auto;align-content:start;padding:2px}.catalog-footer{font-size:10px;color:var(--muted);line-height:1.8;margin-top:20px;border-top:1px solid var(--line);padding:15px 3px 0}.editor-panel{padding:28px 28px 18px;min-width:0}.save-status{font-size:10px;color:var(--green);max-width:140px;text-align:right}.save-status.error{color:var(--red)}.patch-toggle{display:flex;align-items:center;gap:3px}.zoom-label{display:flex;align-items:center;font-size:9px;gap:5px}.zoom-label input{width:64px}.canvas-wrap{height:440px;position:relative;border:1px solid var(--line);border-radius:10px;overflow:auto;background-color:var(--yds-canvas-bg);background-image:radial-gradient(circle,var(--yds-canvas-grid) 0 .8px,transparent 1.1px);background-size:14px 14px;display:flex;align-items:flex-start;justify-content:flex-start}#board-canvas{flex:none;display:block;touch-action:none;margin:auto;user-select:none}#board-canvas [data-pedal]{cursor:grab}#board-canvas [data-pedal]:active{cursor:grabbing}.empty-board{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:none;color:#e7e5df}.empty-board[hidden]{display:none}.empty-board button{pointer-events:auto}.empty-icon{font-weight:300;font-size:38px;opacity:.6}.empty-board h2{font-size:17px;margin:9px 0}.empty-board p{font-size:11px;margin:0 0 20px;color:#bbc2c1}.fit-summary{border-top:1px solid var(--line);padding:20px 0;display:flex;align-items:center;justify-content:space-between;gap:15px}.fit-summary h2{font-size:16px;letter-spacing:-.5px;margin:7px 0}.fit-summary p{font-size:11px;color:var(--muted);line-height:1.7;margin:0}.inspector-panel{border-left:1px solid var(--line);background:var(--surface);padding:28px 18px;min-width:0}.notice{padding:12px 25px;background:#f6e4b8;font-size:12px}.notice[hidden]{display:none}.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;border-radius:8px;padding:13px 20px;font-size:12px;max-width:calc(100vw - 40px);box-shadow:0 5px 25px #0002;z-index:100}.toast[hidden]{display:none}@media(min-width:1600px){.workspace{grid-template-columns:300px minmax(600px,1fr) 320px}.canvas-wrap{height:540px}.catalog-list{max-height:calc(100vh - 320px)}}@media(max-width:1180px){.workspace{grid-template-columns:245px minmax(400px,1fr)}.inspector-panel{grid-column:1/-1;display:grid;grid-template-columns:180px 1fr 300px;gap:20px;border-left:0;border-top:1px solid var(--line)}.editor-panel{padding:25px 20px}.canvas-wrap{height:430px}}@media(max-width:720px){.brand{font-size:18px}.workspace{display:flex;flex-direction:column}.catalog-panel{padding:22px 18px;border-right:0;border-bottom:1px solid var(--line)}.catalog-list{grid-template-columns:repeat(4,minmax(100px,1fr));display:flex;overflow-x:auto;min-height:0;max-height:200px}.catalog-footer{display:none}.editor-panel{padding:22px 15px}.canvas-wrap{height:350px}.inspector-panel{display:block;padding:22px}}
:not(dialog)>.inspector-panel{overflow-y:auto}.workspace{height:calc(100vh - 126px)}.editor-panel{overflow-y:auto}@media(max-width:1180px){.workspace{height:auto}.inspector-panel{overflow:visible}.editor-panel{overflow:visible}}@media(min-width:1181px){.inspector-panel{height:calc(100vh - 126px)}}
.catalog-panel{min-height:0}.brand-filter{display:flex;align-items:center;gap:8px;font-size:10px;color:var(--muted);margin-top:9px}.brand-filter select{width:100%;font-size:11px;padding:7px}.catalog-meta{flex:none;margin:12px 0 9px}.catalog-list{flex:1;min-height:125px;max-height:none}.catalog-pagination{display:flex;align-items:center;justify-content:space-between;gap:6px;padding-top:11px;flex:none}.catalog-pagination span{font-size:10px;font-variant-numeric:tabular-nums;color:var(--muted)}.catalog-pagination button{padding:6px 10px;background:var(--paper);border:1px solid var(--line);color:var(--ink)}.catalog-footer{flex:none;margin-top:12px;padding-top:10px;font-size:9px}
@media(min-width:1600px){.catalog-list{max-height:none}}@media(max-width:1180px){.catalog-list{max-height:520px;flex:none}.catalog-panel{min-height:0}}@media(max-width:720px){.catalog-list{flex:none;max-height:220px;min-height:160px}.brand-filter{max-width:100%}.catalog-pagination{max-width:340px;margin:auto;width:100%}}
.brand-filter{white-space:nowrap}.brand-filter select{flex:1;width:auto;min-width:0}
.image-menu{position:absolute;inset:auto;margin:0;width:300px;max-width:calc(100vw - 24px);padding:18px 18px 6px;border:1px solid var(--line);border-radius:10px;color:var(--ink);background:var(--surface);box-shadow:0 12px 40px #0002}.image-menu h2{font-size:15px;margin:8px 0 12px}.image-menu .inline-label{display:flex;align-items:center;gap:7px;font-size:12px;margin:9px 0}.image-menu-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:15px}.image-menu[aria-busy=true]{cursor:progress}
.agent-steps{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}.agent-steps>li{border:1px solid var(--line);border-radius:8px;padding:13px 14px;background:var(--paper);min-width:0}.agent-steps>li.agent-step-ready{border-color:var(--orange)}.agent-steps h3{font-size:13px;margin:0 0 4px}.agent-steps h4{font-size:12px;margin:14px 0 6px}.agent-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.agent-dialog textarea{display:block;width:100%;min-height:110px;font:11px/1.5 ui-monospace,Consolas,monospace;border:1px solid var(--line);border-radius:6px;padding:9px;background:var(--surface);color:var(--ink);resize:vertical}.agent-fallback{margin-top:12px}.agent-summary{white-space:pre-line;font-size:11px;line-height:1.6;margin:6px 0;max-height:120px;overflow:auto;background:var(--surface);border-radius:5px;padding:8px}.agent-board-line{font-size:11px;margin:8px 0}.agent-board-line select{display:inline-block;width:auto;max-width:100%;font-size:11px;padding:5px;margin:4px 0 0}.agent-table-wrap{overflow-x:auto}.agent-table{width:100%;border-collapse:collapse;font-size:11px;margin:8px 0}.agent-table th{font-size:10px;color:var(--muted);font-weight:600}.agent-table th,.agent-table td{border-bottom:1px solid var(--line);padding:6px 5px;text-align:left;vertical-align:top;overflow-wrap:anywhere}.agent-table td:first-child{width:36px;font-variant-numeric:tabular-nums}.agent-table small{display:block;color:var(--muted);font-size:10px;margin-top:2px}.agent-table select{font-size:11px;padding:5px;margin-top:5px}.agent-notes{font-size:10px;color:var(--muted);line-height:1.7;margin:8px 0}.agent-notes summary{cursor:pointer}.agent-notes ul{margin:4px 0;padding-left:16px}.agent-error{color:var(--red);font-size:12px;margin:8px 0}.agent-status{font-size:11px;margin:6px 0 0}

/* Dimension shapes preserve the verified footprint; no product controls are inferred. */
.share-dialog textarea{display:block;width:100%;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--paper);color:var(--ink);font:11px/1.6 ui-monospace,Consolas,monospace;resize:vertical;overflow-wrap:anywhere}.share-import-notice:not([hidden]){display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}

/* Searchable native-select enhancements share the original value and change event. */
.catalog-search-help{font-size:9px;line-height:1.7;color:var(--muted);margin:6px 2px 3px}.brand-filter>.searchable-select{flex:1;width:0}.agent-board-line .searchable-select,.agent-table .searchable-select{max-width:100%;width:240px}.agent-table-wrap:has(.searchable-select-popup:not([hidden])){overflow:visible}@media(max-width:720px){.searchable-select-popup{max-width:calc(100vw - 40px)}}

.searchable-select>select[hidden]{display:none!important}



/* The workspace is a movable view onto board-relative millimetres. */
.canvas-wrap{display:block;overflow:hidden;overscroll-behavior:contain;isolation:isolate;height:clamp(460px,58vh,760px)}
#board-canvas{width:100%;height:100%;margin:0;cursor:grab}
.canvas-wrap.is-panning #board-canvas,.canvas-wrap.is-panning #board-canvas [data-pedal]{cursor:grabbing}
.canvas-navigation{position:absolute;top:12px;left:12px;z-index:2;display:flex;gap:2px;padding:3px;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 2px 8px #25343a0a}
.canvas-navigation button{background:transparent;border-radius:5px;padding:7px 10px;font-size:10px;color:var(--muted);white-space:nowrap}
.canvas-navigation button:hover{background:var(--paper);color:var(--ink)}
.canvas-navigation button+button{border-left:1px solid var(--line)}
.canvas-navigation span{font-size:14px;margin-left:3px;vertical-align:-1px}
.canvas-center-view{position:absolute;right:16px;bottom:16px;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:11px 15px;border:1px solid #ffffff88;border-radius:9px;background:var(--ink);color:var(--surface);box-shadow:0 4px 16px #17252b33;font-size:12px;font-weight:650;white-space:nowrap;cursor:pointer}
.canvas-center-view svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.canvas-center-view:hover{background:#34545b}
.canvas-center-view:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
#board-canvas [data-surface]{cursor:grab}.canvas-wrap.is-moving-board #board-canvas [data-surface],.canvas-wrap.is-panning #board-canvas [data-surface]{cursor:grabbing}
@media(max-width:720px){.canvas-center-view{right:12px;bottom:12px;padding:10px 12px;font-size:11px}}
.pedal-tools{position:absolute;z-index:3;display:flex;align-items:center;gap:2px;padding:4px;border:1px solid #d8d2c8;border-radius:9px;background:var(--surface);box-shadow:0 5px 18px #17252b26;transform:translateX(-50%);white-space:nowrap}
.pedal-tools[hidden]{display:none}
.pedal-tools button{display:flex;align-items:center;justify-content:center;gap:4px;min-width:30px;height:30px;padding:0 7px;border-radius:5px;background:transparent;color:var(--ink);font-size:11px;font-weight:650}
.pedal-tools button:hover{background:#f5e9db}
.pedal-tools .pedal-tool-rotate{color:#b44e29;background:#f9eadc}
.pedal-tool-rotate>span{font-size:20px;line-height:1;font-weight:400}
.pedal-tools svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pedal-tools .pedal-tool-delete:hover{background:#fae4df;color:var(--red)}
.pedal-angle{font-size:9px;color:var(--muted);min-width:26px;text-align:center;font-variant-numeric:tabular-nums}
.pedal-tool-divider{height:17px;border-left:1px solid var(--line);margin:0 2px}

.zoom-label>span{min-width:30px;font-variant-numeric:tabular-nums}
.empty-board{inset:70px 20px;z-index:1;color:var(--ink)}
.empty-board p{color:var(--muted)}
/* Board canvas colours come from the design system's --yds-canvas-* tokens; data-canvas on #canvas-wrap picks a fixed grid. */
#board-canvas .surface-frame{fill:var(--yds-canvas-board-edge)}#board-canvas [data-surface][aria-pressed="true"]>.surface-frame{fill:var(--yds-canvas-selection)}
.surface-body{fill:var(--yds-canvas-board)}#board-canvas .surface-slat{fill:#fff;fill-opacity:.07}#board-canvas .surface-groove{stroke:#000;stroke-opacity:.4}
#board-canvas .canvas-label{fill:var(--yds-canvas-label)}
#board-canvas .plug-space{fill:var(--yds-canvas-plug);stroke:var(--yds-canvas-plug)}#board-canvas .plug-space[data-status="collision"]{fill:var(--yds-canvas-collision);stroke:var(--yds-canvas-collision)}
#board-canvas .pedal-outline{stroke:var(--yds-canvas-plug)}#board-canvas .pedal-outline[data-status="collision"]{stroke:var(--yds-canvas-collision)}#board-canvas .pedal-outline[data-status="clear"]{stroke:var(--yds-canvas-clear)}#board-canvas [data-pedal][aria-pressed="true"]>.pedal-outline{stroke:var(--yds-canvas-selection)}
#board-canvas .cable-link{color:var(--yds-canvas-cable)}#board-canvas .cable-link.short{color:var(--yds-canvas-collision)}#board-canvas .cable-label{fill:#fff;stroke:var(--yds-canvas-board)}
.saved-board-preview .preview-pedal{stroke:var(--yds-panel)}
.empty-board{color:var(--yds-fg)}.empty-board p{color:var(--yds-muted)}
@media(min-width:1600px){.canvas-wrap{height:clamp(540px,62vh,820px)}}
@media(max-width:720px){.canvas-wrap{height:440px}}
/* Cable tab: brandless patch-cable specs instead of catalog products. */
.catalog-panel.cable-mode :is(.search-field,.catalog-search-help,.brand-filter,.catalog-meta,.catalog-list,.catalog-pagination,.catalog-footer){display:none}
.cable-builder{flex:1;min-height:0;overflow-y:auto;padding:2px}.cable-builder[hidden]{display:none}
@media(max-width:720px){.cable-builder{flex:none;max-height:none;overflow:visible}}
/* Cable connections: two jacks joined by one cable spec, with an estimated length check. */
.fit-summary .fit-cables{margin-top:4px;color:var(--green)}.fit-summary .fit-cables.short{color:var(--red);font-weight:650}.fit-cables[hidden]{display:none}

/* ---------- B stage (design system 0.2.0) ----------
   The canvas fills the window; the bars, check summary, catalog, inspector and dock float over it.
   Rules here start with .yds-root so they win over the older layout rules above. The older colour
   names are mapped onto design-system tokens, so the remaining parts follow the theme too. */
.yds-root{--paper:var(--yds-surface);--surface:var(--yds-panel);--line:var(--yds-border);--ink:var(--yds-fg);--muted:var(--yds-muted);--orange:var(--yds-primary);--amber:var(--yds-warning);--red:var(--yds-danger);--green:var(--yds-success)}
html:has(body.yds-root){height:100%}
body.yds-root{height:100%;overflow:hidden;background:var(--yds-canvas-bg)}
.yds-root :is(button,a,input,select,textarea,summary):focus-visible{outline:var(--yds-focus-width) solid var(--yds-focus);outline-offset:var(--yds-focus-offset)}

.ys-i{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ys-float{position:absolute;z-index:4;border:1px solid var(--yds-border);border-radius:var(--yds-radius-lg);background:color-mix(in srgb,var(--yds-panel) 92%,transparent);box-shadow:var(--yds-shadow-md);backdrop-filter:blur(10px)}
.ys-vsep{width:1px;height:22px;margin:0 2px;background:var(--yds-border);flex:none}
.ys-h3{margin:0;font-size:var(--yds-text-md);font-weight:var(--yds-weight-semibold);line-height:var(--yds-leading-tight)}
.ys-count{display:inline-grid;place-items:center;min-width:20px;height:18px;padding:0 6px;border-radius:var(--yds-radius-full);background:var(--yds-surface-hover);color:var(--yds-fg);font-size:var(--yds-text-xs);font-weight:var(--yds-weight-medium);font-variant-numeric:tabular-nums;line-height:1}

/* Top bars */
.ys-top{position:fixed;z-index:5;top:12px;left:12px;right:12px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;pointer-events:none}
.ys-top>.ys-float{position:static;pointer-events:auto}
.ys-bar{display:flex;align-items:center;gap:4px;min-width:0;padding:5px}
.ys-board-bar{flex:0 1 auto}
.ys-action-bar{flex:none}
.ys-brand{display:inline-flex;align-items:center;padding:0 4px 0 6px;text-decoration:none}
.ys-mark{display:grid;place-items:center;width:25px;height:28px;border:2px solid var(--yds-primary);border-radius:5px;color:var(--yds-primary);font-size:16px;font-weight:800;line-height:1;transform:rotate(-6deg)}
.yds-root .ys-board-name{width:clamp(110px,15vw,220px);min-width:0;min-height:var(--yds-control-height);padding:4px 8px;border:1px solid transparent;border-radius:var(--yds-radius-control);background:transparent;color:var(--yds-fg);font-size:var(--yds-text-md);font-weight:var(--yds-weight-semibold);text-overflow:ellipsis}
.yds-root .ys-board-name:hover{border-color:var(--yds-border)}
.yds-root .ys-board-name:focus{border-color:var(--yds-border-strong);background:var(--yds-panel)}
.yds-root .save-status{display:inline-flex;align-items:center;gap:5px;max-width:150px;padding:2px 8px;border:1px solid var(--yds-success-border);border-radius:var(--yds-radius-sm);background:var(--yds-success-soft);color:var(--yds-success);font-size:var(--yds-text-xs);font-weight:var(--yds-weight-medium);line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.yds-root .save-status::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.yds-root .save-status.error{border-color:var(--yds-danger-border);background:var(--yds-danger-soft);color:var(--yds-danger)}
.yds-root .yds-btn[data-variant="primary"] .ys-count{background:color-mix(in srgb,var(--yds-on-primary) 24%,transparent);color:var(--yds-on-primary)}

/* Menus and floating details */
.yds-root .ys-more-menu{position:fixed;inset:60px 12px auto auto;width:250px}
.ys-more-meta{margin:4px 0 0;padding:8px 10px 6px;border-top:1px solid var(--yds-border);font-size:var(--yds-text-xs);line-height:1.6;color:var(--yds-muted)}
.ys-more-meta .local-dot{display:inline-block;margin-right:5px;vertical-align:1px}
.yds-root .ys-popover{position:fixed;margin:0;max-height:calc(100dvh - 140px);overflow-y:auto;padding:14px 16px;border:1px solid var(--yds-border);border-radius:var(--yds-radius-panel);background:var(--yds-panel);color:var(--yds-fg);box-shadow:var(--yds-shadow-md)}
.yds-root #shopping-panel{inset:60px 12px auto auto;width:min(340px,calc(100vw - 24px))}
.yds-root #fit-details{inset:104px auto auto 50%;width:min(420px,calc(100vw - 24px));transform:translateX(-50%)}
.yds-root .fit-summary{display:block;border-top:1px solid var(--yds-border)}
.yds-root .fit-summary h2{margin:6px 0;font-size:var(--yds-text-lg)}
.yds-root .fit-summary p{font-size:var(--yds-text-sm);line-height:var(--yds-leading-normal)}
.ys-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin:12px 0 0;padding:0;list-style:none;font-size:var(--yds-text-xs);color:var(--yds-muted)}
.ys-legend li{display:inline-flex;align-items:center;gap:6px}
.ys-legend i{width:11px;height:11px;border:1.5px dashed var(--yds-canvas-plug);border-radius:2px;background:color-mix(in srgb,var(--yds-canvas-plug) 28%,transparent)}
.ys-legend i[data-k="collide"]{border-color:var(--yds-canvas-collision);background:color-mix(in srgb,var(--yds-canvas-collision) 30%,transparent)}
.ys-legend i[data-k="clear"]{border-color:var(--yds-canvas-clear);background:color-mix(in srgb,var(--yds-canvas-clear) 22%,transparent)}
.ys-legend i[data-k="cable"]{width:14px;height:0;border:0;border-top:2px solid var(--yds-canvas-cable);border-radius:0;background:none}
.yds-root .ys-fit-meta{margin:10px 0 0;font-size:var(--yds-text-xs);color:var(--yds-muted)}
.yds-root .image-menu{border-color:var(--yds-border);background:var(--yds-panel);color:var(--yds-fg);box-shadow:var(--yds-shadow-md)}
.yds-root .ys-notice{position:fixed;z-index:6;top:104px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;width:max-content;max-width:min(560px,calc(100vw - 24px));padding:8px 12px;border:1px solid var(--yds-warning-border);border-radius:var(--yds-radius-panel);background:var(--yds-warning-soft);color:var(--yds-warning);font-size:var(--yds-text-sm);box-shadow:var(--yds-shadow-md)}
.yds-root .ys-notice.share-import-notice{top:148px}
.yds-root .toast{z-index:var(--yds-z-toast);bottom:76px;background:var(--yds-fg);color:var(--yds-bg)}

/* Canvas stage */
.yds-root .workspace{position:fixed;inset:0;display:block;height:auto;min-height:0}
.yds-root .editor-panel{position:absolute;inset:0;min-width:0;padding:0;overflow:hidden}
/* Registered so the computed --ys-safe-* values are lengths that main.js can read (calc and dvh included). */
@property --ys-safe-top{syntax:"<length>";inherits:true;initial-value:0px}
@property --ys-safe-right{syntax:"<length>";inherits:true;initial-value:0px}
@property --ys-safe-bottom{syntax:"<length>";inherits:true;initial-value:0px}
@property --ys-safe-left{syntax:"<length>";inherits:true;initial-value:0px}
.yds-root .canvas-wrap{--ys-safe-top:104px;--ys-safe-bottom:68px;--ys-safe-left:348px;--ys-safe-right:348px;position:absolute;inset:0;display:block;height:auto;overflow:hidden;border:0;border-radius:0}
.yds-root .workspace:has(.catalog-panel.is-collapsed) .canvas-wrap{--ys-safe-left:24px}
.yds-root .empty-board{inset:0;z-index:1;padding:var(--ys-safe-top) var(--ys-safe-right) var(--ys-safe-bottom) var(--ys-safe-left);color:var(--yds-fg)}
.ys-empty-card{display:grid;justify-items:center;gap:6px;max-width:340px;padding:22px 24px;border:1px solid var(--yds-border);border-radius:var(--yds-radius-lg);background:color-mix(in srgb,var(--yds-panel) 92%,transparent);box-shadow:var(--yds-shadow-md);text-align:center}
.yds-root .ys-empty-card h2{margin:0;font-size:var(--yds-text-lg)}
.yds-root .ys-empty-card p{margin:0 0 8px;font-size:var(--yds-text-sm);color:var(--yds-muted)}
.yds-root .ys-empty-card .empty-icon{font-size:28px;line-height:1;color:var(--yds-primary);opacity:1}
.yds-root .pedal-tools{gap:2px;padding:3px;border:1px solid var(--yds-border);border-radius:var(--yds-radius-panel);background:var(--yds-panel);box-shadow:var(--yds-shadow-md)}
.yds-root .pedal-tools button{height:var(--yds-control-height-sm);min-width:var(--yds-control-height-sm);border-radius:var(--yds-radius-control);color:var(--yds-fg);font-size:var(--yds-text-sm);font-weight:var(--yds-weight-medium)}
.yds-root .pedal-tools button:hover{background:var(--yds-surface)}
.yds-root .pedal-tools .pedal-tool-rotate{background:var(--yds-primary-soft);color:var(--yds-primary)}
.yds-root .pedal-tools .pedal-tool-delete:hover{background:var(--yds-danger-soft);color:var(--yds-danger)}
.yds-root .pedal-angle{font-size:var(--yds-text-xs);color:var(--yds-muted)}
.yds-root .pedal-tool-divider{border-left-color:var(--yds-border)}

/* Check summary and dock */
.yds-root .ys-checks{top:60px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:4px 5px 4px 12px;border-radius:var(--yds-radius-full);font-size:var(--yds-text-sm);white-space:nowrap}
.ys-check{display:inline-flex;align-items:center;gap:6px;color:var(--yds-muted)}
.ys-check strong{color:var(--yds-fg);font-weight:var(--yds-weight-medium);font-variant-numeric:tabular-nums}
.ys-check i{width:8px;height:8px;border-radius:50%;background:var(--yds-canvas-plug)}
.ys-check[data-kind="collision"] i{background:var(--yds-canvas-collision)}
.ys-check[data-kind="cable"] i{background:var(--yds-canvas-cable)}
.yds-root .ys-dock{bottom:14px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:5px;white-space:nowrap}
.yds-root .ys-dock>*{flex:none}
.yds-root .ys-dock .canvas-navigation{position:static;z-index:auto;flex-wrap:nowrap;box-shadow:none}
.yds-root .ys-dock .canvas-center-view{position:static;padding:6px;box-shadow:none}
.yds-root .zoom-label{display:flex;align-items:center;gap:6px;font-size:var(--yds-text-sm)}
.yds-root .zoom-label input{width:84px;padding:0;border:0;background:transparent;accent-color:var(--yds-primary)}
.yds-root .zoom-label>span{min-width:40px;text-align:center;color:var(--yds-muted);font-variant-numeric:tabular-nums}
.yds-root .ys-dock .patch-toggle{padding:0 6px;gap:var(--yds-space-2)}
.yds-root .ys-dock .yds-select{width:auto}

/* Catalog */
.yds-root .catalog-panel{top:60px;bottom:12px;left:12px;display:flex;flex-direction:column;width:320px;min-height:0;padding:0;overflow:hidden;border:1px solid var(--yds-border)}
.ys-cat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 8px 14px}
.ys-cat-body{display:flex;flex:1;flex-direction:column;gap:8px;min-height:0;padding:0 10px 10px}
.yds-root .catalog-panel.is-collapsed{bottom:auto;width:auto}
.yds-root .catalog-panel.is-collapsed .ys-cat-body{display:none}
.catalog-panel.is-collapsed #catalog-toggle svg{transform:scaleX(-1)}
.yds-root .search-field{background:var(--yds-panel)}
.yds-root .catalog-search-help{margin:-2px 2px 0;font-size:var(--yds-text-xs);line-height:1.5;color:var(--yds-muted)}
/* The tips show while the search box is empty, whatever has focus. Hiding them on blur moved the list up under a row being pressed, so that click missed. */
.yds-root .search-field:has(>input:not(:placeholder-shown))+.catalog-search-help{display:none}
.yds-root .catalog-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:var(--yds-text-sm);color:var(--yds-muted)}
.yds-root .catalog-meta>span{flex:none;font-variant-numeric:tabular-nums}
.yds-root .brand-filter{flex:0 1 170px;min-width:0;margin:0}
.yds-root .brand-filter>.searchable-select{flex:1;width:100%}
.yds-root .catalog-list{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:max-content;gap:2px;flex:1;align-content:start;min-height:0;max-height:none;margin:0 -4px;padding:0 4px;overflow-y:auto;scrollbar-width:thin}
.yds-root .catalog-pagination{max-width:none;margin:0;padding-top:6px;border-top:1px solid var(--yds-border);font-size:var(--yds-text-xs);color:var(--yds-muted)}
.yds-root .catalog-footer{display:flex;align-items:baseline;gap:8px;margin:0;padding:0 2px;border:0;font-size:var(--yds-text-xs);line-height:1.5;color:var(--yds-muted)}

/* Inspector */
.yds-root .inspector-panel{top:60px;right:12px;display:block;width:320px;max-height:calc(100% - 74px);padding:12px 16px 16px;overflow-y:auto;border:1px solid var(--yds-border);scrollbar-width:thin}
/* The selection's title row sticks to the top on an opaque band with the close button on it, so scrolled content passes under both.
   Sticky tops count from inside the panel's padding, hence the negative values. The scroll margin keeps a focused control below a two-line
   title; as scroll padding on the panel it would also scroll the panel whenever the sticky close button took focus. */
.ys-inspector-close{position:sticky;top:-4px;z-index:2;float:right;margin:-4px -8px 0 8px}
.inspector-panel :is(#inspector,.surface-composition)>header{position:sticky;top:-12px;z-index:1;margin:-12px -16px -8px;padding:12px 16px 8px;background:var(--yds-panel)}
.inspector-panel :is(#inspector,.surface-composition) :is(a,button,input,select,summary):not(header *){scroll-margin-top:88px}

@media (max-width:1280px){
  .yds-root .catalog-panel,.yds-root .inspector-panel{width:288px}
  .yds-root .canvas-wrap{--ys-safe-left:316px;--ys-safe-right:24px}
  .yds-root .catalog-panel{bottom:68px}
  .yds-root .inspector-panel{max-height:calc(100% - 136px)}
}
@media (max-width:1100px){
  .ys-label-wide{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

/* ---------- B stage · app parts in design-system markup ----------
   main.js and index.html draw the catalog, inspector, purchase list, saved boards and dialogs with
   design-system parts (.yds-*). The rules here only lay them out where the design system leaves that
   to the app: thumbnails, columns, spacing and a few states. */
.ys-alert-body{display:grid;gap:4px;min-width:0}
.yds-alert ul{margin:0;padding-left:16px}
.fine-print{margin:10px 0;color:var(--yds-muted);font-size:var(--yds-text-xs);line-height:1.6}
.eyebrow{color:var(--yds-muted);font-size:var(--yds-text-xs);font-weight:var(--yds-weight-semibold);letter-spacing:.8px}

/* Catalog: the type filter is a segmented control and each model a list row. */
.yds-root .catalog-types{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.yds-root .catalog-types>button{padding-left:6px;padding-right:6px}
.catalog-art{position:relative;display:grid;flex:none;place-items:center;width:40px;height:44px;border-radius:var(--yds-radius-control);background:var(--yds-surface)}
.catalog-art>:is(img,svg){max-width:32px;max-height:38px;object-fit:contain}
.catalog-art>.yds-spinner{position:absolute;inset:0;margin:auto}
.catalog-copy{display:grid;flex:1;justify-items:start;min-width:0;word-break:keep-all;overflow-wrap:anywhere}
.catalog-copy>.yds-badge{margin-top:4px}
.catalog-dims{flex:none;align-self:start;color:var(--yds-muted);font-size:var(--yds-text-xs);line-height:1.4;text-align:right}

/* Cable builder: each radio group in a segmented control, the chosen specs as list rows. */
.cable-fields,.cable-choice{min-width:0;margin:0;padding:0;border:0}
.cable-fields>*+*{margin-top:12px}
.cable-intro{display:grid;gap:4px}
.cable-choice>legend{margin-bottom:6px;padding:0}
.yds-root .ys-choice{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.yds-root .ys-choice:not(:has(>label:nth-child(3))){grid-template-columns:repeat(2,minmax(0,1fr))}
.ys-choice+.ys-choice{margin-top:6px}
.yds-root .ys-choice>label{position:relative;flex-wrap:wrap;gap:0 4px;line-height:1.3;text-align:center}
.yds-root .ys-choice>label:hover{border-color:transparent;background:var(--yds-surface-hover);color:var(--yds-fg)}
.yds-root .ys-choice>label:has(>input:checked){border-color:var(--yds-border);background:var(--yds-panel);color:var(--yds-fg);box-shadow:var(--yds-shadow-sm)}
.yds-root .ys-choice>label:has(>input:focus-visible){outline:var(--yds-focus-width) solid var(--yds-focus);outline-offset:var(--yds-focus-offset)}
.ys-choice small{font-size:var(--yds-text-xs);font-weight:var(--yds-weight-regular)}
.cable-fields:disabled .ys-choice>label{opacity:.55;cursor:not-allowed}
.cable-submit{display:flex;align-items:flex-end;gap:8px}
.cable-submit>.yds-field{flex:none;width:92px}
.cable-submit>.yds-btn{flex:1}
.cable-preview strong{color:var(--yds-fg)}
.cable-spec-list{display:grid;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--yds-border)}
.yds-root .cable-spec-items{padding:0}
.cable-spec-copy{flex:1;min-width:0}
.ys-stepper-value{display:grid;place-items:center;min-width:28px;font-size:var(--yds-text-sm)}

/* Searchable selects (src/searchable-select.js): the search box looks like .yds-input and the list like
   the design system's combobox list. The native select underneath still holds the value. */
.searchable-select{position:relative;display:inline-block;min-width:0;vertical-align:middle}
.yds-root .searchable-select-input{display:block;width:100%;min-width:0;min-height:var(--yds-control-height);padding:5px 28px 5px 10px;border:1px solid var(--yds-border-strong);border-radius:var(--yds-radius-control);background:var(--yds-panel);color:var(--yds-fg);font-size:var(--yds-text-sm);line-height:1.5;text-overflow:ellipsis}
.yds-root .searchable-select-input:hover:not(:disabled){border-color:var(--yds-muted)}
.yds-root .searchable-select-input::placeholder{color:var(--yds-muted);opacity:1}
.searchable-select-toggle{position:absolute;top:1px;right:1px;bottom:1px;width:26px;padding:0;border-radius:0 var(--yds-radius-control) var(--yds-radius-control) 0;background:transparent;color:var(--yds-muted);font-size:var(--yds-text-sm)}
.searchable-select-popup{position:absolute;z-index:var(--yds-z-popover);top:calc(100% + 6px);left:0;min-width:100%;width:max-content;max-width:min(360px,calc(100vw - 40px));padding:var(--yds-space-1);border:1px solid var(--yds-border);border-radius:var(--yds-radius-control);background:var(--yds-panel);color:var(--yds-fg);box-shadow:var(--yds-shadow-md);white-space:normal}
.searchable-select-count{display:block;padding:4px 8px 6px;border-bottom:1px solid var(--yds-border);margin-bottom:4px;color:var(--yds-muted);font-size:var(--yds-text-xs)}
.searchable-select-list{display:block;max-height:250px;overflow-y:auto;overscroll-behavior:contain}
.searchable-select-option{display:block;min-height:var(--yds-control-height-sm);padding:5px 9px;border:1px solid transparent;border-radius:var(--yds-radius-sm);font-size:var(--yds-text-sm);line-height:1.5;cursor:pointer;overflow-wrap:anywhere}
.searchable-select-option[aria-selected=true]{background:var(--yds-primary-soft);color:var(--yds-primary)}
.searchable-select-option.is-active{border-color:var(--yds-border-strong);background:var(--yds-surface);color:var(--yds-fg)}
.searchable-select-option[aria-disabled=true]{opacity:.55;cursor:not-allowed}

/* Inspector and board settings: sections stack in the floating panel; ownership takes its state's tone. */
.ys-h4{margin:0;font-size:var(--yds-text-sm);font-weight:var(--yds-weight-semibold);color:var(--yds-muted)}
.ys-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
.ys-field-grid>.ys-span-2{grid-column:1/-1}
#inspector>*+*,.surface-composition>*+*{margin-top:12px}
#inspector>.ys-section{margin-top:20px}
.ys-section{display:grid;gap:10px;padding-top:16px;border-top:1px solid var(--yds-border)}
.ys-section>.ys-h4{margin-top:4px}
:is(.ys-section,.selected-purchase-section,.selected-product-links,.surface-detail-body)>.yds-btn:not(.purchase-link){justify-self:start}
.selected-purchase-section{display:grid;gap:8px;padding:12px;border:1px solid var(--yds-success-border);border-top:3px solid var(--yds-success);border-radius:var(--yds-radius-panel);background:var(--yds-success-soft)}
.selected-purchase-section[data-ownership=planned]{border-color:var(--yds-warning-border);border-top-color:var(--yds-warning);background:var(--yds-warning-soft)}
.yds-root .ownership-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.selected-product-links{display:grid;gap:6px;margin-top:4px;padding-top:10px;border-top:1px solid var(--yds-border)}
.yds-root .purchase-link{justify-content:flex-start;width:100%;white-space:normal;text-align:left;overflow-wrap:anywhere}
.ys-inspector-figure{display:grid;justify-items:center;gap:6px}
.ys-inspector-figure>:is(img,svg){display:block;max-width:100%;max-height:120px;object-fit:contain}
.ys-inspector-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.port-block{display:grid;gap:10px;padding:10px;border:1px solid var(--yds-border);border-radius:var(--yds-radius-control);background:var(--yds-surface)}
.port-block.connected{border-color:var(--yds-info-border);background:var(--yds-info-soft)}
.port-connection{display:grid;gap:6px;padding-top:10px;border-top:1px dashed var(--yds-border-strong)}
.connection-line,.connection-estimate{font-size:var(--yds-text-sm);line-height:1.5}
.connection-line span{display:block;font-weight:var(--yds-weight-medium);overflow-wrap:anywhere}
.connection-line small{display:block}
.connection-line small,.connection-estimate small{color:var(--yds-muted);font-size:var(--yds-text-xs)}
.connection-estimate{color:var(--yds-success)}
.port-connection.short .connection-estimate{color:var(--yds-danger);font-weight:var(--yds-weight-medium)}
.connection-controls{display:flex;align-items:flex-end;gap:8px}
.connection-controls>.yds-field{flex:1}
.surface-detail-body{display:grid;gap:10px}

/* Purchase list: one card per planned model or cable spec, then the cable check as an alert. */
.shopping-panel>*+*{margin-top:10px}
.shopping-list{display:grid;gap:8px}
.shopping-item{display:grid;gap:6px;padding:12px}
.shopping-item>strong{font-size:var(--yds-text-sm);font-weight:var(--yds-weight-semibold)}
.shopping-item>small{color:var(--yds-muted);font-size:var(--yds-text-xs)}
:is(.shopping-list,.ys-alert-body)>.yds-btn{justify-self:start}

/* Saved boards: a popover of list rows, each with its rename and delete actions under it. */
.yds-root .saved-boards-menu{position:absolute;inset:auto;width:min(380px,calc(100vw - 24px));max-height:calc(100dvh - 110px);overflow:auto;padding:16px}
.saved-boards-menu>*+*{margin-top:12px}
.saved-board-list{display:grid;gap:6px;max-height:390px;overflow-y:auto;padding:2px}
.saved-board-row{display:grid;gap:2px;padding-bottom:6px;border-bottom:1px solid var(--yds-border)}
.saved-board-row:last-child{padding-bottom:0;border-bottom:0}
.saved-board-preview{flex:none;width:66px;height:48px;overflow:hidden;border-radius:var(--yds-radius-sm)}
.saved-board-copy{display:grid;flex:1;min-width:0}
.saved-board-copy>*{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.saved-board>.ys-i{color:var(--yds-muted)}
.saved-board-actions{display:flex;justify-content:flex-end;gap:4px}
.yds-root .saved-board-delete{color:var(--yds-danger)}
.saved-board-rename{display:grid;gap:6px;padding:8px}
.saved-boards-note{display:flex;align-items:center;gap:7px}
.saved-boards-note>.local-dot{flex:none}

/* Dialogs are .yds-dialog parts (comfortable density on their own theme root, see index.html).
   The rules set the wider dialogs, the owned-pedal cards and the agent preview's leftovers. */
.yds-dialog .eyebrow{display:block;margin-bottom:4px;color:var(--yds-primary)}
.yds-dialog-header .yds-hint{margin-top:4px}
.yds-root .owned-pedals-dialog{width:min(980px,calc(100vw - 32px))}
.yds-root .share-dialog{width:min(560px,calc(100vw - 32px))}
.yds-root .agent-dialog{width:min(780px,calc(100vw - 32px))}
.ys-color{width:64px;height:var(--yds-control-height);padding:3px;border:1px solid var(--yds-border-strong);border-radius:var(--yds-radius-control);background:var(--yds-panel)}
.owned-pedals-body{display:grid;gap:14px}
.owned-pedals-filters{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px 16px}
.owned-pedals-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.owned-pedal-card{display:flex;flex-direction:column;overflow:hidden}
.owned-pedal-art{position:relative;display:flex;align-items:center;justify-content:center;height:172px;padding:22px;background:var(--yds-surface)}
.owned-pedal-art>:is(img,svg){max-width:90%;max-height:132px;object-fit:contain}
.owned-pedal-art>.yds-badge{position:absolute;top:10px;right:10px}
.owned-pedal-copy{display:grid;gap:4px;padding:16px}
.owned-pedal-copy>h3{overflow-wrap:anywhere}
.owned-board-label{margin-top:8px;padding-top:10px;border-top:1px solid var(--yds-border)}
.owned-board-links{display:flex;flex-wrap:wrap;gap:6px}
.owned-board-links>.yds-btn{max-width:100%;white-space:normal;text-align:left;overflow-wrap:anywhere}
.owned-pedals-empty{grid-column:1/-1;border:1px dashed var(--yds-border-strong);border-radius:var(--yds-radius-panel);background:var(--yds-surface)}
.agent-file-button:has(input:disabled){opacity:.55;cursor:not-allowed}
.agent-preview .agent-actions{justify-content:flex-end}
.agent-mini{display:block;width:100%;max-height:240px;margin:10px 0;border-radius:6px;background:var(--yds-canvas-bg)}

/* Selected equipment chip: phones only (the inspector opens from it) */
.ys-selection-chip{display:none}
.ys-selection-name{display:grid;flex:1;min-width:0}
.ys-selection-name strong{overflow:hidden;font-size:var(--yds-text-sm);font-weight:var(--yds-weight-medium);text-overflow:ellipsis;white-space:nowrap}
.ys-selection-name small{color:var(--yds-muted);font-size:var(--yds-text-xs)}

/* Phones: full canvas, two top bars, check summary, selected chip, and the catalog as a bottom sheet */
@media (max-width:720px){
  .ys-top{top:8px;left:8px;right:8px;flex-direction:column;align-items:stretch;gap:6px}
  .ys-board-bar{width:100%}
  .yds-root .ys-board-name{flex:1;width:auto}
  .ys-action-bar{align-self:flex-end}
  .yds-root .save-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;border:0}
  .ys-label-wide,.saved-boards-label{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .yds-root .ys-checks{top:var(--ys-checks-top,132px);gap:8px;padding-left:10px;font-size:var(--yds-text-xs)}
  .yds-root .ys-more-menu,.yds-root #shopping-panel{inset:var(--ys-checks-top,132px) 8px auto auto}
  .yds-root #fit-details{top:calc(var(--ys-checks-top,132px) + 56px)}
  .yds-root .ys-notice{top:calc(var(--ys-checks-top,132px) + 56px)}
  .yds-root .catalog-panel{--ys-sheet:min(36dvh,320px);top:auto;right:0;bottom:0;left:0;width:auto;height:var(--ys-sheet);border-bottom:0;border-radius:16px 16px 0 0;box-shadow:var(--yds-shadow-lg)}
  .yds-root .catalog-panel.is-collapsed{height:auto;width:auto}
  .catalog-panel #catalog-toggle svg{transform:rotate(-90deg)}
  .catalog-panel.is-collapsed #catalog-toggle svg{transform:rotate(90deg)}
  .yds-root .ys-dock{right:8px;bottom:calc(min(36dvh,320px) + 8px);left:8px;max-width:max-content;margin:0 auto;overflow-x:auto;transform:none;scrollbar-width:none}
  .yds-root .workspace:has(.catalog-panel.is-collapsed) .ys-dock{bottom:72px}
  .yds-root .zoom-label input{display:none}
  .ys-selection-chip:not([hidden]){display:flex;align-items:center;gap:8px;right:8px;bottom:calc(min(36dvh,320px) + 72px);left:8px;padding:6px 6px 6px 12px}
  .yds-root .workspace:has(.catalog-panel.is-collapsed) .ys-selection-chip{bottom:136px}
  .yds-root .canvas-wrap{--ys-safe-top:194px;--ys-safe-right:12px;--ys-safe-bottom:calc(min(36dvh,320px) + 80px);--ys-safe-left:12px}
  .yds-root .workspace:has(.catalog-panel.is-collapsed) .canvas-wrap{--ys-safe-left:12px;--ys-safe-bottom:190px}
  .yds-root .inspector-panel{z-index:7;top:auto;right:0;bottom:0;left:0;width:auto;max-height:72dvh;border-bottom:0;border-radius:16px 16px 0 0;box-shadow:var(--yds-shadow-lg)}
  .yds-root .inspector-panel:not(.is-open){display:none}
  .yds-root .ys-cat-body{overflow-y:auto;overscroll-behavior:contain}
  .yds-root .ys-cat-body>*{flex-shrink:0}
  .yds-root .catalog-list{flex:none;overflow:visible}
  .yds-root .catalog-types{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .yds-root .catalog-types>button{flex:none}
  .yds-root .catalog-footer>span{display:none}
  .yds-root .saved-boards-menu{max-height:calc(100dvh - 150px)}
  .saved-board-preview{width:54px}
  .yds-root .yds-dialog{max-height:calc(100dvh - 16px)}
  .yds-root :is(.owned-pedals-dialog,.share-dialog,.agent-dialog){width:calc(100vw - 16px)}
  .owned-pedals-filters{grid-template-columns:1fr}
  .owned-pedals-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .owned-pedal-art{height:145px;padding:20px 12px}
  .owned-pedal-art>:is(img,svg){max-height:115px}
  .owned-pedal-copy{padding:12px}
}
@media (max-width:400px){
  .owned-pedals-list{grid-template-columns:1fr}
}
/* Touch: the design system's 44px rule also covers the app's own buttons and fields. */
@media (pointer:coarse){
  .yds-root :is(.pedal-tools button,.ys-board-name){min-height:44px}
  .yds-root .pedal-tools button{min-width:44px}
  .yds-root .searchable-select-input{min-height:44px;font-size:16px}
}

/* Dock view settings: shown in the dock on wider screens, a popover from the dock on phones. */
.yds-root .ys-view-settings-button{display:none}
.yds-root .ys-view-settings{position:static;inset:auto;display:flex;align-items:center;gap:4px;width:auto;height:auto;margin:0;padding:0;overflow:visible;border:0;background:none;color:inherit}
/* Tablets: the check summary and its details sit right of the catalog, and the inspector starts below them. */
@media (min-width:721px) and (max-width:1100px){
  .yds-root .ys-checks,.yds-root #fit-details{left:calc(50% + 156px)}
  .yds-root .inspector-panel{top:108px;max-height:calc(100% - 184px)}
}
@media (min-width:721px) and (max-width:1280px){
  .yds-root .workspace:has(.inspector-panel:not([hidden])) .canvas-wrap{--ys-safe-right:312px}
}
@media (max-width:720px){
  .yds-root .ys-view-settings-button{display:inline-flex}
  .yds-root .ys-view-settings:not(:popover-open){display:none}
  .yds-root .ys-view-settings:popover-open{position:fixed;inset:auto 8px calc(min(36dvh,320px) + 80px) auto;flex-direction:column;align-items:stretch;gap:8px;width:min(280px,calc(100vw - 16px));padding:12px;border:1px solid var(--yds-border);border-radius:var(--yds-radius-panel);background:var(--yds-panel);box-shadow:var(--yds-shadow-md)}
  .yds-root .workspace:has(.catalog-panel.is-collapsed) .ys-view-settings:popover-open{bottom:136px}
}