/* V1.75: NTD perimeter and current wall, shared by desktop and mobile.
   Screen-pixel strokes keep the boundary clear at every navigator size. */
#appShell .l-shape-elevation-plan .ntd-perimeter,
#appShell .l-shape-elevation-plan .l-shape-nav-wall {
    fill: none;
    stroke: #ff0000;
    stroke-width: 8px;
    stroke-linejoin: miter;
    stroke-linecap: butt;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

#appShell .l-shape-elevation-plan .l-shape-nav-wall.selected {
    stroke: #a535ff;
    stroke-width: 8px;
}

#appShell .l-shape-elevation-plan .l-shape-nav-label.selected {
    fill: #7221b5;
}

#appShell .l-shape-elevation-plan .l-shape-nav-wall-hit:focus-visible {
    stroke: #a535ff;
    stroke-opacity: .25;
}

/* Desktop only: the approved navy surround, with white sidebar boxes.
   Match the inverse of the existing mobile layout query. Colour only;
   no changes to component sizing, placement, print or mobile backgrounds. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    :root,
    body,
    #appShell,
    #appShell main,
    #appShell .centre-stage,
    #appShell header,
    #appShell #controls,
    #appShell #drawingTools {
        background: #102a43 !important;
    }

    #appShell #controls > .group,
    #appShell #controls .l-shape-floor-return {
        background: #ffffff !important;
    }

    #appShell #controls .l-shape-elevation-plan-heading {
        color: #263746;
    }

    /* V1.76: desktop NTD uses the Choose Shape card layers. */
    #appShell #controls .l-shape-drawing-navigator {
        background: #ffffff;
        border: 1px solid #d4dbe0;
        border-radius: 12px;
        padding: 10px;
    }

    #appShell #controls .l-shape-elevation-plan {
        background: #cdcdcd;
        padding: 14px;
    }

    #appShell #controls .l-shape-floor-return {
        border: 1px solid #d4dbe0;
    }
}

/* Shared desktop floor/wall editor controls; mobile retains its own rules. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #controls > .tile-group {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #controls > .tile-group > h3 {
        grid-column: 1 / -1;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #controls > .tile-group > .field {
        margin: 0;
        min-width: 0;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #controls > .tile-group label {
        font-size: 11px !important;
        line-height: 12px;
        height: 12px;
        white-space: nowrap;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #controls > .tile-group label::before {
        content: none !important;
        font-size: 9px;
        color: #000000;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #controls > .tile-group input {
        min-width: 0;
        width: 100%;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #workspace #surfaceResults {
        display: none !important;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #workspace .floor-work {
        grid-template-columns: minmax(0, 1fr) 255px !important;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #workspace .results-rail #rightTools {
        margin: 0 !important;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #controls .desktop-wall-measurements {
        margin-top: 0;
        padding: 10px;
        background: #ffffff;
        border: 1px solid #d4dbe0;
        border-radius: 12px;
        color: #000000;
        grid-column: 1 / -1;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #controls .desktop-wall-measurements h3 {
        margin: 0 0 10px !important;
        color: #000000;
        font-size: 13px !important;
        letter-spacing: 0;
        font-weight: 800;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) .desktop-wall-measurements dl {
        display: grid;
        gap: 9px;
        margin: 0;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) .desktop-wall-measurements dl > div {
        display: grid;
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        align-items: start;
        gap: 5px;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) .desktop-wall-measurements dt,
    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) .desktop-wall-measurements dd {
        margin: 0;
        color: #000000;
        font-size: 12px;
        line-height: 1.3;
        overflow-wrap: anywhere;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) .desktop-wall-measurements dd {
        text-align: left;
        font-weight: 600;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools {
        align-items: stretch !important;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .zoom-group,
    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group,
    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .manual-adjustment-group {
        box-sizing: border-box;
        margin: 0 !important;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .zoom-group {
        flex: 0 0 190px;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 5px;
        align-content: start;
        flex: 1 1 420px !important;
        min-width: 320px;
        max-width: none;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group > h3 {
        grid-column: 1 / -1;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group > .setout-label,
    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group > .segmented {
        margin: 0 !important;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group > .setout-label:nth-of-type(1),
    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group > .segmented:nth-of-type(1) {
        grid-column: 1;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group > .setout-label:nth-of-type(2),
    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group > .segmented:nth-of-type(2) {
        grid-column: 2;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group > .setout-label {
        grid-row: 2;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group > .segmented {
        grid-row: 3;
        display: flex;
        gap: 3px;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools > .setout-group button {
        flex: 1 1 0;
        min-width: 0;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools .setout-summary {
        display: none !important;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools .wall-pan-row {
        margin-top: 8px;
        flex-wrap: nowrap;
    }

    #appShell:is(.desktop-wall-elevation, .desktop-floor-plan) #drawingTools .wall-pan-row button {
        padding: 5px 7px;
        font-size: 10px;
    }
}


/* V1.78: black wall headers and the existing header-button palette. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell.desktop-wall-elevation #controls h3,
    #appShell.desktop-wall-elevation #workspace h2,
    #appShell.desktop-wall-elevation #workspace h3,
    #appShell.desktop-wall-elevation #drawingTools h3,
    #appShell.desktop-wall-elevation .l-shape-elevation-plan-heading {
        color: #000000 !important;
    }

    #appShell.desktop-wall-elevation #workspace .title-row h2 {
        text-transform: uppercase;
    }

    #appShell.desktop-wall-elevation #workspace .results-rail #rightTools {
        background: #102a43 !important;
        border-color: #102a43 !important;
    }

    #appShell.desktop-wall-elevation #controls .l-shape-floor-return,
    #appShell.desktop-wall-elevation #drawingTools .setout-group button.active {
        background: #273543 !important;
        color: #dfe8ef !important;
        border-color: #52616d;
    }

    #appShell.desktop-wall-elevation #drawingTools .setout-group button:not(.active) {
        background: #ffffff;
        color: #17202a;
    }
}

/* Shared desktop/mobile navigation instructions. */
#appShell .l-shape-elevation-plan-heading span {
    display: block;
    font-size: 11px;
    line-height: 1.35;
    margin-top: 4px;
    color: #000;
}

