/* Front-page universe (#universe): the hangar that hosts the app's real Brain-in-3D
   engine over an example business. Scoped to .universe and #u-stage. Self-contained:
   its own font and colour tokens, so it never depends on /home.css. Ports the app's
   .b3-* label rules from public/index.html with local tokens substituted. */

.universe, #u-stage {
  --u-font-display: "Segoe UI Variable Display", "Segoe UI", Inter, Arial, sans-serif;
  --u-font-body: "Segoe UI Variable Text", "Segoe UI", Inter, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --u-font-mono: "Cascadia Code", "Cascadia Mono", "IBM Plex Mono", Consolas, monospace;
  --u-bg: #0b100e;
  --u-stage-bg: rgba(7, 11, 9, 1);
  --u-text: #e8efe4;
  --u-text-2: #b3bfb4;
  --u-text-3: #7f8d84;
  --u-muted: #a9b5a3;
  --u-lime: #c5f57a;
  --u-lime-text: #17200f;
  --u-chartreuse: #d9f8ae;
  --u-dim: #7f8d84;
  --u-amber: #e7bc68;
  --u-red: #f08d86;
  --u-ice: #bfe9ff;
  --u-hair: rgba(232, 239, 228, .07);
  --u-hair-2: rgba(232, 239, 228, .13);
  --u-sep: rgba(232, 239, 228, .10);
  --u-lime-08: rgba(197, 245, 122, .08);
  --u-lime-18: rgba(197, 245, 122, .18);
  --u-lime-35: rgba(197, 245, 122, .35);
  --u-glass: linear-gradient(160deg, rgba(32, 41, 36, .86), rgba(15, 21, 18, .76));
  --u-glass-strong: linear-gradient(160deg, rgba(34, 44, 38, .92), rgba(14, 19, 17, .88));
  --u-metal: linear-gradient(90deg, rgba(232, 239, 228, 0), rgba(232, 239, 228, .14) 40%, rgba(197, 245, 122, .45) 50%, rgba(232, 239, 228, .14) 60%, rgba(232, 239, 228, 0));
  --u-lift: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 0 0 1px rgba(0, 0, 0, .25), 0 30px 60px -36px rgba(0, 0, 0, .95);
  --u-gutter: var(--gutter, clamp(20px, 5.5vw, 100px));
}

.universe .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- Stage geometry ---- */
#u-stage {
  position: relative;
  box-sizing: border-box;
  width: min(100% - 2 * var(--u-gutter), 1440px);
  margin: 40px auto 0;
  aspect-ratio: 16 / 10;
  max-height: 82svh;
  overflow: hidden;
  isolation: isolate;
  border-radius: 18px;
  border: 1px solid var(--u-hair-2);
  background: var(--u-stage-bg);
  color: var(--u-text);
  font-family: var(--u-font-body);
  outline: none;
}
#u-stage:focus-visible { box-shadow: 0 0 0 2px var(--u-lime); }
/* The film's soft edge vignette, above the canvas and below the labels and chrome. */
#u-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse at 50% 45%, rgba(4, 7, 5, 0) 52%, rgba(4, 7, 5, .55) 100%);
}

/* ---- Layer 1: the 2D map (always rendered; the still beneath the engine) ---- */
#u-stage .u-map,
#u-stage .u-map-labels {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 10;
  display: block;
}
#u-stage .u-map { z-index: 0; overflow: visible; }
#u-stage .u-map-labels { z-index: 1; list-style: none; padding: 0; pointer-events: none; }
#u-stage .u-map-labels li {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  transform: translate(-50%, calc(-100% - 1.4em));
  margin: 0;
  padding: 2px 6px;
  border-radius: 6px;
  font: 11px/1.25 var(--u-font-mono);
  letter-spacing: .05em;
  color: #c9d6c3;
  background: rgba(5, 8, 7, .42);
  border: 1px solid var(--u-hair);
  white-space: nowrap;
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Layers 2 and 3: the engine's canvas and label layer (ported from the app) ---- */
#u-stage .b3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
#u-stage .b3-canvas:active { cursor: grabbing; }
#u-stage .b3-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#u-stage .b3-label { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 9px; border-radius: 8px; background: rgba(5, 8, 7, .55); border: 1px solid rgba(232, 239, 228, .10); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; max-width: 220px; will-change: transform, opacity; }
#u-stage .b3-label b { font-family: var(--u-font-display); font-size: 12.5px; font-weight: 600; letter-spacing: -.01em; color: #eef4ea; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
#u-stage .b3-label span { font-family: var(--u-font-mono); font-size: 9.5px; letter-spacing: .06em; color: #8f9d93; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
#u-stage .b3-label.k-owner b, #u-stage .b3-label.k-brain b { font-size: 14px; color: var(--u-chartreuse); text-shadow: 0 0 12px rgba(197, 245, 122, .5); }
#u-stage .b3-label.k-ticket b { font-size: 11.5px; font-weight: 550; }
#u-stage .b3-label.is-illustrative { opacity: .6; }
#u-stage .b3-label.is-hover, #u-stage .b3-label.is-selected { border-color: rgba(197, 245, 122, .6); box-shadow: 0 0 0 1px rgba(197, 245, 122, .15), 0 8px 24px -8px rgba(197, 245, 122, .6); }
#u-stage .b3-label.is-selected b { color: var(--u-chartreuse); }
#u-stage .b3-label.is-quiet { opacity: .4; transform-origin: 50% 100%; }
#u-stage .b3-label.is-quiet b { font-size: 10.5px; }
#u-stage .b3-label { background: rgba(5, 8, 7, .42); }
#u-stage .b3-label.is-live b { color: var(--u-chartreuse); }
#u-stage .b3-label.is-working { border-color: rgba(197, 245, 122, .55); box-shadow: 0 0 0 1px rgba(197, 245, 122, .12), 0 10px 26px -10px rgba(197, 245, 122, .6); }
#u-stage .b3-working { color: var(--u-chartreuse) !important; font-family: var(--u-font-body) !important; font-size: 10.5px !important; letter-spacing: 0 !important; font-weight: 600; }

