/* Vigilbase Status, in the vigilbase.com style: a floating dark header bar,
   tight large headings with small mono labels, white cards on a light grey.
   One column; each group is one rounded card with hairline rows. Every 90-day
   line is a continuous track of the same width: group and component lines
   share the same insets, and the small lines in collapsed headers are a fixed
   120px. Brand yellow marks the logo, the current tab and the main button. */

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-core.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2190-2199, U+2212, U+2215;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-ext.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* Space Mono, the vigilbase.com label face (apps/com/public/fonts/space-mono). */
@font-face {
  font-family: 'Space Mono';
  src: url('/fonts/space-mono-400-core.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2212;
}
@font-face {
  font-family: 'Space Mono';
  src: url('/fonts/space-mono-700-core.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+2013-2014, U+2018-2019, U+201C-201D, U+2022, U+2026, U+2039-203A, U+20AC, U+2212;
}

:root {
  /* The vigilbase.com neutrals: hsl(0 0% 97%) page, white cards, hsl(0 0% 86%) borders. */
  --bg: #f7f7f7;
  --surface: #ffffff;
  --hover: #fafafa;
  --fg: #111111;
  --muted: #666666;
  --line: #e4e4e4;
  --line-strong: #d0d0d0;
  --track: #ececec;
  --brand: #f9e75e;
  --brand-hover: #ffef84;
  --brand-ink: #111111;
  --bar: #111111f7;
  --bar-line: #ffffff1a;
  --bar-fg: #e5e5e5;
  --ok: #2e9a58;
  --maint: #3a6fd1;
  --degraded: #d98a12;
  --partial: #de5b1f;
  --major: #c42f2a;
  --unknown: #a7a7a7;
  --nodata: #e6e6e6;
  --tip-bg: #111111;
  --tip-fg: #f5f5f5;
  --tip-muted: #b7b7b7;
  --map-land: #ebebeb;
  --map-border: #fbfbfb;
  --cf: #f38020;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  /* One scale for the whole page: card radius and padding, small radius. */
  --radius: 20px;
  --radius-sm: 10px;
  --pad: 24px;
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --mono: 'Space Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* Dark: when the visitor picks it, or when the system is dark and they haven't picked light. */
:root[data-theme='dark'] {
  --bg: #111111;
  --surface: #1b1b1b;
  --hover: #202020;
  --fg: #f5f5f5;
  --muted: #a3a3a3;
  --line: #2b2b2b;
  --line-strong: #3b3b3b;
  --track: #222222;
  --bar: #1b1b1bf2;
  --bar-line: #ffffff1f;
  --ok: #3fbf72;
  --maint: #6b9cff;
  --degraded: #f0a531;
  --partial: #f07a3f;
  --major: #f0524b;
  --unknown: #5f5f5f;
  --nodata: #2a2a2a;
  --tip-bg: #f5f5f5;
  --tip-fg: #111111;
  --tip-muted: #5f5f5f;
  --map-land: #262626;
  --map-border: #141414;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #111111;
    --surface: #1b1b1b;
    --hover: #202020;
    --fg: #f5f5f5;
    --muted: #a3a3a3;
    --line: #2b2b2b;
    --line-strong: #3b3b3b;
    --track: #222222;
    --bar: #1b1b1bf2;
    --bar-line: #ffffff1f;
    --ok: #3fbf72;
    --maint: #6b9cff;
    --degraded: #f0a531;
    --partial: #f07a3f;
    --major: #f0524b;
    --unknown: #5f5f5f;
    --nodata: #2a2a2a;
    --tip-bg: #f5f5f5;
    --tip-fg: #111111;
    --tip-muted: #5f5f5f;
    --map-land: #262626;
    --map-border: #141414;
    color-scheme: dark;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  /* Short and long pages keep the same width, so the header does not jump between tabs. */
  scrollbar-gutter: stable;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a {
  color: inherit;
}
h1,
h2,
p {
  margin: 0;
}
:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Clipped rather than moved off screen, as on vigilbase.com. */
.skip {
  position: fixed;
  top: 12px;
  left: 16px;
  z-index: 100;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  background: var(--brand);
  color: var(--brand-ink);
  font-weight: 600;
  clip-path: inset(50%);
}
.skip:focus {
  clip-path: none;
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

/* ---- header: the vigilbase.com floating bar ---- */
header.site {
  position: sticky;
  top: 12px;
  z-index: 30;
  width: 100%;
  max-width: 880px;
  margin: 12px auto 0;
  padding-inline: max(16px, env(safe-area-inset-left, 0px)) max(16px, env(safe-area-inset-right, 0px));
}
.capsule {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 60px;
  padding: 0 10px 0 20px;
  background: var(--bar);
  color: var(--bar-fg);
  border: 1px solid var(--bar-line);
  border-radius: 18px;
  box-shadow:
    0 10px 35px #0000001c,
    0 2px 6px #00000012;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  color: #ffffff;
  text-decoration: none;
}
.lockup svg {
  display: block;
  width: 104px;
  height: auto;
}
.brand-tag {
  padding-left: 10px;
  border-left: 1px solid #ffffff33;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #cfcfcf;
  line-height: 18px;
}
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}
.tabs a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-radius: 9px;
  color: var(--bar-fg);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color 0.18s;
}
.tab-label {
  position: relative;
}
.tabs a:hover,
.tabs a[aria-current='page'] {
  color: var(--brand);
}
.tabs a:hover:not([aria-current]) {
  background: #ffffff0b;
}
/* The current tab's soft fill; it slides between tabs on navigation (view transitions, below). */
.tabs .ink {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #ffffff12;
  view-transition-name: tab-ink;
}
.actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
.ext {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 9px;
  color: #bdbdbd;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s;
}
.ext:hover {
  color: #ffffff;
  background: #ffffff0b;
}
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--brand);
  color: var(--brand-ink);
  font-size: 14px;
  font-weight: 650;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s;
}
.cta:hover {
  background: var(--brand-hover);
}
.cta svg {
  transition: translate 0.18s var(--ease);
}
.cta:hover svg {
  translate: 2px 0;
}

/* Buttons inside the page, in the vigilbase.com shape. */
.btn {
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background 0.18s,
    border-color 0.18s;
}
.btn:hover {
  border-color: var(--fg);
}
.btn.primary {
  background: var(--brand);
  color: var(--brand-ink);
  border-color: var(--brand);
}
.btn.primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
}