#appShell .title-row:has(.floor-plan-view-instruction) {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#appShell .floor-plan-view-instruction {
    margin: 0;
    color: #000;
    font-size: 12px;
}

/* V1.80: approved start-page mockup; workspace presentation stays separate. */
#homeScreen {
    background: #102a43;
    padding-top: 28px;
    padding-bottom: 36px;
}

#homeScreen .home-topbar {
    margin-bottom: 24px;
}

#homeScreen .home-brand-image {
    display: block;
    width: 260px;
    max-width: 100%;
    height: auto;
    opacity: 1;
}

#homeScreen .version {
    color: #ffffff;
}

#homeScreen .home-project-bar,
#homeScreen .workflow-card {
    background: #ffffff;
    border: 4px solid #f28c18;
    border-radius: 12px;
}

#homeScreen .home-project-bar {
    padding: 22px 18px;
}

#homeScreen .home-project-summary strong,
#homeScreen .workflow-heading h2,
#homeScreen .workflow-card strong {
    text-transform: uppercase;
}

#homeScreen .workflow-heading.compact {
    margin: 30px 0 16px;
}

#homeScreen .workflow-heading .eyebrow {
    color: #f28c18;
}

#homeScreen .workflow-heading h2 {
    color: #ffffff;
}

#homeScreen .workflow-card {
    min-height: 108px;
    padding: 20px 12px;
    grid-template-columns: 48px minmax(0, 1fr);
}

#homeScreen .workflow-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: #fff1e3;
    color: #f28c18;
}

@media (max-width: 800px),
       (orientation: portrait) and (max-width: 1100px) {
    #homeScreen {
        padding: 18px 12px 28px;
    }

    #homeScreen .home-brand {
        min-width: 0;
    }

    #homeScreen .home-brand-image {
        width: 240px;
    }

    #homeScreen .home-project-bar {
        padding: 16px 12px;
    }

    #homeScreen .workflow-card {
        min-height: 96px;
        padding: 16px 12px;
    }
}

/* V1.81: Sansita throughout, with the exact replacement brand image. */
:root,
body,
body *,
button,
input,
select,
textarea {
    font-family: 'Sansita', Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
}

#homeScreen .home-brand-image {
    width: 360px;
}

.brand-button .header-brand-image {
    opacity: 1;
}

@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell.desktop-wall-elevation #controls > .tile-group {
        grid-column: 1 / -1;
        grid-row: auto !important;
    }
}

@media (max-width: 800px),
       (orientation: portrait) and (max-width: 1100px) {
    #homeScreen .home-brand-image {
        width: 280px;
    }
}

/* V1.82: taller desktop drawings and navy workflow setup pages. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell #workspace #canvas.canvas-wrap {
        aspect-ratio: 2 / 1 !important;
    }
}

#floorShapeScreen,
#lShapeSetupScreen,
#floorShapeScreen .setup-page-header,
#lShapeSetupScreen .setup-page-header {
    background: #102a43;
}

#floorShapeScreen .floor-shape-heading h2,
#floorShapeScreen .floor-shape-heading p,
#lShapeSetupScreen .l-shape-setup-heading-row h2,
#lShapeSetupScreen .l-shape-setup-heading-row p {
    color: #ffffff;
}

#floorShapeScreen .floor-shape-eyebrow {
    color: #f28c18;
}





@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell #controls > .group,
    #appShell #controls .l-shape-drawing-navigator,
    #appShell #controls .desktop-wall-measurements,
    #appShell #controls .desktop-floor-measurements {
        background: #edf2f5 !important;
    }
    #appShell.desktop-floor-plan #controls > .group,
    #appShell.desktop-floor-plan #controls > .desktop-floor-measurements {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
    #appShell.desktop-floor-plan #controls .desktop-floor-measurements {
        padding: 10px;
        border: 1px solid #d4dbe0;
        border-radius: 12px;
        margin: 0;
        width: 100%;
    }
    #appShell.desktop-floor-plan .desktop-floor-measurements h3 {
        color: #000;
        font-size: 13px;
        letter-spacing: 0;
        margin: 0 0 12px;
    }
    #appShell.desktop-floor-plan .desktop-floor-measurements .result-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
    #appShell.desktop-floor-plan .desktop-floor-measurements .result-grid > div {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        gap: 6px;
        align-items: start;
        grid-column: auto;
    }
    #appShell.desktop-floor-plan .desktop-floor-measurements span,
    #appShell.desktop-floor-plan .desktop-floor-measurements b {
        color: #000;
        font-size: 12px;
        text-align: left;
        overflow-wrap: anywhere;
    }
    #appShell.desktop-floor-plan .desktop-floor-measurements span {
        text-transform: uppercase;
    }
    #appShell.desktop-floor-plan #controls .tile-group label::before {
        content: none !important;
    }
    #appShell.desktop-floor-plan #controls .tile-group label {
        font-size: 11px !important;
    }
}

@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell.desktop-floor-plan #controls h3,
    #appShell.desktop-floor-plan #drawingTools h3 {
        color: #000;
    }
    #appShell.desktop-floor-plan #workspace h2 {
        text-transform: uppercase;
    }
    #appShell.desktop-floor-plan #drawingTools > .group:has(.pattern-grid) {
        flex: 0 0 200px !important;
        min-width: 0 !important;
        max-width: 200px;
    }
    #appShell.desktop-floor-plan #drawingTools > .zoom-group {
        flex: 0 0 160px;
    }
    #appShell.desktop-floor-plan #drawingTools > .manual-adjustment-group {
        flex: 0 0 180px !important;
        min-width: 180px !important;
    }
    #appShell.desktop-floor-plan #drawingTools > .setout-group {
        min-width: 380px;
    }
}

@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell.desktop-floor-plan #drawingTools > .group {
        box-sizing: border-box;
    }
    #appShell.desktop-floor-plan #drawingTools .pattern-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px;
    }
    #appShell.desktop-floor-plan #drawingTools .pattern-grid button {
        min-width: 0 !important;
        width: 100%;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools > .manual-adjustment-group {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-content: start;
        gap: 7px;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools > .manual-adjustment-group > * {
        grid-column: 1 !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools > .manual-adjustment-group button {
        min-width: 0 !important;
        width: 100%;
    }
}

/* V1.84: desktop controls fit their content and leave the drawing room. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell #drawingTools > .group {
        height: auto !important;
        min-height: 0 !important;
    }
    #appShell #drawingTools button {
        min-height: 28px !important;
        padding: 4px 8px !important;
        line-height: 1.2;
    }
    #appShell .l-shape-elevation-plan .ntd-perimeter,
    #appShell .l-shape-elevation-plan .l-shape-nav-wall,
    #appShell .l-shape-elevation-plan .l-shape-nav-wall.selected {
        stroke-width: 3px;
    }
    #appShell #controls > .bathroom-pattern-group {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        margin: 0;
        padding: 8px;
        border-radius: 12px;
        border: 1px solid #d4dbe0;
    }
    #appShell #controls .bathroom-pattern-group h3 {
        margin: 0 0 6px;
        padding: 0;
        color: #000;
    }
    #appShell #controls .bathroom-pattern-group .pattern-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 5px;
    }
    #appShell #controls .bathroom-pattern-group button {
        min-width: 0;
        min-height: 28px;
        padding: 4px 6px;
    }
    #appShell #controls > .tile-group,
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #controls > .size-group {
        padding: 8px !important;
    }
    #appShell #controls > .tile-group > h3,
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #controls > .size-group > h3 {
        padding: 0 !important;
        margin: 0 0 6px !important;
    }
}

/* V1.85: share the actual desktop viewport between drawing and toolbar. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell .centre-stage {
        height: 100%;
        min-height: 0 !important;
    }
    #appShell #workspace {
        flex: 1 1 0 !important;
        min-height: 0 !important;
    }
    #appShell #workspace > .panel {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 0;
    }
    #appShell #workspace .title-row {
        flex: 0 0 auto;
    }
    #appShell #workspace .floor-work {
        flex: 1 1 0;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
    }
    #appShell #workspace #canvas.canvas-wrap {
        height: 100% !important;
        min-height: 0 !important;
        max-height: none !important;
        aspect-ratio: auto !important;
    }
    #appShell #workspace .results-rail {
        max-height: 100%;
        min-height: 0;
        overflow-y: auto;
        border-right: 0 !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools {
        align-items: stretch !important;
        overflow: visible !important;
        padding: 6px 14px !important;
    }
    #appShell #drawingTools > .group {
        height: auto !important;
        min-height: 0 !important;
        padding: 5px 8px !important;
    }
    #appShell #drawingTools > .group h3 {
        margin: 0 0 3px !important;
        line-height: 12px;
    }
    #appShell #drawingTools button {
        min-height: 26px !important;
        padding: 3px 4px !important;
        font-size: 10px;
        line-height: 11px;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools > .setout-group {
        row-gap: 3px;
        column-gap: 8px;
        min-width: 0;
    }
    #appShell #drawingTools .setout-label {
        font-size: 11px;
        line-height: 12px;
    }
    #appShell #drawingTools .wall-pan-row {
        margin-top: 4px;
    }
}

/* V1.86: continuous navy surround; retain borders on the cards themselves. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell #controls,
    #appShell #drawingTools {
        border: 0 !important;
    }
}

/* V1.87: no desktop floor summary; taller Set-out buttons, persistent Pan row. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools .setout-group button {
        min-height: 36px !important;
        font-size: 11px;
        line-height: 13px;
    }
}

/* V1.88: approved Bathroom rectangle floor is the desktop floor template.
   Card content may vary; the outer frame and toolbar geometry do not. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) main.work-layout {
        grid-template-columns: 250px minmax(0, 1fr) !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #controls {
        width: 250px;
        min-width: 250px;
        max-width: 250px !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #workspace .title-row {
        min-height: 46px;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 4px;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #workspace .title-row h2 {
        font-size: 24px;
        font-weight: 700;
        color: #000;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools > .group {
        height: 87px !important;
        min-height: 87px !important;
        max-height: 87px;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools > .zoom-group {
        flex: 0 0 160.305px !important;
        min-width: 160.305px;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools > .manual-adjustment-group {
        flex: 0 0 160.305px !important;
        min-width: 160.305px !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools > .setout-group {
        flex: 1 1 0 !important;
        min-width: 0;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools .setout-group button {
        padding: 3px 4px !important;
        overflow-wrap: anywhere;
    }
}

/* V1.89: approved floor-template spacing and toolbar width redistribution. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #controls > .wall-height-group .field {
        margin: 0 !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) .desktop-floor-measurements h3 {
        margin-bottom: 19px !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #controls > .tile-group > h3 {
        margin-bottom: 0 !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #controls > .tile-group {
        row-gap: 6px;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #controls > .tile-group > .field {
        margin: 0 !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #controls > .tile-group label {
        margin: 0 0 3px !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) .desktop-floor-measurements .result-grid > div {
        grid-template-columns: 75px minmax(0, 1fr);
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools .manual-adjustment-group button {
        white-space: nowrap;
        width: 100%;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools .segmented:has(> button[data-value="external-corner"]):has(> button[data-shower-position-button]:not([hidden])) > button {
        padding: 1px 3px !important;
        font-size: 10px;
        line-height: 11px;
    }
}

/* V1.90: consistent floor headings and compact content rhythm. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) .desktop-floor-measurements .result-grid {
        gap: 2px;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) .desktop-floor-measurements .result-grid > div {
        padding-bottom: 3px;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools h3,
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #workspace #rightTools h3 {
        color: #000;
        font-size: 12px;
        font-weight: 700;
        line-height: 14px;
        text-transform: uppercase;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools button {
        min-height: 24px !important;
        padding: 2px 4px !important;
        line-height: 11px;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools .setout-group button {
        min-height: 32px !important;
    }
    #appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools .segmented:has(> button[data-value="external-corner"]):has(> button[data-shower-position-button]:not([hidden])) > button {
        padding: 1px 3px !important;
    }
}

/* Brick direction belongs to floor Pattern controls, not the narrow Zoom buttons. */
#appShell.desktop-floor-plan #controls #rotateBrick {
    width: auto;
    min-width: 88px;
    white-space: nowrap;
}

