:root{
  --bg:#171a1d; --panel:#1e2226; --panel2:#262c31; --line:#343c43;
  --txt:#e6e9ec; --dim:#9aa5ae; --accent:#c8873f; --accent2:#3f7fc8;
  --ok:#5fb37a; --warn:#d8a13a; --bad:#d2604f;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:var(--bg); color:var(--txt);
  font:13px/1.45 "Segoe UI",Inter,system-ui,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
button{
  background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  border-radius:5px; padding:5px 10px; cursor:pointer; font:inherit;
}
button:hover{background:#31383e; border-color:#4a545c}
button.primary{background:var(--accent); border-color:#a86f2f; color:#1a1206; font-weight:600}
button.primary:hover{background:#d9954a}
button.danger{background:#402723;border-color:#6b3b33;color:#f0b5aa;width:100%}
button.danger:hover{background:#54312b}
input,select{
  background:#12161a; color:var(--txt); border:1px solid var(--line);
  border-radius:4px; padding:4px 6px; font:inherit; min-width:0; width:100%;
}
input[type=checkbox]{width:auto}
input[type=range]{padding:0}

#topbar{
  display:flex; align-items:center; gap:14px; padding:8px 12px;
  background:var(--panel); border-bottom:1px solid var(--line); flex:0 0 auto;
}
.brand{font-weight:700; letter-spacing:.3px; display:flex; align-items:center; gap:8px; margin-right:6px}
.mark{width:22px;height:22px;display:inline-block;object-fit:contain;
  filter:brightness(1.55)}   /* lift the navy mark off the dark chrome */
.tbgroup{display:flex; gap:6px}
.tbgroup.right{margin-left:auto}

#main{flex:1 1 auto; display:flex; min-height:0}
aside{
  width:264px; flex:0 0 264px; background:var(--panel); overflow-y:auto;
  display:flex; flex-direction:column;
}
#left{border-right:1px solid var(--line)}
#right{border-left:1px solid var(--line); width:300px; flex:0 0 300px}
.panel{padding:10px 12px; border-bottom:1px solid var(--line)}
.panel.grow{flex:1 1 auto; min-height:260px; overflow-y:auto}
/* The sidebar scrolls as a whole rather than crushing the palette. */
.panel h3{
  margin:0 0 8px; font-size:11px; text-transform:uppercase;
  letter-spacing:.09em; color:var(--dim); font-weight:700;
}
.row{display:flex; align-items:center; gap:8px; margin-bottom:6px}
.row>label{flex:0 0 92px; color:var(--dim); font-size:12px}
.row.end{justify-content:flex-end}
.row .val{font-variant-numeric:tabular-nums}
.mini{font-size:11px;color:var(--dim);white-space:nowrap}
/* nowrap is right for a unit suffix beside an input, wrong for a sentence. */
.mini.wrap{white-space:normal;line-height:1.4}
.hint{font-size:11px;color:var(--dim);margin-top:8px;line-height:1.4}

.tools{display:grid; grid-template-columns:1fr 1fr; gap:5px}
.tool{text-align:left; padding:5px 7px; font-size:12px}
.tool b{display:inline-block;width:14px;color:var(--dim);font-size:10px}
.tool.active{background:var(--accent2); border-color:#2f6cae; color:#fff}
.tool.active b{color:#cfe3f8}

.matcat{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--dim);
  margin:10px 0 4px; padding-bottom:2px; border-bottom:1px solid var(--line);
}
.mat{
  display:flex; align-items:center; gap:7px; padding:4px 5px; border-radius:4px;
  cursor:pointer; font-size:12px; border:1px solid transparent;
}
.mat:hover{background:var(--panel2)}
.mat.active{background:#2a3a4c; border-color:var(--accent2)}
.mat canvas{width:20px;height:16px;border:1px solid #000;border-radius:2px;flex:0 0 auto}
.mat .u{margin-left:auto;color:var(--dim);font-size:10px}

#stage{flex:1 1 auto; position:relative; min-width:0; background:#0e1114}
#cv{position:absolute; inset:0; width:100%; height:100%; display:block}
#statusbar{
  position:absolute; left:0; right:0; bottom:0; display:flex; gap:16px;
  padding:5px 12px; background:rgba(20,23,26,.92); border-top:1px solid var(--line);
  font-size:11.5px; font-variant-numeric:tabular-nums; color:var(--dim);
}
#statusbar .spacer{flex:1}
#statusbar .warn{color:var(--warn)}
#statusbar .ok{color:var(--ok)}

table{width:100%; border-collapse:collapse; font-size:12px}
.metrics td{padding:3px 0; border-bottom:1px solid #23282d}
.metrics td:first-child{color:var(--dim)}
.metrics td:last-child{text-align:right; font-variant-numeric:tabular-nums}
.metrics td.flag-bad{color:var(--bad); font-weight:600}
.metrics td.flag-ok{color:var(--ok)}
.takeoff th{
  text-align:left; color:var(--dim); font-weight:600; font-size:10px;
  text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid var(--line); padding:3px 4px;
}
.takeoff td{padding:3px 2px; border-bottom:1px solid #23282d; vertical-align:middle}
.takeoff td.n{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.takeoff input{width:54px; text-align:right; padding:2px 4px}
.takeoff tr.catrow td{
  color:var(--dim); font-size:10px; text-transform:uppercase;
  letter-spacing:.06em; padding-top:9px; border-bottom:1px solid var(--line);
}
.takeoff tr.total td{font-weight:700; border-top:2px solid var(--line); border-bottom:none; padding-top:6px}
.takeoff .sw{display:inline-block;width:11px;height:11px;border:1px solid #000;border-radius:2px;vertical-align:-1px;margin-right:5px}
.assump{margin-top:8px}
.assump summary{cursor:pointer; color:var(--dim); font-size:11px}
.assump .row>label{flex:0 0 116px}
.assump{padding-top:6px}

#modal{position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex;
  align-items:center; justify-content:center; z-index:50}
#modal.hidden{display:none}
#modal .box{background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:16px 18px; width:340px; box-shadow:0 12px 40px rgba(0,0,0,.5)}
#modal h3{margin:0 0 8px; font-size:14px}
#modal p{margin:0 0 12px; color:var(--dim); font-size:12px}

/* ---- drawing aids ---- */
.rotbtns{gap:4px}
.rotbtns button{flex:1; padding:4px 0; font-size:11px; min-width:0}
button.wide{width:100%}
#uRot{width:64px; flex:0 0 64px}

#exact{
  position:absolute; z-index:20; width:198px; padding:9px 10px 7px;
  background:var(--panel); border:1px solid var(--accent); border-radius:6px;
  box-shadow:0 8px 26px rgba(0,0,0,.5);
}
#exact.hidden{display:none}
#exact .exrow{display:flex; align-items:center; gap:6px; margin-bottom:5px}
#exact .exrow label{flex:0 0 48px; color:var(--dim); font-size:11px}
#exact .exrow span{color:var(--dim); font-size:11px; flex:0 0 12px}
#exact .exrow input{text-align:right}
#exact .exhint{font-size:10px; color:var(--dim); line-height:1.35; margin-top:2px}

#exact .extitle{
  font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:7px;
}
#exact .exrow[hidden]{display:none}
#exact .exrow select{font:inherit}
#exact .exrow label{flex:0 0 56px}

.devtag{background:#3f7fc8;color:#fff;font-size:9px;font-weight:800;letter-spacing:.1em;
  padding:2px 5px;border-radius:3px;vertical-align:2px}

/* ---- underlay list ---- */
.ulrow{display:flex; align-items:center; gap:4px; padding:3px 5px; border-radius:4px;
  border:1px solid transparent; cursor:pointer; font-size:12px}
.ulrow:hover{background:var(--panel2)}
.ulrow.active{background:#2a3a4c; border-color:var(--accent2)}
.ulname{flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ulx{flex:0 0 auto; padding:0 5px; line-height:16px; font-size:13px; background:transparent;
  border-color:transparent; color:var(--dim)}
.ulx:hover{background:#54312b; color:#f0b5aa; border-color:#6b3b33}
#uScale{width:64px; flex:0 0 64px}

/* ===========================================================================
   ButterPaper
   =========================================================================== */

/* No logo yet — the name set in type is the mark for now. */
.wordmark{font-weight:400; letter-spacing:.2px; font-size:15px}
.wordmark b{font-weight:700}
.tiertag{
  background:var(--panel2); color:var(--dim); border:1px solid var(--line);
  font-size:9px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  padding:2px 6px; border-radius:3px; margin-left:8px; vertical-align:2px;
}
body[data-tier="pro"] .tiertag{background:#3a2f1c; border-color:#6b552c; color:#e8c46a}

/* A locked figure has to look deliberate, not broken. */
.metrics td.locked{
  color:var(--accent); font-size:10px; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
}
.takeoff td.upsell{
  color:var(--dim); font-size:12px; line-height:1.55; padding:10px 0;
  border-bottom:none;
}
.takeoff td.upsell b{display:block; color:var(--txt); margin-bottom:3px}

/* ---- feedback ------------------------------------------------------------ */
#btnFeedback{border-color:#4a545c}
#fbModal{
  position:fixed; inset:0; background:rgba(0,0,0,.6); display:flex;
  align-items:center; justify-content:center; z-index:60;
}
#fbModal.hidden{display:none}
#fbModal .box{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:16px 18px; width:440px; max-width:92vw;
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
#fbModal h3{margin:0 0 6px; font-size:14px}
#fbModal p{margin:0 0 14px; color:var(--dim); font-size:12px}
#fbModal .row>label{flex:0 0 84px}
#fbModal .row.top{align-items:flex-start}
#fbModal .row.top>label{padding-top:5px}
#fbModal textarea{
  background:#12161a; color:var(--txt); border:1px solid var(--line);
  border-radius:4px; padding:6px 8px; font:inherit; width:100%; resize:vertical;
}
#fbModal textarea:focus,#fbModal input:focus,#fbModal select:focus{
  outline:none; border-color:var(--accent);
}
#fbModal .row.end{margin-top:14px; gap:8px}
#fbModal .row.end button{flex:0 0 auto; padding:6px 16px}
.fbnote{font-size:11.5px; color:var(--accent); min-height:16px; margin-top:8px}
/* A checkbox in a flex row gets squashed by the 100% width on inputs. */
input[type=checkbox]{flex:0 0 auto; width:13px; height:13px; accent-color:var(--accent)}