/* Dashboard 4: Singularity Infrastructure (d4/DESIGN.md). An icon rail, and the stage as a light #E4E4EC panel holding a dithered black hole. */
.orb { --orb: hole; }
@media (min-width: 1101px) {
  .shell { grid-template-columns: 72px minmax(0, 1fr); }
  .rail { padding: 24px 12px; }
  .nav-i { justify-content: center; padding: 0; height: 48px; }
  .nav-i span:not(.count) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .nav-i .count { position: absolute; margin: -22px 0 0 26px; min-width: 18px; height: 18px; line-height: 18px; font-size: 11px; padding: 0 4px; }
  .nav-i { position: relative; }
  .bridge { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "stage stage" "needs needs" "feed feed"; }
  .stage { grid-area: stage; } .needs { grid-area: needs; } .feed-card { grid-area: feed; }
  .stage { min-height: clamp(560px, calc(100svh - 320px), 760px); }
}
/* under the stage, the asks run as one strip of tiles and the feed as two columns */
@media (min-width: 1101px) {
  .needs .list { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); }
  .needs .list > li { padding: 16px; border: 0; border-radius: var(--r-ctl); background: var(--raised); justify-content: space-between; }
  .feed { columns: 2; column-gap: 48px; }
  .feed > li { break-inside: avoid; }
  .feed > li + li { border-top: 0; }
}
/* the light panel: its own ink, scoped so the rest of the screen stays dark */
.stage {
  --text: #020206; --muted: #4b4b55; --faint: #5f5f6a; --control: #a1a1aa; --bg: #f4f4f8; --raised: #d6d6e0;
  --orb-a: #d97706; --orb-b: #92400e; --orb-ink: #020206; --orb-dim: #5f5f6a; --orb-line: #b9b9c4; --orb-void: #020206;
  background: var(--panel); color: var(--text); border-color: #c9c9d3;
}
[data-voice="speaking"] .stage { background: var(--panel); }
.stage .btn.primary { background: #020206; border-color: #020206; color: #ffffff; }
.stage .dot { background: #15803d; }
.hud-v .of, .gl .num { color: var(--muted); }