:root{
  --paper:#EEF1F4; --panel:#FFFFFF; --ink:#1B2A41; --muted:#5B6778; --line:#D3DAE3;
  --accent:#A6790C; --accent-ink:#FFFFFF; --ok:#2E7D4F; --warn:#B5561B; --err:#B3261E;
  --field:#F7F9FB; --raised:#F1F4F7; --rowline:#E4E8EE; --menu:#FFFFFF; --menu-line:#D3DAE3;
  --body:"Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;
  --display:"Barlow Semi Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14171E; --panel:#1C2029; --ink:#EEF0F3; --muted:#A9B0BC; --line:#2F3542;
    --accent:#E2B54A; --accent-ink:#1A1406; --ok:#6FCF97; --warn:#E39A62; --err:#F08A80; --field:#14171E;
    --raised:#242935; --rowline:#262B36; --menu:#242935; --menu-line:#3A4152;
  }
}
:root[data-theme="dark"]{
  --paper:#14171E; --panel:#1C2029; --ink:#EEF0F3; --muted:#A9B0BC; --line:#2F3542;
  --accent:#E2B54A; --accent-ink:#1A1406; --ok:#6FCF97; --warn:#E39A62; --err:#F08A80; --field:#14171E;
  --raised:#242935; --rowline:#262B36; --menu:#242935; --menu-line:#3A4152;
}
html{scroll-padding-top:calc(96px + env(safe-area-inset-top,0px));scroll-padding-bottom:110px}   /* keep focused boxes clear of the fixed site header and the sticky Next / Generate bar */
*,*::before,*::after{box-sizing:inherit}
body{margin:0;padding-top:0;background:var(--paper);color:var(--ink);font:400 15px/1.5 var(--body)}
.container{width:100%;max-width:100%;margin:0 auto;padding:0 clamp(1.75rem, 3.8vw, 4.25rem)}
.page{padding-bottom:56px;display:flex;flex-direction:column;gap:24px}
aside{display:flex;flex-direction:column;gap:14px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:16px}
.step h2{font:600 18px/1.2 var(--display);margin:0 0 10px;display:flex;gap:10px;align-items:baseline;color:var(--accent)}
.step h2 span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  border:1.5px solid var(--accent);font:600 13px/1 var(--body);flex:none;transform:translateY(-1px)}
.drop{display:block;position:relative;border:1.5px dashed var(--line);border-radius:6px;padding:18px 14px;text-align:center;
  background:var(--field);cursor:pointer;transition:border-color .15s}
.drop:hover,.drop.over{border-color:var(--accent)}
.drop strong{display:block;font-weight:600;color:var(--accent)}
.drop small{color:var(--muted)}
.drop input{position:absolute;width:1px;height:1px;opacity:0}
.fname{margin-top:8px;font-size:13px;color:var(--muted);word-break:break-all}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
button{font:500 14px/1 var(--body);padding:10px 14px;border-radius:5px;cursor:pointer;
  border:1px solid var(--line);background:var(--panel);color:var(--ink)}
button:hover{border-color:var(--accent)}
button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
button:disabled{opacity:.45;cursor:not-allowed}
button:focus-visible,.drop:focus-within,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn-link, .btn-link:visited{border:none;background:none;padding:0;color:var(--accent);text-decoration:underline;font-size:13px}
.excel-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.excel-action-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 10px;border-radius:5px;font:500 13px/1.2 var(--body);color:var(--ink);background:var(--field);border:1px solid var(--line);text-decoration:none;cursor:pointer;transition:all .15s ease;box-sizing:border-box}
.excel-action-btn svg{color:var(--accent);flex-shrink:0}
.excel-action-btn:hover{border-color:var(--accent);color:var(--accent);background:rgba(212, 175, 55,.06);text-decoration:none}
.excel-action-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:340px){.excel-actions{grid-template-columns:1fr}}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fields label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
.fields .wide{grid-column:1/-1}
input[type=number],input[type=text],input[type=email],input[type=password],input[type=tel],select{font:500 14px/1.2 var(--body);padding:8px 9px;border:1px solid var(--line);
  border-radius:5px;background:var(--field);color:var(--ink);width:100%;font-variant-numeric:tabular-nums}
input::placeholder{color:var(--muted);opacity:.8}
.btn-sm{padding:7px 10px;font-size:13px}
.ed-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ed-head h3{margin:0;color:var(--accent)}
.tabs{display:flex;gap:4px;background:var(--field);border:1px solid var(--line);border-radius:6px;padding:3px}
.tabs button{border:none;background:none;padding:7px 14px;font-size:14px}
.tabs button[aria-selected="true"]{background:var(--panel);box-shadow:0 0 0 1px var(--line);font-weight:600}
.tabs small{color:var(--muted);font-weight:400;margin-left:4px}
.scroll.tall{max-height:440px}
/* each column is at least as wide as its header and its widest value (dropdowns never crop their text); spare width is shared out so the table fills the area */
table.grid{width:100%}
table.grid th,table.grid td{text-align:left;padding:4px 3px;border-bottom:1px solid var(--line);white-space:nowrap}
table.grid th{padding:6px 3px;font-size:12.5px}
table.grid input,table.grid select{padding:6px 7px;font-size:13.5px;width:100%}
table.grid select{min-width:max-content}
table.grid input[type=number]{min-width:78px} table.grid input.w-id{min-width:58px} table.grid input.w-name{min-width:150px}
table.grid input[data-f="ang"]{min-width:62px}
table.grid td.act{width:1px;text-align:center}
.del{border:none;background:none;color:var(--muted);font-size:18px;line-height:1;padding:4px 8px}
.del:hover{color:var(--err)}
.grid-empty{padding:18px 6px;color:var(--muted);text-align:left}
.pane-foot{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
.pane-foot .hint{margin:0}
.filter{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:8px}
.filter select{width:auto;min-width:180px}
.divider{height:1px;background:var(--line);margin:14px 0}
/* two pages: stepper, submit bar, error list */
.steps{display:flex;align-items:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.stp{display:inline-flex;align-items:center;gap:8px;padding:7px 12px 7px 8px;border-radius:999px;border:1px solid var(--line);
  color:var(--muted);text-decoration:none;font:500 14px/1 var(--body);background:var(--panel)}
.stp b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;font:600 12px/1 var(--body)}
.stp[aria-current="page"]{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}
.stp:hover{border-color:var(--accent)}
.steps .sep{width:28px;height:1.5px;background:var(--line)}
.next-bar, .submit-bar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;
  box-shadow:0 6px 24px rgba(0,0,0,.18);border-color:var(--accent)}
.next-bar strong, .submit-bar strong{font:600 17px/1.2 var(--display);color:var(--accent)}
.next-bar .hint, .submit-bar .hint{margin:2px 0 0}
.bar-btns{display:flex;gap:10px;flex-wrap:wrap}
.subtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:0 0 12px}
.subtabs button{border:none;border-bottom:2px solid transparent;background:none;padding:8px 14px;font-size:14px;border-radius:0;margin-bottom:-1px}
.subtabs button[aria-selected="true"]{border-bottom-color:var(--accent);font-weight:600;color:var(--accent)}
.subtabs small{color:var(--muted);font-weight:400;margin-left:4px}
td.ro{white-space:nowrap;color:var(--muted);font-size:13px}
#view-input[data-step="project"] > main{display:none}
#view-input[data-step="input"] > aside{display:none}
#view-input > aside > .next-bar{grid-column:1/-1}
button.big{padding:13px 22px;font-size:15px;font-weight:600}
.errors{border-color:var(--err)}
.errors h3{font:600 17px/1.2 var(--display);margin:0 0 8px;color:var(--err)}
.errors ul{margin:0;padding-left:20px;font-size:14px}
.errors li{margin:3px 0}
.summary dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:14px}
.summary dt{color:var(--muted)} .summary dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.summary h2{font:600 20px/1.2 var(--display);margin:0;word-break:break-word;color:var(--accent)}
.panel h2.plain{font:600 18px/1.2 var(--display);margin:0 0 10px;color:var(--accent)}
[hidden]{display:none!important}
/* "?" beside Starts at room / Corner, and its reference picture */
.fields label > span{display:inline-flex;align-items:center}
.info{display:inline-grid;place-items:center;width:18px;height:18px;min-width:0;padding:0;margin-left:5px;border-radius:50%;
  border:1.5px solid var(--accent);background:none;color:var(--accent);font:700 11px/1 var(--body);vertical-align:1px;cursor:help}
.info:hover,.info[aria-expanded="true"]{background:var(--accent);color:var(--accent-ink)}
.reftip{position:fixed;z-index:40;width:min(400px,calc(100vw - 24px));background:var(--panel);color:var(--ink);
  border:1px solid var(--accent);border-radius:8px;box-shadow:0 12px 34px rgba(0,0,0,.38);padding:12px 12px 14px;font-size:13.5px;line-height:1.45;
  max-height:calc(100vh - 24px);overflow:auto}   /* the taller door pictures scroll inside the tooltip on short screens */
