/*
 * System Status (/status/) - loaded after trust.css, which supplies the .tzt
 * tokens, sections, wrap, buttons, rows and table. This file only adds what is
 * specific to status: the state colours, the banner, the component cards and
 * the uptime figures.
 *
 * No animation anywhere, including on the state dots. A pulsing "live" dot is
 * the house style on status pages and it earns nothing: it does not tell the
 * reader anything the colour and label have not already said, and it runs a
 * compositor job for the life of the page.
 *
 * The state colours are deliberately not the palette blues. Availability has to
 * read at a glance and be unambiguous, so green/amber/red carry that meaning on
 * their own. Each state also carries a text label, so the colour is never the
 * only signal for a reader who cannot distinguish them.
 */

.tzs{
  --tzs-ok:#1B7F4F;      --tzs-ok-tint:#E7F4ED;      --tzs-ok-border:#BCE0CD;
  --tzs-warn:#A9670B;    --tzs-warn-tint:#FCF2E1;    --tzs-warn-border:#EAD3A6;
  --tzs-bad:#AD2721;     --tzs-bad-tint:#FBEAE9;     --tzs-bad-border:#EFC4C2;
  --tzs-idle:#616F7D;    --tzs-idle-tint:#F1F4F7;    --tzs-idle-border:#D7DEE5;
}

/* ---------- State dot ---------- */
.tzs__dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 auto}
.tzs__dot--operational{background:var(--tzs-ok)}
.tzs__dot--degraded{background:var(--tzs-warn)}
.tzs__dot--down{background:var(--tzs-bad)}
.tzs__dot--unknown{background:var(--tzs-idle)}

/* ---------- Headline banner ---------- */
.tzs__banner{display:flex;align-items:flex-start;gap:13px;margin-top:26px;padding:18px 22px;
  border-radius:var(--tzt-radius-sm);border:.5px solid var(--tzs-idle-border);
  background:var(--tzs-idle-tint);box-shadow:var(--tzt-shadow-soft)}
.tzs__banner .tzs__dot{margin-top:6px;width:12px;height:12px}
.tzs__banner strong{display:block;font-family:"Inter",sans-serif;font-weight:600;font-size:18px;
  color:var(--tzt-navy);line-height:1.35}
.tzs__banner-meta{display:block;margin-top:3px;font-size:14px;color:var(--tzt-muted);line-height:1.55}
.tzs__banner--operational{background:var(--tzs-ok-tint);border-color:var(--tzs-ok-border)}
.tzs__banner--operational strong{color:var(--tzs-ok)}
.tzs__banner--degraded{background:var(--tzs-warn-tint);border-color:var(--tzs-warn-border)}
.tzs__banner--degraded strong{color:var(--tzs-warn)}
.tzs__banner--down{background:var(--tzs-bad-tint);border-color:var(--tzs-bad-border)}
.tzs__banner--down strong{color:var(--tzs-bad)}

/* ---------- Component cards ---------- */
.tzs__components{display:grid;gap:18px}
.tzs__component{background:#fff;border:.5px solid var(--tzt-border);border-radius:var(--tzt-radius-sm);
  box-shadow:var(--tzt-shadow);padding:24px 26px}
.tzs__component-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px 20px;flex-wrap:wrap}
.tzs__component h3{margin:0;font-family:"Inter",sans-serif;font-weight:600;font-size:19px;color:var(--tzt-navy);line-height:1.35}
.tzs__component-top p{margin:5px 0 0;font-size:15px;line-height:1.6;color:var(--tzt-muted);max-width:60ch}

/* ---------- Status pill ---------- */
.tzs__pill{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:7px 15px;border-radius:50px;font-family:"Inter",sans-serif;font-weight:600;font-size:14px;
  background:var(--tzs-idle-tint);border:.5px solid var(--tzs-idle-border);color:var(--tzs-idle)}
.tzs__pill--operational{background:var(--tzs-ok-tint);border-color:var(--tzs-ok-border);color:var(--tzs-ok)}
.tzs__pill--degraded{background:var(--tzs-warn-tint);border-color:var(--tzs-warn-border);color:var(--tzs-warn)}
.tzs__pill--down{background:var(--tzs-bad-tint);border-color:var(--tzs-bad-border);color:var(--tzs-bad)}

/* ---------- Uptime windows ---------- */
.tzs__windows{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:20px 0 0;padding:0;
  background:#EDF4FB;border:1px solid #EDF4FB;border-radius:12px;overflow:hidden}
.tzs__windows > div{background:#fff;padding:14px 16px;min-width:0}
.tzs__windows dt{font-size:13px;color:var(--tzt-muted);line-height:1.4}
.tzs__windows dd{margin:4px 0 0;font-family:"Inter",sans-serif;font-weight:600;font-size:19px;
  color:var(--tzt-primary);line-height:1.2;font-variant-numeric:tabular-nums}

.tzs__since{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--tzt-muted)}

/* ---------- Incident table ---------- */
.tzs__table td{font-variant-numeric:tabular-nums}

@media(max-width:767px){
  .tzs__windows{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tzs__component{padding:20px}
  .tzs__banner{padding:16px 18px}
}