/* ==========================================================================
   OpsSync — the hero chase (js/chase.js)
   Sync hunts manual work on the scope glass and automates it.
   Everything here is created by chase.js, so without the script the hero is unchanged.
   Layers inside .hero__screen[data-scope], back to front (scope.css owns z0–z1 and the HUD):
     z2  canvas.chase__canvas   chips, probe cable, pulses in flight, the D1 result lane
     z2  .chase__mark           fallback sprite's antenna mark (the real brand mark, .spin)
     z3  .hero__copy            (site.css)
     z3  .chase__panel          MIN DEVUELTOS meter + beam-written log (decorative, aria-hidden)
     z3  .chase__tag            D1 lane tag
     z4  .chase__run            RUN/STOP key (WCAG 2.2.2 pause control)
   Every layer is absolutely positioned: nothing here may enter the screen's grid flow.
   ========================================================================== */

/* ---------- One character on the page ----------
   Set by chase.js only while its canvas sprite stands in for Sync because the OpsAgent chase API
   (claim/pose/release) is missing. Once agent.js exposes it, the real Sync chases and this never applies. */
html[data-chase-standin] .sync,
html[data-chase-standin] .sync * { visibility: hidden !important; }

/* ---------- Canvas ---------- */
.chase__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  max-width: none;
  pointer-events: none;
}
/* Chips are tappable (hit-tested on the screen); show it on hover. */
.hero__screen.chase--hot { cursor: pointer; }

/* ---------- Fallback sprite: the brand mark on its antenna (never stops) ---------- */
.chase__mark {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: 18px;
  height: 18px;
  pointer-events: none;
  will-change: transform;
}
.chase__mark::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(241, 158, 40, 0.24), rgba(241, 158, 40, 0));
}
.chase__mark svg { position: relative; width: 100%; height: 100%; max-width: none; }
.chase__mark .spin.is-fast { animation-duration: 0.45s; animation-timing-function: linear; }

/* ---------- Shared chrome: fades in when the chase goes live (transition, not keyframes) ---------- */
.chase__panel,
.chase__tag {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear var(--dur-3);
}
.chase--live .chase__panel,
.chase--live .chase__tag {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-3) var(--ease-out), visibility 0s linear 0s;
}

/* ---------- Meter + log panel (under the HUD's state chip) ---------- */
.chase__panel {
  position: absolute;
  z-index: 3;
  top: 56px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(100% - 20px);
  padding: 10px 12px 9px;
  border-radius: 6px;
  background: rgba(10, 11, 9, 0.82);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 24px -14px rgba(0, 0, 0, 0.7);
  pointer-events: none;
  font-family: var(--f-caps);
  line-height: 1;
}
.chase__meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 0;
}
.chase__meter-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
/* A small drawn clock, returned time: 1.75 stroke, round caps. */
.chase__meter-label::before {
  content: "";
  width: 13px;
  height: 13px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F19E28' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6'/%3E%3Cpath d='M20.5 3.5V8H16'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chase__seg {
  font-size: 1.6rem;
  min-height: 1em;
}
.chase__seg svg { max-width: none; }

.chase__log {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 8px 0 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  min-height: calc(3 * 1.3em + 2 * 4px + 8px);
  font-size: 0.72rem;
}
.chase__line {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  transition: color var(--dur-2) var(--ease-out);
}
/* Line marker: amber dot = automated, white ring = manual work arriving, amber ring = in sync. */
.chase__line::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  align-self: center;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber-glow);
}
.chase__line.is-wave::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--phos-white); }
.chase__line.is-sync::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--amber), 0 0 6px var(--amber-glow); }
.chase__txt {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Minutes saved: caps face with tabular figures (a mono comma takes a full cell and reads "8, 8"). */
.chase__val {
  flex: none;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}
.chase__val:empty { display: none; }
.chase__val::before { content: "· "; color: var(--muted); }
.chase__line.is-wave { color: var(--phos-white); }
.chase__line.is-sync { color: var(--amber); }
.chase__line.is-old { color: var(--muted); }
.chase__line.is-old::before { opacity: 0.55; }
/* The beam writing the newest line: a bright block at the write head. */
.chase__line.is-printing .chase__txt::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.95em;
  margin-left: 2px;
  vertical-align: -0.12em;
  background: var(--amber-hot);
  box-shadow: 0 0 6px var(--amber-glow);
}
.chase__line.is-wave.is-printing .chase__txt::after { background: var(--phos-white); box-shadow: 0 0 6px rgba(239, 237, 230, 0.5); }

/* ---------- D1 lane tag (the result lane's channel label) ---------- */
.chase__tag {
  position: absolute;
  z-index: 3;
  left: 14px;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 24px;
  padding: 0 9px;
  border-radius: 4px;
  background: rgba(10, 11, 9, 0.8);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.4);
  pointer-events: none;
  font-family: var(--f-caps);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}
/* A drawn digital pulse, the lane's own waveform. */
.chase__tag::before {
  content: "";
  width: 16px;
  height: 10px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10' fill='none' stroke='%23F19E28' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8.5h3.5v-7h5v7H15'/%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 0 3px rgba(241, 158, 40, 0.6));
}
.chase__tag b { color: var(--amber); font-weight: 700; }
.chase__tag span { color: var(--ink-2); font-weight: 600; }