#appShell.desktop-floor-plan #controls .zoom-row:has(#rotateBrick) {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Floor set-out references do not operate on the two visual rotated patterns. */
#appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools > .setout-unavailable .setout-label {
    opacity: 0.4;
}
#appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #drawingTools > .setout-unavailable .segmented button {
    opacity: 0.4;
    background: #edf1f4 !important;
    color: #555 !important;
    border-color: #d7dde2 !important;
    cursor: not-allowed;
}

/* Shared desktop floor return control, aligned to the middle header workflow. */
#appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #workspace .title-row {
    position: relative;
}
#appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #workspace .floor-setup-back {
    position: absolute;
    box-sizing: border-box;
    background: #273543;
    color: #dfe8ef;
    border: 0;
    cursor: pointer;
}
#appShell:is(.desktop-floor-plan, .desktop-wall-elevation) #workspace .floor-setup-back:hover {
    background: #344657;
}

@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell > header .project-title {
        font-size: 24px;
        font-weight: 700;
        line-height: 1.2;
    }
}

/* V1.97: desktop wall cards use the accepted floor parameters.
   Keep the existing desktop/mobile conditions and the 250px floor sidebar. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell.desktop-wall-elevation #controls {
        box-sizing: border-box;
        grid-template-columns: minmax(0, 1fr) !important;
        scrollbar-width: none;
    }

    #appShell.desktop-wall-elevation #controls::-webkit-scrollbar {
        display: none;
    }

    #appShell.desktop-wall-elevation #controls > .group,
    #appShell.desktop-wall-elevation #controls > .desktop-wall-measurements {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }

    #appShell.desktop-wall-elevation #controls > .size-group {
        width: 100%;
    }

    #appShell.desktop-wall-elevation #controls > .tile-group {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px 5px;
        padding: 8px !important;
    }

    #appShell.desktop-wall-elevation #controls > .tile-group h3 {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        font-weight: 700;
        line-height: 14px;
    }

    #appShell.desktop-wall-elevation #controls > .tile-group .field {
        margin: 0 !important;
        min-width: 0;
    }

    #appShell.desktop-wall-elevation #controls > .tile-group label {
        font-size: 11px !important;
        line-height: 12px;
        height: 12px;
        margin: 0 0 3px !important;
    }

    #appShell.desktop-wall-elevation #controls > .tile-group input {
        box-sizing: border-box;
        height: 27px;
        padding: 3px 6px;
        font-size: 12px;
    }

    #appShell.desktop-wall-elevation #controls .desktop-wall-measurements {
        box-sizing: border-box;
        width: 100%;
        margin: 0;
        padding: 10px;
        border: 1px solid #d4dbe0;
        border-radius: 12px;
    }

    #appShell.desktop-wall-elevation #controls .desktop-wall-measurements h3 {
        margin: 1px 0 19px !important;
        padding: 0;
        font-size: 13px !important;
        font-weight: 700;
        line-height: 15px;
    }

    #appShell.desktop-wall-elevation .desktop-wall-measurements dl {
        gap: 2px;
    }

    #appShell.desktop-wall-elevation .desktop-wall-measurements dl > div {
        grid-template-columns: 75px minmax(0, 1fr);
        gap: 6px;
        padding-bottom: 3px;
        border-bottom: 1px solid #d7dfe4;
    }

    #appShell.desktop-wall-elevation .desktop-wall-measurements dt,
    #appShell.desktop-wall-elevation .desktop-wall-measurements dd {
        font-size: 12px;
        line-height: 14px;
        text-align: left;
    }

    #appShell.desktop-wall-elevation .desktop-wall-measurements dd {
        font-weight: 700;
    }

    #appShell.desktop-wall-elevation #controls .l-shape-controls-navigator-slot .l-shape-elevation-plan {
        /* Shorter desktops give space to the cards without clipping controls. */
        height: clamp(60px, calc(100dvh - 650px), 150px);
        min-height: 0;
        max-height: 150px;
        aspect-ratio: auto;
    }

    #appShell.desktop-wall-elevation #controls .l-shape-floor-return {
        min-height: 36px;
        margin-top: 8px;
        border: 0;
        border-radius: 8px;
        font-size: 13px;
    }

    #appShell.desktop-wall-elevation #drawingTools h3 {
        font-size: 13px !important;
        line-height: 15px;
        font-weight: 700;
    }

    #appShell.desktop-wall-elevation #drawingTools > .manual-adjustment-group {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 18px 24px 24px !important;
        align-items: start !important;
        align-content: start;
        gap: 4px !important;
    }

    #appShell.desktop-wall-elevation #drawingTools > .manual-adjustment-group h3 {
        grid-column: 1 !important;
        grid-row: 1;
        margin: 0 0 3px !important;
        white-space: nowrap;
    }

    #appShell.desktop-wall-elevation #drawingTools > .manual-adjustment-group #lockBtn {
        grid-row: 2;
    }

    #appShell.desktop-wall-elevation #drawingTools > .manual-adjustment-group #revertBtn {
        grid-row: 3;
    }

    #appShell.desktop-wall-elevation #drawingTools > .manual-adjustment-group button {
        grid-column: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 24px;
        min-height: 24px !important;
        margin: 0 !important;
        padding: 2px 4px !important;
        font-size: 10px;
        line-height: 11px;
    }

    #appShell.desktop-wall-elevation #drawingTools .manual-adjustment-group .drag-help {
        display: none !important;
    }

    #appShell.desktop-wall-elevation #rightTools .opening-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px 6px;
    }

    #appShell.desktop-wall-elevation #rightTools .opening-fields .field {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 3px;
        min-width: 0;
        margin: 0;
    }

    #appShell.desktop-wall-elevation #rightTools .opening-fields label {
        min-height: 36px;
        margin: 0;
        font-size: 10px;
        line-height: 12px;
    }

    #appShell.desktop-wall-elevation #rightTools .opening-fields input {
        box-sizing: border-box;
        width: 100%;
        height: 28px;
        min-width: 0;
        margin: 0;
    }
}

