:root {
    font-family:Inter,system-ui,Arial,sans-serif;
    color:#17202a;
    background:#eef1f4
}





* {
    box-sizing:border-box
}

body {
    margin:0
}

header {
    height:64px;
    background:#18212b;
    color:white;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 22px;
    gap:20px
}

header strong {
    font-size:20px
}

header span {
    margin-left:10px;
    font-size:12px;
    opacity:.6
}

nav {
    display:flex;
    gap:8px
}

button {
    border:0;
    border-radius:7px;
    padding:10px 14px;
    cursor:pointer
}

nav button {
    background:#273543;
    color:#dfe8ef
}

nav button.active {
    background:white;
    color:#17202a
}

main {
    display:grid;
    grid-template-columns:300px 1fr;
    min-height:calc(100vh - 64px)
}

aside {
    background:white;
    border-right:1px solid #d7dde2;
    padding:20px
}

.group {
    margin-bottom:22px
}

.group h3 {
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:#65717c
}

.field {
    margin:10px 0
}

.field label {
    display:block;
    font-size:12px;
    margin-bottom:5px;
    color:#53606b
}

.field input {
    width:100%;
    padding:9px;
    border:1px solid #c9d0d6;
    border-radius:6px
}

.summary {
    font-size:13px;
    line-height:1.6;
    background:#f4f6f8;
    padding:12px;
    border-radius:8px
}

#workspace {
    padding:24px;
    overflow:auto
}

.panel {
    background:white;
    border-radius:10px;
    padding:20px;
    min-height:600px;
    box-shadow:0 1px 3px #00000012
}

.title-row {
    display:flex;
    justify-content:space-between;
    align-items:end;
    margin-bottom:15px
}

.title-row h2 {
    margin:0
}

.muted {
    color:#697680;
    font-size:13px
}

.canvas-wrap {
    position:relative;
    background:#f7f8f9;
    border:1px solid #dce1e5;
    border-radius:8px;
    padding:55px;
    min-height:500px;
    display:flex;
    align-items:center;
    justify-content:center
}

.floor {
    position:relative;
    background:#ddd;
    border:3px solid #20272d;
    box-shadow:0 2px 8px #0002
}

.tile {
    position:absolute;
    background:#f8f5ed;
    border:1px solid #9da5aa;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:9px;
    color:#4b5358;
    overflow:hidden
}

.dir {
    position:absolute;
    font-weight:700;
    color:#56616a;
    white-space:nowrap;
    z-index:2
}

.north {
    top:18px;
    left:50%
}

.south {
    bottom:18px;
    left:50%
}

.west {
    left:18px;
    top:50%
}

.east {
    right:18px;
    top:50%
}

@media (max-width: 800px), (orientation: portrait) and (max-width: 1100px), (orientation: portrait) and (max-width: 1100px) {
    main {
        grid-template-columns:1fr
    }
    aside {
        border-right:0;
        border-bottom:1px solid #d7dde2
    }
    header {
        height:auto;
        padding:12px;
        flex-wrap:wrap
    }
    #workspace {
        padding:10px
    }
    .canvas-wrap {
        padding:45px 35px
    }
}

.setout-label {
    display:block;
    font-size:12px;
    color:#53606b;
    margin:12px 0 6px
}

.segmented {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:4px;
    margin-bottom:10px
}

.segmented button {
    padding:8px 4px;
    font-size:11px;
    background:#edf1f4;
    color:#45515b;
    border:1px solid #d7dde2
}

.segmented button.active {
    background:#263746;
    color:#fff;
    border-color:#263746
}

.setout-summary {
    margin-top:12px
}

.floor-work {
    display:grid;
    grid-template-columns:minmax(0,1fr) 230px;
    gap:16px;
    align-items:stretch
}

.results-panel {
    background:#f4f6f8;
    border:1px solid #dce1e5;
    border-radius:8px;
    padding:16px
}

.results-panel h3 {
    margin:0 0 14px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:#65717c
}

.result-grid {
    display:grid;
    gap:10px
}

.result-grid>div {
    display:flex;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid #dce1e5;
    padding-bottom:8px
}

.result-grid span {
    font-size:12px;
    color:#65717c
}

.result-grid b {
    font-size:13px;
    text-align:right
}

.status {
    margin-top:16px;
    padding:10px;
    border-radius:7px;
    background:#e7ecef;
    font-size:12px
}

.status.warn {
    background:#fff0c9
}

.lock-btn,.revert-btn {
    width:100%;
    margin-bottom:7px;
    border:1px solid #ccd4da
}

.lock-btn.locked {
    background:#263746;
    color:white
}

.lock-btn.unlocked {
    background:#fff0c9;
    color:#382d0b
}

.revert-btn {
    background:#edf1f4;
    color:#45515b
}

.revert-btn:disabled {
    opacity:.45;
    cursor:not-allowed
}

.drag-help {
    font-size:11px;
    line-height:1.4;
    color:#697680;
    margin-top:4px
}

.floor.draggable {
    cursor:grab;
    touch-action:none
}

.floor.draggable:active {
    cursor:grabbing
}

@media(max-width:1050px) {
    .floor-work {
        grid-template-columns:1fr
    }
    .results-panel {
        display:block
    }
    .result-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}

.wall-picker {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px
}

.wall-picker button {
    background:#edf1f4;
    color:#45515b;
    border:1px solid #d7dde2
}

.wall-picker button.active {
    background:#263746;
    color:#fff
}

.wall-canvas .north,.wall-canvas .south {
    font-size:11px
}

.wall-canvas .west,.wall-canvas .east {
    font-size:11px
}

.surface-picker {
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:6px
}

.surface-picker button:first-child {
    grid-column:1/-1
}

.surface-picker button {
    background:#edf1f4;
    color:#45515b;
    border:1px solid #d7dde2
}

.surface-picker button.active {
    background:#263746;
    color:#fff;
    border-color:#263746
}

.follow-btn {
    width:100%;
    background:#e8eef2;
    color:#263746;
    border:1px solid #cbd5dc;
    font-weight:700
}

.floor-link-note {
    margin-top:14px;
    padding:10px;
    border-radius:7px;
    background:#eaf2f6;
    font-size:12px;
    line-height:1.45
}

.opening-control {
    border:1px solid #d7dde2;
    border-radius:8px;
    margin:8px 0;
    overflow:hidden
}

.toggle-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px 12px;
    font-size:13px;
    font-weight:700;
    background:#f4f6f8
}

.toggle-row input {
    width:18px;
    height:18px
}

.opening-fields {
    padding:4px 12px 8px
}

.opening {
    position:absolute;
    z-index:5;
    border:3px solid #34434f;
    background:rgba(225,231,235,.88);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-size:10px;
    overflow:hidden;
    pointer-events:none
}

.opening span {
    font-size:9px
}

.opening-window {
    background:rgba(205,225,235,.9)
}

.opening-niche {
    background:rgba(222,216,203,.92);
    border-style:double
}

.opening-door {
    background:rgba(218,218,218,.94)
}

/* Bathroom floor plan wall perimeter */
.floor.plan-floor {
    outline:2px solid #20272d;
    outline-offset:5px
}

.plan-opening {
    position:absolute;
    z-index:8;
    background:#f7f8f9;
    pointer-events:none
}

.plan-opening::before,.plan-opening::after {
    content:"";
    position:absolute;
    background:#20272d
}

.plan-north,.plan-south {
    height:13px
}

.plan-north {
    top:-10px
}

.plan-south {
    bottom:-10px
}

.plan-north::before,.plan-north::after,.plan-south::before,.plan-south::after {
    width:2px;
    height:15px;
    top:-1px
}

.plan-north::before,.plan-south::before {
    left:0
}

.plan-north::after,.plan-south::after {
    right:0
}

.plan-west,.plan-east {
    width:13px
}

.plan-west {
    left:-10px
}

.plan-east {
    right:-10px
}

.plan-west::before,.plan-west::after,.plan-east::before,.plan-east::after {
    height:2px;
    width:15px;
    left:-1px
}

.plan-west::before,.plan-east::before {
    bottom:0
}

.plan-west::after,.plan-east::after {
    top:0
}

.plan-window {
    background:rgba(190,220,235,.95)
}

.plan-door {
    background:#f7f8f9
}

.pattern-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px
}

.pattern-grid button {
    background:#edf1f4;
    border:1px solid #d7dde2
}

.pattern-grid button.active {
    background:#263746;
    color:#fff
}

.zoom-row {
    display:grid;
    grid-template-columns:40px 1fr 40px 65px;
    gap:5px;
    align-items:center
}

.zoom-row span {
    text-align:center;
    font-size:12px;
    font-weight:700
}

.zoom-row button {
    padding:8px 5px;
    background:#edf1f4;
    border:1px solid #d7dde2
}

.floor {
    overflow:hidden
}

.pattern-tile {
    transform-origin:center center
}

[hidden] {
    display:none!important
}

.home-screen {
    min-height:100vh;
    background:#eef1f4;
    padding:42px 24px
}

.home-shell {
    max-width:1080px;
    margin:0 auto
}

.home-brand {
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:28px
}

.brand-mark {
    width:48px;
    height:48px;
    border-radius:12px;
    background:#18212b;
    color:white;
    display:grid;
    place-items:center;
    font-weight:800;
    letter-spacing:.04em
}

.home-brand h1 {
    margin:0;
    font-size:24px
}

.home-brand p {
    margin:3px 0 0;
    color:#697680;
    font-size:13px
}

.project-card {
    background:white;
    border:1px solid #d7dde2;
    border-radius:14px;
    padding:24px;
    box-shadow:0 2px 8px #0000000d
}

.home-heading {
    display:flex;
    justify-content:space-between;
    align-items:start;
    gap:20px;
    margin-bottom:18px
}

.home-heading h2,.workflow-heading h2 {
    margin:4px 0 0;
    font-size:22px
}

.eyebrow {
    font-size:11px;
    font-weight:800;
    letter-spacing:.12em;
    color:#74818b
}

.version {
    font-size:12px;
    color:#7a858e
}

.project-fields {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px
}

.project-fields label {
    font-size:12px;
    color:#53606b
}

.project-fields input,.project-fields textarea {
    display:block;
    width:100%;
    margin-top:6px;
    padding:11px;
    border:1px solid #c9d0d6;
    border-radius:7px;
    font:inherit;
    color:#17202a;
    resize:vertical
}

.notes-field {
    grid-column:1/-1
}

.workflow-heading {
    margin:30px 0 14px
}

.workflow-cards {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:14px
}

.workflow-card {
    text-align:left;
    background:white;
    border:1px solid #d7dde2;
    border-radius:14px;
    padding:22px;
    min-height:190px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    box-shadow:0 1px 3px #0000000a;
    transition:.15s
}

.workflow-card:hover {
    transform:translateY(-2px);
    border-color:#9caab4;
    box-shadow:0 5px 15px #00000010
}

.workflow-card.primary {
    border-top:4px solid #263746
}

.workflow-icon {
    font-size:29px;
    margin-bottom:18px;
    color:#40515e
}

.workflow-card strong {
    font-size:18px
}

.workflow-card small {
    font-size:13px;
    line-height:1.5;
    color:#697680;
    margin:8px 0 22px
}

.card-action {
    margin-top:auto;
    font-size:12px;
    font-weight:800;
    color:#263746
}

.home-footnote {
    text-align:center;
    color:#7a858e;
    font-size:12px;
    margin-top:24px
}

.brand-button {
    background:transparent;
    color:white;
    padding:0;
    text-align:left
}

.brand-button strong {
    font-size:20px
}

.brand-button span {
    margin-left:10px;
    font-size:12px;
    opacity:.6
}

.project-title {
    color:#dfe8ef;
    font-size:13px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:340px
}

@media (max-width: 800px), (orientation: portrait) and (max-width: 1100px), (orientation: portrait) and (max-width: 1100px) {
    .home-screen {
        padding:24px 14px
    }
    .project-fields,.workflow-cards {
        grid-template-columns:1fr
    }
    .notes-field {
        grid-column:auto
    }
    .workflow-card {
        min-height:150px
    }
    .project-title {
        order:3;
        width:100%;
        max-width:none
    }
    header {
        align-items:center
    }
}

/* ===== V0.43 responsive workspace redesign ===== */
.app-shell {
    height:100vh;
    display:flex;
    flex-direction:column;
    overflow:hidden
}

.app-shell header {
    flex:0 0 auto
}

.app-shell main {
    flex:1 1 auto;
    min-height:0;
    display:grid;
    grid-template-columns:260px minmax(0,1fr);
    gap:0;
    background:#e9edf0;
    overflow:hidden;
}

#controls {
    width:auto;
    min-width:0;
    height:100%;
    overflow-y:auto;
    background:#f7f8f9;
    border-right:1px solid #ccd3d8;
    padding:12px;
}

#workspace {
    min-width:0;
    min-height:0;
    height:100%;
    overflow:auto;
    padding:14px;
}

/* Make the existing control UI materially denser without changing its logic. */
#controls h2 {
    font-size:17px;
    margin:4px 0 10px
}

#controls h3 {
    font-size:12px;
    margin:14px 0 7px;
    padding-top:10px;
    border-top:1px solid #dce1e5;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:#5e6b75
}

#controls label {
    font-size:11px;
    margin:5px 0
}

#controls input,#controls select {
    min-height:30px;
    padding:5px 7px;
    font-size:12px;
}

#controls button {
    min-height:31px;
    padding:6px 8px;
    font-size:11px;
}

#controls .row {
    gap:5px
}

#controls p {
    font-size:11px;
    margin:6px 0
}

/* Pattern / set-out buttons remain easy to hit despite compact numeric inputs. */
#controls button[data-pattern], #controls button[data-h], #controls button[data-v] {
    min-height:35px;
}

/* Drawing area is the visual priority. */
#workspace .floor-work {
    width:100%;
    max-width:none;
    align-items:start;
}

#workspace .drawing-card, #workspace .surface-card {
    max-width:none;
}

/* Openings are visually grouped as a tool strip when the existing opening
   controls are rendered. This uses existing markup/classes only. */
#controls .opening {
    background:#fff;
    border:1px solid #d9dfe3;
    border-radius:7px;
    padding:7px;
    margin:6px 0;
}

/* Landscape tablets/desktops: slim side controls, drawing owns the screen. */
@media (orientation:landscape) and (min-width:760px) {
    #controls {
        max-width:260px
    }
    #workspace {
        padding:12px 16px
    }
}

/* Portrait: controls become a compact horizontal/top region and workspace
   gets the remaining vertical area. Existing groups wrap naturally. */
@media (max-width: 759px), (orientation: portrait) and (max-width: 1100px) {
    .app-shell {
        height:auto;
        min-height:100vh;
        overflow:visible
    }
    .app-shell main {
        display:flex;
        flex-direction:column;
        overflow:visible;
    }
    #controls {
        width:100%;
        height:auto;
        overflow:visible;
        border-right:0;
        border-bottom:1px solid #ccd3d8;
        padding:10px 12px;
    }
    #controls .row {
        display:flex;
        flex-wrap:wrap
    }
    #controls input,#controls select {
        max-width:150px
    }
    #workspace {
        width:100%;
        height:auto;
        min-height:58vh;
        overflow:auto;
        padding:12px;
    }
}

/* Larger landscape screens can spare a little more sidebar width. */
@media (orientation:landscape) and (min-width:1200px) {
    .app-shell main {
        grid-template-columns:280px minmax(0,1fr)
    }
    #controls {
        max-width:280px
    }
}

