#view-overview .dashboard-grid { gap:12px; align-items:start; }
#view-overview .card { padding:16px; }
#view-overview .card-heading { margin-bottom:10px; }
#view-overview .facts { gap:8px 14px; margin:12px 0; }
#view-overview .hero-value { font-size:23px; margin:8px 0; }
#view-overview .flow-list { gap:6px; }
#view-overview .flow-list>li { padding:8px 10px; }
#view-overview .payload-details { margin-top:8px; padding-top:6px; }
#view-overview .question { padding:12px; }
#view-overview .question-grid { gap:10px; }

.runtime-grid { display:flex; flex-wrap:wrap; align-items:start; gap:12px 28px; }
.runtime-grid>*+* { border-left:1px solid var(--border); padding-left:16px; }
.runtime-grid>.capacity-pool { flex:0 1 auto; width:max-content; max-width:100%; }
.capacity-pool>.slot-legend { width:max-content; max-width:100%; }
.runtime-grid>section { flex:0 1 auto; min-width:0; }
.runtime-secondary>.state-indicator { flex:0 1 auto; }
.runtime-secondary { margin-top:16px; }
.capacity-pool { position:relative; margin-bottom:0; width:100%; min-width:0; }
.capacity-pool>.card-heading,.capacity-pool>.slot-row { width:min(100%,calc(var(--capacity-slots,8) * 32px - 4px)); }
.capacity-pool .card-heading .badge { margin-left:auto; }
.capacity-pool .card-heading { margin-bottom:6px; }
.runtime-grid .card-heading { min-height:26px; }
.runtime-grid>section { position:relative; }
.runtime-secondary>.timer-indicator { flex:1 1 252px; max-width:none; }
.slot-row { display:flex; flex-wrap:nowrap; gap:4px; min-height:28px; overflow-x:auto; scrollbar-width:thin; }
.runtime-slot { flex:none; }
.capacity-pool>.slot-row,.timer-indicator>.slot-row { height:40px; }
.runtime-slot { display:inline-block; }
.runtime-slot>button {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:1px solid var(--border); border-radius:2px;
  padding:0;
  background:var(--background); color:var(--muted);
  list-style:none;
}
.runtime-slot.running>button { background:var(--accent); border-color:var(--accent); }
.runtime-slot.waiting>button { background:var(--amber); border-color:var(--amber); }
.runtime-slot.allocated>button { background:var(--green); border-color:var(--green); }
.runtime-slot.unknown>button { border-style:dashed; }
.runtime-slot.free>button { background:#414854; border-color:#596272; }
.runtime-slot.neutral>button { background:#74678b; border-color:#9a87b9; }
.runtime-slot.failed>button { background:var(--red); border-color:var(--red); }
.runtime-slot>button.state-chip { width:auto; min-width:64px; padding:3px 10px; border-radius:20px; font-size:13px; }
.runtime-slot.free>button.state-chip { background:var(--panel-raised); color:var(--muted); }
.runtime-slot.running>button.state-chip { background:var(--accent-bg); color:var(--accent); }
.runtime-slot.waiting>button.state-chip { background:var(--amber-bg); color:var(--amber); }
.runtime-slot.neutral>button.state-chip { background:var(--panel-raised); color:#c5b5df; }
.runtime-slot.failed>button.state-chip { background:var(--panel-raised); color:var(--red); }
.runtime-slot.unknown>button.state-chip { color:var(--muted); }
.slot-accessible-label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.runtime-slot>.slot-popover {
  display:none; position:absolute; top:calc(100% - 12px); left:0; z-index:25;
  width:min(420px,calc(100vw - 64px)); max-height:45vh; overflow:auto;
  padding:16px; border:1px solid var(--border); border-radius:8px;
  background:var(--panel-raised); box-shadow:0 12px 32px #0006;
  overflow-wrap:anywhere;
}
.runtime-slot:hover>.slot-popover,
.runtime-slot:has(>button:focus-visible)>.slot-popover { display:block; }
.runtime-slot:hover>.slot-popover { z-index:26; }
.slot-popover h3 { margin-bottom:10px; }
.slot-popover .payload { max-height:220px; }
.delivery-slots { position:relative; display:flex; gap:12px; margin:0; }
.delivery-slot { display:flex; flex-direction:column; align-items:center; gap:4px; }
.delivery-slot .hint { margin:0; order:1; }
.slot-legend { display:flex; flex-wrap:nowrap; gap:3px 10px; color:var(--muted); font-size:12px; margin-top:6px; white-space:nowrap; overflow-x:auto; }
.runtime-grid>.capacity-pool>.slot-legend,
.runtime-grid>section>.slot-legend { align-content:start; min-height:18px; }
.slot-legend>span { display:inline-flex; flex:none; align-items:center; gap:5px; }
.slot-swatch { display:inline-block; width:9px; height:9px; border-radius:2px; }
.slot-swatch.free { background:#414854; }
.slot-swatch.running { background:var(--accent); }
.slot-swatch.waiting { background:var(--amber); }
.slot-swatch.allocated { background:var(--green); }
.slot-swatch.neutral { background:#9a87b9; }
.slot-swatch.failed { background:var(--red); }
.slot-swatch.unknown { border:1px dashed var(--muted); }
.runtime-grid .card-heading { flex-wrap:nowrap; }
.runtime-grid .card-heading h3 { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.runtime-grid .badge { flex:none; font-variant-numeric:tabular-nums; }
.runtime-secondary .state-indicator { border-top:1px solid var(--border); padding-top:10px; }
.recent-activity { position:relative; display:flex; align-items:center; gap:12px; margin-top:12px; min-height:28px; }
.recent-activity-group { border-top:1px solid var(--border); margin-top:12px; }
.recent-activity-group .slot-swatch { border-radius:50%; }
.recent-activity>.hint { margin:0; flex:none; }
.recent-event>button { width:18px; height:18px; border-radius:50%; }
.recent-activity .slot-row { min-height:18px; padding-bottom:4px; }
@media(max-width:1100px) {
  .runtime-grid { gap:12px; }
}
@media(max-width:640px) {
  .runtime-grid>.capacity-pool { max-width:100%; }
  .capacity-pool>.slot-legend { max-width:100%; }
  .recent-activity { align-items:flex-start; flex-direction:column; gap:6px; }
}