.reftip.by-focus{pointer-events:none}
.reftip h4{font:600 16px/1.2 var(--display);margin:0 0 8px}
.reftip svg,.reftip img.pic{display:block;width:100%;height:auto;background:#fff;border-radius:6px;border:1px solid var(--line)}
td.mk{font-weight:700;color:var(--accent);white-space:nowrap}
/* doors / windows table: the dropdowns keep a readable width (the table scrolls sideways when the preview is open) */
.reftip p{margin:8px 0 0;color:var(--muted)}
.reftip p b{color:var(--ink);font-weight:600}
.reftip .eg{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.reftip .eg span{background:var(--field);border:1px solid var(--line);border-radius:999px;padding:3px 10px;font-size:12.5px}
.reftip .eg b{color:var(--accent);font-weight:600}
/* live 2D preview beside the survey tables: the table narrows, the sketch sits sticky on the right */
.ed-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pv-btn{display:inline-flex;align-items:center;gap:7px;padding:8px 13px}
.pv-btn svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pv-btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.ed-split{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.ed-split.pv-on{grid-template-columns:minmax(0,3fr) minmax(320px,2fr)}
.ed-main{min-width:0}
.pv-pane{position:sticky;top:12px;min-width:0}
.pv-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:8px}
#pvCanvas{display:block;width:100%}
.pv-notes{list-style:none;margin:10px 0 0;padding:0;font-size:13.5px}
.pv-notes li{display:flex;gap:8px;padding:4px 0;border-top:1px solid var(--line)}
.pv-notes li:first-child{border-top:none}
@media (max-width:1000px){.ed-split.pv-on{grid-template-columns:minmax(0,1fr)}.pv-pane{position:static;order:-1}}
/* Rooms table has two header rows (Dimensions > Length | Width): keep both stuck together while scrolling */
table.grid.two thead{position:sticky;top:0;z-index:1;background:var(--panel)}
table.grid.two th{position:static;vertical-align:bottom}
table.grid.two th.grp{text-align:center;color:var(--ink);border-bottom:1px solid var(--muted);border-left:1px solid var(--line)}
table.grid.two th.sub{border-left:1px solid var(--line)}
table.grid.two th.sub + th.sub{border-left:none}
td.dimx{color:var(--muted);font-size:13px;white-space:nowrap;text-align:left;border-left:1px solid var(--line)}
/* Move column: to top / up one / down one / to bottom */
.mvg{display:inline-flex;gap:3px}
.mv{display:inline-grid;place-items:center;width:26px;height:26px;min-width:0;padding:0;border-radius:5px;border:1px solid var(--line);background:var(--field);color:var(--ink)}
.mv svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mv:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.mv:disabled{opacity:.3;cursor:default}
table.grid td.mvc{width:1px;white-space:nowrap}
table.grid th.mvh{white-space:nowrap}
@keyframes rowflash{from{background:color-mix(in srgb,var(--accent) 30%,transparent)}to{background:transparent}}
tr.flash>td{animation:rowflash 1.1s ease-out}
@media (prefers-reduced-motion:reduce){tr.flash>td{animation:none}}
/* short how-to at the top of the survey data editor: toggled only by header button */
details.guide summary{display:none!important}
details.guide:not([open]){display:none!important}
details.guide[open]{display:block!important;background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:0 0 16px;font-size:13.5px}
.guide-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.guide-title{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--accent)}
.guide-close{background:none;border:none;color:var(--muted);cursor:pointer;padding:4px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;transition:all .15s}
.guide-close:hover{color:var(--ink);background:var(--field)}
.guide ol{margin:8px 0 0;padding-left:20px;color:var(--muted)}
.guide li{margin:4px 0;line-height:1.5}
.guide li b{color:var(--ink);font-weight:600}
.guide .hint{margin:10px 0 0}
.info-demo{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);font:700 10px/1 var(--body);vertical-align:1px;margin:0 2px}
/* page 2: Output selector + one view at a time on the right */
/* round download button floating on the plan (drawing paper is always white, so fixed colours) */
.fab{position:absolute;top:14px;right:14px;width:48px;height:48px;padding:0;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);border:none;color:var(--accent-ink);box-shadow:0 3px 10px rgba(0,0,0,.28);transition:transform .15s,box-shadow .15s}
.fab:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(27,42,65,.34)}
.fab:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (max-width:600px){.fab{top:6px;right:6px;width:38px;height:38px}.fab svg{width:18px;height:18px}}
.outnav button[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.out{display:flex;flex-direction:column;gap:16px}
.out-head{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.out-head h3{font:600 20px/1.2 var(--display);margin:0;color:var(--accent)}
.out-head .hint{margin:3px 0 0}
.out-head.bare{margin-bottom:-4px}
.out-sub{font:600 16px/1.3 var(--display);margin:0 0 10px;color:var(--accent)}
h4.out-sub{margin:18px 0 10px;display:block;clear:both}
#out-survey > h4.out-sub:first-of-type{margin-top:2px}
#svCornerWrap, #svOpenWrap{margin-top:14px;display:block}
#svCornerWrap[hidden], #svOpenWrap[hidden]{display:none !important}
.xscroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.xscroll::-webkit-scrollbar{height:7px}
.xscroll::-webkit-scrollbar-track{background:var(--field);border-radius:4px}
.xscroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
.xscroll::-webkit-scrollbar-thumb:hover{background:var(--muted)}

#view-results{align-items:start}
#view-results > aside{
  position:sticky;
  top:24px;
  max-height:calc(100vh - 48px);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--line) transparent;
}
#view-results > aside::-webkit-scrollbar{width:6px}
#view-results > aside::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
@media (max-width:900px){
  #view-results > aside{
    position:static;
    max-height:none;
    overflow-y:visible;
  }
}
.out-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:14px;border-top:1px solid var(--line)}
table.corners tr.first td{border-top:1.5px solid var(--muted)}
table.corners tbody tr:first-child td{border-top:none}
table.corners td[rowspan]{vertical-align:top}
.aci{display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid var(--line);vertical-align:-1px;margin-right:7px}
/* page 1: layout is handled in page frame styles below */
#view-input{grid-template-columns:minmax(0,1fr)}
.hint{font-size:13px;color:var(--muted);margin:8px 0 0}
.stack{display:flex;flex-direction:column;gap:8px}
.stack button{text-align:left;display:flex;justify-content:space-between;align-items:center}
.stack button small{color:inherit;opacity:.75;font-weight:400}
#report{list-style:none;margin:0;padding:0;font-size:14px}
#report li{padding:6px 0;border-top:1px solid var(--line);display:flex;gap:8px}
#report li:first-child{border-top:none}
.dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:7px}
.ok .dot{background:var(--ok)} .warn .dot{background:var(--warn)} .err .dot{background:var(--err)}
.err{color:var(--err)}
main{display:flex;flex-direction:column;gap:16px;min-width:0}
.sheet{background:#fff;border:1px solid var(--line);border-radius:6px;padding:10px;position:relative}
#plan{display:block;width:100%;height:auto}
.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;color:#5B6778;padding:20px}
.empty p{max-width:36ch;margin:0}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;color:#5B6778;padding:6px 6px 2px}
.legend i{display:inline-block;width:22px;height:9px;vertical-align:middle;margin-right:6px}
.tables{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:16px}
@media (max-width:1100px){.tables{grid-template-columns:minmax(0,1fr)}}
.tables h3{font:600 17px/1.2 var(--display);margin:0 0 8px}
.scroll{overflow:auto;max-height:340px}
table{border-collapse:collapse;width:100%;font-size:13.5px;font-variant-numeric:tabular-nums}
th,td{padding:6px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
th{font-weight:600;color:var(--muted);position:sticky;top:0;background:var(--panel)}
th:first-child,td:first-child,.l{text-align:left}
tfoot td{font-weight:600;border-bottom:none}
/* wall centrelines as lines: grouped Start point / End point headers over X, Y */
table.lines thead{position:sticky;top:0;z-index:1;background:var(--panel)}
table.lines th{position:static;vertical-align:bottom;line-height:1.25}
table.lines th.grp{text-align:center;color:var(--ink);border-bottom:1px solid var(--muted)}
table.lines th.sub{text-align:right}
table.lines th.grp,table.lines th.sub:nth-child(odd),table.lines td:nth-child(4),table.lines td:nth-child(6){border-left:1px solid var(--line)}
.toast{position:fixed;z-index:80;left:50%;bottom:calc(104px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  background:var(--ink);color:var(--panel);padding:10px 16px;border-radius:5px;font-size:14px;opacity:0;
  pointer-events:none;transition:opacity .2s;width:max-content;max-width:min(92vw,520px);text-align:center}
.toast.show{opacity:1}
/* problems: a card in the middle of the screen, above the Generate bar, tap or click to dismiss */
.toast.center{top:50%;bottom:auto;transform:translate(-50%,-50%);background:var(--panel);color:var(--ink);
  border:2px solid var(--warn);border-radius:10px;padding:18px 24px 18px 20px;font-size:16px;line-height:1.45;font-weight:500;
  box-shadow:0 18px 50px rgba(0,0,0,.45);max-width:min(92vw,440px);text-align:left;display:flex;gap:12px;align-items:flex-start}
.toast.center::before{content:"!";flex:none;display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:var(--warn);color:#fff;font:700 15px/1 var(--body);margin-top:1px}
.toast.center.show{pointer-events:auto;cursor:pointer}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==================== 1. TOP NAVBAR (LOGO REMOVED, LINKS ON RIGHT NEAR THEME) ==================== */
.app-nav{
  position:fixed; top:0; left:0; right:0; z-index:1000; width:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:0 clamp(20px, 2.8vw, 48px);
  height:68px;
  background:var(--panel);
  border-bottom:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.08);
  transition:background-color .2s, border-color .2s;
}
.nav-left{display:flex; align-items:center}
.nav-brand{
  display:inline-flex; align-items:center; gap:9px;
  text-decoration:none; color:var(--accent);
  font:700 21px/1 var(--display); letter-spacing:-0.015em;
  transition:opacity .15s;
}
.nav-logo{
  color:var(--accent);
  flex-shrink:0;
  transition:color .2s;
}
.nav-brand:hover{opacity:.85}
.nav-right{
  display:flex; align-items:center; gap:14px;
}
.nav-links{
  display:flex; align-items:center; gap:16px;
}
.nav-auth-wrap{position:relative;display:flex;align-items:center}
.nav-auth{border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:600;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-auth:hover{border-color:var(--accent);color:var(--accent)}
.auth-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:220px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.auth-menu .hint{margin:0 0 8px;word-break:break-all}
.auth-card{padding:20px}
.auth-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.auth-head h3{margin:0;color:var(--accent)}
.auth-x{border:none;background:none;color:var(--muted);font-size:24px;line-height:1;padding:2px 8px}
.auth-x:hover{color:var(--ink)}
.auth-reason{margin:0 0 10px;color:var(--ink)}
#authBody{display:flex;flex-direction:column;gap:10px}
#authBody label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--muted)}
#authBody input{font-size:15px}
#authBody button.is-busy:disabled{opacity:1;cursor:progress}
#authBody[aria-busy="true"] a.lnk{opacity:.5;pointer-events:none}
.spin{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2s}}
#authBody .pw-field{position:relative;display:block}
#authBody .pw-field input{width:100%;box-sizing:border-box;padding-right:42px}
#authBody .pw-eye{position:absolute;right:3px;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;
  padding:6px;border:none;border-radius:4px;background:none;color:var(--muted);line-height:0}
#authBody .pw-eye:hover,#authBody .pw-eye[aria-pressed="true"]{color:var(--accent);background:none}
#authBody .pw-eye:focus-visible{outline:2px solid var(--accent);outline-offset:0}
#authBody .pw-eye svg{width:18px;height:18px}
#authBody input.code{letter-spacing:.35em;text-align:center;font-size:20px;font-weight:600}
#authBody .row-links{display:flex;gap:14px;flex-wrap:wrap;font-size:13px}
#authBody a.lnk{color:var(--accent);cursor:pointer;text-decoration:underline;background:none;border:none;padding:0}
#authBody a.lnk[aria-disabled="true"]{color:var(--muted);cursor:default;text-decoration:none}
.auth-err{margin:10px 0 0;padding:9px 11px;border-radius:6px;border:1px solid var(--err);color:var(--err);font-size:13.5px}
.auth-ok{margin:0;padding:9px 11px;border-radius:6px;border:1px solid var(--accent);font-size:13.5px}
.cloud-panel{display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding:14px 20px}
.cloud-info{flex:1 1 320px;min-width:0}
.cloud-info strong{font:600 16px/1.2 var(--display);color:var(--accent);display:block}
.cloud-info .hint{margin:4px 0 0;font-size:13.5px;line-height:1.5}
.cloud-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.cloud-actions .excel-action-btn{padding:9px 14px}
.cloud-actions [hidden]{display:none !important}
#view-input[data-step="input"] > .cloud-panel{display:none}
@media (max-width:700px){.cloud-actions{justify-content:flex-start;width:100%}.cloud-actions .excel-action-btn{flex:1 1 150px}}
#authBody label.consent{flex-direction:row;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.45}
#authBody label.consent input{margin-top:3px;flex:none}
#projDlg{border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--ink);padding:0;width:min(520px,94vw);box-shadow:0 20px 60px rgba(0,0,0,.5)}
#projDlg::backdrop{background:rgba(5,10,18,.62)}
.proj-list{display:flex;flex-direction:column;gap:8px;max-height:min(60vh,420px);overflow:auto}
.proj-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--field)}
.proj-row .meta{flex:1;min-width:0}
.proj-row .meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj-row .meta small{color:var(--muted)}
.proj-row button{padding:6px 12px;font-size:13px}
.proj-row button.danger{color:var(--err);border-color:var(--err)}
.nav-link{
  display:inline-flex; align-items:center;
  padding:6px 4px;
  text-decoration:none; font:500 14.5px/1 var(--body);
  color:var(--muted); background:transparent;
  transition:color .15s;
}
.nav-link:hover{
  color:var(--ink); background:transparent;
}
.nav-link[aria-current],
.nav-link[aria-current="page"]{
  color:var(--accent); background:transparent;
  font-weight:600;
}
.nav-link[aria-current]:hover,
.nav-link[aria-current="page"]:hover{
  color:var(--accent); background:transparent;
}
.nav-theme-btn{
  display:inline-grid; place-items:center;
  width:36px; height:36px; min-width:36px; border-radius:50%;
  border:1px solid var(--line); background:var(--field);
  color:var(--ink); cursor:pointer; padding:0;
  transition:border-color .15s, transform .15s;
}
.nav-theme-btn:hover{
  border-color:var(--accent); transform:scale(1.05);
}
.theme-icon-light{display:none}
.theme-icon-dark{display:block}
:root[data-theme="dark"] .theme-icon-dark{display:none}
:root[data-theme="dark"] .theme-icon-light{display:block}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-icon-dark{display:none}
  :root:not([data-theme="light"]) .theme-icon-light{display:block}
}

