/* Workspace presentation. Existing control IDs and server pricing are preserved. */
.designer-page-header { margin-bottom: 1.25rem; }
.designer-page-header h1 { font-size: clamp(1.5rem, 2.5vw, 2rem); margin: 0; }
.designer-page-header p { margin: .5rem 0 0; color: var(--color-muted); }
.designer-section-nav { display: flex; flex-wrap: wrap; gap: .5rem; padding: .75rem 0; margin-bottom: 1.25rem; border-block: 1px solid var(--color-border); }
.designer-section-nav a { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; padding: .5rem .85rem; color: var(--color-text); text-decoration: none; font-size: .875rem; border-radius: .5rem; }
.designer-section-nav a:hover, .designer-section-nav a:focus-visible { background: var(--color-primary-light); }
.designer-section-nav .designer-review-link { margin-left: auto; color: var(--color-primary-dark); background: var(--color-primary-light); font-weight: 600; }
.designer-layout [id] { scroll-margin-top: 7rem; }

.designer-layout {
    display:grid;
    grid-template-columns:minmax(18rem,22rem) minmax(0,1fr);
    gap:1rem 1.5rem;
    align-items:start
}

.designer-controls {
    grid-column:1;
    grid-row:1;
    display:grid;
    gap:1rem;
    min-width:0
}

.designer-summary {
    grid-column:1;
    grid-row:2;
    min-width:0
}

.designer-canvas {
    grid-column:2;
    grid-row:1/3;
    min-width:0;
    position:sticky;
    top:6rem
}

/* The availability answer heads this column. Its own alert carries the
   colour and the padding; all this adds is the gap to the tabs below. */
.designer-availability {
    margin-bottom:1rem
}

.designer-availability>.alert:last-child {
    margin-bottom:0
}

.designer-section {
    background:var(--color-surface);
    border:1px solid var(--color-border-secondary);
    border-radius:.75rem;
    padding:1rem
}

.designer-section-heading {
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:.75rem;
    margin-bottom:.85rem
}

.designer-section-heading h2 {
    font-size:.9rem;
    font-weight:600;
    margin:0
}

.designer-section-heading>span {
    font-size:.7rem;
    color:var(--color-muted)
}

.designer-material-gallery {
    border-radius:.5rem;
    overflow:hidden
}

.designer-material-gallery :is(img,.card-img,.gallery-placeholder) {
    width:100%;
    height:8rem;
    object-fit:cover;
    border:0;
    border-radius:0;
    aspect-ratio:auto
}

/* One empty state, whether the image was never there or its file has gone:
   image_fallback.js leaves a .gallery-placeholder behind, so the panel's own
   no-image box is the same box. */
.designer-material-gallery .gallery-placeholder {
    background:#eceee6;
    gap:.4rem
}

.designer-material-gallery .gallery-placeholder>.bi {
    font-size:1.5rem
}

/* Inherits the gap the colour code used to open under the photograph. */
.designer-material-spec {
    margin-top:.75rem
}

/* Colour and "Change variant" share a line; the select takes what is left
   after the button, which is sized by its own label. */
.designer-material-actions {
    display:flex;
    align-items:center;
    gap:.5rem;
    flex-wrap:wrap;
    margin-top:.75rem
}

.designer-material-actions .form-select {
    flex:1 1 7rem;
    width:auto;
    min-width:0
}

.designer-material-actions .btn {
    flex:0 0 auto;
    white-space:nowrap
}

/* Two faces of one board (owner, 2026-10-19): a rectangular swatch per face
   with its name beneath, the chosen one outlined (owner, 2026-10-20: "text
   under the image, images rectangular"). The photograph above and the
   material preview follow the choice. */
.designer-side-picker {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.5rem;
    margin-top:.75rem
}

.designer-side-option {
    display:flex;
    flex-direction:column;
    gap:.35rem;
    min-width:0;
    padding:.35rem;
    border:1px solid #d9dbd3;
    border-radius:.5rem;
    background:#fff;
    color:inherit;
    font:inherit;
    font-size:.8rem;
    line-height:1.25;
    text-align:center;
    cursor:pointer
}

.designer-side-option:hover,.designer-side-option:focus-visible {
    border-color:var(--color-primary-dark)
}

