/* CasaExacta 0.7 · A single visual language based on EspacioExacto.
   Semantic colors change by tool; layout, controls and editing behavior stay consistent. */
:root{
 --chrome-field:#fbfcf9;--chrome-tag:#ecf2e8;--chrome-tag-text:#526b54;
 --chrome-heading:#263f31;--chrome-helper:#f4f7f0;--chrome-accent:#809777;
 --chrome-line:#d6e2d7;--chrome-header:#ffffff;--chrome-button:#304b3d;
}
:root[data-theme="dark"]{
 --chrome-field:#283b30;--chrome-tag:#334c3b;--chrome-tag-text:#c3dcc8;
 --chrome-heading:#ecf4eb;--chrome-helper:#283c31;--chrome-accent:#b8d5b0;
 --chrome-line:#49604f;--chrome-header:#213129;--chrome-button:#8fb49a;
}
body[data-tool="wall"]{
 --bg:#f4f1fa;--paper:#fffefe;--ink:#322a4e;--soft:#675e81;--accent:#6a55a1;
 --light:#ede7f8;--border:#ded6ed;--muted:#7b7093;
 --chrome-field:#faf8ff;--chrome-tag:#ede7fa;--chrome-tag-text:#67529b;
 --chrome-heading:#392e5a;--chrome-helper:#f4f0fd;--chrome-accent:#927bca;
 --chrome-line:#e0d8f0;--chrome-header:#fff;--chrome-button:#66519b;
}
body[data-tool="floor"]{
 --bg:#fbf2ed;--paper:#fffdfb;--ink:#423029;--soft:#6f5b51;--accent:#ab5b45;
 --light:#fbebdf;--border:#ead6cb;--muted:#896f66;
 --chrome-field:#fff7f1;--chrome-tag:#f9e7db;--chrome-tag-text:#904c3b;
 --chrome-heading:#4d342e;--chrome-helper:#fff4ec;--chrome-accent:#bf7158;
 --chrome-line:#ecd7cb;--chrome-header:#fffdfa;--chrome-button:#aa553f;
}
body[data-tool="roof"]{
 --bg:#edf6f8;--paper:#ffffff;--ink:#1c3e4b;--soft:#527280;--accent:#177b92;
 --light:#e3f4f7;--border:#d2e5ec;--muted:#64818d;
 --chrome-field:#f3fbfd;--chrome-tag:#dceef3;--chrome-tag-text:#286f86;
 --chrome-heading:#164352;--chrome-helper:#edf9fc;--chrome-accent:#2b8aa6;
 --chrome-line:#cce6ef;--chrome-header:#fff;--chrome-button:#176b83;
}
:root[data-theme="dark"] body[data-tool="wall"]{
 --bg:#211d2d;--paper:#302a41;--ink:#f1ebfc;--soft:#cfc4e8;--accent:#c1a9f0;
 --light:#443954;--border:#59496e;--muted:#c6b6dc;
 --chrome-field:#372e49;--chrome-tag:#473b5e;--chrome-tag-text:#e0cffc;
 --chrome-heading:#f7f1ff;--chrome-helper:#3c314e;--chrome-accent:#c9b1fb;
 --chrome-line:#635279;--chrome-header:#292237;--chrome-button:#806caf;
}
:root[data-theme="dark"] body[data-tool="floor"]{
 --bg:#231b19;--paper:#32241f;--ink:#f6eae1;--soft:#d4b8aa;--accent:#e6a186;
 --light:#51382c;--border:#664638;--muted:#c7a496;
 --chrome-field:#352720;--chrome-tag:#51372e;--chrome-tag-text:#f3c1ae;
 --chrome-heading:#fff0e7;--chrome-helper:#3e2b23;--chrome-accent:#efa58b;
 --chrome-line:#6a493b;--chrome-header:#2c201c;--chrome-button:#b9715a;
}
:root[data-theme="dark"] body[data-tool="roof"]{
 --bg:#12262c;--paper:#1b3540;--ink:#e3f6fa;--soft:#b2d1db;--accent:#76c7de;
 --light:#274955;--border:#3c606b;--muted:#a8cdd7;
 --chrome-field:#213e49;--chrome-tag:#294c59;--chrome-tag-text:#c1edf8;
 --chrome-heading:#effcff;--chrome-helper:#23404a;--chrome-accent:#8cd6e6;
 --chrome-line:#416672;--chrome-header:#192f37;--chrome-button:#3f879c;
}
/* Header: same logo, navigation and control layout as EspacioExacto. */
.header{min-height:76px;background:var(--chrome-header);border-bottom:1px solid var(--chrome-line);display:flex;align-items:center;padding:10px 4%;gap:20px;position:relative;z-index:4;color:var(--chrome-heading)}
.header .logo{text-decoration:none;color:var(--chrome-heading);font-size:23px;line-height:.9;font-weight:840;letter-spacing:-.065em;display:flex;gap:11px;align-items:center;flex:none;white-space:nowrap}
.header .logo .thin{font-weight:340;color:var(--chrome-accent)}
.header .logo small{display:block;font-size:8px;letter-spacing:.2em;font-weight:800;color:var(--muted);margin-top:9px}
.header .logo small .brand-prefix{font-weight:650;opacity:.85}
.header .logo small .brand-focus{font-weight:860;color:var(--chrome-accent);margin-left:.05em}
body[data-tool] .tool-heading .eyebrow .brand-prefix{font-weight:640;opacity:.9}
body[data-tool] .tool-heading .eyebrow .brand-focus{font-weight:880;color:var(--accent);margin-left:.06em}
body[data-tool] .tool-heading h1 em{font-style:normal;color:var(--accent);font-weight:520}

.header .logo-icon{height:38px;width:38px;border:2px solid var(--chrome-accent);border-radius:10px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4px;padding:9px 7px 7px;position:relative;transform:rotate(-3deg);background:var(--chrome-tag)}
.header .logo-icon .roof{position:absolute;left:6px;right:6px;top:5px;height:8px;border-top:2px solid var(--chrome-accent);border-left:2px solid var(--chrome-accent);border-right:2px solid var(--chrome-accent);border-radius:7px 7px 0 0;transform:translateY(-1px)}
.header .logo-icon .cell{display:block;border-radius:2px;background:var(--chrome-accent);opacity:.95}
.header .logo-icon .cell-a{height:100%;opacity:.95}.header .logo-icon .cell-b{height:78%;align-self:end;opacity:.55}
.header .logo-icon .cell-c{height:72%;align-self:end;opacity:.55}.header .logo-icon .cell-d{height:100%;opacity:.95}
.header .suite-nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.header .suite-nav a{text-decoration:none;color:var(--muted);font-size:12px;font-weight:750;padding:8px 10px;border-radius:9px}
.header .suite-nav a:hover,.header .suite-nav a.here{background:var(--chrome-tag);color:var(--chrome-heading)}
.header .header-center{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.header .live-dot{display:inline-block;background:#79ae81;width:7px;height:7px;border-radius:50%;margin-right:5px}
.header .header-actions{display:flex;align-items:center;gap:7px;min-width:0}
.header .compact-setting select,.header .export-controls select,.header .icon-button{height:36px;border:1px solid var(--chrome-line);border-radius:8px;background:var(--chrome-field);color:var(--chrome-heading);font-size:11px;font-weight:800;padding:0 7px;cursor:pointer}
.header .compact-setting select{min-width:54px}.header .icon-button{width:36px;font-size:18px;display:grid;place-items:center;padding:0}
.header .btn.dark{background:var(--chrome-button);color:#fff;min-height:36px;border-radius:8px;padding:10px 13px}
.header .export-controls{display:flex;align-items:center;gap:4px}.header .export-controls button{border-radius:8px 0 0 8px}
.header .export-controls select{height:36px;border-radius:0 8px 8px 0;min-width:62px}
:root[data-theme="dark"] .header .btn.dark{color:#fff;background:var(--chrome-button)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
/* Suite tools use the same centered headline and three-column workspace. */
body[data-tool] .page{max-width:1680px;padding:0 4% 65px}
body[data-tool] .crumbs{margin-top:18px;margin-bottom:2px;color:var(--muted);font-size:11px}
body[data-tool] .tool-heading{text-align:center;padding:22px 0 24px;margin:0 auto;max-width:940px}
body[data-tool] .tool-heading .eyebrow{font-size:11px;font-weight:820;letter-spacing:.15em;color:var(--accent)}
body[data-tool] .tool-heading h1{font-size:clamp(32px,3.5vw,49px);letter-spacing:-.06em;line-height:1.16;margin:7px 0 9px;color:var(--ink)}
body[data-tool] .tool-heading p{margin:0 auto;color:var(--soft);max-width:740px;font-size:15px}
body[data-tool] .layout{grid-template-columns:minmax(215px,.73fr) minmax(370px,1.9fr) minmax(265px,.88fr);gap:14px}
body[data-tool] .panel,body[data-tool] .canvas-card{border-radius:15px;box-shadow:0 8px 28px #2737280a;border-color:var(--border)}
body[data-tool] .panel .section{padding:19px 18px 21px}
body[data-tool] .side-header{display:flex;align-items:center;gap:10px;margin-bottom:16px}
body[data-tool] .side-header>span{background:var(--chrome-tag);color:var(--chrome-tag-text);border-radius:6px;min-width:28px;padding:5px;text-align:center;font-size:10px;font-weight:850}
body[data-tool] .side-header h2{font-size:15px;line-height:1.2;margin:0;letter-spacing:-.025em;color:var(--chrome-heading)}
body[data-tool] .field{font-size:12px;color:var(--chrome-heading);margin:12px 0;font-weight:760}
body[data-tool] .field input,body[data-tool] .field select{height:40px;margin-top:6px;border:1px solid var(--chrome-line);background:var(--chrome-field);color:var(--ink);border-radius:8px;font-size:14px;font-weight:650;padding:0 10px}
body[data-tool] .panel p{font-size:13px}
body[data-tool] .btn{font-size:13px;background:var(--chrome-button);border-radius:9px}
body[data-tool] .btn.secondary{background:var(--chrome-tag);color:var(--chrome-heading)}
body[data-tool] .btn.danger{background:#fff0ee;color:#a04438}
:root[data-theme="dark"] body[data-tool] .btn{background:var(--chrome-button);color:#fff}
:root[data-theme="dark"] body[data-tool] .btn.danger{background:#57342e;color:#f4b1a7}
:root[data-theme="dark"] body[data-tool] .btn.secondary{background:var(--chrome-tag);color:var(--ink)}
body[data-tool] .canvas-card{padding:0}
body[data-tool] .editor-top{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 23px 16px;gap:12px}
body[data-tool] .room-title{flex:1;min-width:0}
body[data-tool] .project-line{display:inline-flex;align-items:center;gap:5px;max-width:100%}
body[data-tool] .project-line input{width:22ch;max-width:calc(100% - 32px);min-width:120px;border:1px solid transparent;outline:none;background:transparent;border-radius:6px;color:var(--chrome-heading);font-size:19px;font-weight:800;letter-spacing:-.035em;padding:3px 4px 3px 0;text-overflow:ellipsis}
body[data-tool] .project-line input:hover,body[data-tool] .project-line input:focus{background:var(--chrome-field);border-color:var(--chrome-line);padding-left:6px}
body[data-tool] .edit-pencil{font-size:19px;color:var(--chrome-accent);flex:none;border:0;background:transparent;cursor:pointer;padding:3px 5px;border-radius:6px;line-height:1.2}
body[data-tool] .edit-pencil:hover{background:var(--chrome-helper)}
body[data-tool] .editor-top p{margin:2px 0 0;color:var(--muted);font-size:11px}
body[data-tool] .canvas-head{border-top:1px solid var(--border);margin:0 21px;padding:15px 0 0}
body[data-tool] .canvas-head h2{font-size:16px;color:var(--chrome-heading)}
body[data-tool] .canvas-head span{font-size:12px;color:var(--muted)}
body[data-tool] .canvas-holder{margin:14px 21px 12px;background:var(--chrome-helper);border-color:var(--chrome-line);border-radius:12px}
body[data-tool] .canvas-tip{display:flex;align-items:baseline;gap:8px;flex:1;min-width:100%;margin:0 21px 22px;padding:11px 12px;border:1px solid var(--chrome-line);border-left:3px solid var(--chrome-accent);border-radius:8px;background:var(--chrome-helper);color:var(--soft);font-size:13px;line-height:1.65}

body[data-tool] .canvas-tip strong{font-weight:800;color:var(--chrome-heading);display:inline-block;flex:none}
body[data-tool] .canvas-tip span{display:inline;min-width:0}
body[data-tool] .calc-scale-bar{padding:13px 15px 8px;display:flex;justify-content:space-between;gap:7px;align-items:center;font-size:9px;letter-spacing:.1em;font-weight:840;color:var(--muted);flex-wrap:wrap}
body[data-tool] .calc-scale-main{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;min-width:0;flex:1}
body[data-tool] .calc-scale-main>span:first-child{white-space:nowrap}
body[data-tool] .calc-display-options{display:flex;flex-wrap:wrap;align-items:center;gap:7px 13px;letter-spacing:normal}
body[data-tool] .switch{display:inline-flex;gap:7px;align-items:center;font-size:11px;font-weight:720;color:var(--soft);cursor:pointer;white-space:nowrap}
body[data-tool] .switch input{position:absolute;opacity:0;width:1px;height:1px}
body[data-tool] .switch>span:first-of-type{width:28px;height:17px;border-radius:10px;background:var(--chrome-line);display:inline-block;position:relative;flex:none}
body[data-tool] .switch>span:first-of-type::before{content:"";position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:#fff;transition:left .2s}
body[data-tool] .switch input:checked+span:first-of-type{background:var(--chrome-accent)}
body[data-tool] .switch input:checked+span:first-of-type::before{left:14px}
body[data-tool] #liveDimension{white-space:nowrap;letter-spacing:.03em}

body[data-tool] .result-lead{background:var(--light);color:var(--ink)}
body[data-tool] .result-lead small{color:var(--soft)}
body[data-tool] .subnav{justify-content:center;margin:0 0 20px}
body[data-tool] .subnav a{background:var(--light);color:var(--ink)}
body[data-tool] .subnav a.active{background:var(--chrome-button);color:#fff}
body[data-tool] .content-guide{background:var(--paper)}
body[data-tool] .hint{background:var(--chrome-helper)}
body[data-tool] .canvas-holder [data-resize]{cursor:nwse-resize;touch-action:none;pointer-events:all}
body[data-tool] .canvas-holder [data-resize="ne"],body[data-tool] .canvas-holder [data-resize="sw"]{cursor:nesw-resize}
body[data-tool] .canvas-holder [data-resize]:hover{filter:drop-shadow(0 0 2px #fff)}
body[data-tool] .checkbox input{accent-color:var(--chrome-button)}
/* Give each microsite its own identity without changing the shared hierarchy. */
body[data-tool="wall"] .warning{border-color:#edccae}
body[data-tool="floor"] .warning{border-color:#b9dce5}
body[data-tool="roof"] .warning{border-color:#d7cae9}
/* Four clearly differentiated cards on the home page. */
.tool-card:nth-child(1){--card-accent:#5c8a65;--card-soft:#e6f0e5}
.tool-card:nth-child(2){--card-accent:#7660ad;--card-soft:#ede9f7}
.tool-card:nth-child(3){--card-accent:#b96953;--card-soft:#f5e5dc}
.tool-card:nth-child(4){--card-accent:#287d95;--card-soft:#e2f3f7}
.tool-card .card-art{background:var(--card-soft)}
.tool-card .badge{background:var(--card-soft);color:var(--card-accent);align-self:start}
.tool-card strong{color:var(--card-accent)!important}
.tool-card:hover{border-color:var(--card-accent)}
:root[data-theme="dark"] .tool-card:nth-child(1){--card-soft:#344d3a;--card-accent:#a7d0ac}
:root[data-theme="dark"] .tool-card:nth-child(2){--card-soft:#48395e;--card-accent:#c8b3f7}
:root[data-theme="dark"] .tool-card:nth-child(3){--card-soft:#51382e;--card-accent:#efb09c}
:root[data-theme="dark"] .tool-card:nth-child(4){--card-soft:#254b5a;--card-accent:#9bdbed}
@media(max-width:1400px){.header .header-center{display:none}.header .header-actions{margin-left:auto}body[data-tool] .layout{grid-template-columns:minmax(210px,.72fr) minmax(350px,1.65fr) minmax(252px,.88fr);gap:10px}}
@media(max-width:1200px){.header .suite-nav{order:3;width:100%;justify-content:center}}
@media(max-width:1060px){body[data-tool] .layout{grid-template-columns:minmax(210px,.78fr) minmax(330px,1.6fr) minmax(238px,.9fr)}.header{gap:10px}.header .header-actions{gap:5px}}
@media(max-width:920px){body[data-tool] .layout{grid-template-columns:minmax(215px,1fr) minmax(340px,1.5fr)}body[data-tool] .layout>.panel:last-child{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr}body[data-tool] .layout>.panel:last-child .section{border-right:1px solid var(--border)}}
@media(max-width:680px){.header{flex-wrap:wrap;padding:12px 4%;gap:12px}.header .header-actions{width:100%;justify-content:space-between;margin:0}.header .suite-nav{order:3;width:100%;gap:2px}.header .suite-nav a{font-size:11px;padding:6px 8px}body[data-tool] .page{padding:0 3% 45px}body[data-tool] .tool-heading{padding:18px 0 20px}body[data-tool] .tool-heading h1{font-size:34px}body[data-tool] .tool-heading p{font-size:13px}body[data-tool] .layout{display:flex;flex-direction:column;gap:12px}body[data-tool] .layout>*{width:100%}body[data-tool] .layout>.panel:last-child{display:block}body[data-tool] .layout>.panel:last-child .section{border-right:0}body[data-tool] .canvas-holder{min-height:330px}body[data-tool] .canvas-holder svg{height:355px}body[data-tool] .canvas-tip{display:block}body[data-tool] .canvas-tip strong{display:block;margin-bottom:3px}body[data-tool] .calc-scale-bar{align-items:flex-start}body[data-tool] .calc-scale-main{flex-basis:100%}}
@media(max-width:440px){.header .logo{font-size:21px}.header .header-actions{flex-wrap:wrap;justify-content:flex-start;gap:7px}.header .export-controls{margin-left:auto}.header .compact-setting select{min-width:50px}body[data-tool] .editor-top{padding:15px}body[data-tool] .canvas-head{margin:0 12px}body[data-tool] .canvas-holder{margin:12px;min-height:290px}body[data-tool] .canvas-holder svg{height:305px}body[data-tool] .canvas-tip{margin:0 12px 15px}}
@media print{.header,.editor-top .edit-pencil{display:none!important}body[data-tool] .canvas-card{border:0}body[data-tool] .canvas-holder{border:0;background:white}}

/* Selected-object quick actions are shared across all three calculators. */
body[data-tool] .object-quick-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px;margin-bottom:9px}
body[data-tool] .object-quick-actions .btn{flex:1;min-width:105px;padding:9px 10px;white-space:nowrap}

/* CasaExacta 0.7.1: the plan background is the tool's own dark/light surface,
   while the lighter floor/roof/wall fill exists ONLY within the polygon. */
body[data-tool] .canvas-holder{background:var(--bg);border:1px solid var(--chrome-line);margin-top:9px}
body[data-tool] .canvas-holder svg{background:transparent}
body[data-tool] .editor-top{align-items:center}
body[data-tool] .editor-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
body[data-tool] .editor-tools button{font-size:11px;font-weight:780;padding:9px 10px;border-radius:8px;border:1px solid var(--chrome-line);background:var(--chrome-field);color:var(--chrome-heading);white-space:nowrap}
body[data-tool] .editor-tools button:hover:not(:disabled){background:var(--chrome-tag)}
body[data-tool] .editor-tools button:disabled{opacity:.36;cursor:not-allowed}
body[data-tool] .place-item{display:block;width:100%;margin-top:18px;min-height:44px;background:var(--chrome-button);color:#fff;border-radius:10px}
body[data-tool] .place-item:hover{filter:brightness(1.09)}
body[data-tool] .canvas-tip{margin-top:14px}
/* Styled confirmation dialog matches the SpaceExacto dialog with each tool's accent. */
body[data-tool] .suite-modal{width:min(440px,calc(100vw - 30px));max-width:none;max-height:90vh;overflow:auto;position:fixed;margin:auto;padding:27px;border-radius:16px;border:1px solid var(--chrome-line);box-shadow:0 25px 90px #101b16a0;background:var(--paper);color:var(--ink)}
body[data-tool] .suite-modal::backdrop{background:#111721b9;backdrop-filter:blur(3px)}
body[data-tool] .suite-modal .modal-symbol{width:42px;height:42px;display:grid;place-items:center;border-radius:10px;background:var(--chrome-tag);color:var(--chrome-accent);font-size:25px}
body[data-tool] .suite-modal h3{font-size:21px;letter-spacing:-.035em;line-height:1.25;margin:14px 0 7px;color:var(--chrome-heading)}
body[data-tool] .suite-modal p{font-size:13px;color:var(--soft);line-height:1.7;margin:0}
body[data-tool] .suite-modal .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:23px}
body[data-tool] .suite-modal .btn{min-height:39px;padding:9px 16px}
@media(max-width:680px){body[data-tool] .editor-top{align-items:flex-start;flex-wrap:wrap}body[data-tool] .editor-tools{margin-left:auto}body[data-tool] .project-line input{max-width:min(52vw,270px)}}
@media print{body[data-tool] .editor-tools,body[data-tool] .suite-modal{display:none!important}}
:root[data-theme="dark"] body[data-tool] .canvas-holder{background:var(--bg)}
@media print{:root[data-theme="dark"] body[data-tool] .canvas-holder{background:#fff}}

/* Scale badge is part of the dark planning surface, like EspacioExacto. */
body[data-tool] .calc-scale-bar{position:absolute;top:12px;left:14px;right:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;z-index:1;pointer-events:none;color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.08em}
body[data-tool] .calc-scale-bar #liveDimension{font-weight:780;white-space:nowrap;letter-spacing:.015em}
body[data-tool] .calc-plan-shell{position:relative;margin:9px 21px 12px;border-radius:12px;background:var(--bg);border:1px solid var(--chrome-line);overflow:hidden}
body[data-tool] .calc-plan-shell .canvas-holder{margin:0;border:0;background:transparent;border-radius:0}
:root[data-theme="dark"] body[data-tool] .calc-plan-shell .canvas-holder{background:transparent}
@media(max-width:440px){body[data-tool] .calc-plan-shell{margin:12px}}
/* Override legacy universal dark-mode green fields and results with the microsite palette. */
:root[data-theme="dark"] body[data-tool] .field input,
:root[data-theme="dark"] body[data-tool] .field select,
:root[data-theme="dark"] body[data-tool] .editor-options select{background:var(--chrome-field);color:var(--ink);border-color:var(--chrome-line)}
:root[data-theme="dark"] 
body[data-tool] .canvas-tip strong{font-weight:800;color:var(--chrome-heading);display:inline-block;flex:none}
body[data-tool] .canvas-tip span{display:inline;min-width:0}
body[data-tool] .calc-scale-bar{padding:13px 15px 8px;display:flex;justify-content:space-between;gap:7px;align-items:center;font-size:9px;letter-spacing:.1em;font-weight:840;color:var(--muted);flex-wrap:wrap}
body[data-tool] .calc-scale-main{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;min-width:0;flex:1}
body[data-tool] .calc-scale-main>span:first-child{white-space:nowrap}
body[data-tool] .calc-display-options{display:flex;flex-wrap:wrap;align-items:center;gap:7px 13px;letter-spacing:normal}
body[data-tool] .switch{display:inline-flex;gap:7px;align-items:center;font-size:11px;font-weight:720;color:var(--soft);cursor:pointer;white-space:nowrap}
body[data-tool] .switch input{position:absolute;opacity:0;width:1px;height:1px}
body[data-tool] .switch>span:first-of-type{width:28px;height:17px;border-radius:10px;background:var(--chrome-line);display:inline-block;position:relative;flex:none}
body[data-tool] .switch>span:first-of-type::before{content:"";position:absolute;top:3px;left:3px;width:11px;height:11px;border-radius:50%;background:#fff;transition:left .2s}
body[data-tool] .switch input:checked+span:first-of-type{background:var(--chrome-accent)}
body[data-tool] .switch input:checked+span:first-of-type::before{left:14px}
body[data-tool] #liveDimension{white-space:nowrap;letter-spacing:.03em}

body[data-tool] .result-lead{background:var(--light);color:var(--ink)}
:root[data-theme="dark"] body[data-tool] .result-lead small{color:var(--soft)}
:root[data-theme="dark"] body[data-tool] .subnav a{background:var(--light);color:var(--ink)}
:root[data-theme="dark"] body[data-tool] .subnav a.active{background:var(--chrome-button);color:#fff}
@media print{body[data-tool] .calc-scale-bar{display:none}}


/* CasaExacta landing palette: graphite & sand */
body:not([data-tool]){
 --bg:#f4f0e8;--paper:#ffffff;--ink:#17282f;--soft:#55686d;--accent:#876329;
 --light:#f7f1e7;--border:#e3d9c7;--muted:#7d776a;
 --chrome-field:#f8f3ea;--chrome-tag:#efe4d1;--chrome-tag-text:#876329;
 --chrome-heading:#17282f;--chrome-helper:#f8f3ea;--chrome-accent:#d9b778;
 --chrome-line:#ddcfbc;--chrome-header:#f4f0e8;--chrome-button:#17282f;
}
:root[data-theme="dark"] body:not([data-tool]){
 --bg:#17282f;--paper:#23363d;--ink:#f4f0e8;--soft:#c8d0cc;--accent:#d9b778;
 --light:#30454d;--border:#41565d;--muted:#cfbea2;
 --chrome-field:#253840;--chrome-tag:#30454d;--chrome-tag-text:#f3e6d1;
 --chrome-heading:#f4f0e8;--chrome-helper:#22343b;--chrome-accent:#d9b778;
 --chrome-line:#41565d;--chrome-header:#17282f;--chrome-button:#d9b778;
}
body:not([data-tool]){background:var(--bg);color:var(--ink)}
body:not([data-tool]) .header{background:var(--chrome-header);border-bottom-color:var(--chrome-line)}
body:not([data-tool]) .hero{padding:52px 15px 50px}
body:not([data-tool]) .hero .eyebrow{color:var(--accent)}
body:not([data-tool]) .hero h1{color:var(--ink)}
body:not([data-tool]) .hero h1 em{color:var(--chrome-accent)}
body:not([data-tool]) .hero p{color:var(--soft)}
body:not([data-tool]) .info-line{background:#ebe5d8;color:var(--soft);border:1px solid #d9cfbc}
body:not([data-tool]) .info-line b{color:var(--ink)}
body:not([data-tool]) .content-guide{background:var(--paper);border-color:var(--border)}
body:not([data-tool]) .content-guide h2,body:not([data-tool]) .content-guide h3{color:var(--ink)}
body:not([data-tool]) .content-guide p,body:not([data-tool]) .content-guide li{color:var(--soft)}
body:not([data-tool]) .tool-footer{border-top-color:var(--border)}
:root[data-theme="dark"] body:not([data-tool]) .header .btn.dark{background:var(--chrome-button);color:#17282f}
:root[data-theme="dark"] body:not([data-tool]) .header .icon-button,
:root[data-theme="dark"] body:not([data-tool]) .header .compact-setting select{background:var(--chrome-field);border-color:var(--chrome-line);color:var(--chrome-heading)}
:root[data-theme="dark"] body:not([data-tool]) .info-line{background:#263b33;border-color:#3b544b;color:#e1f2df}


/* Immediate, non-interactive plan tooltip (no browser title or hover delay). */
.ce-element-tooltip{
  position:fixed;z-index:5000;pointer-events:none;box-sizing:border-box;
  width:max-content;max-width:min(270px,calc(100vw - 24px));
  padding:12px 15px;border-radius:12px;
  background:var(--paper);color:var(--chrome-heading);border:1px solid var(--chrome-line);
  border-left:3px solid var(--chrome-accent);box-shadow:0 16px 42px #091a2050;
  font-family:inherit;font-size:13px;line-height:1.45;text-align:left;
}
.ce-element-tooltip[hidden]{display:none!important}
.ce-element-tooltip strong{display:block;font-size:14px;font-weight:800;overflow-wrap:anywhere;letter-spacing:-.02em}
.ce-element-tooltip span{display:block;margin-top:4px;color:var(--soft);font-size:12px;white-space:normal;font-weight:600}

/* CasaExacta 0.8.3 — typography per microsite (the home keeps its original stack).
   Remote web fonts are optional: system fallbacks maintain full offline functionality. */
body[data-tool="wall"]{--tool-font:"DM Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif}
body[data-tool="floor"]{--tool-font:"IBM Plex Sans", "Segoe UI", ui-sans-serif, system-ui, sans-serif}
body[data-tool="roof"]{--tool-font:"Sora", "Segoe UI", ui-sans-serif, system-ui, sans-serif}
body[data-tool]{font-family:var(--tool-font)}
body[data-tool] button,body[data-tool] input,body[data-tool] select,
body[data-tool] textarea,body[data-tool] dialog{font-family:var(--tool-font)}
/* Wordmark deliberately stays identical to CasaExacta on all pages. */
body[data-tool] .header .logo{font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
body[data-tool] .tool-heading h1{font-weight:750;letter-spacing:-.045em}
body[data-tool="wall"] .tool-heading h1{font-weight:750;letter-spacing:-.04em}
body[data-tool="floor"] .tool-heading h1{font-weight:700;letter-spacing:-.034em}
body[data-tool="roof"] .tool-heading h1{font-weight:700;letter-spacing:-.05em}
body[data-tool] .panel h2,body[data-tool] .side-header h2{letter-spacing:-.018em}
body[data-tool] .canvas-holder svg text{font-family:var(--tool-font)}
body[data-tool] input[type=number],body[data-tool] .stat b,
body[data-tool] #lead{font-variant-numeric:tabular-nums}


body[data-tool="wall"] .tool-heading h1 em{font-weight:700}
body[data-tool="floor"] .tool-heading h1 em{font-weight:620}
body[data-tool="roof"] .tool-heading h1 em{font-weight:640}

/* Deployment QA: the plan header is non-interactive except for its controls.
   Keep the SVG responsive underneath, but let the Grid toggle receive clicks. */
body[data-tool] .calc-scale-bar .calc-display-options,
body[data-tool] .calc-scale-bar .calc-display-options .switch,
body[data-tool] .calc-scale-bar .calc-display-options .switch span {
  pointer-events: auto;
}

/* Brand v0.8.8: Variant A — color-coded suite mark and a weighted wordmark. */
.header .logo{font-weight:430;letter-spacing:-.055em;line-height:1}
.header .logo .thin{font-weight:850;color:inherit}
.header .logo-icon{width:45px;height:45px;flex:none;display:block;position:relative;box-sizing:border-box;border:0;padding:0;border-radius:0;background:none;transform:none}
.header .logo-icon img{width:100%;height:100%;display:block;object-fit:contain}
.header .logo-icon .logo-mark-dark{display:none}
:root[data-theme="dark"] .header .logo-icon .logo-mark-light{display:none}
:root[data-theme="dark"] .header .logo-icon .logo-mark-dark{display:block}
body:not([data-tool]) .header .logo small{letter-spacing:.11em;font-size:8px;text-transform:uppercase;color:var(--muted);margin-top:7px}
@media(max-width:440px){.header .logo-icon{width:40px;height:40px}body:not([data-tool]) .header .logo small{font-size:7px;letter-spacing:.065em}}

/* Trust navigation for landing and calculators (CasaExacta 0.9). */
.trust-links{display:flex;align-items:center;gap:11px;flex-wrap:wrap;font-size:12px}
.trust-links a{color:inherit;text-decoration:none;opacity:.88}
.trust-links a:hover{text-decoration:underline;opacity:1}

/* CasaExacta 0.9.2: clearer inline header selectors for language and units. */
.header .compact-setting-labeled{display:inline-flex;flex-direction:row;align-items:center;gap:8px;padding:0 2px}
.header .compact-setting-labeled .setting-prefix{font-size:12px;line-height:1;color:var(--muted);font-weight:780;white-space:nowrap;flex:none}
.header .compact-setting-labeled select{min-width:142px}
@media(max-width:900px){.header .compact-setting-labeled{gap:7px}.header .compact-setting-labeled .setting-prefix{font-size:11px}.header .compact-setting-labeled select{min-width:128px}}
@media(max-width:680px){.header .compact-setting-labeled{gap:6px}.header .compact-setting-labeled select{min-width:122px}}
@media(max-width:440px){.header .compact-setting-labeled{gap:5px;padding:0}.header .compact-setting-labeled .setting-prefix{font-size:10px}.header .compact-setting-labeled select{min-width:116px;font-size:10px}}

/* CasaExacta 0.9.6 — contextual autosave notice and right-aligned header preferences. */
.header .header-actions{margin-left:auto}
body[data-tool] .canvas-tip{margin-bottom:9px}
body[data-tool] .local-save-note{display:flex;align-items:center;gap:8px;margin:0 21px 20px;color:var(--muted);font-size:12px;line-height:1.45;font-weight:560}
body[data-tool] .local-save-dot{width:7px;height:7px;flex:none;display:inline-block;border-radius:50%;background:#7caf84}
@media(max-width:1200px){.header{flex-wrap:wrap}.header .suite-nav{order:3;width:100%;justify-content:center}}
@media(max-width:680px){body[data-tool] .local-save-note{margin:0 12px 16px}}