/* Status page (/status.html) only. Builds on trust.css (.st-head, .st-list, .st-row, .st-bars, .inc). */

.st-head { transition: background-color .2s, border-color .2s; }
.st-head.is-deg { background: rgba(255, 181, 71, .07); border-color: rgba(255, 181, 71, .35); }
.st-head.is-deg .dot { background: var(--amber); box-shadow: 0 0 0 6px rgba(255, 181, 71, .15); }
.st-head.is-down { background: rgba(255, 93, 82, .07); border-color: rgba(255, 93, 82, .38); }
.st-head.is-down .dot { background: var(--red); box-shadow: 0 0 0 6px rgba(255, 93, 82, .16); }
.st-head.is-unk { background: var(--card); border-color: var(--line-2); }
.st-head.is-unk .dot { background: var(--text-3); box-shadow: 0 0 0 6px rgba(107, 114, 133, .16); }
.st-head .dot { margin-left: 0; flex: none; }   /* trust.css's `.st-head span { margin-left: auto }` also caught the dot */
.st-head #stChecked { font-variant-numeric: tabular-nums; }

.st-r1 { flex-wrap: wrap; row-gap: 4px; }
.st-state { margin-left: auto; font-size: 14px; font-weight: 600; white-space: nowrap; }
.st-state.ok { color: var(--green); }
.st-state.deg { color: var(--amber); }
.st-state.down { color: var(--red); }
.st-state.unk { color: var(--text-3); }

.st-bars i.n { background: var(--card-2); opacity: 1; }
.st-scale .d45 { display: none; }

.st-incs { list-style: none; margin: 4px 0 0; padding: 0; }
.st-incs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.st-incs li:first-child { border-top: 0; }
.st-incs b { color: var(--text); font-weight: 600; }
.st-incs .sev { font-size: 13px; font-weight: 600; }
.st-incs .sev.deg { color: var(--amber); }
.st-incs .sev.down { color: var(--red); }
.st-incs .when { grid-column: 1 / -1; color: var(--text-3); font-size: 13.5px; font-variant-numeric: tabular-nums; }

.st-note { margin-top: 18px; color: var(--text-3); font-size: 14px; line-height: 1.6; }

@media (max-width: 640px) {
  .st-scale .d90 { display: none; }
  .st-scale .d45 { display: inline; }
  .st-r1 .up { order: 3; width: 100%; }
}