/* Scigrow status page — screen layer on top of scigrow.css.
   Palette and font come from scigrow.css tokens. Nothing new is invented. */

html, body { background: var(--sg-page); }
body {
  font-family: var(--sg-font);
  color: var(--sg-text);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.sp-shell { max-width: 1040px; margin: 0 auto; padding: 0 20px 48px; }

/* Header band ---------------------------------------------------------- */
.sp-head {
  background: var(--sg-navy);
  padding: 24px 0 96px;
}
.sp-head__inner {
  max-width: 1040px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
}
.sp-head__meta { text-align: right; }
.sp-head__title { font-size: 22px; font-weight: 700; color: var(--sg-on-dark); }
.sp-head__sub { font-size: 12px; color: var(--sg-on-dark-muted); margin-top: 4px; }
.sp-head__sub a { color: var(--sg-on-dark-muted); }

/* Overall banner ------------------------------------------------------- */
.sp-lift { margin-top: -72px; }
.sp-banner {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(18,48,71,.08);
  padding: 28px 32px;
  display: flex; align-items: center; gap: 22px;
}
.sp-banner__dot { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.sp-banner__text { margin: 0; font-size: 26px; font-weight: 700; color: var(--sg-navy-ink); }

/* Section heading ------------------------------------------------------ */
.sp-sectionhead {
  display: flex; align-items: baseline; gap: 10px;
  margin: 32px 0 12px;
}
.sp-sectionhead h2 { margin: 0; font-size: 20px; font-weight: 700; color: var(--sg-navy-ink); }
.sp-sectionhead span { font-size: 15px; font-weight: 500; color: var(--sg-text-muted); }

/* Group card ----------------------------------------------------------- */
.sp-card {
  background: var(--sg-surface);
  border: 1px solid var(--sg-border);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 16px;
}
.sp-card__title {
  margin: 0 0 14px; font-size: 13px; font-weight: 700;
  color: var(--sg-navy-ink); letter-spacing: .02em;
}

.sp-row { padding: 12px 0 4px; }
.sp-row--sep { border-top: 1px solid var(--sg-border); margin-top: 10px; }
.sp-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sp-row__id { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.sp-row__name { font-size: 15px; font-weight: 500; color: var(--sg-navy); }
.sp-row__sep { color: var(--sg-text-faint); }
.sp-row__ratio { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 500; }
.sp-row__status { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; white-space: nowrap; }

/* Status dots and tones ------------------------------------------------ */
.sp-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex: none; }
.sp-dot--ok    { background: var(--sg-ok); }
.sp-dot--warn  { background: var(--sg-warn); }
.sp-dot--error { background: var(--sg-error); }
.sp-dot--idle  { background: var(--sg-text-faint); }

.sp-tone--ok    { color: var(--sg-ok); }
.sp-tone--warn  { color: var(--sg-warn); }
.sp-tone--error { color: var(--sg-error); }
.sp-tone--idle,
.sp-tone--none  { color: var(--sg-text-faint); }

/* Uptime bars ---------------------------------------------------------- */
.sp-bars { display: flex; gap: 2px; margin: 10px 0 6px; align-items: stretch; }
.sp-bar {
  flex: 1 1 0; min-width: 3px; height: 34px; border-radius: 2px;
  background: var(--sg-border-strong); cursor: default; outline: none;
}
.sp-bar:hover, .sp-bar:focus-visible { filter: brightness(1.25); outline: 1px solid var(--sg-navy); outline-offset: 1px; }
.sp-bar--ok    { background: var(--sg-ok); }
.sp-bar--warn  { background: var(--sg-warn); }
.sp-bar--error { background: var(--sg-error); }
.sp-bar--none  { background: var(--sg-border-strong); }

.sp-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--sg-text-faint); }
.sp-scale__from::before { content: var(--sp-d-full, "90 days ago"); }

/* Tooltip -------------------------------------------------------------- */
.sp-tip {
  position: absolute; z-index: 20; pointer-events: none;
  background: var(--sg-navy-ink); color: var(--sg-on-dark);
  border-radius: 6px; padding: 8px 12px; text-align: center;
  box-shadow: 0 4px 14px rgba(18,48,71,.25);
}
.sp-tip__date  { font-size: 11px; color: var(--sg-on-dark-muted); }
.sp-tip__value { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Footer --------------------------------------------------------------- */
.sp-foot {
  max-width: 1040px; margin: 40px auto 0; padding: 20px;
  border-top: 1px solid var(--sg-border);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 12px; color: var(--sg-text-muted); flex-wrap: wrap;
}
.sp-foot a { color: var(--sg-navy); }
.sp-foot__brand { display: flex; align-items: center; gap: 12px; }
.sp-foot__div { width: 1px; height: 16px; background: var(--sg-border-strong); }

.sp-loading { padding: 40px 0; text-align: center; color: var(--sg-text-muted); }

/* Narrow screens: drop the oldest bars rather than squeezing them ------- */
@media (max-width: 820px) {
  .sp-bar:nth-child(-n+30) { display: none; }
  .sp-scale__from::before { content: "60 days ago"; }
  .sp-head__inner { flex-direction: column; align-items: flex-start; }
  .sp-head__meta { text-align: left; }
}
@media (max-width: 520px) {
  .sp-bar:nth-child(-n+60) { display: none; }
  .sp-scale__from::before { content: "30 days ago"; }
  .sp-banner { padding: 20px; gap: 14px; }
  .sp-banner__text { font-size: 20px; }
  .sp-banner__dot { width: 32px; height: 32px; }
}