/* sos.css — the Site-of-Service page (#/sos), V3.
   Colour carries ONE meaning here: green = money at the ASC, grey = the sites are equivalent,
   red = something is missing. A flag chip is never decorative — every one of them is a fact the
   scheduler can act on, so they get the same weight as the dollars. Light and dark both explicit;
   nothing is left to the host page's ground. */

.sos-banner { padding: 14px 18px; margin-bottom: 14px; border-left: 4px solid; }
.sos-banner.sos-ok   { background: #e7f6f2; border-color: #0d7d7a; color: #0b5b59; }
.sos-banner.sos-hold { background: #fff7e8; border-color: #b4690e; color: #7a4708; }
.sos-why { margin: 6px 0 0 18px; padding: 0; font-size: 12px; }
.sos-why li { margin: 2px 0; }

.sos-stat-l { font-size: 11.5px; color: #94a3b8; font-weight: 700;
              text-transform: uppercase; letter-spacing: .04em; }
.sos-stat-v { font-size: 25px; font-weight: 800; color: #0f1b2d; margin-top: 6px; }
.sos-sub    { font-size: 11.5px; color: #64748b; }
.sos-none   { color: #cbd5e1; }

.sos-table td { vertical-align: top; }
.sos-table .sos-t   { font-size: 12px; white-space: nowrap; }
.sos-table .sos-kind{ font-weight: 700; font-size: 12.5px; }
.sos-row.sos-inel   { opacity: .72; }          /* shown, never hidden (decision B) */
.sos-flags { min-width: 220px; }

.sos-up   { color: #0d7d7a; }
.sos-down { color: #334155; }
.sos-flat { color: #94a3b8; }

.sos-chip { display: inline-block; padding: 2px 8px; margin: 1px 3px 1px 0; border-radius: 9px;
            font-size: 11px; font-weight: 700; white-space: nowrap; cursor: help; }
.sos-good { background: #e7f6f2; color: #0d7d7a; }
.sos-warn { background: #fff7e8; color: #b4690e; }
.sos-bad  { background: #fdecef; color: #b4322f; }
.sos-mute { background: #eef2f7; color: #475569; }

.sos-read { padding: 12px 16px; font-size: 12.5px; color: #475569; background: #f8fafc; }

/* The viewer's theme is authoritative; only the tokens change, never the meaning. */
:root[data-theme="dark"] .sos-banner.sos-ok   { background: #0d2c2b; color: #7fd7cf; }
:root[data-theme="dark"] .sos-banner.sos-hold { background: #33240d; color: #e6b271; }
:root[data-theme="dark"] .sos-stat-v { color: #e8eef7; }
:root[data-theme="dark"] .sos-sub    { color: #93a4bb; }
:root[data-theme="dark"] .sos-none   { color: #46536b; }
:root[data-theme="dark"] .sos-good { background: #0d2c2b; color: #7fd7cf; }
:root[data-theme="dark"] .sos-warn { background: #33240d; color: #e6b271; }
:root[data-theme="dark"] .sos-bad  { background: #351619; color: #eb8b8b; }
:root[data-theme="dark"] .sos-mute { background: #1d2635; color: #a5b4c8; }
:root[data-theme="dark"] .sos-up   { color: #4fc3b8; }
:root[data-theme="dark"] .sos-down { color: #c3cddc; }
:root[data-theme="dark"] .sos-read { background: #141c29; color: #a5b4c8; }

/* v3.1 — the "why" drilldown and the plain-language flag column */
.sos-why-cell { max-width: 340px; font-size: 12px; line-height: 1.45; }
.sos-why-modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); overflow: auto; z-index: 90; }
.sos-row { cursor: pointer; }