/* ==========================================================================
   mcprush — status.css  (status.html only)

   Datasheet, applied to a status page: hairline rules, mono numbers, and one
   colour vocabulary shared by every state marker on the page —
     ok        var(--accent)     operational
     degraded  var(--warn)       slow, partial or wrong for a minority
     down      var(--risk)       unavailable or wrong for everyone affected
     nodata    var(--surface-3)  not measured
   Bars, dots and badges all read from data-s so a state can never be green in
   one widget and amber in another.
   ========================================================================== */

/* ---------- page head ---------------------------------------------------- */
.st-head { align-items: flex-start; flex-wrap: wrap; gap: 20px; }
.st-head-lead { margin-top: 8px; max-width: 68ch; }
.st-head-acts { gap: 8px; flex: none; }
.st-sec-title { margin-top: 8px; }
.st-foot-note { margin-top: 14px; max-width: 96ch; }
.st-band { background: var(--surface-2); border-block: 1px solid var(--line); }

/* ---------- the one-line banner ------------------------------------------ */
.st-banner {
  display: flex; gap: 16px; align-items: flex-start;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r3); background: var(--surface);
  padding: 20px 22px; margin-top: 24px;
}
.st-banner[data-s="degraded"] { border-left-color: var(--warn); }
.st-banner[data-s="down"] { border-left-color: var(--risk); }
.st-banner-ic {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent);
}
.st-banner[data-s="degraded"] .st-banner-ic { background: var(--warn-soft); color: var(--warn); }
.st-banner[data-s="down"] .st-banner-ic { background: var(--risk-soft); color: var(--risk); }
.st-banner-ic svg { width: 18px; height: 18px; }
.st-banner h2 { font-size: 19px; letter-spacing: -.022em; line-height: 1.35; }
.st-banner p { margin-top: 9px; max-width: 92ch; }
.st-metrics { margin-top: 16px; }

/* ---------- state markers ------------------------------------------------ */
.st-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.st-dot[data-s="degraded"] { background: var(--warn); box-shadow: 0 0 0 3px var(--warn-soft); }
.st-dot[data-s="down"] { background: var(--risk); box-shadow: 0 0 0 3px var(--risk-soft); }
.st-dot[data-s="nodata"] { background: var(--ink-3); box-shadow: 0 0 0 3px var(--surface-3); }

/* ---------- legend ------------------------------------------------------- */
.st-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.st-key { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ink-2); }
.st-key i { width: 12px; height: 12px; border-radius: 2px; background: var(--accent); display: block; flex: none; }
.st-key i[data-s="degraded"] { background: var(--warn); }
.st-key i[data-s="down"] { background: var(--risk); }
.st-key i[data-s="nodata"] { background: var(--surface-3); border: 1px solid var(--line-2); }

/* ---------- one component ------------------------------------------------ */
.st-comp { padding: 20px 18px; border-top: 1px solid var(--line); }
.st-comp:first-child { border-top: 0; }
.st-comp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.st-comp-id { min-width: 0; flex: 1 1 340px; }
.st-comp-name { display: flex; align-items: center; gap: 10px; font-size: 15.5px; font-weight: 600; letter-spacing: -.012em; }
.st-comp-desc { margin-top: 6px; max-width: 74ch; }
.st-comp-num { flex: none; text-align: right; min-width: 0; }
.st-comp-up { font: 600 17px/1 var(--mono); letter-spacing: -.03em; }
.st-comp-lab { font: 400 12px/1 var(--mono); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-top: 7px; }
.st-comp-state { font-size: 13px; font-weight: 550; color: var(--accent); }
.st-comp-state[data-s="degraded"] { color: var(--warn); }
.st-comp-state[data-s="down"] { color: var(--risk); }

/* ---------- the 90-day strip --------------------------------------------- */
/* bars are flex tracks with min-width:0 so 90 of them always fit the measure;
   the gap shrinks with the viewport rather than the bars, because a 2px gap
   between 3px bars reads as a dotted line instead of a strip */
.st-strip { display: flex; gap: 2px; height: 34px; margin-top: 16px; align-items: stretch; }
.st-bar { flex: 1 1 0; min-width: 0; border-radius: 2px; background: var(--accent); transition: opacity .1s; }
.st-bar[data-s="degraded"] { background: var(--warn); }
.st-bar[data-s="down"] { background: var(--risk); }
.st-bar[data-s="nodata"] { background: var(--surface-3); }
.st-strip:hover .st-bar { opacity: .38; }
.st-strip .st-bar:hover { opacity: 1; }

