/* ============================================================
   $TKN247 -- the status blocks (status.js, KP-27)
   ------------------------------------------------------------
   Linked by /status (status.html) and by the site (index.html),
   where the same blocks draw inside the section shell (#status).
   Colours and type come from tokens.css; the page shell (.ck-bar,
   .ck-body, .sec-state) is the section framework's (UI-10).
   ============================================================ */
.st{ display:grid; gap:1.1rem; }
.st .sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.st-sec{
  min-width:0; padding:clamp(.8rem,2.6cqw,1.2rem); border:1px solid var(--line); border-radius:8px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
}
/* a link to #pending (the Floor's TIMELOCK row) lands under the sticky bar, not behind it */
.st-sec, #pending{ scroll-margin-top:4.5rem; }
.st-h{ margin:0 0 .7rem; font:400 clamp(1.3rem,4cqw,1.6rem)/1 var(--font-crt); letter-spacing:.05em; color:var(--p); text-shadow:var(--glow-s); }
.st-lede, .st-dim, .st-disc, .st-why{ margin:.2rem 0 .7rem; max-width:70ch; font-size:.72rem; line-height:1.7; color:var(--paper-dim); }
.st-dim:last-child, .st-disc:last-child{ margin-bottom:0; }
.st-disc{ color:var(--paper); border-left:2px solid var(--warm-dim); padding-left:.7rem; }

/* the banner */
.st-banner{ text-align:center; }
.st-big{ margin:.2rem 0 .3rem; font:400 clamp(2.2rem,9cqw,3.6rem)/1 var(--font-crt); letter-spacing:.06em; }
.st-big[data-overall="ok"]{ color:var(--p); text-shadow:var(--glow-m); }
.st-big[data-overall="degraded"]{ color:var(--warm); }
.st-big[data-overall="down"]{ color:var(--red); }
.st-big[data-overall="unknown"]{ color:var(--paper-dim); }
.st-banner .st-why, .st-banner .st-dim{ margin-left:auto; margin-right:auto; }
.st-banner .st-why{ color:var(--paper); }

/* rows: a label, a verdict, and the monitor's words under them */
.st-rows, .st-inc, .st-addrs{ list-style:none; margin:0; padding:0; }
.st-row{
  display:grid; grid-template-columns:minmax(9rem,14rem) 1fr; gap:.15rem .9rem; align-items:baseline;
  padding:.5rem 0; border-top:1px solid var(--grid);
}
.st-row:first-child{ border-top:0; padding-top:0; }
.st-k{ font-size:.64rem; letter-spacing:.14em; color:var(--paper-dim); text-transform:uppercase; }
.st-v{ font-size:.78rem; color:var(--paper); }
.st-m{ grid-column:2; font-size:.66rem; line-height:1.6; color:var(--paper-dim); overflow-wrap:anywhere; }
.st-warn{ color:var(--warm); font-weight:600; }
.st-crit{ color:var(--red); font-weight:600; }
.st-pill{
  display:inline-block; min-width:3.6em; padding:.1rem .45rem; border:1px solid currentColor; border-radius:3px;
  font:600 .6rem/1.4 var(--font-mono); letter-spacing:.14em; text-align:center;
}
.st-pill[data-state="ok"]{ color:var(--p); }
.st-pill[data-state="info"]{ color:var(--p-hot); }
.st-pill[data-state="warn"]{ color:var(--warm); }
.st-pill[data-state="crit"]{ color:var(--red); }
.st-pill[data-state="unknown"]{ color:var(--paper-dim); }
.st-row[data-match="no"] .st-v{ color:var(--red); }
.st-row[data-match="yes"] .st-v{ color:var(--p); }

