*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Theme tokens (light defaults; auto-overridden by OS/browser dark mode) */
:root {
  color-scheme: light dark;

  --bg-color: #ffffff;
  --text-color: #111111;
  --header-color: #111111;

  --link-color: #0b57d0;
  --link-visited-color: #6f42c1;

  --border-color: #111111;
  --border-muted-color: #444444;

  --code-bg: #000000;

  --popup-bg: #ffffff;
  --popup-border: #cccccc;
  --muted-text: #666666;
  --muted-text-2: #999999;
  --shadow-color: rgba(0, 0, 0, 0.15);

  /* 1-bit ordered-dither shadow images: a 14x4 SVG tile with Bayer-style
     coverage that fades dense → sparse left-to-right (the -l variant is
     for left edges, the -r variant is the same pattern mirrored for
     right edges via SVG transform). Tiled vertically via repeat-y at
     14px x 4px. shape-rendering=crispEdges keeps cells pixel-aligned. */
  --shadow-dither-l: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4' preserveAspectRatio='none' shape-rendering='crispEdges'><g fill='black' fill-opacity='.4'><rect width='1' height='4'/><rect x='1' width='1' height='4'/><rect x='2' width='1' height='1'/><rect x='2' y='2' width='1' height='1'/><rect x='3' y='1' width='1' height='1'/><rect x='3' y='3' width='1' height='1'/><rect x='4' width='1' height='3'/><rect x='5' y='1' width='1' height='1'/><rect x='5' y='3' width='1' height='1'/><rect x='6' width='1' height='1'/><rect x='6' y='2' width='1' height='1'/><rect x='7' y='1' width='1' height='1'/><rect x='7' y='3' width='1' height='1'/><rect x='8' width='1' height='1'/><rect x='8' y='2' width='1' height='1'/><rect x='9' y='1' width='1' height='1'/><rect x='10' y='2' width='1' height='1'/><rect x='11' y='3' width='1' height='1'/></g></svg>");
  --shadow-dither-r: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4' preserveAspectRatio='none' shape-rendering='crispEdges'><g fill='black' fill-opacity='.4' transform='translate(14 0) scale(-1 1)'><rect width='1' height='4'/><rect x='1' width='1' height='4'/><rect x='2' width='1' height='1'/><rect x='2' y='2' width='1' height='1'/><rect x='3' y='1' width='1' height='1'/><rect x='3' y='3' width='1' height='1'/><rect x='4' width='1' height='3'/><rect x='5' y='1' width='1' height='1'/><rect x='5' y='3' width='1' height='1'/><rect x='6' width='1' height='1'/><rect x='6' y='2' width='1' height='1'/><rect x='7' y='1' width='1' height='1'/><rect x='7' y='3' width='1' height='1'/><rect x='8' width='1' height='1'/><rect x='8' y='2' width='1' height='1'/><rect x='9' y='1' width='1' height='1'/><rect x='10' y='2' width='1' height='1'/><rect x='11' y='3' width='1' height='1'/></g></svg>");

  --pill-available-bg: #5bc54a;
  --pill-available-fg: #081a08;
  --pill-muted-bg: #f0f0f0;
  --pill-muted-fg: #111111;
  --pill-muted-border: #d0d0d0;

  /* wxopticon arrival-status colors (light) */
  --status-on-time: #5bc54a;
  --status-on-time-fg: #081a08;
  --status-in-progress: #f4b942;
  --status-in-progress-fg: #1a1204;
  --status-late: #ff8c3e;
  --status-late-fg: #200a00;
  --status-failed: #e5484d;
  --status-failed-fg: #ffffff;
  --status-unobserved: #a8a8ad;
  --status-track-bg: #e9e9ee;

  --status-on-track: var(--status-on-time);

  /* Brand radius tokens — mirror dynamical-org/brand colors_and_type.css.
     sm matches the logo shoulder fillet (2.5px); md = popups; lg = dark frame. */
  --radius-sm: 2.5px;
  --radius-md: 4px;
  --radius-lg: 6px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0f0f10;
    --text-color: #e8e8ea;
    --header-color: #ffffff;

    --link-color: #8ab4f8;
    --link-visited-color: #c58af9;

    --border-color: #e8e8ea;
    --border-muted-color: #b5b5b5;

    --code-bg: #000000;

    --popup-bg: #151517;
    --popup-border: #3a3a3d;
    --muted-text: #b5b5b5;
    --muted-text-2: #8f8f93;
    --shadow-color: rgba(0, 0, 0, 0.5);

    --shadow-dither-l: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4' preserveAspectRatio='none' shape-rendering='crispEdges'><g fill='white' fill-opacity='.5'><rect width='1' height='4'/><rect x='1' width='1' height='4'/><rect x='2' width='1' height='1'/><rect x='2' y='2' width='1' height='1'/><rect x='3' y='1' width='1' height='1'/><rect x='3' y='3' width='1' height='1'/><rect x='4' width='1' height='3'/><rect x='5' y='1' width='1' height='1'/><rect x='5' y='3' width='1' height='1'/><rect x='6' width='1' height='1'/><rect x='6' y='2' width='1' height='1'/><rect x='7' y='1' width='1' height='1'/><rect x='7' y='3' width='1' height='1'/><rect x='8' width='1' height='1'/><rect x='8' y='2' width='1' height='1'/><rect x='9' y='1' width='1' height='1'/><rect x='10' y='2' width='1' height='1'/><rect x='11' y='3' width='1' height='1'/></g></svg>");
    --shadow-dither-r: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 4' preserveAspectRatio='none' shape-rendering='crispEdges'><g fill='white' fill-opacity='.5' transform='translate(14 0) scale(-1 1)'><rect width='1' height='4'/><rect x='1' width='1' height='4'/><rect x='2' width='1' height='1'/><rect x='2' y='2' width='1' height='1'/><rect x='3' y='1' width='1' height='1'/><rect x='3' y='3' width='1' height='1'/><rect x='4' width='1' height='3'/><rect x='5' y='1' width='1' height='1'/><rect x='5' y='3' width='1' height='1'/><rect x='6' width='1' height='1'/><rect x='6' y='2' width='1' height='1'/><rect x='7' y='1' width='1' height='1'/><rect x='7' y='3' width='1' height='1'/><rect x='8' width='1' height='1'/><rect x='8' y='2' width='1' height='1'/><rect x='9' y='1' width='1' height='1'/><rect x='10' y='2' width='1' height='1'/><rect x='11' y='3' width='1' height='1'/></g></svg>");

    --pill-muted-bg: #2a2a2d;
    --pill-muted-fg: #e8e8ea;
    --pill-muted-border: #3a3a3d;

    /* wxopticon arrival-status colors (dark) */
    --status-on-time: #3fbe29;
    --status-on-time-fg: #e8ffea;
    --status-in-progress: #d8a030;
    --status-in-progress-fg: #1a1204;
    --status-late: #e67230;
    --status-late-fg: #200a00;
    --status-failed: #d2383d;
    --status-failed-fg: #ffffff;
    --status-unobserved: #6a6a6d;
    --status-track-bg: #232326;
  }
}