/* ===== V0.44 actual desktop workspace restructure ===== */
@media (min-width:900px) {
    .app-shell main.work-layout {
        display:grid!important;
        grid-template-columns:250px minmax(500px,1fr) 250px!important;
        height:calc(100vh - 64px);
        min-height:0;
        overflow:hidden;
    }
    .left-tools,.right-tools {
        min-width:0;
        height:100%;
        overflow-y:auto;
        overscroll-behavior:contain;
        background:#f7f8f9;
        padding:10px;
        border-color:#ccd3d8;
    }
    .left-tools {
        border-right:1px solid #ccd3d8
    }
    .right-tools {
        border-left:1px solid #ccd3d8
    }
    .centre-stage {
        min-width:0;
        min-height:0;
        display:flex;
        flex-direction:column;
        overflow:hidden
    }
    .drawing-tools {
        flex:0 0 auto;
        display:flex;
        align-items:flex-start;
        gap:10px;
        padding:8px 12px;
        background:#f7f8f9;
        border-bottom:1px solid #ccd3d8;
    }
    .drawing-tools .group {
        margin:0;
        padding:0;
        border:0
    }
    .drawing-tools h3 {
        font-size:10px;
        margin:0 0 5px;
        text-transform:uppercase;
        letter-spacing:.06em;
        color:#66737d
    }
    .drawing-tools .pattern-grid {
        display:flex;
        gap:5px
    }
    .drawing-tools button {
        min-height:30px;
        padding:5px 10px;
        font-size:11px
    }
    .drawing-tools .zoom-row {
        display:flex;
        align-items:center;
        gap:5px
    }
    .drawing-tools .zoom-row span {
        min-width:45px;
        text-align:center;
        font-size:12px
    }
    #workspace {
        flex:1 1 auto;
        min-height:0;
        height:auto!important;
        overflow:auto;
        padding:12px
    }
    #controls {
        max-width:none!important
    }
    #controls .group {
        margin-bottom:8px
    }
    #controls h3 {
        margin:8px 0 5px;
        padding-top:7px
    }
    #controls label {
        margin:3px 0
    }
    #controls input {
        min-height:27px;
        padding:3px 6px
    }
    .right-tools .group {
        margin:0
    }
    .right-tools h3 {
        margin:3px 0 10px
    }
    .opening-control {
        background:#fff;
        border:1px solid #d9dfe3;
        border-radius:8px;
        padding:8px;
        margin-bottom:8px
    }
    .opening-fields {
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:5px
    }
    .opening-fields label {
        font-size:10px;
        margin:0
    }
    .opening-fields input {
        width:100%;
        min-width:0;
        padding:5px
    }
    .tool-placeholder {
        color:#77838c;
        font-size:12px;
        line-height:1.45
    }
    .tool-placeholder h3 {
        color:#4e5b65
    }
}

/* Portrait / narrow: keep controls above drawing and openings below it. */
@media (max-width:899px) {
    .app-shell main.work-layout {
        display:flex!important;
        flex-direction:column
    }
    .left-tools {
        order:1
    }
    .centre-stage {
        order:2;
        display:flex;
        flex-direction:column
    }
    .drawing-tools {
        order:1;
        display:flex;
        gap:8px;
        flex-wrap:wrap;
        padding:8px 12px;
        background:#f7f8f9;
        border-bottom:1px solid #ccd3d8
    }
    #workspace {
        order:2
    }
    .right-tools {
        order:3;
        padding:10px 12px;
        background:#f7f8f9;
        border-top:1px solid #ccd3d8
    }
}

/* ===== V0.45 requested control placement ===== */
@media (min-width:900px) {
    .app-shell main.work-layout {
        display:grid!important;
        grid-template-columns:270px minmax(0,1fr)!important;
        grid-template-rows:minmax(0,1fr);
        height:calc(100vh - 64px);
        overflow:hidden;
    }
    /* controls + contextual tools share the left rail */
    .left-tools {
        grid-column:1;
        grid-row:1;
        height:auto;
        max-height:62%;
        overflow-y:auto;
        border-right:1px solid #aeb9c1;
        background:#dfe7ec!important;
        padding:10px 10px 6px;
    }
    .right-tools {
        grid-column:1;
        grid-row:1;
        align-self:end;
        width:270px;
        max-height:38%;
        overflow-y:auto;
        border-left:0!important;
        border-right:1px solid #aeb9c1;
        border-top:2px solid #9aaab5;
        background:#cbd8e0!important;
        padding:9px 10px;
        z-index:2;
    }
    .right-tools:empty {
        display:none
    }
    .centre-stage {
        grid-column:2;
        grid-row:1;
        min-width:0;
        min-height:0;
        display:flex;
        flex-direction:column;
        overflow:hidden;
        background:#eef2f4;
    }
    #workspace {
        order:1;
        flex:1 1 auto;
        min-height:0;
        overflow:auto;
        padding:14px!important;
    }
    .drawing-tools {
        order:2;
        flex:0 0 auto;
        display:flex!important;
        gap:12px;
        align-items:flex-start;
        padding:10px 14px!important;
        background:#cbd8e0!important;
        border-top:2px solid #9aaab5!important;
        border-bottom:0!important;
    }
    .drawing-tools .group {
        background:#e7edf1;
        border:1px solid #aebac2;
        border-radius:8px;
        padding:8px 10px!important;
    }
    #controls .group {
        background:#f4f7f8;
        border:1px solid #b8c4cb;
        border-radius:8px;
        padding:7px 8px;
        margin:0 0 7px!important;
    }
    #controls h3 {
        border-top:0!important;
        padding-top:0!important;
        margin:1px 0 6px!important
    }
    .right-tools .group,.right-tools .opening,.right-tools .opening-control {
        background:#edf2f5!important;
        border:1px solid #aebac2!important;
        border-radius:8px;
    }
}

/* Narrow / portrait: drawing followed by Pattern+Zoom, then opening tools. */
@media (max-width:899px) {
    .centre-stage #workspace {
        order:1
    }
    .centre-stage .drawing-tools {
        order:2;
        background:#cbd8e0!important;
        border-top:2px solid #9aaab5!important;
    }
    .left-tools {
        background:#dfe7ec!important
    }
    .right-tools {
        background:#cbd8e0!important;
        border-top:2px solid #9aaab5!important
    }
    #controls .group,.drawing-tools .group,.right-tools .group {
        background:#f1f5f7;
        border:1px solid #b7c3ca;
        border-radius:8px;
        padding:8px;
    }
}

/* ===== V0.46: openings directly under the cut-size Current Result panel ===== */
@media (min-width:900px) {
    .app-shell main.work-layout {
        grid-template-columns:250px minmax(0,1fr)!important
    }
    .left-tools {
        grid-column:1!important;
        grid-row:1!important;
        height:100%!important;
        max-height:none!important;
        overflow-y:auto!important
    }
    .centre-stage {
        grid-column:2!important;
        grid-row:1!important
    }
    #workspace .floor-work {
        grid-template-columns:minmax(0,1fr) 250px
    }
    #workspace .results {
        background:#d7e2e8!important;
        border:1px solid #9fadb6!important;
        border-radius:9px!important
    }
    #workspace .right-tools.results-tools {
        display:block!important;
        position:static!important;
        width:auto!important;
        max-width:none!important;
        height:auto!important;
        max-height:none!important;
        overflow:visible!important;
        background:#cbd8e0!important;
        border:1px solid #9fadb6!important;
        border-radius:9px!important;
        padding:9px!important;
        margin:10px 0 0!important;
    }
    #workspace .right-tools.results-tools .group {
        background:#edf2f5!important;
        border:1px solid #aebac2!important;
        border-radius:8px!important;
        padding:8px!important;
    }
    .drawing-tools {
        background:#cbd8e0!important
    }
}

@media(max-width:899px) {
    #workspace .right-tools.results-tools {
        display:block!important;
        width:100%!important;
        background:#cbd8e0!important;
        border:1px solid #9fadb6!important;
        border-radius:8px!important;
        padding:8px!important;
        margin-top:8px!important
    }
}

/* ===== V0.47 screenshot-correct workspace ===== */
@media (min-width:900px) {
    .app-shell main.work-layout {
        grid-template-columns:250px minmax(0,1fr)!important;
        height:calc(100vh - 64px)!important;
        overflow:hidden!important;
    }
    .left-tools {
        grid-column:1!important;
        grid-row:1!important;
        height:100%!important;
        max-height:none!important;
        overflow-y:auto!important;
        background:#dfe7ec!important;
    }
    .centre-stage {
        grid-column:2!important;
        grid-row:1!important;
        display:flex!important;
        flex-direction:column!important;
        min-width:0!important;
        min-height:0!important;
    }
    #workspace {
        order:1!important;
        flex:1 1 auto!important;
        min-height:0!important;
        overflow:auto!important;
        padding:14px!important;
    }
    #workspace .floor-work {
        display:grid!important;
        grid-template-columns:minmax(0,1fr) 255px!important;
        gap:14px!important;
        align-items:start!important;
        width:100%!important;
    }
    /* The drawing owns the large centre column. */
    #workspace .floor-wrap, #workspace .drawing-card, #workspace .surface-card {
        grid-column:1!important;
        min-width:0!important;
        max-width:none!important;
    }
    /* Results and openings share one proper right rail. */
    #workspace .results-rail {
        grid-column:2!important;
        grid-row:1!important;
        display:flex!important;
        flex-direction:column!important;
        gap:10px!important;
        min-width:0!important;
    }
    #workspace .results-rail .results {
        width:100%!important;
        margin:0!important;
        background:#d7e2e8!important;
        border:1px solid #9fadb6!important;
        border-radius:9px!important;
    }
    #workspace .results-rail .right-tools.results-tools {
        display:block!important;
        position:static!important;
        width:100%!important;
        height:auto!important;
        max-height:none!important;
        overflow:visible!important;
        margin:0!important;
        padding:9px!important;
        background:#cbd8e0!important;
        border:1px solid #9fadb6!important;
        border-radius:9px!important;
    }
    #workspace .right-tools .group {
        background:#edf2f5!important;
        border:1px solid #aebac2!important;
        border-radius:8px!important;
        padding:8px!important;
    }
    /* One compact bottom bar: Pattern, conditional Rotate, then Zoom. */
    .drawing-tools {
        order:2!important;
        flex:0 0 auto!important;
        display:flex!important;
        flex-direction:row!important;
        align-items:center!important;
        flex-wrap:nowrap!important;
        gap:10px!important;
        padding:8px 14px!important;
        background:#cbd8e0!important;
        border-top:2px solid #9aaab5!important;
        border-bottom:0!important;
        overflow-x:auto!important;
    }
    .drawing-tools .group {
        flex:0 0 auto!important;
        margin:0!important;
        padding:7px 9px!important;
        background:#e7edf1!important;
        border:1px solid #aebac2!important;
        border-radius:8px!important;
    }
    .drawing-tools .pattern-grid {
        display:flex!important;
        flex-direction:row!important;
        gap:5px!important;
        align-items:center!important
    }
    .drawing-tools .rotate-row, .drawing-tools [class*="rotate"] {
        display:inline-flex!important;
        flex-direction:row!important;
        align-items:center!important;
        margin:0 0 0 6px!important;
    }
    .drawing-tools h3 {
        margin:0 0 4px!important
    }
}

/* Portrait keeps the same semantic order but stacks naturally. */
@media(max-width:899px) {
    #workspace .results-rail {
        display:flex;
        flex-direction:column;
        gap:8px
    }
    .drawing-tools {
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:wrap!important;
        align-items:center!important
    }
    .drawing-tools .pattern-grid {
        display:flex!important;
        flex-wrap:wrap!important;
        align-items:center!important
    }
}

/* ===== V0.48 structural correction after inspecting renderer markup ===== */
@media (min-width:1051px) {
    #workspace .floor-work {
        display:grid!important;
        grid-template-columns:minmax(0,1fr) 250px!important;
        grid-template-rows:auto!important;
        gap:14px!important;
        align-items:start!important;
    }
    #workspace .canvas-wrap {
        grid-column:1!important;
        grid-row:1!important;
        min-width:0!important;
    }
    #workspace .results-rail {
        grid-column:2!important;
        grid-row:1!important;
        display:flex!important;
        flex-direction:column!important;
        gap:10px!important;
        min-width:0!important;
        align-self:start!important;
    }
    #workspace .results-rail > .results-panel {
        display:block;
        width:100%!important;
        margin:0!important;
        background:#d7e2e8!important;
        border:1px solid #9fadb6!important;
        border-radius:9px!important;
    }
    #workspace .results-rail > .right-tools {
        display:block!important;
        position:static!important;
        width:100%!important;
        max-width:none!important;
        height:auto!important;
        max-height:none!important;
        overflow:visible!important;
        margin:0!important;
        padding:9px!important;
        background:#cbd8e0!important;
        border:1px solid #9fadb6!important;
        border-radius:9px!important;
    }
    /* Bottom toolbar: never stack Rotate below Pattern on desktop. */
    .drawing-tools {
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        align-items:center!important;
        gap:10px!important;
    }
    .drawing-tools > .group {
        display:block!important;
        flex:0 0 auto!important;
    }
    .drawing-tools .pattern-grid {
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        align-items:center!important;
        gap:5px!important;
    }
    .drawing-tools .rotate-row, .drawing-tools .rotation-row, .drawing-tools [class*="rotate"] {
        display:inline-flex!important;
        flex-direction:row!important;
        align-items:center!important;
        vertical-align:middle!important;
        margin-left:6px!important;
        margin-top:0!important;
    }
}

/* V0.49: compact useful drawing viewport */
@media (min-width:1051px) {
    #workspace .floor-work {
        grid-template-columns:minmax(0,1fr) 260px!important
    }
    #workspace .canvas-wrap {
        width:100%!important;
        max-width:1100px!important;
        justify-self:center!important
    }
    #workspace .results-rail {
        width:260px!important
    }
}

/* ===== V0.50: drawing fills useful viewport; no dead vertical space ===== */
@media (min-width:1051px) {
    .centre-stage {
        justify-content:flex-start!important;
    }
    #workspace {
        flex:0 1 auto!important;
        min-height:0!important;
        height:auto!important;
        overflow:auto!important;
        padding:12px 14px 6px!important;
    }
    #workspace .floor-work {
        grid-template-columns:minmax(0,1fr) 260px!important;
        align-items:start!important;
    }
    #workspace .canvas-wrap {
        width:100%!important;
        max-width:1100px!important;
        height:auto!important;
        min-height:0!important;
        justify-self:center!important;
    }
    /* Toolbar follows the drawing instead of being pinned to screen bottom. */
    .drawing-tools {
        order:2!important;
        flex:0 0 auto!important;
        margin-top:0!important;
        align-self:stretch!important;
        justify-content:flex-start!important;
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        gap:10px!important;
    }
    .drawing-tools > .group {
        display:block!important;
        flex:0 0 auto!important;
        margin:0!important;
    }
    .drawing-tools .pattern-grid {
        display:flex!important;
        flex-direction:row!important;
        flex-wrap:nowrap!important;
        gap:5px!important;
    }
    .drawing-tools .toolbar-rotate {
        display:block!important;
        order:2!important;
    }
    .drawing-tools .toolbar-rotate button {
        display:inline-block!important;
        margin:0!important;
    }
    /* Pattern first, explicit Rotate second; Zoom remains the next sibling. */
    .drawing-tools > .group:first-child {
        order:1!important
    }
    .drawing-tools > .group:not(:first-child):not(.toolbar-rotate) {
        order:3!important
    }
}

/* V0.51: renderer now contain-fits the complete surface inside available viewport. */
@media(min-width:1051px) {
    #workspace .canvas-wrap {
        width:100%!important;
        max-width:none!important
    }
    #workspace .floor-box {
        max-width:100%!important;
        box-sizing:border-box!important
    }
}

/* V0.52 fixed viewport + pan cursor */
.canvas-wrap {
    position:relative!important;
    overflow:hidden!important
}

.floor.pannable {
    cursor:grab!important;
    touch-action:none!important
}

.floor.pannable:active {
    cursor:grabbing!important
}

/* ===== V0.54 actual #canvas viewport ===== */
@media(min-width:1051px) {
    #workspace .floor-work {
        grid-template-columns:minmax(0,1fr) 260px!important;
        align-items:start!important;
    }
    #workspace #canvas.canvas-wrap {
        width:100%!important;
        height:560px!important;
        min-height:560px!important;
        max-height:560px!important;
        max-width:none!important;
        position:relative!important;
        overflow:hidden!important;
        justify-self:stretch!important;
    }
}

@media(max-width:1050px) {
    #workspace #canvas.canvas-wrap {
        width:100%!important;
        height:480px!important;
        min-height:360px!important;
        position:relative!important;
        overflow:hidden!important;
    }
}

/* ===== V0.55 locked 5:2 drawing viewport ===== */
@media(min-width:1051px) {
    #workspace .floor-work {
        grid-template-columns:minmax(0,1fr) 260px!important;
        align-items:start!important;
    }
    #workspace #canvas.canvas-wrap {
        width:min(100%,1100px)!important;
        aspect-ratio:5 / 2!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        max-width:1100px!important;
        justify-self:center!important;
        position:relative!important;
        overflow:hidden!important;
    }
}

@media(max-width:1050px) {
    #workspace #canvas.canvas-wrap {
        width:100%!important;
        aspect-ratio:5 / 2!important;
        height:auto!important;
        min-height:0!important;
        max-height:none!important;
        position:relative!important;
        overflow:hidden!important;
    }
}

