/* The ward.

   A scene rather than a table. The design constraint that shapes all of it: a
   cycle runs every fifteen minutes, so anything that only reacts to events sits
   dead still almost all of the time. What is always happening is the runway
   draining, so that is what moves — every dial ticks down by the second,
   whether or not anything else is going on. */

/* The hidden attribute has to beat a display rule from a class. Both views
   carry display:grid of their own, so without this the switch appears to do
   nothing — the other view simply stays on screen underneath. */
[hidden] { display: none !important; }

/* ── view switch ── */
.live-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; padding-top: 34px;
}
.views {
  display: inline-flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2);
}
.view-btn {
  appearance: none; border: 0; cursor: pointer;
  padding: 8px 16px; border-radius: 6px; background: transparent;
  font: 600 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); transition: background .18s ease, color .18s ease;
}
.view-btn:hover { color: var(--ink-2); }
.view-btn.is-on { background: var(--ink); color: var(--bg); }

.live-status {
  display: inline-flex; align-items: center; gap: 8px;
  font: 11.5px/1 var(--mono); color: var(--ink-3);
}
.pip {
  width: 7px; height: 7px; border-radius: 50%; background: var(--dead);
  transition: background .3s ease;
}
.pip.is-live { background: var(--stable); animation: fade 2s ease-in-out infinite; }

.ward { display: grid; gap: 40px; margin-top: 34px; }
.ward-block { display: grid; gap: 16px; }
.ward-head { max-width: 620px; }
.ward-head h2 { margin: 0 0 7px; font: 600 17px/1.25 var(--sans); letter-spacing: -.015em; }
.ward-head p { margin: 0; font-size: 13.5px; color: var(--ink-3); }

/* ── the living: one pod per agent ── */
.pods { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }

.pod {
  position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 12px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--pod) 9%, transparent), transparent 70%),
    var(--bg-2);
  padding: 18px 16px 15px;
  display: grid; justify-items: center; gap: 12px;
  --pod: var(--stable);
}
.pod.is-STABLE   { --pod: var(--stable); }
.pod.is-TIGHT    { --pod: var(--tight); }
.pod.is-CRITICAL { --pod: var(--critical); border-color: color-mix(in srgb, var(--critical) 30%, var(--line)); }
.pod.is-PENDING  { --pod: var(--dead); }

/* A slow sweep across the pod, faster the closer it is to the floor. It is the
   only thing on the page that says "still going" when no cycle has landed. */
.pod::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--pod) 7%, transparent), transparent);
  transform: translateX(-100%);
  animation: sweep var(--sweep, 7s) linear infinite;
}
@keyframes sweep { to { transform: translateX(100%); } }

.dial { position: relative; width: 118px; height: 118px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial-track { fill: none; stroke: var(--bg-3); stroke-width: 7; }
.dial-arc {
  fill: none; stroke: var(--pod); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset .9s linear, stroke .4s ease;
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--pod) 45%, transparent));
}
.dial-mid {
  position: absolute; inset: 0; display: grid; place-content: center; text-align: center;
}
/* Tabular figures, or the whole clock jitters sideways once a second as digit
   widths change. */
.dial-h {
  font: 600 21px/1 var(--mono); letter-spacing: -.01em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dial-u { margin-top: 4px; font: 10px/1 var(--mono); letter-spacing: .14em; color: var(--ink-3); }

.pod-id { font: 600 13px/1 var(--mono); color: var(--ink); }
.pod-sub { font: 10.5px/1.4 var(--mono); color: var(--ink-3); text-align: center; }
.pod-state {
  font: 600 9.5px/1 var(--mono); letter-spacing: .12em;
  padding: 4px 8px; border-radius: 4px; color: var(--pod); border: 1px solid currentColor;
}
.pod-niche {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 10.5px/1 var(--mono); color: var(--ink-2);
  padding: 5px 8px; border-radius: 4px; background: var(--bg-3);
}
.pod-foot {
  width: 100%; display: flex; justify-content: space-between; gap: 8px;
  padding-top: 11px; border-top: 1px solid var(--line);
  font: 10.5px/1 var(--mono); color: var(--ink-3);
}
.pod-foot b { color: var(--ink-2); font-weight: 600; }

/* ── the cycle rail ── */
.rail {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 0;
  border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2);
  overflow: hidden; position: relative;
}
.station {
  position: relative; padding: 16px 14px 15px;
  border-right: 1px solid var(--line);
  display: grid; gap: 9px; align-content: start;
  transition: background .35s ease;
}
.station:last-child { border-right: 0; }
.station.is-here { background: var(--bg-3); }
.station-top { display: flex; align-items: center; gap: 8px; }
.station-lamp {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: var(--bg); border: 1px solid var(--line-2);
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.station.is-here .station-lamp {
  background: var(--lamp); border-color: var(--lamp);
  box-shadow: 0 0 9px color-mix(in srgb, var(--lamp) 65%, transparent);
}
.station-name { font: 600 10px/1 var(--mono); letter-spacing: .1em; color: var(--ink-3); }
.station.is-here .station-name { color: var(--ink); }
.station-said { font: 10.5px/1.5 var(--mono); color: var(--ink-3); min-height: 2.5em; }
.station.is-here .station-said { color: var(--ink-2); }
.station-cost { font: 10px/1 var(--mono); color: var(--ink-3); }

.station-1 { --lamp: var(--accent); }
.station-2 { --lamp: var(--stable); }
.station-3 { --lamp: #a5b4fc; }
.station-4 { --lamp: var(--tight); }
.station-5 { --lamp: #c4b5fd; }
.station-6 { --lamp: var(--critical); }

/* The pulse that runs the line when a cycle lands. */
.rail-pulse {
  position: absolute; top: 0; bottom: 0; width: 90px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 16%, transparent), transparent);
  transform: translateX(-100%); opacity: 0;
}
.rail-pulse.is-running { animation: runline 1.5s ease-in-out; }
@keyframes runline {
  0%   { transform: translateX(-100%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(calc(100% + 100vw)); opacity: 0; }
}

/* ── the graveyard ── */
.yard {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2);
  min-height: 96px; align-items: flex-end;
}
.grave {
  position: relative; width: 46px;
  display: grid; justify-items: center; gap: 5px;
  cursor: default; animation: drop .5s ease-out;
}
@keyframes drop { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.grave-stone {
  width: 26px; border-radius: 13px 13px 3px 3px;
  background: var(--dead); opacity: .55;
  transition: opacity .2s ease, background .2s ease;
  /* Height carries lifespan, so the yard reads as a bar chart of lives. */
  min-height: 14px;
}
.grave.never .grave-stone { background: var(--critical); }
.grave.earned .grave-stone { background: var(--stable); }
.grave:hover .grave-stone { opacity: 1; }
.grave-h { font: 9.5px/1 var(--mono); color: var(--ink-3); }
.grave-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 260px; z-index: 5;
  padding: 9px 11px; border: 1px solid var(--line-2); border-radius: 7px;
  background: var(--bg); box-shadow: 0 8px 24px rgba(0,0,0,.6);
  font: 10.5px/1.55 var(--mono); color: var(--ink-2);
  opacity: 0; visibility: hidden; transition: opacity .15s ease;
}
.grave:hover .grave-tip { opacity: 1; visibility: visible; }
.grave-tip b { color: var(--ink); }

@media (max-width: 760px) {
  .rail { grid-template-columns: repeat(2, 1fr); }
  .station { border-bottom: 1px solid var(--line); }
  .live-top { padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .pod::after, .rail-pulse.is-running, .grave { animation: none; }
}