/* Server status: live cards, history chart, heatmap. */
.status-wrap { max-width: 1240px; }
.status-links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; }
.status-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 16px; }
.status-total { color: var(--ink); font-family: var(--font-head); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; }
.status-meta { color: var(--muted); font-size: .85rem; }
.status-meta.stale { color: var(--amber); font-weight: 700; }

.embed {
  margin: 0 0 14px; padding: 16px 18px;
  border: 1px solid var(--line); border-inline-start: 4px solid var(--bar, var(--purple-2));
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  break-inside: avoid;
}
.embed h2 { margin: 0 0 8px; font-size: 1rem; }
.regions { columns: 3 330px; column-gap: 14px; }
.region .top { display: flex; align-items: center; gap: 8px; }
.region .title { color: var(--ink); font-family: var(--font-head); font-size: .92rem; font-weight: 800; white-space: nowrap; }
.region .count { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.region .spark { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.region .spark svg { display: block; width: 84px; height: 20px; }
.region .line { margin-top: 3px; color: var(--ink-soft); font-size: .86rem; }
.region .line b { color: var(--ink); font-weight: 700; }
.region .mode { white-space: nowrap; }
.legend { margin: 2px 0 20px; color: var(--muted); font-size: .78rem; }

.hist { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 10px; }
.controls h2 { margin: 0 8px 0 0; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--line); border-radius: 7px; background: var(--panel-3); }
.seg button {
  padding: 5px 10px; border: 0; background: transparent; color: var(--ink-soft);
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--gold); color: #160B24; font-weight: 800; }
select {
  padding: 5px 9px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel-3); color: var(--ink); font: inherit; font-size: .8rem;
}
.stats { margin-bottom: 8px; color: var(--ink-soft); font-size: .88rem; }
.stats b { color: var(--ink); font-family: var(--font-head); font-size: 1rem; }
.stats .sep { margin: 0 5px; color: var(--muted); }
.chart { position: relative; direction: ltr; }
.chart svg { display: block; width: 100%; height: 170px; overflow: visible; }
.chart .area { fill: rgba(143, 44, 226, .28); }
.chart .avg { fill: none; stroke: var(--gold); stroke-width: 2; }
.chart .peak { fill: none; stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 3 3; opacity: .55; }
.chart .grid { stroke: var(--line); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 10px; }
.chart .cursor { stroke: var(--muted); stroke-width: 1; }
.tip {
  position: absolute; display: none; pointer-events: none;
  padding: 4px 8px; border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--bg-deep); color: var(--ink-soft); font-size: .76rem; white-space: nowrap; direction: ltr;
}
.note { color: var(--muted); font-size: .78rem; }
.tables { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; align-items: start; }
.tables table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.tables th, .tables td { padding: 4px 4px; text-align: end; }
.tables th { border-bottom: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.tables th:first-child, .tables td:first-child { text-align: start; }
.tables td.name button {
  padding: 0; border: 0; background: none; color: var(--ink-soft);
  font: inherit; text-align: start; cursor: pointer;
}
.tables td.name button:hover { color: var(--gold); text-decoration: underline; }
.tables td.name button.on { color: var(--gold); font-weight: 700; }
.tables td.name .sw { display: inline-block; width: 8px; height: 8px; margin-inline-end: 5px; border-radius: 2px; }
.tables td.muted { color: var(--muted); }

.heat { display: grid; grid-template-columns: 2.4em repeat(24, minmax(0, 1fr)); gap: 2px; direction: ltr; font-size: .68rem; }
.heat .c { height: 14px; border-radius: 2px; background: var(--heat-0); }
.heat .d { color: var(--muted); line-height: 14px; }
.heat .h { width: 0; color: var(--muted); white-space: nowrap; }
.heat .c:hover { outline: 1px solid var(--gold); }
.busy { margin-top: 8px; color: var(--ink-soft); font-size: .82rem; }
.busy b { color: var(--ink); }

.about { padding: 0; }
.about summary {
  padding: 16px 20px; color: var(--ink);
  font-family: var(--font-head); font-weight: 700; cursor: pointer; list-style: none;
}
.about summary::-webkit-details-marker { display: none; }
.about ul { margin: 0; padding: 0 20px 18px 36px; color: var(--muted); font-size: .85rem; }
:root { --heat-accent: var(--purple-2); --heat-0: #251A42; }

@media (max-width: 960px) {
  .hist { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .regions { columns: 1; }
  .tables { grid-template-columns: 1fr; }
  .heat { font-size: .58rem; grid-template-columns: 1.8em repeat(24, minmax(0, 1fr)); }
  .heat .c { height: 12px; }
  .controls h2 { width: 100%; margin-bottom: 4px; }
}