/* V0.56 Rotate button + live degree value stay together */
.drawing-tools .toolbar-rotate .zoom-row {
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:7px!important;
}

.drawing-tools .toolbar-rotate .zoom-row span {
    display:inline-block!important;
    min-width:32px!important;
    text-align:left!important;
}

/* ===== V0.57 compact accordion openings ===== */
.opening-control {
    border:1px solid #aebbc4;
    border-radius:7px;
    margin:6px 0;
    background:#eef3f6;
    overflow:hidden
}

.opening-head {
    display:flex;
    align-items:center;
    gap:5px
}

.opening-expander {
    flex:1;
    display:grid!important;
    grid-template-columns:auto auto 1fr;
    align-items:center;
    gap:7px;
    border:0!important;
    background:transparent!important;
    text-align:left!important;
    padding:7px 8px!important;
    min-height:34px!important
}

.opening-expander:hover {
    background:#e2eaef!important
}

.opening-arrow {
    font-size:11px
}

.opening-name {
    font-weight:700;
    font-size:12px;
    white-space:nowrap
}

.opening-summary {
    font-size:10px;
    color:#64727c;
    text-align:right;
    white-space:nowrap
}

.opening-enable {
    padding:0 8px 0 2px;
    display:flex;
    align-items:center
}

.opening-enable input {
    width:16px!important;
    height:16px!important;
    margin:0!important
}

.opening-control .opening-fields {
    padding:7px 8px 8px;
    border-top:1px solid #c5d0d7;
    background:#f8fafb
}

/* ===== V0.67 opening row sizing =====
   Keep the enable checkbox inside the row even with long dimension summaries. */
.opening-head {
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 34px!important;
    align-items:stretch!important;
    gap:4px!important;
    min-height:42px!important;
}

.opening-expander {
    min-width:0!important;
    width:100%!important;
    grid-template-columns:auto auto minmax(0,1fr)!important;
    padding:7px 6px 7px 8px!important;
}

.opening-summary {
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
}

.opening-enable {
    width:34px!important;
    min-width:34px!important;
    padding:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    align-self:stretch!important;
}

.opening-enable input {
    flex:0 0 16px!important;
    width:16px!important;
    height:16px!important;
    margin:0!important;
}

/* V0.76 — NuVision circular logo */
.logo-mark {
    overflow:hidden;
    padding:0!important;
    background:transparent!important;
}

.logo-mark img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:50%;
}

/* V0.77 — replace the actual home-screen TS brand mark */
.home-brand .brand-mark {
    width:48px;
    height:48px;
    padding:0;
    overflow:hidden;
    border-radius:50%;
    background:transparent;
}

.home-brand .brand-mark img {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    border-radius:50%;
}

/* V0.78 — NuVision logo in persistent app header on every workspace */
.app-title {
    display:flex;
    align-items:center;
    gap:9px;
}

.app-title .header-logo {
    display:block;
    width:34px;
    height:34px;
    flex:0 0 34px;
    object-fit:contain;
    border-radius:50%;
}

/* V0.79 — persistent workspace header logo */
.brand-button {
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
}

.brand-button .header-logo {
    display:block;
    width:32px;
    height:32px;
    flex:0 0 32px;
    object-fit:contain;
    border-radius:50%;
}

/* =========================================================
   V0.80 — PHONE / SMALL-SCREEN WORKSPACE
   Desktop rules above remain unchanged.
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    /* ---------- App shell ---------- */
    .app-shell {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }
    .app-shell header {
        position: sticky;
        top: 0;
        z-index: 100;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        min-height: 54px;
        height: auto;
        padding: 7px 9px;
        gap: 6px;
    }
    .brand-button {
        min-width: 0;
        justify-self: start;
    }
    .brand-button .header-logo {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }
    .brand-button strong {
        font-size: 16px;
        white-space: nowrap;
    }
    .brand-button span {
        margin-left: 3px;
        font-size: 9px;
    }
    .project-title {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        width: auto;
        max-width: 110px;
        font-size: 10px;
        text-align: right;
    }
    .app-shell header nav {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 5px;
    }
    .app-shell header nav button {
        min-width: 0;
        min-height: 38px;
        padding: 7px 4px;
        font-size: 10px;
        white-space: nowrap;
    }
    /* ---------- Main mobile order ---------- */
    .app-shell main.work-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0;
        overflow: visible !important;
    }
    .left-tools {
        order: 1;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 8px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #aeb9c1;
    }
    .centre-stage {
        order: 2;
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        min-width: 0;
        overflow: visible !important;
    }
    /* ---------- Compact input controls ---------- */
    #controls {
        width: 100% !important;
        max-width: none !important;
        padding: 8px !important;
    }
    #controls .group {
        margin: 0 0 7px !important;
        padding: 8px !important;
    }
    #controls h2 {
        margin: 2px 0 7px;
        font-size: 16px;
    }
    #controls h3 {
        margin: 2px 0 7px !important;
        padding: 0 !important;
        font-size: 11px;
    }
    #controls .row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px !important;
    }
    #controls .field {
        min-width: 0;
        margin: 4px 0;
    }
    #controls .field label, #controls label {
        margin: 0 0 4px;
        font-size: 10px;
    }
    #controls input, #controls select {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px;
        padding: 8px;
        font-size: 16px;
    }
    #controls button {
        min-height: 42px;
        padding: 8px 6px;
        font-size: 11px;
    }
    #controls .segmented, #controls .surface-picker, #controls .wall-picker {
        gap: 5px;
    }
    /* ---------- Drawing ---------- */
    #workspace {
        order: 1 !important;
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 8px !important;
    }
    #workspace .panel {
        min-height: 0;
        padding: 9px;
        border-radius: 8px;
    }
    #workspace .title-row {
        align-items: flex-start;
        margin-bottom: 8px;
        gap: 6px;
    }
    #workspace .title-row h2 {
        font-size: 17px;
    }
    #workspace .muted {
        font-size: 10px;
    }
    #workspace .floor-work {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0;
        gap: 8px !important;
    }
    #workspace #canvas.canvas-wrap {
        order: 1;
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 5 / 2 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 24px 20px !important;
        overflow: hidden !important;
    }
    #workspace .dir {
        font-size: 10px;
    }
    #workspace .north {
        top: 5px;
    }
    #workspace .south {
        bottom: 5px;
    }
    #workspace .west {
        left: 5px;
    }
    #workspace .east {
        right: 5px;
    }
    /* ---------- Pattern / Rotate / Zoom ---------- */
    .drawing-tools {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        padding: 8px !important;
        gap: 7px !important;
        overflow: visible !important;
    }
    .drawing-tools > .group {
        width: 100%;
        margin: 0 !important;
        padding: 8px !important;
    }
    .drawing-tools h3 {
        margin: 0 0 6px !important;
        font-size: 10px;
    }
    .drawing-tools .pattern-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px !important;
        width: 100%;
    }
    .drawing-tools button {
        min-height: 44px !important;
        padding: 8px 6px !important;
        font-size: 11px !important;
    }
    .drawing-tools .toolbar-rotate .zoom-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 52px;
        width: 100%;
        gap: 7px !important;
    }
    .drawing-tools .toolbar-rotate .zoom-row span {
        min-width: 0 !important;
        text-align: center !important;
    }
    .drawing-tools .zoom-row {
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) 46px 72px;
        width: 100%;
        gap: 6px;
    }
    /* ---------- Results and openings ---------- */
    #workspace .results-rail {
        order: 2;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }
    #workspace .results-panel, #workspace .results-rail > .results-panel {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
    }
    #workspace .results-panel h3 {
        margin-bottom: 8px;
        font-size: 11px;
    }
    #workspace .result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    #workspace .result-grid > div {
        min-width: 0;
        padding-bottom: 6px;
    }
    #workspace .result-grid span, #workspace .result-grid b {
        font-size: 11px;
    }
    #workspace .results-rail > .right-tools, #workspace .right-tools.results-tools {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 8px !important;
    }
    .opening-head {
        min-height: 46px !important;
    }
    .opening-expander {
        min-height: 46px !important;
    }
    .opening-enable {
        width: 42px !important;
        min-width: 42px !important;
    }
    .opening-enable input {
        width: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
    }
    .opening-control .opening-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    .opening-control .opening-fields input {
        min-height: 42px;
        font-size: 16px;
    }
    /* Prevent any child from forcing horizontal page scrolling. */
    #controls, #workspace, .centre-stage, .floor-work, .results-rail, .drawing-tools, .group {
        min-width: 0 !important;
        max-width: 100%;
    }
}

/* =========================================================
   V0.80 — PHONE LANDSCAPE
   Keep the drawing useful when the phone is turned sideways.
   ========================================================= */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 950px) {
    .app-shell header {
        position: static;
    }
    #workspace #canvas.canvas-wrap {
        width: min(100%, 760px) !important;
        margin-inline: auto;
    }
    .drawing-tools {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    .drawing-tools > .group {
        width: auto;
        flex: 1 1 280px !important;
    }
}

/* =========================================================
   V0.81 — MOBILE SIZE + TILE PANELS
   Put the complete Size and Tile panels beside each other.
   Desktop is unaffected.
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    #controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 7px !important;
        align-items: start;
    }
    /*
         * Room/Floor/Wall size occupies the left column.
         * Tile settings occupy the right column.
         */
    #controls > .size-group {
        grid-column: 1;
        margin: 0 !important;
    }
    #controls > .tile-group {
        grid-column: 2;
        grid-row: 1;
        margin: 0 !important;
    }
    /*
         * Every other control panel returns to full phone width.
         */
    #controls > .group:not(.size-group):not(.tile-group) {
        grid-column: 1 / -1;
    }
    /*
         * Inputs inside these two compact panels stay full-width
         * within their own half of the screen.
         */
    #controls > .size-group input, #controls > .tile-group input {
        width: 100% !important;
        min-width: 0 !important;
    }
    #controls > .size-group h3, #controls > .tile-group h3 {
        min-height: 14px;
    }
}

/* =========================================================
   V0.82 — MOBILE COMPACT INPUTS + LARGE DRAWING
   These rules apply to phones only.
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    /* -----------------------------------------------------
           SIZE + TILE PANELS
           Keep the two complete panels beside each other.
           ----------------------------------------------------- */
    #controls > .size-group, #controls > .tile-group {
        min-width: 0 !important;
        padding: 7px !important;
    }
    /*
         * Put the numeric fields inside each panel into two
         * columns where space allows.
         */
    #controls > .size-group .row, #controls > .tile-group .row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 5px !important;
    }
    /*
         * Some fields are direct children rather than wrapped in
         * a .row, so make each field more compact as well.
         */
    #controls > .size-group .field, #controls > .tile-group .field {
        min-width: 0 !important;
        margin: 3px 0 !important;
    }
    #controls > .size-group label, #controls > .tile-group label {
        font-size: 9px !important;
        line-height: 1.15;
    }
    #controls > .size-group input, #controls > .tile-group input {
        min-height: 38px !important;
        padding: 6px !important;
        font-size: 15px !important;
    }
    /* -----------------------------------------------------
           DRAWING
           The desktop 5:2 viewport is too shallow on a phone.
           A taller mobile viewport lets the actual room/floor
           use most of the available phone width.
           ----------------------------------------------------- */
    #workspace #canvas.canvas-wrap {
        order: 1 !important;
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 3 / 2 !important;
        height: auto !important;
        min-height: 210px !important;
        padding: 18px 16px !important;
    }
    /*
         * Keep Current Result after the drawing regardless of
         * whether it is a direct floor-work child or in the rail.
         */
    #workspace .floor-work > .results-panel, #workspace .floor-work > .results-rail {
        order: 2 !important;
    }
    #workspace .results-rail > .results-panel {
        order: 1 !important;
    }
    #workspace .results-rail > .right-tools, #workspace .right-tools.results-tools {
        order: 2 !important;
    }
}

/* =========================================================
   V0.82 — VERY NARROW PHONES
   Preserve the side-by-side panels but reduce spacing.
   ========================================================= */
@media (max-width: 390px) {
    #controls {
        gap: 5px !important;
        padding: 6px !important;
    }
    #controls > .size-group, #controls > .tile-group {
        padding: 6px !important;
    }
    #workspace #canvas.canvas-wrap {
        min-height: 200px !important;
    }
}

/* =========================================================
   V0.83 — MOBILE INPUT / DRAWING / RESULT FLOW
   Desktop layout remains unchanged.
   ========================================================= */
/*
 * Mobile-only controls are hidden by default so desktop keeps
 * the existing Manual Adjustment panel and status message.
 */
.mobile-layout-controls {
    display: none;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    /* -----------------------------------------------------
           SIZE PANEL FIELDS
           Floor Width + Floor Depth / Wall Width + Wall Height
           sit side by side inside the left panel.
           ----------------------------------------------------- */
    #controls > .size-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 5px !important;
        row-gap: 4px !important;
    }
    #controls > .size-group > h3 {
        grid-column: 1 / -1;
    }
    #controls > .size-group > .field {
        min-width: 0 !important;
        margin: 0 !important;
    }
    /* -----------------------------------------------------
           TILE PANEL FIELDS
           Tile Width + Tile Height sit side by side.
           Grout uses the available width beneath them.
           ----------------------------------------------------- */
    #controls > .tile-group {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 5px !important;
        row-gap: 4px !important;
    }
    #controls > .tile-group > h3 {
        grid-column: 1 / -1;
    }
    #controls > .tile-group > .field {
        min-width: 0 !important;
        margin: 0 !important;
    }
    #controls > .tile-group > .field:last-child {
        grid-column: 1 / -1;
    }
    /* -----------------------------------------------------
           MOBILE CONTENT ORDER
           Inputs/controls -> Drawing -> Current Result.
           ----------------------------------------------------- */
    #workspace #canvas.canvas-wrap {
        order: 1 !important;
    }
    #workspace .floor-work > .results-panel, #workspace .floor-work > .results-rail {
        order: 2 !important;
    }
    /* -----------------------------------------------------
           MANUAL ADJUSTMENT
           Remove the duplicate mobile panel.
           The lock control now uses the old status space inside
           Current Result.
           ----------------------------------------------------- */
    #controls > .manual-adjustment-group {
        display: none !important;
    }
    #workspace .desktop-layout-status {
        display: none !important;
    }
    #workspace .mobile-layout-controls {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        margin-top: 10px;
    }
    #workspace .mobile-layout-controls .lock-btn, #workspace .mobile-layout-controls .revert-btn {
        width: 100%;
        min-height: 44px;
        margin: 0;
    }
    /*
         * Revert is useful only after a manual move.
         * Keep it available in Current Result without restoring
         * the large separate Manual Adjustment panel.
         */
    #workspace .mobile-layout-controls .revert-btn:disabled {
        display: none;
    }
}

/* =========================================================
   V0.84 — PHONE EDITOR
   Header -> Inputs -> Drawing -> Edit Options -> Information
   ========================================================= */
.mobile-edit-toolbar {
    display: none;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    /* Only the essential measurement inputs stay above the drawing. */
    #controls > .setout-group, #controls > .manual-adjustment-group {
        display: none !important;
    }
    #workspace {
        padding-top: 4px !important;
    }
    #workspace .floor-work {
        display: flex !important;
        flex-direction: column !important;
    }
    #workspace #canvas.canvas-wrap {
        order: 1 !important;
        min-height: 220px !important;
    }
    /* Phone-style editing toolbar directly under the drawing. */
    .mobile-edit-toolbar {
        order: 2;
        display: block;
        width: 100%;
        margin-top: 8px;
        padding: 9px;
        border: 1px solid #c5ced4;
        border-radius: 8px;
        background: #eef3f6;
    }
    .mobile-edit-toolbar > h3 {
        margin: 0 0 8px;
        font-size: 11px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #66727b;
    }
    .mobile-edit-actions {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 6px;
    }
    .mobile-edit-actions button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-width: 0;
        min-height: 62px;
        padding: 5px 2px;
        gap: 4px;
        border: 1px solid #cbd4da;
        border-radius: 8px;
        background: #f8fafb;
        font-size: 9px;
    }
    .mobile-edit-actions button.active {
        background: #243f50;
        color: white;
        border-color: #243f50;
    }
    .mobile-edit-actions b {
        font-size: 23px;
        line-height: 1;
        font-weight: 500;
    }
    .mobile-edit-drawer {
        margin-top: 8px;
        padding-top: 8px;
        border-top: 1px solid #ccd5da;
    }
    .mobile-edit-drawer[hidden] {
        display: none !important;
    }
    .mobile-pattern-grid, .mobile-opening-shortcuts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
    }
    .mobile-edit-drawer button {
        min-height: 42px;
    }
    /* Drawing information follows the editing toolbar. */
    #workspace .floor-work > .results-panel, #workspace .floor-work > .results-rail {
        order: 3 !important;
    }
    /* Free Move replaces the duplicate lock/status controls. */
    #workspace .mobile-layout-controls {
        display: none !important;
    }
    /* Pattern selection now lives in Edit Options. */
    .drawing-tools > .group:first-child:not(.zoom-group),
    .drawing-tools > .toolbar-rotate {
        display: none !important;
    }
    /* Original openings rail is replaced by the compact Edit option. */
    #workspace .results-rail > .right-tools, #workspace .right-tools.results-tools {
        display: none !important;
    }
}

