/* The grille builders' look (bar and perforated): the step bar, title block, 3D stage, 2D layout, cards, swatches,
   places, quick menus and dialogs. Global, not scoped: the same classes are used in GrilleBuilderBase's markup and in each
   builder's own steps, and CSS isolation is per file. Every class starts with bg- ("builder, grille").
   Loaded by GrilleQuote.razor (HeadContent). Bar-only parts are in BarGrilleBuilder.razor.css, perforated-only parts in
   PerfGrilleBuilder.razor.css. */

/* ---- design tokens: the only colours, radii and heading styles the page and builders use ----
   These are the standard look (Bootstrap's theme variables where they exist, Arch Grille navy), with dark-mode values.
   A theme (wwwroot/css/themes/<name>.css, chosen by AGQuote's App.razor as <html data-ag-theme="<name>">) overrides
   them, and Bootstrap's variables, under html[data-ag-theme=<name>]; without one (AGapp) this is what shows.
   Optional, set by themes only: --ag-font (the 3D stage's tooltip and captions; system-ui otherwise).
   Declared again on every [data-bs-theme] element so a dark or light section picks up its own Bootstrap colours. */
:root,
[data-bs-theme] {
    --ag-surface: var(--bs-body-bg, #fff);          /* cards, panels, menus, dialogs, sticky bars */
    --ag-paper: var(--bs-tertiary-bg, #f4f6f9);     /* quiet fills: pictures, notes, table labels, the 3D stage */
    --ag-line: var(--bs-border-color, #c9d1dc);
    --ag-text: var(--bs-body-color, #212529);
    --ag-muted: var(--bs-secondary-color, #5b6472);
    --ag-ink: #0a224d;              /* headings and strong text */
    --ag-navy: #0a224d;             /* strong fills: selected cards and places, table and title block headers */
    --ag-on-navy: #fff;             /* text on those fills */
    --ag-accent: #1785cf;           /* hover borders, focus rings, the current step, links */
    --ag-tint: #e8f2fb;             /* hovered and current rows */
    --ag-danger: #c0392b;
    --ag-d-bar: #3d4554;            /* 2D drawing: bars and crossbars */
    --ag-d-cross: #9fb0c5;
    --ag-radius-sm: 3px;            /* chips, thumbnails */
    --ag-radius: 4px;               /* cards, places, swatches */
    --ag-radius-lg: 6px;            /* panels, menus, the 3D stage */
    --ag-radius-xl: 8px;            /* the welcome card and tour tips */
    --ag-display-weight: 500;       /* the page title, "Quote request received" */
    --ag-display-transform: none;
    --ag-display-tracking: normal;
    --ag-heading-weight: 500;       /* step questions, form sections */
    --ag-label-transform: none;     /* small labels over options and fields, list headers */
    --ag-label-tracking: normal;
}

[data-bs-theme=dark] {
    --ag-navy: #2f6db5;
    --ag-ink: #b8d3f2;
    --ag-accent: #4aa3df;
    --ag-tint: rgba(74, 163, 223, .16);
    --ag-d-bar: #c9d1dc;
    --ag-d-cross: #6b7c93;
}

/* line drawings are black on white: invert them in dark mode (photos and swatches stay as they are) */
[data-bs-theme=dark] .bg-img.drawing img,
[data-bs-theme=dark] .bg-measure img {
    filter: invert(.9) hue-rotate(180deg);
}

[data-bs-theme=dark] .bg-img.drawing,
[data-bs-theme=dark] .bg-measure {
    background: #1a1a1a;
}

/* ---- step rail ---- */
.bg-rail {
    display: flex;
    gap: .15rem;
    margin: 0 0 1.5rem;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    border-bottom: 1px solid var(--ag-line);
}

.bg-rail li {
    flex: 0 0 auto;
}

.bg-rail button {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .6rem .6rem;
    white-space: nowrap;
    color: var(--ag-muted);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
}

.bg-rail button:disabled {
    opacity: .5;
}

.bg-rail button:not(:disabled):hover {
    color: var(--ag-accent);
}

.bg-num {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: .8rem;
    font-weight: 600;
    border: 1.5px solid currentColor;
    border-radius: 50%;
}

.bg-rail .done button {
    color: var(--ag-ink);
}

.bg-rail .done .bg-num {
    color: var(--ag-on-navy);
    background: var(--ag-navy);
    border-color: var(--ag-ink);
}

.bg-rail .current button {
    font-weight: 600;
    color: var(--ag-ink);
    border-bottom-color: var(--ag-accent);
}

/* ---- step body ---- */
.bg-step h2 {
    color: var(--ag-ink);
    font-weight: var(--ag-heading-weight);
}

.bg-sub {
    margin-bottom: 1rem;
    color: var(--ag-muted);
}

.bg-label {
    margin-bottom: .4rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--ag-ink);
    text-transform: var(--ag-label-transform);
    letter-spacing: var(--ag-label-tracking);
}

.bg-note {
    margin-top: .75rem;
    padding: .5rem .75rem;
    font-size: .9rem;
    background: var(--ag-paper);
    border-left: 3px solid var(--ag-accent);
}

.bg-note.warn {
    border-left-color: var(--ag-danger);
}

.bg-narrow {
    max-width: 12rem;
}

.bg-narrow-lg {
    max-width: 24rem;
}

/* ---- option cards ---- */
.bg-grid {
    display: grid;
    gap: .75rem;
}

/* card size follows the screen height: taller screens get bigger drawings, a full step still fits */
.bg-grid-2 { grid-template-columns: repeat(auto-fill, minmax(clamp(170px, 19vh, 340px), 1fr)); }
.bg-grid-3 { grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 17vh, 260px), 1fr)); }
.bg-grid-4 { grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 14vh, 220px), 1fr)); }

