/* ===== plan3d.css — 3D floor-plan viewer tool ===== */
.p3-wrap{
  --p3-ink:#14161a; --p3-ink-2:#1c1f24; --p3-teal:#2f9fb8; --p3-teal-dk:#217e93;
  --p3-teal-lt:#6fc3d6; --p3-line:rgba(20,22,26,.10); --p3-paper:#fff; --p3-bg:#f6f5f2;
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.25rem;
  align-items:stretch; margin-top:1.5rem;
}
@media (max-width:900px){ .p3-wrap{ grid-template-columns:1fr; } }

/* --- canvas / stage --- */
.p3-stage{
  position:relative; background:#ffffff;
  border:1px solid var(--p3-line); border-radius:16px; overflow:hidden;
  min-height:460px; box-shadow:0 18px 46px -28px rgba(20,22,26,.4);
}
.p3-canvas-host{ position:absolute; inset:0; }
.p3-canvas-host canvas{ display:block; width:100%; height:100%; touch-action:none; }
@media (max-width:900px){ .p3-stage{ min-height:60vh; } }

/* inside view — "you are here" badge over the canvas */
.p3-fp-badge{
  position:absolute; left:12px; top:12px; z-index:3; display:none;
  max-width:calc(100% - 24px);
  background:rgba(20,22,26,.78); color:#fff; font-size:.78rem; font-weight:600;
  padding:.4rem .75rem; border-radius:999px; letter-spacing:.01em;
}
.p3-fp-badge.is-on{ display:block; }

/* dragging inside the room turns your head — show that on the cursor */
.p3-canvas-host canvas{ cursor:default; }
.p3-canvas-host canvas.is-looking{ cursor:grabbing; }