/* Small mono label above a heading, as on vigilbase.com. */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---- page to page ---- */
@view-transition {
  navigation: auto;
}
header.site {
  view-transition-name: site-header;
}
::view-transition-group(*) {
  animation-duration: 0.28s;
  animation-timing-function: var(--ease);
}
::view-transition-old(root) {
  animation: 0.12s ease-in both vt-out;
}
::view-transition-new(root) {
  animation: 0.22s var(--ease) both vt-in;
}
@keyframes vt-out {
  to {
    opacity: 0;
  }
}
@keyframes vt-in {
  from {
    opacity: 0;
  }
}
/* The header stays still; only the current-tab fill moves. */
::view-transition-group(site-header) {
  animation: none;
}
::view-transition-old(site-header) {
  display: none;
}
::view-transition-new(site-header) {
  animation: none;
}

main.wrap {
  padding-block: 40px 72px;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---- status colours: dots (l-), text (t-) ---- */
.l-ok { --c: var(--ok); }
.l-maint { --c: var(--maint); }
.l-degraded { --c: var(--degraded); }
.l-partial { --c: var(--partial); }
.l-major { --c: var(--major); }
.t-ok { --c: var(--ok); }
.t-maint { --c: var(--maint); }
.t-degraded { --c: var(--degraded); }
.t-partial { --c: var(--partial); }
.t-major { --c: var(--major); }

.sdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--c);
}
.sdot.big {
  width: 12px;
  height: 12px;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  padding: 2px 10px;
  border-radius: 999px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent);
  white-space: nowrap;
}
.pill.t-ok {
  color: var(--muted);
  background: color-mix(in srgb, var(--muted) 12%, transparent);
}

/* ---- the status headline and notices ---- */
.hero {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 8px;
}
.hero h1 {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: clamp(30px, 5vw, 46px);
  font-weight: 650;
  line-height: 1.08;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.sdot.hero-dot {
  width: 0.36em;
  height: 0.36em;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: var(--muted);
  font-size: 14px;
}
.hero-meta a {
  color: var(--fg);
}
/* The overrides banner (src/overrides.ts): one line above every page. */
.site-banner {
  margin: 0 0 16px;
  padding: 12px var(--pad);
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--degraded) 40%, var(--line));
  background: color-mix(in srgb, var(--degraded) 9%, var(--surface));
  font-size: 14px;
  font-weight: 600;
  text-wrap: pretty;
}
.stale {
  font-size: 13px;
  color: var(--muted);
  padding: 12px var(--pad);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.notice {
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line));
  background: color-mix(in srgb, var(--c) 5%, var(--surface));
  border-radius: var(--radius);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notice-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: baseline;
  justify-content: space-between;
}
.notice h2 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.notice h2 a {
  text-decoration: none;
}
.notice h2 a:hover {
  text-decoration: underline;
}
.notice-msg {
  font-size: 14px;
  max-width: 68ch;
}
.notice-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 16px;
  font-size: 12px;
  color: var(--muted);
}
/* Someone else's incident (Cloudflare): same card, labelled with its source. */
.notice.upstream h2 {
  text-wrap: pretty;
}
.notice .source {
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: 2px;
  background: color-mix(in srgb, var(--cf) 16%, transparent);
  color: var(--cf);
  font-size: 11px;
  font-weight: 700;
}
.notice-meta .near {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* ---- groups and rows ---- */
.groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.node.g {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
}
.hdr {
  all: unset;
  box-sizing: border-box;
  display: flex;
  width: 100%;
  gap: 12px;
  align-items: center;
  padding: 16px var(--pad);
  cursor: pointer;
  transition: background 0.15s;
}
.hdr:hover {
  background: var(--hover);
}
.hdr:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--line-strong);
}
.name {
  flex: 1;
  min-width: 0;
  text-wrap: pretty;
}
.name-text {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.node.k .name-text {
  font-weight: 600;
  font-size: 14px;
}
.count {
  margin-left: 7px;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
/* The status badge of a group or service that isn't operational. */
.state {
  padding: 2px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c) 12%, transparent);
  color: var(--c);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.pct {
  width: 58px;
  text-align: right;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.chev {
  flex: none;
  color: var(--muted);
  transition: transform 0.3s var(--ease);
}
.node[data-open='false'] > .hdr .chev {
  transform: rotate(-90deg);
}
/* Open, the row shows its full line below, so the small one gives its space back
   and the badge sits next to the percentage. */
.node[data-open='true'] > .hdr .track.mini {
  width: 0;
  min-width: 0;
  margin-left: -12px;
  opacity: 0;
}
.reveal {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s var(--ease);
}
.node[data-open='true'] > .reveal {
  grid-template-rows: 1fr;
}
.reveal-in {
  min-height: 0;
  overflow: clip;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.node[data-open='true'] > .reveal > .reveal-in {
  opacity: 1;
}
/* Without the script every section is open. */
html:not(.js) .reveal {
  grid-template-rows: 1fr;
}
html:not(.js) .reveal-in {
  opacity: 1;
}
html:not(.js) .chev {
  display: none;
}
.node.k {
  border-top: 1px solid var(--line);
}
.node.k > .hdr {
  padding-block: 12px;
}
/* Group and component lines share these insets, so they line up exactly. */
.g-line,
.k-body {
  /* Starts under the name: card padding + dot (8px) + gap (12px). */
  padding: 4px var(--pad) 16px calc(var(--pad) + 20px);
}
.k-body {
  display: flex;
  flex-direction: column;
}
.desc {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted);
}

/* ---- the 90-day line ---- */
.track {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--nodata);
}
.track > i {
  display: block;
  flex: 1 1 0;
  min-width: 2px;
  background: var(--c, var(--nodata));
}
.track > .nd {
  --c: var(--nodata);
}
.track[data-key] {
  cursor: crosshair;
}
.track[data-key] > i:not(.l-ok):not(.nd) {
  cursor: pointer;
}
.track.mini {
  width: 120px;
  height: 6px;
  transition:
    opacity 0.2s var(--ease),
    width 0.3s var(--ease),
    margin 0.3s var(--ease);
}
.track-foot {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--muted);
  margin-top: 8px;
}
.track-foot span {
  font-family: var(--mono);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.pc,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 12px;
  text-decoration: none;
  background: var(--surface);
}
.pc {
  font-family: var(--mono);
  font-size: 11px;
}
.pc:hover {
  border-color: var(--line-strong);
}
.pc i,
.pop-state i,
.counts i,
.legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}
.p-operational { --c: var(--ok); }
.p-degraded { --c: var(--degraded); }
.p-rerouted { --c: var(--degraded); }
.p-maintenance { --c: var(--maint); }
.p-unknown { --c: var(--unknown); }

/* ---- tooltip ---- */
.tip {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  max-width: min(320px, calc(100vw - 24px));
  background: var(--tip-bg);
  color: var(--tip-fg);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.4;
  transform: translate(-50%, calc(-100% - 12px));
}
.tip-date {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--tip-muted);
}
.tip-inc {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: 2px 8px;
  margin-top: 8px;
}
.tip-inc .sdot {
  margin-top: 5px;
}
.tip-inc b {
  font-weight: 700;
}
.tip-inc span {
  grid-column: 2;
  color: var(--tip-muted);
}
.tip-quiet {
  margin-top: 4px;
}
.tip-hint {
  margin-top: 8px;
  font-size: 11px;
  color: var(--tip-muted);
}

/* ---- edge ---- */
.edge-head,
.page-head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  align-items: end;
  justify-content: space-between;
}
/* Pages without side figures: title with its description underneath, as on Edge. */
.page-head {
  flex-direction: column;
  align-items: start;
  gap: 0;
}
.edge-head h1,
.page-head h1 {
  margin-top: 12px;
  font-size: clamp(30px, 4.6vw, 42px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.04em;
}
.edge-head p:not(.eyebrow),
.page-head p:not(.eyebrow) {
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
  max-width: 62ch;
}
.counts,
.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 13px;
}
.counts li,
.legend li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.legend {
  color: var(--muted);
  font-size: 12px;
}
.legend .ring {
  background: none;
  border: 2px solid var(--cf);
  width: 10px;
  height: 10px;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
.filter {
  margin-top: 0;
}
.chip {
  cursor: pointer;
  font-weight: 600;
  color: var(--muted);
  font-family: inherit;
}
.chip.static {
  cursor: default;
  color: var(--fg);
  font-weight: 600;
}
html:not(.js) .toolbar {
  display: none;
}
.mapbox {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}
.map {
  --k: 1;
  --s: 1;
  --z: calc(var(--k) * var(--s));
  display: block;
  width: 100%;
  height: auto;
}
.map .land {
  fill: var(--map-land);
}
.map .borders {
  fill: none;
  stroke: var(--map-border);
  stroke-width: 0.8px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.map .pin {
  cursor: pointer;
  transition: opacity 0.2s;
}
.map .pin:hover .pin-dot {
  stroke: var(--fg);
}
.map .pin-dot {
  r: calc(5.5px * var(--z));
  fill: var(--c);
  stroke: var(--surface);
  stroke-width: calc(2px * var(--z));
}
.map .pin.focus .pin-dot {
  r: calc(8px * var(--z));
  stroke: var(--fg);
  stroke-width: calc(2.5px * var(--z));
}
.map .pin.dim {
  opacity: 0.15;
}
.map text {
  display: none;
  font-family: var(--mono);
  font-size: calc(11px * var(--z));
  font-weight: 600;
  fill: var(--fg);
  text-anchor: middle;
  paint-order: stroke;
  stroke: var(--surface);
  stroke-width: calc(3px * var(--z));
  stroke-linejoin: round;
  transform: translateY(calc(-11px * var(--z)));
  pointer-events: none;
}
.map[data-view='all'] text[data-v~='all'],
.map[data-view='americas'] text[data-v~='americas'],
.map[data-view='europe'] text[data-v~='europe'],
.map[data-view='asia-pacific'] text[data-v~='asia-pacific'],
.map[data-view='mea'] text[data-v~='mea'] {
  display: inline;
}
@media (max-width: 640px) {
  /* Pins and labels stay legible on a narrow map; labels wait for a region to be picked. */
  .map {
    --s: 1.9;
  }
  .map text,
  .map[data-view] text[data-v] {
    display: none;
  }
  .map[data-view='americas'] text[data-m~='americas'],
  .map[data-view='europe'] text[data-m~='europe'],
  .map[data-view='asia-pacific'] text[data-m~='asia-pacific'],
  .map[data-view='mea'] text[data-m~='mea'] {
    display: inline;
  }
}
.region {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.region[hidden] {
  display: none;
}
.region h2,
.month h2 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.region h2 span {
  margin-left: 6px;
  color: var(--fg);
  font-weight: 700;
}
.tl-msg a {
  overflow-wrap: anywhere;
}
/* Each region is one card; each PoP a row in it, two columns wide on desktop. */
.pops {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 32px;
  padding: 4px var(--pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(96px, 150px) auto;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  min-width: 0;
  scroll-margin-top: 96px;
}
/* No line under the last row of either column. */
.pop:last-child,
.pop:nth-last-child(2):nth-child(odd) {
  border-bottom: 0;
}
.pop:target {
  margin: 0 -12px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: var(--track);
}
.pop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.pop-head:hover .city,
.pop.focus .city {
  color: var(--fg);
}
.pop-head:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 4px;
  border-radius: 4px;
}
html:not(.js) .pop-head {
  cursor: default;
}
.pop.focus .code {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}
.flag {
  flex: none;
  width: 20px;
  height: 15px;
  border-radius: 3px;
  object-fit: cover;
  box-shadow: 0 0 0 1px #0000001a;
  background: var(--track);
}
.pop .code {
  flex: none;
  width: 34px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
}
.pop .city {
  min-width: 0;
  color: var(--muted);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pop-state {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  font-size: 12px;
  font-weight: 650;
  color: var(--c);
  white-space: nowrap;
}
/* Operational is the norm: a dot says it; the word is only for screen readers. */
.pop.p-operational .pop-state-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.pop-line {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.pop-line .track {
  flex: 1;
  height: 6px;
}
.pop-line .pct {
  width: 52px;
  font-size: 12px;
}
.pop-cf {
  grid-column: 1 / -1;
}
/* A ring on the map and a line on the card mark PoPs near an open Cloudflare incident. */
.cf-ring {
  r: calc(11px * var(--z));
  fill: none;
  stroke: var(--cf);
  stroke-width: calc(2px * var(--z));
}
.pop-cf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--cf);
  text-decoration: none;
}
.pop-cf:hover {
  text-decoration: underline;
}
.pop-cf i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--cf);
  flex: none;
}

/* ---- edge figures and panels ---- */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 16px var(--pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.stat-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.stat-value {
  font-size: 24px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-sub {
  font-size: 12px;
  color: var(--muted);
}
.panel {
  padding: var(--pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.panel h2 {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.02em;
}
.panel-note {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  max-width: 68ch;
}
.rows {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 0 24px;
}
.rows.two {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.rows li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.row-main {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-weight: 600;
}
.row-sub {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
}
.row-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 4px 16px;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fact-warn {
  color: var(--c);
  font-weight: 600;
}
.mono {
  font-family: var(--mono);
  font-size: 13px;
}
.sdot.nd {
  background: var(--nodata);
}
.noc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.noc-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---- history and incidents ---- */
.month {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}
.inc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
}
.inc-list li + li {
  border-top: 1px solid var(--line);
}
.inc-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px var(--pad);
  text-decoration: none;
}
.inc-row:hover {
  background: var(--hover);
}
.inc-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.inc-name {
  font-weight: 600;
  font-size: 14px;
}
.inc-meta {
  font-size: 12px;
  color: var(--muted);
}
.empty {
  color: var(--muted);
  font-size: 13px;
  padding: 12px var(--pad);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.back {
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 600;
}
.back:hover {
  color: var(--fg);
}
.inc-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.inc-title {
  display: flex;
  gap: 12px;
  align-items: center;
}
.inc-title h1 {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 650;
  line-height: 1.12;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.inc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  font-size: 13px;
  color: var(--muted);
}
.inc-head .chips {
  margin-top: 0;
}
/* An incident's updates as a timeline: newest first, one node per update on a
   hairline rail, coloured by how things stood at that update. */
.tl-panel h2 {
  margin-bottom: 20px;
}
.timeline {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tl-item {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 0 0 28px 32px;
}
.tl-item:last-child {
  padding-bottom: 0;
}
/* The rail: from under this node down to the next one. */
.tl-item:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: 2px;
  width: 2px;
  border-radius: 1px;
  background: var(--line);
}
.tl-node {
  position: absolute;
  left: 0;
  top: 5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--c);
}
.tl-item.latest .tl-node {
  background: var(--c);
}
.tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  font-size: 13px;
  color: var(--muted);
}
.tl-head b {
  font-size: 15px;
  font-weight: 650;
  color: var(--fg);
}
.tl-after {
  color: var(--muted);
}
.tl-msg {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 15px;
  line-height: 1.6;
  min-width: 0;
  max-width: 72ch;
  overflow-wrap: anywhere;
}
.tl-comps {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}
.tl-comps li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.tl-comps li span {
  font-weight: 500;
  color: var(--muted);
}

/* ---- panels with a control on the right ---- */
.panel-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 24px;
}
html:not(.js) button.seg-opt,
html:not(.js) .seg:has(> button) {
  display: none;
}

/* ---- response times ---- */
.time-row {
  display: grid !important;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 240px) auto;
  gap: 16px !important;
}
.spark-cell {
  display: flex;
  align-items: center;
  min-width: 0;
}
.times[data-range='24h'] [data-range-show='7d'],
.times[data-range='7d'] [data-range-show='24h'] {
  display: none;
}
.spark {
  display: block;
  width: 100%;
  height: 36px;
  overflow: visible;
}
.spark polyline {
  stroke: var(--fg);
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.spark circle {
  fill: var(--fg);
}
.spark-empty {
  font-size: 12px;
  color: var(--muted);
}
.time-ms {
  color: var(--fg);
  font-weight: 650;
  min-width: 56px;
  text-align: right;
}

/* ---- history filter, archive and month pager ---- */
.month h2 a {
  color: inherit;
  text-decoration: none;
}
.month h2 a:hover {
  color: var(--fg);
}
.archive {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}
.archive li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.archive a {
  font-weight: 600;
  text-decoration: none;
}
.archive a:hover {
  text-decoration: underline;
}
.archive span {
  color: var(--muted);
  font-size: 13px;
}
.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  font-weight: 600;
}
.pager a {
  text-decoration: none;
}
.pager a:hover {
  text-decoration: underline;
}

/* ---- reports ---- */
.report-head {
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: end !important;
  justify-content: space-between;
  gap: 16px !important;
}
.report-pct {
  font-size: 15px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.report-table {
  width: 100%;
  margin-top: 12px;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.report-table th,
.report-table td {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  text-align: right;
  font-weight: 500;
}
.report-table thead th {
  border-top: 0;
  padding-top: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.report-table th:first-child {
  text-align: left;
}
.report-table tbody th {
  font-weight: 600;
}
.report-table tbody th .sdot {
  display: inline-block;
  margin-right: 12px;
  vertical-align: 1px;
}
.report-table td + td {
  width: 96px;
}
.report-table td:first-of-type {
  width: 140px;
  color: var(--muted);
}
.report-inc {
  flex-direction: column;
  gap: 2px;
}
.report-inc a {
  text-decoration: none;
}
.report-inc a:hover {
  text-decoration: underline;
}
.fine {
  font-size: 12px;
  color: var(--muted);
  max-width: 76ch;
}

/* Day bars for a month: one rounded bar per day. */
.days {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  height: 28px;
}
.days.compact {
  height: 18px;
  gap: 2px;
}
.days i {
  border-radius: 3px;
  background: var(--c, var(--nodata));
}
.days i.nd {
  background: var(--nodata);
}
.day-grid {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  align-items: center;
  gap: 12px 16px;
  margin-top: 16px;
}
.day-name {
  font-size: 13px;
  font-weight: 600;
}
.day-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: -4px;
}
.chg.up {
  color: var(--ok);
}
.chg.down {
  color: var(--partial);
}

/* Report index: one card, a row per month. */
.report-list {
  list-style: none;
  margin: 0;
  padding: 4px var(--pad);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.report-list li + li {
  border-top: 1px solid var(--line);
}
.report-row {
  display: grid;
  grid-template-columns: minmax(170px, 230px) minmax(0, 1fr) 110px 16px;
  align-items: center;
  gap: 24px;
  padding: 18px 0;
  color: inherit;
  text-decoration: none;
}
.report-row:hover b {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rr-month,
.rr-pct {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.rr-month b {
  font-size: 15px;
  font-weight: 650;
}
.rr-note {
  font-size: 12px;
  color: var(--muted);
}
.rr-pct {
  align-items: flex-end;
  text-align: right;
}
.rr-pct b {
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.rr-pct .chg {
  font-size: 12px;
  white-space: nowrap;
}
.report-row .chev {
  transform: rotate(-90deg);
  color: var(--muted);
}
.days i.fut {
  background: none;
  box-shadow: inset 0 0 0 1px var(--line);
}
@media (max-width: 720px) {
  .report-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: 'month pct' 'days days';
    gap: 12px 16px;
  }
  .rr-month {
    grid-area: month;
  }
  .report-row .days {
    grid-area: days;
  }
  .rr-pct {
    grid-area: pct;
  }
  .report-row .chev {
    display: none;
  }
}

/* History: what to show, then which component. */
.filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* The component filter: one pill that opens a menu of links. */
.pick {
  position: relative;
  min-width: 0;
}
.pick-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 32px;
  padding: 0 10px 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition:
    color 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.pick-btn::-webkit-details-marker {
  display: none;
}
.pick-btn:hover,
.pick[open] .pick-btn {
  color: var(--fg);
  border-color: var(--line-strong);
}
.pick-btn.on {
  color: var(--fg);
}
.pick-btn:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
.pick-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-chev {
  flex: none;
  transition: transform 0.2s var(--ease);
}
.pick[open] .pick-chev {
  transform: rotate(180deg);
}
.pick-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 20;
  display: flex;
  flex-direction: column;
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 12px 32px #0000001f;
  transform-origin: top right;
  animation: pick-in 0.16s var(--ease);
}
@keyframes pick-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(-4px);
  }
}
.pick-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
  white-space: nowrap;
}
.pick-menu a:hover,
.pick-menu a:focus-visible {
  background: var(--track);
  outline: none;
}
.pick-head {
  padding: 10px 10px 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.pick-menu a[aria-current='page'] {
  font-weight: 650;
}
.pick-menu a[aria-current='page']::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--fg);
}
@media (prefers-reduced-motion: reduce) {
  .pick-menu {
    animation: none;
  }
}
.month h2 span {
  margin-left: 8px;
  color: var(--fg);
  font-weight: 700;
}
/* A closed incident's worst impact, as quiet text with its colour. */
.impact {
  flex: none;
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--c);
  white-space: nowrap;
}

/* ---- subscribe ---- */
.sub {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sub .panel-note {
  margin-top: -8px;
}
.sub .panel-top .panel-note {
  margin-top: 4px;
}
.copy {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 6px 6px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.copy code {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  scrollbar-width: none;
}
.copy .btn {
  min-height: 32px;
  padding: 0 12px;
  font-family: inherit;
  cursor: pointer;
}
html:not(.js) .copy .btn {
  display: none;
}
.badge-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.api li {
  flex-wrap: wrap;
}
.api .mono {
  font-size: 12px;
  text-decoration: none;
}
.api .mono:hover {
  text-decoration: underline;
}
.api .row-facts {
  flex: 1;
  text-align: right;
}
code {
  font-family: var(--mono);
  font-size: 0.9em;
}

/* ---- footer: always at the bottom of the window, even on a short page ---- */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
main.wrap {
  flex: 1 0 auto;
  width: 100%;
}
footer.site {
  border-top: 1px solid var(--line);
}
footer.site .foot {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px 24px;
  padding-block: 28px 32px;
  font-size: 13px;
  color: var(--muted);
}
.foot-brand {
  display: block;
  width: fit-content;
  color: var(--fg);
}
.foot-brand svg {
  display: block;
  width: 88px;
  height: auto;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 4px 20px;
}
.foot-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color 0.18s;
}
.foot-links a:hover {
  color: var(--fg);
}
.foot-note {
  font-size: 12px;
}
footer.site .tz {
  justify-self: end;
}
html:not(.js) .tz {
  display: none;
}

/* ---- header on narrow screens: brand and Subscribe, then the tabs ---- */
@media (max-width: 720px) {
  /* Two rows are too tall to keep on a phone screen: the bar scrolls away with the page. */
  header.site {
    position: relative;
    top: auto;
  }
  .capsule {
    flex-wrap: wrap;
    height: auto;
    gap: 4px 12px;
    padding: 8px 8px 6px 16px;
  }
  .brand {
    min-height: 44px;
  }
  .actions {
    margin-left: auto;
  }
  .ext {
    display: none;
  }
  .tabs {
    order: 3;
    width: 100%;
    margin: 0 0 0 -8px;
    width: calc(100% + 8px);
    border-top: 1px solid #ffffff14;
    padding-top: 4px;
  }
  .tabs a {
    flex: 1;
    justify-content: center;
    min-height: 40px;
  }
  footer.site .foot {
    grid-template-columns: 1fr auto;
  }
  .foot-links {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: start;
  }
}

@media (max-width: 600px) {
  :root {
    --pad: 16px;
    --radius: 18px;
  }
  .hdr {
    gap: 12px;
  }
  .right {
    gap: 12px;
  }
  .right .state {
    display: none;
  }
  .track.mini {
    width: 64px;
  }
  .pct {
    width: 52px;
    font-size: 12px;
  }
  .tl-item {
    padding-left: 26px;
  }
  .tl-msg {
    font-size: 14px;
  }
}

/* Phones: an incident's status goes under its name, so the name keeps the width. */
@media (max-width: 600px) {
  .inc-row {
    flex-wrap: wrap;
    align-items: baseline;
    row-gap: 6px;
  }
  .inc-main {
    flex-basis: calc(100% - 20px);
  }
  .inc-row > .pill,
  .inc-row > .impact {
    margin-left: 20px;
  }
}

/* Phones: two location cards per row, and a dot alone says "operational"; other states keep their words. */
@media (max-width: 760px) {
  .pops {
    grid-template-columns: minmax(0, 1fr);
  }
  .pop:nth-last-child(2):nth-child(odd) {
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 600px) {
  /* Phones: one line per PoP; the uptime stays, the 90-day line goes. */
  .pop {
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 12px;
    min-height: 48px;
  }
  .pop-line .track {
    display: none;
  }
  .pop-line .pct {
    width: auto;
  }
}
/* Narrow phones: the header line repeats the one inside, so names get its room. */
@media (max-width: 480px) {
  .hdr .track.mini {
    display: none;
  }
}

@media (max-width: 600px) {
  .time-row {
    grid-template-columns: 1fr auto;
  }
  .time-row .spark-cell {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .report-table td:first-of-type {
    width: auto;
  }
  .stats.compact {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .stats.compact .stat {
    padding: 12px;
  }
  .stats.compact .stat-value {
    font-size: 17px;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .filters .seg-opt {
    padding: 0 11px;
  }
  .pick-btn {
    padding: 0 8px 0 12px;
  }
  .stats.compact .stat-label {
    font-size: 10px;
    letter-spacing: 0.06em;
  }
  .stats.compact .stat-sub {
    display: none;
  }
  .day-grid {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .day-name {
    margin-top: 8px;
  }
  .day-grid > span:empty {
    display: none;
  }
  .days {
    gap: 2px;
    height: 24px;
  }
  .api .row-facts {
    flex-basis: 100%;
    text-align: left;
  }
}

/* Reports print as a clean document: no header bar, footer links or buttons. */
@media print {
  :root {
    --bg: #ffffff;
  }
  body {
    background: #fff;
    font-size: 12px;
  }
  header.site,
  footer.site,
  .no-print,
  .site-banner {
    display: none !important;
  }
  main.wrap {
    padding: 0;
    max-width: none;
  }
  .panel,
  .stat,
  .inc-list {
    break-inside: avoid;
    border-color: #ccc;
  }
  a {
    text-decoration: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
  @view-transition {
    navigation: none;
  }
}

/* ---- toggles ----------------------------------------------------------------
   Two kinds, one look. A segmented switch picks one of a few views (History
   type, response-time period, time zone): a grey track with the choice raised.
   Filter chips pick one of many (components, regions): outlined pills, the
   choice filled. Both are 32px tall (28px small) and share type and motion. */
.seg {
  display: inline-flex;
  align-self: flex-start;
  flex: none;
  gap: 2px;
  padding: 3px;
  background: var(--track);
  border-radius: 999px;
}
.seg-opt {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--muted);
  text-decoration: none;
  cursor: pointer;
  transition:
    color 0.18s var(--ease),
    background 0.18s var(--ease),
    box-shadow 0.18s var(--ease);
}
.seg-opt:hover {
  color: var(--fg);
}
.seg-opt[aria-pressed='true'],
.seg-opt[aria-current='page'] {
  background: var(--surface);
  color: var(--fg);
  box-shadow:
    0 1px 2px #0000001a,
    0 0 0 0.5px #0000000f;
}
.seg.sm {
  padding: 2px;
}
.seg.sm .seg-opt {
  height: 24px;
  padding: 0 11px;
  font-size: 12px;
}

.chips.filter {
  gap: 6px;
}
.filter .chip {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--muted);
  background: var(--surface);
  border-color: var(--line);
  transition:
    color 0.18s var(--ease),
    background 0.18s var(--ease),
    border-color 0.18s var(--ease);
}
.filter .chip:hover {
  color: var(--fg);
  border-color: var(--line-strong);
}
.filter .chip[aria-pressed='true'],
.filter .chip[aria-current='page'] {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--bg);
}
.seg-opt:focus-visible,
.filter .chip:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}
@media (max-width: 720px) {
  .filter .chip {
    height: 30px;
    padding: 0 12px;
  }
}

/* A PoP picked from the list always shows its code on the map, whatever the view's label rules. */
.map[data-view] .pin.focus text {
  display: block;
}

/* ---- light / dark switch ---- */
.theme-btn {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: #bdbdbd;
  cursor: pointer;
  transition:
    color 0.18s,
    background 0.18s;
}
.theme-btn:hover {
  color: #ffffff;
  background: #ffffff0b;
}
.theme-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.theme-btn svg {
  grid-area: 1 / 1;
  transition:
    transform 0.4s var(--ease),
    opacity 0.25s;
}
/* The button shows the current choice: sun (light), moon (dark) or a screen (system). */
.theme-btn .i-sun,
.theme-btn .i-moon {
  opacity: 0;
  transform: rotate(-90deg) scale(0.6);
}
:root[data-theme='light'] .theme-btn .i-sun,
:root[data-theme='dark'] .theme-btn .i-moon {
  opacity: 1;
  transform: none;
}
:root[data-theme] .theme-btn .i-system {
  opacity: 0;
  transform: scale(0.6);
}
html:not(.js) .theme-btn {
  display: none;
}
/* Switching: one circle grows from the button and reveals the new theme over the
   whole page, header included (its own transition name is dropped meanwhile). */
html.theme-switching header.site,
html.theme-switching .tabs .ink {
  view-transition-name: none;
}
html.theme-switching::view-transition-old(root),
html.theme-switching::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.theme-switching::view-transition-old(root) {
  z-index: 1;
}
html.theme-switching::view-transition-new(root) {
  z-index: 2;
}
/* Narrow phones: logo, theme switch and Subscribe stay on one row. */
@media (max-width: 480px) {
  .actions {
    gap: 2px;
  }
  .theme-btn {
    width: 36px;
    height: 36px;
  }
  .cta {
    min-height: 38px;
    padding: 0 12px;
    gap: 6px;
    font-size: 13px;
  }
  .cta svg {
    display: none;
  }
}
/* Desktop header: logo left, tabs centred in the capsule, actions right. */
@media (min-width: 721px) {
  .capsule {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }
  .capsule .brand {
    justify-self: start;
  }
  .capsule .tabs {
    margin-left: 0;
  }
  .capsule .actions {
    justify-self: end;
  }
}

/* Every page title sits the same way: the overview's status headline matches the
   other pages' titles (size, weight, position); its status dot leads the line below. */
.hero h1,
.edge-head h1,
.page-head h1 {
  display: block;
  margin-top: 0;
  font-size: clamp(30px, 4.6vw, 42px);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.hero-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---- cloud providers ---- */
/* /clouds (src/web/clouds.tsx): a summary line, then one list with a row per
   provider, like the Edge list. Colour sits in dots, pills and text only. */
.cl-sum {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cl-sum-line {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.cl-sum-meta {
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cl-warn {
  color: var(--c);
  font-weight: 650;
}
.cl-label {
  font-size: 12px;
  color: var(--muted);
}
.cl-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The list: one card, a row per provider. */
.cl-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: clip;
}
.cl-hdr {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) 118px 64px minmax(80px, 150px) 60px 14px;
  align-items: center;
  gap: 14px;
}
.cl-cols {
  padding: 12px var(--pad) 8px;
  font-size: 12px;
  color: var(--muted);
}
.cl-p {
  border-top: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.hdr.cl-hdr {
  display: grid;
  padding-block: 13px;
}
.cl-name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  min-width: 0;
}
.cl-name {
  overflow: hidden;
}
.cl-name .name-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-state {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-nd-text {
  color: var(--muted);
}
.cl-notes {
  color: var(--muted);
}
.cl-num {
  text-align: right;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cl-num.cl-warn {
  color: var(--c);
}
.cl-line-col {
  display: flex;
  align-items: center;
  min-width: 0;
}
.cl-line-col .track {
  flex: 1;
}
.cl-axis {
  justify-content: space-between;
  font-size: 11px;
}
.track.cl-track {
  height: 6px;
}
.track.cl-track > i {
  min-width: 1px;
}

/* An open row. */
.cl-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 var(--pad) 16px calc(var(--pad) + 22px);
}
.cl-note {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
}
.cl-note a {
  color: var(--fg);
}
.cl-affected {
  font-size: 13px;
  color: var(--muted);
}
.cl-affected b {
  color: var(--fg);
  font-weight: 600;
}
.cl-quiet-line {
  font-size: 13px;
  color: var(--muted);
}
.cl-incs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.cl-inc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}
.cl-inc:first-child {
  border-top: 0;
  padding-top: 0;
}
.cl-inc-head {
  display: flex;
  align-items: baseline;
  gap: 6px 10px;
}
.cl-inc-head .sdot {
  transform: translateY(-1px);
}
.cl-inc-title {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.cl-inc-msg {
  margin-left: 18px;
  font-size: 13px;
  max-width: 72ch;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cl-inc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-left: 18px;
  font-size: 12px;
  color: var(--muted);
}
.cl-out {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
}
.cl-out:hover {
  color: var(--fg);
}
.sdot.cl-quiet {
  background: var(--unknown);
}

/* Regions: each source in its own columns. */
.cl-sub {
  font-size: 13px;
  font-weight: 650;
}
.cl-rt {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 140px minmax(80px, 150px);
  align-items: end;
  gap: 12px;
}
.cl-rt.both {
  grid-template-columns: 20px minmax(0, 1fr) 140px 140px minmax(80px, 150px);
}
.cl-rt-head {
  padding: 2px 0 6px;
  font-size: 12px;
  color: var(--muted);
}
.cl-src {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.cl-src-name {
  color: var(--fg);
  font-weight: 600;
  text-align: right;
}
.cl-src-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  text-align: right;
}
.cl-rlist {
  list-style: none;
  margin: 0;
  padding: 0;
}
.cl-rlist .cl-rt {
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.cl-rname {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.cl-rcity {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-rid {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* The collapsed parts of an open row. */
.node.cl-sec > .hdr {
  padding-block: 10px;
}
.cl-incs.cl-incs-in {
  padding: 0 var(--pad) 12px calc(var(--pad) + 20px);
}
.inc-list.cl-list-in {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.cl-row {
  padding-block: 9px;
}
.cl-pad {
  padding: 8px var(--pad) 12px calc(var(--pad) + 20px);
}
.cl-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px var(--pad) 14px calc(var(--pad) + 22px);
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}
.cl-fine {
  font-size: 12px;
  color: var(--muted);
  max-width: 76ch;
}

@media (max-width: 760px) {
  .cl-rt.both {
    grid-template-columns: 20px minmax(0, 1fr) 124px 124px;
  }
  .cl-rt.both .cl-line-col {
    display: none;
  }
}
@media (max-width: 600px) {
  /* Phones: one line per provider: dot, name, status word, 24 hours. */
  .cl-hdr {
    grid-template-columns: 8px minmax(0, 1fr) auto 58px 14px;
    gap: 10px;
  }
  .cl-hdr .cl-line-col,
  .cl-hdr .cl-ms-col,
  .cl-label,
  .cl-notes {
    display: none;
  }
  .cl-cols > span:nth-child(3) {
    text-align: right;
  }
  .cl-body,
  .cl-foot,
  .cl-pad,
  .cl-incs.cl-incs-in {
    padding-left: var(--pad);
  }
  .cl-inc-head {
    flex-wrap: wrap;
  }
  .cl-inc-msg,
  .cl-inc-meta {
    margin-left: 0;
  }
  .cl-rt,
  .cl-rt.both {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }
  .cl-rt .cl-line-col,
  .cl-rt .cl-ms-col,
  .cl-rid {
    display: none;
  }
  .cl-pair,
  .cl-src-cols {
    grid-template-columns: auto;
  }
  .cl-src-cols > :nth-child(2) {
    display: none;
  }
  .cl-rt.both {
    grid-template-columns: 20px minmax(0, 1fr) 76px 76px;
    gap: 8px;
  }
  .cl-src-name {
    font-size: 11px;
  }
}

/* Phones: five tabs scroll sideways inside the header rather than overflow it. */
@media (max-width: 720px) {
  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }
  .tabs::-webkit-scrollbar {
    display: none;
  }
  .tabs a {
    flex: 1 0 auto;
  }
}