.st-axis {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 9px; font-size: 12px; color: var(--ink-3);
}
.st-axis .st-read { text-align: center; min-width: 0; color: var(--ink-2); font-family: var(--mono); font-size: 12px; }
.st-axis .st-end { flex: none; font-family: var(--mono); font-size: 12px; }

/* ---------- the rule ------------------------------------------------------ */
.st-rules { overflow: hidden; }
.st-rules .card-head, .st-deg .card-head { flex-wrap: wrap; }
.st-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-rule { padding: 18px; border-left: 1px solid var(--line); min-width: 0; }
.st-rule:first-child { border-left: 0; }
.st-rule-cond {
  margin-top: 12px; font-size: 13px; color: var(--ink);
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r1);
  background: var(--surface-2); overflow-wrap: anywhere;
}
.st-rule p { margin-top: 11px; }

.st-deg { margin-top: 16px; overflow: hidden; }
.st-counts { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }

.st-srv { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-srv .tile { width: 28px; height: 28px; font-size: 12px; border-radius: 7px; }
.st-srv b { font-weight: 600; }
.st-srv a:hover { color: var(--accent); }
.st-off { font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

/* ---------- incidents ---------------------------------------------------- */
.st-inc { border: 1px solid var(--line); border-radius: var(--r3); background: var(--surface); margin-bottom: 14px; }
.st-inc-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap;
}
.st-inc-head h3 { margin-top: 7px; max-width: 62ch; }
.st-inc-tags { gap: 6px; flex-wrap: wrap; flex: none; }
.st-inc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-inc-grid > div { padding: 16px 18px; border-left: 1px solid var(--line); min-width: 0; }
.st-inc-grid > div:first-child { border-left: 0; }
.st-inc-grid p { font-size: 13.5px; color: var(--ink-2); margin-top: 10px; }
.st-inc-grid .mono { color: var(--ink); }

.st-minor { margin-top: 6px; }
.st-minor-list { margin-top: 12px; }
.st-minor-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px dashed var(--line); min-width: 0; }
.st-minor-row:first-child { border-top: 0; }
.st-minor-when { flex: 0 0 168px; font: 400 12.5px/1.5 var(--mono); color: var(--ink-3); }
.st-minor-row .grow p { font-size: 13.5px; color: var(--ink-2); }

/* ---------- scope + subscribe -------------------------------------------- */
.st-tail { grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.st-tail-right { gap: 16px; }
.st-tail-title { margin-top: 12px; }
.st-p { margin-top: 10px; max-width: 72ch; }
.st-scope { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-top: 20px; }
.st-scope p { margin-top: 8px; }
.st-form { display: grid; gap: 8px; margin-top: 16px; }
.st-form .select { width: 100%; }
.st-form-note { margin-top: 10px; color: var(--ink-3); }
.st-form-note.done { color: var(--accent); }
.st-feed-acts { gap: 8px; margin-top: 14px; flex-wrap: wrap; }
#feed .code { margin-top: 14px; }

/* ---------- responsive ---------------------------------------------------- */
@media (max-width: 1000px) {
  .st-tail { grid-template-columns: 1fr; }
  /* the two cards swap: at full width the scope note is the wide left column
     and the subscribe form the narrow right one, but stacked the form is the
     only thing on this page a reader can act on — and the button at the top of
     the page points straight at it. The scope note is the footnote, so it goes
     last. */
  .st-tail-right { order: -1; }
  .st-inc-grid { grid-template-columns: 1fr; }
  .st-inc-grid > div { border-left: 0; border-top: 1px solid var(--line); }
  .st-inc-grid > div:first-child { border-top: 0; }
  .st-rule-grid { grid-template-columns: 1fr; }
  .st-rule { border-left: 0; border-top: 1px solid var(--line); }
  .st-rule:first-child { border-top: 0; }
}
@media (max-width: 860px) {
  .st-strip { gap: 1.5px; height: 30px; }
  .st-comp-num { text-align: left; }
}
@media (max-width: 720px) {
  .st-scope { grid-template-columns: 1fr; }
  .st-minor-row { flex-direction: column; gap: 4px; }
  .st-minor-when { flex: none; }
  /* the two head actions are the page's only controls at the top and they sit
     side by side, so they take the full ladder — the 40px core.css gives .btn,
     and the same height as the Subscribe button they point at — rather than the
     34px their .btn-sm class would otherwise give them */
  .st-head-acts { width: 100%; gap: 10px; }
  .st-head-acts .btn { height: 40px; flex: 1 1 0; }
}
/* 860px is where core.css gives up on dense tables and lets them scroll inside
   their card. This one should not scroll: seven columns, and the two the rule
   is actually about — success rate and p95 — are the two a sideways scroll
   hides first. Its own minimum is about 775px, so 860 is also the last width at
   which it genuinely fits. Each listing becomes a block: who it is and what
   state it is in on the top line, then the four figures as named pairs. */
@media (max-width: 860px) {
  .st-deg-tbl { display: block; }
  .st-deg-tbl thead { display: none; }
  .st-deg-tbl tbody, .st-deg-tbl tr, .st-deg-tbl td { display: block; }
  .st-deg-tbl tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px 14px; align-items: baseline;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
  }
  .st-deg-tbl tbody tr:last-child { border-bottom: 0; }
  .st-deg-tbl td { border: 0; padding: 0; text-align: left; }
  /* placed by hand: source order is name, publisher, state, then four figures.
     The name takes the line; the state badge sits opposite the publisher rather
     than under it, and the four figures pair off two to a row. */
  .st-deg-srv { grid-column: 1 / -1; grid-row: 1; }
  .st-deg-pub { grid-column: 1; grid-row: 2; font-size: 13px; }
  .st-deg-state { grid-column: 2; grid-row: 2; justify-self: end; }
  .st-deg-tbl td[data-l]:not(.st-deg-pub) {
    display: flex; flex-wrap: wrap; column-gap: 8px; justify-content: space-between;
    padding-top: 7px; border-top: 1px dashed var(--line);
  }
  .st-deg-tbl td[data-l]:not(.st-deg-pub)::before {
    content: attr(data-l);
    font: 500 11px/1.6 var(--mono); text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-3);
  }
}

