/* tools/garage-shell.css — the Garage / Shop page wears the same app shell as the House take-off
   (tools/vireo.css + vireo-layout.css): dark menu bar, thin sub-header, inputs on the left, tiles, and a
   tabbed workspace. Tabs: Plan · 3D model · Elevations · Take-off.
   Scoped to body.gx. Screen only for the shell; the print rules at the bottom restore normal flow so the
   worksheet print (and the design-sheet print) are unchanged. */
body.gx{
  --bg:#f4efe3;--panel:#fbf9f2;--panel2:#f7f2e6;--line:#e5dcc7;--ink:#2b2620;--soft:#5f5443;--faint:#a99e86;
  --red:#c8102e;--red-d:#8f1d2d;--red-dd:#7a1626;--label:#8a2f21;--gold:#c79a3f;--ink-soft:#5f5443;
  --ui:"Asap",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);font-family:var(--ui);font-size:14px;line-height:1.5;padding:0;color:var(--ink);
}
@media screen{
  html:has(body.gx){height:100%}
  body.gx{height:100%;display:flex;flex-direction:column;overflow:hidden}
}
/* dark menu bar */
.gx .menubar{display:flex;align-items:center;gap:2px;background:#2b2620;color:#efe9dc;padding:0 12px;height:38px;flex:none;font-size:14px}
.gx .menubar .brand{display:flex;align-items:center;gap:9px;font-weight:800;margin:0 14px 0 0}
.gx .menubar .brand .mark{width:26px;height:26px;border-radius:7px;background:#fbf8f1;padding:2px;object-fit:contain;display:block}
.gx .menubar .brand .bird{width:20px;height:20px;border-radius:5px;background:var(--red);display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff}
.gx .menubar .brand b{color:var(--red);letter-spacing:2px}
.gx .menubar .m{padding:8px 11px;border-radius:6px;color:#d9d2c3;cursor:pointer;user-select:none;text-decoration:none}
.gx .menubar .m:hover{background:#3b352c;color:#fff}
.gx .menubar .m.here{color:#fff;background:#3b352c;cursor:default}
.gx .menubar .spacer{margin-left:auto}
.gx .menubar .who{color:#efe9dc;font-size:13px;margin:0 4px 0 14px;font-weight:700}
/* sub-header */
.gx .subhead{display:flex;align-items:center;gap:12px;padding:7px 16px;border-bottom:1px solid var(--line);background:var(--panel);flex:none}
.gx .side-tog{font-family:var(--ui);font-size:13px;font-weight:600;border:1px solid #e0d8c4;background:#fff;color:var(--soft);border-radius:8px;padding:6px 11px;cursor:pointer}
.gx .side-tog:hover{border-color:var(--red);color:var(--red)}
.gx .subhead .crumb{font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--label);text-transform:uppercase}
.gx .subhead .draft{margin-left:auto;border-left:3px solid var(--gold);padding:2px 0 2px 10px;font-size:11.5px;font-weight:600;color:var(--label);letter-spacing:.03em}
/* body */
.gx .app{display:flex;align-items:stretch;flex:1;min-height:0;overflow:hidden}
.gx .side{width:340px;flex:none;border-right:1px solid var(--line);background:var(--panel2);padding:16px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.gx .app.side-hidden .side{display:none}
.gx .main{flex:1;padding:12px;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;overflow:auto}
/* input cards */
.gx .panel,.gx details.grp{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:13px 14px;box-shadow:none}
.gx details.grp{padding:0}
.gx .panel h2{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--label);margin:0 0 10px;padding:0;border:0;text-transform:uppercase}
.gx details.grp>summary{font-family:var(--ui);font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--label);padding:12px 14px}
.gx details.grp>summary .tag{font-family:var(--ui);font-size:10.5px;letter-spacing:.04em;color:var(--faint);font-weight:600}
.gx details.grp .gbody{padding:4px 14px 14px;border-top:1px solid var(--line)}
.gx .field{margin-bottom:11px}.gx .field:last-child{margin-bottom:0}
.gx .field.row2{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px}
.gx .field.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px 12px}
.gx label{display:block;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--soft);margin-bottom:4px}
.gx input[type=number],.gx input[type=text],.gx select{width:100%;font-family:var(--ui);font-size:14px;padding:9px 10px;border:1px solid #e0d8c4;border-radius:8px;background:#fff;color:var(--ink)}
.gx input:focus,.gx select:focus{outline:2px solid var(--red);border-color:var(--red)}
.gx .hint{font-size:11px;margin-top:3px;font-style:normal;color:var(--faint)}
.gx .actions{margin-top:0}
.gx .btn{font-family:var(--ui);text-transform:none;letter-spacing:0;font-size:13px;font-weight:700;border-radius:8px;padding:8px 14px;background:var(--red);border:1.5px solid var(--red);color:#fff;cursor:pointer}
.gx .btn.ghost{background:#fff;border-color:#e0d8c4;color:var(--soft)}
.gx .btn.ghost:hover{border-color:var(--red);color:var(--red)}
/* tiles: a compact 2x2 at the top of the sidebar, like the House page */
.gx .meas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0;flex:none}
.gx .mcard{color:#fff;background:linear-gradient(160deg,var(--red-d),var(--red-dd));border-radius:9px;padding:7px 10px;box-shadow:none;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px}
.gx .mcard .k{flex:0 0 100%;font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:.06em;opacity:.85}
.gx .mcard .v{font-family:var(--ui);font-size:19px;font-weight:800;letter-spacing:-.3px;line-height:1.15}
.gx .mcard .u{font-family:var(--ui);font-size:11px;opacity:.85}
/* workspace + tabs */
.gx .ws{background:var(--panel);border:1px solid var(--line);border-radius:12px;flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:480px}
.gx .tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);padding:8px 10px 0;background:var(--panel2);align-items:flex-end;flex:none}
.gx .tab{font-family:var(--ui);font-size:14px;font-weight:600;padding:9px 16px;border-radius:8px 8px 0 0;color:var(--soft);cursor:pointer;border:1px solid transparent;border-bottom:none;user-select:none}
.gx .tab:hover{color:var(--red)}
.gx .tab.on{background:var(--panel);color:var(--red);border-color:var(--line);font-weight:700}
.gx .tabtools{margin-left:auto;display:flex;gap:8px;align-items:center;padding-bottom:6px}
.gx .tabtools .only-takeoff,.gx .tabtools .not-takeoff,.gx .tabtools .pos-only{display:none}
.gx.on-pos .tabtools .pos-only{display:inline-block}
.gx .tabtools .pos-only.on{background:var(--red);color:#fff;border-color:var(--red)}
.gx.on-takeoff .tabtools .only-takeoff{display:flex}
.gx:not(.on-takeoff) .tabtools .not-takeoff{display:inline-block}
.gx .viewtoggle{margin:0;border:1px solid var(--line);border-radius:8px}
.gx .vbtn{font-family:var(--ui);text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;padding:7px 12px;color:var(--soft);border:0}
.gx .vbtn+.vbtn{border-left:1px solid var(--line)}
.gx .vbtn.on{background:var(--red);color:#fff}
.gx .pane{display:none;flex:1;min-height:0;overflow:auto;padding:14px 16px}
.gx .pane.on{display:block}
.gx #pane-takeoff{padding:0}
.gx #pane-takeoff .out{border:0;border-radius:0;box-shadow:none}
/* plan tab: drawing + a notes column */
.gx .plan-split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.gx .plan-split .card{background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:13px 14px}
.gx .plan-split .card h3{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--label);text-transform:uppercase}
.gx .plan-notes-grid{display:grid;grid-template-columns:1fr;gap:9px;padding:0}
.gx .plan-actions{display:flex;gap:8px;padding:12px 0 0;flex-wrap:wrap}
.gx #planview{padding:0;background:#fff;border:1px solid var(--line);border-radius:10px}
.gx #planview svg{max-height:calc(100vh - 330px);margin:0 auto}
.gx .plan-note{font-size:12px;font-style:normal;color:var(--soft);line-height:1.45}
.gx .redbox{border:2px solid #a62938;background:#f6e7ea;color:#a62938;font-size:11.5px;font-weight:600;line-height:1.4;padding:8px 10px;border-radius:6px;margin-top:12px}
/* 3D + elevations tabs */
.gx #view3d{padding:0}
.gx .v3-wrap{border-radius:10px}
.gx .elev-wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:start}
.gx #preview{padding:0;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.gx #preview .pcap{padding:8px 12px 10px}
.gx .tech{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.gx .tech figure{margin:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px}
.gx .tech svg{width:100%;height:auto;display:block}
.gx .sec-h{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--label);text-transform:uppercase;margin:0 0 8px}
/* narrow screens: normal page flow, panels stack */
@media(max-width:1000px){
  body.gx{height:auto;overflow:auto;display:block}
  .gx .app{display:block;overflow:visible}
  .gx .side{width:auto;border-right:0}
  .gx .main{overflow:visible}
  .gx .plan-split,.gx .elev-wrap{grid-template-columns:1fr}
  .gx .subhead .draft{display:none}
  .gx .ws{min-height:0}
}
/* print: worksheet only (as before); design-sheet mode shows only the plan set */
@media print{
  body.gx{display:block;height:auto;overflow:visible;background:#fff}
  .gx .menubar,.gx .subhead,.gx .side,.gx .tabs{display:none!important}
  .gx .app,.gx .main,.gx .ws{display:block!important;height:auto!important;overflow:visible!important;border:0!important;padding:0!important;margin:0!important;background:transparent!important;box-shadow:none!important;min-height:0!important}
  .gx .pane{display:none!important}
  .gx #pane-takeoff{display:block!important;height:auto!important;overflow:visible!important}
  body.print-design .app{display:none!important}
}

.gx .colrow{display:flex;gap:6px;align-items:center}.gx .colrow select{flex:1;min-width:0}.gx .colrow input[type=color]{width:42px;height:34px;padding:2px;border:1px solid var(--line,#d8d0bf);border-radius:6px;background:#fff;cursor:pointer}