/* Stage placement: canvas and labels sit over the map; both are inert until the controls are taken. */
#u-stage .u-canvas { z-index: 2; opacity: 0; pointer-events: none; }
#u-stage .u-labels { z-index: 4; opacity: 0; pointer-events: none; }
#u-stage:not(.is-armed) .b3-label { pointer-events: none; }
#u-stage.is-armed .u-canvas { pointer-events: auto; touch-action: none; }
#u-stage.is-armed .u-labels { pointer-events: none; } /* the layer stays transparent to the pointer; only labels themselves are clickable, so drags reach the canvas */
#u-stage.is-armed .u-labels .b3-label { pointer-events: auto; }

/* The engine drew its first frame: the canvas fades in over the map, the map fades out under it. */
#u-stage.is-on .u-canvas, #u-stage.is-on .u-labels { opacity: 1; }
#u-stage.is-on:not(:has(#u-view-2d:checked)) .u-map,
#u-stage.is-on:not(:has(#u-view-2d:checked)) .u-map-labels { opacity: 0; }
/* View: 2D map selected — the canvas and labels step aside, the map stands. */
#u-stage:has(#u-view-2d:checked) .u-canvas,
#u-stage:has(#u-view-2d:checked) .u-labels { opacity: 0; pointer-events: none; }
#u-stage:has(#u-view-2d:checked) .b3-label { pointer-events: none; }

/* ---- Layer 4: chrome ---- */
#u-stage .u-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 6;
  padding: 5px 9px;
  border-radius: 6px;
  font: 11px/1.4 var(--u-font-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--u-lime);
  background: rgba(5, 8, 7, .55);
  border: 1px solid var(--u-hair-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}

#u-stage .u-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  margin: 0;
  padding: 9px 16px;
  font: 11px/1.5 var(--u-font-mono);
  letter-spacing: .04em;
  color: var(--u-text-2);
  background: rgba(5, 8, 7, .62);
  border-top: 1px solid var(--u-hair);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

#u-stage .u-legend {
  position: absolute;
  left: 14px;
  bottom: 50px;
  z-index: 6;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin: 0;
  padding: 6px 10px;
  max-width: min(54%, 760px);
  list-style: none;
  border-radius: 8px;
  font: 11px/1.5 var(--u-font-mono);
  letter-spacing: .04em;
  color: var(--u-text-2);
  background: rgba(5, 8, 7, .42);
  border: 1px solid var(--u-hair);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  pointer-events: none;
}
#u-stage .u-legend li { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; white-space: nowrap; }
#u-stage .u-legend .dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--u-dim); box-sizing: border-box; }
#u-stage .u-legend .dot.k-owner { background: var(--u-text); box-shadow: 0 0 0 2px rgba(232, 239, 228, .28); }
#u-stage .u-legend .dot.k-brain { background: var(--u-lime); box-shadow: 0 0 8px rgba(197, 245, 122, .7); }
#u-stage .u-legend .dot.k-group { background: var(--u-dim); }
#u-stage .u-legend .dot.k-agent { background: rgba(127, 141, 132, .5); border: 1px solid var(--u-dim); }
#u-stage .u-legend .dot.k-role { background: transparent; border: 1px dashed var(--u-dim); }
#u-stage .u-legend .dot.k-ticket,
#u-stage .u-legend .dot[class*="proposed"],
#u-stage .u-legend .dot[class*="delivered"] { background: var(--u-ice); }
#u-stage .u-legend .dot[class*="approved"] { background: var(--u-amber); }
#u-stage .u-legend .dot[class*="accepted"] { background: var(--u-chartreuse); }