/* html is set to 62.5% so that all the REM measurements are 1rem = 10px */
html {
  font-size: 62.5%;
}

body,
input,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'IBM Plex Mono', monospace;
}

body {
  padding: 2rem 4rem;
  font-size: 1.4rem;
  line-height: 1.6;
  color: var(--text-color);
  background-color: var(--bg-color);
}

.status-pill {
  display: inline-block;
  padding: 0.05em 0.55em;
  border-radius: 999px;
  font-size: 0.85em;
  font-weight: 700;
  letter-spacing: 0.2px;
  border: 1px solid transparent;
}

.status-pill--available,
.status-pill--updating {
  background: var(--pill-available-bg);
  color: var(--pill-available-fg);
}

.status-pill--other {
  background: var(--pill-muted-bg);
  color: var(--pill-muted-fg);
  border-color: var(--pill-muted-border);
}

a {
  color: var(--link-color);
}

a:visited {
  color: var(--link-visited-color);
}

/* Prevent visited-link styling from recoloring interactive SVG maps (e.g. scorecard). */
#map-container svg a:link,
#map-container svg a:visited,
#map-container svg a:hover,
#map-container svg a:active {
  fill: inherit;
  stroke: inherit;
  color: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--header-color);
}

p {
  margin-bottom: 1.2rem;
}

.small-note {
  font-size: 0.9em;
  color: var(--muted-text);
}

.small-note a {
  color: inherit;
}