/* ==================== 2. OUTSIDE STEP BOX (MATCHING SUBMIT BAR SNAPSHOT) ==================== */
#view-tool-header{
  display:none !important;
}
.step-banner-panel{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  margin: 48px clamp(1.75rem, 3.8vw, 4.25rem) 0;   /* aligned with app bar padding, matching top spacing below fixed header with other pages */
  padding: 16px 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
}
.step-banner-info{
  flex: 1 1 340px; min-width: 0; max-width: 820px;   /* text on the left, the three steps beside it on the right (they drop below only on a narrow screen) */
}
.step-banner-info strong{
  font: 600 16px/1.2 var(--display); color: var(--accent); display: block;
}
.step-banner-info .hint{
  margin: 4px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.5;
}
.step-banner-panel .steps{
  margin-top: 0; margin-left: auto; flex: 0 0 auto;
}
@media (max-width:900px){ .step-banner-panel .steps{ flex: 1 1 100%; margin-left: 0; } }   /* on a narrow screen the steps go back under the text and wrap */

/* ==================== 3. FULL-WIDTH MATCHING LAYOUT FOR OVERVIEW ==================== */
.page-view{
  width:100%;
  padding:48px clamp(1.75rem, 3.8vw, 4.25rem) 40px;
}
.view-hero{margin-bottom:24px}
.view-hero h2{
  font:700 clamp(24px, 3vw, 34px)/1.15 var(--display);
  margin:0 0 8px; color:var(--accent);
}
.view-hero p{
  margin:0; font-size:15px; color:var(--muted); line-height:1.55; max-width:85ch;
}

/* Full Width Video Box in Overview */
.video-box{
  background:var(--panel); border:1px solid var(--line);
  border-radius:6px; padding:24px; margin-bottom:20px;
  width:100%;
}
.video-box h3{
  font:600 20px/1.2 var(--display); margin:0 0 4px; color:var(--ink);
}
.video-box .hint{margin:0 0 16px; font-size:13.5px}
.video-frame{
  position:relative; width:100%; max-width:980px; aspect-ratio:16/9;
  margin:0 auto 16px;
  border-radius:6px; overflow:hidden; border:1px solid var(--line); background:#000;
  box-shadow:0 6px 24px rgba(0,0,0,.18);
}
.video-frame iframe{
  position:absolute; inset:0; width:100%; height:100%; border:none;
}
.video-bar{
  display:flex; gap:8px; align-items:center; background:var(--field);
  border:1px solid var(--line); border-radius:6px; padding:10px 14px;
  max-width:980px; margin:0 auto; flex-wrap:wrap;
}
.video-bar label{font-size:13px; font-weight:600; color:var(--ink)}
.video-bar input{flex:1; min-width:240px}