/* =========================================================
   V0.87 — MOBILE EDIT DRAWERS
   Pattern selection and secondary Opening editor.
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    .mobile-pattern-grid button.active {
        background: #243f50;
        color: #fff;
        border-color: #243f50;
    }
    .mobile-pattern-rotate {
        margin-top: 7px;
    }
    .mobile-pattern-rotate button {
        width: 100%;
    }
    .mobile-opening-shortcuts button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
    }
    .mobile-opening-shortcuts button.enabled {
        border-color: #243f50;
        background: #e3ebef;
    }
    .mobile-opening-shortcuts button span {
        font-size: 9px;
        color: #6a747b;
    }
    .mobile-opening-editor {
        display: grid;
        gap: 9px;
    }
    .mobile-opening-editor-head {
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        align-items: center;
        gap: 7px;
    }
    .mobile-opening-editor-head strong {
        font-size: 14px;
    }
    .mobile-opening-back {
        min-height: 38px !important;
        font-size: 25px;
        line-height: 1;
    }
    .mobile-opening-toggle {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        font-weight: 700;
    }
    .mobile-opening-toggle input {
        width: 22px;
        height: 22px;
        margin: 0;
    }
    .mobile-opening-section {
        padding: 8px;
        border: 1px solid #ccd5da;
        border-radius: 7px;
        background: #f8fafb;
    }
    .mobile-opening-section h4 {
        margin: 0 0 7px;
        font-size: 10px;
        text-transform: uppercase;
        color: #66727b;
    }
    .mobile-opening-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }
    .mobile-opening-fields label {
        display: grid;
        gap: 4px;
        min-width: 0;
        font-size: 9px;
    }
    .mobile-opening-fields input {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 7px;
        font-size: 16px;
    }
    .mobile-opening-done {
        width: 100%;
        background: #243f50;
        color: #fff;
        border-color: #243f50;
    }
}

/* =========================================================
   V0.91 — MOBILE CURRENT RESULT COMPACTION
   Three columns gives five standard values in two rows.
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    #workspace .results-rail {
        gap: 4px !important;
    }
    #workspace .results-panel, #workspace .results-rail > .results-panel {
        padding: 6px 8px !important;
    }
    #workspace .results-panel h3 {
        margin: 0 0 4px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
    #workspace .result-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 2px !important;
    }
    #workspace .result-grid > div {
        min-width: 0 !important;
        margin: 0 !important;
        padding: 2px 0 !important;
        gap: 4px !important;
    }
    #workspace .result-grid span, #workspace .result-grid b {
        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: nowrap;
    }
}

/* =========================================================
   V0.94 — PHONE HEIGHT + ZOOM/PAN POLISH
   Compact the measurement panels and reserve a second Zoom row
   for Pan / Reset room view whenever zoom is above 100%.
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    /* Make Wall/Floor Size + Tile noticeably shorter vertically. */
    .left-tools {
        padding: 5px !important;
    }
    #controls {
        padding: 5px !important;
        gap: 5px !important;
    }
    #controls > .size-group, #controls > .tile-group {
        padding: 5px !important;
        column-gap: 4px !important;
        row-gap: 2px !important;
    }
    #controls > .size-group > h3, #controls > .tile-group > h3 {
        min-height: 0 !important;
        margin: 0 0 3px !important;
        font-size: 9px !important;
        line-height: 1.1 !important;
    }
    #controls > .size-group .field, #controls > .tile-group .field {
        margin: 0 !important;
    }
    #controls > .size-group .field label, #controls > .tile-group .field label {
        margin: 0 0 2px !important;
        font-size: 8px !important;
        line-height: 1.05 !important;
    }
    #controls > .size-group input, #controls > .tile-group input {
        height: 32px !important;
        min-height: 32px !important;
        padding: 4px 6px !important;
        font-size: 14px !important;
    }
    /* Keep Zoom compact at 100%. */
    .drawing-tools > .zoom-group {
        padding: 6px !important;
    }
    .drawing-tools > .zoom-group h3 {
        margin-bottom: 4px !important;
    }
    .drawing-tools .zoom-row {
        grid-template-columns: 42px minmax(0, 1fr) 42px 62px !important;
        gap: 5px !important;
    }
    .drawing-tools .zoom-row button {
        min-height: 36px !important;
        padding: 5px 4px !important;
        font-size: 10px !important;
    }
    /* When zoomed, Pan and Reset room view get their own second row. */
    .drawing-tools #panBtn {
        grid-column: 1 / 3;
        grid-row: 2;
    }
    .drawing-tools #panReset {
        grid-column: 3 / 5;
        grid-row: 2;
        white-space: nowrap;
    }
}

/* =========================================================
   V0.95 — COMPACT MOBILE INPUT ROW
   Standalone Floor / Wall:
   SIZE: Width + Height/Depth
   TILE: Width + Height + Grout
   All five numeric inputs share a single row.
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    /*
         * Give the two Size inputs 40% of the row and the three
         * Tile inputs 60%. This keeps all five input boxes close
         * to the same usable width.
         */
    #controls.compact-five-input-layout {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) !important;
        gap: 5px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    #controls.compact-five-input-layout > .size-group, #controls.compact-five-input-layout > .tile-group {
        padding: 5px !important;
        row-gap: 2px !important;
        column-gap: 4px !important;
        margin: 0 !important;
    }
    #controls.compact-five-input-layout > .size-group {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    #controls.compact-five-input-layout > .tile-group {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    /*
         * Override the earlier rule that placed Grout on its own row.
         * In V0.95 all three Tile fields stay beside one another.
         */
    #controls.compact-five-input-layout > .tile-group > .field:last-child {
        grid-column: auto !important;
    }
    #controls.compact-five-input-layout > .size-group > h3, #controls.compact-five-input-layout > .tile-group > h3 {
        grid-column: 1 / -1;
        min-height: 0 !important;
        margin: 0 0 2px !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
    #controls.compact-five-input-layout .field {
        margin: 0 !important;
        min-width: 0 !important;
    }
    /*
         * Use short labels on phone only. Desktop continues to show
         * "Wall width (mm)", "Tile height (mm)", etc.
         */
    #controls.compact-five-input-layout .field label {
        height: 10px;
        margin: 0 0 2px !important;
        overflow: hidden;
        font-size: 0 !important;
        line-height: 1 !important;
        white-space: nowrap;
    }
    #controls.compact-five-input-layout .field label::before {
        content: attr(data-mobile-label);
        font-size: 8px;
        line-height: 10px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    #controls.compact-five-input-layout .field input {
        min-height: 32px !important;
        height: 32px !important;
        padding: 4px 5px !important;
        font-size: 14px !important;
        border-radius: 5px !important;
    }
    /*
         * Wall/Floor Set-out title, current horizontal/vertical text,
         * and duplicated dimensions are already represented by the
         * input controls and Edit Options on phone.
         */
    #workspace .mobile-redundant-title {
        display: none !important;
    }
    /*
         * With the redundant title removed, reduce the white panel
         * space directly above the drawing as well.
         */
    #workspace .panel {
        padding-top: 8px !important;
    }
}

/* Slightly tighter spacing on very narrow phones. */
@media (max-width: 390px) {
    #controls.compact-five-input-layout {
        gap: 4px !important;
    }
    #controls.compact-five-input-layout > .size-group, #controls.compact-five-input-layout > .tile-group {
        padding: 4px !important;
        column-gap: 3px !important;
    }
    #controls.compact-five-input-layout .field input {
        padding-left: 4px !important;
        padding-right: 4px !important;
        font-size: 13px !important;
    }
}

/* =========================================================
   V0.98 — COMPACT MOBILE POSITION DRAWER
   Based on V0.96. No drawing/workspace sizing changes.
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    .mobile-position-grid {
        display: grid;
        gap: 6px;
    }
    .mobile-position-row {
        display: grid;
        grid-template-columns: 58px minmax(0, 1fr);
        align-items: center;
        gap: 6px;
    }
    .mobile-position-axis {
        min-width: 0;
        font-size: 8px;
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: .03em;
        text-transform: uppercase;
        color: #66727b;
    }
    .mobile-position-buttons {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 4px;
    }
    .mobile-position-buttons button {
        min-width: 0;
        min-height: 40px !important;
        padding: 5px 3px !important;
        font-size: 9px !important;
        line-height: 1.1;
        white-space: normal;
    }
    .mobile-position-buttons button.active {
        background: #243f50;
        color: #fff;
        border-color: #243f50;
    }
}

/* Extra breathing room protection on very narrow phones. */
@media (max-width: 390px) {
    .mobile-position-row {
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 4px;
    }
    .mobile-position-buttons {
        gap: 3px;
    }
    .mobile-position-buttons button {
        padding-left: 2px !important;
        padding-right: 2px !important;
        font-size: 8px !important;
    }
}

/* =========================================================
   V0.99 — MOBILE EDIT PANEL / CURRENT RESULT POLISH
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    /*
         * Openings is currently the tallest of the simple first-level
         * Edit Options drawers. Give Pattern, Position and Free Move
         * the same usable drawer height so the whole Edit Options panel
         * stays visually consistent when switching between tools.
         *
         * A tool may still grow taller when it genuinely needs extra
         * controls, such as Pattern Rotate or an Opening detail editor.
         */
    .mobile-edit-drawer:not([hidden]) {
        min-height: 90px;
        box-sizing: border-box;
    }
    .mobile-edit-drawer:not([hidden]) > * {
        width: 100%;
    }
    /*
         * Free Move uses the same two-control footprint instead of
         * inheriting the larger desktop button margins.
         */
    .mobile-edit-drawer .mobile-move-toggle, .mobile-edit-drawer .mobile-move-revert {
        margin: 0 0 6px !important;
    }
    .mobile-edit-drawer .mobile-move-revert {
        margin-bottom: 0 !important;
    }
    /* -----------------------------------------------------
           CURRENT RESULT
           Use the space that was previously appearing as empty
           padding around the result panel.
           ----------------------------------------------------- */
    /*
         * Tighten the gap between Edit Options and Current Result.
         */
    #workspace .floor-work {
        gap: 5px !important;
    }
    /*
         * When a wall has openings, Current Result sits inside a
         * results-rail wrapper even though the old desktop opening
         * controls are hidden on mobile. Ensure that wrapper adds
         * no extra spacing of its own.
         */
    #workspace .results-rail {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
    }
    /*
         * Make Current Result occupy the full available width and
         * give its compact two-line information a little more room,
         * without increasing the overall section height significantly.
         */
    #workspace .results-panel, #workspace .results-rail > .results-panel {
        width: 100% !important;
        max-width: none !important;
        align-self: stretch !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 9px 10px !important;
        min-height: 68px;
    }
    /*
         * Reclaim the unused bottom padding of the large white drawing
         * panel. This lets Current Result visually occupy that existing
         * space instead of pushing Zoom farther down the page.
         */
    #workspace .panel {
        padding-bottom: 4px !important;
    }
    #workspace .results-panel h3 {
        margin-bottom: 5px !important;
    }
}

/* =========================================================
   V1.00 — NEW BATHROOM MOBILE INPUTS
   Match the compact Floor / Wall input presentation.
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    /*
         * Bathroom and Tile remain side by side, just like the
         * standalone Floor / Wall screen.
         */
    #controls.bathroom-input-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
        gap: 5px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }
    #controls.bathroom-input-layout > .size-group, #controls.bathroom-input-layout > .tile-group {
        padding: 5px !important;
        margin: 0 !important;
        row-gap: 2px !important;
        column-gap: 3px !important;
    }
    /*
         * New Bathroom has three room values:
         * Width / Depth / Height.
         * Keep all three on a single line.
         */
    #controls.bathroom-input-layout > .size-group {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    /*
         * Tile uses the same single-row layout:
         * Width / Height / Grout.
         */
    #controls.bathroom-input-layout > .tile-group {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    #controls.bathroom-input-layout > .tile-group > .field:last-child {
        grid-column: auto !important;
    }
    #controls.bathroom-input-layout > .size-group > h3, #controls.bathroom-input-layout > .tile-group > h3 {
        grid-column: 1 / -1;
        min-height: 0 !important;
        margin: 0 0 2px !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
    #controls.bathroom-input-layout .field {
        min-width: 0 !important;
        margin: 0 !important;
    }
    /*
         * Use the short mobile labels already supplied by app.js.
         * Desktop keeps the full descriptive labels.
         */
    #controls.bathroom-input-layout .field label {
        height: 10px;
        margin: 0 0 2px !important;
        overflow: hidden;
        font-size: 0 !important;
        line-height: 1 !important;
        white-space: nowrap;
    }
    #controls.bathroom-input-layout .field label::before {
        content: attr(data-mobile-label);
        font-size: 8px;
        line-height: 10px;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }
    #controls.bathroom-input-layout .field input {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 32px !important;
        height: 32px !important;
        padding: 4px 4px !important;
        font-size: 13px !important;
        border-radius: 5px !important;
    }
    /* -----------------------------------------------------
           BATHROOM SURFACE BUTTONS
           Floor / North / East / South / West in one row.
           ----------------------------------------------------- */
    #controls.bathroom-input-layout > .group:has(.surface-picker) {
        grid-column: 1 / -1 !important;
        padding: 5px !important;
        margin: 0 !important;
    }
    #controls.bathroom-input-layout > .group:has(.surface-picker) h3 {
        margin: 0 0 4px !important;
        padding: 0 !important;
        font-size: 10px !important;
        line-height: 1.1 !important;
    }
    #controls.bathroom-input-layout .surface-picker {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }
    #controls.bathroom-input-layout .surface-picker button {
        min-width: 0 !important;
        min-height: 34px !important;
        padding: 4px 2px !important;
        font-size: 9px !important;
        line-height: 1.05 !important;
        white-space: nowrap;
    }
}

/* Extra protection on very narrow phones. */
@media (max-width: 390px) {
    #controls.bathroom-input-layout {
        gap: 4px !important;
    }
    #controls.bathroom-input-layout > .size-group, #controls.bathroom-input-layout > .tile-group {
        padding: 4px !important;
        column-gap: 2px !important;
    }
    #controls.bathroom-input-layout .field input {
        padding-left: 3px !important;
        padding-right: 3px !important;
        font-size: 12px !important;
    }
    #controls.bathroom-input-layout .surface-picker {
        gap: 3px !important;
    }
    #controls.bathroom-input-layout .surface-picker button {
        font-size: 8px !important;
    }
}

/* =========================================================
   V1.01 — NEW BATHROOM MOBILE SURFACE / POSITION POLISH
   ========================================================= */
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    /* -----------------------------------------------------
           Bathroom surface selector
           Override the original desktop rule that makes the first
           (Floor) button span both columns.
           ----------------------------------------------------- */
    #controls.bathroom-input-layout .surface-picker button:first-child {
        grid-column: auto !important;
    }
    #controls.bathroom-input-layout .surface-picker {
        display: grid !important;
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
        gap: 4px !important;
    }
    #controls.bathroom-input-layout .surface-picker button {
        width: 100% !important;
        min-width: 0 !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        white-space: nowrap !important;
    }
    /* -----------------------------------------------------
           Bathroom wall Floor-Grout link
           On mobile it now belongs inside Edit Options > Position.
           Keep the original separate panel for desktop only.
           ----------------------------------------------------- */
    #controls.bathroom-input-layout > .bathroom-link-group {
        display: none !important;
    }
    .mobile-position-grid .mobile-follow-grout {
        width: 100%;
        min-height: 38px !important;
        margin: 1px 0 0 !important;
        padding: 5px 8px !important;
        border: 1px solid #cbd5dc;
        border-radius: 6px;
        background: #e8eef2;
        color: #263746;
        font-size: 10px !important;
        font-weight: 700;
        line-height: 1.1;
    }
    .mobile-position-grid .mobile-follow-grout.active {
        background: #263746;
        color: #fff;
        border-color: #263746;
    }
}

