/* Track designer page (designer.html). Builds on styles.css. */

/* The plan fills the window below the header; the tool panels float over its right side. */

/* The page is pinned to the window: header, then the plan taking all the rest, so the floating
   tools always end inside the window whatever its size. Pinned rather than just the window's
   height, so nothing (a phone's keyboard, its browser bars, a scroll into view) can scroll the
   header out of sight with no way to scroll it back. */

body.designer-page{

    position:fixed;

    inset:0;

    display:flex;

    flex-direction:column;

    overflow:hidden;

}

body.designer-page > footer{ display:none; }

main.designer{

    max-width:none;

    width:100%;

    box-sizing:border-box;

    padding:10px 16px 12px;

    flex:1;

    min-height:0;

    display:flex;

}

.designer-plan{

    position:relative;

    flex:1;

    min-height:0;

}

.plan-view{

    display:block;

    width:100%;

    height:100%;

    background:var(--bg-inset);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    cursor:grab;

    touch-action:none;

    user-select:none;

    -webkit-user-select:none;

    -webkit-touch-callout:none; /* a long press shows the design's details, not iOS's callout */

}

.plan-view:active{ cursor:grabbing; }

.plan-toolbar{

    position:absolute;

    top:10px;

    left:10px;

    display:flex;

    flex-wrap:wrap;

    gap:4px;

    z-index:3;

}

.plan-toolbar button{

    min-width:34px;

    padding:4px 9px;

    font-size:0.85rem;

    background:var(--panel-bg);

    backdrop-filter:blur(4px);

}

/* The Tools box: a button floating over the plan (placed by designer.js) that opens into the
   list of tool panels, scrolling inside itself when they don't all fit. */

.panel-box{

    position:absolute;

    z-index:4;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    max-width:calc(100% - 12px);

}

.panel-box:not(.at-left){ align-items:flex-end; }

.panels-btn{

    padding:5px 12px;

    font-size:0.85rem;

    font-weight:600;

    background:var(--panel-bg);

    backdrop-filter:blur(4px);

    box-shadow:var(--panel-shadow);

    touch-action:none;

    flex-shrink:0;

}

.panel-box.open .panels-btn{ border-color:var(--accent); }
.panel-box.drop-target .designer-side, .panel-box.drop-target:not(.open) .panels-btn{ outline:2px dashed var(--accent); outline-offset:1px; }


/* The design's details, shown at the pointer by a right-click on the plan, or I. */
.details-popup{

    position:absolute;

    z-index:20;

    width:340px;

    max-width:calc(100% - 20px);

    padding:12px 14px;

    background:var(--panel-bg-strong);

    border:1px solid var(--accent);

    border-radius:var(--radius-sm);

    box-shadow:var(--popup-shadow);

}

.details-popup[hidden]{ display:none; }
.details-popup h3{ margin:0 0 8px; font-size:1rem; display:flex; justify-content:space-between; align-items:center; }
.details-popup label{ display:grid; gap:3px; margin-bottom:8px; font-size:0.85rem; color:var(--text-muted); }
.details-popup input, .details-popup textarea{ width:100%; box-sizing:border-box; color:var(--text); }
.details-popup textarea{ min-height:70px; resize:vertical; }
.details-popup dl{ display:grid; grid-template-columns:auto 1fr; gap:2px 12px; margin:6px 0 0; font-size:0.85rem; }
.details-popup dt{ color:var(--text-muted); }
.details-popup dd{ margin:0; }
.save-details textarea{ width:100%; box-sizing:border-box; min-height:70px; resize:vertical; }

.designer-side{

    display:none;

    flex-direction:column;

    gap:3px;

    margin-top:4px;

    padding:4px;

    min-height:0;

    width:max-content;

    max-width:100%;

    box-sizing:border-box;

    overflow-y:auto;

    overflow-x:hidden;

    overscroll-behavior:contain;

    background:var(--side-bg);

    backdrop-filter:blur(4px);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    box-shadow:var(--panel-shadow);

}

