/* ============================================================
   Axion Software -- the public service status page (SVC7QK2M)

   The one URL we hand out to people who are already unhappy, often read on a
   phone, often over a connection they are blaming us for. So: no framework, no
   web fonts beyond the ones the site already self-hosts, and everything above
   the fold legible before a single byte of JSON arrives.

   Colour carries meaning here, so it is never the ONLY carrier: every state
   also has a word next to it. A red dot on its own is unreadable to a
   colour-blind reader and invisible to a screen reader.
   ============================================================ */

.st-page { max-width: 900px; margin: 0 auto; padding: 0 40px 90px; }

/* ── The headline ─────────────────────────────────────────────────────────
   Deliberately large and deliberately first. Most people who open this page
   want one sentence and then to leave. */

.st-hero {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--dark2);
  padding: 26px 28px;
  margin: 0 0 34px;
}
.st-hero-in { display: flex; align-items: flex-start; gap: 16px; }

.st-dot {
  flex: none;
  width: 14px; height: 14px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.st-headline {
  font-family: 'Exo 2', sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--white);
}
.st-sub   { margin-top: 6px; font-size: 15px; color: var(--muted); line-height: 1.6; }
.st-asof  { margin-top: 16px; font-size: 12.5px; color: var(--muted); }

/* One accent per state, on the border, the dot and the headline together, so
   the whole card reads as the answer rather than a card with a dot on it. */