.bg-card-wrap {
    position: relative;
}

.bg-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 0 .7rem;
    overflow: hidden;
    text-align: left;
    color: inherit;
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
    transition: border-color .15s;
}

.bg-card:hover {
    border-color: var(--ag-accent);
}

.bg-card:focus-visible,
.bg-place:focus-visible,
.bg-swatch:focus-visible,
.bg-zoom:focus-visible,
.bg-cell:focus-visible {
    outline: 3px solid var(--ag-accent);
    outline-offset: 2px;
}

.bg-card.selected::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 3px solid var(--ag-navy);
    border-radius: var(--ag-radius);
    pointer-events: none;
}

.bg-card.selected::before {
    content: "✓";
    position: absolute;
    top: .5rem;
    left: .5rem;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--ag-on-navy);
    background: var(--ag-navy);
    border-radius: 50%;
}

.bg-img {
    display: block;
    aspect-ratio: 1 / 1;
    background: var(--ag-paper);
    border-bottom: 1px solid var(--ag-line);
}

.bg-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* line drawings: big, on white, never cropped */
.bg-img.drawing {
    aspect-ratio: 16 / 10;
    background: var(--ag-surface);
}

.bg-img.drawing img {
    padding: .4rem;
    object-fit: contain;
}

.bg-img-none {
    display: grid;
    place-items: center;
    height: 100%;
    font-size: .85rem;
    color: var(--ag-muted);
}

.bg-name {
    display: block;
    padding: .55rem .75rem 0;
    font-weight: 600;
    color: var(--ag-ink);
}

.bg-tip {
    display: block;
    padding: .15rem .75rem 0;
    font-size: .85rem;
    line-height: 1.35;
    color: var(--ag-muted);
}

.bg-clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bg-zoom {
    position: absolute;
    top: .4rem;
    right: .4rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    font-size: 1rem;
    line-height: 1;
    color: var(--ag-ink);
    background: color-mix(in srgb, var(--ag-surface) 92%, transparent);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
}

.bg-zoom:hover {
    border-color: var(--ag-accent);
}

.bg-measure {
    display: block;
    width: 100%;
    padding: .25rem;
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
}

/* as specific as Bootstrap's button:not(:disabled) { cursor: pointer } */
.bg-measure:not(:disabled) {
    cursor: zoom-in;
}

.bg-measure img {
    display: block;
    width: 100%;
}

/* ---- location and count buttons ---- */
.bg-places {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.bg-place {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .3rem;
    min-width: 6.5rem;
    padding: .6rem .8rem .5rem;
    font-weight: 600;
    color: var(--ag-ink);
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
}

.bg-place.compact {
    min-width: 0;
    padding: .5rem .9rem;
}

.bg-place:hover {
    border-color: var(--ag-accent);
}

.bg-place.selected {
    color: var(--ag-on-navy);
    background: var(--ag-navy);
    border-color: var(--ag-ink);
}

.bg-place.bad {
    border-color: var(--ag-danger);
}

/* a stock option that isn't made with what's already picked */
.bg-place:disabled {
    opacity: .4;
    cursor: not-allowed;
    border-color: var(--ag-line);
    text-decoration: line-through;
}

/* access doors (the quantity step; bar and perforated) */
.bg-door {
    margin-top: 1rem;
    padding: .75rem .9rem .9rem;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
}

.bg-seg-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.bg-arrow span {
    font-weight: 700;
}

/* ---- swatches ---- */
.bg-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: .4rem;
    max-height: 22rem;
    padding: .25rem;
    overflow-y: auto;
}