/* Full Width 4-Step Cards Grid */
.steps-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px; margin-bottom:20px; width:100%;
}
.step-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:6px; padding:20px;
  transition:transform .18s, border-color .18s;
}
.step-card:hover{
  transform:translateY(-2px); border-color:var(--accent);
}
.step-card-num{
  display:inline-grid; place-items:center;
  width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:var(--accent-ink);
  font:700 14px/1 var(--body); margin-bottom:16px;
}
.step-card h4{
  font:600 18px/1.2 var(--display); margin:0 0 8px; color:var(--ink);
}
.step-card p{
  font-size:13.5px; color:var(--muted); line-height:1.55; margin:0;
}

/* Full Width Orientation & Resources Info Box */
.info-card{
  background:var(--panel); border:1px solid var(--line);
  border-radius:6px; padding:24px; margin-bottom:20px; width:100%;
}
.info-card h3{
  font:600 19px/1.2 var(--display); margin:0 0 8px; color:var(--accent);
}
.dir-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:12px; margin:16px 0; width:100%;
}
.dir-item{
  background:var(--field); border:1px solid var(--line);
  border-radius:6px; padding:12px 14px;
}
.dir-item strong{
  display:block; font:700 14px var(--display); color:var(--accent); margin-bottom:4px;
}
.dir-item span{font-size:13px; color:var(--muted); line-height:1.4}
.action-row{
  display:flex; gap:14px; align-items:center; justify-content:space-between;
  flex-wrap:wrap; padding-top:16px; border-top:1px solid var(--line);
}
.action-link{
  display:inline-flex; align-items:center; gap:7px;
  font:600 14.5px/1.2 var(--body);
  color:var(--accent); text-decoration:none;
  padding:8px 0;
  transition:opacity .15s, transform .15s;
}
.action-link, .action-link:visited{
  color:var(--accent);
}
.action-link:hover{
  color:var(--accent);
  opacity:.82;
}
.action-link.action-download:hover{
  transform:translateY(1px);
}
.action-link svg{
  flex-shrink:0;
  stroke:currentColor;
}
.action-primary{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent);
  border:1px solid var(--accent);
  color:var(--accent-ink) !important;
  border-radius:5px;
  padding:9px 18px;
  font:600 13.5px/1 var(--body);
  text-decoration:none;
  cursor:pointer;
  transition:opacity .15s, transform .15s, box-shadow .15s;
}
.action-primary, .action-primary:visited{
  color:var(--accent-ink) !important;
}
.action-primary:hover{
  color:var(--accent-ink) !important;
  opacity:.9;
  transform:translateY(-1px);
  box-shadow:0 3px 10px rgba(0,0,0,.15);
}

/* ==================== 4. ABOUT DEVELOPER SHOWCASE ==================== */
.about-page-view{
  width:100%;
  padding:28px clamp(1.75rem, 3.8vw, 4.25rem) 56px;   /* same side gutter as the tool pages */
  display:flex;
  justify-content:center;
}
.about-center-card-wrap{
  width:100%;
  /* both cards are as wide as the first card's text block (1030px) plus that card's side padding, so the text keeps
     its width and the card edges sit just outside it; below that the cards simply fill the page */
  max-width:calc(1030px + 2 * clamp(24px, 5vw, 72px));
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:26px;
}