/* ---------- RUN/STOP key ---------- */
.chase__run {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  margin: 0;
  padding: 0 11px 0 10px;
  border: 1px solid #5A5B52;
  border-radius: 6px;
  background: linear-gradient(180deg, #3D3E37 0%, #30312B 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 6px 14px -8px rgba(0, 0, 0, 0.7);
  color: var(--muted);
  font-family: var(--f-caps);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), opacity var(--dur-3) var(--ease-out);
}
@starting-style { .chase__run { opacity: 0; } }
/* 44 px touch target around a 30 px key. */
.chase__run::after {
  content: "";
  position: absolute;
  inset: -8px -4px;
}
.chase__run:hover { border-color: var(--amber); color: var(--ink-2); }
.chase__run:active { transform: translateY(1px); }
.chase__run:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.chase__led {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 0 2px rgba(241, 158, 40, 0.18), 0 0 8px var(--amber-glow);
  transition: background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.chase__run-txt { display: inline-flex; gap: 1px; }
.chase__run-r { color: var(--amber); transition: color var(--dur-1) var(--ease-out); }
.chase__run-s { transition: color var(--dur-1) var(--ease-out); }
/* Stopped: the key latches down, the LED goes dark, STOP is lit. */
.chase__run[aria-pressed="true"] {
  border-color: rgba(241, 158, 40, 0.55);
  background: linear-gradient(180deg, #2B2C26 0%, #33342E 100%);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 1px 1px rgba(255, 255, 255, 0.04);
}
.chase__run[aria-pressed="true"] .chase__led { background: #56574F; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); }
.chase__run[aria-pressed="true"] .chase__run-r { color: var(--muted); }
.chase__run[aria-pressed="true"] .chase__run-s { color: var(--ink); }
.chase__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Band layout (the copy leaves < 300 px of glass on the right: tablets, phones) ----------
   The panel becomes one row (meter + newest line where it fits) above the chase band. */
.chase--band .chase__panel {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  max-width: calc(100% - 180px);
  padding: 6px 10px;
}
.chase--band .chase__seg { font-size: 1.2rem; }
.chase--band .chase__meter { gap: 10px; }
.chase--band .chase__meter-label { font-size: 0.66rem; letter-spacing: 0.12em; }
.chase--band .chase__log {
  flex: 0 1 280px;
  min-width: 0;
  min-height: 0;
  padding: 0 0 0 12px;
  border-top: 0;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}
.chase--band .chase__line:not(:last-child) { display: none; }
.chase--band .chase__tag { min-height: 22px; font-size: 0.66rem; letter-spacing: 0.12em; padding: 0 8px; }
@media (max-width: 639px) {
  .chase--band .chase__log { display: none; }
  .chase--band .chase__panel { max-width: calc(100% - 140px); }
}
@media (max-width: 560px) {
  .chase__run { height: 28px; padding: 0 9px 0 8px; gap: 6px; font-size: 0.68rem; letter-spacing: 0.1em; }
  .chase__run::after { inset: -8px -3px; }
  .chase--band .chase__meter-label { font-size: 0.62rem; letter-spacing: 0.1em; }
  .chase--band .chase__meter-label::before { width: 11px; height: 11px; }
  .chase--band .chase__seg { font-size: 1.05rem; }
  .chase--band .chase__tag b + span { display: none; }
}

/* ---------- Reduced motion: one composed still; state changes stay ---------- */
@media (prefers-reduced-motion: reduce) {
  .chase__panel, .chase__tag, .chase__run, .chase__line, .chase__led, .chase__run-r, .chase__run-s { transition: none; }
  .chase__line.is-printing .chase__txt::after { display: none; }
}

/* ---------- Forced colors: gradients and glows are dropped, so repaint the essentials ---------- */
@media (forced-colors: active) {
  .chase__panel, .chase__tag, .chase__run { border: 1px solid CanvasText; }
  .chase__led, .chase__line::before { forced-color-adjust: none; background: Highlight; box-shadow: none; }
  .chase__run[aria-pressed="true"] .chase__led { background: GrayText; }
  .chase__tag::before, .chase__meter-label::before { forced-color-adjust: none; }
}

@media print {
  .chase__canvas, .chase__mark, .chase__panel, .chase__tag, .chase__run { display: none !important; }
}

/* ---------- Lock lockup: the thesis moment at display scale ---------- */
.chase__lock {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 50%;
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 22px 12px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  clip-path: inset(-10px 100% -10px 0);
  transition: opacity 260ms var(--ease-out), clip-path 700ms var(--ease-out);
}
.chase__lock::before {
  content: "";
  position: absolute;
  inset: -18px -34px;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(12, 13, 10, 0.86), rgba(12, 13, 10, 0));
}
.chase__lock.is-on { opacity: 1; clip-path: inset(-10px -10px -10px -10px); }
.chase__lock-word {
  margin: 0;
  font-family: var(--f-caps);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem);
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow: 0 0 22px var(--amber-glow), 0 0 2px rgba(255, 192, 100, 0.6);
  white-space: nowrap;
}
.chase__lock-read { margin: 0; display: inline-flex; align-items: flex-end; gap: 8px; }
.chase__lock-delta { font-family: var(--f-mono); font-weight: 700; font-size: 1.1rem; color: var(--amber); line-height: 1; }
.chase__lock-seg { font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.chase__lock-unit { font-family: var(--f-caps); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.12em; color: var(--muted); padding-bottom: 2px; }
@media (prefers-reduced-motion: reduce) {
  .chase__lock { transition: opacity 200ms linear; clip-path: none; }
}