/* "Is <service> down?" pages and the /service-status board: the live status card, the board rows and their state colours.
   States come from public/status/status.js as data-state. */
.st-page {
  --st-ok: #6ee7a8;
  --st-maint: #8fc4ff;
  --st-warn: #f7d774;
  --st-bad: #ff8a7a;
  --st-idle: #8a8aa0;
}
[data-state="operational"] { --st: var(--st-ok); }
[data-state="maintenance"] { --st: var(--st-maint); }
[data-state="degraded"] { --st: var(--st-warn); }
[data-state="partialOutage"], [data-state="majorOutage"] { --st: var(--st-bad); }
[data-state="idle"], [data-state="loading"], [data-state="unknown"], [data-state="unreadable"] { --st: var(--st-idle); }

.site .st-hero h1 { max-width: 14ch; }
.site .st-official { margin-top: 18px; font: 600 15px var(--mono); color: var(--text-3); }
.st-official a { color: var(--uc); text-decoration: underline; text-underline-offset: 3px; }

/* The live card */
.st-card {
  width: 100%;
  max-width: 480px;
  border: 1px solid color-mix(in srgb, var(--st) 40%, var(--border));
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--st) 10%, #0b0c10), #0b0c10f2 55%);
  box-shadow: 0 40px 90px -30px #000, 0 0 0 1px #ffffff0a, 0 0 80px -30px color-mix(in srgb, var(--st) 55%, transparent);
  text-align: start;
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s;
}
.st-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 20px 22px; border-bottom: 1px solid var(--border); }
.st-mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #ffffff0f; border: 1px solid var(--border); font: 700 16px var(--mono); color: var(--text); }
.site .st-card-name { margin: 0; font-size: 18px; font-weight: 650; color: var(--text); }
.site .st-card-src { margin: 2px 0 0; font: 13px var(--mono); color: var(--text-3); overflow-wrap: anywhere; }
.st-light { width: 14px; height: 14px; border-radius: 50%; background: var(--st); box-shadow: 0 0 0 4px color-mix(in srgb, var(--st) 22%, transparent), 0 0 18px var(--st); }
[data-state="loading"] .st-light { animation: st-pulse 1s ease-in-out infinite alternate; }
@keyframes st-pulse { from { opacity: .35; } to { opacity: 1; } }
.st-card-body { padding: 22px 22px 6px; }
.site .st-state { margin: 0; font-size: clamp(26px, 3vw, 34px); font-weight: 680; letter-spacing: -.03em; line-height: 1.1; color: var(--st); }
.site .st-text { margin: 12px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.site .st-meta { margin: 10px 0 0; font: 13px var(--mono); color: var(--text-3); }
.st-meta:empty { display: none; }
.st-meta a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }
.st-components { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.site .st-components li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 10px; margin: 0; padding: 9px 0; border-bottom: 1px solid #ffffff0a; font-size: 14px; color: var(--text-2); }
.st-cstate { font: 12px var(--mono); color: var(--st); text-align: end; }
.st-cname { overflow-wrap: anywhere; }
.st-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st); }
.st-card-actions { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 22px 22px; }
.st-card-actions .button { font-size: 15px; }
@media (prefers-reduced-motion: reduce) { [data-state="loading"] .st-light { animation: none; } .st-card { transition: none; } }

/* The chain: the service's own link stands out */
.st-chain .st-chain-end:before { background: var(--uc); box-shadow: 0 0 0 2px var(--uc), 0 0 16px var(--uc); }

/* What Kilobat matches */
.st-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 32px; }
.st-facts > div { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius, 18px); background: #ffffff04; }
.site .st-facts h3 { margin: 0; font: 600 12px var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); }
.site .st-facts p { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--text-2); }
.st-facts p a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.st-facts .uc-tags { margin-top: 12px !important; }
.site .st-facts .uc-tags li { font-size: 14px; overflow-wrap: anywhere; }
.site .st-facts .uc-tags code { background: none; padding: 0; font-size: 13px; }

