/* Postern distributor status page (#5284).
 *
 * Loaded from postern_status.html's extra_head rather than a bundle: one page
 * reads it, and the shell bundles are already what every other page pays for.
 *
 * The four state colours are declared here as a local pair per theme, not taken
 * from --sx-ok / --sx-warn / --sx-danger, and the reason is measured rather
 * than stylistic. Those three are *fills* in the card system, and this page
 * paints them as ink: in light mode --sx-ok is 3.49:1 on the surface and
 * 3.12:1 on its own tint, --sx-warn 3.43:1 and 3.09:1 — both sub-AA, which on
 * a page whose whole content is a one-word verdict means the verdict is the
 * part you cannot read. The light values below keep each hue and take the
 * lightness down until they clear 4.5:1 on --sx-surface, --sx-surface-2 and
 * --sx-bg *and* on their own 10% tint over each. Dark keeps the global values,
 * which already clear it by a wide margin, so that theme does not move.
 *
 * They must be re-flipped under [data-theme="dark"] because they are page-local
 * names with no global counterpart — the trap the detail pages hit, where a
 * token the global dark rule has never heard of stays pinned to its light value
 * forever and renders a light island on a dark page.
 * tests/test_postern_status_surface.py asserts the computed ratios rather than
 * the presence of a token name.
 */

body.postern-status-page {
  --pstat-ok: #187841;
  --pstat-degraded: #975B00;
  --pstat-down: #C82143;
  --pstat-unknown: var(--sx-text-2);
}

[data-theme="dark"] body.postern-status-page {
  --pstat-ok: #6EE7A1;
  --pstat-degraded: #F5B454;
  --pstat-down: #F47B7B;
  --pstat-unknown: var(--sx-text-2);
}

.pstat-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding-bottom: 64px;
}

.pstat-title {
  font-size: clamp(28px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.pstat-lede {
  color: var(--sx-text-2);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 28px;
  max-width: 62ch;
}

/* The overall verdict. `--pstat-tone` is set per state on the element itself,
 * so every surface below reads one variable instead of repeating four rules. */
.pstat-overall {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  margin-bottom: 28px;
}

.pstat-overall[data-state="operational"] { --pstat-tone: var(--pstat-ok); }
.pstat-overall[data-state="degraded"]    { --pstat-tone: var(--pstat-degraded); }
.pstat-overall[data-state="down"]        { --pstat-tone: var(--pstat-down); }
.pstat-overall[data-state="unknown"]     { --pstat-tone: var(--pstat-unknown); }

.pstat-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--pstat-tone, var(--sx-text-2));
}

.pstat-overall-text h2 {
  font-size: 19px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--pstat-tone, var(--sx-text));
}

.pstat-overall-text p {
  margin: 0;
  color: var(--sx-text-2);
  font-size: 14.5px;
  line-height: 1.6;
}

.pstat-section-head {
  font-size: 11px;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--sx-text-3, var(--sx-text-2));
  margin: 32px 0 12px;
}

.pstat-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 14px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
  overflow: hidden;
}

.pstat-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 16px;
  align-items: baseline;
  padding: 16px 20px;
}

.pstat-row + .pstat-row { border-top: 1px solid var(--sx-line); }

.pstat-row[data-state="operational"] { --pstat-tone: var(--pstat-ok); }
.pstat-row[data-state="degraded"]    { --pstat-tone: var(--pstat-degraded); }
.pstat-row[data-state="down"]        { --pstat-tone: var(--pstat-down); }
.pstat-row[data-state="unknown"]     { --pstat-tone: var(--pstat-unknown); }

.pstat-row-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--sx-text);
}

/* Colour is never the only carrier: the pill prints the state as a word, so a
 * reader who cannot separate the hues still gets the verdict. */
.pstat-pill {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--pstat-tone, var(--sx-text-2));
  background: color-mix(in srgb, var(--pstat-tone, var(--sx-text-2)) 10%, var(--sx-surface));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pstat-tone, var(--sx-text-2)) 28%, transparent) inset;
}

.pstat-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}

.pstat-row-detail {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--sx-text-2);
  font-size: 14px;
  line-height: 1.6;
}

.pstat-row-endpoint {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: var(--sx-text-3, var(--sx-text-2));
  overflow-x: auto;
}

.pstat-note {
  margin: 12px 0 0;
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--sx-surface-2);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}

.pstat-note h3 {
  font-size: 15px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.pstat-note p {
  margin: 0 0 10px;
  color: var(--sx-text-2);
  font-size: 14.5px;
  line-height: 1.65;
}

.pstat-note p:last-child { margin-bottom: 0; }

.pstat-windows {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
}

.pstat-window {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--sx-surface);
  box-shadow: 0 0 0 1px var(--sx-line) inset;
}

.pstat-window dt {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12px;
  color: var(--sx-text-3, var(--sx-text-2));
  margin-bottom: 6px;
  overflow-x: auto;
}

.pstat-window dd {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--sx-text);
}

.pstat-window dd small {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--sx-text-2);
}

.pstat-foot {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  color: var(--sx-text-2);
  font-size: 13.5px;
}

.pstat-checked {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
}