/* M2GEO visual system · brand sheet 1.0 · 13 October 2026.
   UI tokens also supply SVG annotations, 3D backgrounds and PNG exports. */
:root{
  --bg:#F2F1EA; --paper:#F2F1EA; --panel:#FFFFFF;
  --line:#0A0A0A; --ink:#0A0A0A; --text:#26251F; --muted:#6E6C63;
  --accent:#C7DB63; --accent-soft:#C7DB63; --signal:#EA4A2A;
  --danger:#B93318; --zebra:#F7F6F0; --on-dark:#C9C7BC;
  --night:#0A0A0A; --night-ground:#26251F;
  --editor-text:#0A0A0A; --plan-halo:#F2F1EA; --plan-detail:#6E6C63; --grid:#D4CCC1;
  --control-height:42px; --control-inner-height:34px;
  --wall-outline:#26251F; --dim-ink:#26251F; --dim-line:#6E6C63;
  --font-body:'Inter Tight','Segoe UI',sans-serif;
  --font-heading:'Golos Text','Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',Consolas,monospace;
  color-scheme:light;
}
html,body{font:15.5px/1.6 var(--font-body);color:var(--text)}
.app{grid-template-columns:280px minmax(0,1fr) 400px;grid-template-rows:auto minmax(0,1fr) 34px}
header{background:var(--ink);color:var(--panel);padding:0;gap:0;border-bottom:3px solid var(--ink)}
.header-top{padding:14px 20px;gap:20px;border-bottom:2px solid var(--accent)}
.header-top .brand{gap:4px;line-height:1.3}
.brand b{font:700 29px/1.24 var(--font-heading);letter-spacing:.055em;color:var(--accent)}
.brand span{font-size:12.5px;color:var(--on-dark)}
.header-actions{gap:12px}
.toolbar{padding:10px 16px;gap:8px;background:var(--paper);color:var(--ink)}
.grp,.btn,.item,.sw,.mat,.mat i,.form input,.form select,kbd,.stats div,
.modehint,.scalebar,#toast,.seg .pill,#walkOverlay>div,#hint3d,.rlabel,
#roomList button,.menu summary,.menu-pop,#fab,.toolbar-options{border-radius:0}
.grp{border:2px solid var(--ink);padding:2px;gap:2px;background:var(--panel)}
.btn{font-size:14px;line-height:1.4;padding:7px 10px;min-height:34px;color:var(--ink);transition:background-color .12s}
.btn:hover{background:var(--zebra)}
.btn.on{background:var(--ink);color:var(--panel)}
.btn.chip.on,.btn.primary{background:var(--accent);color:var(--ink);font-weight:700}
.btn.primary:hover{background:var(--accent);outline:2px solid var(--ink)}
.btn.danger{color:var(--danger)}
.btn.framed{border:2px solid var(--line);background:var(--panel)}
.btn:disabled{opacity:.65;cursor:default}
.header-actions .grp{border-color:var(--accent);background:var(--ink)}
.header-actions .btn{color:var(--panel)}
.header-actions .btn:hover{background:var(--text)}
.header-actions .btn.chip.on{color:var(--ink);background:var(--accent)}
.header-actions .menu summary{border-color:var(--on-dark);background:var(--ink);color:var(--panel)}
.header-actions .menu-pop .btn{color:var(--ink)}
.header-actions .menu-pop .btn.danger{color:var(--danger)}
.header-actions .menu-pop .btn:hover{background:var(--zebra)}
#langSel .btn{font-family:var(--font-heading);font-size:13px;letter-spacing:.05em;min-width:36px}
.menu summary{border:2px solid var(--ink);padding:7px 12px;cursor:pointer}
.menu-pop{border:2px solid var(--ink);padding:5px;min-width:220px;box-shadow:6px 6px 0 var(--signal)}
.menu-pop .btn{white-space:normal}
.seg .pill{background:var(--accent);box-shadow:none}
.seg .btn[data-view="2d"],body.m3d .seg .btn[data-view="3d"]{color:var(--ink);font-weight:700}
.seg .btn[data-view="3d"],body.m3d .seg .btn[data-view="2d"]{color:var(--ink);font-weight:500}
aside{background:var(--paper);border-right:2px solid var(--ink);scrollbar-color:var(--ink) var(--paper)}
aside.right{border-left:2px solid var(--ink)}
.lib h4{font:700 13px/1.3 var(--font-heading);letter-spacing:.05em;text-transform:uppercase;
  color:var(--accent);background:var(--ink);padding:11px 14px;margin:0 0 12px;border-bottom:3px solid var(--signal)}