.bg-swatch {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .5rem;
    font-size: .85rem;
    text-align: left;
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
}

.bg-swatch.selected {
    border-color: var(--ag-ink);
    box-shadow: 0 0 0 2px var(--ag-navy);
}

.bg-chip {
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: var(--ag-radius-sm);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

.bg-chip.none {
    background: repeating-linear-gradient(45deg, #fff 0 4px, #e3e7ee 4px 8px);
}

/* ---- mount details, doors, sections ---- */
.bg-detail {
    margin-top: 1rem;
    padding: .9rem 1rem;
    background: var(--ag-paper);
    border-left: 3px solid var(--ag-navy);
}

.bg-detail-head,
.bg-door-head {
    margin-bottom: .4rem;
    font-weight: 600;
    color: var(--ag-ink);
}

.bg-adv {
    margin-top: 1rem;
}

.bg-adv summary {
    font-size: .9rem;
    font-weight: 600;
    color: var(--ag-accent);
    cursor: pointer;
}

.bg-adv[open] summary {
    margin-bottom: .6rem;
}

.bg-counter {
    max-width: 10rem;
}

.bg-counter .form-control {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    -moz-appearance: textfield;
}

.bg-counter input::-webkit-inner-spin-button,
.bg-counter input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.bg-desc {
    margin: 0;
    padding: .6rem .75rem;
    font-family: inherit;
    font-size: .85rem;
    white-space: pre-wrap;
    background: var(--ag-paper);
    border-left: 3px solid var(--ag-accent);
}

.bg-nav {
    position: sticky;
    bottom: 0;
    z-index: 3;
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1.5rem;
    padding: .9rem 0;
    background: var(--ag-surface);
    border-top: 1px solid var(--ag-line);
}

/* ---- summary panel ---- */
.bg-side {
    position: sticky;
    top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.bg-panel {
    padding: .9rem 1rem;
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius-lg);
}

.bg-cap {
    margin-top: .35rem;
    font-size: .75rem;
    color: var(--ag-muted);
}

.bg-msum {
    margin-bottom: 1rem;
    padding: .6rem .8rem;
    background: var(--ag-paper);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius-lg);
}

.bg-msum summary {
    font-weight: 600;
    color: var(--ag-ink);
    cursor: pointer;
}

.bg-msum[open] summary {
    margin-bottom: .6rem;
}

.bg-block {
    width: 100%;
    font-size: .875rem;
    background: var(--ag-surface);
    border: 2px solid var(--ag-navy);
    border-collapse: collapse;
}

.bg-block thead th {
    padding: .5rem .75rem;
    font-weight: 600;
    color: var(--ag-on-navy);
    background: var(--ag-navy);
}

.bg-block tbody th {
    width: 34%;
    padding: .4rem .75rem;
    font-weight: 500;
    vertical-align: top;
    color: var(--ag-muted);
    background: var(--ag-paper);
    border-top: 1px solid var(--ag-line);
    border-right: 1px solid var(--ag-line);
}

.bg-block td {
    padding: 0;
    vertical-align: top;
    border-top: 1px solid var(--ag-line);
}

.bg-block tr.current th,
.bg-block tr.current td {
    background: var(--ag-tint);
}

.bg-cell {
    display: block;
    width: 100%;
    padding: .4rem .75rem;
    text-align: left;
    white-space: pre-line;
    color: inherit;
    background: none;
    border: 0;
}

button.bg-cell:disabled {
    color: inherit;
    opacity: 1;
}

button.bg-cell:not(:disabled):hover {
    background: var(--ag-tint);
}

/* ---- drawing ---- */
.bg-drawing-empty {
    display: grid;
    place-items: center;
    min-height: 150px;
    font-size: .9rem;
    color: var(--ag-muted);
    background: var(--ag-paper);
    border: 1px dashed var(--ag-line);
}

/* ---- zoom ---- */
.bg-zoom-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(10, 34, 77, .75);
}

.bg-zoom-box {
    position: relative;
    max-width: min(1000px, 95vw);
    margin: 0;
    padding: 1rem;
    background: var(--ag-surface);
    border-radius: var(--ag-radius-lg);
}

.bg-zoom-box img {
    display: block;
    max-width: 100%;
    max-height: 78vh;
    margin: 0 auto;
}

.bg-zoom-box figcaption {
    margin-top: .5rem;
    font-weight: 600;
    text-align: center;
    color: var(--ag-ink);
}