.designer-side-option.is-active {
    border-color:var(--color-primary-dark);
    box-shadow:0 0 0 2px var(--color-primary-light)
}

/* The swatch, the no-picture box, and the box image_fallback.js leaves when
   the file has gone: one rectangle, the width of the tile. */
.designer-side-option :is(img,.designer-side-blank,.gallery-placeholder) {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:4/3;
    margin:0;
    border-radius:.375rem;
    object-fit:cover;
    background:#eceee6
}

.designer-side-option .gallery-placeholder {
    display:flex;
    align-items:center;
    justify-content:center
}

.designer-side-option .gallery-placeholder>span {
    display:none
}

.designer-side-label {
    display:block;
    min-width:0;
    overflow-wrap:anywhere
}

/* Why a colour change was refused, where the choice was made. */
.designer-material-note {
    margin-top:.5rem;
    padding:.5rem .6rem;
    border-radius:.375rem;
    border:1px solid #e0c08a;
    background:#fdf6e7;
    color:#6b4a12;
    font-size:.75rem;
    line-height:1.45
}

.designer-controls .shape-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    /* Square tiles grow with their column, and below 768px the controls take
       the full page width -- without this the palette would be four buttons
       the size of a hand. */
    max-width:24rem;
    margin:0;
    padding:0;
    gap:.5rem
}

.designer-controls .shape-grid {
    list-style:none
}

/* The grid places the cells; the cell only has to stop being wider than its
   column. It carried Bootstrap's col-2 col-md-4 until 2026-10-08, which the
   grid overrode and this file then had to undo. */
.designer-controls .shape-grid-cell {
    min-width:0
}

.designer-controls .shape-grid>.alert {
    grid-column:1/-1;
    margin:0
}

/* One size for every tile: the icon is the whole button, so nothing inside
   can push one box taller than its neighbours. */
.designer-controls :is(.shape-btn,.cutOut-btn) {
    aspect-ratio:1;
    height:auto;
    display:grid;
    place-items:center;
    padding:.5rem;
    border-radius:.5rem;
    border:1px solid var(--color-border);
    background:#fafbf8;
    color:#536052
}

.designer-controls :is(.shape-btn,.cutOut-btn) svg {
    width:70%;
    height:70%;
    max-width:40px;
    max-height:40px
}

.designer-controls :is(.shape-btn,.cutOut-btn):hover {
    transform:none;
    background:var(--color-primary-light)
}

.designer-controls :is(.shape-btn,.cutOut-btn).active {
    background:var(--color-primary-light);
    color:var(--color-primary-dark);
    border-color:var(--color-primary-dark)
}

.designer-controls :is(.shape-btn,.cutOut-btn):focus-visible {
    outline:2px solid var(--color-primary-dark);
    outline-offset:2px
}

/* The designer's own field list. These were Bootstrap's .list-group and
   .list-group-item until 2026-10-08, and almost every declaration below had
   to carry !important to undo one of theirs -- a padding, a border, a white
   background, a display -- for a list that ends up looking nothing like a
   Bootstrap list group. Dropping the two classes dropped fourteen of them.
   display:block is the one thing .list-group-item gave that is wanted: an
   <li> that is not display:list-item has no marker. */
.designer-controls .designer-field-list {
    display:flex;
    flex-direction:column;
    list-style:none;
    margin:0;
    padding:0
}

.designer-controls .designer-field-row {
    display:block
}

.designer-controls #dimension-controls .designer-field-row {
    display:grid;
    grid-template-columns:.9rem minmax(4.5rem,5.25rem) 1.4rem minmax(0,1fr);
    gap:.35rem;
    padding:.75rem 0;
    border-bottom:1px solid var(--color-border-secondary);
    align-items:center
}

.designer-controls #dimension-controls .designer-field-row:last-child {
    border-bottom:0;
    padding-bottom:0
}

.designer-controls #dimension-controls .form-label {
    width:auto;
    margin:0;
    font-size:.8rem
}

.designer-controls #dimension-controls .dimension-input {
    width:100%;
    min-width:0;
    margin:0;
    font-size:.875rem
}

.designer-controls #dimension-controls .dropdown {
    min-width:0
}

