:root{
  --paper:#ffffff;
  --ink:#111111;        /* proposed / new — black */
  --existing:#8a8a8a;   /* existing conditions — grey */
  --existing-soft:#bdbdbd;
  --grid:#ededed;
  --grid-major:#dcdcdc;
  --panel:#f4f4f2;
  --panel-edge:#d4d4ce;
  --accent:#1d1d1d;
  --ok:#1f7a34;
  --bad:#9e2b25;
  --warn:#8a6d1a;
  --mono:'SFMono-Regular',ui-monospace,'Consolas','Menlo',monospace;
  --sans:'Segoe UI',system-ui,-apple-system,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:#e7e7e3;
  overflow:hidden;
}
#app{display:flex;flex-direction:column;height:100vh;height:100dvh} /* dvh = true visible height on mobile (no off-screen bottom bar) */

/* ---------- Top bar ---------- */
#topbar{
  display:flex;align-items:center;gap:24px;
  padding:8px 16px;
  background:var(--panel);
  border-bottom:1px solid var(--panel-edge);
  flex:0 0 auto;
}
.brand{display:flex;flex-direction:column;line-height:1.1}
.logo{font-weight:800;letter-spacing:1px;font-size:18px}
.tagline{font-size:11px;color:var(--existing);letter-spacing:.5px}
#project-info{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0}
#project-name{font-weight:700;font-size:14px}
#project-goal{font-size:12px}
.muted{color:var(--existing)}

#budget-block{display:flex;gap:18px;align-items:center}
.budget-line{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums}
.budget-line .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--existing)}
.budget-line .val{font-family:var(--mono);font-size:15px;font-weight:600}
.budget-line.big .val{font-size:20px}
#budget-remaining.over{color:var(--bad)}
#budget-remaining.ok{color:var(--ok)}

/* ---------- Main layout ---------- */
#main{flex:1 1 auto;display:flex;min-height:0}

/* Right-hand toolbar: tools / actions / project */
#toolbar{
  flex:0 0 188px;order:2;
  background:var(--panel);
  border-left:1px solid var(--panel-edge);
  padding:10px;overflow-y:auto;
  display:flex;flex-direction:column;gap:14px;
}
#stage{order:1}
.tool-group{display:flex;flex-direction:column;gap:6px}
/* cost breakdown sits in the toolbar (static), not floating on the canvas */
#cost-breakdown{position:static;width:auto;box-shadow:none;flex:0 0 auto}

/* Materials: collapsible rounded card floating at the left of the stage */
.mats-card{left:12px;right:auto;top:12px;width:186px;max-height:calc(100% - 24px);display:flex;flex-direction:column;padding:8px 10px}
.mats-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.mats-head .group-title{margin:0}
#mats-collapse{
  border:1px solid var(--panel-edge);background:#fff;border-radius:5px;cursor:pointer;
  width:22px;height:22px;line-height:1;font-size:15px;color:var(--ink);padding:0;flex:0 0 auto;
}
#mats-collapse:hover{background:#efefec}
.mats-body{display:flex;flex-direction:column;min-height:0;margin-top:8px}
.mats-card.collapsed .mats-body{display:none}
.mat-search{
  font-family:var(--sans);font-size:12px;padding:6px 8px;margin-bottom:6px;
  border:1px solid var(--panel-edge);border-radius:5px;background:#fff;color:var(--ink);
}
#material-palette{display:flex;flex-direction:column;gap:6px;overflow-y:auto;min-height:0;padding-right:2px}
.group-title{
  font-size:10px;text-transform:uppercase;letter-spacing:1px;
  color:var(--existing);font-weight:700;margin-bottom:2px;
}
button.tool,button.action,#material-palette .mat{
  text-align:left;font-family:var(--sans);font-size:13px;
  padding:8px 10px;border:1px solid var(--panel-edge);
  background:#fff;border-radius:5px;cursor:pointer;color:var(--ink);
  transition:background .12s,border-color .12s;
}
button.tool:hover,button.action:hover,#material-palette .mat:hover{background:#efefec}
button.tool.active,#material-palette .mat.active{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
#material-palette .mat{display:flex;justify-content:space-between;align-items:center;gap:8px}
#material-palette .mat .price{font-family:var(--mono);font-size:11px;opacity:.7}
#material-palette .mat.active .price{opacity:.85}
button.action.validate{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}
button.action.validate:hover{background:#000}
button.action.test{background:#2b6cb0;color:#fff;border-color:#2b6cb0;font-weight:700}
button.action.test:hover{background:#21568c}
#live-toggle{display:flex;align-items:center;gap:6px;font-size:12px;color:#333;cursor:pointer;padding:2px 2px}
#live-toggle input{margin:0}
/* live-traffic simulation controls */
button.action#btn-traffic{font-weight:700}
button.action#btn-traffic.active{background:#b06a1a;color:#fff;border-color:#b06a1a}
#traffic-ctl{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#333;padding:2px 2px 4px}
#traffic-ctl label{display:flex;align-items:center;gap:6px;justify-content:space-between}
#traffic-ctl select{flex:1;font-size:12px;padding:2px 4px}
#traffic-ctl input[type=range]{flex:1;min-width:80px}
#traffic-weight-val,#traffic-speed-val{font-variant-numeric:tabular-nums;font-weight:700;color:#b06a1a;min-width:34px;text-align:right}
.traffic-transport{display:flex;gap:4px;justify-content:center}
.traffic-transport button{flex:1;min-height:26px;border:1px solid var(--line,#ccc);background:#f4f4f2;border-radius:5px;cursor:pointer;font-size:13px;padding:2px 0}
.traffic-transport button:hover{background:#e7e7e4}

/* stress results panel (below cost panel) */
.panel.stress{top:auto;bottom:12px;max-height:46%;overflow-y:auto;width:260px}
.panel.stress .verdict{font-weight:700;margin-bottom:6px}
.panel.stress .verdict.ok{color:var(--ok)}
.panel.stress .verdict.bad{color:var(--bad)}
.panel.stress .li{padding:3px 0;border-top:1px solid #eee;line-height:1.35}
.panel.stress .li.ok{color:var(--ok)}
.panel.stress .li.bad{color:var(--bad)}
.panel.stress .li.warn{color:var(--warn)}
.panel.cable-tension{left:12px;right:auto;top:auto;bottom:12px;width:240px}
.panel.cable-tension input[type=range]{width:100%;margin:2px 0}
.panel.cable-tension .cable-auto{display:block;margin-bottom:6px;font-size:12px}
.panel.cable-tension .cable-readout{margin-top:6px;font-size:11px;color:#555;line-height:1.45}
.panel.cable-tension .snap-warn{margin-top:5px;color:var(--bad);font-weight:700}
.panel.cable-tension .snap-warn.slack{color:var(--warn);font-weight:600}
.panel.cable-tension .cable-dia-row{margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid var(--panel-edge);font-size:12px}
.legend{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11px;color:#555}
.legend .bar{flex:1;height:9px;border-radius:5px;background:linear-gradient(90deg,#1f7a34,#b9c11f,#d98a1f,#c2453d)}
button.action.danger{color:var(--bad)}
/* Physics ON — make the toggle impossible to miss */
button.action#btn-drop{font-weight:700}
button.action#btn-drop.phys-on{background:var(--bad);color:#fff;border-color:var(--bad);box-shadow:0 0 0 2px rgba(158,43,37,.3);animation:physpulse 1.4s ease-in-out infinite}
@keyframes physpulse{0%,100%{box-shadow:0 0 0 2px rgba(158,43,37,.25)}50%{box-shadow:0 0 0 5px rgba(158,43,37,.12)}}
select#project-select{padding:7px;border:1px solid var(--panel-edge);border-radius:5px;font-size:13px;background:#fff}

/* ---------- Stage / canvas ---------- */
#stage{position:relative;flex:1 1 auto;min-width:0;background:#dadad6}
#board{display:block;width:100%;height:100%;cursor:crosshair;touch-action:none}
#hint{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  background:rgba(255,255,255,.9);border:1px solid var(--panel-edge);
  padding:5px 12px;border-radius:20px;font-size:12px;color:#444;
  pointer-events:none;white-space:nowrap;
}

/* ---------- Cost breakdown panel ---------- */
.panel{
  position:absolute;right:12px;top:12px;width:230px;
  background:rgba(255,255,255,.96);border:1px solid var(--panel-edge);
  border-radius:7px;padding:10px 12px;font-size:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.panel h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--existing)}
.panel .row{display:flex;justify-content:space-between;padding:2px 0;font-variant-numeric:tabular-nums}
.panel .row .v{font-family:var(--mono)}
.panel .row.total{border-top:1px solid var(--panel-edge);margin-top:6px;padding-top:6px;font-weight:700}
.hidden{display:none !important}

/* ---------- object-snap settings panel ---------- */
#snap-panel{max-width:240px}
#snap-panel .snap-opt{display:flex;align-items:center;gap:8px;font-size:12px;padding:5px 2px;cursor:pointer;color:#333}
#snap-panel .snap-opt input{margin:0;width:16px;height:16px}
#snap-panel .snap-actions{display:flex;gap:6px;margin-top:8px}
#snap-panel .snap-actions .action{flex:1;text-align:center;font-size:12px}
#btn-ortho.active{background:var(--ink);color:#fff;border-color:var(--ink);font-weight:700}

/* ---------- touch placement controls ---------- */
#touch-place,#touch-select{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;z-index:20;
  background:rgba(255,255,255,.95);border:1px solid var(--panel-edge);
  border-radius:30px;padding:8px 10px;box-shadow:0 6px 20px rgba(0,0,0,.18);
}
#touch-place #tp-hint{font-size:12px;color:#555;padding:0 4px;white-space:nowrap}
#touch-place button,#touch-select button{
  font-family:var(--sans);font-size:15px;font-weight:600;
  border:1px solid var(--panel-edge);border-radius:22px;background:#fff;color:var(--ink);
  padding:10px 18px;min-height:44px;cursor:pointer;
}
#touch-place #tp-place{background:var(--ink);color:#fff;border-color:var(--ink)}
#touch-select #ts-delete{background:var(--bad);color:#fff;border-color:var(--bad)}
@media (max-width:820px){ #touch-place #tp-hint{display:none} #touch-place,#touch-select{top:8px} }

/* Physics-on banner over the canvas */
#physics-banner{
  position:absolute;left:50%;top:10px;transform:translateX(-50%);z-index:25;
  background:var(--bad);color:#fff;font-weight:700;font-size:13px;letter-spacing:.2px;
  padding:8px 16px;border-radius:22px;box-shadow:0 6px 20px rgba(158,43,37,.4);
  pointer-events:none;white-space:nowrap;max-width:94%;text-align:center;
  animation:physpulse 1.4s ease-in-out infinite;
}
@media (max-width:820px){ #physics-banner{font-size:11px;white-space:normal} }

/* ---------- Status bar ---------- */
#statusbar{
  flex:0 0 auto;display:flex;gap:20px;align-items:center;
  padding:5px 14px;background:var(--panel);border-top:1px solid var(--panel-edge);
  font-size:12px;font-family:var(--mono);color:#444;
}
#statusbar .flex{flex:1 1 auto}
#status-msg{font-family:var(--sans)}
#status-msg.ok{color:var(--ok)}
#status-msg.bad{color:var(--bad)}
#status-msg.warn{color:var(--warn)}

/* ---------- Modal ---------- */
.modal{
  position:fixed;inset:0;background:rgba(20,20,20,.45);
  display:flex;align-items:center;justify-content:center;z-index:50;
}
.modal-card{
  background:#fff;border-radius:10px;padding:24px;max-width:520px;width:92%;
  box-shadow:0 18px 60px rgba(0,0,0,.3);
}
.modal-card h2{margin:0 0 12px}
.modal-card #modal-body{font-size:14px;line-height:1.5;color:#222}
.modal-card #modal-body ul{margin:8px 0;padding-left:20px}
.modal-card #modal-body .verdict{font-size:16px;font-weight:700;margin-bottom:8px}
.modal-card #modal-body .verdict.ok{color:var(--ok)}
.modal-card #modal-body .verdict.bad{color:var(--bad)}
.modal-card #modal-close{margin-top:16px}
.modal-card kbd{font-family:var(--mono);background:#eee;border:1px solid #ccc;border-bottom-width:2px;border-radius:4px;padding:1px 5px;font-size:11px}

/* ---------- touch devices: bigger tap targets ---------- */
@media (pointer:coarse){
  button.tool,button.action,#material-palette .mat,select#project-select{min-height:44px}
  #mats-collapse{width:30px;height:30px;font-size:18px}
  #modal-close{min-height:46px;font-size:15px}
}

/* ---------- mobile / narrow screens ---------- */
@media (max-width:820px){
  #topbar{gap:10px;padding:6px 10px;flex-wrap:wrap}
  .tagline{display:none}
  .logo{font-size:15px}
  #project-info{order:3;flex-basis:100%;min-width:0}
  #project-goal{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #budget-block{gap:12px;margin-left:auto}
  .budget-line .val{font-size:13px}
  .budget-line.big .val{font-size:16px}

  /* stage fills; toolbar drops to a horizontal scrolling strip at the bottom */
  #main{flex-direction:column}
  #stage{order:1;flex:1 1 auto;min-height:0}
  #toolbar{
    order:2;flex:0 0 auto;flex-direction:row;flex-wrap:nowrap;align-items:stretch;
    gap:8px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
    border-left:none;border-top:1px solid var(--panel-edge);padding:8px;
  }
  #toolbar .tool-group{display:contents}        /* buttons flow into the strip */
  #toolbar .group-title{display:none}
  #toolbar button.tool,#toolbar button.action{flex:0 0 auto;white-space:nowrap;min-width:74px;text-align:center}
  #live-toggle{flex:0 0 auto;white-space:nowrap;align-self:center}
  #toolbar select#project-select{flex:0 0 auto;min-width:130px}
  #cost-breakdown{display:none !important}      /* budget is in the top bar; load results show in the Test panel */

  /* materials + result panels become bottom sheets over the canvas */
  .mats-card{left:8px;right:8px;top:auto;bottom:8px;width:auto;max-height:44%}
  .panel{left:8px;right:8px;width:auto;max-width:none}
  .panel.stress{top:auto;bottom:8px;max-height:52%}

  #hint{font-size:11px;max-width:92%;white-space:normal;text-align:center;top:6px}
  #statusbar{gap:10px;padding:4px 8px;font-size:11px}
  #status-coords,#status-snap{display:none}
  .modal-card{width:94%;padding:18px;max-height:86vh;overflow:auto}
}