.lib-grid{gap:9px;padding:0 12px 18px}
.item{border:2px solid var(--ink);padding:10px 6px 8px;gap:5px;box-shadow:3px 3px 0 var(--ink);transition:none}
.item b{font-size:13.5px;font-weight:500;line-height:1.35;min-height:2.7em;color:var(--text)}
.item small{font-size:11.5px;color:var(--muted)}
.item.dragging{border-color:var(--ink);background:var(--accent)}
@media (hover:hover){.item:hover{background:var(--accent);border-color:var(--ink);transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}}
@media (hover:hover){.item:hover small{color:var(--ink)}}
#ghost{filter:none}
.hint{font-size:13px;line-height:1.6}
main{background-color:var(--paper);background-image:radial-gradient(rgba(10,10,10,.15) .7px,transparent .7px);background-size:18px 18px}
#plan{font-family:var(--font-body)}
/* The scene retains real material colours; only editor annotations use brand colours. */
#plan.tool-demolish .wall:hover{fill:var(--signal)}
@media (hover:hover){#plan .furn:hover{filter:none}}
.scalebar{background:var(--panel);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);font-size:12.5px;color:var(--ink)}
.modehint,#hint3d{border:2px solid var(--ink);background:var(--ink);color:var(--accent);box-shadow:4px 4px 0 var(--signal);font-size:13px}
footer{background:var(--ink);color:var(--on-dark);border-top:2px solid var(--ink);gap:16px;font-size:12.5px}
footer b{color:var(--accent)}
.footer-brand{font:700 12.5px/1.6 var(--font-mono);color:var(--accent);letter-spacing:.06em}
#panel{counter-reset:panel-section}
#panel section{padding:16px;border-bottom:2px solid var(--ink)}
#panel h3{counter-increment:panel-section;font:700 16px/1.4 var(--font-heading);letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink);margin:0 0 12px;padding-left:10px;border-left:4px solid var(--signal)}
#panel h3::before{content:counter(panel-section,decimal-leading-zero);display:inline-block;
  font:700 12.5px/1.6 var(--font-mono);color:var(--accent);background:var(--ink);padding:2px 5px;margin-right:8px;vertical-align:2px;letter-spacing:0}
#panel h3 small{font:400 12.5px/1.5 var(--font-body);text-transform:none;letter-spacing:0;margin-top:6px;color:var(--muted)}
table{font-size:14px;background:var(--panel)}
td{padding:7px 6px;border-bottom:1px solid var(--ink)}
th{font:600 12px/1.4 var(--font-heading);letter-spacing:.05em;text-transform:uppercase;
  color:var(--panel);background:var(--ink);padding:9px 6px}