.small-note a:visited {
  color: inherit;
}

.table-container {
  /* Caps the wrapper at the article column width (100% of .content =
     78rem on wide viewports, body-content-area on narrow ones) and
     scrolls horizontally when the table inside is wider. Default
     block sizing already produces max-width:100% — written explicitly
     so the intent is obvious. */
  max-width: 100%;
  overflow-x: auto;
  /* Edge indicators that appear only when content overflows on that
     side. Three layers per side: a solid-color "cover" anchored to the
     scrolled content (background-attachment: local) sits at the
     content's left/right edge; behind it, a 1px border line and a
     dithered fade shadow are anchored to the scroll viewport
     (background-attachment: scroll) at the container's left/right edge.
     When the content edge lines up with the viewport edge (scrolled to
     that side, or no overflow), the cover hides both the border and
     the shadow. Once scrolled off, both show through — the border
     marks the cut, the dithered shadow signals "more content this way". */
  background-image:
    linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--bg-color), var(--bg-color)),
    linear-gradient(var(--border-color), var(--border-color)),
    linear-gradient(var(--border-color), var(--border-color)),
    var(--shadow-dither-l),
    var(--shadow-dither-r);
  background-position: 0 0, 100% 0, 0 0, 100% 0, 0 0, 100% 0;
  background-size:
    16px 100%, 16px 100%,
     1px 100%,  1px 100%,
    14px 4px,  14px 4px;
  background-repeat:
    no-repeat, no-repeat,
    no-repeat, no-repeat,
    repeat-y,  repeat-y;
  background-attachment: local, local, scroll, scroll, scroll, scroll;
}

table {
  border-collapse: collapse;
}

table td,
table th {
  padding: 4px 8px;
  overflow-wrap: break-word;
  text-align: left;
}

table.data {
  border: 1px solid var(--border-color);
  min-width: 640px;
}

table.data th {
  border-bottom: 1px solid var(--border-color);
}

table.data td,
table.data th {
  padding: 10px 20px;
  border-right: 1px dotted var(--border-muted-color);
}


table.data tr td.right,
table.data tr th.right {
  text-align: right;
}

table.data.small {
  font-size: 1.2rem;
}

table.data.small td,
table.data.small th {
  padding: 4px 12px;
  white-space: nowrap;
}

/* Catalog grouped table */
.catalog-table .catalog-model-cell {
  font-weight: 700;
  vertical-align: top;
  white-space: nowrap;
}

.catalog-glyph {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 0.8rem;
}

.catalog-glyph svg {
  height: 1em;
  width: 1em;
}

.catalog-table tr.catalog-group-last td,
.catalog-table tr.catalog-group-last + tr td {
  border-top: 1px solid var(--border-color);
}

caption {
  padding: 10px;
}

/* Hero section */
.hero-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  max-width: 78rem;
  margin: 4rem auto 6rem;
  min-width: 0;
}

.hero-section > * {
  min-width: 0;
}

.hero-heading {
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 1.6rem;
  color: var(--header-color);
}

.hero-subtitle {
  font-size: 1.8rem;
  line-height: 1.5;
  color: var(--muted-text);
  margin: 0 0 2.4rem;
}

.hero-cta {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  color: var(--header-color);
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 700;
}

.hero-cta:visited {
  color: var(--header-color);
}

.hero-cta:hover {
  background-color: var(--header-color);
  color: var(--bg-color);
}

.hero-stats {
  display: flex;
  margin-top: 3.2rem;
}

.hero-stat {
  padding: 0 2rem;
  border-left: 1px solid var(--border-muted-color);
}

.hero-stat:first-child {
  padding-left: 0;
  border-left: none;
}

.hero-stat-value {
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--header-color);
  line-height: 1.2;
}

.hero-stat-label {
  font-size: 1.2rem;
  color: var(--muted-text);
}

.hero-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#globe-canvas {
  display: block;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.globe-timeline {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  max-width: 300px;
  margin-top: 0.4rem;
}

.globe-time-label {
  font-size: 0.75rem;
  color: var(--muted-text-2);
  white-space: nowrap;
}

#globe-slider {
  flex: 1;
  height: 2px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--muted-text-2);
  opacity: 0.4;
  outline: none;
  cursor: pointer;
}

#globe-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-text);
  cursor: pointer;
}