/* inside view — standpoint picker in the sidebar */
.p3-fp-bar{ display:none; margin-top:.9rem; }
.p3-fp-bar.is-on{ display:block; }
.p3-fp-label{
  display:block; margin:0 0 .35rem;
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#5b616b;
}
.p3-fp-row{ display:flex; gap:.4rem; align-items:stretch; }
.p3-fp-select{
  flex:1 1 auto; min-width:0;
  font:inherit; font-size:.85rem; color:var(--p3-ink);
  padding:.5rem .6rem; background:var(--p3-paper);
  border:1px solid var(--p3-line); border-radius:9px; cursor:pointer;
}
.p3-fp-select:focus-visible{ outline:3px solid var(--p3-teal-lt); outline-offset:2px; }
.p3-fp-step{
  flex:0 0 auto; width:34px;
  font:inherit; font-size:1.05rem; line-height:1; color:var(--p3-ink-2);
  background:var(--p3-paper); border:1px solid var(--p3-line);
  border-radius:9px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.p3-fp-step:hover{ background:var(--p3-bg); border-color:var(--p3-teal); }
.p3-fp-step:focus-visible{ outline:3px solid var(--p3-teal-lt); outline-offset:2px; }

/* selection readout */
.p3-selbar{
  position:absolute; left:12px; bottom:12px; z-index:3; max-width:calc(100% - 24px);
  background:rgba(255,255,255,.92); color:var(--p3-ink); border:1px solid var(--p3-line);
  border-radius:10px; padding:.5rem .7rem; font-size:.8rem; line-height:1.3;
  box-shadow:0 6px 18px -10px rgba(20,22,26,.5); display:none;
}
.p3-selbar.is-on{ display:block; }
.p3-selbar b{ color:var(--p3-teal-dk); }

/* loader / error */
.p3-msg{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:2rem; z-index:5; color:var(--p3-ink-2); font-size:.95rem;
}
.p3-msg--err{ background:var(--p3-bg); }
.p3-spinner{
  width:34px; height:34px; border-radius:50%; border:3px solid rgba(47,159,184,.25);
  border-top-color:var(--p3-teal); animation:p3spin .8s linear infinite; margin:0 auto .8rem;
}
@keyframes p3spin{ to{ transform:rotate(360deg); } }

/* --- sidebar --- */
.p3-side{ display:flex; flex-direction:column; gap:1rem; min-width:0; }
.p3-card{
  background:var(--p3-paper); border:1px solid var(--p3-line); border-radius:14px;
  padding:1rem 1.05rem; box-shadow:0 10px 30px -22px rgba(20,22,26,.45);
}
.p3-card h3{
  font-family:"Space Grotesk",system-ui,sans-serif; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:var(--p3-teal-dk);
  margin:0 0 .7rem; display:flex; align-items:center; gap:.4rem;
}

/* segmented toggle */
.p3-seg{ display:flex; background:var(--p3-bg); border:1px solid var(--p3-line); border-radius:999px; padding:3px; }
.p3-seg button{
  flex:1; border:0; background:transparent; cursor:pointer; padding:.5rem .4rem;
  border-radius:999px; font:600 .86rem "Inter",system-ui,sans-serif; color:var(--p3-ink-2);
  transition:background .2s,color .2s;
}
.p3-seg button.is-on{ background:var(--p3-ink); color:#fff; }

/* pill buttons */
.p3-btns{ display:flex; flex-wrap:wrap; gap:.5rem; }
.p3-btn{
  border:1px solid var(--p3-line); background:var(--p3-paper); color:var(--p3-ink);
  border-radius:999px; padding:.5rem .9rem; cursor:pointer;
  font:600 .84rem "Inter",system-ui,sans-serif; transition:border-color .2s,background .2s,color .2s;
  display:inline-flex; align-items:center; gap:.4rem;
}
.p3-btn:hover{ border-color:var(--p3-ink); }
/* Preset-view framings row */
.p3-presets{ margin-top:.7rem; }
.p3-preset-row{ display:flex; gap:.5rem; margin-top:.35rem; }
.p3-preset-row .p3-btn{ flex:1 1 0; justify-content:center; padding:.5rem .5rem; }
.p3-btn.is-on{ background:var(--p3-teal); border-color:var(--p3-teal); color:#fff; }
.p3-btn--primary{ background:var(--p3-teal); border-color:var(--p3-teal); color:#fff; }
.p3-btn--primary:hover{ background:var(--p3-teal-dk); border-color:var(--p3-teal-dk); }
.p3-btn--cta{
  width:100%; justify-content:center; background:var(--p3-ink); border-color:var(--p3-ink);
  color:#fff; padding:.75rem 1rem; font-size:.92rem;
}
.p3-btn--cta:hover{ background:var(--p3-teal-dk); border-color:var(--p3-teal-dk); }

/* paint cycle hint chips */
.p3-legend{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.35rem; }
.p3-chip{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem; color:var(--p3-ink-2); }
.p3-dot{ width:12px; height:12px; border-radius:3px; border:1px solid rgba(20,22,26,.2); }
.p3-dot--glass{ background:rgba(120,190,210,.55); }
.p3-dot--gyp{ background:#e7e3db; }
.p3-dot--door{ background:#14161a; }

/* takeoff panel */
.p3-take{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem .9rem; }
.p3-take .p3-metric{ display:flex; flex-direction:column; gap:.1rem; }
.p3-metric .p3-mv{
  font-family:"Space Grotesk",system-ui,sans-serif; font-weight:700; font-size:1.32rem;
  color:var(--p3-ink); line-height:1;
}
.p3-metric .p3-ml{ font-size:.72rem; color:var(--p3-ink-2); opacity:.8; letter-spacing:.01em; }
.p3-metric--wide{ grid-column:1 / -1; border-top:1px dashed var(--p3-line); padding-top:.55rem; }

.p3-note{
  font-size:.76rem; line-height:1.45; color:var(--p3-ink-2); opacity:.9;
  background:var(--p3-bg); border:1px solid var(--p3-line); border-radius:10px; padding:.7rem .8rem;
}
.p3-note strong{ color:var(--p3-ink); }
.p3-note a{ color:var(--p3-teal-dk); font-weight:600; }

.p3-help{ font-size:.78rem; color:var(--p3-ink-2); line-height:1.5; margin:.2rem 0 0; }
.p3-help kbd{
  font:600 .72rem "Inter",monospace; background:var(--p3-bg); border:1px solid var(--p3-line);
  border-bottom-width:2px; border-radius:5px; padding:.05rem .35rem; color:var(--p3-ink);
}

/* =====================================================================
   Two-path chooser — sits above the tool, additive (tool stays visible)
   ===================================================================== */
.p3-paths{
  --p3-ink:#14161a; --p3-ink-2:#1c1f24; --p3-teal:#2f9fb8; --p3-teal-dk:#217e93;
  --p3-teal-lt:#6fc3d6; --p3-line:rgba(20,22,26,.10); --p3-paper:#fff; --p3-bg:#f6f5f2;
  display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:stretch; gap:1.1rem; margin:0 0 clamp(1.75rem,3.5vw,2.75rem);
}

/* the "or" divider */
.p3-paths-or{
  display:grid; place-items:center; position:relative; width:2.4rem; color:var(--p3-ink-2);
}
.p3-paths-or::before{
  content:""; position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:linear-gradient(180deg,transparent,var(--p3-line) 14%,var(--p3-line) 86%,transparent);
}
.p3-paths-or span{
  position:relative; background:var(--p3-bg); border:1px solid var(--p3-line);
  border-radius:999px; width:2.4rem; height:2.4rem; display:grid; place-items:center;
  font:600 .72rem "Inter",system-ui,sans-serif; text-transform:uppercase; letter-spacing:.1em;
  color:var(--p3-ink-2);
}

/* --- the two cards --- */
.p3-path{
  display:flex; flex-direction:column; gap:.85rem; min-width:0;
  background:var(--p3-paper); border:1px solid var(--p3-line); border-radius:18px;
  padding:clamp(1.1rem,2.2vw,1.6rem);
  box-shadow:0 18px 46px -30px rgba(20,22,26,.5);
  transition:border-color .25s, box-shadow .25s, opacity .25s;
}
.p3-path:hover{ border-color:rgba(20,22,26,.2); }
#p3-path-upload{
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(47,159,184,.09), transparent 62%),
    var(--p3-paper);
  border-color:rgba(47,159,184,.32);
}

.p3-path-eyebrow{
  font:600 .7rem "Inter",system-ui,sans-serif; text-transform:uppercase; letter-spacing:.16em;
  color:var(--p3-teal-dk); display:inline-flex; align-items:center; gap:.5rem;
}
.p3-path-eyebrow::before{ content:""; width:22px; height:1.5px; background:var(--p3-teal); }

.p3-path-head{ display:flex; align-items:flex-start; gap:.85rem; }
.p3-path-ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background:var(--p3-ink); color:#fff;
}
#p3-path-upload .p3-path-ico{ background:var(--p3-teal); }
.p3-path-title{
  font-family:"Space Grotesk",system-ui,sans-serif; font-size:1.28rem; font-weight:600;
  line-height:1.15; letter-spacing:-.02em; color:var(--p3-ink); margin:0;
}
.p3-path-sub{ margin:.3rem 0 0; font-size:.92rem; line-height:1.45; color:var(--p3-ink-2); opacity:.85; }
.p3-path-body{ margin:0; font-size:.86rem; line-height:1.6; color:var(--p3-ink-2); opacity:.85; }

.p3-path-list{ list-style:none; margin:0; padding:0; display:grid; gap:.4rem; }
.p3-path-list li{
  position:relative; padding-left:1.35rem; font-size:.84rem; line-height:1.5; color:var(--p3-ink-2);
}
.p3-path-list li::before{
  content:""; position:absolute; left:.15rem; top:.52em; width:6px; height:6px; border-radius:2px;
  background:var(--p3-teal);
}

.p3-path-action{ margin-top:auto; align-self:stretch; }

.p3-path-fine{
  margin:0; font-size:.72rem; line-height:1.45; color:var(--p3-ink-2); opacity:.72;
}
.p3-path-priv{
  margin:0; font-size:.76rem; line-height:1.45; color:var(--p3-teal-dk);
  display:flex; align-items:flex-start; gap:.4rem;
}
.p3-path-priv svg{ flex:0 0 auto; margin-top:.15rem; }
.p3-path-priv strong{ color:var(--p3-teal-dk); }
.p3-path-fallback{
  margin:0; font-size:.76rem; line-height:1.5; color:var(--p3-ink-2);
  background:var(--p3-bg); border:1px solid var(--p3-line); border-radius:10px; padding:.6rem .7rem;
}
.p3-path-fallback a{ color:var(--p3-teal-dk); font-weight:600; }

/* --- dropzone --- */
.p3-drop{
  display:flex; flex-direction:column; align-items:center; gap:.5rem; text-align:center;
  padding:1.3rem 1rem; border-radius:14px; cursor:pointer;
  border:1.5px dashed rgba(47,159,184,.55); background:rgba(47,159,184,.05);
  color:var(--p3-ink); transition:border-color .2s, background .2s, transform .2s;
}
.p3-drop:hover{ border-color:var(--p3-teal); background:rgba(47,159,184,.1); }
.p3-drop:focus-visible{ outline:2px solid var(--p3-teal); outline-offset:3px; }
.p3-drop.is-drag{
  border-color:var(--p3-teal); border-style:solid; background:rgba(47,159,184,.16);
  transform:translateY(-2px);
}
.p3-drop-ico{ color:var(--p3-teal-dk); display:block; }
.p3-drop-title{
  font-family:"Space Grotesk",system-ui,sans-serif; font-weight:600; font-size:.98rem;
  color:var(--p3-ink);
}
.p3-drop-cta{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--p3-ink); color:#fff; border-radius:999px; padding:.5rem .95rem;
  font:600 .84rem "Inter",system-ui,sans-serif;
}
.p3-drop:hover .p3-drop-cta, .p3-drop.is-drag .p3-drop-cta{ background:var(--p3-teal-dk); }
.p3-drop-hint{ font-size:.72rem; color:var(--p3-ink-2); opacity:.7; }

/* --- progress --- */
.p3-prog{ display:grid; gap:.45rem; }
.p3-prog-track{
  height:8px; border-radius:999px; background:var(--p3-bg);
  border:1px solid var(--p3-line); overflow:hidden;
}
.p3-prog-bar{
  display:block; height:100%; width:0%; border-radius:999px;
  background:linear-gradient(90deg,var(--p3-teal),var(--p3-teal-lt));
  transition:width .3s ease;
}
.p3-prog-msg{ margin:0; font-size:.78rem; color:var(--p3-ink-2); line-height:1.4; }

/* --- upload error --- */
.p3-uerr{
  margin:0; font-size:.82rem; line-height:1.5; color:#8a2b21; font-weight:500;
  background:#fdf1ef; border:1px solid rgba(170,60,45,.28); border-left-width:3px;
  border-radius:10px; padding:.65rem .8rem .65rem 2.15rem; position:relative;
}
.p3-uerr::before{
  content:"!"; position:absolute; left:.7rem; top:.7rem; width:1.05rem; height:1.05rem;
  border-radius:50%; background:#c0402f; color:#fff; font:700 .72rem "Inter",system-ui,sans-serif;
  display:grid; place-items:center;
}
.p3-uerr a{ color:#8a2b21; font-weight:600; text-decoration:underline; }

/* --- busy state (path A while parsing) --- */
.p3-path.is-busy{ cursor:progress; border-color:rgba(47,159,184,.5); }
.p3-path.is-busy .p3-drop{
  pointer-events:none; opacity:.5; filter:saturate(.5);
}
.p3-path.is-busy .p3-prog-bar{
  background-image:linear-gradient(90deg,var(--p3-teal),var(--p3-teal-lt),var(--p3-teal));
  background-size:200% 100%; animation:p3prog 1.2s linear infinite;
}
@keyframes p3prog{ to{ background-position:-200% 0; } }
@media (prefers-reduced-motion:reduce){
  .p3-path.is-busy .p3-prog-bar{ animation:none; }
  .p3-drop, .p3-prog-bar{ transition:none; }
}

/* --- hidden guards (display rules must not beat the hidden attribute) --- */
.p3-paths [hidden],
.p3-prog[hidden], .p3-uerr[hidden], .p3-path[hidden], .p3-drop[hidden],
.p3-paths-or[hidden], #p3-tool[hidden]{ display:none!important; }

/* --- responsive --- */
@media (max-width:900px){
  .p3-paths{ grid-template-columns:1fr; gap:.9rem; }
  .p3-paths-or{ width:auto; height:2.4rem; }
  .p3-paths-or::before{
    top:50%; bottom:auto; left:0; right:0; width:auto; height:1px;
    background:linear-gradient(90deg,transparent,var(--p3-line) 14%,var(--p3-line) 86%,transparent);
  }
  .p3-path-title{ font-size:1.16rem; }
}

/* ===== Glass palette — pick what a click places ======================== */
.p3-pal{ margin-top:.8rem; }
.p3-pal:first-of-type{ margin-top:.2rem; }
.p3-pal-label{
  display:block; margin-bottom:.35rem;
  font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#5b616b;
}
.p3-pal-row{ display:flex; flex-wrap:wrap; gap:.35rem; }
.p3-pal-btn{
  display:inline-flex; align-items:center; gap:.4rem;
  font:inherit; font-size:.78rem; font-weight:500; line-height:1;
  color:var(--p3-ink-2); background:var(--p3-paper);
  padding:.45rem .6rem;
  border:1px solid var(--p3-line); border-radius:8px; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.p3-pal-btn:hover{ border-color:var(--p3-teal); background:var(--p3-bg); }
.p3-pal-btn:focus-visible{ outline:3px solid var(--p3-teal-lt); outline-offset:2px; }
.p3-pal-btn.is-on{
  color:#fff; background:var(--p3-teal-dk); border-color:var(--p3-teal-dk);
}

/* little material swatches inside the palette buttons */
.p3-sw{
  width:12px; height:12px; border-radius:3px; flex:0 0 auto;
  border:1px solid rgba(20,22,26,.25);
}
.p3-pal-btn.is-on .p3-sw{ border-color:rgba(255,255,255,.55); }
.p3-sw--clear  { background:linear-gradient(135deg,#dff2f7,#7cc9dc); }
.p3-sw--frosted{ background:linear-gradient(135deg,#f4f9fb,#cfe0e6); }
.p3-sw--tinted { background:linear-gradient(135deg,#5d7d8a,#2b444f); }
.p3-sw--reeded {
  background:repeating-linear-gradient(90deg,#eaf5f8 0 2px,#a8c8d2 2px 4px);
}
.p3-sw--none   { background:transparent; border-style:dashed; }
.p3-sw--black  { background:#14171b; }
.p3-sw--silver { background:linear-gradient(135deg,#e3e6e9,#9aa2aa); }

/* the glass spec rows grey out when you're placing a solid wall */
.p3-spec{ transition:opacity .15s ease; }
.p3-spec.is-off{ opacity:.38; pointer-events:none; }

/* ===== Takeoff: per-spec breakdown ==================================== */
.p3-bd:empty{ display:none; }
.p3-bd{
  margin-top:.85rem; padding-top:.75rem;
  border-top:1px solid var(--p3-line);
}
.p3-bd-head{
  margin:.55rem 0 .25rem;
  font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#5b616b;
}
.p3-bd-head:first-child{ margin-top:0; }
.p3-bd-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:.75rem;
  font-size:.82rem; color:var(--p3-ink-2); padding:.12rem 0;
}
.p3-bd-row b{ color:var(--p3-ink); font-variant-numeric:tabular-nums; }