: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
}

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

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

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

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

@media(max-width:800px) {
    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) {
    .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 (orientation:portrait), (max-width:759px) {
    .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) {
    /* ---------- 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) {
    #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) {
    /* -----------------------------------------------------
           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) {
    /* -----------------------------------------------------
           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) {
    /* 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, .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) {
    .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) {
    #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) {
    /* 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) {
    /*
         * 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) {
    .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) {
    /*
         * 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) {
    /*
         * 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) {
    /* -----------------------------------------------------
           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) {

    #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) {

    .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;
    }
}