/*
 * The site status page (status.html, V18). Loaded by that page only, after the main stylesheet.
 *
 * Tokens only: it reads the same role tokens the main stylesheet does (--fg, --bg, --line, the fonts, the spacing
 * scale), so it follows the light and dark themes without a rule of its own. A state is always said in WORDS in its
 * box (Working, Paused, Not working); the reversed box only makes a problem easier to find. Nothing here depends on
 * colour alone. The fonts are read by their Rev10 names (--ss-font-text, --ss-font-ticket), never by the V18 names the main
 * stylesheet keeps only until the islands are rebuilt (line review R-rev10-g4-09 F10).
 */
.status-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-2) var(--s-5); align-items: center; }
.status-list__name { font: 800 clamp(18px, 1.6vw, 22px)/1.15 var(--ss-font-text); letter-spacing: 0; }
.status-list__state { justify-self: end; padding: 7px 10px; border: var(--bw) solid var(--line); font: 500 12px/1 var(--ss-font-ticket); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; }
.status-list__state[data-state="problem"] { background: var(--fg); color: var(--bg); }
.status-list__state[data-state="paused"] { border-style: dashed; }
.status-list__state[data-state="checking"], .status-list__state[data-state="unknown"] { color: var(--fg-2); }
.status-list__note { grid-column: 1 / -1; font: 400 16px/1.45 var(--ss-font-text); letter-spacing: 0; color: var(--fg-2); max-width: 46em; }
.status-list__note:empty { display: none; }
.status-checked { margin: var(--s-4) 0; font: 500 12px/1.4 var(--ss-font-ticket); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.status-key { margin: 0 0 var(--s-6); max-width: 46em; }
.status-key dt { margin-top: var(--s-4); font: 800 17px/1.3 var(--ss-font-text); }
.status-key dd { margin: var(--s-1) 0 0; }
@media (max-width: 479px) {
  .status-list li { grid-template-columns: minmax(0, 1fr); }
  .status-list__state { justify-self: start; }
}
/* On paper no background is printed, so the reversed box of a problem would be white words on white. It is printed as black
   words in a heavy rule, like every reversed label of the site (sear-shred.css, PRINT; line review F-browser-03 F01). */
@media print {
  .status-list__state[data-state="problem"] { background: #fff; color: #000; border-width: 3px; }
}