/* Time-based releases — Mark Shuttleworth's Ubuntu cadence, made visible. Several
   features are each ready at a different time. "Ship when ready" waits for the slowest
   one, so the whole release slips to the last feature and users get nothing until then.
   A release train that leaves on a fixed schedule (Ubuntu's six months) carries
   whatever is ready; a feature that misses one catches the next. Users get value at the
   first train, and the date is predictable enough for the world to plan around. Toggle
   the two and compare when the first usable release ships. SVG, no deps, no build.
   Palette shared with siblings: green = a shipped release / delivered value (the win),
   cyan = waiting / not yet delivered, neutral track. No red. */

#release-train {
  --rt-ship: #30d158;
  --rt-wait: #5ac8fa;
  font-family: var(--font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  background: var(--color-bg-elevated, #111111);
  border: 1px solid var(--color-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px; padding: clamp(16px, 3vw, 26px); margin: 2.5rem 0;
  color: var(--color-text-primary, #ffffff);
}
.rt-title { font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.rt-explain { font-size: 0.9rem; line-height: 1.55; margin: 8px 0 16px; color: var(--color-text-secondary, rgba(255,255,255,0.7)); }

.rt-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 16px; }
.rt-modes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 10px; background: var(--color-bg-surface, #1a1a1a); }
.rt-mode { appearance: none; cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 600; border: 0; background: transparent; color: var(--color-text-secondary, rgba(255,255,255,0.55)); padding: 7px 13px; border-radius: 7px; transition: color 0.18s, background 0.18s; }
.rt-mode:hover { color: #fff; }
.rt-mode.is-on { color: #0b0b0b; background: var(--color-accent, #fff); }
.rt-delay { appearance: none; cursor: pointer; font: inherit; font-size: 0.8rem; font-weight: 650; border: 1px solid var(--rt-wait); background: transparent; color: var(--rt-wait); padding: 7px 12px; border-radius: 8px; transition: background 0.18s, color 0.18s; }
.rt-delay.on { background: var(--rt-wait); color: #07121a; }

.rt-plot { width: 100%; height: auto; display: block; background: #0c0c0f; border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; }
.rt-axis { stroke: rgba(255,255,255,0.18); stroke-width: 1; }
.rt-tick { fill: var(--color-text-tertiary, rgba(255,255,255,0.42)); font-family: var(--font-mono, monospace); font-size: 9px; text-anchor: middle; }
.rt-rel { stroke: var(--rt-ship); stroke-width: 2; }
.rt-rel-lbl { fill: var(--rt-ship); font-family: var(--font-family, sans-serif); font-size: 8.5px; font-weight: 700; text-anchor: middle; }
.rt-feat { stroke-width: 2; }
.rt-feat-dot-ship { fill: var(--rt-ship); }
.rt-feat-dot-wait { fill: var(--rt-wait); }
.rt-feat-lbl { fill: #fff; font-family: var(--font-mono, monospace); font-size: 9px; text-anchor: middle; }

.rt-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 4px; }
.rt-stat { background: var(--color-bg-surface, #1a1a1a); border: 1px solid var(--color-border-subtle, rgba(255,255,255,0.08)); border-radius: 10px; padding: 10px 12px; }
.rt-stat .rt-k { display: block; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-text-tertiary, rgba(255,255,255,0.45)); margin-bottom: 4px; }
.rt-stat .rt-v { font-family: var(--font-mono, monospace); font-size: 1.05rem; font-weight: 650; }
.rt-stat .rt-v.good { color: var(--rt-ship); }
.rt-stat .rt-v.bad { color: var(--rt-wait); }

.rt-caption { margin-top: 14px; font-size: 0.9rem; line-height: 1.55; color: var(--color-text-secondary, rgba(255,255,255,0.78)); min-height: 2.6em; }
.rt-caption b { color: #fff; }
.rt-caption .rt-hl { color: var(--rt-ship); font-weight: 650; }
.rt-caption .rt-lo { color: var(--rt-wait); font-weight: 650; }
.rt-noscript { font-size: 0.9rem; color: var(--color-text-secondary, rgba(255,255,255,0.65)); line-height: 1.6; }