#globe-slider::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted-text);
  border: none;
  cursor: pointer;
}

.globe-footnote {
  font-size: 1rem;
  color: var(--muted-text-2);
  text-align: center;
  margin-top: 0.4rem;
}

.globe-footnote a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

nav,
.content,
.frame {
  max-width: 78rem;
  margin: auto;
}

nav {
  margin: 1.25rem auto 2.25rem;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 1.25rem;
  padding-inline-start: 0;
  margin: 0;
}

nav li {
  list-style: none;
}

nav ul li:first-child {
  font-weight: 700;
  margin-right: auto;
}

.nav-lockup img {
  display: block;
  height: 30px;
  width: auto;
}

footer {
  max-width: 78rem;
  margin: 6rem auto 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--popup-border);
  color: var(--muted-text);
  font-size: 1.4rem;
  text-align: center;
}

footer > div + div {
  margin-top: 0.5rem;
}

#footer-frame {
  display: block;
  width: 100%;
  border: 0;
  margin: 6rem auto 2rem;
}

#footer-frame[style*="height"] {
  overflow: hidden;
}



article {
  border: 1px solid var(--border-color);
  margin: 2rem -3rem;
  padding: 2rem 3rem;
}

article img {
  max-width: 100%;
}

.content.centered {
  text-align: center;
}

.content pre[class*="language-"] {
  background-color: var(--code-bg);
}

.frame {
  margin: 2rem auto;
  border: 1px solid #292929;
  border-radius: 6px;
  background: #171717;
  overflow: hidden;
}

.frameHeader {
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #292929;
  background: black;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  gap: 12px;
}

.frameHeaderTitle {
  position: relative;
  display: grid;
  height: 40px;
  align-items: center;
  color: #fafafa;
  font-size: 14px;
  line-height: 40px;
  vertical-align: top;
  border-bottom: 1px solid white;
}

.frameHeaderSubtitle {
  height: 40px;
  color: #898989;
  font-size: 14px;
  line-height: 40px;
}

.frameContent {
  width: 100%;
  margin: 0;
  overflow-x: auto;
  background: #1d1f21;
}

.frameContent code {
  font-family: inherit;
  font-size: 1.5rem;
  letter-spacing: 0.1px;
  line-height: 22.5px;
}

.frameContentMobile {
  display: none;
}

.frameResult {
  width: 100%;
  outline: 1px solid #292929;
  display: block;
}

#newsletter {
  margin-top: 4rem;
}

#newsletter form > * {
  margin: 1rem 0;
}

.content input,
.content select {
  font-size: inherit;
}

/* Latest popup styles */
#latest-popup {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  background: var(--popup-bg);
  color: var(--text-color);
  border: 1px solid var(--popup-border);
  border-radius: var(--radius-md);
  padding: 1rem;
  box-shadow: 0 4px 12px var(--shadow-color);
  max-width: 300px;
  z-index: 1000;
}

#latest-popup .popup-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}

#latest-popup .popup-type {
  font-weight: bold;
  color: var(--muted-text);
}

#latest-popup .popup-close {
  background: none;
  border: none;
  font-size: 1.2em;
  cursor: pointer;
  color: var(--muted-text-2);
  padding: 0;
  line-height: 1;
}

#latest-popup .popup-title {
  font-weight: 500;
  text-decoration: none;
  color: inherit;
}

#latest-popup .popup-date {
  color: var(--muted-text);
  font-size: 0.8em;
  margin-top: 0.25rem;
}

.scorecard-chart figure {
  margin: 0;
}

.responsive-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

@media screen and (max-width: 1000px) {
  body {
    padding: 2rem 1rem;
  }

  nav ul {
    justify-content: flex-start;
  }

  nav ul li:first-child {
    flex-basis: 100%;
    margin-right: 0;
  }

  .hero-section {
    grid-template-columns: 1fr;
    gap: 2rem;
    margin: 2rem auto 4rem;
  }

  .hero-visual {
    order: -1;
  }

  .hero-heading {
    display: none;
  }

  .hero-content {
    text-align: center;
  }

  .hero-stats {
    flex-wrap: wrap;
    gap: 1.6rem 0;
    justify-content: center;
  }


  .frame {
    margin: 4rem auto;
  }

  .frameContentDesktop + .frameContentMobile {
    display: none;
  }

  .frameContentMobile {
    display: block;
  }

  .frameHeaderTitle {
    display: none;
  }
  
  /* Allow header to grow to fit wrapped subtitle */
  .frameHeader {
    height: auto;
    min-height: 40px;
    align-items: center;
    padding: 8px 16px;
  }
  
  .frameHeaderSubtitle {
    height: auto;
    line-height: 1.3;
    white-space: normal;
  }

  .site-footer__inner {
    justify-content: center;
    text-align: center;
  }
}