.designer-controls #dimension-controls .dropdown-toggle {
    display:block;
    width:100%;
    padding:.4rem .6rem;
    font-size:.8rem;
    text-align:left;
    background:#f2f3ed;
    border:1px solid var(--color-border-secondary);
    border-radius:.375rem;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.designer-controls #dimension-controls .dropdown-menu {
    min-width:100%;
    max-width:min(24rem,85vw)
}

.designer-controls #dimension-controls .dropdown-item {
    display:flex;
    gap:.5rem;
    align-items:center;
    white-space:normal;
    font-size:.85rem
}

.designer-controls #dimension-controls .dropdown-item svg {
    flex:0 0 44px
}

.designer-controls #cutout-props-fields>.designer-field-row {
    padding:.5rem 0
}

.designer-controls #cutout-props-fields>.designer-field-row:has(>input) {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(5rem,6rem) 1.5rem;
    gap:.4rem;
    align-items:center
}

.designer-controls #cutout-props-fields .form-label {
    width:auto;
    margin:0;
    font-size:.8rem
}

.designer-controls #cutout-props-fields input[type=number] {
    width:100%;
    margin:0;
    font-size:.875rem;
    min-width:0
}

.designer-controls #cutout-props-fields .form-check-label {
    font-size:.8rem
}

.designer-controls .designer-cutout-heading {
    font-size:.85rem;
    font-weight:600;
    margin:0 0 .65rem
}

.designer-controls :is(#cutout-properties,.designer-outline-panel) hr {
    margin:1rem 0
}

.designer-controls :is(#cutout-props-fields,.designer-outline-panel) input[type=number] {
    height:2.5rem;
    font-variant-numeric:tabular-nums;
    text-align:right;
    padding-right:.65rem
}

.designer-controls #cutout-props-fields .form-check {
    display:flex;
    align-items:flex-start;
    gap:.5rem;
    padding-left:0
}

.designer-controls #cutout-props-fields .form-check-input {
    flex:0 0 auto;
    margin:.15rem 0 0
}

.designer-controls #cutout-props-fields .form-check-label {
    line-height:1.45;
    white-space:normal
}


.designer-controls .designer-price {
    border:1px solid var(--color-border-secondary);
    border-radius:.75rem;
    padding:.85rem 1rem;
    background:var(--color-surface);
    margin-bottom:0
}

.designer-controls .designer-price-dimensions {
    font-size:.8rem;
    color:var(--color-muted);
    padding-bottom:.6rem;
    margin-bottom:.6rem;
    border-bottom:1px solid var(--color-border-secondary)
}

.designer-controls .designer-price-modes {
    border:0;
    padding:0;
    margin:0;
    min-width:0
}

.designer-controls .designer-price-row {
    display:flex;
    align-items:baseline;
    gap:.5rem;
    font-size:.8rem;
    padding:.4rem;
    border-radius:.375rem;
    cursor:pointer
}

.designer-controls .designer-leftover-choice {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    font-size: .85rem;
    cursor: pointer;
}

.designer-controls .designer-price-row+.designer-price-row {
    margin-top:.2rem
}

.designer-controls .designer-price-row:is(:hover,.is-selected) {
    background:var(--color-primary-light)
}

.designer-controls .designer-price-row input {
    margin:0;
    flex:0 0 auto;
    accent-color:var(--color-primary-dark)
}

.designer-controls .designer-price-name {
    flex:1;
    min-width:0
}

.designer-controls .designer-price-row strong {
    white-space:nowrap;
    margin-left:auto
}

.designer-controls .designer-price-row:focus-within {
    outline:2px solid var(--color-primary-dark);
    outline-offset:1px
}

.designer-summary h2 {
    font-size:1rem;
    margin-bottom:.75rem
}

.designer-summary .card-body {
    display:grid;
    gap:1rem
}

.designer-summary #pricing-breakdown {
    overflow-wrap:anywhere
}

.designer-purchase-actions {
    display:grid;
    gap:1rem
}

.designer-purchase-actions #inputQuantity {
    width:5rem
}

.designer-view-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:.35rem;
    margin-bottom:1rem
}

.designer-view-tabs button {
    border:1px solid transparent;
    border-radius:.5rem;
    padding:.65rem .9rem;
    background:transparent;
    color:var(--color-muted);
    font-size:.85rem
}

.designer-view-tabs button[aria-selected=true] {
    background:var(--color-surface);
    border-color:var(--color-border);
    color:var(--color-text);
    box-shadow:var(--shadow-sm)
}

