/* /status: one row per part of the service. State is shown by word AND a shaped dot, never color alone. */
.overall { font-size: 1.15rem; font-weight: 600; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--panel); }
.overall[data-state="up"] { border-color: rgba(80, 200, 120, 0.45); }
.overall[data-state="degraded"] { border-color: rgba(240, 180, 40, 0.55); }
.overall[data-state="down"] { border-color: var(--ember); }

.parts { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.part { display: grid; grid-template-columns: 14px 1fr auto; grid-template-areas: "dot name state" ". note note"; align-items: center; gap: 4px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.part .dot { grid-area: dot; width: 12px; height: 12px; border-radius: 50%; }
.part .name { grid-area: name; }
.part .state { grid-area: state; font-weight: 600; font-size: 0.9rem; }
.part .note { grid-area: note; color: var(--muted); font-size: 0.9rem; }
.part--up .dot { background: #50c878; }
.part--degraded .dot { background: #f0b428; border-radius: 2px; transform: rotate(45deg); }
.part--down .dot { background: var(--ember); border-radius: 2px; }
.part--up .state { color: #7fdc9c; }
.part--degraded .state { color: #f5c955; }
.part--down .state { color: var(--ember); }

@media (max-width: 520px) {
  .part { grid-template-columns: 14px 1fr; grid-template-areas: "dot name" ". state" ". note"; }
}