.bg-zoom-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
}

@media (prefers-reduced-motion: reduce) {
    .bg-card {
        transition: none;
    }
}

/* ---- layout: steps take the space, summary keeps a fixed width ---- */
.bg-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

.bg-main {
    min-width: 0;
}

.bg-aside {
    display: none;
}

@media (min-width: 992px) {
    .bg-layout {
        grid-template-columns: minmax(0, 1fr) clamp(320px, 24vw, 460px);
    }

    .bg-aside {
        display: block;
    }
}

/* short screens: flatter drawings and one line of detail so a whole step fits */
@media (min-width: 992px) and (max-height: 950px) {
    .bg-img.drawing {
        aspect-ratio: 2 / 1;
    }

    .bg-sub {
        margin-bottom: .6rem;
    }

    .bg-rail {
        margin-bottom: 1rem;
    }
}

/* ---- 3D view ---- */
.bg-mode {
    justify-content: flex-end;
    margin: -.25rem 0 .5rem;
}

.bg-3d {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
}

@media (min-width: 992px) {
    .bg-3d {
        grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr);
    }
}

.bg-3d-stage {
    position: relative;
    min-height: 460px;
    height: 60vh;
    overflow: hidden;
    background: var(--ag-paper);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius-lg);
}

/* the stage note's help: mouse words, or on a touch screen finger words (GrilleBuilderBase.NoteText) */
.bg-hint-touch {
    display: none;
}

@media (pointer: coarse) {
    .bg-hint-mouse {
        display: none;
    }

    .bg-hint-touch {
        display: inline;
    }
}

/* tablets and phones (3D since 2026-10-16, the step's options under the stage): nothing lies over the grille; the stage
   is three rows: the camera buttons, the 3D view (shorter, so the options stay in reach; touching it turns the grille, the
   page scrolls from elsewhere), then the note and the title block (full width, 4 columns). The watermark stays centred
   on the 3D view (same grid cell, under the canvas). */