.designer-view-tabs button:hover {
    background:#eeefe8
}

/* No .designer-view[hidden] rule: nothing here sets display on a view, so
   the browser's own [hidden] -- and Bootstrap Reboot's !important copy of
   it -- are already the only word on the subject. */

.designer-editor-view,.designer-material-view {
    background:#fafbf8;
    border:1px solid var(--color-border);
    border-radius:.75rem
}

.designer-view-toolbar {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center;
    gap:.75rem;
    padding:.85rem 1rem;
    background:var(--color-surface);
    border-bottom:1px solid var(--color-border-secondary);
    border-radius:.75rem .75rem 0 0
}

.designer-view-toolbar h2 {
    font-size:.875rem;
    font-weight:500;
    margin:0
}

/* Toggles at one end, actions at the other. The two groups were adjacent
   with a rule between them; the ends of the line say the same thing without
   drawing anything (owner, 2026-10-08). */
.designer-view-tools {
    display:flex;
    flex:1;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:.5rem .75rem
}

/* One colour for all four (owner, 2026-10-08) -- the sage the toggles used
   to wear only while their overlay was on. That tint was the difference
   between the two toggles and the two actions, so a row of four controls
   arrived as two green and two plain, reading as two kinds of button rather
   than one kind in two states. All four wear it now, and the state is the
   button going quiet when its overlay is OFF: the rarer half, and the one
   worth marking. */
.designer-view-tools .btn {
    font-size:.75rem;
    white-space:nowrap;
    background:#edf0e8;
    border-color:#a3b09d;
    color:#3d513f
}

.designer-view-tools .btn:hover {
    background:#e3e8dc;
    border-color:#8c9c86;
    color:#2f3f31
}

.designer-view-tools .btn[aria-pressed=false] {
    opacity:.5
}

.designer-view-tools .btn[aria-pressed=false]:hover,
.designer-view-tools .btn[aria-pressed=false]:focus-visible {
    opacity:.75
}

.designer-tool-group {
    display:flex;
    gap:.5rem
}

/* Bootstrap fills an outline button on focus, which turns one of four
   identical buttons dark the moment it is clicked. The designer marks focus
   with a ring everywhere else; it does so here too. */
.designer-view-tools .btn:focus-visible {
    background:#edf0e8;
    border-color:#a3b09d;
    color:#3d513f;
    box-shadow:none;
    outline:2px solid var(--color-primary-dark);
    outline-offset:2px
}