/* 1. Hero Profile Card */
.dev-hero-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(40px,5vw,72px) clamp(24px,5vw,72px) clamp(36px,4.5vw,64px);
  box-shadow:0 14px 38px rgba(0,0,0,.12);
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
}
.dev-hero-card::before{
  content:'';
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:70%; height:3px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
.dev-avatar-wrap{
  position:relative;
  margin-bottom:20px;
}
.dev-avatar{
  width:clamp(112px,11vw,148px); height:clamp(112px,11vw,148px); border-radius:50%;
  background:linear-gradient(135deg, var(--accent), #156275);
  display:grid; place-items:center; color:#0B161E;
  font:700 44px/1 var(--display);
  box-shadow:0 0 0 4px var(--panel), 0 0 0 7px var(--accent), 0 12px 28px rgba(212, 175, 55, 0.25);
}
.dev-status-badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 18px; border-radius:999px;
  background:rgba(212, 175, 55, 0.1); border:1px solid rgba(212, 175, 55, 0.35);
  color:var(--accent); font:600 14px/1.3 var(--body); text-align:center;
  margin-bottom:16px;
  letter-spacing:0.02em;
}
.dev-status-dot{
  width:8px; height:8px; border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 8px var(--ok);
  display:inline-block;
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot{
  0%,100%{box-shadow:0 0 0 0 rgba(46,125,79,.55)}
  50%{box-shadow:0 0 0 5px rgba(46,125,79,0)}
}
@media(prefers-reduced-motion:reduce){.dev-status-dot{animation:none}}
.dev-hero-card h2{
  font:700 clamp(30px, 3.8vw, 46px)/1.15 var(--display);
  margin:0 0 10px; color:var(--ink);
  letter-spacing:-0.015em;
}
.dev-headline{
  font:600 clamp(16px,1.5vw,19px)/1.4 var(--body);
  color:var(--accent);
  margin:0 0 22px;
}
.dev-bio{
  font-size:clamp(15.5px,1.2vw,17.5px); color:var(--muted); line-height:1.8;
  margin:0 0 34px; max-width:1030px;
}
.dev-bio.compact{ margin-top:-18px; }
@media(max-width:600px){
  .dev-hero-card{ padding:36px 24px 32px; }
}
.dev-socials{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
.btn-social{
  display:inline-flex; align-items:center; gap:8px;
  padding:11px 22px; border-radius:8px;
  border:1px solid var(--line); background:var(--field);
  color:var(--ink); text-decoration:none; font:600 14.5px var(--body);
  transition:transform .15s, border-color .15s, background .15s, color .15s;
}
.btn-social:hover{
  transform:translateY(-2px); border-color:var(--accent); color:var(--accent);
}
.btn-social.linkedin{
  background:#0A66C2; color:#fff; border-color:#0A66C2;
}
.btn-social.linkedin:hover{
  background:#084e96; border-color:#084e96; color:#fff;
}
.btn-social.primary{
  background:var(--accent); color:var(--accent-ink) !important; border-color:var(--accent);
}
.btn-social.primary:hover{
  opacity:.92; color:var(--accent-ink) !important;
}

/* Story / Mission Card */
.mission-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:clamp(24px,3vw,40px) clamp(22px,3.5vw,48px);
  transition:border-color .18s, transform .18s;
  /* the three paragraphs sit side by side on wide screens (readable line length), and stack as the page narrows */
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap:18px clamp(24px,3vw,44px);
}
.mission-card:hover{
  border-color:var(--accent);
  transform:translateY(-2px);
}
.mission-card h3{
  grid-column:1 / -1;
  font:700 clamp(21px,2vw,26px)/1.2 var(--display);
  margin:0;
  color:var(--ink);
}
.mission-card p{
  font-size:clamp(15px,1.15vw,16.5px);
  color:var(--muted);
  line-height:1.75;
  margin:0;
}
.mission-card p:last-child{
  margin-bottom:0;
}
.mission-card strong{
  color:var(--ink);
  font-weight:600;
}



/* Dropdown (combo box) lists: gold hover/selection instead of the browser's default blue.
   Uses customizable selects (Chrome/Edge 135+); other browsers keep their native list. */
@supports (appearance: base-select){
  select, select::picker(select){appearance:base-select}
  select::picker(select){
    background:var(--panel); color:var(--ink); border:1px solid var(--line); border-radius:8px;
    padding:4px; margin-top:4px; box-shadow:0 8px 24px rgba(0,0,0,.28);
  }
  select::picker-icon{color:var(--muted)}
  select option{padding:7px 10px; border-radius:6px; color:var(--ink); font:500 14px/1.3 var(--body); cursor:pointer}
  select option::checkmark{display:none}
  select option:hover,select option:focus-visible,select option:active{background:color-mix(in srgb, var(--accent) 18%, transparent); color:var(--accent); outline:none}
  select option:checked{background:var(--accent); color:var(--accent-ink)}
  select option:disabled{opacity:.45}
}
/* =====================================================================
   UI REFRESH (design: "Floor Plan Designer – UI Improvements")
   Layout and look only; every id the script uses is kept.
   ===================================================================== */
.ic{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
.grow{flex:1 1 20px}
.sec-h{font:600 22px/1.2 var(--display);margin:0;color:var(--ink)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px}
.panel{border-radius:16px}
button{border-radius:10px;font:600 15px/1.1 var(--body);padding:10px 16px;display:inline-flex;align-items:center;gap:8px;justify-content:center}
button.big{padding:13px 22px;font-size:17px;font-weight:700}
button.primary{font-weight:700}
.btn2{background:var(--raised);border:1px solid var(--line);color:var(--ink)}
.btn2.sm{padding:8px 12px;font-size:14px}
.ghost{background:none;border:1px solid var(--line);color:var(--ink);font-weight:500}
input[type=number],input[type=text],input[type=email],input[type=password],input[type=tel],select{border-radius:10px;padding:10px 12px;font-size:15px}
.info{display:inline-grid;padding:0;border-radius:50%;gap:0}
.hint{font-size:14px}

.tool-top{width:100%;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.tool-bar{display:none}
.tool-intro{display:none}
.site-header .header-tool-slot{display:flex;align-items:center;margin-right:0.65rem}
.site-header .proj-pill{--ink:#EEF0F3;--muted:#A9B0BC;--line:#2F3542;--panel:#1C2029;--raised:#242935;--accent:#E2B54A;--menu:#242935;--menu-line:#3A4152;--err:#F08A80;color:var(--ink)}
.proj-pill{position:relative;display:inline-flex;align-items:center;gap:10px;padding:5px 8px 5px 14px;border:1px solid var(--line);border-radius:999px;background:var(--panel);max-width:100%;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pp-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.pp-name{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:220px}
.pp-state{color:var(--muted);font-size:13px;white-space:nowrap}
.pp-btn{background:none;border:1px solid transparent;color:var(--muted);padding:4px;min-width:28px;min-height:28px;border-radius:6px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.pp-btn:hover,.pp-btn[aria-expanded="true"]{color:var(--ink);border-color:var(--line)}
.pp-cbtn{display:inline-flex;align-items:center;gap:6px;background:none;border:1px solid var(--line);color:var(--ink);padding:5px 11px;border-radius:999px;font:600 13px/1 var(--body);cursor:pointer;white-space:nowrap;min-height:30px}
.pp-cbtn:hover{border-color:var(--accent);color:var(--accent)}
.pp-cbtn[hidden]{display:none}
.pp-cbtn svg{width:16px;height:16px}
.menu{position:absolute;z-index:1001;min-width:240px;background:var(--menu);border:1px solid var(--menu-line);border-radius:12px;padding:6px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:2px}
.menu[hidden]{display:none!important}
.proj-menu{right:0;left:auto;top:calc(100% + 8px)}
.menu-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px 4px}
.menu-sep{display:block;height:1px;background:var(--menu-line);margin:4px 6px}
.menu [role="menuitem"]{justify-content:flex-start;background:none;border:none;color:var(--ink);font:500 14px/1.2 var(--body);padding:8px 10px;text-align:left;width:100%;border-radius:8px}
.menu [role="menuitem"] .ic{color:var(--muted)}
.menu [role="menuitem"]:hover,.menu [role="menuitem"]:focus-visible{background:color-mix(in srgb,var(--accent) 14%,transparent);outline:none}
.menu [role="menuitem"].danger{color:var(--err)}
.menu [role="menuitem"].danger .ic{color:var(--err)}
.menu [role="menuitem"]:disabled{opacity:.4}
.menu-note{margin:2px 10px 8px;font-size:13px;color:var(--muted);max-width:260px}
#cloudMenu{display:flex;flex-direction:column;gap:2px}

.progress{display:flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);flex-wrap:wrap}
.progress .stp{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;border:1px solid transparent;background:transparent;
  text-decoration:none;flex:1 1 200px;min-width:0;color:var(--muted)}
.progress .stp:hover{border-color:var(--line)}
.stp-n{width:28px;height:28px;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center;flex:none;font-weight:700;color:var(--muted)}
.stp-n b{font:700 13px/1 var(--body);border:none;width:auto;height:auto}
.stp-n .tick{display:none;width:14px;height:14px}
.stp-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.stp-t > span{font:600 15px/1.2 var(--display);color:var(--muted)}
.stp-t small{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.progress .stp[aria-current="page"]{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--ink)}
.progress .stp[aria-current="page"] .stp-n{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.progress .stp[aria-current="page"] .stp-t > span{color:var(--accent)}
.progress .stp.done .stp-n{background:color-mix(in srgb,var(--ok) 15%,transparent);border-color:var(--ok);color:var(--ok)}
.progress .stp.done .stp-n b{display:none}
.progress .stp.done .stp-n .tick{display:block}
.progress .stp.done .stp-t > span{color:var(--ink)}
.stp-line{flex:0 1 36px;height:2px;background:var(--line);min-width:12px}
.stp-line.done{background:var(--ok)}

/* ---------- page frame ---------- */
#view-input.layout,#view-results.layout,#view-overview.layout,#view-about.layout{width:100%;max-width:100%;margin:0;padding:0;display:flex;flex-direction:column;align-items:stretch;gap:18px}
#view-input[hidden],#view-results[hidden]{display:none!important}
#view-input > aside,#view-input > main,#view-results > aside,#view-results > main,.proj-page{width:100%;max-width:100%;min-width:0;display:flex;flex-direction:column;align-items:stretch;gap:18px;margin-top:0}
#view-input > main{gap:16px}

/* ---------- step 1: start cards, two cards, advanced ---------- */
.start{display:flex;flex-direction:column;gap:10px;width:100%}
.start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;width:100%}
.start-card{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-areas:"ic t" "ic d";column-gap:12px;row-gap:2px;align-items:start;padding:12px 14px;border:1.5px solid var(--line);
  background:var(--panel);border-radius:12px;cursor:pointer;min-width:0;width:100%;text-align:left;color:var(--ink);font:inherit;transition:border-color .15s,background .15s;box-sizing:border-box}
.start-card:hover,.start-card:focus-within,.start-card.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.start-card.current{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
.sc-ic{width:36px;height:36px;border-radius:10px;background:var(--raised);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.sc-ic svg{width:20px;height:20px}
.sc-t{font:600 15px/1.2 var(--display)}
.sc-d{color:var(--muted);font:400 12.5px/1.35 var(--body)}
.start-card > .sc-ic,.sc-import .drop > .sc-ic{grid-area:ic}
.start-card > .sc-t{grid-area:t;align-self:center;min-height:36px;display:flex;align-items:center}
.start-card > .sc-d,.sc-import .drop > .sc-d{grid-area:d}
.sc-import{padding:0;display:block}
.sc-import .drop{display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-areas:"ic t" "ic d";column-gap:12px;row-gap:2px;align-items:start;padding:12px 14px;border:none;background:none;text-align:left;width:100%;border-radius:12px;box-sizing:border-box;cursor:pointer}
.sc-import .drop:focus-within{outline:none}
.sc-head{grid-area:t;display:flex;align-items:center;justify-content:space-between;gap:2px 10px;flex-wrap:wrap;min-height:36px}
.sc-link{display:inline-flex;align-items:center;gap:4px;margin:0;font:600 12px/1.3 var(--body);color:var(--accent);text-decoration:none;white-space:nowrap;flex-shrink:0}
.sc-link:hover{text-decoration:underline}

.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch;width:100%}
.two-col .card{display:flex;flex-direction:column;justify-content:flex-start;gap:12px;padding:16px 20px;border-radius:12px;box-sizing:border-box}
.two-col .card .fields{flex:none;display:flex;flex-direction:column;gap:8px}
.two-col .card .proj-actions{margin-top:0}
.hint-link{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.hint-link:hover{filter:brightness(1.15)}
.two-col .card .hint{margin:0;font-size:12px}

.fld-inline{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;gap:14px!important;width:100%!important;min-height:36px}
.fld-inline > span,.fld-inline > span.fl{flex:0 0 150px;min-width:0;font-size:13.5px;font-weight:500;color:var(--ink)}
.fld-inline input,.fld-inline select,.fld-inline .ufield,.fld-inline .seg{flex:1 1 200px;min-width:0;max-width:100%}
.fld-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:100%}
@media (max-width:650px){.fld-row-2{grid-template-columns:1fr;gap:8px}}
@media (max-width:650px){.fld-inline{flex-direction:column!important;align-items:stretch!important;gap:5px!important}.fld-inline > span{min-width:auto}}

.fields{gap:8px}
.fields label,.fields .fld{display:flex;flex-direction:column;gap:4px;font-size:13.5px;font-weight:500;color:var(--ink)}
.fields.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.fl{display:inline-flex;align-items:center}
.ufield{display:flex;align-items:center;background:var(--field);border:1px solid var(--line);border-radius:8px;padding-right:10px;min-width:0}
.ufield:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.ufield input{border:none!important;background:none!important;outline:none!important;flex:1;min-width:0;width:100%;padding:6px 8px;font-size:13.5px}
.ufield > span{color:var(--muted);font-size:13px;font-weight:500;white-space:nowrap}
.ufield.sm input{padding:5px 7px;font-size:13px}
.ufield.sm{padding-right:8px}
/* form-level unit boxes (wall thickness, tolerance, base point X/Y, rotation) match the size of every other text box and dropdown */
.fields .ufield:not(.sm){border-radius:10px;padding-right:12px;height:40px}
.fields .ufield:not(.sm) input{padding:0 12px;height:100%;font-size:15px;font-weight:500}
.fields input[type=text],.fields select{height:40px;box-sizing:border-box}
.fields .ufield:not(.sm)>span{font-size:14px}
.help{font-size:12px;font-weight:400;color:var(--muted);line-height:1.35;margin-top:1px}
.seg{display:flex;gap:3px;padding:3px;background:var(--field);border:1px solid var(--line);border-radius:10px;flex-wrap:wrap}
.seg button{flex:1 1 auto;white-space:nowrap;background:transparent;border:none;color:var(--muted);font-weight:500;padding:6px 10px;border-radius:7px;min-height:34px;font-size:13px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);font-weight:700}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink)}
.note-box{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--raised);color:var(--accent);font-size:13px}
.proj-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,130px),1fr));gap:8px}
.proj-actions button{justify-content:flex-start;min-height:34px;padding:6px 10px;font-size:13px;border-radius:8px}
.note-box .hint{margin:0;line-height:1.45;font-size:12.5px}
.adv{padding:0;border-radius:12px}
.adv > summary{display:flex;align-items:center;gap:10px;padding:12px 18px;cursor:pointer;list-style:none;flex-wrap:wrap}
.adv > summary::-webkit-details-marker{display:none}
.adv .chev{color:var(--muted);transition:transform .15s}
.adv[open] .chev{transform:rotate(90deg)}
.adv-t{display:flex;flex-direction:column;gap:1px;flex:1 1 240px}
.adv-t > span{font:600 16px/1.2 var(--display)}
.adv-t small{font-size:12.5px;color:var(--muted)}
.adv-sum{font-size:13px;color:var(--muted);padding:4px 10px;border-radius:6px;background:var(--raised);font-variant-numeric:tabular-nums}
.adv-body{padding:0 18px 14px}
.next-bar,.submit-bar{padding:12px 18px;background:var(--panel);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 6px 24px rgba(0,0,0,.18);border-radius:12px}
.next-bar strong,.submit-bar strong{font:600 15px/1.25 var(--body);color:var(--accent)}

