/* Panel Shop Generator as a workspace (shop-generator.html): the panels (left, collapsible), the views of the panel
   (middle: one view at a time, the cut list and issues under it), its properties (right). Desktop: the three columns
   scroll on their own under a fixed command bar, so the commands stay in reach. Narrower: the properties go under the
   views; narrow (phones, large zoom): one column, the page scrolls, the command bar stays on top. */
.ws-body { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.label-maker-dialog { width:calc(100vw - 40px);max-width:1560px;height:calc(100vh - 40px);max-height:none;padding:0;border:1px solid #b7c2d0;border-radius:10px; }
.label-maker-dialog::backdrop { background:#11223888; }
.label-maker-dialog>header { height:48px;box-sizing:border-box;padding:8px 14px;display:flex;align-items:center;justify-content:space-between;background:#eef2f7; }
.label-maker-dialog>iframe { width:100%;height:calc(100% - 48px);border:0;display:block; }
.ws-bar { position: sticky; top: 0; z-index: 20; flex: 0 0 auto; flex-wrap: wrap; gap: 6px 10px; padding: 7px 12px; align-items: center; }
.ws-bar .gen-title { font-size: 14px; }
.ws-bar .bar-btn { font-size: 13px; padding: 5px 9px; }
.ws-bar .bar-btn:disabled { opacity: .45; cursor: default; }
.ws-history, .ws-file { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.dirty { font-size: 11.5px; opacity: .9; margin-left: 4px; white-space: nowrap; max-width: 155px; overflow: hidden; text-overflow: ellipsis; }
.dirty.on::before { content: '●'; color: #ffcf6e; margin-right: 4px; }
#gen.ws { --nav-w: 216px; --insp-w: 320px; flex: 1 1 auto; min-height: 0; max-width: none; width: 100%; margin: 0; padding: 0; gap: 0;
    display: grid; grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--insp-w); }
#gen.ws.nav-collapsed { --nav-w: 40px; }
#gen.ws.inspector-collapsed { --insp-w: 0px; }
main.ws.inspector-collapsed .ws-insp { display: none; }
main.ws.focus-view { grid-template-columns: minmax(0, 1fr) !important; }
main.ws.focus-view .ws-nav, main.ws.focus-view .ws-insp, main.ws.focus-view .ws-bottom { display: none; }
.ws-nav, .ws-center, .ws-insp { min-height: 0; min-width: 0; overflow: auto; }
.ws-nav { background: #eef1f4; border-right: 1px solid var(--line); }
.ws-insp { background: #fafbfc; border-left: 1px solid var(--line); padding: 8px 10px 40px; }
.ws-center { display: flex; flex-direction: column; background: var(--bg); overflow: hidden; }
.header-more { position: relative; }
.header-more > summary { list-style: none; cursor: pointer; border: 1px solid #ffffff80; border-radius: 6px; padding: 5px 9px; font-size: 13px; font-weight: 600; }
.header-more > summary::-webkit-details-marker { display: none; }
.header-menu { display: grid; position: absolute; top: calc(100% + 7px); right: 0; width: 245px; max-width: calc(100vw - 24px); padding: 5px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 18px #18304726; }
.header-more:not([open]) .header-menu { display: none; }
.header-menu button { border: 0; background: #fff; color: var(--ink); text-align: left; font-size: 13px; padding: 8px; }
.header-menu button:hover { background: #edf3f8; }

/* Navigator */
.nav-head { position: sticky; top: 0; z-index: 2; background: #eef1f4; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.nav-toggle { width: 100%; text-align: left; background: #fff; color: var(--accent); border-color: var(--line); }
main.ws.nav-collapsed .nav-body { display: none; }
main.ws.nav-collapsed .nav-toggle { padding: 6px 4px; text-align: center; overflow: hidden; white-space: nowrap; font-size: 0; }
main.ws.nav-collapsed .nav-toggle::before { content: '◧'; font-size: 18px; }
.nav-body { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.nav-body .fields { display: grid; grid-template-columns: 1fr; gap: 4px; }
.nav-project { border-top: 1px solid var(--line); padding-top: 6px; }
.nav-project summary { cursor: pointer; font-size: 12.5px; color: var(--muted); }
.nav-project .field input { font-size: 13px; padding: 5px 7px; }
.nav-search { width: 100%; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.nav-item { display: flex; gap: 6px; align-items: stretch; }
.nav-item .set-check { position: static; display: flex; align-items: center; }
.nav-open { flex: 1; min-width: 0; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 8px; align-items: center; text-align: left;
    background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; }
.nav-open .thumb { grid-row: span 3; width: 44px; height: 34px; overflow: hidden; }
.nav-open .thumb svg { width: 100%; height: 100%; }
.nav-open b, .nav-open .muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; font-size: 12.5px; }
.nav-open b { font-size: 13.5px; }
.nav-item.on .nav-open { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.nav-state { font-size: 11.5px; }
.nav-group { margin: 6px 0 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.nav-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.nav-actions button { font-size: 12.5px; padding: 4px 8px; }
.nav-empty { padding: 10px; }

/* Views */
.view-bar { flex: 0 0 auto; z-index: 4; display: flex; flex-direction: column; gap: 5px; padding: 6px 8px; background: #fff; border-bottom: 1px solid var(--line); }
.view-primary { width: 100%; min-width: 0; display: flex; gap: 6px 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.workspace-actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.workspace-actions button { font-size: 12px; padding: 4px 7px; min-height: 29px; }
.workspace-actions button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.workspace-actions button[aria-expanded="false"] { background: #eef2f6; }
.panel-units .dimension-format { width: 100%; justify-content: space-between; }
.panel-units .units-note { margin: 5px 0 0; font-size: 11.5px; }
.slope-end-heights { font-size: 11.5px; white-space: nowrap; }
.sketch .sk-hit { cursor: pointer; }
.sketch .sk-edge-selected { stroke: #7b3fbf; stroke-width: 3px; }
.sketch .sk-hit:focus-visible { outline: 2px solid #7b3fbf; }
.view-tabs { display: flex; gap: 2px; flex-wrap: wrap; }
.view-tabs [role="tab"] { background: #fff; color: var(--accent); border: 1px solid var(--line); border-radius: 5px; padding: 4px 10px; font-size: 13px; }
.view-tabs [role="tab"][aria-selected="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
.view-tabs [role="tab"]:disabled { opacity: .45; cursor: not-allowed; }
.side-pick { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; }
.side-pick button { padding: 3px 9px; font-size: 12.5px; }
.side-pick button[aria-checked="true"] { background: var(--accent); color: #fff; }
.side-pick button[aria-checked="false"] { background: #fff; color: var(--accent); }
.view-status { padding: 4px 10px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 26px; }
.views { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: auto; padding: 6px 8px; }
.view { min-width: 0; }
#view-sketch { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 260px; }
#view-sketch > :not(.sketch-wrap) { flex-shrink: 0; }
#view-sketch .sketch-wrap { flex: 1 1 auto; min-height: 200px; }
#view-sketch .sketch-flip { position: absolute; inset: 0; }
#view-sketch .sketch { height: 100%; }
#view-sketch .sketch svg { height: 100%; min-height: 200px; border-color: #c9d5e0; background: #fff; }
#view-sketch .tools { gap: 5px; margin-bottom: 4px; }
#view-sketch .seg button, #view-sketch .add-op { font-size: 12px; padding: 5px 7px; }
#view-sketch .add-label { font-size: 12px; margin-left: 5px; }
#view-sketch #wall-sketch-constraints { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; margin-bottom: 5px; padding-bottom: 5px; }
#view-sketch .wall-sketch-pinbar, #view-sketch .wall-slope-options, #view-sketch .wall-slope-fields { gap: 4px 6px; margin: 0; }
#view-sketch .wall-sketch-pinbar { font-size: 12px; }
#view-sketch .wall-sketch-pinbar button { font-size: 12px; padding: 3px 6px; }
#view-sketch .wall-slope-row { gap: 4px; }
#view-sketch .wall-slope-row input { width: 58px; padding: 3px 5px; }
#view-sketch .wall-slope-options label { gap: 4px; }
#view-sketch .wall-slope-options select { padding: 3px; font-size: 12px; }
#view-sketch .tool-hint { font-size: 12px; margin: 4px 0 0; }
#view-sketch .tool-hint:not(:has(button, input)) { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
#view-sketch .op-chips { margin-top: 4px; }
#view-sketch .op-chips:empty, #view-sketch #shape-points:empty { display: none; }
.sketch-help { position: absolute; z-index: 3; top: 8px; left: 8px; max-width: calc(100% - 16px); display: flex; flex-wrap: wrap; gap: 3px 12px; padding: 5px 8px; border: 1px solid #c9d5e066; border-radius: 5px; background: #ffffffe0; color: #566b80; font-size: 11.5px; line-height: 1.4; pointer-events: none; user-select: none; }
.sketch-help span { white-space: normal; }
.sketch-help b { font-weight: 600; color: #334f69; }
#view-sketch .sketch svg[data-outside="true"] { cursor: not-allowed; }
.view[hidden] { display: none !important; }
.view-svg { background: #fff; border: 1px solid var(--line); border-radius: 6px; position: relative; overflow: auto; }
.view-svg svg { display: block; width: 100%; height: auto; max-height: 72vh; }
.view-svg.plan svg { max-height: none; min-width: var(--plan-min, 0px); }
.view-caption { font-size: 12.5px; color: var(--muted); margin: 4px 2px 8px; }
.member-hit { fill: transparent; cursor: pointer; }
.member-hit:hover { fill: rgba(31, 95, 191, .12); stroke: #1f5fbf; stroke-width: .01; }
.member-hit.unresolved { fill: rgba(194, 94, 0, .22); stroke: #c25e00; stroke-width: .012; stroke-dasharray: .04 .03; }
.member-hit.selected { fill: rgba(255, 138, 61, .25); stroke: #b34700; stroke-width: .014; }
.preliminary { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; background: #c25e00; color: #fff; font-weight: 700;
    font-size: 12.5px; padding: 3px 10px; border-radius: 4px; pointer-events: none; white-space: nowrap; }
.not-framed { background: #fff; border: 1px dashed #b00020; border-radius: 6px; padding: 14px 16px; }
.not-framed h3 { margin: 0 0 6px; color: #b00020; font-size: 15px; }
.eng-state { font-size: 12px; }

/* Cut list and issues */
.ws-bottom { flex: 0 0 auto; min-height: 0; max-height: 26%; display: flex; flex-direction: column; background: #fff; border-top: 1px solid var(--line); }
.bottom-tabs { display: flex; gap: 2px; padding: 4px 8px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.bottom-tabs [role="tab"] { background: transparent; color: var(--muted); border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 5px 10px; font-size: 13px; }
.bottom-tabs [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.bottom-tabs .count { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: #eef1f4; font-size: 11.5px; text-align: center; }
.bottom-tabs .count.bad { background: #b00020; color: #fff; }
.bottom-tabs .count.open { background: #c25e00; color: #fff; }
.bottom-tabs .collapse { margin-left: auto; }
.bottom-body { overflow: auto; padding: 4px 8px 8px; }
.bottom-body[hidden] { display: none; }
.cut-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cut-table th { position: sticky; top: 0; background: #f4f6f8; text-align: left; padding: 4px 6px; font-weight: 600; }
.cut-table td { border-top: 1px solid var(--line); padding: 3px 6px; }
.cut-table tbody tr { cursor: pointer; }
.cut-table tbody tr:hover { background: #f2f7fc; }
.cut-table tbody tr.selected { background: #ffe3cc; }
.cut-table tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cut-table .cut-type { min-width: 145px; width: 100%; max-width: 240px; min-height: 30px; padding: 3px 6px; font: inherit; }
.cut-hint { margin: 5px 6px; }
.ws-insp #combo { min-width: 0; max-width: 100%; }
.issue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.issue { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 2px 8px; padding: 5px 8px; border-left: 4px solid #c9a227; background: #fffaf0; border-radius: 0 6px 6px 0; }
.issue.error { border-left-color: #b00020; background: #fff3f4; }
.issue.needs-resolution { border-left-color: #c25e00; background: #fff4ec; }
.issue.selected { outline: 2px solid #b34700; }
.issue .sev { font-weight: 700; font-size: 13px; text-align: center; }
.issue .msg { font-size: 13px; overflow-wrap: anywhere; }
.issue .acts { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; }
.issue .acts button { font-size: 12px; padding: 2px 8px; }
.issue .note { grid-column: 2; font-size: 12px; color: var(--muted); }
.issue .code { color: var(--muted); font-size: 11px; margin-left: 6px; }

/* Inspector */
.insp-context { margin-bottom: 8px; }
.inspector-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); padding: 0 0 6px; }
.inspector-head button { font-size: 22px; line-height: 1; }
.ctx-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; }
.ctx-card h3 { margin: 0 0 4px; font-size: 14.5px; overflow-wrap: anywhere; }
.ctx-card dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 6px 0; font-size: 12.5px; }
.ctx-card dt { color: var(--muted); }
.ctx-card dd { margin: 0; overflow-wrap: anywhere; }
.ctx-card .acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ctx-card .acts button { font-size: 12.5px; padding: 3px 9px; }
.ctx-card dd .link.on { font-weight: 700; background: #fde6cf; border-radius: 4px; padding: 0 4px; }
.own { display: inline-block; border-radius: 10px; padding: 0 8px; font-size: 11.5px; border: 1px solid var(--line); background: #fff; color: var(--muted); white-space: nowrap; }
.own.model { border-color: #8a9bb0; background: #eef2f7; color: #1f3b57; }
.own.study { border-color: #c9a227; background: #fffaf0; color: #7a5c00; }
.own.typed { border-color: #9fc0de; background: #f2f7fc; color: #1f3b57; }
.set-state { display: inline-block; border-radius: 4px; padding: 0 6px; font-size: 11px; margin-left: 4px; vertical-align: 1px; border: 1px solid var(--line); background: #fff; color: var(--muted); }
.set-state.unresolved { border-color: #c25e00; background: #fff4ec; color: #8a4100; font-weight: 600; }
.set-state.model { border-color: #8a9bb0; background: #eef2f7; color: #1f3b57; }
.set-state.overridden { border-color: #1f3b57; color: #1f3b57; }
.set-state.style { border-color: #8bc29a; background: #f1faf3; color: #1e6b33; }
.set-state.inherited { font-style: italic; }
.units-note { margin: 0 0 6px; }
.insp-sec { border: 1px solid var(--line); border-radius: 8px; background: #fff; margin: 0 0 8px; }
.insp-sec > summary { cursor: pointer; padding: 7px 10px; font-weight: 700; font-size: 13.5px; list-style-position: inside; }
.insp-sec > :not(summary) { padding: 0 10px 10px; }
.ws-insp .panel-row { display: flex; flex-direction: column; gap: 8px; }
.ws-insp .panel-fields, .ws-insp .shape-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ws-insp .shape-pick { display: flex; flex-wrap: wrap; gap: 4px; }
.ws-insp .shape-pick button { font-size: 12px; padding: 3px 6px; }
.ws-insp .core-strip { margin: 0; padding: 0; border: 0; }
.ws-insp .core-cards { display: flex; flex-direction: column; gap: 6px; }
.ws-insp .core-head { flex-wrap: wrap; gap: 6px; }
.ws-insp .catalogue { position: static; width: auto; max-height: none; border: 0; padding: 0; box-shadow: none; }
.layout-group { border: 1px solid var(--line); border-radius: 6px; padding: 6px 8px; margin: 0 0 8px; }
.layout-group h4 { margin: 0 0 4px; font-size: 13px; }
.layout-group .muted { font-size: 12px; }
.layout-group .row { gap: 6px; align-items: center; flex-wrap: wrap; }
.seg-inline button { font-size: 12.5px; padding: 3px 9px; }
.seg-inline button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.seg-inline button[aria-pressed="false"] { background: #fff; color: var(--accent); }

/* Keyboard focus is always visible */
.ws button:focus-visible, .ws select:focus-visible, .ws input:focus-visible, .ws summary:focus-visible, .ws-bar button:focus-visible, .ws [tabindex]:focus-visible {
    outline: 3px solid #ffb547; outline-offset: 1px; }

/* Empty project */
.ws-empty { text-align: center; padding: 48px 16px; color: var(--muted); }
.ws-empty h2 { color: var(--ink); }
.ws-empty .row { justify-content: center; }

/* Properties fields: stretch to the column (the older fixed widths are for the old strip). */
.ws-insp .panel-fields .field, .ws-insp .shape-fields .field, .ws-insp .f-mark, .ws-insp .f-level, .ws-insp .f-type, .ws-insp .f-group { width: auto; min-width: 0; }
.ws-insp .panel-fields .model-badge { grid-column: 1 / -1; }

/* Narrower (tablets, a zoomed browser): one page that scrolls, the properties under the views; the command bar and the
   view bar stay on top. Narrow (phones): the panel list folds away behind its button (it names the panel open). */
@media (min-width: 1181px) and (max-width: 1350px) {
    #gen.ws { --nav-w: 190px; --insp-w: 294px; }
    #gen.ws.nav-collapsed { --nav-w: 40px; }
    #gen.ws.inspector-collapsed { --insp-w: 0px; }
}
@media (max-width: 1180px) {
    .ws-body { height: auto; overflow: visible; }
    #gen.ws { grid-template-columns: var(--nav-w) minmax(0, 1fr); grid-template-rows: auto auto; align-items: start; }
    .ws-nav { grid-row: 1 / span 2; align-self: stretch; }
    .ws-insp { grid-column: 2; border-left: 0; border-top: 2px solid var(--line); }
    .ws-nav, .ws-center, .ws-insp { overflow: visible; }
    .view-bar { position: static; }
    .views { flex: none; min-height: 0; overflow: visible; }
    #view-sketch { flex: none; }
    #view-sketch .sketch-wrap { height: clamp(360px, 60dvh, 640px); flex: none; }
    .ws-bottom { max-height: 270px; }
    .ws-center { overflow: visible; }
    .ws-insp .panel-fields, .ws-insp .shape-fields { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}
@media (max-width: 820px) {
    #gen.ws { display: block; }
    .ws-nav { border-right: 0; border-bottom: 1px solid var(--line); }
    main.ws .nav-body, main.ws.nav-collapsed .nav-body { display: none; }
    main.ws.nav-open .nav-body { display: flex; }
    main.ws.nav-collapsed .nav-toggle { font-size: 14px; text-align: left; padding: 6px 10px; white-space: normal; }
    main.ws.nav-collapsed .nav-toggle::before { content: ''; }
    .ws-insp .panel-fields, .ws-insp .shape-fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .ws-bar .spacer { display: none; }
    .ws-history { margin-left: auto; }
    .ws-history .dirty { display: none; }
    .ws-file { width: 100%; }
    .ws-file .header-more { margin-left: auto; }
    .view-primary { gap: 5px; }
    .view-tabs { width: 100%; }
    .view-tabs [role="tab"] { padding: 5px 8px; }
    .workspace-actions { width: 100%; }
    .workspace-actions [data-act="focus-view"] { margin-left: auto; }
    .side-pick { gap: 3px; }
    .views { padding: 5px; min-height: 0; }
    #view-sketch .sketch-wrap { height: max(300px, 48dvh); }
    #view-sketch .tools .seg { flex-wrap: wrap; }
    #view-sketch .tool-hint:not(:has(button, input)) { white-space: normal; }
    #view-sketch .wall-slope-fields { flex-wrap: wrap; }
    .ws-bar .bar-btn { font-size: 12px; padding: 5px 6px; }
    .ws-bar .gen-title { font-size: 13px; }
    .ws-bar { gap: 5px 7px; padding: 6px 8px; }
    .ws-bar .brand { font-size: 13px; }
}
/* Empty project: only what applies. A located setting flashes. */
main.ws-is-empty .insp-sec, main.ws-is-empty .units-note, main.ws-is-empty .ws-bottom, main.ws-is-empty .view-bar, main.ws-is-empty .view-status { display: none; }
.flash { animation: ws-flash 1.4s ease-out; }
@keyframes ws-flash { 0% { box-shadow: 0 0 0 3px #ffb547; } 100% { box-shadow: 0 0 0 0 transparent; } }
.nav-body > *, .nav-body input { flex: 0 0 auto; }
.nav-search { height: auto; padding: .4em .6em; border: 1px solid var(--line); border-radius: 6px; font: inherit; }

/* Manual edit mode: the switch, the bar over the elevation, members placed by hand, the member card's block. */
.edit-toggle { padding: 3px 10px; border-radius: 6px; border: 1px solid #7b3fbf; background: #fff; color: #5b2b94; font-size: 12.5px; margin-right: 8px; }
.edit-toggle.on { background: #7b3fbf; color: #fff; }
.edit-bar { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; padding: 6px 10px; margin-bottom: 6px; border: 1px solid #c9b3e6; border-radius: 6px; background: #f6f0fd; font-size: 13px; }
.edit-bar button { padding: 2px 10px; font-size: 12.5px; }
.view-svg.editing .member-hit { cursor: move; }
/* The bar of actions at the selection, in the elevation. */
.quick-bar { position: absolute; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-width: calc(100% - 8px); padding: 4px; background: #fff; border: 1px solid #1f5fbf; border-radius: 8px; box-shadow: 0 4px 14px rgba(20, 40, 80, .18); font-size: 13px; }
.quick-bar b { white-space: nowrap; }
.quick-bar .qb-sep { width: 1px; align-self: stretch; background: var(--line, #d7dbe0); margin: 0 2px; }
.quick-bar .qb-f { display: inline-flex; align-items: center; gap: 3px; }
.quick-bar .qb-f input { width: 6.5em; }
.quick-bar .qb-step select { margin-left: 3px; }
.quick-bar button.secondary.danger { color: #a01818; border-color: #e3b3b3; }
.op-hit { fill: #1f5fbf; fill-opacity: 0; cursor: pointer; }
.op-hit:hover { fill-opacity: .06; }
.op-hit.selected { fill-opacity: .08; stroke: #ff8a3d; stroke-width: .02; }
.edit-bar.slim { padding: 4px 8px; }
/* New panel: like the open one, blank, or from a template. */
.new-split { position: relative; display: inline-flex; }
.new-split .bar-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.new-split .new-more { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid #c9d6ea; padding: 5px 8px; }
.new-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30; width: 340px; max-height: 70vh; overflow: auto; background: #fff; color: #1f2328; border: 1px solid #c9ced6; border-radius: 8px; box-shadow: 0 10px 30px rgba(20,40,80,.25); padding: 6px; text-align: left; }
.new-menu button[role=menuitem] { display: block; width: 100%; text-align: left; background: transparent; color: inherit; border: 0; border-radius: 6px; padding: 7px 8px; font: inherit; cursor: pointer; }
.new-menu button[role=menuitem]:hover, .new-menu button[role=menuitem]:focus { background: #eef3fb; }
.new-menu small { display: block; color: #57606a; font-size: 12px; }
.new-menu .nm-head { margin: 6px 8px 2px; font-size: 11px; font-weight: 700; text-transform: uppercase; color: #57606a; }
.new-menu .nm-row { display: flex; align-items: center; }
.new-menu .nm-row button[role=menuitem] { flex: 1; }
.new-menu p { margin: 4px 8px 8px; }
.hist-menu { left: 0; right: auto; width: 300px; }
.help-dialog { width: min(640px, 94vw); }
kbd { display: inline-block; padding: 1px 6px; border: 1px solid #c9ced6; border-bottom-width: 2px; border-radius: 4px; background: #f6f8fa; font: 12px/1.4 ui-monospace, Consolas, monospace; white-space: nowrap; }
/* The site's views, in the title bar. */
.ws-hits { position: relative; margin-right: 8px; font-size: 13px; }
.ws-hits .hits-toggle { font: inherit; color: #fff; background: transparent; border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.ws-hits .hits-toggle:hover, .ws-hits .hits-toggle[aria-expanded="true"] { background: rgba(255,255,255,.12); }
.ws-hits .hits-visits { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; width: 360px; max-height: 70vh; overflow: auto; background: #fff; color: #1f2328; border: 1px solid #c9ced6; border-radius: 8px; box-shadow: 0 10px 30px rgba(20,40,80,.25); padding: 10px 12px; text-align: left; }
.ws-hits .hits-visits h3 { margin: 8px 0 4px; font-size: 13px; }
.ws-hits .hits-visits ol { margin: 0; padding-left: 18px; font-size: 12px; }
.ws-hits .hits-visits li { display: flex; justify-content: space-between; gap: 8px; margin: 2px 0; }
.ws-hits .hits-visits p { margin: 4px 0; font-size: 12px; }
/* Framing settings (Set dialog). */
.fs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 12px; margin: 8px 0; }
.fs-opt { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; cursor: pointer; }
.fs-opt input { margin-top: 3px; }
.fs-opt small { display: block; color: #57606a; font-size: 12px; }
.mini-field { display: block; margin: 4px 0 8px; }
.mini-field span { display: block; font-size: 12px; color: #57606a; }
/* The old import dialog (what to do with the panels already here): kept while the published Shop Generator still
   uses it; the Batch Sheets import preview went out first. Drop with the next full publish. */
.conflict-dialog { max-width: min(880px, 94vw); }
.conflict-dialog h3 { margin: 0 0 6px; }
.conflict-dialog select { max-width: 100%; }
/* Import preview (import-preview-dialog.js): what the file brings, what happens to the panels here. */
.import-dialog.import-preview { width: min(1080px, calc(100vw - 32px)); max-width: min(1080px, calc(100vw - 32px)); padding: 16px 18px; }
.ip-head h3 { margin: 0 0 2px; font-size: 18px; }
.ip-head p { margin: 0 0 10px; overflow-wrap: anywhere; }
.ip-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 10px; }
.ip-tile { display: grid; justify-items: start; gap: 1px; text-align: left; background: #f6f8fa; color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.ip-tile b { font-size: 22px; line-height: 1.1; color: var(--accent); }
.ip-tile span { font-weight: 600; font-size: 14px; }
.ip-tile small { color: var(--muted); font-size: 12.5px; }
.ip-tile.ip-warn { background: #fff7e6; border-color: #f0c36d; }
.ip-tile.ip-warn b { color: #8a5a00; }
.ip-modes { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 8px; margin: 0 0 10px; display: grid; gap: 6px; }
.ip-modes legend { font-weight: 600; font-size: 14px; padding: 0 4px; }
.ip-mode { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.ip-mode:has(input:checked) { background: #eef3f8; outline: 1px solid #aac3da; }
.ip-mode.off { cursor: default; opacity: .75; }
.ip-mode input { margin-top: 4px; }
.ip-rec { color: #1e5a2c; background: #edf7ee; border-radius: 999px; padding: 0 8px; font-weight: 600; }
.ip-mode.off .ip-rec { color: var(--muted); background: #eef1f5; }
.ip-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 6px; }
.ip-filter { background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px; font-size: 13px; }
.ip-filter span { color: var(--muted); font-weight: 600; margin-left: 2px; }
.ip-filter.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ip-filter.on span { color: #dbe6f1; }
.ip-table-wrap { max-height: 46vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.ip-table { margin: 0; }
.ip-table thead th { position: sticky; top: 0; z-index: 1; }
.ip-table select { max-width: 100%; font-size: 13px; }
.ip-table td:last-child { min-width: 190px; }
.ip-table td:nth-child(-n+3) { white-space: nowrap; }
.ip-chip { display: inline-block; white-space: nowrap; border-radius: 999px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.ip-changed { background: #fff1d6; color: #7a4d00; } .ip-new { background: #e3f4e6; color: #1e5a2c; } .ip-same { background: #eef1f5; color: #57606a; }
.ip-bad { background: #fde7ea; color: var(--warn); } .ip-here { background: #e8eef5; color: var(--accent); }
.ip-list { margin: 0; padding-left: 18px; }
.ip-pic summary { cursor: pointer; color: var(--accent); }
.ip-elevs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.ip-elev { margin: 0; } .ip-elev svg { display: block; max-width: 100%; height: auto; }
.ip-key { margin: 2px 0 0; display: flex; gap: 4px 10px; flex-wrap: wrap; align-items: center; }
.ip-key i { display: inline-block; width: 10px; height: 10px; border: 1px solid; margin-right: 3px; vertical-align: -1px; }
.ip-key .k-moved { background: #ffe2a8; border-color: #a36b00; } .ip-key .k-added { background: #c9ecd0; border-color: #1e7a35; } .ip-key .k-gone { background: #fde7ea; border-color: var(--warn); border-style: dashed; }
.ip-elev figcaption { font-size: 11.5px; color: var(--muted); }
.ip-wall { fill: #fff6d6; stroke: var(--accent); stroke-width: 1.2; }
.ip-op { fill: #fff; stroke: #8a95a1; stroke-width: 1; }
.ip-op.added { fill: #c9ecd0; stroke: #1e7a35; } .ip-op.moved { fill: #ffe2a8; stroke: #a36b00; } .ip-op.gone { fill: #fde7ea; stroke: var(--warn); stroke-dasharray: 3 2; }
.ip-evidence { margin-top: 10px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.ip-evidence > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.ip-group { margin: 6px 0 0 6px; } .ip-group > summary { cursor: pointer; font-size: 13.5px; overflow-wrap: anywhere; }
.ip-ids { overflow-wrap: anywhere; margin: 2px 0 6px; }
.ip-foot { margin-top: 12px; position: sticky; bottom: -16px; background: #fff; padding: 8px 0 2px; border-top: 1px solid var(--line); }
@media (max-width: 640px) {
    .ip-table thead { display: none; }
    .ip-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
    .ip-table td { border: 0; padding: 2px 8px; }
    .ip-table td:nth-child(4), .ip-table td:nth-child(5) { grid-column: 1 / -1; min-width: 0; }
}
.ip-table tr[hidden] { display: none; }
/* Compare. */
.cmp { padding: 4px 2px; }
.cmp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cmp-head .spacer { flex: 1; }
.cmp-issue { display: inline-flex; gap: 6px; align-items: center; }
.cmp-issue input { width: 22em; }
.cmp-sum { margin: 8px 0 4px; }
.cmp-list { margin: 0 0 8px 18px; padding: 0; columns: 2 22em; font-size: 13px; }
.cmp-list li.removed { color: #a01818; } .cmp-list li.added { color: #1e7b34; }
/* Typical panels. */
.typ-badge { display: inline-block; margin-left: 4px; padding: 0 5px; border-radius: 8px; background: #e8eef9; color: #1f3a5f; font-size: 11px; font-weight: 700; }
.typ-line { margin: 6px 0; }
/* The set dialog. */
.set-dialog { width: min(1180px, 96vw); }
.sd { display: flex; flex-direction: column; max-height: 90vh; }
.sd-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px 6px; border-bottom: 1px solid var(--line, #d7dbe0); }
.sd-head h2 { margin: 0; font-size: 17px; }
.sd-tabs { display: flex; gap: 2px; padding: 6px 12px 0; border-bottom: 1px solid var(--line, #d7dbe0); }
.sd-tabs button { border: 0; background: transparent; padding: 7px 12px; border-bottom: 3px solid transparent; color: inherit; cursor: pointer; font: inherit; }
.sd-tabs button.on { border-bottom-color: #1f5fbf; font-weight: 700; }
.sd-body { padding: 12px 16px 16px; overflow: auto; }
.sd-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
.sd-row .field { min-width: 14em; }
.sd-row p { flex: 1 1 22em; margin: 0; }
.sd-stats { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 8px; font-size: 14px; }
.sd-table { width: 100%; border-collapse: collapse; margin: 6px 0 10px; font-size: 13px; }
.sd-table th, .sd-table td { text-align: left; padding: 5px 8px; border-bottom: 1px solid #e6e9ee; vertical-align: top; }
.sd-table th { font-weight: 600; color: #57606a; background: #f6f8fa; }
.sd-bars { margin: 6px 0; font-size: 13px; }
.sd-dash tr.on td { background: #f2f7ff; }
.sd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.sd-card { border: 1px solid var(--line, #d7dbe0); border-radius: 8px; padding: 10px 12px; }
.sd-card h3 { margin: 0 0 4px; font-size: 14px; }
.sd-card p { margin: 0 0 8px; }
.sd-row .seg { display: inline-flex; border: 1px solid var(--line, #d7dbe0); border-radius: 6px; overflow: hidden; }
.sd-row .seg button { border: 0; border-radius: 0; background: #fff; color: #1f2328; padding: 4px 10px; font: inherit; font-size: 13px; cursor: pointer; }
.sd-row .seg button + button { border-left: 1px solid var(--line, #d7dbe0); }
.sd-row .seg button.on { background: #1f5fbf; color: #fff; }
.sd-row .spacer { flex: 1; }
.sd-bars summary { cursor: pointer; font-weight: 600; }
.sd-bars ol { margin: 6px 0 6px 18px; padding: 0; }
.sd-bars li { margin: 2px 0; }
.member-hit.manual { fill: rgba(123, 63, 191, .14); stroke: #7b3fbf; stroke-width: .012; stroke-dasharray: .03 .02; }
.member-hit.manual.selected { fill: rgba(123, 63, 191, .3); }
.man-card { margin-top: 8px; padding: 6px 8px; border: 1px dashed var(--line); border-radius: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.man-card.on { border-color: #c9b3e6; background: #faf6fe; flex-direction: column; align-items: stretch; }
.man-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.man-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.man-fields label { display: flex; flex-direction: column; font-size: 11.5px; color: var(--muted); gap: 2px; }
.man-fields input { width: 100%; flex: none; height: auto; min-height: 0; padding: 3px 6px; }
.man-nudge { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.man-nudge button { padding: 2px 8px; min-width: 30px; }
.man-sum { margin: 6px 0; padding: 6px 8px; border: 1px dashed #c9b3e6; border-radius: 6px; background: #faf6fe; font-size: 12.5px; }
.man-sum .acts { display: inline-flex; gap: 6px; margin-left: 6px; }

/* The Openings schedule: a row per opening, member cells that open a picker; check rows to assign several at once. */
.sch-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.sch-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sch-table th, .sch-table td { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.sch-table thead th { background: #f4f6f8; font-weight: 600; position: sticky; top: 0; }
.sch-table tr.selected td { background: #fff6ee; }
.sch-cell { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink);
    font-family: ui-monospace, Consolas, monospace; font-size: 12px; text-align: left; overflow-wrap: anywhere; }
.sch-cell small { font-family: system-ui, sans-serif; font-size: 10.5px; color: var(--muted); }
.sch-cell.style { border-color: #1e7b34; } .sch-cell.overridden { border-color: #c25e00; } .sch-cell.on { box-shadow: 0 0 0 2px #1f5fbf; }
.sch-na { color: var(--muted); }
.sch-arr { display: inline-flex; gap: 2px; margin-top: 3px; align-items: center; }
.sch-arr button { padding: 0 6px; font-size: 11px; border-radius: 4px; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.sch-arr button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.sch-rule.ok { color: #1e7b34; font-weight: 700; } .sch-rule.warn { color: #9a4a00; }
.sch-picker { margin-top: 8px; padding: 8px 10px; border: 1px solid #1f5fbf; border-radius: 8px; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.12); display: flex; flex-direction: column; gap: 6px; }
.sch-picker-head { display: flex; gap: 6px; align-items: center; }
.sch-group { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sch-group > .muted { flex: 0 0 100%; }
.sch-tile { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fafbfc; color: var(--ink); max-width: 260px; text-align: left; }
.sch-tile:hover, .sch-tile:focus-visible { border-color: #1f5fbf; background: #eaf2fd; }
.sch-tile b { font-family: ui-monospace, Consolas, monospace; font-size: 12px; overflow-wrap: anywhere; }
.sch-tile small { font-size: 10.5px; color: var(--muted); }
.sch-type input { flex: 1 1 220px; }

/* Edit mode: the step, the last edit, wide bays, handles, the member type and its preview. */
.man-steps { display: inline-flex; gap: 2px; align-items: center; margin-right: 6px; }
.man-steps button { padding: 1px 7px; font-size: 12px; border-radius: 4px; border: 1px solid #c9b3e6; background: #fff; color: #5b2b94; }
.man-steps button.on { background: #7b3fbf; color: #fff; border-color: #7b3fbf; }
.man-last { flex: 0 0 100%; color: #4b2a78; }
.man-bays { flex: 0 0 100%; display: flex; flex-direction: column; gap: 4px; color: #8a4b00; }
.man-bays button { margin-left: 6px; padding: 1px 8px; }
.man-handle { cursor: pointer; }
.man-handle circle { fill: #7b3fbf; stroke: #fff; stroke-width: .012; }
.man-handle path { fill: #fff; pointer-events: none; }
.man-handle:hover circle { fill: #5b2b94; }
.man-type { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; margin-top: 6px; font-size: 12px; }
.man-type label { display: flex; flex-direction: column; gap: 2px; color: var(--muted); }
.man-type input { flex: none; height: auto; min-height: 0; padding: 3px 6px; }
.man-preview { margin-top: 6px; padding: 6px 8px; border: 1px solid #c25e00; border-radius: 6px; background: #fff8f0; font-size: 12px; }
.man-preview p { margin: 0 0 4px; }

/* The panel mark at the top of its card: a title you type over (rename). */
.ctx-card h3.ctx-title { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.ctx-mark { font: inherit; font-weight: 700; font-size: 15px; color: inherit; border: 1px solid transparent; border-radius: 4px; padding: 1px 4px; margin-left: -5px; background: transparent; min-width: 8ch; flex: 1 1 10ch; max-width: 100%; }
.ctx-mark:hover { border-color: var(--line, #c9ced6); background: #fff; }
.ctx-mark:focus { border-color: #1f5fbf; background: #fff; outline: 2px solid rgba(31, 95, 191, .2); }
.mark-hit:hover { fill-opacity: .08; }

/* Where an opening came from (opening-context.mjs): its trade color, the model's family and type. */
.oc { display: inline-block; color: #3d4652; font-size: 12px; margin-left: 4px; }
td .oc { display: block; margin: 3px 0 0; }
.oc-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: -1px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
.oc-name { color: #57606a; }
.oc-legend { margin: 6px 2px 0; display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.oc-loose { margin: 8px 0 4px; padding: 6px 8px; border: 1px dashed #c9a227; border-radius: 6px; background: #fffbea; }
.oc-loose ul { margin: 4px 0 0; padding-left: 4px; list-style: none; }
.sk-op[style] rect { stroke: var(--oc); }
.sk-op.on[style] rect { stroke: #ff8a3d; }

.quick-bar .qb-name { max-width: 7em; overflow: hidden; text-overflow: ellipsis; }
.quick-bar .qb-icon, .quick-bar summary { box-sizing: border-box; display: inline-flex; justify-content: center; align-items: center; width: 28px; height: 28px; padding: 0; font-size: 18px; cursor: pointer; }
.quick-bar summary { list-style: none; border-radius: 5px; border: 1px solid #c9d6ea; color: #1f5fbf; }
.quick-bar summary::-webkit-details-marker { display: none; }
.quick-bar summary:focus-visible, .quick-bar button:focus-visible { outline: 2px solid #1f5fbf; outline-offset: 2px; }
.quick-bar .qb-menu { position: absolute; z-index: 6; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; overflow: auto; padding: 10px; border: 1px solid #1f5fbf; border-radius: 8px; background: #fff; box-shadow: 0 4px 14px rgba(20, 40, 80, .18); }
.quick-bar .qb-more:not([open]) .qb-menu { display: none; }
.quick-bar .qb-menu .qb-f { flex-wrap: wrap; }
.quick-bar .qb-menu select { max-width: 100%; }
.label-maker-dialog { width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;border-radius:0!important; }

.sketch-member-bar { display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;background:#f5f0fc;border-bottom:1px solid #d8c7ed;font-size:12px; }
.sketch-member-bar[hidden] { display:none; }
.sketch-member-bar button { padding:3px 7px;font-size:12px; }
.sketch-member-bar label { display:flex;align-items:center;gap:4px; }
.sketch-member-bar input { width:7em;padding:3px 5px;min-height:28px; }
.sk-cl .custom { stroke:#7b3fbf;stroke-width:1; }
.sk-mem-hit:focus { stroke:#7b3fbf!important;stroke-opacity:.4!important;outline:none; }
.framing-scope { display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:8px 10px;background:#edf4fb;border-radius:6px; }
.framing-scope label { display:flex;align-items:center;gap:5px; }
.framing-source { padding:7px 10px;border-left:3px solid #2468a8;background:#f4f7fa;font-size:12px; }
.fs-grid .mini-field small { display:block;color:var(--muted);font-weight:normal; }
@media(max-width:600px) { .sketch-member-bar input { font-size:16px; } .framing-scope label { min-height:32px; } }

.nav-export { margin-top:6px;padding:10px;background:#fff;border:1px solid #b8c9da;border-top:3px solid #2468a8;border-radius:6px; }.nav-export h3 { margin:0 0 6px;font-size:15px; }.export-help,.export-block p { margin:4px 0 8px;font-size:11px;line-height:1.4;color:#566b80; }.export-block { padding:9px 0;border-top:1px solid #e0e6ed; }.export-block strong { font-size:12px; }.export-block button { display:block;width:100%;margin-top:5px;text-align:left;padding:6px 7px;font-size:12px; }.export-block:last-child { padding-bottom:0; }.export-print-tip { padding:10px 12px;background:#edf4fb;border-left:3px solid #2468a8;font-size:13px;line-height:1.5; }

/* Presentation-only sketch zoom; keep gesture hints clear of its controls. */
.sketch-zoom{position:absolute;z-index:4;top:8px;right:8px;display:flex;align-items:center;gap:2px;padding:3px;border:1px solid #c9d5e0;border-radius:6px;background:#fffffff0;color:#1e3a56;box-shadow:0 1px 4px #16324c14}
.sketch-zoom button{min-height:28px;padding:3px 8px;background:transparent;color:inherit;border:0;border-radius:3px;font:inherit;font-size:12px;cursor:pointer}
.sketch-zoom button:hover:not(:disabled){background:#e4edf6}
.sketch-zoom button:focus-visible{outline:2px solid #286cad;outline-offset:-2px}
.sketch-zoom button:disabled{opacity:.35;cursor:default}
.sketch-zoom output{min-width:40px;text-align:center;font-size:12px;font-variant-numeric:tabular-nums}
#view-sketch .sketch-help{max-width:calc(100% - 265px)}
@media(max-width:820px){#view-sketch .sketch-help{top:48px;max-width:calc(100% - 16px)}}

.sketch-zoom [data-sketch-pan][aria-pressed="true"],.sketch-zoom [data-sketch-pan][aria-pressed="true"]:hover{background:#1e3a56;color:#fff}
#view-sketch svg[data-pan="true"],#view-sketch svg[data-pan="true"] *{cursor:grab!important}
#view-sketch svg[data-pan="true"]{touch-action:none}
#view-sketch svg[data-pan="true"] *{pointer-events:none}
#view-sketch svg[data-panning="true"],#view-sketch svg[data-panning="true"] *{cursor:grabbing!important}