:root {
  --ink: #1c2733;
  --muted: #5b6b7a;
  --paper: #fafbfc;
  --rule: #d5dce3;
  --track: #eef1f4;
  --link: #0b6e79;
  --minor: #d9a400;
  --major: #e06a1b;
  --critical: #b3122e;
  --none: #8795a1;
  --measure: 72rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #e4e9ee;
    --muted: #9aa8b5;
    --paper: #131a21;
    --rule: #2c3844;
    --track: #1c252e;
    --link: #5cc3cf;
    --none: #6d7b88;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1rem/1.5 "Schibsted Grotesk", system-ui, sans-serif;
}

/* Only figures, not punctuation: tnum in this face also widens colons and commas. */
.facts dd, .month-count { font-variant-numeric: tabular-nums; }

a { color: var(--link); text-underline-offset: 0.15em; }
a:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

header.site, main, footer.site {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 1rem;
}

header.site {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  align-items: baseline;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.mark {
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
}

header.site nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
header.site nav a { color: var(--ink); text-decoration: none; font-weight: 500; }
header.site nav a:hover { text-decoration: underline; }

h1 {
  font-weight: 800;
  font-size: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 22ch;
  margin: 1.5rem 0 1.5rem;
}

h2 {
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin: 2.5rem 0 0.75rem;
}

.lede, .prose p { max-width: 68ch; }
.lede { color: var(--muted); }
.crumb { margin: 1.5rem 0 0; }
.crumb + h1 { margin-top: 0.25rem; }

/* The ribbon: one row per vendor, bars placed in time. */
.ribbon { margin-bottom: 1rem; }

.ribbon-axis {
  display: flex;
  justify-content: space-between;
  margin-left: var(--label-w, 11rem);
  color: var(--muted);
  font-size: 0.8125rem;
  padding-bottom: 0.25rem;
}

.ribbon-row {
  display: grid;
  grid-template-columns: var(--label-w, 11rem) 1fr;
  align-items: center;
  min-height: 1.375rem;
}

.ribbon-name {
  font-size: 0.875rem;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 0.75rem;
}
.ribbon-name:hover { text-decoration: underline; }

.ribbon-track {
  position: relative;
  height: 0.875rem;
  background:
    repeating-linear-gradient(to right, transparent 0 calc(100% / 7 - 1px), var(--rule) calc(100% / 7 - 1px) calc(100% / 7)),
    var(--track);
}

.bar {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 3px;
  border-radius: 2px;
  background: var(--none);
}
.bar:hover, .bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 1; }
.bar.impact-minor { background: var(--minor); }
.bar.impact-major { background: var(--major); }
.bar.impact-critical { background: var(--critical); }
.bar-open { background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgb(255 255 255 / 0.35) 4px 8px); }

.ribbon summary { margin: 0.75rem 0 0.5rem; color: var(--link); cursor: pointer; font-weight: 500; }

.legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.75rem; font-size: 0.875rem; }

.impact::before {
  content: "";
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  margin-right: 0.375rem;
  border-radius: 2px;
  background: var(--none);
}
.impact-minor::before { background: var(--minor); }
.impact-major::before { background: var(--major); }
.impact-critical::before { background: var(--critical); }

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
th { text-align: left; font-weight: 500; color: var(--muted); }
th, td { padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
td a { text-decoration: none; }
td a:hover { text-decoration: underline; }
.num { text-align: right; white-space: nowrap; }

.facts {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 3rem;
  margin: 0 0 1.5rem;
}
.facts dt { color: var(--muted); font-size: 0.875rem; }
.facts dd { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }

.months {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 0.375rem;
  height: 9rem;
  max-width: 40rem;
}
.month { display: grid; grid-template-rows: 1.25rem 1fr 1.25rem; text-align: center; font-size: 0.75rem; }
.month-count { color: var(--muted); }
.month-bar { align-self: end; background: var(--ink); border-radius: 2px 2px 0 0; min-height: 1px; }
.month-label { color: var(--muted); }
.month-no-data .month-bar { background: repeating-linear-gradient(135deg, var(--track) 0 4px, var(--rule) 4px 8px); }
.note { color: var(--muted); font-size: 0.875rem; max-width: 68ch; }

.cascades { list-style: none; padding: 0; max-width: 68ch; }
.cascades li { padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.cascades li > a { font-weight: 700; }
.cascades p { margin: 0.25rem 0 0; font-size: 0.875rem; }
.cascade-count { display: block; color: var(--muted); font-size: 0.875rem; }

.incident { border-bottom: 1px solid var(--rule); }
.incident summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  padding: 0.5rem 0;
  cursor: pointer;
  color: var(--link);
}
.incident summary::marker { color: var(--muted); }
.incident-meta { display: flex; gap: 1rem; color: var(--ink); font-size: 0.875rem; }
.incident-body { padding: 0 0 1rem 1rem; max-width: 68ch; }
.incident:target summary, .incident[open] summary { font-weight: 700; }

.updates { padding-left: 1.25rem; max-width: 68ch; }
.updates li { margin-bottom: 1.25rem; }
.updates p { margin: 0; }
.update-head { color: var(--muted); font-size: 0.875rem; }
.update-status { color: var(--ink); font-weight: 700; text-transform: capitalize; }

footer.site {
  margin-top: 4rem;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.875rem;
}
footer.site p { max-width: 68ch; }

@media (max-width: 40rem) {
  .ribbon { --label-w: 7rem; }
  .col-impact { display: none; }
}