/* Gestalt status pages. Every value comes from the Gestalt visual language (--g-*); the only typed-in colors are each app's
   icon color, set on its tile by status.js. */
:root { --page-max: 880px; }

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--g-bg); color: var(--g-text);
  font: var(--g-weight-regular) var(--g-text-m) / var(--g-lh-m) var(--g-font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--g-brand-link); }
:focus-visible { outline: 2px solid var(--g-focus); outline-offset: 2px; border-radius: var(--g-radius-s); }
h1, h2, h3, p, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--g-font-display); font-weight: var(--g-weight-title); text-wrap: balance; }
.hint { color: var(--g-muted); font-size: var(--g-text-s); line-height: var(--g-lh-s); }

.skip { position: absolute; left: var(--g-space-4); top: -100px; z-index: 20; padding: var(--g-space-2) var(--g-space-3); background: var(--g-surface); border-radius: var(--g-radius-m); }
.skip:focus { top: var(--g-space-2); }

.wrap {
  width: 100%; max-width: var(--page-max); margin-inline: auto;
  padding-left: max(var(--g-space-4), env(safe-area-inset-left, 0px));
  padding-right: max(var(--g-space-4), env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap { padding-left: max(var(--g-space-8), env(safe-area-inset-left, 0px)); padding-right: max(var(--g-space-8), env(safe-area-inset-right, 0px)); }
}

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--g-surface); border-bottom: 1px solid var(--g-line); padding-top: env(safe-area-inset-top, 0px); }
.site-header .wrap { display: flex; align-items: center; gap: var(--g-space-3); min-height: 56px; }
.mark { display: flex; align-items: center; gap: var(--g-space-2); min-width: 0; color: var(--g-text); text-decoration: none; font-weight: var(--g-weight-title); font-size: var(--g-text-l); }
.mark > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mark-tile { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--g-radius-m); background: var(--g-brand); }
.mark-tile svg { width: 18px; height: 18px; }
.nav { display: flex; gap: var(--g-space-1); margin-left: auto; }
.nav a { color: var(--g-muted); text-decoration: none; padding: var(--g-space-2) var(--g-space-3); border-radius: var(--g-radius-m); }
.nav a:hover { color: var(--g-text); background: var(--g-hover-tint); }
.icon-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--g-control-l); height: var(--g-control-l);
  border: 1px solid var(--g-line-strong); border-radius: var(--g-btn-radius);
  background: transparent; color: var(--g-text); cursor: pointer;
}
.icon-btn:hover { background: var(--g-hover-tint); }
@media (max-width: 599px) { .nav { display: none; } .icon-btn { margin-left: auto; } }

main { flex: 1; padding-top: var(--g-space-8); padding-bottom: var(--g-space-10); display: grid; gap: var(--g-space-8); align-content: start; }
main:focus { outline: none; }

/* The one-line answer at the top */
.overall {
  display: flex; gap: var(--g-space-3); align-items: flex-start;
  padding: var(--g-space-5); border-radius: var(--g-radius-l);
  background: var(--g-surface); border: 1px solid var(--g-line);
}
.overall > div { display: grid; gap: var(--g-space-1); min-width: 0; flex: 1; }
.overall h1 { font-size: var(--g-text-2xl); line-height: var(--g-lh-2xl); }
.overall p { color: var(--g-muted); }
.overall svg { flex: none; margin-top: 0; fill: var(--g-muted); }
.overall.is-success { background: var(--g-success-tint); border-color: transparent; }
.overall.is-success svg { fill: var(--g-success); }
.overall.is-warning { background: var(--g-warning-tint); border-color: transparent; }
.overall.is-warning svg { fill: var(--g-warning); }
.overall.is-danger { background: var(--g-danger-tint); border-color: transparent; }
.overall.is-danger svg { fill: var(--g-danger); }
.overall.is-info { background: var(--g-badge-info-bg); border-color: transparent; }
.overall.is-info svg { fill: var(--g-badge-info-text); }
.overall svg path { fill: inherit; }