/* V1.98: wall headings, floor-style BACK, and consistent card typography. */
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell.desktop-wall-elevation #workspace .title-row {
        position: relative;
        min-height: 48px;
    }

    #appShell.desktop-wall-elevation .wall-dimensions {
        margin: 0;
        color: #000;
        font-size: 13px;
        line-height: 15px;
        font-weight: 700;
    }

    #appShell.desktop-wall-elevation #workspace .floor-setup-back {
        position: absolute;
        box-sizing: border-box;
        background: #273543;
        color: #dfe8ef;
        border: 0;
        cursor: pointer;
    }

    #appShell.desktop-wall-elevation #workspace .floor-setup-back:hover {
        background: #344657;
    }

    #appShell.desktop-wall-elevation #controls h3,
    #appShell.desktop-wall-elevation #controls > .tile-group h3,
    #appShell.desktop-wall-elevation #controls .desktop-wall-measurements h3,
    #appShell.desktop-wall-elevation #controls .l-shape-elevation-plan-heading strong {
        color: #000;
        font-size: 13px !important;
        line-height: 15px;
        font-weight: 700;
        text-transform: uppercase;
    }
}

#appShell.desktop-wall-elevation #controls #rotateBrick {
    width: auto;
    min-width: 88px;
    white-space: nowrap;
}