/* ============================================================
   V1.02 - Exact Surface Drawing Bounds
   ============================================================

   The renderer calculates tile positions against the full room
   width and height.

   Previously, the 3 px .floor border was included inside the
   border-box dimensions. That reduced the actual drawable area
   by 6 px horizontally and vertically, which made centred Brick
   cuts look unequal even though the calculated cut values were
   correct.

   The room boundary is now drawn with an inset box-shadow. This
   preserves the same visual border without changing the geometry
   available to the tile renderer.
   ============================================================ */

.floor {
    border: 0 !important;

    box-shadow:
        inset 0 0 0 3px #20272d,
        0 2px 8px #0002;
}

/* ============================================================
   V1.03 - Measurement Results
   ============================================================

   Mobile layout:
       Edge / Edge / Area
       Edge / Edge / Tile Pieces

   New Bathroom floor adds a third full-width Total Area row.
   ============================================================ */

.measurement-total-area {
    font-weight: 700;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {

    #workspace .measurement-result-grid {
        display: grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 2px !important;
    }

    #workspace .measurement-result-grid > div {
        min-width: 0 !important;
    }

    #workspace .measurement-total-area {
        grid-column: 1 / -1 !important;

        display: flex !important;
        justify-content: space-between;
        align-items: center;

        margin-top: 2px !important;
        padding-top: 4px !important;
        border-top: 1px solid #dce1e5;
    }

    #workspace .measurement-total-area span,
    #workspace .measurement-total-area b {
        font-size: 10px !important;
        line-height: 1.15 !important;
        white-space: nowrap;
    }
}

/* ============================================================
   V1.08 - Opening Page / Project Management
   ============================================================ */

.home-screen {
    padding-top: 28px;
    padding-bottom: 28px;
}

.home-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.home-topbar .home-brand {
    margin-bottom: 0;
}

.home-project-bar {
    display: grid;
    grid-template-columns:
        minmax(220px, 1fr)
        auto;
    gap: 18px;
    align-items: center;

    padding: 14px 16px;

    background: #ffffff;
    border: 1px solid #d7dde2;
    border-radius: 12px;
    box-shadow: 0 2px 8px #0000000d;
}