@media (prefers-color-scheme: dark) {
  img[src$="/assets/github-mark.svg"],
  img[src$="github-mark.svg"] {
    filter: invert(1);
  }
}

/* ------------------------------------------------------------------ */
/* status page (/status/) */
/* ------------------------------------------------------------------ */

.status-row {
  display: grid;
  grid-template-columns: 19rem 1fr 16rem;
  gap: 2rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--border-muted-color);
  align-items: start;
}

.status-row:first-of-type {
  border-top: none;
}

.status-row-body {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  min-width: 0;
}

/* Left-aligned y-axis column: one label per lead group, centered on its
   band. Height matches .status-bar-track so percentages line up. */
.status-group-labels {
  position: relative;
  flex-shrink: 0;
  width: 2.6rem;
  height: 13rem;
  font-size: 1rem;
  color: var(--muted-text);
  line-height: 1;
}

.status-group-labels span {
  position: absolute;
  right: 0;
  transform: translateY(50%);
  white-space: nowrap;
}

.status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0.6rem;
  min-height: 10rem;
  flex: 1;
  min-width: 0;
}

.status-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  outline: none;
}

.status-bar-track {
  position: relative;
  width: 100%;
  height: 13rem;
  border: 1px solid var(--text-color);
  overflow: hidden;
}

.status-bar-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fill, 0%);
}

/* Stacked lead-group segments (when summary.json carries lead_groups).
   Each band is positioned absolutely within the track — --band-bottom
   is the cumulative share of leads below this band, --band-height is
   this group's share. --fill is the share of that band that's arrived.
   The inner div is what carries the status-keyed background color so
   the band outline (hairline separator) stays visible even at 0% fill. */
.status-bar-fill-group {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--band-bottom, 0%);
  height: var(--band-height, 0%);
}

.status-bar-fill-group + .status-bar-fill-group:not(:last-child) {
  border-top: 1px solid var(--text-color);
}

.status-bar-fill-inner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--fill, 0%);
}

.status-bar[data-skeleton] {
  animation: status-skeleton-pulse 1.6s ease-in-out infinite;
}

@keyframes status-skeleton-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .status-bar[data-skeleton] {
    animation: none;
    opacity: 0.45;
  }
}

/* Status fills — solid color per (status, on_timedness) pair. Single-fill
   rules below only fire on pre-lead-groups snapshots (every current product
   emits lead_groups); the stacked-segment rules further down handle the
   normal path. Unobserved / failed / not_started use the track-level rules
   (dotted border, no fill). */

.status-bar[data-status="complete"][data-on-timedness="on_time"] .status-bar-fill {
  background-color: var(--status-on-time);
}

.status-bar[data-status="complete"][data-on-timedness="late"] .status-bar-fill {
  background-color: var(--status-late);
}

.status-bar[data-status="processing"] .status-bar-fill {
  background-color: var(--status-in-progress);
}

.status-bar[data-status="processing"][data-on-timedness="on_track"] .status-bar-fill {
  background-color: var(--status-on-track);
}

.status-bar[data-status="failed"] .status-bar-fill {
  background-color: var(--status-failed);
  /* Failed is terminal — always fill the full bar so a 0%-completion
     failure still reads as "failed" instead of blank. Exact completion is
     in the bar's title tooltip. */
  height: 100%;
}

/* Stacked group segments: the class suffix `g-{key}` is `on_timedness ??
   status`, so complete/processing collapse into their timedness values. */
.status-bar-fill-group.g-on_time .status-bar-fill-inner {
  background-color: var(--status-on-time);
}

.status-bar-fill-group.g-on_track .status-bar-fill-inner {
  background-color: var(--status-on-track);
}

.status-bar-fill-group.g-delayed .status-bar-fill-inner {
  background-color: var(--status-in-progress);
}