/* ---------- step 2: tabs, rooms table, preview ---------- */
.in-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tabs{gap:3px;padding:3px;background:var(--panel);border:1px solid var(--line);border-radius:10px;flex-wrap:wrap}
.tabs button{border:1px solid transparent;background:transparent;color:var(--muted);padding:7px 14px;border-radius:8px;font:600 14.5px/1.1 var(--body);min-height:36px}
.tabs button[aria-selected="true"]{background:var(--raised);border-color:var(--line);color:var(--ink);box-shadow:none;font-weight:600}
.badge{font-size:12px!important;padding:1px 7px;border-radius:99px;background:var(--raised);color:var(--muted)!important;margin-left:0!important;font-weight:600!important}
.tabs button[aria-selected="true"] .badge{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)!important}
.tab-tick{color:var(--ok);display:flex}
.tab-tick[hidden]{display:none}
.guide{margin:0;border-radius:10px}
#editor{min-width:0;width:100%}
.ed-split{gap:18px}
.ed-split.pv-on{grid-template-columns:minmax(0,3fr) minmax(320px,2fr);gap:18px;align-items:start}
.ed-main{display:flex;flex-direction:column;min-width:0}
.ed-main .card.pane{height:var(--ed-h);display:flex;flex-direction:column;padding:16px;border-radius:12px;box-sizing:border-box}
.pane .scroll.tall,.ed-main .scroll.tall{flex:1;min-height:0;max-height:none;overflow-y:auto}
/* the Walls sub-tabs sit in their own wrappers: these stretch to the card too, so their tables scroll inside it instead of running out over the page */
#sub-dim,#sub-prop,#pane-corners{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
.pane .scroll.tall thead th{position:sticky;top:0}
.pane{padding:16px;border-radius:12px}
.pane-head{display:flex;align-items:center;gap:10px;padding:0 0 10px;flex-wrap:wrap}
.pane-head .sec-h{flex:1;font-size:18px;font-weight:600}
.pane .pane-foot{display:flex;justify-content:center;align-items:center;padding:12px 0 0;margin-top:auto;border-top:1px solid var(--line);width:100%}
.wide-add-room{width:100%;height:42px;border-radius:10px;background:var(--raised);border:1px solid var(--line);color:var(--ink);font-weight:600;font-size:14px;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:border-color .15s,color .15s}
.wide-add-room:hover{border-color:var(--accent);color:var(--accent)}
.pane .subtabs{margin-bottom:10px}
.pane .filter{margin-bottom:10px}
#roomsImportBtn{border-radius:8px;padding:7px 14px;font-size:13.5px}

/* the editing tables (Rooms, Walls, Corners): same look on every tab, colours from the theme so light and dark both work */
table.grid{border-collapse:collapse;width:100%}
table.grid th{font-size:13px;font-weight:600;color:var(--muted);padding:10px 8px;border-bottom:1px solid var(--line);background:var(--panel);text-align:left;z-index:1}
table.grid th.mvh{width:28px;padding-left:4px;padding-right:2px}
table.grid.rooms th.mvh,#wallGrid th.mvh{width:76px;min-width:76px;padding-left:4px;padding-right:4px}
table.grid td{padding:7px 6px;border-bottom:1px solid var(--rowline);vertical-align:middle}
table.grid td.mvc{width:28px;padding-left:4px;padding-right:2px;text-align:center}
table.grid.rooms td.mvc,#wallGrid td.mvc{width:76px;min-width:76px;padding-left:4px;padding-right:4px;text-align:center}
table.grid td.ix{width:36px;text-align:center}
table.grid td.ix input.w-id{width:40px;min-width:32px;border:1px solid transparent;border-radius:6px;background:transparent;box-shadow:none;text-align:center;font-size:14px;font-weight:600;color:var(--muted);padding:4px 0}
table.grid td.ix input.w-id:hover{border-color:var(--line)}
table.grid td.ix input.w-id:focus{border-color:var(--accent);outline:none;color:var(--ink)}
table.grid select,table.grid input:not(.w-id),table.grid .ufield{background-color:var(--field);border:1px solid var(--line);border-radius:8px;color:var(--ink);height:38px;box-sizing:border-box;font-size:14px;font-weight:500}
table.grid select:focus,table.grid input:not(.w-id):focus,table.grid .ufield:focus-within{border-color:var(--accent);outline:none;box-shadow:0 0 0 1px var(--accent)}
table.grid select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238896aa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding:0 26px 0 10px;cursor:pointer}
table.grid select:disabled,table.grid input:disabled{opacity:.55;cursor:default}
table.grid input.w-name{padding:0 12px;min-width:130px}
table.grid .ufield{display:inline-flex;align-items:center;padding-right:10px;min-width:90px;width:100%}
table.grid .ufield input{background:transparent!important;border:none!important;box-shadow:none!important;padding:0 10px!important;height:100%!important;color:var(--ink);font-size:14px}
table.grid .ufield > span{color:var(--muted);font-size:12.5px;font-weight:500}
table.grid th .info,table.grid label .info,.xbox label .info{display:inline-grid;place-items:center;width:16px;height:16px;min-width:0;padding:0;margin-left:4px;border-radius:50%;border:1.5px solid var(--accent);background:none;color:var(--accent);font:700 10.5px/1 var(--body);vertical-align:1px;cursor:help}
table.grid th .info:hover,table.grid label .info:hover,.xbox label .info:hover{background:var(--accent);color:var(--accent-ink)}
table.grid tr.sel > td{background:color-mix(in srgb,var(--accent) 7%,transparent);border-bottom:none}
table.grid tr.sel > td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
table.grid tr.xrow > td{background:color-mix(in srgb,var(--accent) 7%,transparent);border-bottom:1px solid var(--rowline);padding:2px 6px 12px}
table.grid tr.xrow > td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
table.grid.rooms tbody tr:not(.xrow):not(.sel):hover > td{background:color-mix(in srgb,var(--ink) 3%,transparent)}
tr.dragging > td{opacity:.45}
tr.drop-before > td{box-shadow:inset 0 2px 0 var(--accent)}
tr.drop-after > td{box-shadow:inset 0 -2px 0 var(--accent)}
.row-drag-grp{display:inline-flex;align-items:center;gap:3px;vertical-align:middle}
.mv-btn{display:inline-grid;place-items:center;width:20px;height:24px;min-width:0;padding:0;border-radius:5px;border:1px solid var(--line);background:var(--field);color:var(--muted);cursor:pointer;transition:border-color .15s,color .15s}
.mv-btn svg{display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mv-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.mv-btn:disabled{opacity:.3;cursor:default;pointer-events:none}
.drag{background:none;border:none;color:var(--muted);padding:6px 2px;cursor:grab;min-width:20px;display:inline-flex;align-items:center;justify-content:center}
.drag:hover{color:var(--ink)}
.drag .ic,.more .ic{fill:currentColor}
.more{background:transparent;border:1px solid transparent;color:var(--muted);width:34px;height:34px;padding:0;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}
.more:hover,.more[aria-expanded="true"]{background:var(--raised);color:var(--ink);border-color:var(--line)}
.row-menu,.menu.row-menu{position:fixed;z-index:1002;min-width:210px;background:var(--menu);border:1px solid var(--menu-line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.35);padding:6px}
.row-menu[hidden],.menu[hidden]{display:none!important}
.row-menu .menu-h{font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--muted);padding:6px 10px 4px;display:block}
.row-menu [role="menuitem"]{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:6px;border:none;background:transparent;color:var(--ink);font-size:13.5px;font-weight:500;cursor:pointer;text-align:left}
.row-menu [role="menuitem"]:hover,.row-menu [role="menuitem"]:focus-visible{background:color-mix(in srgb,var(--accent) 14%,transparent);outline:none}
.row-menu [role="menuitem"] .ic{width:16px;height:16px;color:var(--muted);flex-shrink:0}
.row-menu .menu-sep{display:block;height:1px;background:var(--menu-line);margin:5px 4px}
.row-menu [role="menuitem"].danger,.row-menu [role="menuitem"].danger .ic{color:var(--err)}
.row-menu [role="menuitem"].danger:hover{background:color-mix(in srgb,var(--err) 12%,transparent)}
.xbox{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:4px 0 8px}
.xbox label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:500;color:var(--muted)}
.xbox label span{display:inline-flex;align-items:center;gap:4px}
.xbox .ufield{min-width:130px;width:130px;height:38px}
.closes{display:inline-flex;gap:6px;align-items:center;font-size:13.5px;font-weight:500;min-height:38px}
.closes.ok{color:var(--ok)}
.closes.warn{color:var(--warn)}
.btn-edit-walls{display:inline-flex;align-items:center;gap:6px;background:var(--raised);border:1px solid var(--line);color:var(--accent);border-radius:8px;padding:0 12px;height:38px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;margin-bottom:0}
.btn-edit-walls:hover{border-color:var(--accent)}
table.grid input.custom-dim{color:var(--muted);cursor:default}

