/* The status page, on top of the admin's admin.css (cards, badges, notices, buttons). */
.status-bar { margin-bottom: 0.8rem; }
.status-bar > * { margin-bottom: 0; }
.section-title { margin: 1.5rem 0 0.2rem; }
.section-note { display: block; margin-bottom: 0.8rem; color: var(--pico-muted-color); }

/* A warning beside its value: the page's notice, shrunk to a tag. */
.notice.tag { display: inline-block; padding: 0.05rem 0.5rem; margin: 0 0 0 0.3rem; font-size: 0.78rem; }

.meters { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-bottom: 0.8rem; }
.meter progress { margin: 0.3rem 0; height: 0.6rem; }

.kv { margin-bottom: 0.15rem; overflow-wrap: anywhere; }
.kv .k { color: var(--pico-muted-color); }
.kv .k::after { content: ':'; }

/* One streamer: the head, three columns of the streamer's own, then a row per picked jar. Below 700 px the columns stack — the row is a card. */
.srow { padding: 1rem 1.2rem; margin-bottom: 0.8rem; }
.srow-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; padding: 0; border: 0; background: none; } /* Pico pulls an article's header out to its edges */
.srow-head .login { font-size: 1.05rem; overflow-wrap: anywhere; }
.srow-cols { display: grid; gap: 0.2rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.srow h4 { margin: 0.6rem 0 0.3rem; font-size: 0.85rem; color: var(--pico-muted-color); text-transform: uppercase; letter-spacing: 0.04em; }
.jrow { margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--pico-muted-border-color); display: grid; gap: 0.1rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.jrow .jtitle { grid-column: 1 / -1; margin-bottom: 0.2rem; }
@media (max-width: 700px) {
  .srow { padding: 0.8rem; }
  .notice.tag { display: block; margin: 0.2rem 0; }
}