/* Dashboard 2: Digital Excellence Platform (d2/DESIGN.md). Telemetry: the orb is a bar meter; the stage leads on the left with the queues stacked beside it. */
.orb { --orb: bars; }
@media (min-width: 1101px) {
  .bridge { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 380px); grid-template-areas: "stage stage needs" "stage stage feed"; }
  .stage { grid-area: stage; } .needs { grid-area: needs; } .feed-card { grid-area: feed; }
  /* the bridge is one screen tall; the two queues scroll inside their panels so the orb stays centred */
  .bridge { height: clamp(620px, calc(100svh - 120px), 880px); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .stage { min-height: 0; }
  .needs .list, .feed { overflow-y: auto; min-height: 0; flex: 1; scrollbar-width: thin; scrollbar-color: var(--control) transparent; }
  .feed > li:nth-child(n+8) { display: flex; }
}
/* the stage reads as a telemetry scope: a faint 40px grid behind the meter */
.stage { background-image: linear-gradient(var(--rule) 1px, transparent 1px), linear-gradient(90deg, var(--rule) 1px, transparent 1px), radial-gradient(60% 55% at 50% 50%, color-mix(in srgb, var(--accent) 12%, var(--surface)) 0%, var(--surface) 70%); background-size: 40px 40px, 40px 40px, auto; }
.hud-v { color: var(--text); }