.home-project-summary {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.home-project-summary strong {
    font-size: 17px;
    line-height: 1.2;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-project-summary small {
    color: #697680;
    font-size: 11px;
    line-height: 1.25;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.home-project-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.home-action-button {
    min-height: 35px;
    padding: 7px 11px;

    background: #edf1f4;
    color: #263746;

    border: 1px solid #cbd3d9;
    border-radius: 7px;

    font-size: 11px;
    font-weight: 700;
}

.home-action-button.primary {
    background: #263746;
    color: #ffffff;
    border-color: #263746;
}

.workflow-heading.compact {
    margin: 20px 0 10px;
}

.workflow-heading.compact h2 {
    margin-top: 3px;
    font-size: 18px;
}

.compact-workflow-cards {
    gap: 10px;
}

.compact-workflow-cards .workflow-card {
    min-height: 96px;
    padding: 13px 14px;

    display: grid;
    grid-template-columns:
        38px
        minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.compact-workflow-cards .workflow-card.primary {
    border-top-width: 3px;
}

.compact-workflow-cards .workflow-icon {
    margin: 0;

    font-size: 25px;
    line-height: 1;

    text-align: center;
}

.workflow-copy {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.compact-workflow-cards .workflow-card strong {
    font-size: 16px;
    line-height: 1.15;
}

.compact-workflow-cards .workflow-card small {
    margin: 0;

    color: #697680;
    font-size: 11px;
    line-height: 1.3;
}


/* ------------------------------------------------------------
   Project Information modal
   ------------------------------------------------------------ */

body.project-modal-open {
    overflow: hidden;
}

.project-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;

    display: grid;
    place-items: center;

    padding: 18px;

    background: #17202acc;
}

.project-modal {
    width: min(680px, 100%);
    max-height: calc(100vh - 36px);
    overflow: auto;

    padding: 20px;

    background: #ffffff;
    border: 1px solid #d7dde2;
    border-radius: 14px;
    box-shadow: 0 18px 50px #00000040;
}

.project-modal-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 16px;
}

.project-modal-heading h2 {
    margin: 4px 0 0;
    font-size: 20px;
}

.project-modal-close {
    width: 34px;
    height: 34px;
    padding: 0;

    display: grid;
    place-items: center;

    background: #edf1f4;
    color: #263746;

    border: 1px solid #d0d7dc;
    border-radius: 7px;

    font-size: 22px;
    line-height: 1;
}

.project-modal .project-fields {
    gap: 11px;
}

.project-modal .project-fields input,
.project-modal .project-fields textarea {
    margin-top: 5px;
    padding: 9px;
}

.project-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;

    margin-top: 16px;
}

.project-modal-actions button {
    min-width: 110px;
    min-height: 36px;

    padding: 7px 12px;

    border: 1px solid #cbd3d9;
    border-radius: 7px;

    background: #edf1f4;
    color: #263746;

    font-weight: 700;
}

.project-modal-actions button.primary {
    background: #263746;
    color: #ffffff;
    border-color: #263746;
}


/* ------------------------------------------------------------
   Opening page on phone
   ------------------------------------------------------------ */

@media (max-width: 800px), (orientation: portrait) and (max-width: 1100px), (orientation: portrait) and (max-width: 1100px) {

    .home-screen {
        padding: 14px 10px;
    }

    .home-topbar {
        align-items: center;
        margin-bottom: 10px;
    }

    .home-brand {
        gap: 9px;
    }

    .home-brand h1 {
        font-size: 20px;
    }

    .home-brand p {
        font-size: 11px;
    }

    .home-project-bar {
        grid-template-columns: 1fr;
        gap: 9px;

        padding: 10px;
    }

    .home-project-actions {
        display: grid;
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
        gap: 5px;
    }

    .home-action-button {
        min-width: 0;
        min-height: 34px;

        padding: 5px 4px;

        font-size: 9px;
        line-height: 1.1;
    }

    .workflow-heading.compact {
        margin: 14px 0 7px;
    }

    .workflow-heading.compact h2 {
        font-size: 16px;
    }

    .workflow-cards.compact-workflow-cards {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .compact-workflow-cards .workflow-card {
        min-height: 78px;

        grid-template-columns:
            32px
            minmax(0, 1fr);

        gap: 8px;

        padding: 9px 11px;
    }

    .compact-workflow-cards .workflow-icon {
        font-size: 22px;
    }

    .compact-workflow-cards .workflow-card strong {
        font-size: 14px;
    }

    .compact-workflow-cards .workflow-card small {
        font-size: 10px;
        line-height: 1.2;
    }

    .project-modal {
        padding: 14px;
    }

    .project-modal .project-fields {
        grid-template-columns: 1fr;
    }

    .project-modal .notes-field {
        grid-column: auto;
    }

    .project-modal-actions {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .project-modal-actions button {
        min-width: 0;
    }
}

/* ============================================================
   V1.09 - Print / PDF
   ============================================================ */

.header-print-button {
    flex: 0 0 auto;

    min-height: 34px;
    padding: 7px 11px;

    background: #273543;
    color: #dfe8ef;

    border: 1px solid #435464;
    border-radius: 7px;

    font-size: 11px;
    font-weight: 700;
}

.header-print-button:hover {
    background: #344657;
}


/* ------------------------------------------------------------
   Off-screen report while it is being prepared
   ------------------------------------------------------------ */

.print-project-report {
    position: fixed;
    top: 0;
    left: -10000px;
    z-index: -1;

    width: 794px;

    padding: 34px;

    background: #ffffff;
    color: #17202a;

    font-family:
        Inter,
        system-ui,
        Arial,
        sans-serif;
}

.print-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding-bottom: 16px;

    border-bottom: 2px solid #263746;
}

.print-report-brand {
    display: flex;
    align-items: center;
    gap: 13px;
}

.print-report-brand img {
    width: 52px;
    height: 52px;

    object-fit: contain;
    border-radius: 50%;
}

.print-report-brand h1 {
    margin: 3px 0 0;

    font-size: 24px;
    line-height: 1.1;
}

.print-report-brand p {
    margin: 4px 0 0;

    color: #697680;
    font-size: 12px;
}

.print-report-eyebrow {
    color: #697680;

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;

    text-transform: uppercase;
}

.print-report-workflow {
    display: grid;
    gap: 3px;

    text-align: right;
}

.print-report-workflow span {
    color: #697680;

    font-size: 9px;
    font-weight: 700;

    text-transform: uppercase;
}

.print-report-workflow strong {
    font-size: 13px;
}

.print-report-summary {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 14px;
}

.print-info-card,
.print-bathroom-overview,
.print-measurement-card,
.print-opening-card {
    background: #f7f9fa;

    border: 1px solid #dce1e5;
    border-radius: 8px;
}

.print-info-card {
    padding: 12px;
}

.print-info-card h2,
.print-bathroom-overview h2 {
    margin: 0 0 8px;

    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.print-project-details {
    display: grid;
    gap: 6px;

    margin: 0;
}

.print-project-details > div {
    display: grid;
    grid-template-columns:
        110px
        minmax(0, 1fr);
    gap: 9px;
}

.print-project-details dt {
    color: #697680;
    font-size: 9px;
    font-weight: 700;
}

.print-project-details dd {
    margin: 0;

    font-size: 10px;
    font-weight: 600;

    overflow-wrap: anywhere;
}

.print-bathroom-overview {
    margin-top: 12px;
    padding: 12px;
}

.print-overview-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.print-overview-grid > div {
    display: grid;
    gap: 3px;

    padding: 8px;

    background: #ffffff;

    border: 1px solid #e2e6e9;
    border-radius: 6px;
}

.print-overview-grid span {
    color: #697680;

    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
}

.print-overview-grid strong {
    font-size: 11px;
}

.print-report-surfaces {
    margin-top: 16px;
}

.print-surface-section {
    margin-bottom: 18px;

    padding: 14px;

    background: #ffffff;

    border: 1px solid #d7dde2;
    border-radius: 9px;

    break-inside: avoid;
    page-break-inside: avoid;
}

.print-surface-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 10px;
}

.print-surface-heading h2 {
    margin: 2px 0 0;

    font-size: 17px;
}

.print-surface-meta {
    display: grid;
    gap: 2px;

    text-align: right;
}

.print-surface-meta span {
    color: #697680;
    font-size: 9px;
}

.print-surface-meta strong {
    font-size: 10px;
}

.print-layout-canvas {
    width: 100%;
    height: 285px;
    min-height: 0 !important;

    padding: 0 !important;

    background: #f7f8f9;

    border: 1px solid #dce1e5;
    border-radius: 7px;
}

.print-layout-canvas .tile {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.print-layout-canvas .opening {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

.print-surface-data {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 10px;

    margin-top: 10px;
}

.print-measurement-card,
.print-opening-card {
    padding: 10px;
}

.print-measurement-card h3,
.print-opening-card h3 {
    margin: 0 0 6px;

    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.print-measurement-table,
.print-opening-table {
    width: 100%;

    border-collapse: collapse;

    font-size: 9px;
}

.print-measurement-table th,
.print-measurement-table td,
.print-opening-table th,
.print-opening-table td {
    padding: 4px 5px;

    border-bottom: 1px solid #e2e6e9;

    text-align: left;
    vertical-align: top;
}

.print-measurement-table th {
    width: 55%;

    color: #596671;
    font-weight: 700;
}

.print-measurement-table td {
    font-weight: 700;
}

.print-opening-table thead th {
    color: #596671;
    font-size: 8px;
    text-transform: uppercase;
}

.print-opening-table tbody th {
    font-weight: 700;
}

.print-report-footer {
    padding-top: 7px;

    color: #7a858d;

    border-top: 1px solid #dce1e5;

    font-size: 8px;
    text-align: right;
}


/* ------------------------------------------------------------
   Mobile workspace print button
   ------------------------------------------------------------ */

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {

    .header-print-button {
        min-height: 30px;

        padding: 5px 8px;

        font-size: 9px;
    }

    .home-project-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


/* ------------------------------------------------------------
   Browser print / Save as PDF
   ------------------------------------------------------------ */

@page {
    size: A4 portrait;
    margin: 10mm;
}

@media print {

    html,
    body {
        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
    }

    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    body > *:not(#printReport) {
        display: none !important;
    }

    #printReport {
        position: static !important;
        left: auto !important;
        top: auto !important;
        z-index: auto !important;

        display: block !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        background: #ffffff !important;
    }

    .print-surface-section {
        box-shadow: none !important;
    }

    .print-layout-canvas {
        height: 72mm !important;
    }

    .print-report-footer {
        margin-top: 4mm;
    }
}



/* ============================================================
   V1.10 - Persistent Save / Print Actions
   ============================================================ */

.header-project-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.header-action-button {
    min-height: 34px;
    padding: 7px 11px;

    background: #273543;
    color: #dfe8ef;

    border: 1px solid #435464;
    border-radius: 7px;

    font-size: 11px;
    font-weight: 700;
}

.header-action-button:hover {
    background: #344657;
}

/*
 * The V1.09 print button class is no longer used in the workspace
 * header. Both actions now share the same header-action style.
 */
.header-print-button {
    display: none;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {

    .header-project-actions {
        gap: 4px;
    }

    .header-action-button {
        min-height: 30px;
        padding: 5px 7px;

        font-size: 8px;
        line-height: 1.05;
        white-space: nowrap;
    }
}


/* ============================================================
   V1.11 - Portrait Phone / Tablet Mobile Layout
   ============================================================

   The compact interface is now used when either:

   1. The viewport is 700 px wide or less, regardless of
      orientation; or

   2. The device is in portrait and the viewport is no wider
      than 1100 px.

   This brings iPad/tablet portrait use into the same interface
   as phones while keeping larger portrait monitors on desktop.
   ============================================================ */


/* ============================================================
   V1.13 - Desktop Drawing Direction Labels
   ============================================================

   Keep the drawing at the original V1.11 scale.

   Direction labels are moved outward toward the canvas edge
   instead of reserving additional space by shrinking the room.
   This applies to the desktop-style workspace, including
   landscape tablets and PC / monitor layouts.
   ============================================================ */

@media (min-width: 1101px),
       (min-width: 701px) and (orientation: landscape) {

    #workspace #canvas.canvas-wrap .dir {
        z-index: 5;

        white-space: nowrap;

        font-weight: 700;
        line-height: 1;
    }

    #workspace #canvas.canvas-wrap .dir.north {
        top: 5px;
        bottom: auto;

        left: 50%;
        right: auto;

        transform: translateX(-50%);
    }

    #workspace #canvas.canvas-wrap .dir.south {
        top: auto;
        bottom: 5px;

        left: 50%;
        right: auto;

        transform: translateX(-50%);
    }

    #workspace #canvas.canvas-wrap .dir.west {
        top: 50%;
        bottom: auto;

        left: 6px;
        right: auto;

        transform: translateY(-50%);
    }

    #workspace #canvas.canvas-wrap .dir.east {
        top: 50%;
        bottom: auto;

        left: auto;
        right: 6px;

        transform: translateY(-50%);
    }
}


/* ============================================================
   V1.14 - NuVision Tiling Branding
   ============================================================

   Use the same NuVision identity on the opening page and every
   workspace header:
       NuVision Tiling
       Bathroom & Tile Layout Planner

   The existing circular NuVision logo remains unchanged.
   ============================================================ */

.brand-button {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;

    min-width: 0;
}

.brand-button .brand-copy {
    display: grid;
    gap: 2px;

    min-width: 0;

    margin: 0;
    opacity: 1;
}

.brand-button .brand-copy strong {
    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 800;
    line-height: 1.05;
    white-space: nowrap;
}

.brand-button .brand-copy small {
    margin: 0;

    color: #aeb9c1;

    font-size: 9px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
}

.brand-button .brand-version {
    align-self: flex-start;

    margin: 3px 0 0 2px;

    font-size: 9px;
    line-height: 1;

    opacity: .55;
}

@media (max-width: 700px),
       (orientation: portrait) and (max-width: 1100px) {

    .brand-button {
        gap: 7px !important;
    }

    .brand-button .brand-copy {
        gap: 1px;
    }

    .brand-button .brand-copy strong {
        font-size: 13px;
    }

    .brand-button .brand-copy small {
        font-size: 7px;
    }

    .brand-button .brand-version {
        display: none;
    }
}




/* V1.52 - compact NuVision header wordmark supplied by project owner */
.brand-button .brand-wordmark-stack {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.brand-button .brand-wordmark-backing {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin: 0;
    padding: 2px 5px;
    background: #ffffff;
    border-radius: 5px;
    opacity: 1;
}

.brand-button .header-wordmark {
    display: block;
    width: 165px;
    aspect-ratio: 855 / 239;
    max-width: 100%;

    background-image: url("../assets/nuvision-header-logo.png?v=2.10");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.brand-button .header-tagline {
    display: block;
    margin: 0 0 0 5px;
    color: #aeb9c1;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.1;
    white-space: nowrap;
    opacity: 1;
}

@media (max-width: 700px),
       (orientation: portrait) and (max-width: 1100px) {
    .brand-button .header-wordmark {
        width: 138px;
    }

    .brand-button .brand-wordmark-backing {
        padding: 2px 4px;
        border-radius: 4px;
    }

    .brand-button .header-tagline {
        margin-left: 4px;
        font-size: 7px;
    }
}

/* ============================================================
   V1.20 - Desktop Drawing Toolbar and Results Rail
   ============================================================

   Monitor / desktop layout only.

   1. Manual Adjustment is moved beside Zoom in the toolbar below
      the drawing.

   2. The results rail inherits 20 px top padding from the global
      <aside> rule. Remove only that top padding so Measurement
      Results and Openings sit higher without changing the drawing
      size or the horizontal rail spacing.
   ============================================================ */

@media (min-width: 1101px) {

    /* --------------------------------------------------------
       Manual Adjustment beside Zoom
       -------------------------------------------------------- */

    .drawing-tools > .toolbar-manual-adjustment {
        order: 4 !important;

        display: grid !important;
        grid-template-columns:
            auto auto !important;
        grid-template-rows:
            auto auto !important;

        align-items: center !important;
        column-gap: 6px !important;
        row-gap: 4px !important;

        width: auto !important;
        min-width: 250px !important;

        margin: 0 !important;
        padding: 7px 9px !important;
    }

    .drawing-tools > .toolbar-manual-adjustment h3 {
        grid-column: 1 / -1;

        margin: 0 !important;
    }

    .drawing-tools > .toolbar-manual-adjustment .lock-btn,
    .drawing-tools > .toolbar-manual-adjustment .revert-btn {
        width: auto !important;
        min-width: 112px !important;
        min-height: 30px !important;

        margin: 0 !important;
        padding: 5px 10px !important;
    }

    .drawing-tools > .toolbar-manual-adjustment .drag-help {
        display: none !important;
    }


    /* --------------------------------------------------------
       Results / Openings rail
       -------------------------------------------------------- */

    #workspace .results-rail {
        padding-top: 0 !important;
    }
}



/* ============================================================
   V1.21 - New Bathroom Floor Opening Visibility
   ============================================================

   Make Door and Window locations much clearer on the New Bathroom
   floor plan without changing any opening dimensions or set-out
   geometry.

   - The bathroom perimeter is shown as a stronger double wall line.
   - Door markers cut a clear gap through that perimeter.
   - Window markers replace the wall line with a wider blue cavity
     and two strong parallel frame lines.
   - Existing end/jamb markers remain visible at both ends.
   ============================================================ */

.floor.plan-floor {
    outline: none !important;

    /*
     * Draw the double wall line inside the floor boundary so Door
     * markers can visibly interrupt it. Box-shadows do not alter
     * the renderer's calculated floor dimensions.
     */
    box-shadow:
        inset 0 0 0 2px #20272d,
        inset 0 0 0 6px #f7f8f9,
        inset 0 0 0 8px #20272d,
        0 2px 8px #0002 !important;
}

.floor.plan-floor .plan-opening {
    z-index: 20;

    box-sizing: border-box;

    pointer-events: none;
}


/* ------------------------------------------------------------
   Put floor-plan openings directly over the wall perimeter
   ------------------------------------------------------------ */

.floor.plan-floor .plan-north,
.floor.plan-floor .plan-south {
    height: 12px !important;
}

.floor.plan-floor .plan-north {
    top: 0 !important;
}

.floor.plan-floor .plan-south {
    bottom: 0 !important;
}

.floor.plan-floor .plan-west,
.floor.plan-floor .plan-east {
    width: 12px !important;
}

.floor.plan-floor .plan-west {
    left: 0 !important;
}

.floor.plan-floor .plan-east {
    right: 0 !important;
}


/* ------------------------------------------------------------
   Stronger opening-end / jamb marks
   ------------------------------------------------------------ */

.floor.plan-floor .plan-north::before,
.floor.plan-floor .plan-north::after,
.floor.plan-floor .plan-south::before,
.floor.plan-floor .plan-south::after {
    width: 3px !important;
    height: 12px !important;
    top: 0 !important;

    background: #20272d !important;
}

.floor.plan-floor .plan-west::before,
.floor.plan-floor .plan-west::after,
.floor.plan-floor .plan-east::before,
.floor.plan-floor .plan-east::after {
    width: 12px !important;
    height: 3px !important;
    left: 0 !important;

    background: #20272d !important;
}


/* ------------------------------------------------------------
   Door - clear break in the wall perimeter
   ------------------------------------------------------------ */

.floor.plan-floor .plan-door {
    background: #ffffff !important;
}

.floor.plan-floor .plan-door.plan-north,
.floor.plan-floor .plan-door.plan-south {
    box-shadow:
        inset 0 1px 0 #ffffff,
        inset 0 -1px 0 #ffffff !important;
}

.floor.plan-floor .plan-door.plan-west,
.floor.plan-floor .plan-door.plan-east {
    box-shadow:
        inset 1px 0 0 #ffffff,
        inset -1px 0 0 #ffffff !important;
}


/* ------------------------------------------------------------
   Window - wider cavity with two pronounced frame lines
   ------------------------------------------------------------ */

.floor.plan-floor .plan-window {
    background: #d7edf6 !important;
}

.floor.plan-floor .plan-window.plan-north,
.floor.plan-floor .plan-window.plan-south {
    border-top: 3px solid #315c72 !important;
    border-bottom: 3px solid #315c72 !important;
}

.floor.plan-floor .plan-window.plan-west,
.floor.plan-floor .plan-window.plan-east {
    border-left: 3px solid #315c72 !important;
    border-right: 3px solid #315c72 !important;
}



/* ============================================================
   V1.22 - Outside Bathroom Wall Perimeter
   ============================================================

   New Bathroom floor view only.

   The wall/perimeter representation now sits OUTSIDE the tile
   boundary.

   Wall band depth:
       12 px total

   Wall appearance:
       2 px inner line
       8 px cavity
       2 px outer line

   Door:
       clears the full wall band and also covers the tile-edge line
       so the perimeter visibly stops at the doorway.

   Window:
       occupies the same 12 px wall band with a light cavity and
       strong inner/outer frame lines.
   ============================================================ */


/* ------------------------------------------------------------
   Restore the tile boundary itself to the standard surface edge.
   The bathroom wall cavity is now drawn by .plan-wall-layer.
   ------------------------------------------------------------ */

.floor.plan-floor {
    outline: none !important;

    box-shadow:
        inset 0 0 0 3px #20272d,
        0 2px 8px #0002 !important;
}


/* ------------------------------------------------------------
   Continuous double wall line outside the tile boundary
   ------------------------------------------------------------ */

.plan-wall-layer {
    position: absolute;

    z-index: 18;

    box-sizing: border-box;

    overflow: visible;

    pointer-events: none;

    box-shadow:
        0 0 0 2px #20272d,
        0 0 0 10px #eef3f6,
        0 0 0 12px #20272d;
}


/* ------------------------------------------------------------
   Opening elements occupy the full 12 px wall thickness
   ------------------------------------------------------------ */

.plan-wall-layer .plan-opening {
    position: absolute;

    z-index: 20;

    box-sizing: border-box;

    pointer-events: none;
}

.plan-wall-layer .plan-north,
.plan-wall-layer .plan-south {
    height: 12px !important;
}

.plan-wall-layer .plan-north {
    top: -12px !important;
}

.plan-wall-layer .plan-south {
    bottom: -12px !important;
}

.plan-wall-layer .plan-west,
.plan-wall-layer .plan-east {
    width: 12px !important;
}

.plan-wall-layer .plan-west {
    left: -12px !important;
}

.plan-wall-layer .plan-east {
    right: -12px !important;
}


/* ------------------------------------------------------------
   Opening end / jamb marks
   ------------------------------------------------------------ */

.plan-wall-layer .plan-north::before,
.plan-wall-layer .plan-north::after,
.plan-wall-layer .plan-south::before,
.plan-wall-layer .plan-south::after {
    content: "";

    position: absolute;

    width: 3px !important;
    height: 12px !important;

    top: 0 !important;

    background: #20272d !important;
}

.plan-wall-layer .plan-north::before,
.plan-wall-layer .plan-south::before {
    left: 0 !important;
}

.plan-wall-layer .plan-north::after,
.plan-wall-layer .plan-south::after {
    right: 0 !important;
}

.plan-wall-layer .plan-west::before,
.plan-wall-layer .plan-west::after,
.plan-wall-layer .plan-east::before,
.plan-wall-layer .plan-east::after {
    content: "";

    position: absolute;

    width: 12px !important;
    height: 3px !important;

    left: 0 !important;

    background: #20272d !important;
}

.plan-wall-layer .plan-west::before,
.plan-wall-layer .plan-east::before {
    bottom: 0 !important;
}

.plan-wall-layer .plan-west::after,
.plan-wall-layer .plan-east::after {
    top: 0 !important;
}


/* ------------------------------------------------------------
   Door - wall double line stops completely at the opening
   ------------------------------------------------------------ */

.plan-wall-layer .plan-door {
    background: #ffffff !important;
}

/*
 * Extend the door mask 3 px into the tile boundary so the visible
 * tile-edge line stops at the doorway as well.
 */
.plan-wall-layer .plan-door.plan-north {
    height: 15px !important;

    top: -12px !important;
}

.plan-wall-layer .plan-door.plan-south {
    height: 15px !important;

    bottom: -12px !important;
}

.plan-wall-layer .plan-door.plan-west {
    width: 15px !important;

    left: -12px !important;
}

.plan-wall-layer .plan-door.plan-east {
    width: 15px !important;

    right: -12px !important;
}


/* ------------------------------------------------------------
   Window - pronounced wall cavity at full perimeter thickness
   ------------------------------------------------------------ */

.plan-wall-layer .plan-window {
    background: #d7edf6 !important;
}

.plan-wall-layer .plan-window.plan-north,
.plan-wall-layer .plan-window.plan-south {
    border-top: 3px solid #315c72 !important;
    border-bottom: 3px solid #315c72 !important;
}

.plan-wall-layer .plan-window.plan-west,
.plan-wall-layer .plan-window.plan-east {
    border-left: 3px solid #315c72 !important;
    border-right: 3px solid #315c72 !important;
}



/* ============================================================
   V1.25 - Shower Floor Reference
   ============================================================

   Floor / New Bathroom floor only.

   The Shower is a visual reference area, not a cut-out from the
   room geometry. Its tile grid therefore remains continuous and,
   in New Bathroom, the established floor-to-wall grout linking
   continues to use the same floor offsets.
   ============================================================ */


/* ------------------------------------------------------------
   Shower set-out buttons
   ------------------------------------------------------------ */

.setout-group .segmented button[data-value="shower"] {
    grid-column: 1 / -1;

    font-weight: 700;
}

.setout-group .segmented button[data-value="shower"]:disabled {
    opacity: .42;

    cursor: not-allowed;
}


/* ------------------------------------------------------------
   Shower contextual controls
   ------------------------------------------------------------ */

.shower-control-group {
    display: grid;

    gap: 8px;
}

.shower-toggle-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 7px 8px;

    background: #f7fafb;
    border: 1px solid #c5d0d7;
    border-radius: 7px;

    font-size: 12px;
    font-weight: 700;
}

.shower-toggle-row input {
    width: 18px !important;
    height: 18px !important;

    margin: 0 !important;
}

.shower-size-fields {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;
}

.shower-size-fields .field {
    min-width: 0;
}

.shower-size-fields input {
    width: 100% !important;
}


/* ------------------------------------------------------------
   Shower floor overlay
   ------------------------------------------------------------ */

.plan-shower {
    position: absolute;

    z-index: 14;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-width: 1px;
    min-height: 1px;

    padding: 4px;

    overflow: hidden;

    background:
        repeating-linear-gradient(
            135deg,
            rgba(206, 226, 236, .78) 0,
            rgba(206, 226, 236, .78) 9px,
            rgba(232, 242, 247, .78) 9px,
            rgba(232, 242, 247, .78) 18px
        );

    border: 3px solid #315c72;

    color: #254858;

    text-align: center;

    cursor: grab;

    touch-action: none;
    user-select: none;
}

.plan-shower:active,
.plan-shower.dragging {
    cursor: grabbing;
}

.plan-shower.snap-ready {
    outline: 4px solid rgba(49, 92, 114, .30);
    outline-offset: 2px;
}

.plan-shower b {
    font-size: 11px;
    line-height: 1.1;
    letter-spacing: .08em;
}

.plan-shower span {
    margin-top: 2px;

    font-size: 9px;
    line-height: 1.1;
}


/* ------------------------------------------------------------
   Shower measurement rows
   ------------------------------------------------------------ */

.measurement-result-grid .measurement-shower-cut {
    background: #edf5f8;

    border-radius: 5px;

    padding: 6px 7px;
}


/* ------------------------------------------------------------
   Compact Shower editor
   ------------------------------------------------------------ */

@media (max-width: 700px),
       (orientation: portrait) and (max-width: 1100px) {

    .mobile-shower-editor {
        display: grid;

        gap: 8px;
    }

    .mobile-position-buttons button[data-mobile-value="shower"] {
        grid-column: 1 / -1;

        font-weight: 700;
    }

    .mobile-position-buttons button:disabled {
        opacity: .42;

        cursor: not-allowed;
    }

    .plan-shower b {
        font-size: 9px;
    }

    .plan-shower span {
        font-size: 8px;
    }
}



/* ============================================================
   V1.26 - Monitor Dimension Pairing
   ============================================================

   On PC / monitor layouts, place the room/floor/wall dimensions
   beside the Tile dimensions in the left control rail.

   Mobile / portrait-tablet layouts keep their established compact
   input arrangement unchanged.
   ============================================================ */

@media (min-width: 1101px) {

    #controls {
        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            minmax(0, 1fr) !important;

        column-gap: 6px !important;
        row-gap: 7px !important;

        align-content: start;
    }

    #controls > .size-group {
        grid-column: 1;
        grid-row: 1;
    }

    #controls > .tile-group {
        grid-column: 2;
        grid-row: 1;
    }

    #controls > .surface-group,
    #controls > .setout-group,
    #controls > .bathroom-link-group,
    #controls > .manual-adjustment-group {
        grid-column: 1 / -1;
    }

    #controls > .size-group,
    #controls > .tile-group {
        min-width: 0;

        margin: 0 !important;
        padding: 7px !important;
    }

    #controls > .size-group h3,
    #controls > .tile-group h3 {
        margin-bottom: 6px !important;
    }

    #controls > .size-group .field,
    #controls > .tile-group .field {
        min-width: 0;

        margin: 3px 0 !important;
    }

    #controls > .size-group .field label,
    #controls > .tile-group .field label {
        margin-bottom: 3px !important;

        font-size: 10px !important;
        line-height: 1.1;
    }

    #controls > .size-group input,
    #controls > .tile-group input {
        width: 100% !important;
        min-width: 0 !important;

        box-sizing: border-box;
    }
}


/* ============================================================
   V1.26 - Brick Vertical Start Row
   ============================================================

   The selected vertical Full-from button may show "Row A" or
   "Row B" when Brick is active. Allow the slightly longer label
   to wrap without forcing the Set-out panel wider.
   ============================================================ */

.setout-group button[data-axis="horizontal"][data-base-label] {
    white-space: normal;

    line-height: 1.15;
}



/* ============================================================
   V1.27 - Shower Editor Close Controls
   ============================================================ */

.shower-panel-done {
    width: 100%;

    margin-top: 7px;

    background: #edf1f4;
    color: #45515b;

    border: 1px solid #ccd4da;
}

.shower-panel-done:hover {
    background: #e4eaee;
}



