@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0b1220;
  --mut:#64748b;
  --bg:#f6f7f9;
  --panel:#ffffff;
  --stroke:rgba(15,23,42,0.10);
  --stroke2:rgba(15,23,42,0.14);
  --shadow:0 10px 30px rgba(15,23,42,0.08);

  --blue:#0ea5e9; --blueDark:#065f87;
  --red:#ef4444;
  --orange:#f97316; --orangeDark:#c2410c;
  --yellow:#facc15; --yellowDark:#b45309;
  --green:#10b981; --greenDark:#047857;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  background:var(--bg);
  font-family:Inter,-apple-system,BlinkMacSystemFont,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

.page{max-width:1200px;margin:22px auto;padding:0 16px}
.layout{display:grid;grid-template-columns:1.35fr .95fr;gap:18px}
@media (max-width:1000px){
  .page{margin:12px auto;padding:0 10px}
  .layout{grid-template-columns:1fr;gap:12px}
}

/* Map */
#mapwrap{
  position:relative;
  height:70vh;
  min-height:520px;
  border-radius:22px;
  overflow:hidden;
  background:#e9edf3;
  border:1px solid var(--stroke);
  box-shadow:var(--shadow);
}
#map{position:absolute;inset:0}
.mapboxgl-control-container{z-index:100000;pointer-events:auto}

.overlaywrap{position:absolute;inset:0;pointer-events:none}
canvas.overlay{position:absolute;inset:0;pointer-events:none}

/* Interaction layer */
#hitlayer{position:absolute;inset:0;cursor:crosshair;z-index:10;pointer-events:none;touch-action:none}
#hitlayer.active{pointer-events:auto}

/* Pin only on step 1 */
#centerPin{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);
  width:30px;height:30px;z-index:11;pointer-events:none;display:none;
}
#centerPin::before{
  content:"";
  position:absolute;left:50%;top:2px;
  width:19px;height:19px;
  background:#111;
  border-radius:50% 50% 50% 0;
  transform:translateX(-50%) rotate(-45deg);
  box-shadow:0 10px 18px rgba(0,0,0,0.22);
}
#centerPin::after{
  content:"";position:absolute;left:50%;top:7px;transform:translateX(-50%);
  width:6px;height:6px;background:#fff;border-radius:50%;
}

/* Panel */
.panel{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:22px;
  padding:20px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}

.steps{display:flex;gap:10px;margin-bottom:16px}
.stepbar{flex:1;height:10px;border-radius:999px;background:rgba(15,23,42,0.10);cursor:pointer}
.stepbar.active{background:#111}

h1{margin:0 0 6px;font-size:24px;letter-spacing:-0.01em}
.sub{color:var(--mut);font-size:14px;margin-bottom:16px;line-height:1.4}

.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.row-1col{display:grid;grid-template-columns:1fr;gap:12px}
@media (max-width:700px){
  .row{grid-template-columns:1fr}
}

.field{display:flex;flex-direction:column;gap:8px}
.field label{font-weight:600;font-size:13px;color:#334155}
.field input,.field select{
  width:100%;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid var(--stroke2);
  background:#fff;
  font-size:16px;
  outline:none;
}
.field input:focus,.field select:focus{box-shadow:0 0 0 4px rgba(0,0,0,0.08);border-color:rgba(0,0,0,0.35)}

.toolbtn{
  appearance:none;
  border:1px solid var(--stroke2);
  background:#fff;
  border-radius:14px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:600;
}
.toolbtn:active{transform:translateY(1px)}
.toolbtn.active,.toolbtn.dark{background:#111;color:#fff;border-color:#111}

.palette{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--stroke2);
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
  user-select:none;
  font-weight:600;
}
.chip[draggable="true"]{cursor:grab}
.chip.active{background:#111;color:#fff;border-color:#111}
.dot{width:14px;height:14px;border-radius:50%}

#roofList{display:flex;flex-direction:column;gap:10px}
.roofItem{
  display:flex;align-items:center;justify-content:space-between;
  border:1px solid var(--stroke2);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
}
.muted{opacity:.55}

.hintbar{color:var(--mut);font-size:12px;margin-top:6px;line-height:1.35}

/* Footer */
.footbar{display:flex;justify-content:space-between;align-items:center;margin-top:16px;gap:10px;flex-wrap:wrap}
.leftBtns,.rightBtns{display:flex;gap:8px;align-items:center;flex-wrap:wrap}

.pill{
  appearance:none;
  border:none;
  background:#111;
  color:#fff;
  border-radius:999px;
  padding:12px 22px;
  font-weight:700;
  cursor:pointer;
}
.pill.ghost{background:#fff;color:#111;border:1px solid #111}
.pill:active{transform:translateY(1px)}

/* Delete */
#deleteBtn{position:absolute;z-index:12;display:none;background:#111;color:#fff;border:none;border-radius:10px;padding:4px 7px;font-size:12px;cursor:pointer}

/* Map error */
#map-error{position:absolute;top:10px;left:10px;z-index:9999;padding:10px 12px;border-radius:12px;background:#fee2e2;color:#991b1b;border:1px solid #fecaca;font-weight:600}

/* Prices */
#calcOut{margin-top:12px}
table.pris{width:100%;border-collapse:separate;border-spacing:0 6px}
table.pris th,table.pris td{padding:6px}
table.pris th{text-align:left}
table.pris td:last-child{text-align:right}
.subtotal{margin-top:10px;border-top:1px dashed rgba(15,23,42,0.18);padding-top:8px}

.priceCard{
  border:1px solid var(--stroke2);
  border-radius:18px;
  padding:14px;
  background:#fff;
}
.priceCard .kicker{color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.priceCard .bigPrice{font-size:34px;font-weight:800;letter-spacing:-0.02em;margin:6px 0 2px}
.priceCard .fineprint{color:var(--mut);font-size:13px;margin-bottom:12px}
.priceCard .priceGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;font-size:14px}

/* Mobile tuning */
@media (max-width:700px){
  #mapwrap{position:sticky;top:0;z-index:50;height:58vh;min-height:380px}
  .panel{padding:14px}
  h1{font-size:22px}
  .sub{font-size:13px}

  /* Make chips very finger-friendly */
  .chip{padding:12px 14px}
  .dot{width:16px;height:16px}
}