/* Rooms / Walls editor and the live preview beside it share one height, taken from the window, so both fit the screen
   under the site header with room for the Generate bar at the bottom */
:root{--ed-h:clamp(440px, calc(100vh - 96px - 118px), 900px)}
.pv-pane{height:var(--ed-h);display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:12px;box-sizing:border-box;position:sticky;top:96px}
.pv-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip-ok{display:inline-flex;gap:6px;align-items:center;font-size:14px;font-weight:600;padding:5px 10px;border-radius:99px;color:var(--ok);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.chip-ok.warn{color:var(--warn);background:color-mix(in srgb,var(--warn) 12%,transparent)}
.chip-ok[hidden]{display:none}
/* the canvas is centred with auto margins (not flex centring), so a zoomed drawing can be scrolled to every edge */
.pv-card{flex:1 1 0;min-height:160px;border-radius:12px;padding:6px;overflow:auto;border:1px solid var(--line);background:var(--field);display:flex}
/* a zoomed drawing can be dragged around with the mouse */
.zoomed > canvas{cursor:grab}
.panning > canvas,.panning{cursor:grabbing!important;user-select:none}
#pvCanvas{cursor:pointer;display:block;margin:auto;flex:none;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,0.08);background:#fff}
.pv-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:8px 12px;background:var(--raised);border:1px solid var(--line);border-radius:10px;margin-top:4px}
.pv-foot .hint{margin:0;font-size:12.5px;color:var(--muted)}
.zoom{display:flex;gap:6px;align-items:center}
.zbtn{width:36px;height:36px;padding:0;border-radius:8px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer;transition:all .15s}
.zbtn:hover{border-color:var(--accent);color:var(--accent)}
.zval{font-size:14px;color:var(--muted);min-width:44px;text-align:center;font-variant-numeric:tabular-nums}
.pv-pane .legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:12px;color:var(--muted);padding:8px 4px 2px}
.pv-pane .legend span{display:inline-flex;align-items:center}
.pv-pane .legend i{margin-right:6px}
.pv-notes{margin:0;padding:0;list-style:none;max-height:92px;overflow:auto;flex:none}
.pv-notes:empty{display:none;margin:0}
.submit-bar .bar-btns .big:not(.primary){background:var(--raised)}

/* ---------- step 2: doors & windows ---------- */
#pane-open{display:flex;flex-direction:column;gap:16px}
#pane-open[hidden]{display:none}
.op-toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{border-radius:99px;padding:8px 13px;background:var(--panel);border:1px solid var(--line);color:var(--ink);min-height:40px}
.chips button span{opacity:.75;font-weight:500}
.chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.vsep{width:1px;height:28px;background:var(--line);margin:0 4px}
.filter.inline{margin:0;font-size:15px}
.filter.inline select{min-width:140px}
/* list and editor side by side in the left column when it is wide enough, the editor under the list when not; the preview stays on the right */
.op-layout{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-start}
.op-left{flex:1 1 100%;min-width:0;display:flex;flex-direction:column;gap:16px}
.op-list{padding:8px 0}
.op-list .op-hint{margin:10px 18px 8px}
table.grid.list td{padding:11px 8px;font-size:14px;white-space:nowrap;cursor:pointer}
table.grid.list th{padding:10px 8px}
table.grid.list th:first-child,table.grid.list td:first-child{padding-left:14px}
table.grid.list th.num,table.grid.list td.num{text-align:right}
table.grid.list th:last-child,table.grid.list td:last-child{padding-right:14px}
table.grid.list tbody tr:hover > td{background:color-mix(in srgb,var(--ink) 4%,transparent)}
table.grid.list tr.sel > td{background:color-mix(in srgb,var(--accent) 10%,transparent)}
table.grid.list tr.sel > td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
.mk-b{font-weight:700;color:var(--accent)}
.ty{display:inline-flex;gap:8px;align-items:center}
.ty .ic{color:var(--accent)}
.ty.win .ic{color:#7DB7F0}
:root[data-theme="light"] .ty.win .ic{color:#2E6DA8}
.ty small{color:var(--muted);font-size:13px}
/* the door / window editor: a pop-up card in front of the list, next to its row (placed by placeOpEditor) */
.op-editor{position:fixed;z-index:30;left:0;top:0;width:460px;max-height:calc(100vh - 108px);overflow:auto;display:flex;flex-direction:column;gap:10px;padding:16px 18px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));box-shadow:0 18px 50px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);animation:opIn .14s ease-out}
@keyframes opIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.op-editor[hidden]{display:none!important}
.op-editor .ed-top{position:sticky;top:-16px;z-index:1;background:var(--panel);margin:-16px -18px 0;padding:14px 18px 10px;border-bottom:1px solid var(--line)}
.op-editor .ed-top h2{font-size:20px}
.op-editor .seg button{padding:6px 8px;font-size:13px}
.op-editor label,.op-editor .fld{gap:6px!important;font-size:14px!important}
.op-editor .row2{gap:12px!important}
.op-editor select,.op-editor .ufield{height:40px!important}
.op-editor .seg{min-height:40px!important}
.op-editor.sheet{max-height:82vh!important}
/* phone: a sheet that slides up from the bottom */
.op-editor.sheet{left:0!important;right:0;top:auto!important;bottom:0;width:auto!important;max-height:82vh;border-radius:16px 16px 0 0;animation:opUp .18s ease-out}
@keyframes opUp{from{transform:translateY(30px);opacity:.5}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.op-editor,.op-editor.sheet{animation:none}}
.op-editor .ed-top{display:flex;align-items:center;gap:10px}
.op-editor .ed-top .sc-ic{width:40px;height:40px;border-radius:10px;background:color-mix(in srgb,var(--accent) 15%,transparent)}
.op-editor .ed-top h2{flex:1}
.op-editor .ed-top button{padding:8px;min-width:40px;min-height:40px}
.op-editor .row2{display:flex;gap:14px;flex-wrap:wrap}
.op-editor .row2 > *{flex:1 1 160px;min-width:0}
.op-editor label,.op-editor .fld{display:flex;flex-direction:column;gap:8px;font-size:15px;font-weight:500;color:var(--ink)}
.op-editor .fld > span,.op-editor label > span{display:inline-flex;align-items:center}
/* every box in the door / window editor is the same height: number boxes with their unit, dropdowns, button groups */
.op-editor select,.op-editor .ufield{height:42px;border-radius:10px;box-sizing:border-box}
.op-editor select{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:0;padding-bottom:0;line-height:40px;align-items:center}
.op-editor .ufield input{height:100%;padding:0 12px;font-size:15px;font-weight:500}
.op-editor .ufield > span{font-size:14px}
.op-editor .seg{min-height:42px}
.op-editor .order{display:flex;gap:8px;align-items:center;flex-wrap:nowrap;padding-top:10px;border-top:1px solid var(--line)}
.op-editor .order span{font-size:13px;color:var(--muted);margin-right:auto;min-width:0}
/* Add door ▾: a split button; the arrow opens the door types */
.split{position:relative;display:inline-flex}
.split > #addDoor{border-top-right-radius:0;border-bottom-right-radius:0}
.split > .split-more{border-top-left-radius:0;border-bottom-left-radius:0;border-left:none;padding:10px 9px}
.split > .split-more[aria-expanded="true"]{color:var(--accent)}
.door-menu{right:0;left:auto;top:calc(100% + 6px);min-width:210px}
.op-editor .order .ico{padding:7px 8px}
.op-editor .order button{padding:7px 10px;font-size:13.5px;white-space:nowrap;flex:none}
.op-empty{color:var(--muted);text-align:center;padding:30px 10px;display:flex;flex-direction:column;align-items:center;gap:12px}
.seg button:disabled{opacity:.4;cursor:not-allowed}

