/* TruSim bay explorer — brand: Forest #1E4D3D, Cream #F5F3EC, Amber #D9933B accents.
   Flat color, no glows, gradients or drop shadows. */
#bay-explorer { height: var(--bx-h, clamp(440px, 66vw, 820px)) !important; }
.bx-host, .bx.bx-host { position: absolute; left: 0; top: 0; z-index: 1; }
.bx-wrap { position: relative; }
.bx { position: relative; font-family: Inter, system-ui, sans-serif; color: #1B2420; }
.bx * { box-sizing: border-box; }
.bx button { font: inherit; cursor: pointer; }

.bx-stage { position: relative; height: clamp(440px, calc(100vh - 290px), 760px); height: clamp(440px, calc(100svh - 290px), 760px); background: #ECE9E0; border-radius: 6px; overflow: hidden; }
.bx-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* layers */
.bx-z { cursor: pointer; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .5s ease; transform-box: view-box; }
.bx-z.pre { opacity: 0; }
.bx-z.pre[data-zone="ceiling"] { transform: translateY(-70px); }
.bx-z.pre[data-zone="floor"] { transform: translateY(70px); }
.bx-z.pre[data-zone="sidewalls"] { transform: translate(-60px, 30px); }
.bx-z.pre[data-zone="screens"] { transform: translate(40px, -30px); }
.bx-z.pre[data-zone="enclosure"], .bx-z.pre[data-zone="padding"] { transform: translateY(24px); }
.bx.has-hot .bx-z:not(.is-hot):not(.is-on) { opacity: .55; transition-duration: .9s, .25s; }
.bx-z.is-hot { transform: translateY(-6px); }
.bx-z[data-zone="ceiling"].is-hot { transform: translateY(-12px); }
.bx-z[data-zone="floor"].is-hot { transform: translateY(8px); }
.bx.is-zoomed .bx-z.is-dim { opacity: .18; }
.bx.is-zoomed .bx-z.is-on { opacity: 1; transform: none; }
.bx.is-ready:not(.is-zoomed):not(.has-hot) .bx-z[data-zone="ceiling"] { animation: bx-float 6s ease-in-out infinite; }
@keyframes bx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* points */
.bx-orbs { position: absolute; inset: 0; pointer-events: none; }
.bx-orb { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; pointer-events: auto; opacity: 0; transition: opacity .5s ease; }
.bx.is-ready .bx-orb { opacity: 1; }
.bx-dot, .bx-ring { position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; }
.bx-dot { background: #D9933B; border: 3px solid #F5F3EC; }
.bx-ring { border: 2px solid #D9933B; animation: bx-pulse 2.6s ease-out infinite; }
.bx-ring.r2 { animation-delay: 1.3s; }
@keyframes bx-pulse { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(3.1); opacity: 0; } }
.bx-orb::before { content: ""; position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; border-radius: 50%; }
.bx-tag { position: absolute; left: 18px; top: -14px; white-space: nowrap; background: #1E4D3D; color: #F5F3EC; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .8125rem; padding: 6px 11px; border-radius: 4px; opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
.bx-orb.flip .bx-tag { left: auto; right: 18px; transform: translateX(6px); }
.bx-orb.is-hot .bx-tag, .bx-orb:focus-visible .bx-tag { opacity: 1; transform: none; }
.bx-orb.is-hot .bx-dot { background: #1E4D3D; }
.bx-orb:focus-visible { outline: none; }
.bx-orb:focus-visible .bx-dot { outline: 2px solid #1E4D3D; outline-offset: 3px; }

.bx-hint { position: absolute; left: 20px; bottom: 16px; margin: 0; font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .08em; color: #4A5651; transition: opacity .3s ease; }
.bx.is-zoomed .bx-hint { opacity: 0; }
.bx-back { position: absolute; left: 16px; top: 16px; background: #F5F3EC; color: #1E4D3D; border: 1px solid #1E4D3D; border-radius: 4px; padding: 9px 14px; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .875rem; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.bx.is-zoomed .bx-back { opacity: 1; pointer-events: auto; }
.bx-back:hover { background: #1E4D3D; color: #F5F3EC; }

/* layer chips */
.bx-zones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bx-chip { background: transparent; border: 1px solid #C9D6CE; color: #1E4D3D; border-radius: 999px; padding: 8px 14px; font-family: Montserrat, sans-serif; font-weight: 600; font-size: .8125rem; transition: background .2s, color .2s, border-color .2s; }
.bx-chip:hover, .bx-chip.is-on { background: #1E4D3D; color: #F5F3EC; border-color: #1E4D3D; }

/* product panel */
.bx-panel { background: #FAFAF6; border: 1px solid #DEDBD0; border-radius: 6px; display: none; outline: none; }
.bx.is-zoomed .bx-panel { display: flex; flex-direction: column; }
.bx-ph { padding: 22px 22px 6px; }
.bx-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: #8A5A1E; }
.bx-title { margin: 8px 0 0; font-family: Montserrat, sans-serif; font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 1.875rem); letter-spacing: -.02em; line-height: 1.1; color: #1E4D3D; }
.bx-sum { margin: 10px 0 0; font-size: .9375rem; line-height: 1.55; color: #2E3A35; }
.bx-seg { display: inline-flex; margin: 14px 22px 2px; border: 1px solid #C9D6CE; border-radius: 6px; overflow: hidden; align-self: flex-start; }
.bx-seg button { background: transparent; border: 0; padding: 7px 12px; font-size: .8125rem; font-weight: 600; color: #1E4D3D; }
.bx-seg button + button { border-left: 1px solid #C9D6CE; }
.bx-seg button.is-on { background: #1E4D3D; color: #F5F3EC; }
.bx-list { padding: 4px 22px 8px; }
.bx-group { margin: 18px 0 8px; font-family: 'IBM Plex Mono', monospace; font-weight: 500; font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: #4A5651; }
.bx-card { background: #FFFFFF; border: 1px solid #E6E3D8; border-radius: 6px; padding: 14px 16px; margin-bottom: 10px; animation: bx-in .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes bx-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bx-name { margin: 0; font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1rem; color: #1B2420; }
.bx-blurb { margin: 6px 0 0; font-size: .875rem; line-height: 1.5; color: #2E3A35; }
.bx-opts { margin: 6px 0 0; font-size: .8125rem; line-height: 1.45; color: #4A5651; }
.bx-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bx-brand, .bx-status { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; padding: 3px 8px; border-radius: 3px; }
.bx-brand.trusim { background: #E3EAE5; color: #1E4D3D; }
.bx-brand.canwil { background: #F3E6D4; color: #8A5A1E; }
.bx-status { border: 1px solid currentColor; }
.bx-status.ok { color: #1E4D3D; }
.bx-status.ask { color: #4A5651; }
.bx-status.dev { color: #A84E3B; }
.bx-pn { margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: .6875rem; letter-spacing: .06em; color: #4A5651; }
.bx-cta { display: inline-block; margin-top: 10px; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .8125rem; color: #1E4D3D; text-decoration: none; border-bottom: 1px solid #C9D6CE; }
.bx-cta:hover { border-bottom-color: #1E4D3D; }
.bx-foot { margin-top: auto; padding: 12px 22px 18px; border-top: 1px solid #E6E3D8; }
.bx-nav { display: flex; justify-content: space-between; gap: 8px; }
.bx-nav button { background: none; border: 0; padding: 6px 0; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .8125rem; color: #1E4D3D; }
.bx-pfas { margin: 8px 0 0; font-size: .75rem; line-height: 1.45; color: #4A5651; }

/* desktop: panel overlays the right of the stage */
@media (min-width: 900px) {
  .bx-panel { position: absolute; top: 16px; right: 16px; bottom: 16px; width: min(420px, 38%); display: flex; flex-direction: column; overflow-y: auto; opacity: 0; transform: translateX(24px); pointer-events: none; transition: opacity .35s ease .15s, transform .45s cubic-bezier(.2,.7,.2,1) .15s; }
  .bx.is-zoomed .bx-panel { opacity: 1; transform: none; pointer-events: auto; }
}
@media (max-width: 899px) {
  .bx-stage { height: clamp(320px, 92vw, 560px); }
  .bx-panel { margin-top: 12px; }
  .bx-tag { font-size: .75rem; }
  .bx-hint { display: none; }
}
@media (hover: none) { .bx-hint::after { content: ""; } }

@media (prefers-reduced-motion: reduce) {
  .bx-z, .bx-orb, .bx-tag, .bx-panel, .bx-card { transition: none !important; animation: none !important; }
  .bx-ring { animation: none; opacity: 0; }
}

/* ── 3D explorer ───────────────────────────────────────────── */
.bx-3d .bx-stage { background: #141917; }
.bx-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; cursor: grab; outline: none; }
.bx-canvas:active { cursor: grabbing; }
.bx-3d .bx-hint { color: #C9D6CE; }
.bx-3d .bx-dot { border-color: #141917; }
.bx-3d .bx-orb.is-hot .bx-dot { background: #F5F3EC; }
.bx-behind { position: absolute; left: 16px; bottom: 16px; background: #1E4D3D; color: #F5F3EC; border: 0; border-radius: 4px; padding: 10px 14px; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .8125rem; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.bx-3d.is-zoomed.on-screens .bx-behind { opacity: 1; pointer-events: auto; }
.bx-behind:hover { background: #163A2E; }
@media (max-width: 899px) { .bx-3d .bx-hint { display: block; font-size: .6875rem; left: 14px; right: 14px; bottom: 12px; } .bx-3d.is-zoomed .bx-hint { display: none; } }
.bx-3d .bx-orb.is-behind { opacity: .28; }
.bx-3d .bx-orb.is-behind .bx-ring { animation: none; opacity: 0; }
.bx-3d.is-ready .bx-orb.is-behind:hover, .bx-3d .bx-orb.is-behind:focus-visible { opacity: 1; }
/* explode / reset */
.bx-tools { position: absolute; right: 16px; top: 16px; display: flex; gap: 8px; z-index: 2; }
.bx-tool { background: rgba(20,25,23,0.72); color: #F5F3EC; border: 1px solid rgba(245,243,236,0.35); border-radius: 4px; padding: 9px 14px; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .8125rem; letter-spacing: .01em; transition: background .2s, border-color .2s, color .2s; }
.bx-tool:hover { background: #F5F3EC; color: #1E4D3D; border-color: #F5F3EC; }
.bx-tool[aria-pressed="true"] { background: #D9933B; border-color: #D9933B; color: #1B2420; }
@media (min-width: 900px) { .bx-3d.is-zoomed .bx-tools { right: calc(min(420px, 38%) + 32px); } }
/* products at the clicked point */
.bx-card.is-focus { border-color: #D9933B; box-shadow: inset 3px 0 0 #D9933B; }
/* smaller points now that there is one per product */
.bx-3d .bx-dot, .bx-3d .bx-ring { left: -7px; top: -7px; width: 14px; height: 14px; }
.bx-3d .bx-dot { border-width: 2px; }
.bx-3d .bx-tag { left: 15px; top: -13px; }
.bx-3d .bx-orb.flip .bx-tag { right: 15px; }

/* ── refinement pass ───────────────────────────────────────── */
.bx-3d .bx-ring { animation: none; opacity: 0; }
.bx-3d .bx-orb.is-spot .bx-ring { animation: bx-pulse 2.2s ease-out 1; }
.bx-3d .bx-orb.is-spot .bx-ring.r2 { animation-delay: .35s; }
.bx-3d .bx-orb.is-hot .bx-ring { animation: bx-pulse 1.6s ease-out infinite; }
.bx-3d .bx-dot { opacity: .92; transition: transform .2s ease, background .2s ease; }
.bx-3d .bx-orb.is-hot .bx-dot, .bx-3d .bx-orb:focus-visible .bx-dot { transform: scale(1.35); }
.bx-3d .bx-tag { display: flex; flex-direction: column; gap: 2px; padding: 7px 11px 8px; line-height: 1.15; }
.bx-tag-name { font-family: Montserrat, sans-serif; font-weight: 700; font-size: .8125rem; }
.bx-tag-meta { font-family: 'IBM Plex Mono', monospace; font-weight: 400; font-size: .625rem; letter-spacing: .08em; text-transform: uppercase; color: #E8B66F; }
.bx-3d .bx-hint { left: 16px; bottom: 16px; padding: 7px 11px; border-radius: 4px; background: rgba(20,25,23,0.62); color: #C9D6CE; font-size: .6875rem; letter-spacing: .06em; }
.bx-badge { position: absolute; left: 16px; top: 16px; padding: 7px 11px; border-radius: 4px; background: rgba(20,25,23,0.62); border: 1px solid rgba(232,182,111,0.45); color: #E8B66F; font-family: 'IBM Plex Mono', monospace; font-size: .6875rem; letter-spacing: .12em; text-transform: uppercase; transition: opacity .3s ease; }
.bx-3d.is-zoomed .bx-badge { opacity: 0; }
@media (max-width: 899px) { .bx-3d .bx-hint { right: auto; max-width: calc(100% - 32px); } .bx-badge { font-size: .625rem; } }
.bx-tool[aria-pressed="true"], .bx-tool[aria-pressed="true"]:hover { background: #D9933B; border-color: #D9933B; color: #1B2420; }

/* points stay visible while a layer is open */
.bx-3d.is-zoomed .bx-orb { opacity: 1; pointer-events: auto; }
.bx-3d.is-zoomed .bx-orb.is-behind { opacity: .28; }
/* control pad */
.bx-pad { position: absolute; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px); gap: 4px; z-index: 2;
  grid-template-areas: ". up zin" "left . right" ". down zout"; }
.bx-pb { width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; background: rgba(20,25,23,0.72); color: #F5F3EC; border: 1px solid rgba(245,243,236,0.3); border-radius: 4px; font-size: .75rem; line-height: 1; touch-action: none; user-select: none; -webkit-user-select: none; transition: background .15s, color .15s, border-color .15s; }
.bx-pb.zin, .bx-pb.zout { font-family: Montserrat, sans-serif; font-weight: 700; font-size: 1.125rem; }
.bx-pb:hover, .bx-pb:active { background: #F5F3EC; color: #1E4D3D; border-color: #F5F3EC; }
.bx-pb.up { grid-area: up; } .bx-pb.left { grid-area: left; } .bx-pb.right { grid-area: right; } .bx-pb.down { grid-area: down; } .bx-pb.zin { grid-area: zin; } .bx-pb.zout { grid-area: zout; }
@media (min-width: 900px) { .bx-3d.is-zoomed .bx-pad { right: calc(min(420px, 38%) + 32px); } }
@media (max-width: 899px) { .bx-pad { grid-template-columns: repeat(3, 38px); grid-template-rows: repeat(3, 38px); } .bx-pb { width: 38px; height: 38px; } .bx-3d .bx-hint { display: none; } }
.bx-3d.is-zoomed.on-screens .bx-behind { bottom: 16px; }
.bx-stage:focus-visible { outline: 2px solid #D9933B; outline-offset: -2px; }
/* loading note */
.bx-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'IBM Plex Mono', monospace; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: #C9D6CE; background: #141917; }
@media (max-width: 899px) {
  .bx-pad { right: 10px; bottom: 10px; grid-template-columns: repeat(4, 34px); grid-template-rows: 34px; grid-template-areas: "left right zout zin"; }
  .bx-pb { width: 34px; height: 34px; }
  .bx-pb.up, .bx-pb.down { display: none; }
  .bx-badge { display: none; }
  .bx-tools { top: 10px; right: 10px; }
  .bx-tool { padding: 7px 11px; font-size: .75rem; }
}

.bx-more { display: inline-block; margin-left: 16px; font: 600 0.8125rem/1 Inter, system-ui, sans-serif; color: #4A5651; text-decoration: underline; text-underline-offset: 3px; margin-top: 2px; }
.bx-more:hover { color: #1E4D3D; }
/* white stage: the bay floats on the page */
.bx-3d .bx-stage { background: #F5F3EC; }
.bx-3d .bx-dot { border-color: #F5F3EC; }
.bx-3d .bx-orb.is-hot .bx-dot { background: #1E4D3D; }
.bx-3d .bx-hint { background: rgba(255,255,255,0.92); border: 1px solid #DEDBD0; color: #3D4842; }
.bx-badge { background: rgba(245,243,236,0.85); border-color: rgba(138,90,30,0.4); color: #8A5A1E; }
.bx-tool { background: #FFFFFF; color: #1E4D3D; border-color: #C9CFC9; }
.bx-tool:hover { background: #1E4D3D; color: #F5F3EC; border-color: #1E4D3D; }
.bx-pb { background: #FFFFFF; color: #1E4D3D; border-color: #C9CFC9; }
/* options */
.bx-opts { position: absolute; left: 16px; top: 54px; display: flex; flex-direction: column; gap: 6px; z-index: 2; transition: opacity .3s ease; }
.bx-3d.is-zoomed .bx-opts { opacity: 0; pointer-events: none; }
.bx-opt { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; background: #FFFFFF; border: 1px solid #C9CFC9; border-radius: 4px; font-family: Montserrat, sans-serif; font-weight: 700; font-size: .8125rem; color: #1E4D3D; cursor: pointer; user-select: none; }
.bx-opt input { width: 15px; height: 15px; margin: 0; accent-color: #1E4D3D; cursor: pointer; }
.bx-opt:has(input:checked) { border-color: #1E4D3D; background: #EAF0EC; }
@media (max-width: 599px) { .bx-opts { top: 50px; left: 12px; flex-direction: row; } .bx-opt { padding: 6px 9px; font-size: .75rem; } }
.bx-pb:hover, .bx-pb:active { background: #1E4D3D; color: #F5F3EC; border-color: #1E4D3D; }