/* ============================================================
   V1.29 - Monitor Measurement Results Compact Height
   ============================================================

   Monitor / PC layout only.

   Tighten the Measurement Results card vertically without
   changing its information, columns, or the mobile/tablet layout.
   ============================================================ */

@media (min-width: 1101px) {

    #workspace .results-panel {
        padding: 9px 10px !important;
    }

    #workspace .results-panel h3 {
        margin: 0 0 7px !important;

        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    #workspace .result-grid,
    #workspace .measurement-result-grid {
        row-gap: 4px !important;
        gap: 4px !important;
    }

    #workspace .result-grid > div,
    #workspace .measurement-result-grid > div {
        margin: 0 !important;
        padding-top: 2px !important;
        padding-bottom: 3px !important;

        gap: 6px !important;
    }

    #workspace .result-grid span,
    #workspace .result-grid b,
    #workspace .measurement-result-grid span,
    #workspace .measurement-result-grid b {
        line-height: 1.1 !important;
    }

    #workspace .measurement-result-grid .measurement-shower-cut {
        padding: 3px 5px !important;
    }

    #workspace .measurement-total-area {
        margin-top: 1px !important;
        padding-top: 3px !important;
    }
}



/* ============================================================
   V1.30 - Mobile Edit Options Scroll Stability
   ============================================================

   Chrome may try to scroll-anchor the page while the drawing,
   Position drawer, and Shower measurement rows are rebuilt.

   The JavaScript restores the Edit Options action button to the
   same viewport position. Disable browser-native anchoring inside
   the dynamic workspace so the two systems do not fight.
   ============================================================ */

@media (max-width: 700px),
       (orientation: portrait) and (max-width: 1100px) {

    #workspace,
    #workspace .mobile-edit-toolbar,
    #workspace .mobile-edit-drawer,
    #workspace .results-panel {
        overflow-anchor: none;
    }
}



/* ============================================================
   V1.32 - Brick + Shower Mobile Position Stability
   ============================================================

   Only applies to the mobile Position drawer when BOTH Brick and
   Shower are active. Keep every Position button at a fixed height
   so Row A / Row B label changes cannot alter drawer height during
   a redraw and trigger Chrome scroll movement.
   ============================================================ */

@media (max-width: 700px),
       (orientation: portrait) and (max-width: 1100px) {

    .mobile-position-grid.brick-shower-position
        .mobile-position-buttons button {
        height: 44px !important;
        min-height: 44px !important;
        max-height: 44px !important;

        overflow: hidden;
    }
}



/* ============================================================
   V1.40 - Mobile Header + Shower Editor Scroll Stability
   ============================================================

   The phone / portrait-tablet header should be part of the normal
   document flow. Keeping it sticky hid the dimension controls while
   the drawing/Edit Options scrolled underneath it and made Shower
   redraw movement much more obvious.

   Shower ON/OFF and size commits now keep the mobile Shower editor
   mounted in JavaScript, so the header no longer needs to act as a
   fixed visual anchor during those updates.
   ============================================================ */

@media (max-width: 700px),
       (orientation: portrait) and (max-width: 1100px) {

    .app-shell header {
        position: static !important;
        top: auto !important;
        z-index: auto !important;
    }
}


/* ============================================================
   V1.41 - Shower Mobile Control-DOM Stability
   ============================================================

   Shower drag, size, and ON/OFF updates no longer rebuild the mobile
   dimension/control region above the drawing. Shower Position source
   buttons remain mounted and are updated in place by JavaScript.
   ============================================================ */


/* ============================================================
   V1.42 - Shower Persistent Mobile Workspace
   ============================================================

   Shower drag completion now preserves the compact workspace even
   when no Edit Options drawer is open. Shower ON/OFF also restores
   the exact mobile scroll position rather than following an anchor.
   ============================================================ */


/* ============================================================
   V1.44 - Shower OFF editor DOM stability
   ============================================================

   When Shower is switched OFF while its mobile editor is open, keep the
   existing Width / Depth section mounted instead of collapsing the drawer.
   This prevents Chrome from scrolling when the checkbox that initiated the
   change would otherwise be removed from the DOM.
   ============================================================ */

@media (max-width: 700px),
       (orientation: portrait) and (max-width: 1100px) {

    .mobile-shower-editor
        .mobile-opening-section.mobile-shower-disabled
        .mobile-opening-fields {
        opacity: 0.55;
    }
}


/* ============================================================
   V1.52 - Uniform Setup Headers / Start Page Navigation
   ============================================================ */

.floor-shape-screen {
    min-height: 100vh;
    padding: 0;
    background: #f3f5f6;
}

.floor-shape-shell {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 28px 18px;
}

.setup-page-header {
    width: 100%;
}

.setup-start-button {
    flex: 0 0 auto;
}

.floor-shape-heading {
    margin-bottom: 16px;
}

.floor-shape-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.floor-shape-heading-back {
    display: none;
    flex: 0 0 auto;
    min-height: 34px;
    padding: 6px 14px;

    background: #edf1f4;
    color: #263746;

    border: 1px solid #cbd3d9;
    border-radius: 7px;

    font-weight: 700;
}

.floor-shape-heading-back.visible {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.floor-shape-heading h2 {
    margin: 4px 0 6px;
    font-size: 24px;
}

.floor-shape-heading p {
    margin: 0;
    color: #697680;
    font-size: 13px;
}

.floor-shape-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.floor-shape-card {
    min-width: 0;
    padding: 14px;

    display: grid;
    gap: 12px;

    background: #ffffff;
    color: #263746;

    border: 2px solid #d4dbe0;
    border-radius: 12px;

    text-align: left;
    cursor: pointer;

    transition:
        border-color 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
}

.floor-shape-card:hover {
    border-color: #9aa8b2;
    box-shadow: 0 4px 14px #00000012;
}

.floor-shape-card.selected {
    border-color: #263746;
    box-shadow: 0 0 0 2px #26374624;
}

.floor-shape-card:focus-visible {
    outline: 3px solid #4f8ec9;
    outline-offset: 3px;
}

.floor-shape-preview {
    display: block;
    width: 100%;
    max-height: 260px;

    border-radius: 7px;
    overflow: hidden;
}

.floor-shape-copy {
    display: grid;
    gap: 3px;
}

.floor-shape-copy strong {
    font-size: 18px;
}

.floor-shape-copy small {
    color: #697680;
    font-size: 12px;
}

.floor-shape-status {
    min-height: 20px;
    margin: 14px 2px 0;

    color: #5d6972;
    font-size: 12px;
}

.floor-shape-actions {
    display: none;
}

.floor-shape-action {
    min-height: 40px;
    padding: 8px 18px;

    background: #edf1f4;
    color: #263746;

    border: 1px solid #cbd3d9;
    border-radius: 7px;

    font-weight: 700;
}

.floor-shape-action.primary {
    background: #263746;
    color: #ffffff;
    border-color: #263746;
}

.floor-shape-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


.l-shape-setup-screen {
    min-height: 100vh;
    padding: 0;
    background: #f3f5f6;
}

.l-shape-setup-shell {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 28px 18px;
}

.l-shape-setup-heading-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.l-shape-setup-heading-row h2 {
    margin: 0 0 6px;
    font-size: 24px;
}

.l-shape-setup-heading-row p {
    margin: 0;
    color: #697680;
    font-size: 13px;
}

.l-shape-setup-panel {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(300px, 0.8fr);
    gap: 18px;
    align-items: start;

    padding: 14px;
    background: #ffffff;
    border: 2px solid #d4dbe0;
    border-radius: 12px;
}

.l-shape-setup-visual {
    min-width: 0;
}

.l-shape-setup-preview {
    display: block;
    width: min(580px, 100%);
    aspect-ratio: 1 / 1;
    margin: 0 auto;

    border-radius: 9px;
    overflow: hidden;
}

.l-shape-orientation-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
}

.l-shape-rotate-button,
.l-shape-apply-button,
.l-shape-wall-done-button {
    min-height: 40px;
    padding: 8px 16px;

    border: 1px solid #cbd3d9;
    border-radius: 7px;

    font-weight: 700;
    cursor: pointer;
}

.l-shape-rotate-button,
.l-shape-wall-done-button {
    background: #edf1f4;
    color: #263746;
}

.l-shape-orientation-controls span {
    color: #5d6972;
    font-size: 12px;
    font-weight: 700;
}

.l-shape-dimension-panel {
    display: grid;
    gap: 12px;
}

.l-shape-setup-hint {
    margin: 0;
    color: #5d6972;
    font-size: 12px;
    line-height: 1.45;
}

.l-shape-wall-editor {
    display: grid;
    gap: 12px;

    padding: 12px;
    background: #f7f9fb;
    border: 1px solid #d6dee5;
    border-radius: 10px;
}

.l-shape-wall-editor-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.l-shape-wall-editor-header strong {
    display: block;
    color: #263746;
    font-size: 14px;
    line-height: 1.2;
}

.l-shape-wall-editor-header small {
    display: block;
    margin-top: 3px;
    color: #697680;
    font-size: 11px;
    line-height: 1.35;
}

.l-shape-wall-editor-field {
    display: grid;
    gap: 5px;

    color: #344754;
    font-size: 12px;
    font-weight: 700;
}

.l-shape-input-wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px;
}

.l-shape-input-wrap input {
    min-width: 0;
    width: 100%;
    height: 40px;
    padding: 7px 9px;

    background: #ffffff;
    color: #263746;

    border: 1px solid #bcc7ce;
    border-radius: 7px;

    font: inherit;
    font-size: 14px;
    font-weight: 700;
}

.l-shape-input-wrap input:focus {
    outline: 2px solid #4f8ec9;
    outline-offset: 1px;
}

.l-shape-input-wrap small {
    color: #697680;
    font-size: 11px;
    font-weight: 600;
}

.l-shape-wall-segment-highlight {
    stroke: #1f6fe0;
    stroke-width: 6;
    stroke-linecap: square;
    pointer-events: none;
}

.l-shape-wall-hit {
    stroke: transparent;
    stroke-width: 22;
    cursor: pointer;
}

.l-shape-wall-label {
    fill: #263746;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
}

.l-shape-conflict-prompt {
    display: grid;
    gap: 8px;
    padding: 11px;

    background: #fff8e7;
    border: 1px solid #d9b75f;
    border-radius: 9px;
}

.l-shape-conflict-prompt strong {
    color: #5b4718;
    font-size: 13px;
}

.l-shape-conflict-prompt p {
    margin: 0;
    color: #6d5a2a;
    font-size: 12px;
    line-height: 1.4;
}

.l-shape-conflict-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}

.l-shape-conflict-actions button {
    min-height: 34px;
    padding: 6px 9px;

    background: #ffffff;
    color: #263746;

    border: 1px solid #c8b16f;
    border-radius: 7px;

    font-size: 11px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
}

.l-shape-conflict-actions button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.l-shape-setup-message {
    min-height: 18px;
    margin: 0;

    color: #5d6972;
    font-size: 12px;
}

.l-shape-setup-message.error {
    color: #b42318;
    font-weight: 700;
}

.l-shape-setup-message.success {
    color: #2f6f4e;
    font-weight: 700;
}

.l-shape-setup-actions {
    display: flex;
    justify-content: flex-end;
}

.l-shape-apply-button {
    background: #263746;
    color: #ffffff;
    border-color: #263746;
}

.l-shape-apply-button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

@media (max-width: 800px),
       (orientation: portrait) and (max-width: 1100px) {

    .floor-shape-screen,
    .l-shape-setup-screen {
        min-height: 100dvh;
        padding: 0;
    }

    .setup-page-header {
        min-height: 54px;
        height: auto;
        padding: 7px 9px;
        gap: 6px;
    }

    .setup-start-button {
        min-height: 30px;
        padding: 5px 8px;
        font-size: 9px;
        white-space: nowrap;
    }

    .floor-shape-shell,
    .l-shape-setup-shell {
        padding: 8px 10px 10px;
    }

    .floor-shape-heading {
        margin-bottom: 8px;
    }

    .floor-shape-eyebrow {
        display: none;
    }

    .floor-shape-heading-row {
        gap: 8px;
    }

    .floor-shape-heading h2 {
        margin: 0;
        font-size: 20px;
        line-height: 1.15;
    }

    .floor-shape-heading p {
        margin-top: 3px;
        font-size: 12px;
        line-height: 1.25;
    }

    .floor-shape-heading-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 5px 12px;
        font-size: 12px;
    }

    .floor-shape-options {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .floor-shape-card {
        padding: 7px;
        gap: 5px;
        border-radius: 10px;
    }

    .floor-shape-preview {
        width: 100%;
        height: clamp(118px, 18vh, 150px);
        max-height: none;
    }

    .floor-shape-copy {
        gap: 1px;
    }

    .floor-shape-copy strong {
        font-size: 15px;
        line-height: 1.15;
    }

    .floor-shape-copy small {
        font-size: 11px;
        line-height: 1.15;
    }

    .floor-shape-actions {
        display: none;
    }

    .l-shape-setup-heading-row {
        align-items: center;
        margin-bottom: 8px;
    }

    .l-shape-setup-heading-row h2 {
        margin: 0 0 3px;
        font-size: 20px;
    }

    .l-shape-setup-heading-row p {
        font-size: 12px;
        line-height: 1.25;
    }

    .l-shape-setup-panel {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 8px;
    }

    .l-shape-setup-preview {
        width: min(86vw, 320px);
        max-height: none;
    }

    .l-shape-orientation-controls {
        gap: 8px;
        margin-top: 6px;
    }

    .l-shape-rotate-button {
        min-height: 34px;
        padding: 5px 12px;
        font-size: 12px;
    }

    .l-shape-orientation-controls span {
        font-size: 11px;
    }

    .l-shape-dimension-panel {
        gap: 7px;
    }

    .l-shape-setup-hint {
        font-size: 11px;
        line-height: 1.35;
    }

    .l-shape-wall-editor {
        gap: 8px;
        padding: 9px;
    }

    .l-shape-wall-editor-header {
        gap: 8px;
    }

    .l-shape-wall-editor-header strong {
        font-size: 13px;
    }

    .l-shape-wall-editor-header small {
        font-size: 10px;
    }

    .l-shape-wall-editor-field {
        gap: 3px;
        font-size: 11px;
    }

    .l-shape-input-wrap {
        gap: 4px;
    }

    .l-shape-input-wrap input {
        height: 34px;
        padding: 5px 7px;
        font-size: 13px;
    }

    .l-shape-wall-done-button {
        min-height: 34px;
        padding: 5px 12px;
        font-size: 12px;
    }

    .l-shape-wall-label {
        font-size: 11px;
    }

    .l-shape-setup-message {
        min-height: 14px;
        font-size: 11px;
    }

    .l-shape-apply-button {
        width: 100%;
        min-height: 36px;
        padding: 6px 12px;
        font-size: 12px;
    }
}

@media (max-width: 420px) and (max-height: 760px) {
    .floor-shape-shell {
        padding-top: 6px;
    }

    .floor-shape-heading {
        margin-bottom: 6px;
    }

    .floor-shape-heading p {
        font-size: 11px;
    }

    .floor-shape-options {
        gap: 6px;
    }

    .floor-shape-preview {
        height: clamp(108px, 17vh, 128px);
    }

    .floor-shape-card {
        padding: 6px;
        gap: 4px;
    }
}


/* V1.54 - use the user-supplied transparent white-text PNG as the complete clickable header brand */
.brand-button {
    gap: 10px !important;
}

.brand-button .header-brand-image {
    display: block;
    width: 185px;
    max-width: 100%;
    height: auto;
    flex: 0 1 auto;
}

.brand-button .brand-version {
    align-self: flex-start;
    margin: 3px 0 0 2px;
    font-size: 9px;
    line-height: 1;
    opacity: .55;
}

@media (max-width: 700px),
       (orientation: portrait) and (max-width: 1100px) {
    .brand-button .header-brand-image {
        width: 148px;
    }
}

/* V1.54 exact project-owner PNG for complete clickable header brand */
.brand-button .header-brand-image {
    display: block;
    width: 185px;
    aspect-ratio: 855 / 239;
    max-width: 100%;
    height: auto;
    flex: 0 1 auto;
    background-image: url("../assets/nuvision-header-logo.png?v=2.10");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
}

@media (max-width: 700px),
       (orientation: portrait) and (max-width: 1100px) {
    .brand-button .header-brand-image {
        width: 148px;
    }
}


/* L-shaped floor results: separate dimensional values from guidance.
   Specificity overrides the shared three-column mobile measurement grid. */