/* Toolbar pills: the app's glass recipe. */
#u-stage .u-toolbar {
  position: absolute;
  right: 14px;
  bottom: 50px;
  z-index: 7;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 6px;
  max-width: calc(46% - 14px);
}
#u-stage .u-toolbar[hidden] { display: none; }
#u-stage .u-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0;
  padding: 7px 13px;
  border-radius: 999px;
  border: 1px solid var(--u-hair-2);
  background: var(--u-glass);
  box-shadow: var(--u-lift);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--u-text-2);
  font: 600 12px/1.2 var(--u-font-body);
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
}
#u-stage .u-btn[hidden] { display: none; }
#u-stage .u-btn:hover { color: var(--u-text); border-color: var(--u-lime-35); filter: brightness(1.08); }
#u-stage .u-btn:focus-visible { outline: 2px solid var(--u-lime); outline-offset: 2px; }
#u-stage .u-btn[aria-pressed="true"] { background: linear-gradient(180deg, rgba(197, 245, 122, .18), rgba(197, 245, 122, .08)); color: #eef4ea; border-color: var(--u-lime-35); }
#u-stage .u-btn.u-load { color: var(--u-lime-text); background: var(--u-lime); border-color: var(--u-chartreuse); box-shadow: 0 1px 0 rgba(242, 255, 214, .7) inset, 0 14px 34px -12px rgba(197, 245, 122, .55); }
#u-stage .u-btn.u-load:hover { background: var(--u-chartreuse); color: var(--u-lime-text); }

/* Segmented view switch: two radios, one pill. */
#u-stage .u-view {
  position: relative;
  display: inline-flex;
  margin: 0;
  padding: 0;
  min-inline-size: 0;
  border: 1px solid var(--u-hair-2);
  border-radius: 999px;
  background: var(--u-glass);
  box-shadow: var(--u-lift);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
#u-stage .u-view input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
#u-stage .u-view label {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 13px;
  font: 600 12px/1.2 var(--u-font-body);
  color: var(--u-text-2);
  white-space: nowrap;
  cursor: pointer;
}
#u-stage .u-view label + input + label { border-left: 1px solid var(--u-hair-2); }
#u-stage .u-view label:hover { color: var(--u-text); }
#u-stage .u-view input:checked + label { background: linear-gradient(180deg, rgba(197, 245, 122, .18), rgba(197, 245, 122, .08)); color: #eef4ea; }
#u-stage .u-view input:focus-visible + label { outline: 2px solid var(--u-lime); outline-offset: -2px; }
/* The 3D controls mean nothing until the engine has drawn; only the opt-in button shows before that. */
#u-stage:not(.is-on) .u-view { display: none; }

/* Hint while the controls are taken. */
#u-stage .u-hint {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 6;
  transform: translateX(-50%);
  margin: 0;
  padding: 6px 12px;
  max-width: calc(100% - 28px);
  border-radius: 999px;
  font: 11px/1.4 var(--u-font-mono);
  letter-spacing: .04em;
  color: var(--u-text-2);
  background: rgba(5, 8, 7, .62);
  border: 1px solid var(--u-hair-2);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
#u-stage .u-hint[hidden] { display: none; }

/* Inspector: heavier glass, top-right. */
#u-stage .u-inspector {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 8;
  box-sizing: border-box;
  width: min(320px, calc(100% - 28px));
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(5, 8, 7, .62);
  border: 1px solid var(--u-hair-2);
  box-shadow: var(--u-lift);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--u-text-2);
  font: 13px/1.55 var(--u-font-body);
  outline: none;
}
#u-stage .u-inspector::before { content: ""; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; background: var(--u-metal); pointer-events: none; }
#u-stage .u-inspector[hidden] { display: none; }
#u-stage .u-inspector [data-u-name] { display: block; margin: 0 0 6px; font: 600 15px/1.3 var(--u-font-display); letter-spacing: -.01em; color: var(--u-text); }
#u-stage .u-inspector [data-u-line] { margin: 0 0 10px; }
#u-stage .u-inspector [data-u-link] { display: inline-block; font: 600 12.5px/1.4 var(--u-font-body); color: var(--u-lime); text-decoration: none; border-bottom: 1px solid var(--u-lime-35); }
#u-stage .u-inspector [data-u-link]:hover { border-bottom-color: var(--u-lime); }
#u-stage .u-inspector [data-u-link]:focus-visible { outline: 2px solid var(--u-lime); outline-offset: 2px; }
#u-stage .u-inspector .u-insp-foot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--u-hair); font: 11px/1.5 var(--u-font-mono); letter-spacing: .03em; color: var(--u-text-3); }
#u-stage .u-inspector .u-btn { margin-top: 10px; }

/* ---- Fullscreen ---- */
#u-stage.is-full, #u-stage:fullscreen {
  width: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  height: 100vh;
  margin: 0;
  border-radius: 0;
  border: 0;
  background: var(--u-stage-bg);
}
#u-stage:fullscreen::backdrop { background: var(--u-stage-bg); }

/* ---- Under the frame ---- */
.universe .u-lines { max-width: 70ch; margin: 14px auto 0; font-size: 13px; line-height: 1.7; color: var(--u-muted); }
.universe .u-lines + .u-lines { margin-top: 6px; }

/* ---- Motion (only under a no-preference setting) ---- */
@media (prefers-reduced-motion: no-preference) {
  #u-stage .u-canvas, #u-stage .u-labels, #u-stage .u-map, #u-stage .u-map-labels { transition: opacity 500ms ease; }
  #u-stage .u-btn, #u-stage .u-view label, #u-stage .u-inspector [data-u-link] { transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, filter 160ms ease; }
}

/* ---- Phones and narrow viewports: the 4:3 stills stage ---- */
@media (max-width: 860px) {
  .universe, #u-stage { --u-gutter: var(--gutter, 20px); }
  #u-stage { aspect-ratio: 4 / 3; max-height: none; margin-top: 28px; border-radius: 14px; }
  #u-stage .u-tag { top: 10px; left: 10px; }
  #u-stage .u-toolbar { top: 10px; right: 10px; bottom: auto; max-width: calc(100% - 20px); }
  #u-stage .u-btn, #u-stage .u-view label { min-height: 44px; padding: 10px 14px; }
  #u-stage .u-legend { left: 10px; right: 10px; bottom: 46px; max-width: none; gap: 2px 10px; padding: 5px 8px; }
  #u-stage .u-caption { padding: 8px 12px; }
  #u-stage .u-hint { top: auto; bottom: 96px; }
  #u-stage .u-inspector { top: 62px; right: 10px; width: calc(100% - 20px); }
  #u-stage .u-map-labels li { transform: translate(-50%, calc(-100% - 1.1em)); padding: 1px 4px; max-width: 140px; }
}
/* Small phones: the overlay chrome would cover most of a 4:3 map, so the map (16:10), legend and
   caption stack in flow inside the stage; canvas, labels and vignette cover only the map box. */
@media (max-width: 520px) {
  #u-stage { aspect-ratio: auto; height: auto; max-height: none; }
  #u-stage::after { bottom: auto; aspect-ratio: 16 / 10; }
  #u-stage .u-map { position: relative; inset: auto; margin: 0; width: 100%; height: auto; max-height: none; }
  #u-stage .u-map-labels, #u-stage .u-canvas, #u-stage .u-labels { position: absolute; inset: 0 0 auto; margin: 0; width: 100%; height: auto; max-height: none; aspect-ratio: 16 / 10; }
  #u-stage .u-legend { position: relative; left: auto; right: auto; bottom: auto; margin: 0; padding: 8px 12px; max-width: none; border: 0; border-top: 1px solid var(--u-hair); border-radius: 0; background: rgba(5, 8, 7, .3); backdrop-filter: none; -webkit-backdrop-filter: none; }
  #u-stage .u-caption { position: relative; left: auto; right: auto; bottom: auto; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #u-stage .u-legend li { display: inline; white-space: normal; line-height: 1.7; }
  #u-stage .u-legend .dot { vertical-align: middle; margin-right: 4px; }
  #u-stage .u-toolbar { position: relative; inset: auto; max-width: none; justify-content: flex-start; padding: 8px 10px; border-top: 1px solid var(--u-hair); }
  #u-stage .u-hint { position: relative; inset: auto; transform: none; margin: 0; padding: 6px 12px; max-width: none; border: 0; border-top: 1px solid var(--u-hair); border-radius: 0; white-space: normal; backdrop-filter: none; -webkit-backdrop-filter: none; }
  #u-stage .u-inspector { top: 58px; }
  #u-stage.is-full .u-map, #u-stage:fullscreen .u-map { margin-top: 12vh; }
}
@media (max-width: 360px) {
  .universe, #u-stage { --u-gutter: var(--gutter, 18px); }
}

/* Homepage universe: quiet quest labels stay out of the way; the eye lands on You, Brain and the workers. */
#u-stage .b3-label.is-quiet{display:none}
#u-stage.is-armed .b3-label.is-quiet{display:flex;opacity:.55}