.st-hero[data-state="operational"] { border-color: rgba(39,153,76,.45); }
.st-hero[data-state="operational"] .st-dot { background: #27994c; box-shadow: 0 0 0 4px rgba(39,153,76,.18); }
.st-hero[data-state="operational"] .st-headline { color: #4ade80; }

.st-hero[data-state="info"] { border-color: rgba(0,207,255,.4); }
.st-hero[data-state="info"] .st-dot { background: var(--cyan); box-shadow: 0 0 0 4px rgba(0,207,255,.16); }
.st-hero[data-state="info"] .st-headline { color: var(--cyan); }

.st-hero[data-state="maintenance"] { border-color: rgba(59,111,245,.45); }
.st-hero[data-state="maintenance"] .st-dot { background: var(--blue); box-shadow: 0 0 0 4px rgba(59,111,245,.18); }
.st-hero[data-state="maintenance"] .st-headline { color: #7fb2ff; }

.st-hero[data-state="degraded"] { border-color: rgba(245,158,11,.45); }
.st-hero[data-state="degraded"] .st-dot { background: #f59e0b; box-shadow: 0 0 0 4px rgba(245,158,11,.18); }
.st-hero[data-state="degraded"] .st-headline { color: #fcd34d; }

.st-hero[data-state="partial"],
.st-hero[data-state="major"] { border-color: rgba(220,38,38,.5); }
.st-hero[data-state="partial"] .st-dot,
.st-hero[data-state="major"]   .st-dot { background: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.2); }
.st-hero[data-state="partial"] .st-headline,
.st-hero[data-state="major"]   .st-headline { color: #ff8888; }

/* "We could not read the status board" is its own look, not a fake green and
   not a fake red. A status page that guesses is worse than one that admits it
   does not know. */
.st-hero[data-state="unknown"] { border-color: rgba(255,255,255,.16); }
.st-hero[data-state="unknown"] .st-dot { background: var(--muted); }

/* ── Blocks ──────────────────────────────────────────────────────────── */

.st-block { margin: 0 0 40px; }
.st-h {
  font-family: 'Exo 2', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.st-note { font-size: 14px; color: var(--muted); line-height: 1.7; margin-bottom: 16px; }

/* ── The filter ──────────────────────────────────────────────────────────
   A segmented control, not a <select>: four options is few enough to show at
   once, and the counts beside each label are half the reason it is worth
   having -- a reader can see there IS scheduled work without clicking.

   Colour is never the only carrier of which one is on. The selected button
   also carries aria-pressed and a filled background, so it reads as chosen to
   a screen reader and at a glance in high contrast. */

.st-filter { margin: 0 0 30px; }

.st-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--dark2);
}

.st-seg-b {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.st-seg-b:hover { color: var(--text); background: rgba(255, 255, 255, .04); }
.st-seg-b:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.st-seg-b.is-on {
  color: var(--text);
  background: rgba(59, 111, 245, .16);
  border-color: rgba(59, 111, 245, .45);
}

/* The count. Blank when zero -- a row of zeroes is noise, and "Scheduled"
   with nothing after it already says there is none. */
.st-seg-n:empty { display: none; }
.st-seg-n {
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--muted);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.st-seg-b.is-on .st-seg-n { background: rgba(59, 111, 245, .3); color: var(--text); }

@media (max-width: 620px) {
  /* Two per row rather than four squeezed ones: this page is read on a phone
     more than anywhere else. */
  .st-seg-b { flex: 1 1 calc(50% - 6px); }
}

/* ── An incident ─────────────────────────────────────────────────────── */

.st-inc {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--dark2);
  padding: 20px 22px;
  margin-bottom: 14px;
}
.st-inc[data-sev="major"], .st-inc[data-sev="partial"]  { border-left-color: #dc2626; }
.st-inc[data-sev="degraded"]                            { border-left-color: #f59e0b; }
.st-inc[data-sev="maintenance"]                         { border-left-color: var(--blue); }
.st-inc[data-sev="info"]                                { border-left-color: var(--cyan); }

.st-inc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.st-inc-title {
  font-family: 'Exo 2', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
}
.st-pill {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.st-pill[data-sev="major"], .st-pill[data-sev="partial"] { color: #ff8888; }
.st-pill[data-sev="degraded"]    { color: #fcd34d; }
.st-pill[data-sev="maintenance"] { color: #7fb2ff; }
.st-pill[data-sev="info"]        { color: var(--cyan); }
.st-pill.st-pill-state           { color: var(--muted); }
.st-ref { margin-left: auto; font-size: 11.5px; color: rgba(136,146,164,.75); font-family: monospace; }

.st-inc-body {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--text);
  line-height: 1.7;
}
.st-inc-body p        { margin: 8px 0; }
.st-inc-body p:first-child { margin-top: 0; }
.st-inc-body a        { color: var(--cyan); }
.st-inc-body ul,
.st-inc-body ol       { margin: 8px 0; padding-left: 1.5em; }
.st-inc-body li       { margin: 3px 0; }
.st-inc-body blockquote {
  margin: 8px 0; padding-left: 12px;
  border-left: 3px solid rgba(0,207,255,.4); color: var(--muted);
}
.st-inc-body code {
  background: rgba(0,207,255,.1); border-radius: 4px; padding: 1px 5px; font-size: .92em;
}

/* The window and the expected downtime. Two facts, given equal weight and
   labelled, because they are different numbers and quoting one as the other is
   the mistake this whole page exists to avoid. */
.st-facts {
  display: flex; flex-wrap: wrap; gap: 22px;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--border);
}
.st-fact .k {
  font-family: 'Exo 2', sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 4px;
}
.st-fact .v { font-size: 14px; color: var(--text); font-weight: 600; }

/* ── The timeline ────────────────────────────────────────────────────── */

.st-timeline { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.st-upd { padding: 9px 0; }
.st-upd + .st-upd { border-top: 1px solid rgba(255,255,255,.045); }
.st-upd-hd {
  font-size: 11.5px; color: var(--muted); margin-bottom: 4px;
  display: flex; gap: 8px; flex-wrap: wrap;
}
.st-upd-hd strong { color: var(--text); font-weight: 700; }
.st-upd-body { font-size: 13.5px; color: var(--muted); line-height: 1.65; }
.st-upd-body p { margin: 4px 0; }
.st-upd-body a { color: var(--cyan); }

/* ── Services ────────────────────────────────────────────────────────── */

.st-comp-list { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.st-comp {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: var(--dark2);
}
.st-comp + .st-comp { border-top: 1px solid var(--border); }
.st-comp-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.st-comp-blurb { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.st-comp-state {
  margin-left: auto; text-align: right; white-space: nowrap;
  font-size: 13px; font-weight: 600;
}
.st-comp[data-state="operational"] .st-comp-state { color: #4ade80; }
.st-comp[data-state="info"]        .st-comp-state { color: var(--cyan); }
.st-comp[data-state="maintenance"] .st-comp-state { color: #7fb2ff; }
.st-comp[data-state="degraded"]    .st-comp-state { color: #fcd34d; }
.st-comp[data-state="partial"]     .st-comp-state,
.st-comp[data-state="major"]       .st-comp-state { color: #ff8888; }

/* ── History ─────────────────────────────────────────────────────────── */

.st-past {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}
.st-past:last-child { border-bottom: none; }
.st-past-when { font-size: 12.5px; color: var(--muted); min-width: 130px; }
.st-past-title { font-size: 14px; color: var(--text); font-weight: 600; }
.st-past-dur { margin-left: auto; font-size: 12.5px; color: var(--muted); }
/* A finished window and a resolved outage are both done, and are not the same
   news. The word does the work -- there is no colour-only signal here. */
.st-past-tag {
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

/* ── Footer block ────────────────────────────────────────────────────── */

.st-foot { border-top: 1px solid var(--border); padding-top: 30px; }
.st-foot-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }

/* ── Phones ──────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .st-page { padding: 0 24px 70px; }
  .st-hero { padding: 22px 20px; }
  .st-headline { font-size: 21px; }
  .st-inc { padding: 17px 16px; }
  .st-ref { margin-left: 0; flex-basis: 100%; }
  .st-comp { flex-wrap: wrap; }
  .st-comp-state { margin-left: 0; flex-basis: 100%; text-align: left; }
  .st-past-dur { margin-left: 0; flex-basis: 100%; }
}