/* Sections */
[hidden] { display: none !important; }
.block { display: grid; gap: var(--g-space-3); }
.block h2 { font-size: var(--g-text-xl); line-height: var(--g-lh-xl); }
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--g-space-2); }
.card, .incident { background: var(--g-surface); border: 1px solid var(--g-line); border-radius: var(--g-radius-l); padding: var(--g-space-4) var(--g-space-5); }
#groups, .incidents { display: grid; gap: var(--g-space-3); }

/* Badges: the solid pairs from the visual language, with words and a glyph, never color alone */
.badge {
  display: inline-flex; align-items: center; gap: var(--g-space-1); flex: none;
  padding: 2px var(--g-space-2); border-radius: var(--g-radius-pill);
  font-size: var(--g-text-xs); line-height: var(--g-lh-xs); font-weight: var(--g-weight-strong); white-space: nowrap;
}
.badge svg { width: 14px; height: 14px; }
.badge.is-success { background: var(--g-badge-success-bg); color: var(--g-badge-success-text); }
.badge.is-warning { background: var(--g-badge-warning-bg); color: var(--g-badge-warning-text); }
.badge.is-danger { background: var(--g-badge-danger-bg); color: var(--g-badge-danger-text); }
.badge.is-info { background: var(--g-badge-info-bg); color: var(--g-badge-info-text); }
.badge.is-neutral { background: var(--g-badge-neutral-bg); color: var(--g-badge-neutral-text); }

/* Apps */
.group-title { font-size: var(--g-text-s); line-height: var(--g-lh-s); color: var(--g-muted); font-weight: var(--g-weight-strong); margin-bottom: var(--g-space-2); }
.apps { display: grid; }
.app { display: grid; gap: var(--g-space-2); padding: var(--g-space-3) 0; }
.app + .app { border-top: 1px solid var(--g-line); }
.app-line { display: flex; align-items: center; gap: var(--g-space-3); }
.app-name { flex: 1; min-width: 0; font-weight: var(--g-weight-strong); }
.tile { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: var(--g-radius-m); }
.bars { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 28px; }
.bars i { border-radius: 2px; background: var(--g-line); min-width: 0; }
.bars i.is-ok { background: var(--g-success); }
.bars i.is-warn { background: var(--g-warning); }
.bars i.is-bad { background: var(--g-danger); }
.d30 { display: none; }
@media (max-width: 599px) { .d30 { display: inline; } }
.app-foot { display: flex; justify-content: space-between; gap: var(--g-space-2); }
/* A phone shows the last 30 days, so each day stays wide enough to see. */
@media (max-width: 599px) {
  .bars { grid-template-columns: repeat(30, 1fr); }
  .bars i:nth-child(-n+60) { display: none; }
  .d90 { display: none; }
}

/* Incidents */
.incident { display: grid; gap: var(--g-space-2); scroll-margin-top: 72px; }
.incident-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--g-space-3); }
.incident h3 { font-size: var(--g-text-l); line-height: var(--g-lh-l); }
.updates { display: grid; gap: var(--g-space-3); margin-top: var(--g-space-2); padding-left: var(--g-space-4); border-left: 2px solid var(--g-line); }
.updates li { display: grid; gap: 2px; }
.updates p { overflow-wrap: anywhere; white-space: pre-line; }

/* Footer */
.site-footer { border-top: 1px solid var(--g-line); padding: var(--g-space-6) 0 calc(var(--g-space-6) + env(safe-area-inset-bottom, 0px)); color: var(--g-muted); font-size: var(--g-text-s); line-height: var(--g-lh-s); }
.site-footer .wrap { display: grid; gap: var(--g-space-2); }
.credit { margin-top: var(--g-space-2); }

.notice { padding: var(--g-space-3) var(--g-space-4); border-radius: var(--g-radius-m); background: var(--g-surface); border: 1px solid var(--g-line); }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }