/* Learning world (Our Solutions): the 3D building of eight labs (scenes/labworld.js).
   Layout: the active lab's title and the controls above the canvas; on wide screens the eight lab
   names sit in reserved columns beside the building (left rooms left, right rooms right) with leader
   lines to numbered markers on the rooms' frames; on phones and tablets they form a two-column
   selector directly below the canvas. Room information and Follow-a-team captions sit below, never
   over the interiors. Typography: the site's sans (DM Sans), Inter / system sans as fallback. */
.lw-section { padding-bottom: 90px; }
.lw {
  --lw-side: 212px;
  --lw-font: "DM Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --lw-stage-bg: #F4F2EE;
  position: relative;
  color: var(--ink);
  font-family: var(--lw-font);
}
.lw [hidden] { display: none !important; }

/* ---------- head: active lab title + controls (above the canvas) ---------- */
.lw-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin: 0 0 14px; }
.lw-heading { min-width: 0; flex: 1 1 260px; }
.lw-kicker { margin: 0 0 4px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); display: flex; flex-wrap: wrap; gap: 0 10px; }
.lw-kicker-floor::before { content: "·"; margin-right: 10px; }
.lw-title { font-family: var(--lw-font); font-size: clamp(1.25rem, 1.08rem + 0.55vw, 1.5rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); margin: 0; overflow-wrap: anywhere; }
.lw-title:focus { outline: none; }
.lw-title:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.lw-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.lw-btn {
  min-height: 44px; min-width: 44px; padding: 0 16px; border-radius: 999px; border: 2px solid var(--ink); background: #fff; color: var(--ink);
  font: 600 0.95rem/1.1 var(--lw-font); display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}
.lw-btn svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.lw-btn:hover { box-shadow: 0 3px 0 var(--ink); }
.lw-btn[aria-pressed="true"] { background: var(--ink); color: #fff; }
.lw-btn-primary, .lw-explore:not([aria-pressed="true"]) { background: var(--coral); }
.lw-back { background: var(--yellow); }

/* ---------- body: [left names] [stage] [right names] ---------- */
.lw-body { position: relative; }
.lw-stage {
  position: relative; height: clamp(280px, min(80vw, 64svh), 640px);  /* v58: was min(94vw, ...): the straight-on building is wider than tall */ border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 38%, #FBFAF8 0%, var(--lw-stage-bg) 62%, #ECE9E3 100%);
  touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; cursor: grab; outline: none;
}
.lw-stage:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--focus); }
.lw[data-dragging="true"] .lw-stage { cursor: grabbing; }
.lw[data-cursor="pointer"] .lw-stage { cursor: pointer; }
.lw[data-cursor="out"] .lw-stage { cursor: zoom-out; }
.lw[data-dragging="true"][data-cursor] .lw-stage { cursor: grabbing; }
/* inside a lab: the space round the canvas zooms back out (scenes/labworld.js sets data-lw-out) */
.lw-section[data-lw-out="true"] { cursor: zoom-out; }
.lw[data-explore="true"] .lw-stage, .lw[data-explore="true"] .lw-stage canvas { touch-action: none; }
.lw-canvas, .lw-canvas canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lw-canvas canvas { touch-action: pan-y pinch-zoom; }

/* numbered markers on the rooms' outer frames (positioned by the scene) */
.lw-markers { position: absolute; inset: 0; pointer-events: none; }
.lw-marker {
  position: absolute; left: 0; top: 0; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  display: grid; place-items: center; font: 700 0.85rem/1 var(--lw-font); color: #fff; background: var(--accent);
  box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(30, 41, 66, 0.25); opacity: 0; transition: opacity 0.2s, box-shadow 0.15s; will-change: transform;
}
.lw-marker[data-light="true"] { color: var(--ink); }
.lw-marker[data-on="true"] { opacity: 1; }
.lw-marker[data-hot="true"], .lw-marker[data-active="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--ink); }

.lw-loading { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: #fff; color: var(--ink); font: 600 0.9rem/1 var(--lw-font); box-shadow: 0 2px 10px rgba(30, 41, 66, 0.12); }
.lw-progress { width: 90px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; }
.lw-progress i { display: block; height: 100%; width: calc(var(--lw-p, 0) * 100%); background: var(--coral); transition: width 0.25s; }
.lw[data-ready="true"] .lw-loading { display: none; }
.lw-lost { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; text-align: center; background: rgba(244, 242, 238, 0.94); }
.lw-wheel { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 0.88rem/1.2 var(--lw-font); opacity: 0; pointer-events: none; transition: opacity 0.2s; white-space: nowrap; }
.lw[data-wheel="off"] .lw-wheel { opacity: 1; }
/* the first-time tip: small, quiet, never in the way of a click (gone after the first visit to a lab) */
.lw-tip { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); margin: 0; max-width: calc(100% - 24px); width: max-content; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font: 600 0.8rem/1.3 var(--lw-font); text-align: center; box-shadow: 0 1px 6px rgba(30, 41, 66, 0.14); opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.lw-tip > span { display: none; }
.lw[data-pointer="fine"] .lw-tip-fine, .lw[data-pointer="coarse"] .lw-tip-touch { display: inline; }
.lw[data-tip="on"][data-ready="true"] .lw-tip { opacity: 1; }
.lw[data-wheel="off"] .lw-tip, .lw[data-follow="on"] .lw-tip { opacity: 0; }
@media (max-width: 420px) { .lw-tip { font-size: 0.74rem; padding: 5px 10px; } }
/* short landscape phones: in the free space beside the building, clear of the rooms and markers */
@media (max-width: 959.98px) and (orientation: landscape) and (max-height: 520px) { .lw-tip { left: 10px; transform: none; max-width: 28%; width: auto; border-radius: 12px; text-align: left; } }

/* the lab names */
.lw-rooms { list-style: none; margin: 0; padding: 0; }
.lw-room {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 12px; border-radius: 12px;
  border: 2px solid var(--border); background: #fff; color: var(--ink); font: 600 1rem/1.25 var(--lw-font); text-align: left; letter-spacing: 0;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}
.lw-num { flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #fff; font: 700 0.9rem/1 var(--lw-font); box-shadow: 0 0 0 2px #fff; }
.lw-room[data-light="true"] .lw-num { color: var(--ink); box-shadow: 0 0 0 1px rgba(30, 41, 66, 0.25); }
.lw-name { min-width: 0; overflow-wrap: break-word; }
.lw-room:hover, .lw-room[data-hot="true"] { border-color: var(--ink); }
.lw-room[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.lw-room:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.lw-leaders { display: none; }

/* phones and tablets: the selector directly below the canvas, in the building's room order */
@media (max-width: 959.98px) {
  .lw-rooms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
  .lw-room { min-height: 48px; }
}
@media (max-width: 400px) {
  .lw-room { padding: 8px 9px; gap: 8px; }
  .lw-num { flex-basis: 26px; width: 26px; height: 26px; }
}
@media (max-width: 319.98px) { .lw-rooms { grid-template-columns: 1fr; } }
@media (max-width: 959.98px) and (orientation: landscape) and (max-height: 520px) {
  .lw-stage { height: max(240px, calc(100svh - 120px)); }
}

/* wide screens: names in reserved columns beside the building, joined by leader lines */
@media (min-width: 960px) {
  .lw-body { display: grid; grid-template-columns: var(--lw-side) minmax(0, 1fr) var(--lw-side); }
  .lw-stage { grid-column: 2; height: auto; aspect-ratio: 1.18;  /* v58: 1.08 -> 1.18 for the straight-on overview */ max-height: min(80vh, 800px); min-height: 420px; }
  .lw-rooms { position: absolute; inset: 0; pointer-events: none; }
  .lw-room-item { position: absolute; top: 0; width: calc(var(--lw-side) - 18px); pointer-events: auto; transform: translateY(var(--y, 0px)); }
  .lw-room-item[data-side="left"] { left: 0; }
  .lw-room-item[data-side="right"] { right: 0; }
  .lw-room-item[data-side="left"] .lw-room { flex-direction: row-reverse; text-align: right; }
  .lw[data-labels="static"] .lw-room-item { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); }
  .lw-leaders { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
  .lw-leaders path { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-opacity: 0.55; stroke-linecap: round; transition: stroke-opacity 0.2s; }
  .lw-leaders path[data-hot="true"] { stroke-width: 2.5; stroke-opacity: 0.95; }
  .lw-leaders circle { fill: var(--ink); fill-opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) { .lw-room-item, .lw-marker, .lw-btn, .lw-tip { transition: none !important; } }

/* ---------- info (below the canvas) ---------- */
.lw-info {
  margin-top: 16px; padding: 18px 20px; border-radius: 16px; background: #FBFAF7; border: 1px solid var(--border);
  border-top: 4px solid var(--lw-accent, var(--ink));
}
.lw-intro { margin: 0 0 6px; color: var(--ink); font-size: 1rem; }
.lw-hint { margin: 0; font-size: 0.92rem; color: var(--muted-foreground); }
.lw-hint > span { display: none; }
.lw[data-pointer="fine"] .lw-hint-fine, .lw[data-pointer="coarse"]:not([data-explore="true"]) .lw-hint-touch, .lw[data-explore="true"] .lw-hint-explore { display: inline; }
.lw-room-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto; gap: 14px 26px; align-items: start; }
.lw-info-h { font: 700 0.78rem/1.2 var(--lw-font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-foreground); margin: 0 0 6px; }
.lw-activity { margin: 0; color: var(--ink); font-size: 1.05rem; font-weight: 600; line-height: 1.4; }
.lw-outcome { margin: 0 0 10px; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.lw-skills { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.lw-skills li { padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.lw-info-act { align-self: center; }
.lw-link { min-height: 48px; display: inline-flex; align-items: center; white-space: nowrap; }
.lw-team-title { margin: 0 0 10px; font-weight: 700; color: var(--ink); }
.lw-steps { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; counter-reset: s; }
.lw-step { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--muted-foreground); }
.lw-step::before { content: ""; position: absolute; top: 14px; left: -50%; width: 100%; height: 3px; background: var(--border); z-index: 0; }
.lw-step:first-child::before { display: none; }
.lw-step-num { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #fff; border: 2px solid var(--border); color: var(--ink); font-weight: 700; }
.lw-step[data-state="done"] .lw-step-num { background: var(--ink); border-color: var(--ink); color: #fff; }
.lw-step[data-state="done"]::before, .lw-step[data-state="now"]::before { background: var(--ink); }
.lw-step[data-state="now"] .lw-step-num { background: var(--coral); border-color: var(--ink); }
.lw-step[data-state="now"] { color: var(--ink); }
.lw-caption { margin: 0; font-size: 1.05rem; line-height: 1.45; color: var(--ink); font-weight: 600; min-height: 3em; }
.lw-timelapse { display: inline-block; margin: 8px 0 0; padding: 4px 10px; border-radius: 999px; background: var(--yellow); font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.lw-team-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.lw-team-btns:empty { display: none; }

@media (max-width: 959.98px) {
  .lw-info { padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 14px 14px; }
  .lw-room-info { grid-template-columns: 1fr; gap: 12px; }
  .lw-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .lw-step-stage { font-size: 0.72rem; }
  .lw-tools .lw-btn { padding: 0 13px; }
}
@media (max-width: 420px) {
  .lw-tools { width: 100%; }
  .lw-tools .lw-btn { flex: 1 1 auto; }
  .lw-step-stage { display: none; }
}

/* ---------- fallback (no WebGL, screen readers) ---------- */
.lw-fallback { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: normal; }
.lw[data-three="false"] :is(.lw-head, .lw-body, .lw-info) { display: none; }
.lw[data-three="false"] .lw-fallback { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; }
.lw-card-art { aspect-ratio: 1000 / 667; background: linear-gradient(135deg, #BFE6F7, #65C8F0 55%, #FFD54A); border-radius: 22px; }