@media (max-width: 991.98px) {
    .bg-3d-stage {
        --scene-h: max(320px, 55vh);
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto var(--scene-h) auto;
        grid-template-areas: "tools" "scene" "foot";
        height: auto;
        min-height: 0;
    }

    .bg-3d-stage .bg-3d-tools {
        position: static;
        grid-area: tools;
        padding: .5rem .5rem 0;
    }

    .bg-3d-stage .bg-scene {
        position: relative;
        grid-area: scene;
    }

    .bg-3d-stage .bg-3d-mark {
        position: relative;
        inset: auto;
        grid-area: scene;
        place-self: center;
        width: 64%;
        height: 48%;
        transform: translateY(-8%);
    }

    .bg-3d-stage .bg-3d-foot {
        position: static;
        grid-area: foot;
        flex-direction: column;
        align-items: stretch;
        padding: 0 .5rem .5rem;
    }

    .bg-3d-stage .bg-tb,
    .bg-3d-stage .bg-tb.collapsed {
        width: 100%;
    }

    .bg-3d-stage .bg-tb-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .bg-3d-stage .bg-tb-wrap[style] {
        grid-column: span 2 !important;
    }

    .bg-3d-stage .bg-tb-wrap[style*="span 1;"],
    .bg-3d-stage .bg-tb-wrap[style$="span 1"] {
        grid-column: span 1 !important;
    }

    .bg-3d-stage .bg-tb-wrap[style*="span 4"],
    .bg-3d-stage .bg-tb-wrap[style*="span 10"] {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 575.98px) {
    .bg-3d-stage {
        --scene-h: max(260px, 48vh);
    }

    .bg-3d-stage .bg-3d-tools .btn-sm {
        --bs-btn-padding-x: .45rem;
        --bs-btn-font-size: .8rem;
    }
}

.bg-scene {
    position: absolute;
    inset: 0;
}

.bg-3d-tools {
    position: absolute;
    top: .6rem;
    left: .6rem;
    right: .6rem;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.bg-3d-tools .btn-light {
    border: 1px solid var(--ag-line);
}

.bg-3d-note {
    position: absolute;
    bottom: .5rem;
    left: .6rem;
    right: .6rem;
    z-index: 2;
    padding: .35rem .6rem;
    font-size: .875rem;
    color: var(--ag-muted);
    background: color-mix(in srgb, var(--ag-surface) 85%, transparent);
    border-radius: var(--ag-radius-sm);
}

.bg-3d-panel {
    min-width: 0;
}

.bg-3d-panel .bg-grid-2 {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

/* desktop, beside the 3D view: the step panel is exactly as tall as the stage (it takes the row's height and adds none
   of its own); the question stays at the top, Back / Next at the bottom, and only the options between them scroll (the
   page doesn't) */
@media (min-width: 992px) {
    .bg-3d-panel {
        height: 0;
        min-height: 100%;
        display: flex;
        flex-direction: column;
    }

    .bg-3d-panel .bg-step-wrap,
    .bg-3d-panel .bg-step {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    .bg-3d-panel .bg-step-body {
        flex: 1;
        min-height: 0;
        overflow-x: hidden;         /* Bootstrap rows reach past the edge by their gutter: no sideways scroll for that */
        overflow-y: auto;
        overscroll-behavior: contain;
        /* room for the cards' focus ring and shadow, and the scrollbar (reaching out on the left only: on the right it
           made the page a little wider than the window, so it could scroll sideways) */
        padding: .25rem .5rem .5rem .25rem;
        margin: -.25rem 0 0 -.25rem;
    }

    .bg-3d-panel .bg-nav {
        position: static;
        margin-top: .75rem;
    }

    /* the colour list scrolls with the rest of the options, not in a box of its own */
    .bg-3d-panel .bg-swatches {
        max-height: none;
        overflow: visible;
    }

    /* the panel is narrow: smaller option cards, several to a row, rather than one huge picture each */
    .bg-3d-panel .bg-grid-3,
    .bg-3d-panel .bg-grid-4 {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }

    /* the pull tab (on the 3D view's edge by the options): fold the view to a strip, side by side, or full width */
    .bg-3d.view-side {
        grid-template-columns: 2rem minmax(0, 1fr);
    }

    .bg-3d.view-side .bg-3d-stage > :not(.bg-3d-pull) {
        visibility: hidden;
    }

    .bg-3d.view-full {
        grid-template-columns: minmax(0, 1fr);
    }

    .bg-3d.view-full .bg-3d-panel {
        display: none;
    }

    .bg-3d.view-full .bg-3d-stage {
        height: 85vh;
    }

    .bg-3d-pull {
        position: absolute;
        top: 50%;
        right: 0;
        z-index: 4;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        overflow: hidden;
        color: var(--ag-on-navy);
        background: var(--ag-navy);
        border-radius: var(--ag-radius) 0 0 var(--ag-radius);
        transform: translateY(-50%);
        user-select: none;
    }

    .bg-3d-pull button {
        width: 1.75rem;
        height: 2.5rem;
        padding: 0;
        font-size: 1.25rem;
        line-height: 1;
        color: inherit;
        background: transparent;
        border: 0;
    }

    .bg-3d-pull button:hover,
    .bg-3d-pull button:focus-visible {
        background: color-mix(in srgb, var(--ag-on-navy) 18%, transparent);
    }

    /* the tab's name, read upwards like a book's spine */
    .bg-3d-pull-label {
        padding: .5rem 0;
        font-size: .72rem;
        line-height: 1.75rem;
        text-align: center;
        text-transform: var(--ag-label-transform);
        letter-spacing: var(--ag-label-tracking);
        white-space: nowrap;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        opacity: .9;
    }

    .bg-3d.view-side .bg-3d-pull {
        right: auto;
        left: 50%;
        border-radius: var(--ag-radius);
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 991.98px) {
    .bg-3d-pull {
        display: none;
    }
}

/* the quantity step: Add-ons beside the door counts, a little apart; it opens its list (not a choice like the counts) */
.bg-addons-toggle {
    margin-left: .75rem;
}

.bg-addons-toggle.open {
    border-color: var(--ag-accent);
    box-shadow: inset 0 0 0 1px var(--ag-accent);
}

/* the finish step: a picked finish that has colours, folded to one row (the whole row opens the finishes again) */
.bg-picked {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    padding: .5rem .75rem .5rem .5rem;
    text-align: left;
    color: inherit;
    background: var(--ag-surface);
    border: 2px solid var(--ag-accent);
    border-radius: var(--ag-radius);
}

.bg-picked:hover,
.bg-picked:focus-visible {
    background: var(--ag-paper);
}

.bg-picked-img {
    flex: none;
    width: 3.5rem;
    height: 3.5rem;
    overflow: hidden;
    background: var(--ag-paper);
    border-radius: var(--ag-radius-sm);
}

.bg-picked-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bg-picked-name {
    font-weight: 600;
}

/* a picked mount (perforated, folded to a row with its frames under it): its drawing, whole */
.bg-picked-img.drawing {
    width: 6rem;
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
}

.bg-picked-img.drawing img {
    padding: .15rem;
    object-fit: contain;
}

[data-bs-theme=dark] .bg-picked-img.drawing img {
    filter: invert(.9) hue-rotate(180deg);
}

/* the 3D stage is for dragging, not selecting: no text selection on its buttons and labels
   (a selected label turns the next drag into a browser text drag), and the toolbar/note rows only catch
   clicks on the buttons themselves, so drags pass through their empty space to the canvas */
.bg-3d-stage {
    -webkit-user-select: none;
    user-select: none;
}

.bg-3d-tools,
.bg-3d-note {
    pointer-events: none;
}

.bg-3d-tools > * {
    pointer-events: auto;
}

/* ---- step bar: what was picked, under each step ---- */
.bg-rail-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}

.bg-rail-choice {
    display: flex;
    align-items: center;
    gap: .3rem;
    max-width: 11rem;
    margin-top: .15rem;
    font-size: .75rem;
    font-weight: 400;
    color: var(--ag-muted);
}

.bg-rail-choice img,
.bg-rail-chip {
    flex: 0 0 auto;
    width: 1.35rem;
    height: 1.35rem;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius-sm);
}

.bg-rail-value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* the light slider beside "No animation", in the same box */
.bg-light-level {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .2rem .55rem;
    color: var(--ag-muted);
    background: color-mix(in srgb, var(--ag-surface) 90%, transparent);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
}

.bg-light-level .form-range {
    width: 6rem;
    height: 1rem;
}

.bg-light-pct {
    min-width: 2.6em;
    font-size: .75rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.bg-noanim {
    padding: .2rem .5rem .2rem 2.6rem;
    background: color-mix(in srgb, var(--ag-surface) 90%, transparent);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius);
}

/* the Wall switch and its colours menu (the 3D module handles the inputs) */
.bg-wall-tools {
    position: relative;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.bg-wall-menu {
    position: absolute;
    top: calc(100% + .35rem);
    right: 0;
    z-index: 4;
    display: grid;
    gap: .55rem;
    min-width: 17rem;
    padding: .6rem .7rem;
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.bg-wall-menu[hidden] {
    display: none;
}

/* the open menu over the stage's foot (note and title block, z-index 17) */
.bg-3d-tools:has(.bg-wall-menu:not([hidden])) {
    z-index: 18;
}

.bg-wall-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: .2rem .6rem;
    font-size: .85rem;
}

.bg-wall-row > label:first-child {
    grid-column: 1 / -1;
    font-weight: 600;
    color: var(--ag-ink);
}

.bg-wall-row input[type=color] {
    grid-row: 2;
    grid-column: 2;
    width: 3rem;
    height: 1.8rem;
    padding: 0 .1rem;
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius-sm);
    background: var(--ag-surface);
    cursor: pointer;
}

.bg-wall-row input[type=color]:disabled {
    opacity: .5;
    cursor: default;
}

.bg-wall-row .form-check {
    grid-row: 2;
    grid-column: 1;
}

.bg-wall-menu > .btn {
    justify-self: start;
}

.bg-topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: -.25rem 0 .5rem;
}

.bg-topbar .bg-mode {
    margin: 0;
}

.bg-die {
    vertical-align: -2px;
    margin-right: .15rem;
}

.bg-rail-svg {
    flex: 0 0 auto;
    width: 2.1rem;
    height: 1.6rem;
    padding: 1px;
    fill: var(--ag-ink);
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius-sm);
}

.bg-confirm {
    max-width: 30rem;
    margin: 1rem;
    padding: 1.25rem 1.5rem;
    color: var(--ag-text);
    background: var(--ag-surface);
    border-radius: var(--ag-radius-lg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}

/* ---- step bar, evened out: equal columns, the choice on its own line, bigger schematics ---- */
.bg-rail {
    gap: .25rem;
    align-items: stretch;
}

.bg-rail li {
    flex: 1 1 0;
    min-width: 7.5rem;
}

.bg-rail button {
    width: 100%;
    height: 100%;
    align-items: flex-start;
    gap: .55rem;
    padding: .5rem .5rem .6rem;
}

.bg-rail .bg-num {
    flex: 0 0 auto;
    margin-top: .05rem;
}

.bg-rail-text {
    flex: 1 1 auto;
    min-width: 0;
    gap: .2rem;
}

.bg-rail-choice {
    width: 100%;
    max-width: none;
    min-height: 2.2rem;
    margin-top: 0;
    font-size: .8rem;
}

.bg-rail-svg {
    width: 3rem;
    height: 2.2rem;
    padding: 2px;
}

.bg-rail-choice img,
.bg-rail-chip {
    width: 1.8rem;
    height: 1.8rem;
}

/* ---- filled in from a drawing ---- */
.bg-drawing-note {
    margin: 0 0 .75rem;
    padding: .6rem .9rem;
    background: var(--bs-info-bg-subtle, #e7f4fb);
    border-left: 3px solid var(--bs-info, #0dcaf0);
    border-radius: var(--ag-radius);
}

/* things the 3D model can't show exactly */
.bg-3d-limit {
    margin-top: .2rem;
    font-weight: 600;
    color: #8a5300;
}

[data-bs-theme=dark] .bg-3d-limit {
    color: #f0b55a;
}

/* ---- step bar dropdowns: choose without leaving the current step (desktop) ---- */
.bg-rail li {
    position: relative;
    display: flex;
}

.bg-rail li > button:first-child {
    flex: 1 1 auto;
    min-width: 0;
}

.bg-rail .bg-rail-caret {
    flex: 0 0 auto;
    width: auto;
    height: auto;
    align-self: flex-start;
    margin: .45rem .15rem 0 0;
    padding: .15rem .4rem;
    font-size: .8rem;
    line-height: 1;
    color: var(--ag-muted);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ag-radius);
}

.bg-rail .bg-rail-caret:hover,
.bg-rail .menu-open .bg-rail-caret {
    color: var(--ag-ink);
    background: var(--ag-surface);
    border-color: var(--ag-line);
}

.bg-rail-menu {
    position: absolute;
    top: calc(100% - .2rem);
    left: 0;
    z-index: 20;
    width: max-content;
    min-width: 15rem;
    max-width: 22rem;
    padding: .6rem .7rem;
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.bg-rail li:nth-last-child(-n+2) .bg-rail-menu {
    right: 0;
    left: auto;
}

.bg-rail-backdrop {
    position: fixed;
    inset: 0;
    z-index: 15;
}

@media (min-width: 992px) {
    .bg-rail {
        position: relative;
        z-index: 16;
        overflow: visible;
    }
}

@media (max-width: 991.98px) {
    .bg-rail .bg-rail-caret {
        display: none;
    }
}

/* the underline marks the current step, not its dropdown button */
.bg-rail .current .bg-rail-caret {
    font-weight: 400;
    border-bottom-color: transparent;
    box-shadow: none;
}

.bg-rail .current .bg-rail-caret:hover,
.bg-rail .menu-open.current .bg-rail-caret {
    border-color: var(--ag-line);
}

/* one-click lists inside the step bar dropdowns */
.bg-quick-list {
    display: flex;
    flex-direction: column;
    max-height: 18rem;
    overflow-y: auto;
}

.bg-rail .bg-quick-item {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    width: 100%;
    height: auto;
    padding: .3rem .45rem;
    font-size: .875rem;
    font-weight: 400;
    color: var(--ag-text);
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: var(--ag-radius);
}

.bg-rail .bg-quick-item:hover {
    background: var(--ag-tint);
}

.bg-rail .bg-quick-item.selected {
    font-weight: 600;
    color: var(--ag-ink);
}

.bg-quick-check {
    flex: 0 0 1rem;
    color: var(--ag-accent);
}

.bg-rail .current .bg-quick-item {
    font-weight: 400;
    color: var(--ag-text);
}

.bg-rail .current .bg-quick-item.selected {
    font-weight: 600;
    color: var(--ag-ink);
}

.bg-rail .bg-quick-item {
    white-space: normal;
}

.bg-rail-menu {
    max-width: 26rem;
}

/* ---- lists in the dropdowns and the title block editors ---- */
.bg-quick-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    width: 100%;
    padding: .3rem .45rem;
    font-size: .875rem;
    color: var(--ag-text);
    text-align: left;
    white-space: normal;
    background: transparent;
    border: 0;
    border-radius: var(--ag-radius);
}

.bg-quick-item:hover {
    background: var(--ag-tint);
}

.bg-quick-item.selected {
    font-weight: 600;
    color: var(--ag-ink);
}

.bg-quick-chip {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: var(--ag-radius-sm);
}

/* ---- the 3D view's footer: the note on the left, the title block on the right ---- */
.bg-3d-foot {
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: .5rem;
    z-index: 17;
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    pointer-events: none;
}

.bg-3d-foot .bg-3d-note {
    position: static;
    flex: 1 1 auto;
}

.bg-tb {
    position: relative;
    z-index: 17;
    flex: 0 0 auto;
    width: min(44rem, 70%);
    font-size: .8rem;
    pointer-events: auto;
    background: var(--ag-surface);
    border: 1.5px solid var(--ag-ink);
}

.bg-tb.collapsed {
    width: auto;
}

.bg-tb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .15rem .2rem .15rem .5rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--ag-on-navy);
    background: var(--ag-navy);
}

.bg-tb-toggle {
    padding: .05rem .4rem;
    font-size: .72rem;
    color: var(--ag-on-navy);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: var(--ag-radius-sm);
}

.bg-tb-grid {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));     /* cells take 2 by default (TbCell.Span); short ones 1 */
}

.bg-tb-wrap {
    position: relative;
    min-width: 0;
    border-right: 1px solid var(--ag-line);
    border-bottom: 1px solid var(--ag-line);
}

.bg-tb-wrap:last-child {
    border-right: 0;
    border-bottom: 0;
}

.bg-tb-wrap.wide {
    grid-column: span 3;
    border-right: 0;
}

.bg-tb-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: .05rem .4rem .1rem;
    line-height: 1.2;
    text-align: left;
    background: transparent;
    border: 0;
}

.bg-tb-cell:not(:disabled):hover,
.bg-tb-cell.open {
    background: var(--ag-tint);
}

.bg-tb-cell .lbl {
    font-size: .66rem;
    color: var(--ag-muted);
}

.bg-tb-cell .val {
    max-width: 100%;
    overflow: hidden;
    font-weight: 600;
    color: var(--ag-ink);
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* a value given as short lines (perforated borders: left/right, then top/bottom) */
.bg-tb-cell .val.lines {
    white-space: pre;
    text-overflow: clip;
}

.bg-tb-cell .val.wrap {
    max-height: 3.7em;
    overflow: auto;
    font-size: .72rem;
    font-weight: 400;
    white-space: normal;
}

.bg-tb-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    z-index: 30;
    width: max-content;
    min-width: 15rem;
    max-width: 24rem;
    padding: .6rem .7rem;
    background: var(--ag-surface);
    border: 1px solid var(--ag-line);
    border-radius: var(--ag-radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}

.bg-tb-menu.right {
    right: 0;
    left: auto;
}

.bg-tb-menu .bg-quick-list {
    max-height: 15rem;
}

/* the flow in the title block */
.bg-tb-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .95rem;
    height: .95rem;
    margin-right: .25rem;
    font-size: .6rem;
    font-weight: 700;
    color: var(--ag-muted);
    border: 1px solid var(--ag-line);
    border-radius: 50%;
}

