/* Dashboard 5: Futuristic Interface Section (d5/DESIGN.md). Bento: status as separate tiles, the queues stacked left, the radar orb large on the right. */
.orb { --orb: radar; }
.hud { gap: var(--gap); border: 0; background: none; box-shadow: none; }
.hud-c { border: 1px solid var(--border) !important; border-radius: var(--r-card) !important; background: var(--surface); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 18px 40px -24px rgba(0, 0, 0, .8); }
.hud-c:hover { border-color: var(--accent) !important; background: var(--surface); }
@media (min-width: 1101px) {
  .bridge { grid-template-columns: minmax(0, 380px) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "needs stage stage" "feed stage stage"; }
  .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; }
}
.seg button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.nav-i[aria-current="page"] { background: var(--tint); }
@media (max-width: 760px) { .hud { gap: 8px; } }