/* 620px, the width at which core.css says the pointer stops being a mouse: the
   strip below becomes something you scrub with a thumb, so it belongs on the
   phone breakpoint rather than on a 560 of its own. */
@media (max-width: 620px) {
  /* Ninety bars across 358px is about 3px each. A red day in a green field is
     as visible at 3px as at 30, so the shape survives — what does not survive
     is pointing at one. The strip therefore grows into a band you scrub: press
     and drag along it and the line below names the day under your finger (see
     bindStrips). pan-y keeps the page scrolling vertically through it. */
  .st-strip { gap: 1px; height: 40px; touch-action: pan-y; cursor: ew-resize; }
  .st-bar { border-radius: 1px; }
  .st-axis { font-size: 11px; flex-wrap: wrap; }
  /* the day summary is the most useful line on a phone, so it drops onto its
     own row instead of being squeezed out between the two dates */
  .st-axis .st-read { order: 3; flex: 1 0 100%; text-align: left; margin-top: 5px; min-height: 2.6em; }
  .st-banner { padding: 16px; gap: 12px; }
  .st-banner h2 { font-size: 17px; }
  .st-comp { padding: 18px 14px; }
  .st-deg-tbl tr { padding-inline: 14px; }
}

/* ---------- incident history as a list ------------------------------------
   Five write-ups printed in full made this page a report. The row carries what
   a reader scans for; the write-up opens on a click. */
.st-inc { border-top: 1px solid var(--line); }
.st-inc:first-child { border-top: 0; }
.st-inc-head {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 14px 18px; background: none; cursor: pointer; transition: background .14s;
}
.st-inc-head:hover { background: var(--surface-2); }
.st-inc-date { flex: none; width: 92px; font-size: 12px; color: var(--ink-3); }
.st-inc-head b { display: block; font-size: 13.5px; font-weight: 600; letter-spacing: -.012em; }
.st-inc-sub { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-3); }
.st-inc-chev { flex: none; display: grid; place-items: center; color: var(--ink-3); transition: transform .18s; }
.st-inc-chev svg { width: 15px; height: 15px; }
.st-inc.on .st-inc-chev { transform: rotate(180deg); }
.st-inc-body { padding: 0 18px 18px; }
/* On a phone the four things in an incident row cannot share a line, and simply
   letting them wrap put each on one of its own: the date, then the title, then
   the badge beside the chevron — five rows that measured 99, 126, 126, 147 and
   147, a list whose every item was a different height. Two rows instead, placed
   rather than wrapped. The two facts a reader scans — when it was and how bad —
   sit together on the first line, and the sentence and its affected components
   take the second. The title is held to two lines so a long incident cannot
   push its row past a short one. */
@media (max-width: 620px) {
  .st-inc-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto 15px;
    gap: 4px 10px; align-items: center;
    padding: 11px 14px;
  }
  .st-inc-date { grid-column: 1; grid-row: 1; width: auto; }
  .st-inc-head > .badge { grid-column: 2; grid-row: 1; }
  .st-inc-chev { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
  .st-inc-head > .grow { grid-column: 1 / span 2; grid-row: 2; min-width: 0; }
  .st-inc-head b {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; line-height: 1.35;
  }
  .st-inc-body { padding: 0 14px 16px; }
}