/* insufficient_data = run is processing but we have no baseline to judge
   timeliness (n < min_samples). Render muted-grey per #66 so it doesn't
   masquerade as "delayed" amber. */
.status-bar-fill-group.g-insufficient_data .status-bar-fill-inner {
  background-color: var(--status-unobserved);
}

.status-bar-fill-group.g-late .status-bar-fill-inner {
  background-color: var(--status-late);
}

.status-bar-fill-group.g-failed .status-bar-fill-inner {
  background-color: var(--status-failed);
  height: 100%;
}

/* Not-started = leads in this group haven't arrived yet during an
   in-progress run. Dotted border echoes the unobserved track treatment
   so it reads as "expected but not yet seen". */
.status-bar-fill-group.g-not_started {
  border: 1px dotted var(--status-unobserved);
}

.status-bar-fill-group.g-not_started .status-bar-fill-inner,
.status-bar-fill-group.g-unobserved .status-bar-fill-inner {
  display: none;
}

/* Unobserved = monitoring-coverage gap, not a publication failure.
   Empty bar with a dotted outline reads as "no information" without
   implying something broke. */
.status-bar[data-status="unobserved"] .status-bar-track {
  border-style: dotted;
  border-color: var(--status-unobserved);
}

.status-bar[data-status="unobserved"] .status-bar-fill,
.status-bar[data-status="unobserved"] .status-bar-fill-group {
  display: none;
}

.status-bar-label {
  font-size: 1rem;
  text-align: center;
  line-height: 1.2;
  min-height: 2.4em;
  color: var(--muted-text);
}

.status-bar-label strong {
  display: block;
  color: var(--text-color);
}

.status-stats {
  text-align: right;
  font-size: 1.2rem;
  color: var(--muted-text);

}

.status-eta strong {
  display: block;
  color: var(--text-color);
}

.status-eta span {
  display: block;
  white-space: nowrap;
}

.status-eta [data-on-timedness="on_track"],
.status-eta [data-on-timedness="on_time"] {
  color: var(--status-on-time);
}

.status-eta [data-on-timedness="delayed"] {
  color: var(--status-in-progress);
}

.status-eta [data-on-timedness="late"] {
  color: var(--status-late);
}

/* insufficient_data / unobserved — no trustworthy signal yet, stay muted. */
.status-eta [data-on-timedness="insufficient_data"],
.status-eta [data-on-timedness="unobserved"] {
  color: var(--muted-text);
}

.eta-details-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--link-color);
  cursor: pointer;
  text-decoration: underline;
}

.status-row-details {
  grid-column: 1 / -1;
  padding: 1rem 0 0.4rem;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.status-row-details table.data {
  margin-left: auto;
  margin-right: auto;
}

.eta-g-on_time { color: var(--status-on-time); }
.eta-g-on_track { color: var(--status-on-time); }
.eta-g-insufficient_data { color: var(--muted-text); }
.eta-g-unobserved { color: var(--muted-text); }
.eta-g-delayed { color: var(--status-in-progress); }
.eta-g-not_started { color: var(--muted-text); }
.eta-g-late { color: var(--status-late); }
.eta-g-failed { color: var(--status-failed); }

.status-footer {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-muted-color);
  color: var(--muted-text);
  font-size: 1.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  justify-content: space-between;
  align-items: center;
}

.status-banner {
  margin-bottom: 1.5rem;
  padding: 0.8rem 1.2rem;
  border-radius: 0.4rem;
  color: var(--text-color);
  font-size: 1.2rem;
}

.status-banner--error {
  border: 1px solid var(--status-failed);
  background-color: color-mix(in srgb, var(--status-failed) 15%, transparent);
}

body:not(.status-time-local) .t-local {
  display: none;
}
body.status-time-local .t-utc {
  display: none;
}

.status-controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.2rem;
}

.status-ribbon:not([hidden]) {
  font-size: 1.2rem;
  padding: 0.8rem 1.2rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--status-in-progress);
  background: color-mix(in srgb, var(--status-in-progress) 18%, transparent);
}

#status-history-panel span {
  position: absolute;
  top: 0;
  left: var(--thumb-pct, 50%);
  transform: translateX(-50%);
  font-size: 1.2rem;
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 900px) {
  .status-row {
    grid-template-columns: 1fr;
  }

  .status-stats {
    display: block;
    text-align: left;
  }
}