/* ============================================================
   PROBUILD+ MODULE (c): "Inside a façade" (pb-facade-layers.js)
   Self-contained: every rule is scoped to .pbm-fac.
   ============================================================ */
.pbm-fac{
  --pbm-o:var(--orange,#ff5b00);
  --pbm-ob:var(--orange-bright,#ff9244);
  --pbm-line:var(--line,rgba(255,255,255,.08));
  --pbm-line2:var(--line-strong,rgba(255,255,255,.14));
  --pbm-muted:var(--muted,#9a9aa6);
  --pbm-ease:var(--ease,cubic-bezier(.22,.61,.36,1));
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(1.2rem,3vw,2.8rem); align-items:center;
}
.pbm-fac__fallback{ grid-column:1 / -1; }
.pbm-fac__fallback a{ color:var(--pbm-ob); text-decoration:underline; }

/* ---- the drawing ---- */
.pbm-fac__figure{
  position:relative; margin:0; border-radius:20px; overflow:hidden;
  border:1px solid var(--pbm-line);
  background:
    radial-gradient(70% 55% at 55% 45%, rgba(255,91,0,.10), transparent 70%),
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--bg-2,#0e0e12);
}
.pbm-fac__svg{ display:block; width:100%; height:auto; max-height:640px; margin-inline:auto; overflow:visible; }
.pbm-fac__cap{
  position:absolute; left:1rem; bottom:.85rem;
  font-family:var(--font-mono,monospace); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2,#6c6c78);
}
.pbm-fac__ground path{ fill:rgba(0,0,0,.35); filter:blur(0); }

.pbm-fac__layer{
  cursor:pointer;
  transition:transform .9s var(--pbm-ease), opacity .45s var(--pbm-ease);
  transition-delay:calc((5 - var(--i,0)) * 45ms), 0s;
}
.pbm-fac__svg.is-closed .pbm-fac__layer{ transform:translate(var(--dx), var(--dy)); opacity:0; }
.pbm-fac__svg.is-closed .pbm-fac__layer--structure{ opacity:1; }
.pbm-fac__layer.is-on{ transform:translate(-14px,-8px); transition-delay:0s; }
.pbm-fac__svg.has-sel .pbm-fac__layer:not(.is-on){ opacity:.5; }
.pbm-fac__svg.has-sel .pbm-fac__layer:not(.is-on):hover{ opacity:.8; }
.pbm-fac__layer--joints.is-on{ transform:none; }
.pbm-fac__svg.has-sel .pbm-fac__layer--joints:not(.is-on){ opacity:.7; }

/* artwork strokes keep their width on the skewed planes */
.pbm-fac__svg path, .pbm-fac__svg rect{ vector-effect:non-scaling-stroke; }
.pbm-fac__rebar{ fill:none; stroke:rgba(255,146,68,.32); stroke-width:1.4; stroke-dasharray:7 5; }
.pbm-fac__lap{ fill:none; stroke:rgba(255,255,255,.13); stroke-width:1; stroke-dasharray:10 6; }
.pbm-fac__winedge{ fill:none; stroke:rgba(0,0,0,.55); stroke-width:1.5; }
.pbm-fac__board{ fill:none; stroke:rgba(0,0,0,.45); stroke-width:1.4; }
.pbm-fac__rail{ fill:#5c5c69; stroke:rgba(255,255,255,.22); stroke-width:.8; }
.pbm-fac__bracket{ fill:#757584; }
.pbm-fac__carrier{ fill:none; stroke:#3e3e49; stroke-width:4; }
.pbm-fac__panelrect{ stroke:rgba(255,255,255,.1); stroke-width:.8; }
.pbm-fac__frame{ fill:rgba(20,28,40,.35); stroke:#6a6a77; stroke-width:2.2; }
.pbm-fac__joint{ fill:none; stroke:rgba(10,10,13,.85); stroke-width:2; }
.pbm-fac__seal{ fill:none; stroke:rgba(255,200,160,.7); stroke-width:3; stroke-linejoin:round; stroke-dasharray:2 3; }
.pbm-fac__hit{ fill:none; stroke:transparent; stroke-width:14; pointer-events:stroke; }
.pbm-fac__layer--fixings .pbm-fac__rail, .pbm-fac__layer--fixings .pbm-fac__bracket{ pointer-events:all; }
.pbm-fac__edge{ fill:none; stroke:var(--pbm-o); stroke-width:2; opacity:0; transition:opacity .35s var(--pbm-ease); pointer-events:none; }
.pbm-fac__layer.is-on .pbm-fac__edge{ opacity:1; filter:drop-shadow(0 0 6px rgba(255,91,0,.85)); }
.pbm-fac__layer.is-on .pbm-fac__rebar{ stroke:var(--pbm-ob); }
.pbm-fac__layer.is-on .pbm-fac__joint{ stroke:var(--pbm-ob); stroke-width:2.6; filter:drop-shadow(0 0 4px rgba(255,91,0,.9)); }
.pbm-fac__layer.is-on .pbm-fac__seal{ stroke:#fff; stroke-width:3.4; }
.pbm-fac__layer.is-on .pbm-fac__rail{ fill:#6b6b78; }
.pbm-fac__layer--joints.is-on .pbm-fac__edge{ opacity:.35; }
@media (hover:hover){
  .pbm-fac__layer:hover .pbm-fac__edge{ opacity:.55; }
}

.pbm-fac__mark circle{ fill:#0b0b0e; stroke:rgba(255,255,255,.35); stroke-width:1; transition:fill .3s, stroke .3s; }
.pbm-fac__mark text{ font:700 9.5px/1 var(--font-mono,monospace); fill:#fff; letter-spacing:.02em; pointer-events:none; }
.pbm-fac__layer.is-on .pbm-fac__mark circle{ fill:var(--pbm-o); stroke:var(--pbm-o); }
.pbm-fac__layer.is-on .pbm-fac__mark text{ fill:#0a0a0d; }

/* ---- layer buttons + detail ---- */
.pbm-fac__side-col{ min-width:0; }
.pbm-fac__tabs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5rem; margin-bottom:1rem; }
.pbm-fac__tab{
  -webkit-appearance:none; appearance:none; font:inherit; cursor:pointer; text-align:left;
  display:flex; align-items:center; gap:.7rem; min-height:50px; padding:.7rem .85rem;
  border-radius:12px; border:1px solid var(--pbm-line2); background:rgba(255,255,255,.025); color:var(--text,#f4f4f6);
  font-family:var(--font-display,system-ui); font-weight:600; font-size:.95rem; line-height:1.2;
  transition:border-color .25s var(--pbm-ease), background .25s var(--pbm-ease);
}
.pbm-fac__n{ font-family:var(--font-mono,monospace); font-size:.72rem; color:var(--pbm-ob); letter-spacing:.08em; }
.pbm-fac__tab:hover{ border-color:rgba(255,255,255,.3); }
.pbm-fac__tab[aria-selected="true"]{
  border-color:rgba(255,91,0,.65); background:linear-gradient(115deg, rgba(255,91,0,.16), rgba(255,91,0,.03) 75%);
}
.pbm-fac__tab[aria-selected="true"] .pbm-fac__n{ color:#fff; }
.pbm-fac__tab:focus-visible{ outline:2px solid var(--pbm-ob); outline-offset:2px; }

.pbm-fac__panel{
  position:relative; border-radius:18px; border:1px solid var(--pbm-line2);
  background:linear-gradient(165deg, var(--surface,#131318), var(--bg-2,#0e0e12));
  padding:clamp(1.3rem,2.4vw,1.9rem);
}
.pbm-fac__panel[hidden]{ display:none; }
.pbm-fac__panel:focus-visible{ outline:2px solid var(--pbm-ob); outline-offset:3px; }
.pbm-fac__panel > *{ animation:pbmFacIn .5s var(--pbm-ease) both; }
.pbm-fac__panel > *:nth-child(2){ animation-delay:.04s; }
.pbm-fac__panel > *:nth-child(3){ animation-delay:.08s; }
.pbm-fac__panel > *:nth-child(4){ animation-delay:.12s; }
.pbm-fac__panel > *:nth-child(5){ animation-delay:.16s; }
.pbm-fac__tag{ font-family:var(--font-mono,monospace); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--pbm-ob); margin-bottom:.5rem; }
.pbm-fac__name{ font-family:var(--font-display,system-ui); font-weight:700; font-size:clamp(1.4rem,2.2vw,1.8rem); letter-spacing:-.02em; line-height:1.1; color:#fff; margin-bottom:.6rem; }
.pbm-fac__why{ color:rgba(255,255,255,.88); font-size:1.02rem; line-height:1.5; padding-left:.9rem; border-left:2px solid var(--pbm-o); margin-bottom:1.1rem; }
.pbm-fac__dl{ display:grid; gap:.9rem; margin:0; }
.pbm-fac__dl dt{ font-family:var(--font-mono,monospace); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2,#6c6c78); margin-bottom:.25rem; }
.pbm-fac__dl dd{ margin:0; color:var(--pbm-muted); font-size:.95rem; line-height:1.55; }
.pbm-fac__more{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.65rem; padding-block:.55rem; /* tap area */
  font-family:var(--font-mono,monospace); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:var(--pbm-ob);
}
.pbm-fac__more:hover{ color:#fff; }
.pbm-fac__more svg{ transition:transform .3s var(--pbm-ease); }
.pbm-fac__more:hover svg, .pbm-fac__more:focus-visible svg{ transform:translateX(4px); }
.pbm-fac__more:focus-visible{ outline:2px solid var(--pbm-ob); outline-offset:4px; border-radius:4px; }

@keyframes pbmFacIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

@media (max-width:960px){
  .pbm-fac{ grid-template-columns:1fr; }
  .pbm-fac__svg{ max-height:520px; }
}
@media (max-width:560px){
  .pbm-fac__figure{ border-radius:16px; }
  .pbm-fac__tabs{ gap:.4rem; }
  .pbm-fac__tab{ min-height:46px; padding:.6rem .7rem; font-size:.88rem; gap:.5rem; }
  .pbm-fac__panel{ border-radius:16px; padding:1.25rem 1.1rem 1.35rem; }
  .pbm-fac__cap{ left:.8rem; bottom:.6rem; font-size:.6rem; }
}
@media (prefers-reduced-motion:reduce){
  .pbm-fac *{ animation:none !important; transition:none !important; }
}