.designer-drawing-field {
    display:flex;
    align-items:center;
    min-height:28rem;
    background-color:#fff;
    /* A line grid rather than dots (owner, 2026-10-13): fine lines every
       20px in the drawing's own grey, a firmer one every 100px. */
    background-image:
        linear-gradient(#c9d2c3 1px,transparent 1px),
        linear-gradient(90deg,#c9d2c3 1px,transparent 1px),
        linear-gradient(#e6ebe2 1px,transparent 1px),
        linear-gradient(90deg,#e6ebe2 1px,transparent 1px);
    background-size:100px 100px,100px 100px,20px 20px,20px 20px
}

.designer-drawing-field.no-grid {
    background-image:none
}

.designer-canvas #drawing-container {
    border:0;
    border-radius:0;
    background:transparent
}

.designer-canvas .designer-canvas-metrics {
    display:flex;
    flex-wrap:wrap;
    gap:.4rem .75rem;
    min-width:0;
    text-align:left;
    font-size:.8rem;
    font-weight:400;
    color:var(--color-muted)
}

/* Three measurements on one line need telling apart; whitespace alone did
   not, now that the labels are short enough to sit close together. */
.designer-canvas .designer-canvas-metrics>span+span::before {
    content:'\00b7';
    margin-right:.75rem;
    /* The border colour was invisible against the surface it sits on. */
    opacity:.55
}

/* The four controls, nothing else: the measurements went up to the toolbar
   so neither has to share a line with the other. */
.designer-canvas .canvas-footer {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.5rem;
    background:var(--color-surface);
    padding:.65rem 1rem;
    box-shadow:none;
    border-radius:0 0 .75rem .75rem;
    border-top:1px solid var(--color-border-secondary)
}

#designer-material-preview {
    display:block;
    width:100%;
    height:28rem
}

.designer-view-caption {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    padding:1rem;
    background:var(--color-surface);
    border-top:1px solid var(--color-border-secondary);
    border-radius:0 0 .75rem .75rem
}

.designer-sheet-actions {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:.5rem;
    margin-bottom:.75rem
}

.designer-production-sheet {
    background:white;
    color:#29332c;
    border:1px solid #dce0d9;
    border-radius:.25rem;
    padding:1.5rem
}

.designer-sheet-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:1rem;
    padding-bottom:1rem;
    border-bottom:2px solid #364238
}

.designer-sheet-brand {
    display:flex;
    align-items:center;
    gap:.6rem;
    font-size:1.1rem;
    font-weight:600;
    letter-spacing:.1em
}

.designer-sheet-header h2 {
    font-size:1rem;
    margin:0
}

.designer-sheet-meta {
    display:flex;
    flex-wrap:wrap;
    gap:1rem 2rem;
    padding:1rem 0;
    margin:0;
    border-bottom:1px solid #dce0d9
}

.designer-sheet-meta dt {
    font-size:.7rem;
    font-weight:400;
    color:#626b66
}

.designer-sheet-meta dd {
    font-size:.8rem;
    margin:.25rem 0 0
}

.designer-sheet-table {
    font-size:.8rem;
    color:#29332c
}

.designer-sheet-table th {
    font-weight:500
}

.designer-production-sheet .designer-sheet-footer {
    background:transparent;
    box-shadow:none;
    border-radius:0;
    padding:1rem 0 0;
    margin-top:1rem;
    border-top:1px solid #dce0d9;
    font-size:.75rem;
    color:#626b66
}

@media(max-width:1199.98px) {
    .designer-layout {
        grid-template-columns:18rem minmax(0,1fr);
        gap:1rem
    }
    .designer-view-tabs button {
        padding:.6rem .65rem;
        font-size:.8rem
    }
}

@media(max-width:767.98px) {
    .designer-layout {
        grid-template-columns:minmax(0,1fr)
    }
    .designer-canvas {
        grid-column:1;
        grid-row:1;
        position:static
    }
    .designer-controls {
        grid-column:1;
        grid-row:2
    }
    .designer-summary {
        grid-column:1;
        grid-row:3
    }
    .designer-drawing-field {
        min-height:20rem
    }
    #designer-material-preview {
        height:20rem
    }
    .designer-production-sheet {
        padding:.85rem
    }
    .designer-view-tabs button {
        flex:1
    }
}

@media(pointer:coarse) {
    .designer-view-tabs button,.designer-controls .dropdown-toggle {
        min-height:44px
    }
    .designer-layout :is(button, select, input:not([type=radio]):not([type=checkbox]):not([type=hidden])) { min-height: 44px; }
    .designer-price-row { min-height: 48px; }
    .designer-outline-style { min-width: 44px; min-height: 44px; }
}

/* The "+ Add piece" controls, shown under the shape picker for Whole and
   Half only (docs/planning/PIECES_IN_A_BOARD.md phase 3). Spaced off the
   picker above it so the two do not read as one list of shapes. */
.designer-controls .designer-board-pieces {
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
    margin-top:.75rem
}

