/* ==========================================================================
   AlphaTrace product page — page-scoped styles
   --------------------------------------------------------------------------
   Loaded only by alphatrace.html, after styles.css. It adds the two figures,
   the telemetry readout, and the FAQ; it never redefines a shared class, so
   the marketing site's stylesheet stays untouched (same rule as joseph.css).
   Tokens all come from styles.css :root.
   ========================================================================== */

/* ---- FIG.01 · fleet map --------------------------------------------------
   Deliberately JS-free: the route is drawn at rest and only its draw-in and
   the travelling pulse are animated, both gated on .hero-booted so the figure
   is complete even if app.js never runs. */
.fleetmap {
  width: 100%;
  height: auto;
  display: block;
}

.fm-grid line {
  stroke: rgba(255, 255, 255, 0.045);
  stroke-width: 1;
}

.fm-zone rect,
.fm-zone circle {
  fill: rgba(255, 255, 255, 0.018);
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}
.fm-zone text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  fill: var(--text-faint);
}
.fm-zone--restricted circle {
  fill: rgba(255, 122, 47, 0.075);
  stroke: rgba(255, 154, 60, 0.42);
}
.fm-zone--restricted text { fill: var(--accent-soft); }

.fm-roads path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.07);
  stroke-width: 2;
  stroke-linecap: round;
}

.fm-others circle {
  fill: var(--text-faint);
  opacity: 0.6;
}

.fm-ticks text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  fill: var(--text-faint);
  opacity: 0.7;
}

.fm-route {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.hero-booted .fm-route {
  animation: wire-draw 0.9s var(--ease) 0.6s both;
}

.fm-pulse {
  fill: none;
  stroke: url(#routeGrad);
  stroke-width: 2.75;
  stroke-linecap: round;
  stroke-dasharray: 0.16 0.84;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 5px var(--accent-glow));
}
.hero-booted .fm-pulse {
  animation: pulse-travel 7s linear 1.5s infinite;
}

.fm-unit__ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.5;
}
.hero-booted .fm-unit__ring {
  animation: fm-ping 3.2s var(--ease) 1.2s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes fm-ping {
  0%, 100% { opacity: 0.5; transform: scale(0.68); }
  55%      { opacity: 0;   transform: scale(1.25); }
}

.fm-unit__dot {
  fill: var(--accent);
  filter: drop-shadow(0 0 6px var(--accent-glow));
}
.fm-unit__chip {
  fill: #141417;
  stroke: var(--border-strong);
  stroke-width: 1;
}
.fm-unit__label {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: var(--text-dim);
  dominant-baseline: middle;
}

/* readout under the map: the five values an operator actually reads */
.fm-readout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem 1rem;
  margin: var(--space-sm) 0 0;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.018);
}
.fm-readout > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}
.fm-readout dt {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.fm-readout dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--text);
}
.fm-note {
  margin-top: var(--space-2xs);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

@media (min-width: 560px) {
  .fm-readout { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fm-readout > div { flex-direction: column; gap: 0.2rem; }
}

/* ---- FIG.02 · ingest pipeline -------------------------------------------
   Borrows the .archmap wire/node language wholesale. Those defaults are
   already visible without JS; only the pulses need driving here, because
   styles.css scopes their animation to .hero-booted. */
.pipeline {
  margin: var(--space-lg) 0 0;
}
.pipeline .node {
  cursor: default;
}
.pipeline .pulse {
  animation: pulse-travel 7s linear infinite;
  animation-delay: var(--d, 0s);
}

.pipeline__notes {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: var(--space-lg) 0 0;
}
.pipeline__notes > div {
  border-top: 1px solid var(--border);
  padding-top: var(--space-sm);
}
.pipeline__notes dt {
  font-family: var(--font-mono);
  font-size: var(--fs-kicker);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.pipeline__notes dd {
  margin: var(--space-2xs) 0 0;
  color: var(--text-dim);
  line-height: 1.6;
}
@media (min-width: 760px) {
  .pipeline__notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
}

/* ---- FAQ ---------------------------------------------------------------- */
.faq {
  border-top: 1px solid var(--border);
  margin-top: var(--space-lg);
}
.faq__item {
  border-bottom: 1px solid var(--border);
}
.faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  font-size: var(--fs-h3);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  transition: color 0.2s var(--ease);
}
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--accent);
  transition: transform 0.2s var(--ease);
}
.faq__item[open] > summary::after { transform: rotate(45deg); }
.faq__item > summary:hover { color: var(--accent-soft); }
.faq__item > summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.faq__item > p {
  margin: 0;
  padding: 0 0 var(--space-md);
  max-width: 68ch;
  color: var(--text-dim);
  line-height: 1.65;
}

/* ---- Inline code in lists and answers ----------------------------------- */
.service__list code,
.faq__item code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  color: var(--text);
}

/* ---- Reduced motion ------------------------------------------------------
   styles.css already neutralises .wire, .pulse and the hero animations. These
   are this page's own additions, so they need the same treatment. */
@media (prefers-reduced-motion: reduce) {
  .fm-route,
  .hero-booted .fm-route { animation: none; stroke-dashoffset: 0; }
  .fm-pulse,
  .fm-unit__ring { display: none; }
  .pipeline .pulse { animation: none; display: none; }
  .faq__item > summary::after { transition: none; }
}