#appShell.desktop-wall-elevation #controls .zoom-row:has(#rotateBrick) {
    display: flex;
    align-items: center;
    gap: 8px;
}

.shower-placement-help {
    padding: 0 8px 8px;
    font-size: 12px;
    line-height: 1.3;
}

.shower-placement-help p {
    margin: 0 0 6px;
}

.shower-placement-help button {
    width: 100%;
}

/* V2.02: approved picture cards, scoped to the opening page. */
#homeScreen .home-shell {
    max-width: 1200px;
}

#homeScreen .workflow-cards {
    gap: 18px;
    align-items: stretch;
}

#homeScreen .workflow-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 96px;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    min-height: 0;
    padding: 0;
    overflow: hidden;
    border: 4px solid #f28c18;
    border-radius: 12px;
    color: #111111;
    background: #ffffff;
}

#homeScreen .workflow-art {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 600 / 380;
    object-fit: cover;
}

#homeScreen .workflow-copy {
    align-content: center;
    gap: 5px;
    padding: 14px 42px 14px 18px;
    background: #ffffff;
}

#homeScreen .workflow-card strong {
    font-size: clamp(18px, 1.7vw, 24px);
    line-height: 1.15;
}

#homeScreen .workflow-card small {
    margin: 0;
    color: #43515b;
    font-size: 13px;
    line-height: 1.3;
}