/* Host pages */
.st-hosts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 28px; }
.st-host { display: grid; gap: 8px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 16px; background: #ffffff04; color: var(--text-2); transition: border-color .15s; }
.st-host:hover { border-color: color-mix(in srgb, var(--uc) 50%, var(--border)); }
.site .st-host code { font: 600 15px var(--mono); color: var(--text); background: none; padding: 0; overflow-wrap: anywhere; }
.st-host span { font-size: 15px; line-height: 1.5; }
.st-host small { font: 12px var(--mono); color: var(--text-3); }

/* Related links and sources */
.st-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 24px; margin: 24px 0 0 !important; padding: 0 !important; list-style: none; }
.site .st-links li { margin: 0; font-size: 16px; }
.st-links a { color: var(--text-2); text-decoration: underline; text-decoration-color: #ffffff30; text-underline-offset: 3px; }
.st-links a:hover { color: var(--text); }
.st-sources ul { padding-inline-start: 20px; }
.site .st-sources li { font-size: 15px; overflow-wrap: anywhere; }
.st-sources a { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; }

/* The board */
.st-group { padding-top: 72px; }
.site .st-group > h2 { font-size: clamp(24px, 2.6vw, 32px); }
.st-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; margin: 24px 0 0 !important; padding: 0 !important; list-style: none; }
.site .st-board li { margin: 0; max-width: none; }
.st-board a { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; grid-template-areas: "dot name state" "dot src state"; align-items: center; column-gap: 12px; row-gap: 2px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 14px; background: #ffffff04; transition: border-color .15s, background .15s; }
.st-board a:hover { border-color: color-mix(in srgb, var(--st) 50%, var(--border)); background: #ffffff08; }
.st-board .st-dot { grid-area: dot; }
.st-board strong { grid-area: name; font-size: 16px; font-weight: 620; color: var(--text); overflow-wrap: anywhere; }
.st-row-src { grid-area: src; font: 12px var(--mono); color: var(--text-3); overflow-wrap: anywhere; }
.st-row-state { grid-area: state; font: 12px var(--mono); color: var(--st); text-align: end; max-width: 13ch; }
[data-state="partialOutage"] a, [data-state="majorOutage"] a, [data-state="degraded"] a { border-color: color-mix(in srgb, var(--st) 45%, var(--border)); }
.st-hub-card .st-problems { margin: 0 !important; padding: 16px 18px 20px !important; grid-template-columns: minmax(0, 1fr); max-height: 360px; overflow: auto; }
.site .st-allclear { margin: 0; font-size: 16px; line-height: 1.55; color: var(--st-ok); }
.st-hub-card noscript p { padding: 18px 22px; }

@media (max-width: 820px) {
  .st-card { max-width: none; }
  .st-board { grid-template-columns: minmax(0, 1fr); }
}

/* The hub's wall: one dot per service */
.st-wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(22px, 1fr)); gap: 7px; margin: 20px 0 18px !important; padding: 0 !important; list-style: none; }
.site .st-wall li { margin: 0; }
.st-wall a { display: block; aspect-ratio: 1; border-radius: 7px; background: color-mix(in srgb, var(--st) 75%, transparent); box-shadow: 0 0 12px -2px color-mix(in srgb, var(--st) 60%, transparent); transition: transform .15s; }
.st-wall [data-state="unreadable"] a, .st-wall [data-state="idle"] a { background: #ffffff14; box-shadow: none; }
.st-wall a:hover { transform: scale(1.18); }
.st-hub-card .st-problems { border-top: 1px solid var(--border); }
.st-page .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* The service's logo between the status dot and its name. */
.st-board a { grid-template-columns: 10px 32px minmax(0, 1fr) auto; grid-template-areas: "dot logo name state" "dot logo src state"; }
.st-board .brand-logo { grid-area: logo; }
.site .st-incident { margin: 8px 0 0; padding-left: 10px; border-left: 2px solid currentColor; font-size: 14px; line-height: 1.45; color: var(--text); }