/* The Machine: 24 hours x job */
.st-gridwrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.st-grid{ width:100%; min-width:320px; border-collapse:separate; border-spacing:2px; table-layout:fixed; }
.st-grid th{ font:400 .58rem/1.2 var(--font-mono); color:var(--paper-dim); text-align:left; white-space:nowrap; overflow:visible; }
.st-grid thead th{ height:1.1rem; vertical-align:bottom; }
/* the newest hour's label ends at the grid's edge instead of running past it */
.st-grid thead th:last-child{ direction:rtl; }
.st-grid .st-job{ width:6.4rem; padding-right:.3rem; overflow:hidden; text-overflow:ellipsis; letter-spacing:.04em; }
.st-grid td{ height:.95rem; padding:0; border-radius:2px; }
.st-grid td[data-s], .st-legend span[data-s]{ background:var(--grid); }
.st-grid td[data-s="sent"], .st-legend span[data-s="sent"]{ background:var(--p); }
.st-grid td[data-s="would_send"]{ background:var(--p-mid); }
.st-grid td[data-s="not_due"], .st-grid td[data-s="skipped"], .st-grid td[data-s="disabled"],
.st-legend span[data-s="not_due"]{ background:var(--p-dim); }
.st-grid td[data-s="stuck"], .st-grid td[data-s="other"], .st-legend span[data-s="stuck"]{ background:var(--warm); }
.st-grid td[data-s="failed"], .st-legend span[data-s="failed"]{ background:var(--red); }
.st-legend{ margin:.6rem 0 0; font-size:.58rem; letter-spacing:.12em; color:var(--paper-dim); line-height:2; }
.st-legend span{ display:inline-block; width:.7rem; height:.7rem; margin:0 .3rem 0 .6rem; border-radius:2px; vertical-align:-1px; }
.st-legend span:first-child{ margin-left:0; }
#st-machine .st-rows{ margin-top:.9rem; }

/* PENDING CHANGES (UI-31): the timelock's operations, one call per line */
.st-sub{ margin:1rem 0 .5rem; font:600 .62rem/1.2 var(--font-mono); letter-spacing:.18em; color:var(--p-mid); }
#pending .st-sub{ margin-top:.2rem; }
.st-ops, .st-calls{ list-style:none; margin:0; padding:0; }
.st-op{ padding:.6rem 0; border-top:1px solid var(--grid); }
.st-op:first-child{ border-top:0; padding-top:0; }
.st-op-h{ margin:0 0 .35rem; font-size:.66rem; letter-spacing:.1em; color:var(--paper); }
.st-op[data-critical="yes"][data-state="pending"] .st-eta,
.st-op[data-state="ready"] .st-eta{ color:var(--warm); }
.st-op[data-state="executed"], .st-op[data-state="cancelled"]{ opacity:.75; }
.st-op[data-state="cancelled"] .st-call{ text-decoration:line-through; }
.st-calls li{ margin:.15rem 0; }
.st-call{ font:400 .74rem/1.5 var(--font-mono); color:var(--p-hot); overflow-wrap:anywhere; }
.st-call[data-known="no"]{ color:var(--red); font-weight:600; }
.st-calls .st-m{ display:block; }
.st-op > .st-m{ margin:.3rem 0 0; }
.st-op a, .st-row a{ color:var(--p-hot); }

/* incidents and addresses */
.st-inc li{ padding:.5rem 0; border-top:1px solid var(--grid); font-size:.74rem; color:var(--paper); }
.st-inc li:first-child{ border-top:0; padding-top:0; }
.st-inc .st-m{ display:block; margin-top:.25rem; }
.st-addrs li{ display:grid; grid-template-columns:minmax(8rem,12rem) 1fr; gap:.1rem .9rem; padding:.3rem 0; border-top:1px solid var(--grid); }
.st-addrs li:first-child{ border-top:0; }
.st-addrs a{ font-size:.68rem; color:var(--p-hot); overflow-wrap:anywhere; text-decoration:none; }
.st-addrs a:hover, .st-addrs a:focus-visible{ text-decoration:underline; outline:none; }

@container (max-width:520px){
  .st-row, .st-addrs li{ grid-template-columns:1fr; }
  .st-m{ grid-column:1; }
}
@media (max-width:520px){
  .st-row, .st-addrs li{ grid-template-columns:1fr; }
  .st-m{ grid-column:1; }
  .st-grid .st-job{ width:5.2rem; }
}