/* VivBuild Habitat Lab: preset rail + WebGL studio stage. Brand: forest / cream / clay. */
.hl-presets-head{display:flex;justify-content:space-between;align-items:end;gap:24px;margin:0 0 14px}
.hl-presets-head h3{color:var(--cream);margin:4px 0 0;font-size:1.35rem}
.hl-kicker{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:850;color:#c6d8af}
.hl-preset-disclaimer{max-width:470px;font-size:.8rem;margin:0;color:#b9c6b3!important}
.hl-presets{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
.hl-presets[hidden]{display:none}
.hl-preset{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#2a4333;border:1px solid #405b46;color:var(--cream);transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .2s,box-shadow .25s}
.hl-preset:hover{transform:translateY(-3px);border-color:#8fa983;box-shadow:0 14px 30px #0b170f55}
.hl-preset:focus-visible{outline:3px solid #c4d6ae;outline-offset:3px}
.hl-preset[aria-pressed="true"]{border-color:#e3c9a0;box-shadow:0 0 0 2px #e3c9a0 inset,0 14px 30px #0b170f55}
.hl-preset.is-customized{border-style:dashed}
.hl-preset-thumb{display:block;aspect-ratio:36/23;background:#cfd5c3;overflow:hidden}
.hl-preset-thumb img,.hl-preset-thumb svg{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.hl-preset:hover .hl-preset-thumb img{transform:scale(1.04)}
.hl-preset-body{display:flex;flex-direction:column;gap:2px;padding:10px 12px 12px}
.hl-preset-env{font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;font-weight:850;color:#c6d8af}
.hl-preset strong{font-size:.98rem;letter-spacing:-.02em;line-height:1.2}
.hl-preset-species{font-size:.76rem;color:#d3dccd}.hl-preset-species em{color:#aab8a4}
.hl-preset-dims{font-size:.72rem;color:#e3c9a0;font-variant-numeric:tabular-nums;margin-top:3px}

/* Stage */
.vb3d-stage{min-height:520px}
.hl-canvas-wrap{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .6s ease;background:radial-gradient(120% 95% at 50% 28%,#f1ede2 0%,#dcdcca 42%,#a4b096 78%,#7c8c70 100%)}
.hl-canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.hl-canvas:active{cursor:grabbing}
.vb3d-stage[data-renderer="webgl"] .hl-canvas-wrap{opacity:1}
.vb3d-stage[data-renderer="webgl"] #vb3dScene{visibility:hidden}
.vb3d-stage[data-renderer="webgl"]{cursor:default}
.vb3d-toolbar{z-index:4;pointer-events:none}.vb3d-toolbar>*{pointer-events:auto}
.hl-tool-group{display:flex;gap:6px;flex-wrap:wrap}
.hl-3d-only{display:none}
.vb3d-stage[data-renderer="webgl"] .hl-3d-only{display:flex}
.vb3d-stage[data-renderer="webgl"] .vb3d-toolbar button{background:#fffdf7e6;backdrop-filter:blur(6px);box-shadow:0 2px 10px #1b2a1f1f}
.hl-scene-title{position:absolute;z-index:3;left:14px;top:58px;display:flex;flex-direction:column;align-items:flex-start;gap:4px;pointer-events:none;max-width:60%}
.hl-scene-title strong{font-size:1.05rem;letter-spacing:-.02em;color:#eef2e7;text-shadow:0 1px 8px #0c160f88}
.vb3d-stage[data-renderer="webgl"] .hl-scene-title strong{color:#1f3328;text-shadow:none}
.hl-badge{font-size:.66rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:#21382c;color:#e6eedb}
.hl-badge[data-state="custom"]{background:#b97752;color:#fff8ee}
.vb3d-help{z-index:3;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.hl-help-3d{display:none}
.vb3d-stage[data-renderer="webgl"] .hl-help-2d{display:none}
.vb3d-stage[data-renderer="webgl"] .hl-help-3d{display:inline;color:#2c3e31}
.hl-chip{font-size:.7rem;padding:4px 9px;border-radius:999px;background:#13221988;color:#e8eee0;backdrop-filter:blur(4px)}
.vb3d-stage[data-renderer="webgl"] .hl-chip{background:#fffdf7c9;color:#3d4c40}
.hl-load{position:absolute;z-index:4;right:14px;bottom:14px;font-size:.82rem;padding:9px 14px;background:#e3c9a0;color:#21382c}
.hl-load[hidden]{display:none}
.hl-loading{position:absolute;z-index:3;inset:auto 0 50% 0;margin:auto;display:none;justify-content:center;align-items:center;gap:10px;font-size:.82rem;font-weight:750;color:#e6eedb}
.vb3d-stage[data-renderer="loading"] .hl-loading{display:flex}
.vb3d-stage[data-renderer="loading"] #vb3dScene{opacity:.35;filter:blur(1px);transition:opacity .3s}
.hl-loading span{width:120px;height:4px;border-radius:9px;background:linear-gradient(90deg,#c6d8af33,#c6d8af,#c6d8af33);background-size:200% 100%;animation:hlShimmer 1.2s linear infinite}
@keyframes hlShimmer{to{background-position:-200% 0}}
.hl-stage-meta{margin-top:8px}
#vb3dPlannerStatus{color:#53624e}
.hl-render-status[data-tone="warn"]{color:#f0c79a}
.hl-preset-note{margin-top:10px;padding:12px 15px;border-left:3px solid #e3c9a0;background:#2a4333;border-radius:0 12px 12px 0}
.hl-preset-note p{margin:0 0 8px;font-size:.84rem;color:#d5ddcf!important}
.hl-preset-actions{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.hl-preset-actions [hidden]{display:none}
@media (prefers-reduced-motion:reduce){.hl-preset,.hl-canvas-wrap,.hl-preset-thumb img{transition:none}.hl-loading span{animation:none}}
@media(max-width:1000px){.hl-presets{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.vb3d-stage{min-height:420px}.hl-presets-head{flex-direction:column;align-items:start}}
@media(max-width:580px){.hl-presets{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}.hl-preset{flex:0 0 72%;scroll-snap-align:start}.vb3d-stage{min-height:400px}.hl-chip{font-size:.64rem}}

/* Manufacturer model card (catalog-only enclosure sizing) */
.hl-model-card{margin:-2px 0 14px;padding:11px 13px;border-radius:12px;background:#eef1e6;border:1px solid #d6dccb}
.hl-model-basis{display:block;font-size:.66rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase;color:#5f7451}
.hl-model-size{display:block;font-size:.98rem;color:#21382c;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.hl-model-card p{margin:6px 0;line-height:1.45}
#vb3dModelCard #vb3dEnclosureDetails{color:#53624e}
.planner-model{margin-top:8px;padding:10px 12px;border-radius:10px;background:#f1f2e9;color:#334631;line-height:1.45}
.planner small{overflow-wrap:anywhere}
@media(max-width:760px){
  #vb3dStage[data-renderer="webgl"] .hl-scene-title strong{color:#eef2e7}
  #vb3dStage[data-renderer="webgl"] .hl-help-3d{color:#d5ddcf}
}
#budgetCatalogLink{display:inline-block;margin-top:6px;font-size:.84rem}
.vb3d-controls button:disabled{opacity:.5;cursor:not-allowed}

/* Dedicated viewport: hosts the SVG fallback and the WebGL canvas */
.hl-viewport{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.hl-viewport .hl-canvas-wrap{z-index:1}
.hl-viewport #vb3dScene{max-height:min(440px,100%)}
.hl-model-card a.textLink{color:#1f3a2a;border-bottom:1px solid #1f3a2a;font-weight:850}
.hl-model-card a.textLink:hover{color:#8a4b2a;border-color:#8a4b2a}
.hl-model-card a.textLink:focus-visible{outline:2px solid #1f3a2a;outline-offset:2px}

/* Written planner: long manufacturer names must wrap inside the grid, never widen it */
.planner>*{min-width:0}
.planner select,.planner input,.vb3d-controls select{width:100%;max-width:100%;min-width:0}
.planner-model,.planner-model a{overflow-wrap:anywhere}

/* Narrow screens: toolbar, title, viewport and help stack in flow */
@media(max-width:760px){
  .vb3d-stage{flex-direction:column;justify-content:flex-start;align-items:stretch;min-height:0}
  .vb3d-toolbar{position:relative;top:auto;left:auto;right:auto;padding:10px 10px 0;justify-content:flex-start;gap:6px}
  .hl-tool-group{gap:5px}
  .vb3d-toolbar button{padding:7px 9px;font-size:.74rem}
  .hl-scene-title{position:relative;top:auto;left:auto;max-width:none;padding:8px 12px 0}
  .hl-viewport{position:relative;inset:auto;flex:none;width:100%;height:clamp(280px,88vw,440px);margin-top:6px}
  .vb3d-help{position:relative;left:auto;right:auto;bottom:auto;padding:8px 12px 12px}
  .vb3d-stage[data-renderer="webgl"] .vb3d-help{background:transparent}
}