*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
/* Keep an off-screen help tooltip (absolutely positioned, only shown on hover) from
   creating a phantom horizontal scrollbar on narrow viewports. `clip` (unlike `hidden`)
   doesn't establish a scroll container, so the sticky header keeps working. It must sit
   on the root element, which is the page's scrolling viewport. */
html { overflow-x: clip; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
  background: #f2f2f4;
  color: #2c2e33;
  overflow-x: clip;
}
/* Base colours for the brief moment before the Tailwind CDN injects its utilities,
   so switching theme never flashes the wrong background. */
html.dark body { background: #27292d; color: #e9e9ec; }

/* ===== Theme toggle icons (show the one matching the active preference) ===== */
.ti { width: 18px; height: 18px; display: none; }
html[data-theme="light"] .ti-light,
html[data-theme="dark"] .ti-dark,
html[data-theme="system"] .ti-system,
html:not([data-theme]) .ti-system { display: block; }

.muted { color: #71727b; font-size: 0.9rem; }
html.dark .muted { color: #9b9ca5; }

/* ===== Pipeline run stepper (work item detail) ===== */
.stepper {
  list-style: none; padding: 0; margin: 0;
  display: flex; gap: 0; align-items: stretch; flex-wrap: wrap;
}
.stepper .step {
  flex: 1 1 0; min-width: 120px;
  display: flex; flex-direction: column; gap: 0.25rem;
  padding: 0.65rem 0.8rem;
  border-left: 4px solid transparent;
  background: #f2f2f4;
  margin-right: 4px;
}
.stepper .step:last-child { margin-right: 0; }
.step-name { font-weight: 600; }
.step-state { font-size: 0.78rem; color: #71727b; }

.step-succeeded { border-left-color: #16a34a; background: #ecfdf5; }
.step-running { border-left-color: #3c65e4; background: #eff3fe; }
.step-failed { border-left-color: #dc2626; background: #fef2f2; }
.step-skipped { border-left-color: #94a3b8; background: #f2f2f4; }
.step-notstarted { border-left-color: #cbd5e1; background: #e9e9ec; }

html.dark .stepper .step { background: #2c2e33; }
html.dark .step-state { color: #9b9ca5; }
html.dark .step-succeeded { background: #0c2a18; }
html.dark .step-running { background: #14224a; }
html.dark .step-failed { background: #2a0f0f; }
html.dark .step-skipped { background: #34363b; }
html.dark .step-notstarted { background: #2c2e33; }

/* ===== Top-nav links (Tailwind utilities can't target NavLink's injected active class) ===== */
.nav-link {
  padding: 0.375rem 0.75rem; border-radius: 0.5rem; color: #54555d;
  text-decoration: none; transition: background-color .12s, color .12s; white-space: nowrap;
}
.nav-link:hover { background: #e9e9ec; color: #2c2e33; }
.nav-link-active { background: #eef2fd; color: #3c65e4; }
html.dark .nav-link { color: #9b9ca5; }
html.dark .nav-link:hover { background: #34363b; color: #f2f2f4; }
html.dark .nav-link-active { background: #27429e; color: #c2d0f8; }

/* ===== Shipping ladder — stage pills joined by a track that colours in with progress ===== */
.ladder { display: inline-flex; align-items: center; gap: 0; flex-wrap: nowrap; }
.ladder-step {
  font-size: 0.72rem; padding: 0.15rem 0.5rem; border-radius: 4px;
  background: #e9e9ec; color: #54555d; border: 1px solid #dcdde1; white-space: nowrap;
}
/* connector segment between two stages; takes the colour of the stage it leads into */
.ladder-conn { width: 22px; height: 3px; background: #dcdde1; flex: 0 0 auto; }
.ladder-step.shipped { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.ladder-step.current { background: #dde5fb; color: #2c4fc4; border-color: #c2d0f8; font-weight: 600; }
.ladder-step.failed  { background: #fee2e2; color: #991b1b; border-color: #fecaca; font-weight: 600; }
.ladder-conn.shipped { background: #16a34a; }
.ladder-conn.current { background: linear-gradient(to right, #16a34a, #3c65e4); }
.ladder-conn.failed  { background: linear-gradient(to right, #16a34a, #dc2626); }

/* dark variants for the ladder pills + connectors */
html.dark .ladder-step { background: #34363b; color: #9b9ca5; border-color: #404148; }
html.dark .ladder-conn { background: #404148; }
html.dark .ladder-step.shipped { background: #14361f; color: #86efac; border-color: #166534; }
html.dark .ladder-step.current { background: #1b2c5e; color: #9bb2f1; border-color: #2c4fc4; }
html.dark .ladder-step.failed  { background: #3b0d0d; color: #fca5a5; border-color: #991b1b; }

/* ===== Help tooltip ("?" button beside a page title) ===== */
.help-tip { position: relative; display: inline-flex; }
.help-tip > button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.25rem; height: 1.25rem; border-radius: 9999px;
  font-size: 0.7rem; font-weight: 700; cursor: help;
  background: #e9e9ec; color: #54555d; border: 0; transition: background-color .12s, color .12s;
}
.help-tip > button:hover { background: #3c65e4; color: #fff; }
html.dark .help-tip > button { background: #34363b; color: #9b9ca5; }
html.dark .help-tip > button:hover { background: #3c65e4; color: #fff; }
.help-tip .help-bubble {
  position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(22rem, calc(100vw - 1.5rem)); z-index: 50;
  padding: 0.6rem 0.75rem; border-radius: 0.6rem;
  background: #2c2e33; color: #e9e9ec; font-size: 0.8rem; font-weight: 400; line-height: 1.45;
  text-align: left; white-space: normal;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transition: opacity .14s ease, visibility .14s;
  pointer-events: none;
}
.help-tip:hover .help-bubble,
.help-tip:focus-within .help-bubble { opacity: 1; visibility: visible; }
.help-tip .help-bubble code {
  background: rgba(255,255,255,.12); border-radius: 3px; padding: 0 0.25rem;
}

/* ===== Hidden-gem tractor ===== */
/* A tiny invisible hotspot in the bottom-left corner. Clicking it sends a small
   tractor trundling across the footer once — a quiet easter egg. */
.farm-trigger {
  position: fixed; left: 0; bottom: 0; width: 34px; height: 34px;
  z-index: 60; cursor: default; background: transparent; border: 0; padding: 0;
}
.farm {
  position: fixed; left: 0; right: 0; bottom: 0; height: 56px;
  overflow: hidden; pointer-events: none; z-index: 50;
  opacity: 0; transition: opacity .25s ease;
}
.farm.show { opacity: 1; }

/* the tractor; transform set by JS each frame */
.rig { position: absolute; bottom: 6px; left: 0; width: 150px; height: 40px; will-change: transform; }
.rig svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* spinning wheels (spokes group rotates about its own centre) */
.spokes { transform-box: fill-box; transform-origin: center; animation: spin .5s linear infinite; }
.spokes.slow { animation-duration: .9s; }
@keyframes spin { to { transform: rotate(360deg); } }

/* exhaust smoke (positioned over the stack by farm.js) */
.smoke { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: rgba(120,120,120,.5); opacity: 0; }
.smoke.s1 { animation: smoke 1.5s ease-out infinite; }
.smoke.s2 { animation: smoke 1.5s ease-out infinite .5s; }
.smoke.s3 { animation: smoke 1.5s ease-out infinite 1s; }
@keyframes smoke {
  0%   { opacity: .5; transform: translate(0,0) scale(.6); }
  100% { opacity: 0;  transform: translate(-14px,-18px) scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .farm { display: none; }
}