#workspace .l-shape-results-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 8px;
}

#workspace .l-shape-results-grid > div {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}

#workspace .l-shape-results-grid .l-shape-area-result {
    grid-column: 1 / -1;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid #dce1e5;
}

#workspace .l-shape-results-grid b {
    white-space: nowrap;
}

#workspace .l-shape-results-notes {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid #dce1e5;
    color: #65717c;
    font-size: 11px;
    line-height: 1.4;
}

#workspace .l-shape-results-notes p {
    margin: 0 0 6px;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    #workspace .l-shape-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        column-gap: 12px !important;
        row-gap: 8px !important;
    }

    #workspace .l-shape-results-grid .l-shape-area-result {
        grid-column: 1 / -1 !important;
    }

    #workspace .l-shape-results-grid > div {
        min-width: 0 !important;
    }
}


/* L-shaped bathroom: elevation preview navigation. */
#workspace .l-shape-wall-navigation {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

#workspace .l-shape-wall-navigation button {
    flex: 1 1 82px;
    min-height: 38px;
    border: 1px solid #cad2d9;
    border-radius: 6px;
    background: #e9eff3;
    color: #263746;
    font-size: 12px;
    cursor: pointer;
}

#workspace .l-shape-wall-preview-note {
    margin: 12px 0 0;
    border-top: 1px solid #dce1e5;
    padding-top: 8px;
    color: #65717c;
    font-size: 11px;
    line-height: 1.45;
}


/* V1.61: wall elevation cut results and embedded L-floor navigator. */
#workspace .l-shape-elevation-plan-panel {
    margin-bottom: 12px;
    padding: 10px;
    border: 1px solid #dce1e5;
    border-radius: 8px;
    background: #fff;
}

#workspace .l-shape-elevation-plan-heading {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 10px;
}

#workspace .l-shape-elevation-plan-heading strong {
    color: #263746;
    font-size: 12px;
}

#workspace .l-shape-elevation-plan-heading span {
    color: #65717c;
    font-size: 11px;
}

#workspace .l-shape-elevation-plan {
    display: block;
    width: min(100%, 240px);
    height: auto;
    max-height: 220px;
    margin: 0 auto;
    overflow: visible;
}

#workspace .l-shape-nav-floor {
    fill: #e3d8c8;
    stroke: none;
    cursor: pointer;
}

#workspace .l-shape-nav-wall {
    fill: none;
    stroke: #967c63;
    stroke-width: 13;
    stroke-linecap: round;
    pointer-events: none;
}

#workspace .l-shape-nav-wall.selected {
    stroke: #e5a021;
    stroke-width: 22;
}

#workspace .l-shape-nav-wall-hit {
    fill: none;
    stroke: transparent;
    cursor: pointer;
    pointer-events: stroke;
}

#workspace .l-shape-nav-wall-hit:focus {
    stroke: #e5a021;
    stroke-opacity: .35;
}

#workspace .l-shape-nav-label {
    fill: #263746;
    font-weight: 700;
    pointer-events: none;
}

#workspace .l-shape-nav-label.selected {
    fill: #a96000;
}

#workspace .l-shape-elevation-measurements {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

#workspace .l-shape-elevation-measurements > div {
    min-width: 0;
}

#workspace .l-shape-elevation-measurements b {
    white-space: nowrap;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    #workspace .l-shape-elevation-measurements {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}


/* V1.62: orientation navigator belongs to the drawing, not results. */
#workspace #canvas.canvas-wrap {
    position: relative;
}
#workspace .l-shape-drawing-navigator {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 15;
    width: clamp(100px, 22%, 156px);
    max-height: 48%;
    padding: 7px;
    border: 1px solid #cad2d9;
    border-radius: 8px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 2px 7px #00000015;
}
#workspace .l-shape-drawing-navigator .l-shape-elevation-plan-panel {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}
#workspace .l-shape-drawing-navigator .l-shape-elevation-plan-heading {
    margin-bottom: 4px;
}
#workspace .l-shape-drawing-navigator .l-shape-elevation-plan-heading strong {
    font-size: 10px;
}
#workspace .l-shape-drawing-navigator .l-shape-elevation-plan-heading span {
    display: none;
}
#workspace .l-shape-drawing-navigator .l-shape-elevation-plan {
    width: 100%;
    max-height: 145px;
    overflow: visible;
}
@media (max-width: 700px) {
    #workspace .l-shape-drawing-navigator {
        top: 6px;
        right: 6px;
        width: clamp(84px, 26%, 115px);
        padding: 5px;
    }
}


/* V1.63 L-shape: compact navigator alongside stacked Bathroom/Tile inputs.
   Never cover the elevation, and leave rectangular workflows unchanged. */
#controls > .l-shape-controls-navigator-slot:empty {
    display: none !important;
}
#controls > .l-shape-controls-navigator-slot:not(:empty) {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#controls .l-shape-controls-navigator-slot .l-shape-drawing-navigator {
    position: static;
    width: min(100%, 170px);
    max-height: none;
    padding: 7px;
}
#controls .l-shape-controls-navigator-slot .l-shape-elevation-plan {
    max-height: 150px;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    #controls.bathroom-input-layout:has(> .l-shape-controls-navigator-slot:not(:empty)) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    }
    #controls.bathroom-input-layout:has(> .l-shape-controls-navigator-slot:not(:empty)) > .size-group {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    #controls.bathroom-input-layout:has(> .l-shape-controls-navigator-slot:not(:empty)) > .tile-group {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    #controls.bathroom-input-layout > .l-shape-controls-navigator-slot:not(:empty) {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        align-self: stretch;
        padding: 3px;
    }
    #controls.bathroom-input-layout .l-shape-controls-navigator-slot .l-shape-drawing-navigator {
        width: 100%;
        max-width: 160px;
        padding: 5px;
    }
    #controls.bathroom-input-layout .l-shape-controls-navigator-slot .l-shape-elevation-plan-heading strong {
        font-size: 10px;
    }
}

/* V1.64 — Navigator uses the full combined Bathroom + Tile height on
   mobile; Set-out occupies the lower drawing toolbar on desktop. */
#controls .l-shape-controls-navigator-slot:not(:empty) {
    align-items: stretch;
}
#controls .l-shape-controls-navigator-slot .l-shape-drawing-navigator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: none;
}
#controls .l-shape-controls-navigator-slot .l-shape-elevation-plan {
    display: block;
    width: 100%;
    max-height: none;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}
@media (min-width: 1101px) and (orientation: landscape) {
    #drawingTools > .l-shape-relocated-setout {
        flex: 0 1 280px;
        min-width: 210px;
        max-width: 320px;
        padding: 0 8px;
    }
    #drawingTools > .l-shape-relocated-setout .segmented {
        display: flex;
        flex-wrap: wrap;
        gap: 3px;
    }
    #drawingTools > .l-shape-relocated-setout .segmented button {
        flex: 1 1 75px;
        font-size: 10px;
        padding: 3px;
    }
}
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    #controls.bathroom-input-layout > .l-shape-controls-navigator-slot:not(:empty) {
        height: 100%;
        min-height: 0;
    }
    #controls.bathroom-input-layout .l-shape-controls-navigator-slot .l-shape-drawing-navigator {
        width: 100%;
        max-width: none;
        height: 100%;
    }
    #controls.bathroom-input-layout .l-shape-controls-navigator-slot .l-shape-elevation-plan {
        width: 100%;
        max-height: none;
    }
}


/* V1.65 L-shape navigator repairs */
#controls .l-shape-controls-navigator-slot .l-shape-elevation-plan-heading {
    margin-bottom: 5px;
}
#controls .l-shape-controls-navigator-slot .l-shape-elevation-plan-heading strong {
    font-size: 11px;
    white-space: nowrap;
}
#controls .l-shape-controls-navigator-slot .l-shape-nav-floor {
    fill: #f2f0e9 !important;
}
#controls .l-shape-controls-navigator-slot .l-shape-nav-wall {
    stroke-width: 14;
}
#controls .l-shape-controls-navigator-slot .l-shape-nav-wall.selected {
    stroke: #f0a400;
    stroke-width: 35;
}
#controls .l-shape-controls-navigator-slot .l-shape-nav-wall-hit {
    pointer-events: stroke !important;
    stroke: rgba(0,0,0,0.001);
    cursor: pointer;
}
@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    #controls.bathroom-input-layout:has(> .l-shape-controls-navigator-slot:not(:empty)) {
        align-items: stretch;
        row-gap: 2px !important;
    }
    #controls.bathroom-input-layout:has(> .l-shape-controls-navigator-slot:not(:empty)) > .size-group,
    #controls.bathroom-input-layout:has(> .l-shape-controls-navigator-slot:not(:empty)) > .tile-group {
        align-self: stretch;
        margin: 0 !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    #controls.bathroom-input-layout:has(> .l-shape-controls-navigator-slot:not(:empty)) > .l-shape-controls-navigator-slot {
        margin: 0 !important;
        padding: 0 0 0 4px !important;
    }
    #controls.bathroom-input-layout .l-shape-controls-navigator-slot .l-shape-drawing-navigator {
        justify-content: center;
    }
}



/* V1.66: usable L-shape controls without changing drawing geometry. */
#workspace #canvas.draggable {
    touch-action: none;
    user-select: none;
    cursor: grab;
}

#workspace #canvas.draggable:active {
    cursor: grabbing;
}

#controls > .l-shape-controls-navigator-slot:not(:empty) {
    grid-column: 1 / -1;
}

#controls .l-shape-controls-navigator-slot .l-shape-drawing-navigator {
    height: auto;
    min-width: 0;
}

#controls .l-shape-controls-navigator-slot .l-shape-elevation-plan {
    width: 100%;
    height: auto;
    min-height: 150px;
    overflow: visible;
}

#controls .l-shape-floor-return {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 20px;
}

#workspace .l-shape-elevation-measurements > div {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
}

#workspace .l-shape-elevation-measurements b {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    #controls.bathroom-input-layout .l-shape-controls-navigator-slot .l-shape-elevation-plan {
        min-height: 120px;
    }
}


#controls .l-shape-controls-navigator-slot .l-shape-nav-label {
    fill: #263746;
    font-weight: 700;
    pointer-events: none;
    stroke: #f7f2e9;
    stroke-width: 2px;
    paint-order: stroke;
}

#controls .l-shape-controls-navigator-slot .l-shape-nav-label.selected {
    fill: #a96000;
}

/* V1.67: spread relocated desktop Set-out controls across the toolbar. */
@media (min-width: 1101px) and (orientation: landscape) {
    #drawingTools > .l-shape-relocated-setout {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 18px;
        row-gap: 5px;
        flex: 1 1 600px !important;
        min-width: 480px;
        max-width: none;
    }

    #drawingTools > .l-shape-relocated-setout > h3 {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }

    #drawingTools > .l-shape-relocated-setout > .setout-label {
        margin: 0;
    }

    #drawingTools > .l-shape-relocated-setout > .setout-label:nth-of-type(1) {
        grid-column: 1;
        grid-row: 2;
    }

    #drawingTools > .l-shape-relocated-setout > .setout-label:nth-of-type(2) {
        grid-column: 2;
        grid-row: 2;
    }

    #drawingTools > .l-shape-relocated-setout > .segmented {
        flex-wrap: nowrap;
        margin: 0;
    }

    #drawingTools > .l-shape-relocated-setout > .segmented:nth-of-type(1) {
        grid-column: 1;
        grid-row: 3;
    }

    #drawingTools > .l-shape-relocated-setout > .segmented:nth-of-type(2) {
        grid-column: 2;
        grid-row: 3;
    }

    #drawingTools > .l-shape-relocated-setout .segmented button {
        flex: 1 1 0;
        min-width: 0;
        min-height: 36px;
        padding: 5px 4px;
    }

    #drawingTools > .l-shape-relocated-setout > .setout-summary {
        grid-column: 1 / -1;
        grid-row: 4;
        margin-top: 0;
        padding: 5px 7px;
        line-height: 1.4;
    }

    #drawingTools > .l-shape-relocated-setout .setout-summary br {
        display: none;
    }

    #drawingTools > .l-shape-relocated-setout .setout-summary b:not(:first-child) {
        margin-left: 12px;
    }
}


/* V1.68: reuse the existing left column in compact L-shape elevations. */
#controls > .l-shape-mobile-measurements {
    display: none;
}

@media (max-width: 700px), (orientation: portrait) and (max-width: 1100px) {
    #controls.bathroom-input-layout.l-shape-mobile-elevation {
        height: var(--l-shape-elevation-controls-height);
        box-sizing: border-box;
        grid-template-rows: max-content minmax(0, 1fr) !important;
    }

    #controls.bathroom-input-layout.l-shape-mobile-elevation > .size-group {
        display: none !important;
    }

    #controls.bathroom-input-layout.l-shape-mobile-elevation:has(> .l-shape-controls-navigator-slot:not(:empty)) > .tile-group {
        grid-column: 1 !important;
        grid-row: 1 !important;
        display: grid !important;
        grid-template-rows: auto auto !important;
        align-self: start !important;
        align-content: start !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 5px !important;
    }

    #controls.bathroom-input-layout.l-shape-mobile-elevation > .l-shape-mobile-measurements {
        display: grid;
        grid-template-rows: max-content minmax(0, 1fr);
        grid-column: 1;
        grid-row: 2;
        align-self: stretch;
        min-width: 0;
        min-height: 0;
        margin: 0;
        padding: 5px;
        border: 1px solid #b8c4cb;
        border-radius: 8px;
        background: #f4f7f8;
        overflow: auto;
    }

    #controls .l-shape-mobile-measurements h3 {
        margin: 0 0 5px !important;
        font-size: 10px !important;
        line-height: 1.15;
    }

    #controls .l-shape-mobile-measurement-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: repeat(3, minmax(min-content, 1fr)) auto;
        min-height: 0;
        gap: 6px;
    }

    #controls .l-shape-mobile-measurement-grid > div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        min-width: 0;
    }

    #controls .l-shape-mobile-measurement-grid span {
        color: #65717c;
        font-size: 10px;
        line-height: 1.15;
    }

    #controls .l-shape-mobile-measurement-grid b {
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
    }

    #controls .l-shape-mobile-measurement-grid > .l-shape-mobile-area {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: space-between;
    }

    #workspace #surfaceResults.l-shape-relocated-results {
        display: none !important;
    }
}



/* V1.69: bathroom dimensions belong to the floor view on desktop. */
@media (min-width: 701px) and (orientation: landscape), (min-width: 1101px) {
    #controls.bathroom-wall-elevation > .size-group {
        display: none !important;
    }

    #controls.bathroom-wall-elevation > .tile-group {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
    }
}


/* V1.73: floor-to-bathroom choice, shared by desktop and mobile. */
.floor-transfer-dialog {
    width: min(440px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 22px;
    border: 1px solid #b6c3ca;
    border-radius: 12px;
    background: #f7f9fa;
    color: #202b34;
}

.floor-transfer-dialog::backdrop {
    background: #15212bbb;
}

.floor-transfer-dialog h2 {
    margin: 0 0 12px;
    font-size: 20px;
}

.floor-transfer-dialog p {
    margin: 0 0 20px;
    line-height: 1.5;
}

.floor-transfer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.floor-transfer-actions button {
    flex: 1 1 auto;
    min-height: 44px;
    padding: 8px 12px;
}

.floor-transfer-actions .primary {
    background: #263b49;
    color: #ffffff;
}


/* V1.74 — shared reference drawing palette, independent of viewport size.
   Borders are painted overlays; physical surface and tile sizes stay intact. */
#workspace #canvas.canvas-wrap,
.print-layout-canvas {
    background: #cdcdcd !important;
}
#workspace #canvas .floor,
.print-layout-canvas .floor {
    background: #000;
    border: 0 !important;
    box-shadow: none !important;
}
#workspace #canvas .tile,
.print-layout-canvas .tile {
    background: #fff;
    border: 0;
    box-shadow: inset 0 0 0 .5px #000;
}
#workspace #canvas .plan-wall-layer,
.print-layout-canvas .plan-wall-layer {
    box-shadow: none !important;
}
.drawing-boundary {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: visible;
    pointer-events: none;
    z-index: 17;
}
#workspace .l-shape-nav-floor {
    fill: #000;
}
#workspace .l-shape-nav-wall {
    stroke: #a535ff;
}
/* Keep the selected navigation edge distinct from the drawing perimeter. */
#workspace .l-shape-nav-wall.selected {
    stroke: #e5a021;
}