#homeScreen .workflow-arrow {
    position: absolute;
    right: 16px;
    bottom: 27px;
    color: #f28c18;
    font-size: 44px;
    font-weight: 400;
    line-height: 1;
}

#homeScreen .workflow-card:hover {
    border-color: #ff9e30;
    box-shadow: 0 5px 16px #00000026;
}

#homeScreen .workflow-card:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 4px;
}

@media (max-width: 800px),
       (orientation: portrait) and (max-width: 1100px) {
    #homeScreen .home-project-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    #homeScreen .home-action-button {
        min-height: 42px;
        padding: 8px 6px;
        font-size: 12px;
        line-height: 1.2;
    }

    #homeScreen .workflow-heading.compact {
        margin: 24px 0 14px;
    }

    #homeScreen .workflow-cards {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    #homeScreen .workflow-card {
        grid-template-columns: 38% minmax(0, 1fr);
        grid-template-rows: minmax(110px, auto);
    }

    #homeScreen .workflow-art {
        height: 100%;
        min-height: 110px;
        aspect-ratio: auto;
        object-fit: cover;
    }

    #homeScreen .workflow-copy {
        padding: 12px 28px 12px 12px;
        gap: 6px;
    }

    #homeScreen .workflow-card strong {
        font-size: clamp(16px, 4.4vw, 22px);
    }

    #homeScreen .workflow-card small {
        font-size: 12px;
        line-height: 1.3;
    }

    #homeScreen .workflow-arrow {
        top: 50%;
        right: 8px;
        bottom: auto;
        transform: translateY(-50%);
        font-size: 32px;
    }
}

/* V2.06: explicit Home action beside the project heading. */
#appShell > header .header-project-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
#appShell > header .header-home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    padding: 4px;
    background: transparent;
    color: #fff;
    border-radius: 7px;
}
#appShell > header .header-home-button svg {
    width: 28px;
    height: 28px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
#appShell > header .header-home-button:hover {
    background: #273543;
}
#appShell > header .header-home-button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell > header {
        display: grid;
        grid-template-columns: 242px minmax(0, 1fr) auto auto;
    }
    #appShell > header .header-project-heading .project-title {
        min-width: 0;
        max-width: none;
    }
}
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    #appShell > header .header-project-heading {
        grid-column: 2;
        grid-row: 1;
        justify-content: flex-end;
        gap: 4px;
    }
    #appShell > header .header-home-button {
        flex-basis: 28px;
        width: 28px;
        height: 30px;
    }
    #appShell > header .header-home-button svg {
        width: 22px;
        height: 22px;
    }
}

/* V2.07: shape chooser uses the exact Start-page artwork at its larger size. */
#floorShapeScreen .setup-page-header {
    height: auto;
    min-height: 138px;
    padding: 18px 22px;
    justify-content: center;
}
#floorShapeScreen .shape-page-brand-image {
    display: block;
    width: 360px;
    max-width: calc(100vw - 90px);
    height: auto;
}
#appShell > header .header-left {
    display: contents;
}
@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell > header {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }
    #appShell > header .header-left {
        display: flex;
        align-items: center;
        gap: 12px;
        min-width: 0;
        grid-column: 1;
        grid-row: 1;
    }
    #appShell > header .header-left > .header-project-heading {
        flex: 1 1 0;
        min-width: 0;
    }
    #appShell > header #homeBtn {
        grid-column: 2;
        grid-row: 1;
        justify-self: center;
    }
    #appShell > header nav {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
        min-width: 0;
    }
}

