/* Sentra 311 status page (with assets/status.js). Uses site.css tokens, with fallbacks. */
#status-app { --st-ok: var(--success, #1A6E44); --st-ok-bg: var(--success-bg, #DDF3E6); --st-warn: var(--warning, #7A4A00); --st-warn-bg: var(--warning-bg, #FFF1D6);
  --st-down: var(--danger, #B42318); --st-down-bg: var(--danger-bg, #FDECEA); --st-none: #D5DCE5; display: flex; flex-direction: column; gap: 28px; }
#status-app[aria-busy="true"]:empty::before { content: 'Loading status…'; color: var(--ink-2, #3A4A60); }
.st-checked { margin: 0; color: var(--ink-2, #3A4A60); font-size: 15px; }
.st-h { font-size: 20px; margin: 0 0 12px; }

.st-banner { display: flex; gap: 14px; align-items: center; padding: 18px 20px; border-radius: 14px; border: 1px solid transparent; }
.st-banner svg { width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; padding: 6px; fill: #fff; }
.st-banner strong { display: block; font-size: 21px; line-height: 1.25; }
.st-banner span { color: var(--ink-2, #3A4A60); font-size: 15px; }
.st-banner.st-operational { background: var(--st-ok-bg); border-color: color-mix(in srgb, var(--st-ok) 30%, transparent); }
.st-banner.st-operational svg { background: var(--st-ok); } .st-banner.st-operational strong { color: var(--st-ok); }
.st-banner.st-degraded { background: var(--st-warn-bg); border-color: color-mix(in srgb, var(--st-warn) 30%, transparent); }
.st-banner.st-degraded svg { background: var(--st-warn); } .st-banner.st-degraded strong { color: var(--st-warn); }
.st-banner.st-disruption { background: var(--st-down-bg); border-color: color-mix(in srgb, var(--st-down) 30%, transparent); }
.st-banner.st-disruption svg { background: var(--st-down); } .st-banner.st-disruption strong { color: var(--st-down); }
.st-banner.st-unknown { background: var(--canvas, #F5F7FA); border-color: var(--line, #E1E6ED); }

.st-components { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line, #E1E6ED); border-radius: 14px; overflow: hidden; background: var(--surface, #fff); }
.st-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; }
.st-row + .st-row { border-top: 1px solid var(--line, #E1E6ED); }
.st-row__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.st-row__text strong { font-size: 17px; }
.st-row__text span { color: var(--ink-2, #3A4A60); font-size: 15px; }
.st-row__text .st-note { color: var(--ink, #0F1B2D); font-weight: 600; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; font-weight: 700; padding: 4px 12px 4px 6px; border-radius: 999px; }
.st-pill svg { width: 18px; height: 18px; border-radius: 50%; fill: #fff; }
.st-pill.st-operational { color: var(--st-ok); background: var(--st-ok-bg); } .st-pill.st-operational svg { background: var(--st-ok); }
.st-pill.st-degraded { color: var(--st-warn); background: var(--st-warn-bg); } .st-pill.st-degraded svg { background: var(--st-warn); }
.st-pill.st-disruption { color: var(--st-down); background: var(--st-down-bg); } .st-pill.st-disruption svg { background: var(--st-down); }
.st-pill.st-inc { color: var(--primary-dark, #08427D); background: var(--primary-tint, #E3EEFA); padding: 3px 10px; }

.st-history { border: 1px solid var(--line, #E1E6ED); border-radius: 14px; padding: 20px; background: var(--surface, #fff); }
.st-history__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.st-history__head .st-h { margin: 0; }
.st-history__head span { color: var(--ink-2, #3A4A60); font-size: 15px; }
.st-bar { display: grid; grid-template-columns: repeat(90, minmax(0, 1fr)); gap: 2px; margin-top: 14px; height: 34px; }
.st-day { display: block; border-radius: 2px; background: var(--st-none); }
.st-day.st-operational { background: var(--st-ok); }
.st-day.st-degraded { background: #9A5B00; }
.st-day.st-disruption { background: var(--st-down); }
.st-axis { display: flex; justify-content: space-between; color: var(--ink-3, #5B6B80); font-size: 13px; margin-top: 6px; }
.st-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 0; padding: 0; font-size: 14px; color: var(--ink-2, #3A4A60); }
.st-legend li { display: inline-flex; align-items: center; gap: 6px; }
.st-legend i { width: 12px; height: 12px; }
.st-days { margin-top: 12px; font-size: 15px; }
.st-days summary { cursor: pointer; color: var(--primary, #0B5CAD); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.st-small { color: var(--ink-2, #3A4A60); font-size: 14px; margin: 6px 0 0; }

.st-incidents { display: flex; flex-direction: column; gap: 12px; }
.st-incidents h2 { font-size: 20px; margin: 0; }
.st-incident { border: 1px solid var(--line, #E1E6ED); border-left: 4px solid var(--st-warn); border-radius: 12px; padding: 14px 18px; background: var(--surface, #fff); }
.st-incident.st-inc-resolved { border-left-color: var(--st-ok); }
.st-incident header { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; }
.st-incident p { margin: 6px 0 0; }

.st-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.st-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border-radius: 14px; border: 1px solid var(--line, #E1E6ED);
  background: var(--canvas, #F5F7FA); color: var(--ink, #0F1B2D); text-decoration: none; }
a.st-card:hover { border-color: var(--primary, #0B5CAD); }
.st-card strong { font-size: 17px; }
.st-card span { color: var(--ink-2, #3A4A60); font-size: 15px; }
.st-card b { position: absolute; right: 18px; top: 16px; color: var(--primary, #0B5CAD); }
.st-links a { font-weight: 600; }

@media (max-width: 640px) {
  .st-row { flex-direction: column; align-items: flex-start; }
  .st-bar { grid-template-columns: repeat(45, minmax(0, 1fr)); height: auto; grid-auto-rows: 22px; } /* two rows of 45 on phones */
  .st-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) { a.st-card { transition: border-color .15s; } }