/* ---------- step 3: results ---------- */
.ready{display:flex;align-items:center;gap:12px;padding:12px 18px;border-radius:12px;background:color-mix(in srgb,var(--ok) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);flex-wrap:wrap}
.ready.warn{background:color-mix(in srgb,var(--warn) 10%,var(--panel));border-color:color-mix(in srgb,var(--warn) 45%,transparent)}
.ready-ic{width:36px;height:36px;border-radius:50%;background:var(--ok);color:#0F2A1B;display:grid;place-items:center;flex:none}
.ready.warn .ready-ic{background:var(--warn)}
.ready-t{display:flex;flex-direction:column;gap:1px;flex:1 1 300px;min-width:0}
.ready-t strong{font:700 18px/1.2 var(--display)}
.res-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(360px,1fr);gap:18px;align-items:start}
@media (max-width:1100px){.res-grid{grid-template-columns:minmax(0,1fr)}}
.viewer{min-width:0;padding:14px 16px;display:flex;flex-direction:column;gap:10px;border-radius:12px}
.res-side{min-width:0;display:flex;flex-direction:column;gap:16px}
.res-side .card{padding:16px 18px;display:flex;flex-direction:column;gap:10px;border-radius:12px}
.vtabs{display:flex;gap:4px;flex-wrap:wrap;flex-direction:row}
.vtabs button{background:transparent;color:var(--muted);border:1px solid transparent;padding:6px 12px;font-size:14px;justify-content:center;text-align:center}
.vtabs button[aria-selected="true"]{background:var(--raised);border-color:var(--line);color:var(--ink)}
.outnav.vtabs button[aria-selected="true"]{background:var(--raised);border-color:var(--line);color:var(--ink)}
#outMain{display:block}
#outMain .out{display:flex;flex-direction:column;gap:12px}
#outMain .out[hidden]{display:none}
.layers{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.layers-l{color:var(--muted);display:flex;gap:5px;align-items:center;font-size:13.5px;margin-right:4px}
.lay{border-radius:99px;padding:5px 12px;font-size:13px;background:transparent;color:var(--muted);border:1px solid var(--line);min-height:32px}
.lay[aria-pressed="true"]{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);border-color:color-mix(in srgb,var(--accent) 50%,transparent)}
.sheet{background:var(--field);border:1px solid var(--line);border-radius:10px;padding:12px;display:flex;flex-direction:column;gap:10px}
.zoombox{overflow:auto;max-height:calc(100vh - 150px);display:flex;background:transparent;border-radius:8px;padding:0}   /* auto margins on the canvas: a zoomed plan scrolls to every edge */
.zoombox #plan{max-width:none;display:block;margin:auto;flex:none;border-radius:8px;box-shadow:0 4px 18px rgba(0,0,0,0.08);background:#fff}
#schedWrap .out-sub{margin-top:4px}
.dl-card .wide-btn{width:100%}
.dl-list{list-style:none;margin:0;padding:0}
.dl-list li{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--rowline)}
.dl-ic{width:34px;height:34px;border-radius:8px;background:var(--raised);color:var(--accent);display:grid;place-items:center;flex:none}
.dl-t{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.dl-t > span{font-weight:600;font-size:15px}
.dl-t small{font-size:12.5px;color:var(--muted);line-height:1.3}
.fmt{font-size:11.5px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 5px;margin-left:4px}
.dl-btn{width:36px;height:36px;padding:0;border-radius:8px;border:1px solid var(--line);background:var(--raised);color:var(--ink);flex:none}
.dl-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent)}
.sched-card table td,.sched-card table th{padding:8px 6px}
.swatch{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:10px;vertical-align:-2px;border:1px solid rgba(0,0,0,.08)}
.summary > summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between}
.summary > summary::-webkit-details-marker{display:none}
.summary > summary::after{content:"+";font:600 20px/1 var(--body);color:var(--muted)}
.summary[open] > summary::after{content:"−"}
.summary h2#sumTitle{font:600 18px/1.2 var(--display);margin:6px 0 0;color:var(--accent)}

.linkish{background:none;border:none;padding:4px 2px;font:700 15px/1 var(--body);color:var(--accent);min-height:0}
.linkish:hover{text-decoration:underline}
.sc-import.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,var(--panel))}
td.dimx a{color:var(--accent);font-weight:600}
.proj-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:10px}
.proj-actions button{justify-content:flex-start;min-height:44px}
.proj-actions button .ic{color:var(--accent)}
/* ---------- narrow screens ---------- */
@media (max-width:1100px){ .ed-split.pv-on{grid-template-columns:minmax(0,1fr)} .pv-pane{position:static;height:clamp(380px, 70vh, 620px)} .ed-main .card.pane{height:auto;min-height:360px;max-height:none} .ed-main .scroll.tall{max-height:60vh;flex:none} #sub-dim,#sub-prop,#pane-corners{flex:none} }   /* the card grows with its table here, so nothing stretches */
@media (max-width:900px){
  .start-grid{grid-template-columns:minmax(0,1fr)}
  .two-col{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:760px){
  .tool-top{padding:0}
  #view-input.layout,#view-results.layout{padding:0;gap:18px}
  .card{padding:18px}
  .progress{gap:6px;padding:8px;flex-wrap:nowrap}
  .progress .stp{flex:1 1 0;padding:8px;gap:8px;flex-direction:column;align-items:center;text-align:center}
  .stp-t small{display:none}
  .stp-t > span{font-size:14px;line-height:1.15;white-space:normal}
  .stp-line{display:none}
  .pp-name{max-width:150px}
  .fields.three{grid-template-columns:1fr 1fr}
  .fields.three label:last-child{grid-column:1/-1}
  .next-bar,.submit-bar{padding:14px 16px}
  /* the sticky Next / Generate bar stays one compact row so it does not cover the form */
  .next-bar,.submit-bar{padding:10px 12px;gap:8px;bottom:8px}
  .next-bar .hint,.submit-bar .hint{display:none}
  .next-bar strong,.submit-bar strong{font-size:13.5px}
  .next-bar > div:first-child{display:none}
  .next-bar button.big{width:100%}
  .submit-bar > div:first-child{width:100%}
  .submit-bar .bar-btns{display:flex;flex-wrap:nowrap;width:100%;gap:8px}
  .submit-bar .bar-btns button{flex:1 1 0;width:auto;min-width:0;padding:11px 8px;font-size:15px;white-space:nowrap}
  .submit-bar #toProject{flex:0 1 auto}
  .submit-bar #toProject .bt{display:none}
  .in-head .tabs{width:100%;flex-wrap:nowrap}
  .in-head .tabs button{flex:1 1 auto;padding:8px 6px;font-size:14px;gap:5px;white-space:nowrap}
  .in-head .tab-tick{display:none}
  /* the project pill in the site header: just the dot and its menu, so the logo and account buttons keep their room */
  .site-header .proj-pill{padding:4px 4px 4px 10px;gap:6px}
  .site-header .proj-pill .pp-name,.site-header .proj-pill .pp-state{display:none}
  .site-header .proj-pill .pp-cbtn span{display:none}
  .site-header .proj-pill .pp-cbtn{padding:5px 8px}
  .vtabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  .vtabs button{white-space:nowrap}
  .proj-menu{right:auto;left:0}
}
@media (min-width:481px){ #cardCloudSave,#cardCloudOpen{display:none!important} }   /* the header carries them */
@media (max-width:480px){ .site-header .proj-pill{display:none} }   /* no room beside the logo: Export / Import / Cloud stay on the Project details card */
@media (max-width:420px){ .fields{grid-template-columns:1fr} .fields.three{grid-template-columns:1fr} .tool-intro{display:none} }


/* doors & windows toolbar: compact add buttons so the row fits beside the preview */
.op-toolbar > .btn2,.op-toolbar .split > .btn2{padding:8px 12px;font-size:14px;min-height:38px}
.op-toolbar .split > .split-more{padding:8px 8px}
.op-toolbar .chips button{min-height:38px;padding:7px 12px}

/* ---------- nothing entered yet on this tab: a short preview, and the Add button above the empty table ---------- */
.ed-split.is-empty .pv-pane{height:auto}
.ed-split.is-empty .pv-card{flex:none;height:210px;min-height:0}
.ed-main .card.pane.is-empty{height:auto}
.pane.is-empty .pane-head,.pane.is-empty .subtabs,.pane.is-empty .filter{order:-3}
.pane.is-empty > .pane-foot,.is-empty > .pane-foot{order:-1;margin:0 0 10px;padding:0;border-top:none}
#pane-rooms.is-empty .pane-head{order:-2}
#sub-dim.is-empty,#pane-corners.is-empty{flex:none}
.is-empty > .scroll.tall{flex:none;max-height:180px}