/* status.dynamical.org — shared chrome + arrivals dashboard styles.
   Tokens and .status-* rules ported from dynamical.org/public/main.css so
   the moved /arrivals page renders identically. */

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

:root {
  color-scheme: light dark;

  --bg-color: #ffffff;
  --text-color: #111111;
  --link-color: #0b57d0;
  --link-visited-color: #6f42c1;
  --border-color: #111111;
  --border-muted-color: #444444;
  --muted-text: #666666;
  --muted-text-2: #999999;

  /* Floating popup (ported from dynamical.org) */
  --popup-bg: #ffffff;
  --popup-border: #cccccc;
  --shadow-color: rgba(0, 0, 0, 0.15);

  /* 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);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #0f0f10;
    --text-color: #e8e8ea;
    --link-color: #8ab4f8;
    --link-visited-color: #c58af9;
    --border-color: #e8e8ea;
    --border-muted-color: #b5b5b5;
    --muted-text: #b5b5b5;
    --muted-text-2: #8f8f93;

    --popup-bg: #151517;
    --popup-border: #3a3a3d;
    --shadow-color: rgba(0, 0, 0, 0.5);

    /* 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;
  }
}

/* 1rem = 10px, as on dynamical.org */
html {
  font-size: 62.5%;
}

body,
input,
select,
button,
h1,
h2,
h3 {
  font-family: 'IBM Plex Mono', monospace;
}

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

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

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

/* Shared chrome: nav + footer on every status.dynamical.org page.
   Nav mirrors dynamical.org/public/main.css — logo lockup + flex row. */
nav {
  max-width: 78rem;
  margin: 1.25rem auto 4rem;
}

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 .brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
  margin-right: auto;
}

.nav-lockup {
  display: block;
}

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

.status-tag {
  color: var(--text-color);
  text-decoration: none;
}

@media (max-width: 1000px) {
  nav .brand {
    flex-basis: 100%;
    margin-right: 0;
  }
}

.site-footer {
  max-width: 78rem;
  margin: 4rem auto 0;
  padding-top: 1rem;
  border-top: 1px dotted var(--border-muted-color);
  color: var(--muted-text);
  font-size: 1.2rem;
}

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

.muted {
  color: var(--muted-text);
}

/* Overview page: resource list. */
.resource-list {
  margin: 2rem 0;
  padding-left: 2rem;
}

.resource-list li {
  margin: 0.8rem 0;
}

.resource-list .muted {
  margin-left: 0.4rem;
}

/* Overview page: Better Stack status badge, light/dark variant per system theme.
   Floats bottom-right like the dynamical.org "latest content" popup. */
#status-popup {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: 1rem;
  background: var(--popup-bg);
  border: 1px solid var(--popup-border);
  border-radius: 4px;
  box-shadow: 0 4px 12px var(--shadow-color);
  z-index: 1000;
}

.status-badge {
  display: block;
  border: 0;
}

.status-badge-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .status-badge-light {
    display: none;
  }

  .status-badge-dark {
    display: block;
  }
}

table {
  border-collapse: collapse;
}

table th,
table td {
  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;
}

/* ------------------------------------------------------------------ */
/* arrivals dashboard (ported verbatim from main.css /status/ section) */
/* ------------------------------------------------------------------ */

.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) {
  body {
    padding: 2rem;
  }

  .status-row {
    grid-template-columns: 1fr;
  }

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