.panel-box.open .designer-side{ display:flex; }
/* Closed, the panels are a compact list of titles; one open widens the box to fit it. */
.panel-box.open:has(.designer-side > details.panel[open]) .designer-side{ width:380px; }
/* The Room tool's tables (a window has five values) need a little more. */
.panel-box.open:has(#panel-room[open]) .designer-side{ width:450px; }
details.panel.floating#panel-room[open]{ width:450px; }
.designer-side > details.panel{ flex-shrink:0; box-shadow:none; }


details.panel{

    background:var(--panel-bg);

    backdrop-filter:blur(6px);

    border:1px solid var(--border);

    border-radius:var(--radius-sm);

    padding:0 8px;

    font-size:0.85rem;

    box-shadow:var(--panel-shadow);

}

details.panel > summary{

    cursor:pointer;

    padding:3px 0;

    font-family:"Space Grotesk",Inter,sans-serif;

    font-weight:600;

    font-size:0.85rem;

    white-space:nowrap;

    list-style-position:inside;

}

details.panel[open] > summary{ border-bottom:1px solid var(--border); margin-bottom:8px; }
details.panel[open]{ padding-bottom:8px; }
details.panel input, details.panel select, details.panel textarea{ padding:3px 6px; font-size:0.82rem; }
details.panel button{ padding:4px 9px; font-size:0.82rem; }
details.panel p{ margin:6px 0; }
details.panel h3{ font-size:0.88rem; margin:12px 0 6px; }
/* Wide tables scroll sideways inside their panel rather than being cut off. */
details.panel > div{ overflow-x:auto; }

/* Each panel's own help, folded at its bottom. */
details.panel-help{ margin-top:8px; border-top:1px solid var(--border); padding-top:4px; color:var(--text-muted); font-size:0.8rem; line-height:1.45; }
details.panel-help > summary{ cursor:pointer; font-weight:500; width:max-content; list-style:none; }
details.panel-help > summary::-webkit-details-marker{ display:none; }
details.panel-help > summary::before{ content:"? "; }

/* A floating tool's way back into the Tools box. */
details.panel > summary .dock-btn{ display:none; margin-left:8px; padding:0 6px; font-size:0.8rem; line-height:1.4; vertical-align:1px; }
details.panel.floating > summary .dock-btn{ display:inline-block; }

.keys-table{ width:100%; border-collapse:collapse; font-size:0.82rem; }
.keys-table td{ padding:3px 4px; border-bottom:1px solid var(--border); vertical-align:top; }
.keys-table td:first-child{ white-space:nowrap; width:1%; }
kbd{ display:inline-block; padding:1px 6px; border:1px solid var(--kbd-border); border-bottom-width:2px; border-radius:4px; font-family:inherit; font-size:0.8rem; background:var(--bg-inset); }

/* Plan view drawing. Lines keep a constant on-screen width whatever the zoom; only the board
   itself is drawn at its real width in mm. */

.plan-view line, .plan-view path, .plan-view circle{ vector-effect:non-scaling-stroke; }

.pv-grid line.minor{ stroke:var(--grid-minor); stroke-width:1; }
.pv-grid line.major{ stroke:var(--grid-major); stroke-width:1; }

.plan-view .pv-board{ fill:none; stroke:#6f5a40; stroke-linejoin:round; vector-effect:none; }
.plan-view .pv-banked-twist{ fill:none; stroke:rgba(56,189,248,0.16); vector-effect:none; pointer-events:none; }
.plan-view .pv-banked{ fill:none; stroke:rgba(56,189,248,0.3); vector-effect:none; pointer-events:none; }
.pv-edge{ fill:none; stroke:#cbb592; stroke-width:1.5; }
.pv-lane-halo{ fill:none; stroke:rgba(0,0,0,0.45); stroke-width:4.5; }
.pv-lane{ fill:none; stroke-width:2.5; }
.plan-view .pv-hits path{ fill:none; stroke:transparent; pointer-events:stroke; vector-effect:none; }
.pv-selected{ fill:none; stroke:var(--accent); stroke-width:6; stroke-opacity:0.8; pointer-events:none; }
.pv-problem{ fill:none; stroke:#ef4444; stroke-width:3; stroke-dasharray:8 6; pointer-events:none; }
.pv-start{ stroke:#fff; stroke-width:3; stroke-dasharray:6 4; pointer-events:none; }
.pv-crossing{ fill:none; stroke:#38bdf8; stroke-width:2; pointer-events:none; }
.pv-crossing.unbridged{ stroke:#ef4444; stroke-width:3; }
.pv-arrows polygon{ fill:rgba(255,255,255,0.85); stroke:rgba(0,0,0,0.6); stroke-width:1; pointer-events:none; }
.pv-badges g{ cursor:pointer; }
.pv-badges circle{ fill:var(--bg-elevated); stroke:var(--badge-ring); stroke-width:1; }
.pv-badges text{ fill:var(--text); text-anchor:middle; font-family:Inter,sans-serif; font-weight:600; user-select:none; }
.pv-badges g.selected circle{ fill:var(--accent); stroke:#fff; }
.pv-open-end{ fill:#ef4444; stroke:#fff; stroke-width:1.5; pointer-events:none; }
.pv-overlap{ fill:rgba(239,68,68,0.25); stroke:#ef4444; stroke-width:2; pointer-events:none; }
.pv-hidden{ fill:none; stroke:#d946ef; stroke-width:6; stroke-linecap:round; stroke-opacity:0.85; pointer-events:none; }
.pv-hidden.partial{ stroke-dasharray:6 6; }
.pv-unreachable{ fill:#f97316; stroke:none; pointer-events:none; }
.pv-room-floor{ fill:rgba(148,163,184,0.06); stroke:none; pointer-events:none; }
.pv-wall{ fill:none; stroke:var(--plan-ink-2); stroke-width:5; stroke-linejoin:miter; pointer-events:none; }
.pv-obstacle{ fill:rgba(148,163,184,0.35); stroke:#94a3b8; stroke-width:1.5; cursor:move; }
.pv-obstacle:hover{ fill:rgba(148,163,184,0.5); }
.pv-door-gap{ stroke:var(--bg-inset); stroke-width:7; pointer-events:none; }
.pv-door-zone{ fill:rgba(250,204,21,0.08); stroke:none; pointer-events:none; }
.pv-door-swing{ fill:none; stroke:var(--door); stroke-width:1.5; stroke-dasharray:5 4; pointer-events:none; }
.pv-door-zone.selected{ fill:rgba(250,204,21,0.2); stroke:var(--accent); stroke-width:2; }
.pv-obstacle.selected{ stroke:var(--accent); stroke-width:2.5; }
.pv-window{ stroke:var(--window); stroke-width:4; pointer-events:none; }
.pv-window.selected{ stroke:var(--window-selected); stroke-width:6; }
/* What catches a press on a door or window: its whole swing, and a wide band along its opening. */
.plan-view .pv-opening-hit{ fill:transparent; stroke:transparent; stroke-width:16; cursor:move; pointer-events:all; }
/* Picking a wall to line a piece up with: the walls light up and take the clicks. */
.plan-view .pv-wall-hit{ stroke:transparent; stroke-width:18; pointer-events:none; }
.plan-view.picking-wall .pv-wall-hit{ stroke:rgba(99,102,241,0.35); pointer-events:stroke; cursor:pointer; }
.plan-view.picking-wall .pv-wall-hit:hover{ stroke:rgba(165,180,252,0.85); }
.plan-view.picking-wall{ cursor:crosshair; }
.pv-handle.room-size{ fill:#e2e8f0; stroke:var(--accent); stroke-width:2.5; cursor:grab; }
.pv-handle.corner{ fill:#94a3b8; stroke:#fff; }
.pv-rostrum{ fill:none; stroke:var(--plan-ink); stroke-width:2; cursor:move; pointer-events:all; }
.pv-rostrum-spot{ fill-opacity:0.28; stroke:rgba(226,232,240,0.6); stroke-width:1; pointer-events:none; }
.pv-rostrum-steps{ fill:rgba(148,163,184,0.25); stroke:var(--plan-ink-2); stroke-width:1.5; pointer-events:none; }
.pv-rostrum-tread{ stroke:var(--plan-ink-2); stroke-width:1; pointer-events:none; }
.pv-rostrum-labels text{ fill:#fff; text-anchor:middle; font-family:Inter,sans-serif; font-weight:700; paint-order:stroke; stroke:rgba(0,0,0,0.75); stroke-width:3px; pointer-events:none; user-select:none; }
.pv-handle.resize{ fill:#e2e8f0; stroke:#0f172a; stroke-width:2; cursor:nwse-resize; }
.pv-stalk{ stroke:#f59e0b; stroke-width:1.5; stroke-dasharray:4 3; pointer-events:none; }
.pv-handle.move-grip{ fill:#f59e0b; stroke:#fff; stroke-width:3; cursor:move; }
.pv-handle.startline{ fill:#fff; stroke:#0f172a; stroke-width:2.5; cursor:grab; }
.pv-handle.rotate{ fill:#f59e0b; stroke:#fff; cursor:alias; }
.pv-end{ fill:rgba(239,68,68,0.85); stroke:#fff; stroke-width:2; cursor:pointer; }
.pv-end.selected{ fill:#facc15; stroke:#fff; stroke-width:3; }
.plan-view .pv-hits path{ cursor:move; }
.pv-joint{ stroke:#0ea5e9; stroke-width:2.5; pointer-events:none; }
.pv-obstacle-labels text{ fill:#fff; text-anchor:middle; font-family:Inter,sans-serif; font-weight:600; paint-order:stroke; stroke:rgba(0,0,0,0.75); stroke-width:3px; pointer-events:none; user-select:none; }
.pv-panel-labels text{ fill:#bae6fd; text-anchor:middle; font-family:Inter,sans-serif; font-weight:600; paint-order:stroke; stroke:rgba(0,0,0,0.7); stroke-width:3px; pointer-events:none; user-select:none; }
.pv-handle{ fill:#fff; stroke:var(--accent); stroke-width:3; cursor:grab; }
.pv-handle.radius{ fill:var(--accent); stroke:#fff; }
.pv-handle:active{ cursor:grabbing; }

/* Side panels */


dl.readout{

    display:grid;

    grid-template-columns:auto 1fr;

    gap:4px 16px;

    margin:0;

}

dl.readout dt{ color:var(--text-muted); }
dl.readout dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; }

.swatch{

    display:inline-block;

    width:10px;

    height:10px;

    margin-right:6px;

    border-radius:50%;

    border:1px solid var(--swatch-border);

}

.ok{ color:var(--ok); }
.problem{ color:var(--danger); }

table.piece-table{

    width:100%;

    border-collapse:collapse;

    font-size:0.82rem;

}

table.piece-table th, table.piece-table td{

    padding:3px;

    text-align:left;

    border-bottom:1px solid var(--border);

}

table.piece-table th{ color:var(--text-muted); font-weight:500; }
table.piece-table td.num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.piece-table input{ width:50px; }
table.piece-table input.bank-input{ width:40px; }
table.piece-table tbody tr{ cursor:pointer; }
table.piece-table tr.selected{ background:rgba(99,102,241,0.18); }
table.piece-table tr.tight td.num{ color:var(--danger); }

.settings{

    display:grid;

    gap:8px;

}

label.setting{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

}

label.setting input{ width:90px; }

.plan-view .pv-preview-board{ fill:none; stroke:var(--accent); stroke-opacity:0.18; vector-effect:none; pointer-events:none; }
.pv-preview{ fill:none; stroke:var(--accent); stroke-width:3; stroke-dasharray:10 6; pointer-events:none; }

/* Piece toolbar and auto-close */

.piece-toolbar{

    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-bottom:10px;

}

.piece-toolbar button, .close-panel button{ padding:5px 10px; font-size:0.85rem; }
button:disabled{ opacity:0.4; cursor:default; }

/* Room sizes are typed, not stepped: no spinners, so 5-figure mm values fit. */
table.room-table input[type="number"]{ width:60px; box-sizing:border-box; appearance:textfield; -moz-appearance:textfield; }
table.room-table input[type="number"]::-webkit-inner-spin-button, table.room-table input[type="number"]::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
table.room-table select{ width:62px; box-sizing:border-box; }
table.room-table tbody tr{ cursor:pointer; }
table.room-table tr.selected{ background:rgba(99,102,241,0.18); }
table.room-table input[type="text"]{ width:80px; }
table.room-table .icon-btn{ padding:2px 7px; }
.value-cell{ display:flex; align-items:center; gap:4px; }
.value-cell input[type="checkbox"]{ width:auto; margin:0; accent-color:var(--accent); }

.close-panel h3{ font-size:0.95rem; margin:14px 0 6px; }
.close-panel h3:first-child{ margin-top:0; }
.close-panel p{ margin:6px 0; }

.close-options{ list-style:none; padding:0; margin:8px 0 0; display:grid; gap:6px; }

.close-options li{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    padding:6px 8px;

    border:1px solid var(--border);

    border-radius:6px;

}

.close-options li.previewing{ border-color:var(--accent); background:rgba(99,102,241,0.12); }
.close-options .opt-detail{ color:var(--text-muted); font-size:0.85rem; }

/* Layout generator */

.gen-results{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.gen-card{ display:grid; gap:4px; padding:8px; border:1px solid var(--border); border-radius:6px; align-content:start; }
.gen-card button{ margin-top:4px; padding:5px 8px; font-size:0.85rem; }
.gen-thumb{ width:100%; height:auto; aspect-ratio:8 / 5; background:var(--bg-inset); border-radius:4px; }

/* Checks */

.check-list{ list-style:none; padding:0; margin:0 0 8px; display:grid; gap:4px; }
.check-list li{ cursor:pointer; padding:3px 6px; border-radius:4px; font-size:0.82rem; line-height:1.4; }
.check-list li:hover{ background:var(--hover-bg); }
.check-list li.problem::before{ content:"✕ "; }
.check-list li.check-note{ color:var(--text-muted); }
.check-list li.check-note::before{ content:"• "; }

.plan-status{

    position:absolute;

    left:50%;

    bottom:74px;

    transform:translateX(-50%);

    max-width:min(640px, calc(100% - 40px));

    padding:8px 14px;

    background:var(--panel-bg);

    border:1px solid var(--accent);

    border-radius:8px;

    font-size:0.9rem;

    z-index:4;

    pointer-events:none;

}

/* A panel dragged out of the Tools box floats over the plan where it's dropped. Closed, it's just
   its title; open, the box's width. */

details.panel.floating{

    position:absolute;

    box-sizing:border-box;

    width:max-content;

    max-width:calc(100% - 20px);

    overflow:auto;

    z-index:5;

}

details.panel.floating[open]{ width:380px; }
details.panel.floating > summary{ cursor:move; touch-action:none; }

.colour-field{ display:flex; align-items:center; gap:6px; }
.colour-picker{ width:52px; height:32px; padding:2px; cursor:pointer; }
.colour-field .icon-btn{ padding:4px 8px; font-size:0.8rem; }
label.setting input[type="text"]{ width:200px; max-width:55vw; }

/* Rulers along the top and left of the plan (R). */
.pv-rulers text{ fill:var(--text); font-family:Inter,sans-serif; user-select:none; pointer-events:none; }
.pv-ruler-band{ fill:var(--ruler-bg); stroke:var(--ruler-line); stroke-width:1; pointer-events:none; }
.pv-ruler-corner{ fill:var(--ruler-corner); stroke:var(--ruler-line); stroke-width:1; }
.pv-ruler-tick{ stroke:var(--ruler-tick); stroke-width:1; pointer-events:none; }
.pv-rulers .pv-ruler-unit{ fill:var(--text-muted); font-weight:600; }
.pv-rulers .pv-ruler-close{ fill:var(--text); cursor:pointer; pointer-events:all; }
.pv-rulers .pv-ruler-close:hover{ fill:var(--danger); }
.pv-ruler-cursor{ stroke:#f59e0b; stroke-width:2; pointer-events:none; }
.pv-rulers .pv-ruler-readout{ fill:#fde68a; font-weight:600; paint-order:stroke; stroke:rgba(0,0,0,0.8); stroke-width:3px; }
/* With the rulers on, the toolbar and track tabs move clear of them. */
.designer-plan.rulers-on .plan-toolbar{ top:36px; left:62px; }

/* Grouped shapes (esses, organic corners) in the piece list and on the plan. */
table.piece-table tr.group-row td{ background:rgba(99,102,241,0.08); padding:4px 3px; }
table.piece-table tr.group-row.selected td{ background:rgba(99,102,241,0.2); }
.group-head{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; cursor:pointer; }
.group-head .icon-btn{ padding:1px 6px; font-size:0.78rem; }
.group-field{ display:flex; align-items:center; gap:3px; font-size:0.8rem; color:var(--text-muted); }
.group-field input{ width:52px; }
.group-field select{ max-width:150px; }
table.piece-table tr.member td:nth-child(2){ padding-left:10px; }
table.piece-table tr.member{ background:rgba(99,102,241,0.04); }
table.piece-table tr.custom td:nth-child(2){ color:var(--warn); }
.member-mark .icon-btn{ padding:0 4px; font-size:0.75rem; }
.pv-group-sel{ fill:none; stroke:var(--accent); stroke-width:3; stroke-opacity:0.45; stroke-dasharray:6 4; pointer-events:none; }
.member-mark{ white-space:nowrap; }
.group-head .icon-btn + .icon-btn{ margin-left:2px; }

/* Panel titles are handles, not text: no selecting them, and none of the page while one is dragged. */
details.panel > summary{ user-select:none; -webkit-user-select:none; }
body.dragging-panel, body.dragging-panel *{ user-select:none !important; -webkit-user-select:none !important; cursor:grabbing !important; }

/* Other tracks in the room: dimmed, clickable to work on them. */
.pv-other-track{ opacity:0.45; }
.pv-other-track:hover{ opacity:0.65; }
.plan-view .pv-other-hit{ fill:none; stroke:transparent; pointer-events:stroke; cursor:pointer; vector-effect:none; }
.pv-rostrum-labels .pv-other-name{ fill:#cbd5e1; font-weight:700; text-anchor:middle; }
.pv-controller{ fill-opacity:0.9; stroke:#0f172a; stroke-width:1; pointer-events:none; }
.pv-rostrum-group.other .pv-rostrum{ cursor:default; pointer-events:none; }

/* The tracks in the room as tabs along the bottom of the plan, like a spreadsheet's worksheets:
   the one being worked on is highlighted. */
.track-bar{ position:absolute; left:1px; bottom:1px; display:flex; gap:2px; max-width:calc(100% - 2px); overflow-x:auto; scrollbar-width:none; z-index:2; }
.designer-plan.rulers-on .track-bar{ left:52px; }
.track-chip{ flex-shrink:0; max-width:160px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:2px 10px; font-size:0.75rem; border-radius:0 0 6px 6px; border-top-color:transparent; background:var(--panel-bg); color:var(--text-muted); }
.track-chip.active{ background:var(--bg-elevated); border-color:var(--accent); border-top-color:transparent; color:var(--text); font-weight:600; }
table.tracks-table input[type="text"]{ width:120px; }
table.tracks-table td.num{ white-space:normal; }
#tracks > .settings > select{ justify-self:start; }
.pv-finish-white{ stroke:#fff; stroke-width:5; pointer-events:none; }
.pv-finish-black{ stroke:#111; stroke-width:5; stroke-dasharray:5 5; pointer-events:none; }

/* Phones and narrow windows: the header on one small line (logo, title, links), slimmer margins,
   and tools that fill the width. */
@media (max-width:640px){
    body.designer-page > header{ position:static; display:flex; align-items:center; flex-wrap:wrap; gap:4px 10px; padding:4px 8px; }
    body.designer-page .brand{ gap:6px; }
    body.designer-page .brand img{ height:20px; }
    body.designer-page .brand h1{ font-size:0.85rem; white-space:nowrap; }
    body.designer-page .brand .powered-by{ font-size:0.6rem; white-space:nowrap; }
    body.designer-page .view-nav{ margin-top:0; gap:4px; }
    body.designer-page .view-tab{ padding:2px 8px; font-size:0.72rem; }
    main.designer{ padding:4px; }
    .plan-toolbar{ top:6px; left:6px; }
    .plan-toolbar button, .panels-btn{ padding:4px 8px; font-size:0.8rem; }
    .panel-box.open:has(.designer-side > details.panel[open]) .designer-side,
    details.panel.floating[open]{ width:calc(100vw - 24px); }
    .details-popup{ width:calc(100% - 20px); }
}

/* The Tracks tool's designs to start a track from. */
.design-list li{ padding:4px 6px; }
.design-list .design-actions{ display:flex; gap:4px; flex-shrink:0; }

/* The action bar along the bottom of the plan: what can be done to what's selected, by touch
   as well as by mouse (designer.js renderActionBar). Scrolls sideways when it doesn't fit. */
.action-bar{ position:absolute; left:50%; transform:translateX(-50%); bottom:28px; z-index:3; display:flex; align-items:center; gap:3px; padding:3px; max-width:calc(100% - 16px); box-sizing:border-box; overflow-x:auto; scrollbar-width:none; background:var(--panel-bg); backdrop-filter:blur(4px); border:1px solid var(--border); border-radius:10px; box-shadow:var(--panel-shadow); }
.action-bar::-webkit-scrollbar{ display:none; }
.action-bar:empty{ display:none; }
.ab-btn{ display:inline-flex; align-items:center; gap:4px; flex-shrink:0; min-height:30px; padding:3px 9px; font-size:0.8rem; white-space:nowrap; }
.ab-icon{ font-size:0.95rem; line-height:1; }
.ab-note{ flex-shrink:0; padding:0 4px; font-size:0.75rem; color:var(--text-muted); white-space:nowrap; }
.ab-short{ display:none; }
@media (max-width:640px){
    .action-bar{ bottom:24px; gap:2px; }
    .ab-btn{ min-height:34px; padding:3px 7px; gap:2px; }
    .ab-long{ display:none; }
    .ab-short{ display:inline; }
}

/* The compass rose (designer.js renderCompass): N points to north on the plan. Click: the Room tool. */
.compass{ position:absolute; top:46px; left:10px; width:54px; height:54px; z-index:3; cursor:grab; touch-action:none; user-select:none; }
.compass:active{ cursor:grabbing; }
.compass svg{ width:100%; height:100%; display:block; }
.compass-rose{ transform-origin:0 0; transition:transform 0.2s; }
.compass-face{ fill:var(--panel-bg); stroke:var(--border); stroke-width:2; }
.compass-north{ fill:#ef4444; }
.compass-south{ fill:var(--text-muted); }
.compass text{ fill:var(--text); font:700 16px Inter,sans-serif; text-anchor:middle; }
.designer-plan.rulers-on .compass{ top:72px; left:62px; }
.pv-compass-wall{ stroke:#ef4444; stroke-width:7; stroke-linecap:round; pointer-events:none; }
.compass-wall{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }