/*
 * Detail Empire Floor Designer -- the whole stylesheet.
 *
 * The Laravel build used Tailwind, which needs a compile step; there is none here, so this is
 * the same design written out by hand. The palette is deliberately identical, and still lives in
 * custom properties for the same reason it did before: one dark-theme block below re-points every
 * colour in the app without touching a single rule that uses them.
 *
 * Layout breakpoint: 1024px, matching the `lg:` prefix the components were written against.
 */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

:root {
    --de-white: #ffffff;
    --de-canvas: #f7f7f8;
    --de-panel: #ffffff;
    --de-panel-2: #eef0f2;
    --de-ink: #1a1a1a;
    --de-slate: #4b4b4d;
    --de-border: #e6e6e8;
    --de-accent: #e6007e;
    --de-accent-dark: #b8005f;
    /* Text drawn on top of the accent -- white reads correctly on this magenta in both themes
       and in print, so it never needs to change. */
    --de-accent-ink: #ffffff;
    --de-danger: #d92d20;
    --de-success: #087443;

    /* The default UI font. The Branding & Theme screen can override this with `--de-font` (and
       load a different family's stylesheet), so a brand can run on Poppins, Inter, whatever. */
    --de-font: 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

    --radius-sm: 4px;
    --radius: 6px;
    --radius-lg: 10px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* Dark theme: an explicit user choice stamps data-theme="dark" on <html> (see lib/theme.js) --
   the default is always the light palette above. */
:root[data-theme='dark'] {
    --de-canvas: #0b0c0e;
    --de-panel: #16181b;
    --de-panel-2: #1c1f22;
    --de-ink: #f5f5f2;
    --de-slate: #9aa0a6;
    --de-border: #2b2e32;
    --de-danger: #f97066;
    --de-success: #47cd89;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* A modest bump over the browser default 16px, scaling the whole app's type proportionally. */
    font-size: 17px;
}

/*
 * Screen-size scaling. Every size in the app is in rem, so the root font-size is the one knob
 * that fits the whole UI to the display:
 *   - 14" laptops (1280-1399 CSS px: a Full HD panel at 150% scaling, or a 1366-wide one)
 *     get a smaller base so the panels leave the canvas real room;
 *   - HD / Full HD desktops sit at the default;
 *   - QHD and 4K displays run at 100% or 125% scaling get a larger base so the UI does not
 *     shrink to a sliver in the corner.
 * The height rule handles short laptop screens separately (see the max-height block further
 * down), because a 1920x1080 panel at 125% is wide but only 864px tall.
 */
@media (min-width: 1024px) and (max-width: 1399.98px) {
    html {
        font-size: 15px;
    }
}

@media (min-width: 1400px) and (max-width: 1919.98px) {
    html {
        font-size: 16px;
    }
}

@media (min-width: 2200px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 3000px) {
    html {
        font-size: 21px;
    }
}

body {
    margin: 0;
    font-family: var(--de-font, 'Barlow', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
    background: var(--de-canvas);
    color: var(--de-ink);
    -webkit-font-smoothing: antialiased;
}

button {
    font: inherit;
    cursor: pointer;
}

button:disabled {
    cursor: not-allowed;
}

input,
select,
textarea {
    font: inherit;
    color: var(--de-ink);
}

img {
    max-width: 100%;
}

/* Keyboard focus: one clear accent ring on anything reachable by Tab, drawn only for keyboard
   focus (:focus-visible) so mouse clicks stay clean. Inputs keep their own border treatment. */
button:focus-visible,
a:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--de-accent);
    outline-offset: 2px;
    border-radius: var(--radius);
}

input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--de-accent);
    outline-offset: 1px;
}

/* The step title receives focus by script on step change; that needs no ring of its own. */
.step-title:focus {
    outline: none;
}

/* ---------------------------------------------------------------- shared atoms */

.muted {
    color: var(--de-slate);
    font-size: 0.82rem;
    margin: 0;
}

.strong {
    font-weight: 600;
    color: var(--de-ink);
}

.hint {
    color: var(--de-slate);
    font-size: 0.72rem;
    margin: 0.25rem 0 0;
    line-height: 1.45;
}

.error-text {
    color: var(--de-danger);
    font-size: 0.8rem;
    margin: 0;
}

.success-text {
    color: var(--de-success);
    font-size: 0.82rem;
    font-weight: 500;
    margin: 0;
}

.capitalize {
    text-transform: capitalize;
}

.right {
    text-align: right;
}

.icon {
    width: 1.25rem;
    height: 1.25rem;
}

.icon-sm {
    width: 1rem;
    height: 1rem;
}

.icon-xs {
    width: 0.8rem;
    height: 0.8rem;
}

.stack-xs > * + * {
    margin-top: 0.4rem;
}

.stack-sm > * + * {
    margin-top: 0.75rem;
}

.stack-md > * + * {
    margin-top: 1rem;
}

.stack-lg > * + * {
    margin-top: 1.5rem;
}

.stack-xs,
.stack-sm,
.stack-md,
.stack-lg {
    display: flex;
    flex-direction: column;
}

.stack-xs > * + *,
.stack-sm > * + *,
.stack-md > * + *,
.stack-lg > * + * {
    margin-top: 0;
}

.stack-xs {
    gap: 0.4rem;
}

.stack-sm {
    gap: 0.75rem;
}

.stack-md {
    gap: 1rem;
}

.stack-lg {
    gap: 1.5rem;
}

.block-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.mini-title {
    font-size: 0.85rem;
    font-weight: 600;
    margin: 0;
}

.mini-heading {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--de-slate);
    margin: 0 0 0.5rem;
}

.section-heading {
    background: var(--de-accent);
    color: var(--de-accent-ink);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    margin: 0;
}

.category-heading {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--de-accent);
    margin: 0 0 0.4rem;
}

.section-divided {
    border-top: 1px solid var(--de-border);
    padding-top: 1rem;
}

/* ---------------------------------------------------------------- buttons */

.button-primary,
.button-secondary,
.button-quiet {
    border-radius: var(--radius);
    padding: 0.5rem 1rem;
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid transparent;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

.button-primary {
    background: var(--de-accent);
    color: var(--de-accent-ink);
}

.button-primary:hover:not(:disabled) {
    background: var(--de-accent-dark);
}

.button-secondary {
    background: var(--de-panel-2);
    border-color: var(--de-border);
    color: var(--de-ink);
}

.button-secondary:hover:not(:disabled) {
    border-color: var(--de-slate);
}

.button-quiet {
    background: transparent;
    border-color: var(--de-border);
    color: var(--de-slate);
    padding: 0.3rem 0.6rem;
    font-size: 0.72rem;
}

.button-quiet:hover {
    background: var(--de-panel-2);
    color: var(--de-ink);
}

.button-primary:disabled,
.button-secondary:disabled {
    opacity: 0.4;
}

.button-row {
    display: flex;
    gap: 0.5rem;
}

.text-button {
    background: none;
    border: 0;
    border-radius: var(--radius);
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    color: var(--de-slate);
}

.text-button:hover:not(:disabled) {
    background: var(--de-panel-2);
}

.text-button:disabled {
    opacity: 0.3;
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    background: none;
    border: 0;
    border-radius: var(--radius);
    color: var(--de-slate);
}

.icon-button:hover {
    background: var(--de-panel-2);
}

.danger-link {
    background: none;
    border: 0;
    color: var(--de-danger);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0;
}

.danger-link:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------------------- fields */

.field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.8rem;
    color: var(--de-slate);
}

.field input,
.field select,
.field textarea,
.corner-field input,
.non-tile-head input,
.trim-select {
    border: 1px solid var(--de-border);
    background: var(--de-panel-2);
    border-radius: var(--radius);
    padding: 0.5rem 0.7rem;
    color: var(--de-ink);
    width: 100%;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.corner-field input:focus,
.trim-select:focus {
    outline: none;
    border-color: var(--de-accent);
}

.field-xs {
    font-size: 0.7rem;
}

.field-xs input {
    padding: 0.35rem 0.5rem;
}

/* ---------------------------------------------------------------- app shell */

.designer {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    background: var(--de-canvas);
    overflow: hidden;
}

.designer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--de-border);
    background: var(--de-panel);
    flex-shrink: 0;
}

.header-brand {
    display: inline-flex;
    align-items: center;
}

.header-logo {
    height: 2rem;
    width: auto;
    display: block;
}

/* One logo per theme; show whichever matches the active theme. */
.header-logo-dark {
    display: none;
}

:root[data-theme='dark'] .header-logo-light {
    display: none;
}

:root[data-theme='dark'] .header-logo-dark {
    display: block;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.currency-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.currency-switch-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--de-slate);
}

.currency-select {
    appearance: none;
    -webkit-appearance: none;
    max-width: 8.5rem;
    border: 1px solid var(--de-border);
    background: var(--de-panel-2);
    color: var(--de-ink);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.34rem 1.5rem 0.34rem 0.6rem;
    border-radius: 0.4rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa0a6' d='M3 4.5 6 8l3-3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    text-overflow: ellipsis;
}

/* ---------------------------------------------------------------- account widget */
/* The header's "Sign in" control / signed-in name + menu, and the sign-in / create-account
   modal it opens -- shared by the landing page, the designer header and My Designs. */

.account-widget {
    position: relative;
}

.account-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid var(--de-border);
    background: var(--de-panel-2);
    color: var(--de-ink);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.4rem 0.7rem;
    border-radius: 0.4rem;
    transition: border-color 0.15s;
}

.account-trigger:hover {
    border-color: var(--de-slate);
}

.account-trigger-name {
    max-width: 8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-trigger-chevron {
    width: 0.85rem;
    height: 0.85rem;
    color: var(--de-slate);
}

.account-menu {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 9.5rem;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    background: var(--de-panel);
    box-shadow: var(--shadow-lg);
    padding: 0.3rem;
}

.account-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: none;
    color: var(--de-ink);
    font: inherit;
    font-size: 0.8rem;
    text-decoration: none;
    padding: 0.5rem 0.6rem;
    border-radius: 0.35rem;
}

.account-menu-item:hover {
    background: var(--de-panel-2);
}

.account-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 12, 0.45);
    padding: 1rem;
}

.account-modal {
    position: relative;
    width: 100%;
    max-width: 22rem;
    background: var(--de-panel);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 1.5rem 1.35rem 1.35rem;
}

.account-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.6rem;
    width: 1.8rem;
    height: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: none;
    color: var(--de-slate);
    border-radius: 999px;
    font-size: 0.85rem;
}

.account-modal-close:hover {
    background: var(--de-panel-2);
    color: var(--de-ink);
}

.account-tabs {
    display: flex;
    gap: 0.3rem;
    border-bottom: 1px solid var(--de-border);
    margin-bottom: 0.9rem;
}

.account-tab {
    flex: 1;
    border: 0;
    background: none;
    color: var(--de-slate);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.55rem 0.3rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.account-tab.is-active {
    color: var(--de-ink);
    border-bottom-color: var(--de-accent);
}

.account-modal-note {
    margin: 0 0 1rem;
    font-size: 0.78rem;
    color: var(--de-slate);
    line-height: 1.45;
}

.account-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.account-field input {
    border: 1px solid var(--de-border);
    background: var(--de-panel-2);
    border-radius: var(--radius);
    padding: 0.55rem 0.7rem;
    color: var(--de-ink);
    width: 100%;
}

.account-submit {
    width: 100%;
    margin-top: 0.25rem;
}

.currency-select:hover {
    border-color: var(--de-slate);
}

.currency-select:focus-visible {
    outline: 2px solid var(--de-accent);
    outline-offset: 1px;
}

/* On the Review step the switcher sits with the totals, aligned right. */
.review-currency {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.5rem;
}

.header-message {
    font-size: 0.72rem;
    color: var(--de-slate);
}

/* Holds the step rail and whichever of the two main panes is showing. The rail lives here rather
   than inside .workspace so it survives the review step, which replaces the workspace entirely --
   without it there would be no way back to an earlier step from the review page. */
.designer-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    /* Anchors the floating step rail on laptop-width screens (see the 1024-1399 media block). */
    position: relative;
}

.workspace {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.workspace[hidden],
.review-host[hidden] {
    display: none;
}

/* The canvas comes first on a phone -- the design is the thing, the controls follow it. Given
   a good slice of the viewport so the design is actually legible on a small screen. */
.canvas-column {
    order: 1;
    display: flex;
    flex-direction: column;
    height: 52vh;
    min-height: 240px;
    flex-shrink: 0;
}

.progress-wrap {
    padding: 0.5rem;
    flex-shrink: 0;
}

.canvas-stage {
    position: relative;
    flex: 1;
    min-height: 240px;
    background: var(--de-canvas);
}

.canvas-area {
    position: absolute;
    inset: 0;
}

.paint-canvas {
    width: 100%;
    height: 100%;
    touch-action: none;
}

/* ---------------------------------------------------------------- stepper rails */

.stepper {
    display: none;
    width: 6rem;
    flex-shrink: 0;
    flex-direction: column;
    border-right: 1px solid var(--de-border);
    background: var(--de-panel);
    padding: 0.5rem 0;
    overflow-y: auto;
}

.stepper button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.75rem 0.25rem;
    text-align: center;
    font-size: 0.64rem;
    line-height: 1.2;
    background: none;
    border: 0;
    border-left: 2px solid transparent;
    color: var(--de-slate);
    transition: background 0.15s;
}

.stepper button:hover:not(:disabled) {
    background: var(--de-panel-2);
}

.stepper button.is-active {
    border-left-color: var(--de-accent);
    background: var(--de-panel-2);
    color: var(--de-accent);
    font-weight: 600;
}

.stepper button:disabled {
    opacity: 0.4;
}

/* The mobile equivalent: a bottom tab bar that scrolls sideways, with the active step kept in
   view by the nav itself (see shell.js). */
.mobile-step-nav {
    display: flex;
    gap: 0.15rem;
    flex-shrink: 0;
    overflow-x: auto;
    border-top: 1px solid var(--de-border);
    background: var(--de-panel);
    padding: 0.25rem;
    scrollbar-width: none;
}

.mobile-step-nav::-webkit-scrollbar {
    display: none;
}

.mobile-step-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    min-width: 3.9rem;
    flex-shrink: 0;
    padding: 0.4rem 0.25rem;
    border: 0;
    border-radius: var(--radius);
    background: none;
    color: var(--de-slate);
    font-size: 0.6rem;
    line-height: 1.15;
    text-align: center;
}

.mobile-step-nav button span {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-step-nav button.is-active {
    background: var(--de-panel-2);
    color: var(--de-accent);
    font-weight: 600;
}

.mobile-step-nav button:disabled {
    opacity: 0.4;
}

/* ---------------------------------------------------------------- progress bar */

.progress-bar {
    position: relative;
    height: 2.1rem;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--de-border);
}

.progress-fill {
    height: 100%;
    background: var(--de-accent);
    transition: width 0.3s;
}

.progress-label {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--de-ink);
}

/* ---------------------------------------------------------------- step panel */

.step-panel {
    order: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    width: 100%;
    border-top: 1px solid var(--de-border);
    background: var(--de-panel);
}

.step-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
}

.step-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.step-description {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--de-slate);
}

.step-body {
    margin-top: 1rem;
}

/* One row on a phone, where vertical space is the scarce thing and every row taken here is a row
   of controls the customer cannot see. Stacked again on a wide screen, where there is room and
   Save reads better as its own full-width action. */
.step-actions {
    display: flex;
    gap: 0.5rem;
    flex-shrink: 0;
    border-top: 1px solid var(--de-border);
    padding: 0.75rem;
}

.step-actions-nav {
    display: flex;
    flex: 1;
    gap: 0.5rem;
}

.step-actions-nav button {
    flex: 1;
}

.save-button {
    flex-shrink: 0;
}

/* ---------------------------------------------------------------- side panels */

.side-panel-slot {
    order: 3;
    display: flex;
    width: 100%;
    flex-shrink: 0;
    max-height: 70vh;
}

.side-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    border-top: 1px solid var(--de-border);
    background: var(--de-panel);
    overflow-y: auto;
}

.side-panel-empty {
    display: flex;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
}

.summary-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: none;
    border: 0;
    text-align: left;
}

.summary-toggle-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--de-ink);
}

.summary-toggle-total {
    margin-left: 0.5rem;
    font-weight: 400;
    color: var(--de-slate);
    font-size: 0.82rem;
}

.summary-chevron {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    color: var(--de-slate);
    transition: transform 0.15s;
}

.summary-chevron.is-flipped {
    transform: rotate(180deg);
}

.summary-body {
    display: none;
    flex-direction: column;
    gap: 1rem;
    padding: 0 1rem 1rem;
    overflow-y: auto;
}

.summary-panel.is-expanded .summary-body {
    display: flex;
}

.summary-heading {
    display: none;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

/* Desktop-only: the summary can fold down to a slim icon strip ("icon view") so the canvas
   gets the room. The heading row holds the hide control; the rail is what shows when hidden.
   Both are switched on in the >= 1024px block; on phones the toggle above does that job. */
.summary-heading-row {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.summary-collapse,
.summary-rail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    padding: 0;
    border: 1px solid var(--de-border);
    border-radius: 999px;
    background: var(--de-panel);
    color: var(--de-slate);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.summary-collapse:hover,
.summary-rail-button:hover {
    color: var(--de-accent);
    border-color: var(--de-accent);
}

.summary-collapse-chevron,
.summary-rail-chevron {
    width: 0.9rem;
    height: 0.9rem;
}

/* Hide = chevron points right (towards the edge it folds into); show = points left. */
.summary-collapse-chevron {
    transform: rotate(-90deg);
}

.summary-rail-chevron {
    transform: rotate(90deg);
}

.summary-rail {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    padding: 0.75rem 0;
    cursor: pointer;
}

.summary-rail-label,
.summary-rail-total {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--de-slate);
}

.summary-rail-total {
    margin-top: auto;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--de-ink);
}

.summary-rail-total:empty {
    display: none;
}

.summary-areas,
.review-facts {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.25rem 0.5rem;
    margin: 0;
    font-size: 0.82rem;
}

.summary-areas dt,
.review-facts dt {
    color: var(--de-slate);
}

.summary-areas dd,
.review-facts dd {
    margin: 0;
    text-align: right;
    font-weight: 500;
}

.summary-materials {
    border-top: 1px solid var(--de-border);
    padding-top: 0.75rem;
}

.summary-materials h3 {
    font-size: 0.82rem;
    font-weight: 600;
    margin: 0;
}

.summary-materials ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.summary-materials li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.82rem;
}

.summary-item-name {
    margin: 0;
    font-weight: 500;
}

.summary-item-meta {
    margin: 0;
    font-size: 0.7rem;
    color: var(--de-slate);
}

.summary-item-total {
    margin: 0;
    font-weight: 500;
}

.summary-totals {
    border-top: 1px solid var(--de-border);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    color: var(--de-slate);
}

.summary-row.is-total {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--de-ink);
    border-top: 1px solid var(--de-border);
    padding-top: 0.3rem;
    margin-top: 0.1rem;
}

.summary-disclaimer {
    margin: 0.25rem 0 0;
    font-size: 0.68rem;
    color: var(--de-slate);
}

/* ---------------------------------------------------------------- product spec */

.spec-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
}

.spec-image {
    aspect-ratio: 1;
    width: 100%;
    border: 1px solid var(--de-border);
    border-radius: var(--radius-lg);
    background-size: cover;
    background-position: center;
}

.spec-product {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.spec-variant {
    margin: 0;
    font-size: 0.8rem;
    color: var(--de-slate);
}

.spec-price {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.spec-description {
    margin: 0;
    font-size: 0.8rem;
    color: var(--de-slate);
}

.spec-list {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 0.75rem;
    margin: 0;
    font-size: 0.8rem;
}

.spec-list dt {
    color: var(--de-slate);
}

.spec-list dd {
    margin: 0;
    text-align: right;
    font-weight: 500;
}

.inline-spec {
    border: 1px solid var(--de-border);
    background: var(--de-panel-2);
    border-radius: var(--radius);
}

/* ---------------------------------------------------------------- canvas overlays */

.canvas-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    opacity: 0.06;
    pointer-events: none;
}

.canvas-watermark img {
    height: 6rem;
    width: auto;
}

.canvas-watermark p {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    text-align: center;
}

.view-toggle {
    position: absolute;
    right: 1rem;
    top: 1rem;
    display: flex;
    overflow: hidden;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    background: var(--de-panel);
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
    z-index: 2;
}

.view-toggle[hidden] {
    display: none;
}

.view-toggle button {
    padding: 0.5rem 0.75rem;
    border: 0;
    background: none;
    color: var(--de-slate);
}

.view-toggle button.is-active {
    background: var(--de-accent);
    color: var(--de-accent-ink);
}

.zoom-buttons {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    background: var(--de-panel);
    box-shadow: var(--shadow-sm);
}

.zoom-buttons[hidden] {
    display: none;
}

.zoom-buttons button {
    padding: 0.5rem 0.75rem;
    border: 0;
    background: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--de-ink);
}

.zoom-buttons button:hover {
    background: var(--de-panel-2);
}

.zoom-divider {
    height: 1px;
    background: var(--de-border);
}

.canvas-zoom {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 2;
}

/* ---------------------------------------------------------------- room previews */

.outline-preview,
.angled-canvas {
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
}

.outline-preview-svg,
.angled-canvas-svg {
    max-height: 100%;
    max-width: 100%;
    /* The room fill below is always literal white regardless of app theme, so its outline stroke
       must stay a fixed dark ink to read against that white -- the themed ink flips to near-white
       in the dark theme and would vanish here. */
    color: #000000;
}

.angled-canvas-svg {
    touch-action: none;
    user-select: none;
}

.outline-preview-room,
.angled-room {
    fill: #ffffff;
    stroke: currentColor;
}

.preview-grid-line {
    stroke: var(--de-border);
}

.outline-preview-caption,
.angled-canvas-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--de-slate);
    text-align: center;
}

.shape-preview {
    height: 5rem;
    width: 5rem;
    color: var(--de-ink);
}

.shape-preview-outline {
    fill: var(--de-canvas);
    stroke: currentColor;
}

.pattern-preview {
    height: 3rem;
    width: 3rem;
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------- angled walls */

.angled-base-outline {
    fill: none;
    stroke: var(--de-border);
}

.angled-wedge {
    fill: var(--de-ink);
    opacity: 0.92;
    cursor: move;
    touch-action: none;
}

.angled-wedge.is-dragging {
    fill: var(--de-accent);
}

.angled-handle {
    cursor: move;
    touch-action: none;
}

.angled-handle-dot {
    fill: var(--de-slate);
    opacity: 0.95;
}

.angled-handle-dot.is-dragging {
    fill: var(--de-accent);
}

.angled-handle-arrow {
    pointer-events: none;
}

.angled-label-box {
    fill: #000000;
}

.angled-label-text {
    fill: #ffffff;
    font-weight: 600;
}

.angled-step-preview {
    height: 14rem;
    width: 100%;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    background: var(--de-canvas);
    color: #000000;
}

.angled-dot {
    fill: #ffffff;
    stroke: #000000;
    cursor: pointer;
}

.angled-dot.is-cut {
    fill: var(--de-accent);
}

.corner-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.corner-row.is-selected {
    border-color: var(--de-accent);
    background: var(--de-canvas);
}

.corner-title {
    font-weight: 500;
}

.corner-coords {
    margin-left: 0.5rem;
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--de-slate);
}

.corner-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.corner-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.7rem;
    color: var(--de-slate);
}

.corner-field input {
    width: 5rem;
    padding: 0.35rem 0.6rem;
}

/* ---------------------------------------------------------------- step 1: shapes */

.shape-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.shape-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    border: 3px solid var(--de-border);
    border-radius: var(--radius-lg);
    background: none;
    padding: 1rem;
    transition: border-color 0.15s, background 0.15s;
}

.shape-option:hover {
    background: var(--de-panel-2);
}

.shape-option.is-active {
    border-color: var(--de-accent);
    background: var(--de-panel-2);
    box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------- step 2: units */

.unit-switch {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    font-size: 0.72rem;
}

.unit-switch button {
    flex: 1;
    padding: 0.35rem 0.75rem;
    border: 0;
    background: var(--de-panel-2);
    color: var(--de-slate);
}

.unit-switch button.is-active {
    background: var(--de-accent);
    color: var(--de-accent-ink);
}

/* ---------------------------------------------------------------- step 4: designs */

/* The colour-count filter: a wrapping row of pills above every category, so a customer who
   already knows they want (say) a 2-colour design can jump straight to those instead of
   scanning every category for the badge they want. */
.design-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.25rem;
}

.design-filter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--de-border);
    border-radius: 999px;
    background: var(--de-panel);
    color: var(--de-slate);
    padding: 0.3rem 0.55rem 0.3rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.design-filter-pill:hover {
    border-color: var(--de-accent);
    color: var(--de-ink);
}

.design-filter-pill.is-selected {
    background: var(--de-accent);
    border-color: var(--de-accent);
    color: var(--de-accent-ink);
}

.design-filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.3rem;
    height: 1.3rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--de-panel-2);
    color: var(--de-slate);
    font-size: 0.65rem;
    font-weight: 700;
}

.design-filter-pill.is-selected .design-filter-count {
    background: rgba(255, 255, 255, 0.28);
    color: var(--de-accent-ink);
}

.design-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

.design-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--de-panel-2);
    padding: 0.5rem;
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--de-slate);
    transition: border-color 0.15s;
}

.design-option:hover {
    border-color: var(--de-border);
}

.design-option.is-selected {
    border-color: var(--de-accent);
    color: var(--de-ink);
}

.design-name {
    text-align: center;
    line-height: 1.2;
}

.design-badge {
    border-radius: 999px;
    padding: 0.1rem 0.4rem;
    font-size: 0.6rem;
    font-weight: 600;
    background: var(--de-panel);
    color: var(--de-slate);
}

.design-option.is-selected .design-badge {
    background: var(--de-accent);
    color: var(--de-accent-ink);
}

/* ---------------------------------------------------------------- step 5: colours */

.product-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.product-card {
    display: flex;
    flex: 1;
    min-width: 10rem;
    flex-direction: column;
    gap: 0.5rem;
    border: 2px solid var(--de-border);
    border-radius: var(--radius-lg);
    background: none;
    padding: 0.75rem;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.product-card:hover {
    border-color: var(--de-slate);
}

.product-card.is-selected {
    border-color: var(--de-accent);
    background: var(--de-panel-2);
}

.product-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.product-card-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--de-ink);
}

.product-card-badge {
    border-radius: 999px;
    background: var(--de-accent);
    color: var(--de-accent-ink);
    padding: 0.1rem 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.product-card-size {
    font-size: 0.7rem;
    color: var(--de-slate);
}

.product-card-swatches {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.mini-swatch {
    display: block;
    height: 1rem;
    width: 1rem;
    border: 1px solid var(--de-border);
    border-radius: var(--radius-sm);
}

.product-card-count {
    margin-left: 0.25rem;
    font-size: 0.65rem;
    color: var(--de-slate);
}

.swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.sku-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: none;
    padding: 0.5rem;
    text-align: center;
    transition: border-color 0.15s, background 0.15s;
}

.sku-swatch:hover {
    border-color: var(--de-border);
}

.sku-swatch.is-selected {
    border-color: var(--de-accent);
    background: var(--de-panel-2);
}

.sku-swatch-figure {
    position: relative;
    display: block;
}

.sku-swatch-color {
    display: block;
    height: 3rem;
    width: 3rem;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    background-size: cover;
    background-position: center;
}

.swatch-check {
    position: absolute;
    right: -0.25rem;
    top: -0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.25rem;
    width: 1.25rem;
    border-radius: 999px;
    background: var(--de-accent);
    color: var(--de-accent-ink);
    box-shadow: var(--shadow-sm);
}

.swatch-check-icon {
    width: 0.75rem;
    height: 0.75rem;
}

.sku-swatch-name {
    max-width: 5.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    color: var(--de-slate);
}

.sku-swatch-price {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--de-ink);
}

.none-option {
    border: 2px solid var(--de-border);
    border-radius: var(--radius);
    background: none;
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    color: var(--de-slate);
}

.none-option.is-selected {
    border-color: var(--de-accent);
    background: var(--de-panel-2);
    color: var(--de-ink);
}

/* ---------------------------------------------------------------- step 6: paint */

.tool-row {
    display: flex;
    gap: 0.25rem;
}

.tool-button {
    flex: 1;
    border: 0;
    border-radius: var(--radius);
    background: var(--de-panel-2);
    color: var(--de-slate);
    padding: 0.35rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: capitalize;
}

.tool-button.is-active {
    background: var(--de-accent);
    color: var(--de-accent-ink);
}

.brush-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.brush-dot {
    height: 2.2rem;
    width: 2.2rem;
    border: 2px solid var(--de-border);
    border-radius: 999px;
}

.brush-dot.is-active {
    border-color: var(--de-accent);
}

/* ---------------------------------------------------------------- step 7: trim */

.trim-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.trim-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    padding: 0.4rem 0.5rem;
}

.trim-label {
    min-width: 0;
    font-size: 0.72rem;
    color: var(--de-ink);
}

.trim-select {
    width: 10rem;
    flex-shrink: 0;
    padding: 0.35rem 0.5rem;
    font-size: 0.72rem;
}

/* ---------------------------------------------------------------- step 8: non-tile */

.add-area-row {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.non-tile-card {
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    padding: 0.75rem;
}

.non-tile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.non-tile-head input {
    font-size: 0.82rem;
    font-weight: 500;
    padding: 0.3rem 0.5rem;
}

.non-tile-fields {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.5rem;
}

/* ---------------------------------------------------------------- 3D view */

.view-3d {
    position: relative;
    height: 100%;
    width: 100%;
    background: var(--de-canvas);
}

.view-3d-unsupported {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    text-align: center;
    color: var(--de-slate);
    font-size: 0.82rem;
}

.view-3d-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    pointer-events: none;
}

.view-3d-empty[hidden] {
    display: none;
}

.view-3d-empty p {
    max-width: 18rem;
    text-align: center;
    font-size: 0.82rem;
    color: var(--de-slate);
    margin: 0;
}

/* Sits just under the 2D/3D toggle (which is 1rem from the top-right corner and ~1.9rem
   tall), so the two never overlap. */
.view-3d-hint {
    position: absolute;
    right: 1rem;
    top: 3.2rem;
    display: none;
    margin: 0;
    font-size: 0.65rem;
    line-height: 1.2;
    text-align: right;
    color: var(--de-slate);
    pointer-events: none;
}

.scene-controls-host {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.scene-controls-bar {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem;
}

.scene-controls-left {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: auto;
}

.scene-controls-bar .zoom-buttons {
    pointer-events: auto;
}

.scene-button {
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    background: var(--de-panel);
    color: var(--de-ink);
    padding: 0.5rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 600;
    box-shadow: var(--shadow-sm);
}

.scene-button:hover {
    background: var(--de-panel-2);
}

.scene-button.is-open {
    border-color: var(--de-accent);
    background: var(--de-accent);
    color: var(--de-accent-ink);
}

.scene-panel {
    position: absolute;
    inset-inline: 0.75rem;
    bottom: 4rem;
    z-index: 10;
    border: 1px solid var(--de-border);
    border-radius: var(--radius-lg);
    background: var(--de-panel);
    padding: 0.75rem;
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    /* The Advanced section can make it tall; scroll inside rather than off the canvas. */
    max-height: calc(100% - 5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---- advanced section: move / export / record ---- */
.scene-advanced-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.35rem 0;
    border: 0;
    background: none;
    color: var(--de-ink);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    cursor: pointer;
}

.scene-advanced-chev {
    color: var(--de-slate);
    font-size: 0.8rem;
}

.scene-advanced-body {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding-top: 0.25rem;
}

.scene-export-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.scene-select {
    flex: 1 1 6rem;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    background: var(--de-panel-2);
    color: var(--de-ink);
    font: inherit;
    font-size: 0.72rem;
    padding: 0.35rem 1.5rem 0.35rem 0.5rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='%239aa0a6' d='M3 4.5 6 8l3-3.5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.45rem center;
}

.scene-button-primary {
    background: var(--de-accent);
    border-color: var(--de-accent);
    color: var(--de-accent-ink);
    align-self: flex-start;
}

.scene-button-primary:hover:not(:disabled) {
    background: var(--de-accent-dark);
    border-color: var(--de-accent-dark);
}

.scene-button:disabled {
    opacity: 0.55;
    cursor: wait;
}

.scene-progress {
    height: 0.4rem;
    border-radius: 999px;
    background: var(--de-border);
    overflow: hidden;
}

.scene-progress-fill {
    height: 100%;
    background: var(--de-accent);
    transition: width 0.1s linear;
}

.scene-notice {
    color: var(--de-ink);
    font-weight: 600;
}

.scene-mode-badge {
    align-self: center;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: var(--de-accent);
    color: var(--de-accent-ink);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.scene-move-tools {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.scene-controls-right {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    /* The host swallows no pointer input (so the canvas orbits underneath); each control group
       opts back in -- without this the Export button is drawn but cannot be clicked. */
    pointer-events: auto;
}

.scene-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scene-actions {
    margin-top: 0.4rem;
}

.scene-actions .scene-button {
    flex: 1;
}

/* The recorded clip, playable in place before it is downloaded. */
.scene-video-preview {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--de-border);
}

.scene-video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    background: #000;
}

/* The Export panel opens on the right, mirroring the Scene panel on the left. On a phone both
   span the full width (the base .scene-panel rule), so only the desktop placement differs. */
@media (min-width: 1024px) {
    /* Two classes, so this outranks the per-breakpoint .scene-panel placements further down. */
    .scene-panel.scene-panel-right {
        left: auto;
        right: 1rem;
        width: 19rem;
    }
}

.scene-panel-section h3 {
    margin: 0 0 0.4rem;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--de-slate);
}

.scene-panel-divided {
    border-top: 1px solid var(--de-border);
    padding-top: 0.75rem;
}

.scene-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.scene-car-colors {
    margin-top: 0.5rem;
}

.scene-sub {
    margin: 0.7rem 0 0.3rem;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--de-slate);
}

.scene-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.scene-pill {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--de-border);
    border-radius: 999px;
    background: var(--de-panel);
    color: var(--de-slate);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.scene-pill:hover {
    border-color: var(--de-slate);
    color: var(--de-ink);
}

.scene-pill.is-selected {
    border-color: var(--de-accent);
    background: var(--de-accent);
    color: var(--de-accent-ink);
}

.scene-swatch {
    height: 1.75rem;
    width: 1.75rem;
    flex-shrink: 0;
    border: 2px solid var(--de-border);
    border-radius: 999px;
    transition: border-color 0.15s;
}

.scene-swatch:hover {
    border-color: var(--de-slate);
}

.scene-swatch.is-selected {
    border-color: var(--de-accent);
}

.scene-car-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--de-ink);
}

.scene-car-toggle.is-disabled {
    opacity: 0.5;
}

.scene-car-toggle input {
    height: 1rem;
    width: 1rem;
    accent-color: var(--de-accent);
}

.scene-note {
    margin: 0.15rem 0 0;
    font-size: 0.65rem;
    color: var(--de-slate);
}

/* The "this room is too small for a car" message -- deliberately in the brand accent, since it
   is the one place the tool tells the customer they cannot have something. */
.scene-note.is-denied {
    color: var(--de-accent);
}

/* ---------------------------------------------------------------- review step */

.review-host {
    flex: 1;
    min-height: 0;
    display: flex;
}

.review-scroll {
    flex: 1;
    overflow-y: auto;
    background: var(--de-panel);
    padding: 1rem;
}

.review {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.print-title {
    display: none;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
}

.review-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.review-left,
.review-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.review-image {
    width: 100%;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
}

.review-facts {
    grid-template-columns: 1fr auto 1fr auto;
}

.review-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.82rem;
}

.review-table th {
    border-bottom: 1px solid var(--de-border);
    padding: 0.5rem 0;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--de-slate);
}

.review-table td {
    border-bottom: 1px solid var(--de-border);
    padding: 0.5rem 0;
}

.review-table .empty-row {
    padding: 1rem 0;
    text-align: center;
    color: var(--de-slate);
}

.review-totals {
    margin-left: auto;
    display: flex;
    width: 100%;
    max-width: 16rem;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.82rem;
}

.review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.download-menu {
    position: relative;
}

.download-menu button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.download-options {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 10;
    margin-bottom: 0.25rem;
    width: 11rem;
    overflow: hidden;
    border: 1px solid var(--de-border);
    border-radius: var(--radius);
    background: var(--de-panel);
    box-shadow: var(--shadow-lg);
}

.download-options button {
    display: block;
    width: 100%;
    border: 0;
    background: none;
    padding: 0.5rem 1rem;
    text-align: left;
    font-size: 0.82rem;
    color: var(--de-ink);
}

.download-options button:hover {
    background: var(--de-panel-2);
}

/* ---------------------------------------------------------------- quote modal */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.6);
}

.modal {
    width: 100%;
    max-width: 28rem;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: var(--radius-lg);
    background: var(--de-panel);
    padding: 1.5rem;
    box-shadow: var(--shadow-lg);
}

.modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.modal-head h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.quote-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Honeypot: off-screen rather than display:none, which some bots skip. */
.quote-form input[name='website'] {
    position: absolute;
    left: -9999px;
}

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------- desktop */

/* ============================================================================
   Responsive layout. Three regimes:
     < 1024px            phone / small tablet -- everything stacks, bottom step nav.
     1024px - 1399px     laptop -- the step rail FLOATS over the canvas (it no longer
                         eats a column), and the two side panels are trimmed, so the
                         design gets most of the width.
     >= 1400px           desktop / full HD -- the classic inline four-column layout.
   ============================================================================ */

/* ---- shared by laptop + desktop (>= 1024px) ---- */
@media (min-width: 1024px) {
    .designer-body,
    .workspace {
        flex-direction: row;
    }

    .stepper {
        display: flex;
    }

    .mobile-step-nav {
        display: none;
    }

    .canvas-column {
        order: 3;
        height: auto;
        min-height: 0;
        min-width: 0;
        flex: 1;
    }

    .canvas-stage {
        min-height: 0;
    }

    .step-panel {
        order: 2;
        flex: none;
        border-top: 0;
        border-right: 1px solid var(--de-border);
    }

    .step-actions {
        flex-direction: column;
        padding: 1rem;
    }

    .save-button {
        width: 100%;
    }

    .side-panel-slot {
        order: 4;
        max-height: none;
        height: 100%;
    }

    .side-panel {
        height: 100%;
        max-height: none;
        border-top: 0;
        border-left: 1px solid var(--de-border);
    }

    .summary-toggle {
        display: none;
    }

    .summary-body {
        display: flex;
        padding-top: 1rem;
    }

    .summary-heading {
        display: block;
    }

    .summary-heading-row {
        display: flex;
    }

    .summary-totals {
        margin-top: auto;
    }

    /* Collapsed ("icon view"): the slot shrinks to a strip and only the rail is drawn. */
    .side-panel-slot {
        transition: width 0.2s ease;
    }

    .side-panel-slot.is-collapsed {
        width: 3rem;
    }

    .summary-panel.is-collapsed .summary-body {
        display: none;
    }

    .summary-panel.is-collapsed .summary-rail {
        display: flex;
    }

    .summary-panel.is-collapsed {
        overflow: hidden;
    }

    .view-3d-hint {
        display: block;
    }

    .review-scroll {
        padding: 2rem;
    }

    .review-grid {
        grid-template-columns: 1.15fr 1fr;
    }

    .design-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .canvas-watermark img {
        height: 8rem;
    }

    .canvas-watermark p {
        font-size: 0.82rem;
    }
}

/* ---- laptop: floating step rail, trimmed side panels (1024px - 1399px) ---- */
@media (min-width: 1024px) and (max-width: 1399.98px) {
    /* The rail lifts out of the flow and hovers over the top-left of the canvas area, so it
       costs the layout nothing. Icons only -- the labels are dropped to keep it slim. */
    .stepper {
        position: absolute;
        z-index: 6;
        top: 0.5rem;
        left: 0.5rem;
        width: 3.4rem;
        max-height: calc(100% - 1rem);
        border: 1px solid var(--de-border);
        border-radius: var(--radius-lg);
        background: color-mix(in srgb, var(--de-panel) 92%, transparent);
        backdrop-filter: blur(6px);
        box-shadow: var(--shadow-lg);
        padding: 0.35rem 0;
    }

    .stepper button {
        padding: 0.5rem 0.2rem;
        border-left-width: 3px;
    }

    .stepper button span {
        display: none;
    }

    /* Make room for the floating rail at the left edge of whatever pane is showing. */
    .workspace,
    .review-host {
        padding-left: 3.9rem;
    }

    .step-panel {
        width: 17.5rem;
    }

    .step-scroll {
        padding: 1rem;
    }

    .side-panel-slot {
        width: 15rem;
    }

    .scene-panel {
        inset-inline: auto;
        left: 4.25rem;
        bottom: 5rem;
        width: 17rem;
    }
}

/* ---- desktop / full HD: inline four-column layout (>= 1400px) ---- */
@media (min-width: 1400px) {
    .step-panel {
        width: 21rem;
    }

    .step-scroll {
        padding: 1.25rem;
    }

    .side-panel-slot {
        width: 19rem;
    }

    .scene-panel {
        inset-inline: auto;
        left: 1rem;
        bottom: 5rem;
        width: 18rem;
    }
}

/* Extra elbow room for the canvas on genuinely large screens. */
@media (min-width: 1750px) {
    .step-panel {
        width: 22rem;
    }

    .side-panel-slot {
        width: 21rem;
    }
}

/* Short laptop screens (768px-high panels, or Full HD at 125% = 864px): trim the vertical
   chrome -- header, progress bar, panel paddings -- so the canvas keeps its height. */
@media (min-width: 1024px) and (max-height: 860px) {
    .designer-header {
        padding: 0.3rem 0.9rem;
    }

    .header-logo {
        height: 1.7rem;
    }

    .progress-wrap {
        padding: 0.35rem 0.5rem;
    }

    .progress-bar {
        height: 1.6rem;
    }

    .step-scroll {
        padding: 0.8rem;
    }

    .step-title {
        font-size: 1rem;
    }

    .step-actions {
        padding: 0.5rem 0.75rem;
    }

    .stepper button {
        padding: 0.4rem 0.2rem;
    }

    .summary-body {
        padding-top: 0.75rem;
    }
}

/* ---------------------------------------------------------------- print */

/*
 * Printing the floor design report: isolate #floor-designer-report from the rest of the designer
 * shell (header, icon rail, scroll containers) via visibility rather than display, so nothing
 * else reflows -- then pin the report to the top of the page so it flows as a single normal
 * document instead of inheriting the app's fixed-height/overflow-auto screen layout, which
 * otherwise clips content into a spurious near-blank second page.
 */
@media print {
    /* The app can be dark-themed on screen, but a dark-background printout wastes ink and is hard
       to read on paper -- force the report back to light regardless of the on-screen theme. */
    :root {
        --de-canvas: #ffffff;
        --de-panel: #ffffff;
        --de-panel-2: #ffffff;
        --de-ink: #1a1a1a;
        --de-slate: #4b4b4d;
        --de-border: #e6e6e8;
    }

    body * {
        visibility: hidden;
    }

    #floor-designer-report,
    #floor-designer-report * {
        visibility: visible;
    }

    #floor-designer-report {
        position: absolute;
        inset: 0;
        width: 100%;
        padding: 0;
    }

    .print-title {
        display: block;
    }

    .review-actions,
    .review-currency,
    .designer-header,
    .stepper,
    .mobile-step-nav {
        display: none !important;
    }

    .review-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .review-image {
        margin: 0 auto;
        max-height: 95mm;
        width: auto;
        max-width: 100%;
        object-fit: contain;
    }

    @page {
        margin: 10mm;
    }
}