.bg-tb-next {
    margin-left: .3rem;
    padding: 0 .3rem;
    font-size: .6rem;
    font-weight: 700;
    color: var(--ag-on-navy);
    text-transform: uppercase;
    background: var(--ag-accent);
    border-radius: var(--ag-radius-sm);
}

.bg-tb-wrap.next {
    outline: 2px solid var(--ag-accent);
    outline-offset: -2px;
}

.bg-tb-cell .val.wait {
    font-weight: 400;
    font-style: italic;
    color: var(--ag-muted);
}

.bg-tb-cell:disabled {
    opacity: 1;
    cursor: default;
}

/* the logo, faintly, behind the 3D model */
.bg-3d-mark {
    position: absolute;
    inset: 22% 18% 30%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: .12;
    pointer-events: none;
}

[data-bs-theme=dark] .bg-3d-mark {
    filter: invert(1);
    opacity: .14;
}

/* a picture in a quick menu (perforated patterns) */
.bg-quick-img {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border-radius: var(--ag-radius-sm);
}

/* a photo in place of the drawing (2D): a stock item, a pattern before there is a size */
.bg-photo {
    display: block;
    width: 100%;
    max-height: 340px;
    object-fit: contain;
}

/* a step bar too long for its width (bar grilles in sections beside a side menu): on desktop, where each step has its
   quick-menu button, titles end in an ellipsis rather than running under it (on phones the bar scrolls sideways) */
@media (min-width: 992px) {
    .bg-rail-text > span:first-child {
        max-width: 100%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

/* narrower desktops: a slightly smaller step bar, so nine or ten titles stay readable */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .bg-rail button {
        gap: .35rem;
        padding: .45rem .3rem .55rem;
        font-size: .9rem;
    }

    .bg-rail .bg-num {
        width: 1.4rem;
        height: 1.4rem;
        font-size: .75rem;
    }

    .bg-rail .bg-rail-caret {
        margin-right: 0;
        padding: .15rem .25rem;
    }
}

/* a colour still to choose, after Next */
.bg-swatches.bad {
    outline: 2px solid var(--ag-danger);
    outline-offset: 2px;
    border-radius: var(--ag-radius);
}