.designer-controls .designer-board-pieces-hint,
.designer-controls .designer-board-pieces-message {
    flex-basis:100%;
    margin:0;
    font-size:.8125rem;
    color:var(--color-text-muted,#6c757d)
}

/* Empty until something goes wrong, so it must not hold a blank line open. */
.designer-controls .designer-board-pieces-message:empty {
    display:none
}

.designer-controls .designer-board-pieces-message {
    color:var(--color-primary-dark,#945516)
}

/* The standing explanation of why a piece cannot be ovaled. Reads as a
   fact about the drawing, not an error, so it takes the muted colour
   rather than the accent the transient message uses. */
.designer-controls .designer-board-pieces-note {
    flex-basis:100%;
    margin:0;
    font-size:.8125rem;
    color:var(--color-text-muted,#6c757d)
}

.designer-controls .designer-board-pieces-note:empty {
    display:none
}

/* Notches and corner cuts (T-195): the numbered list of cuts and holes. */
.designer-outline-edits { list-style: none; margin: 0; padding: 0; }
.designer-outline-edits li { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; }
.designer-outline-edits .designer-outline-marker { flex: none; display: inline-flex; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: #c0392b; color: #fff; justify-content: center; align-items: center; font-size: .75rem; font-weight: 600; }
.designer-outline-edits .designer-outline-text { flex: 1 1 auto; font-size: .85rem; }
.designer-outline-styles { margin: .4rem 0 0; }
.designer-outline-hint { min-height: 1.2rem; margin: 0 0 .35rem; }
.designer-outline-edits li.is-editing { background: #eef3ea; border-radius: .25rem; outline: 1px solid #c9d2c3; }
.designer-outline-edits li { cursor: pointer; }
/* A row is a button for the keyboard too: show where the focus is. */
.designer-outline-edits li[role="button"]:focus-visible { outline: 2px solid #c0392b; outline-offset: 2px; border-radius: .25rem; }

/* Cuts & holes (2026-10-15): the selected cut's panel uses the hole panel's
   one-line rows -- label, box, unit -- and a select takes the box and unit
   columns together. */
.designer-controls .designer-outline-panel .designer-field-row {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(5rem,6rem) 1.5rem;
    gap:.4rem;
    align-items:center;
    padding:.5rem 0
}
.designer-controls .designer-outline-panel .designer-field-row.has-select {
    grid-template-columns:minmax(0,1fr) minmax(0,7.9rem)
}
.designer-controls .designer-outline-panel .designer-field-row[hidden] { display:none }
.designer-controls .designer-outline-panel .form-label { width:auto; margin:0; font-size:.8rem }
.designer-controls .designer-outline-panel input[type=number] { width:100%; margin:0; font-size:.875rem; min-width:0 }
.designer-controls .designer-outline-panel select { font-size:.8rem }
.designer-controls .designer-outline-styles { display:flex; gap:.3rem; margin:0; justify-content:flex-end }
.designer-controls .designer-outline-style {
    width:2.2rem; height:2.2rem; display:grid; place-items:center; cursor:pointer;
    border:1px solid var(--color-border); border-radius:.4rem; background:#fafbf8; color:#536052
}
.designer-controls .designer-outline-style > [data-outline-style-icon] { display:grid; place-items:center; width:100%; height:100% }
.designer-controls .designer-outline-style svg { display:block; width:80%; height:80% }
.designer-controls .designer-outline-style:has(input:checked) {
    background:var(--color-primary-light); color:var(--color-primary-dark); border-color:var(--color-primary-dark)
}
.designer-controls .designer-outline-style:has(input:focus-visible) { outline:2px solid var(--color-primary-dark); outline-offset:1px }
.designer-controls .designer-outline-style[hidden] { display:none }
.designer-controls .designer-outline-hint { margin:.5rem 0 0; color:var(--color-primary-dark) }
.designer-controls .designer-outline-edits { margin-top:.5rem }
.designer-controls .designer-outline-edits:empty { display:none }
.designer-controls .designer-outline-panel .designer-cutout-heading { display:flex; align-items:center; gap:.4rem }
.designer-controls .designer-outline-panel .designer-outline-marker {
    flex:none; display:inline-flex; width:1.4rem; height:1.4rem; border-radius:50%; background:#c0392b;
    color:#fff; justify-content:center; align-items:center; font-size:.75rem; font-weight:600
}

/* Piece tabs over the Dimensions & Edge rows (2026-10-15): one piece's sides
   at a time on a figure of two or three pieces. */
.designer-controls .designer-piece-tabs { display:flex; gap:.3rem; flex-wrap:wrap; margin:.25rem 0 .5rem }
.designer-controls .designer-piece-tabs[hidden] { display:none }
.designer-controls .designer-piece-tab {
    flex:1 1 0; min-width:4.5rem; padding:.35rem .5rem; font-size:.8rem; cursor:pointer;
    border:1px solid var(--color-border); border-radius:.4rem; background:#fafbf8; color:#536052
}
.designer-controls .designer-piece-tab:hover { border-color:var(--color-primary-dark) }
.designer-controls .designer-piece-tab.active {
    background:var(--color-primary-light); color:var(--color-primary-dark); border-color:var(--color-primary-dark); font-weight:600
}
.designer-controls .designer-piece-tab:focus-visible { outline:2px solid var(--color-primary-dark); outline-offset:1px }
.designer-controls #dimension-controls .designer-field-row[hidden] { display:none }