/* Phase 5 - neighbour-relative stack map. Uses the app's design tokens. */
.phase5-panel { margin-top: 22px; }
.p5-source { padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid var(--line); color: var(--muted); }
.p5-source.demonstration { color: var(--amber); border-color: var(--amber); }
.p5-source.live { color: var(--green); border-color: var(--green); }

.p5-wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-top: 14px; }
@media (max-width: 900px) { .p5-wrap { grid-template-columns: 1fr; } }

.p5-stack { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.p5-stack h4 { margin: 0 0 4px; font-size: 13px; }
.p5-stack .p5-meta { color: var(--muted); font-size: 11.5px; margin-bottom: 10px; }
.p5-grid { display: grid; gap: 7px; }
.p5-cell {
  border-radius: 9px; padding: 8px 6px; min-height: 58px; border: 1px solid var(--line);
  background: var(--panel); display: flex; flex-direction: column; justify-content: space-between;
  font-size: 11px; color: var(--text); position: relative; overflow: hidden;
}
.p5-cell b { font-size: 14px; font-weight: 800; }
.p5-cell small { color: var(--muted); font-size: 10px; line-height: 1.2; }
.p5-cell .rel { position: absolute; top: 5px; right: 6px; font-size: 10px; font-weight: 800; opacity: .85; }
.p5-cell.normal { border-color: #2e5a45; }
.p5-cell.attention { border-color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold); }
.p5-cell.warning { border-color: var(--amber); background: rgba(242,184,75,.14); }
.p5-cell.critical { border-color: var(--red); background: rgba(239,106,99,.20); box-shadow: 0 0 0 1px var(--red); }
.p5-cell.insufficient { opacity: .5; }

.p5-rank { background: var(--panel2); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.p5-rank h4 { margin: 0 0 10px; font-size: 13px; }
.p5-item { border-bottom: 1px dashed var(--line); padding: 9px 0; }
.p5-item:last-child { border-bottom: 0; }
.p5-item .top { display: flex; justify-content: space-between; align-items: baseline; }
.p5-item .top b { font-size: 13px; }
.p5-badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid var(--line); }
.p5-badge.warning { color: var(--amber); border-color: var(--amber); }
.p5-badge.critical { color: var(--red); border-color: var(--red); }
.p5-badge.normal, .p5-badge.attention { color: var(--muted); }
.p5-z { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.p5-z span { color: var(--gold2); font-weight: 700; }
.p5-note { color: var(--muted); font-size: 11.5px; margin-top: 12px; line-height: 1.5; }