tbody tr:nth-child(even) td{background:var(--zebra)}
tr.click:hover td{background:var(--accent);color:var(--ink)}
.materials-table td{padding:9px 6px}
td.r,th.r{padding-left:9px}
.sw{border:1px solid var(--ink);width:13px;height:13px}
.estimate-note{font-size:12.5px;line-height:1.6}
.price-count{display:block;font-size:12px;line-height:1.4;color:var(--muted);margin-top:3px}
.item-cost-table{table-layout:auto}
.item-cost-table td:last-child{white-space:nowrap;width:1%;font-variant-numeric:tabular-nums}
.item-price-details{margin-top:12px}
.item-price-details>summary{cursor:pointer;font-weight:700;padding:8px 0}
.total{font-size:15px;border-top:2px solid var(--ink);padding-top:10px;gap:12px}
.total b{color:var(--ink);background:var(--accent);padding:0 5px;white-space:nowrap}
.form{gap:12px}
.form label{font-size:13px;line-height:1.5;gap:5px;color:var(--text)}
.form input,.form select{border:2px solid var(--ink);padding:8px;min-height:38px;font-size:15.5px}
.form input[type=color]{height:40px}
.actions{gap:8px;margin-top:14px}
.actions .btn{border:2px solid var(--ink)}
.actions .btn.primary{background:var(--accent);color:var(--ink)}
.mats{gap:9px}
.mat{border:2px solid var(--ink);padding:9px;gap:9px}
.mat.on{border-color:var(--ink);box-shadow:4px 4px 0 var(--ink);background:var(--accent)}
.mat i{border:1px solid var(--ink)}
.mat span{font-size:14px;line-height:1.45}
.mat small{font-size:12.5px;color:var(--muted)}
.mat.on small{color:var(--ink)}
.kbd{font-size:13px;gap:7px 10px}
kbd{font:400 12.5px/1.82 var(--font-mono);background:var(--ink);color:var(--accent);border:0;padding:0 6px}
.stats{gap:10px}
.stats div{background:var(--panel);border:2px solid var(--ink);padding:10px;box-shadow:3px 3px 0 var(--ink)}
.stats small{font-size:12.5px}
.big{font:700 24px/1.3 var(--font-heading);color:var(--ink)}
#toast{border:2px solid var(--ink);color:var(--accent);box-shadow:6px 6px 0 var(--signal);max-width:calc(100vw - 32px);width:max-content;font-size:14px}
#walkOverlay{background:rgba(10,10,10,.4)}
#walkOverlay>div{border:3px solid var(--ink);box-shadow:8px 8px 0 var(--accent);max-width:min(400px,calc(100% - 32px))}
#walkOverlay h3{font:700 20px/1.3 var(--font-heading);text-transform:uppercase;letter-spacing:.05em}
#walkOverlay p{font-size:15.5px;color:var(--text)}
#cross:before,#cross:after{box-shadow:none}
.rlabel{font:600 12.5px/1.4 var(--font-body);color:var(--ink);background:var(--panel);border:2px solid var(--ink);padding:3px 7px;box-shadow:3px 3px 0 var(--ink)}
.rlabel small{color:var(--muted)}
#roomList{gap:8px;padding:0 12px 18px}
#roomList button{border:2px solid var(--ink);font-size:13px;padding:8px}
#roomList button:hover{background:var(--zebra)}
#roomList button.on{background:var(--accent);color:var(--ink)}
#roomList button.on small{color:var(--ink)}
.range{font-size:13px;color:var(--text)}
.range input{accent-color:var(--ink)}
#fab{background:var(--panel);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);gap:2px}
#fab .btn{padding:7px}
#joy{border-radius:0;background:rgba(10,10,10,.6);border:2px solid var(--accent);box-shadow:none;backdrop-filter:none}
#joy i{border-radius:0;background:var(--accent);box-shadow:none}
:is(button,summary,input,select,[tabindex]):focus-visible{outline:3px solid var(--signal);outline-offset:3px}
#view3d canvas:focus-visible{outline:3px solid var(--signal);outline-offset:-3px}
@media (min-width:1101px){
  .app.hide-lib{grid-template-columns:0 minmax(0,1fr) 400px}
  .app.hide-panel{grid-template-columns:280px minmax(0,1fr) 0}
  .app.hide-lib.hide-panel{grid-template-columns:0 minmax(0,1fr) 0}
  aside.lib>div{min-width:264px} #panel{min-width:384px}
}
@media (max-width:1100px){
  .app{grid-template-columns:minmax(0,1fr)}
  .header-top{padding:12px 14px;gap:12px}
  .header-top .brand b{font:700 25px/1.24 var(--font-heading);letter-spacing:.055em}
  .toolbar{padding:8px 12px;gap:7px}
  .toolbar-options{background:var(--paper);border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:0;width:min(370px,calc(100vw - 24px))}
  .toolbar-options .menu-pop{box-shadow:none}
  aside.lib,aside.right{width:min(370px,calc(100vw - 16px))}
  aside.open{box-shadow:7px 0 0 var(--ink)}
  aside.right.open{box-shadow:-7px 0 0 var(--ink)}
  .lib-grid{grid-template-columns:1fr 1fr}
  .item b{font-size:14px}
  .btn.narrow-only{min-height:34px}
  #fab .name{max-width:5em;font-size:13px}
}
@media (max-width:480px){
  .header-top{padding:10px 12px}
  .header-top .brand b{font-size:23px}
  .toolbar{gap:6px;padding:8px}
  #paneBtns .btn,#tools .btn{font-size:12.5px;padding:6px}
  #viewSeg .btn{font-size:13px;padding:6px 4px}
  #moreTools>summary{font-size:12.5px;padding:6px 8px}
  .footer-brand{display:none}
  footer{padding:0 10px}
}
@media (pointer:coarse){
  body{font-size:15.5px}
  .btn{min-height:42px}
  #paneBtns .btn,#tools .btn,#viewSeg .btn,#moreTools>summary{min-height:40px}
  .form input,.form select{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Night is one application preference, shared by both editors and exports.
   Ink remains the fixed brand black; text/surface roles change independently. */
:root[data-theme="night"]{
  --bg:#141511; --paper:#141511; --panel:#20211C; --zebra:#292B23;
  --text:#F2F1EA; --muted:#C9C7BC; --line:#7E7C72;
  --danger:#FF8A6B; --editor-text:#F2F1EA;
  --field:#181914; --preview:#C9C7BC; --grid:#505448;
  --wall-outline:#C9C7BC; --dim-ink:#F2F1EA; --dim-line:#C9C7BC;
  color-scheme:dark;
}
:root[data-theme="night"] header{color:var(--text)}
:root[data-theme="night"] .toolbar{color:var(--text);border-top:0}
:root[data-theme="night"] .grp{border-color:var(--line)}
:root[data-theme="night"] .btn{color:var(--text)}
:root[data-theme="night"] .btn.on,
:root[data-theme="night"] .btn.chip.on,
:root[data-theme="night"] .btn.primary{color:var(--ink);background:var(--accent)}
:root[data-theme="night"] .btn.danger{color:var(--danger)}
:root[data-theme="night"] .header-actions .btn{color:var(--text)}
:root[data-theme="night"] .header-actions .btn:hover{background:var(--zebra)}
:root[data-theme="night"] .header-actions .btn.chip.on{color:var(--ink);background:var(--accent)}
:root[data-theme="night"] .header-actions .grp{border-color:var(--accent)}
:root[data-theme="night"] .header-actions .menu summary{color:var(--text)}
:root[data-theme="night"] .menu summary,
:root[data-theme="night"] .menu-pop{background:var(--panel);border-color:var(--line)}
:root[data-theme="night"] .header-actions .menu-pop .btn{color:var(--text)}
:root[data-theme="night"] .header-actions .menu-pop .btn.danger{color:var(--danger)}
:root[data-theme="night"] .seg .btn[data-view="3d"],
:root[data-theme="night"] body.m3d .seg .btn[data-view="2d"]{color:var(--text)}
:root[data-theme="night"] .seg .btn[data-view="2d"],
:root[data-theme="night"] body.m3d .seg .btn[data-view="3d"]{color:var(--ink)}
:root[data-theme="night"] aside{border-color:var(--line);scrollbar-color:var(--muted) var(--paper)}
:root[data-theme="night"] .item{background:var(--panel);border-color:var(--line)}
/* Neutral preview backing preserves dark silhouettes and real catalogue colours. */
:root[data-theme="night"] .item svg{background:var(--preview);padding:2px}
:root[data-theme="night"] .item.dragging{background:var(--accent)}
:root[data-theme="night"] .item.dragging b,
:root[data-theme="night"] .item.dragging small{color:var(--ink)}
@media (hover:hover){
  :root[data-theme="night"] .item:hover{background:var(--accent);border-color:var(--accent)}
  :root[data-theme="night"] .item:hover b,
  :root[data-theme="night"] .item:hover small{color:var(--ink)}
}
:root[data-theme="night"] main{background-image:radial-gradient(rgba(199,219,99,.15) .7px,transparent .7px)}
:root[data-theme="night"] .scalebar{color:var(--text);border-color:var(--line)}
:root[data-theme="night"] .scalebar .bar{border-color:var(--text)}
:root[data-theme="night"] #panel section{border-color:var(--line)}
:root[data-theme="night"] #panel h3{color:var(--text)}
:root[data-theme="night"] td{border-color:var(--line)}
:root[data-theme="night"] th{color:var(--text)}
:root[data-theme="night"] tr.click:hover td .muted{color:var(--ink)}
:root[data-theme="night"] .sw,
:root[data-theme="night"] .mat i{border-color:var(--line)}
:root[data-theme="night"] .total{border-color:var(--line)}
:root[data-theme="night"] .form label{color:var(--text)}
:root[data-theme="night"] .form input,
:root[data-theme="night"] .form select{background:var(--field);border-color:var(--line);color:var(--text)}
:root[data-theme="night"] .actions .btn{background:var(--panel);border-color:var(--line)}
:root[data-theme="night"] .actions .btn.primary{background:var(--accent);color:var(--ink)}
:root[data-theme="night"] .mat{background:var(--panel);border-color:var(--line);color:var(--text)}
:root[data-theme="night"] .mat.on{background:var(--accent);border-color:var(--accent);color:var(--ink)}
:root[data-theme="night"] .stats div{border-color:var(--line)}
:root[data-theme="night"] .big{color:var(--text)}
:root[data-theme="night"] #walkOverlay>div{border-color:var(--line)}
:root[data-theme="night"] .rlabel{color:var(--text);border-color:var(--line)}
:root[data-theme="night"] #roomList button{background:var(--panel);border-color:var(--line);color:var(--text)}
:root[data-theme="night"] #roomList button:hover{background:var(--zebra)}
:root[data-theme="night"] #roomList button.on{background:var(--accent);color:var(--ink)}
:root[data-theme="night"] .range{color:var(--text)}
:root[data-theme="night"] .range span{color:var(--text)}
:root[data-theme="night"] .range input{accent-color:var(--accent)}
:root[data-theme="night"] #fab,
:root[data-theme="night"] .toolbar-options{border-color:var(--line)}

/* One tool row at every width. Only the strip scrolls; the popup stays outside
   that clipping container, and its trigger remains reachable on small screens. */
.m2geo-open-tab{display:block;text-decoration:none;color:inherit}
.header-actions .menu-pop{max-height:var(--m2geo-file-height,80vh);max-width:calc(100vw - 24px);overflow-y:auto}
.toolbar{flex-wrap:nowrap;align-items:flex-start;gap:8px;padding:4px 14px}
.toolbar-strip{display:flex;align-items:center;gap:8px;flex:1;min-width:0;
  overflow-x:auto;overflow-y:hidden;padding:6px 1px;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--muted) var(--paper)}
.toolbar-strip>.grp,.toolbar-strip>.btn{flex:none;max-width:none;flex-wrap:nowrap}
#moreTools{display:block;position:relative;margin-left:0;margin-top:6px;flex:none}
#moreTools>summary{display:block;white-space:nowrap}
.toolbar-options{position:absolute;right:0;top:calc(100% + 8px);display:flex;flex-direction:column;
  align-items:stretch;gap:10px;width:min(410px,calc(100vw - 24px));max-height:min(60vh,calc(100dvh - 160px),var(--m2geo-options-height,60vh))!important;overflow:auto;
  padding:12px;background:var(--paper);border:2px solid var(--line);border-radius:0;
  box-shadow:5px 5px 0 var(--ink);z-index:25}
#moreTools:not([open]) .toolbar-options{display:none}
.toolbar-options .grp{flex-wrap:wrap;max-width:100%}
.toolbar-options .menu{align-self:flex-start}
.toolbar-options .menu-pop{position:static;box-shadow:none;margin-top:6px}
@media (max-width:480px){
  .toolbar{padding:4px 8px;gap:6px}
  .toolbar-strip{gap:6px}
}

/* Equal outer height for groups, standalone commands and menu triggers. */
.toolbar-strip>.grp,.header-actions>.grp{
  height:var(--control-height);min-height:var(--control-height);padding:2px;
}
.toolbar-strip>.grp>.btn,.header-actions>.grp>.btn{
  height:var(--control-inner-height);min-height:var(--control-inner-height);
  padding-top:0;padding-bottom:0;display:inline-flex;align-items:center;justify-content:center;
}
.toolbar-strip>.btn,#moreTools>summary,.header-actions>.menu>summary{
  height:var(--control-height);min-height:var(--control-height);padding-top:0;padding-bottom:0;
  display:inline-flex;align-items:center;justify-content:center;
}
.seg .pill{top:2px;bottom:2px;left:2px}
.rlabel{font-size:13.5px}
#furnitureNotice{position:absolute;left:50%;bottom:74px;transform:translateX(-50%);z-index:5;
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;padding:12px 16px;
  background:var(--panel);color:var(--text);border:2px solid var(--line);box-shadow:5px 5px 0 var(--ink);
  width:max-content;max-width:calc(100% - 24px);font-size:14px;text-align:center}
#furnitureNotice[hidden]{display:none}
#furnitureNotice .btn{min-height:var(--control-height)}
@media (pointer:coarse){
  :root{--control-height:52px;--control-inner-height:44px}
}