@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    #appShell > header #homeBtn {
        position: relative;
    }
    #appShell > header #homeBtn .brand-version {
        position: absolute;
        left: calc(100% + 8px);
        top: 0;
    }
}


/* V2.08: match the shape chooser branding without changing compact sizing. */
#lShapeSetupScreen .l-shape-page-brand-image {
    display: block;
    width: 185px;
    max-width: 100%;
    height: auto;
}

@media (max-width: 700px),
       (orientation: portrait) and (max-width: 1100px) {
    #lShapeSetupScreen .l-shape-page-brand-image {
        width: 148px;
    }
}

@media screen and (min-width: 701px) and (orientation: landscape),
       screen and (min-width: 1101px) {
    /* 22px header inset + 250px heading + 12px gap = canvas edge at 284px.
       The heading may contract on narrow desktops to keep controls apart. */
    #appShell > header .header-left > .header-project-heading {
        flex: 0 1 250px;
    }

    #lShapeSetupScreen .setup-page-header {
        height: auto;
        min-height: 138px;
        padding: 18px 22px;
        justify-content: center;
    }

    #lShapeSetupScreen .l-shape-page-brand-image {
        width: 360px;
        max-width: calc(100vw - 90px);
    }
}

/* V2.08: one clear desktop interaction treatment, including dialogs,
   workflow/shape cards, header actions and expandable opening controls.
   Important declarations override earlier selected-control colours only
   during interaction; no dimensions or persistent selection change. */
@layer desktop-interaction {
    @media screen and (min-width: 701px) and (orientation: landscape) and (hover: hover),
           screen and (min-width: 1101px) and (hover: hover) {
        :is(button, summary):not(:disabled):not([aria-disabled="true"]):not([aria-disabled="true"] *) {
            transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
        }

        :is(button, summary):not(:disabled):not([aria-disabled="true"]):not([aria-disabled="true"] *):is(:hover, :focus-visible) {
            background: #f28c18 !important;
            color: #102a43 !important;
            border-color: #b85d00 !important;
            box-shadow: inset 0 0 0 2px #b85d00 !important;
        }

        /* Picture-card captions have their own white backing. */
        #homeScreen .workflow-card:is(:hover, :focus-visible) .workflow-copy {
            background: #f28c18;
        }

        #homeScreen .workflow-card:is(:hover, :focus-visible) :is(strong, small, .workflow-arrow),
        .floor-shape-card:is(:hover, :focus-visible) :is(strong, small) {
            color: #102a43;
        }

        /* SVG wall targets are buttons too; highlight the real wall interval. */
        svg [role="button"]:not([aria-disabled="true"]):is(:hover, :focus-visible) {
            stroke: #f28c18 !important;
            stroke-opacity: 0.75 !important;
        }
    }
}

/* The drawing column centres its 1100px canvas above a 1687px viewport.
   Follow that same inset without moving the canvas or the centred logo. */
@media screen and (min-width: 1360px) {
    #appShell > header .header-left > .header-project-heading {
        flex: 0 0 calc(250px + max(0px, (100vw - 1687px) / 2));
    }
}

@media (prefers-reduced-motion: reduce) {
    :is(button, summary) {
        transition: none !important;
    }
}


/* V2.09: keep the first action at the canvas edge on narrower desktops.
   Fit the action group into the available space instead of shifting it left. */
@media screen and (min-width: 1101px) and (max-width: 1359px) {
    #appShell > header .header-left > .header-project-heading {
        flex: 0 0 250px;
    }

    #appShell > header .header-project-actions {
        display: grid;
        grid-template-columns: 1.4fr 1fr 0.95fr;
        width: calc((100vw - 803px) / 2);
        gap: 6px;
        align-items: stretch;
    }

    #appShell > header .header-project-actions button {
        min-width: 0;
        min-height: 34px;
        padding: 5px 4px;
        font-size: clamp(8px, 0.8vw, 10px);
        line-height: 1.1;
        overflow-wrap: anywhere;
    }
}