/* ---------------------------------------------------------------
   03 Observability: "the trace". One latency instrument on the
   drafting grid, drawn by scroll, annotated, then watched.
   Loaded after story.css. Colour: tokens, brass, and the amber
   anomaly (#d98b3a) from the Artefact. Animation touches only
   opacity, transform and stroke-dashoffset.
   --------------------------------------------------------------- */

.trace .chapter-head .body { line-height: 1.6; }

/* ---------- The instrument ---------- */
.trace__chart { position: relative; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.trace__chart:not(:empty) {
  height: clamp(320px, 28vw, 420px);
  background: var(--ink-1);
  border: 1px solid var(--ink-line);
  border-radius: 6px;
  cursor: crosshair;
}
/* No JavaScript: nothing can be generated, so a single brass rule keeps the rhythm */
.trace__chart:empty { height: 1px; background: var(--accent); opacity: 0.6; margin: 2.5rem 0 3.5rem; }

.trace__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.trace__svg text { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; fill: var(--text-on-ink-faint); }
.trace__svg text.trace__unit { fill: var(--text-on-ink-muted); }
.trace__grid line { stroke: var(--ink-line); }
.trace__grid line.minor { opacity: 0.45; }
.trace__axis { stroke: var(--ink-line-strong); }
.trace__thr { fill: none; stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 6; opacity: 0.6; }
.trace__svg text.trace__thr-lbl { font-size: 0.9rem; letter-spacing: 0.02em; fill: var(--accent); }
.trace__area { fill: url(#trace-area); }
.trace__line { fill: none; stroke: var(--text-on-ink); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: 0.9; }

/* The anomaly: amber first, brass once it resolves (two elements, crossfaded) */
.trace__mk { fill: var(--ink-0); stroke-width: 1.4; transform-box: fill-box; transform-origin: center; }
.trace__mk--alert { stroke: #d98b3a; }
.trace__mk--alert .trace__mk-pip { fill: #d98b3a; stroke: none; }
.trace__mk--ok { stroke: var(--accent); }
.trace__mk--ok .trace__mk-tick { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* The live end of the trace: it breathes only while the section is on screen */
.trace__dot { fill: var(--accent); }
.trace__halo { fill: var(--accent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.js .trace.is-live .trace__halo { animation: tracehalo 2.2s var(--ease-in-out) infinite; }
@keyframes tracehalo { 0% { opacity: 0.7; transform: scale(0.6); } 100% { opacity: 0; transform: scale(2.8); } }
@media (prefers-reduced-motion: reduce) { .js .trace.is-live .trace__halo { animation: none; } }

/* Drafting caption, top left of the plot */
.trace__cap {
  position: absolute; top: 14px; left: 0; display: flex; gap: 0.9em; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.72rem; line-height: 1; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-on-ink-muted);
}
.trace__cap span + span { color: var(--text-on-ink-faint); }

/* Annotation chips at the spike */
.trace__chip {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 0.55em;
  padding: 0.4em 0.75em; white-space: nowrap; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.9rem; line-height: 1; letter-spacing: 0.02em;
  background: var(--ink-0); border: 1px solid var(--ink-line-strong); border-radius: 4px;
  opacity: 0; will-change: opacity, transform;
}
.trace__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.trace__chip--alert { color: #d98b3a; }
.trace__chip--ok { color: var(--accent); }

/* Cursor: a crosshair and a readout that follow the mouse */
.trace__xhair { position: absolute; left: 0; top: 0; width: 1px; background: var(--ink-line-strong); opacity: 0; pointer-events: none; transition: opacity var(--dur-fast); }
.trace__xdot { fill: var(--accent); stroke: var(--ink-0); stroke-width: 1.5; opacity: 0; transition: opacity var(--dur-fast); }
.trace__readout {
  position: absolute; left: 0; top: 0; padding: 0.4em 0.7em; white-space: nowrap; pointer-events: none;
  font-family: var(--font-mono); font-size: 0.9rem; line-height: 1; letter-spacing: 0.02em; color: var(--text-on-ink);
  background: var(--ink-0); border: 1px solid var(--ink-line-strong); border-radius: 4px;
  opacity: 0; transition: opacity var(--dur-fast);
}
.trace__readout b { font-weight: 500; color: var(--accent); }
.trace__chart.is-hover .trace__xhair, .trace__chart.is-hover .trace__xdot, .trace__chart.is-hover .trace__readout { opacity: 1; }

/* ---------- Pillars: four quiet rows ---------- */
.trace__pillars { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 2.5rem; }
.trace__pillars li { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0.5rem; align-items: start; padding: 1.4rem 0 0; border-top: 1px solid var(--ink-line); }
.trace__pillars .mono { font-size: 0.9rem; line-height: 1.6; color: var(--accent); }
.trace__pillars div { font-size: 0.9rem; line-height: 1.55; color: var(--text-on-ink-muted); }
.trace__pillars b { display: block; font-weight: 500; font-size: 1rem; line-height: 1.4; color: var(--text-on-ink); margin-bottom: 0.35rem; }
/* Only JS hides what JS reveals. Static mode (small screens, reduced motion) never hides. */
.js .trace:not(.is-static) .trace__pillars li, .js .trace:not(.is-static) .trace__actions { opacity: 0; transform: translateY(16px); will-change: opacity, transform; }

/* ---------- Actions ---------- */
.trace__actions { margin-top: clamp(2.5rem, 5vw, 4rem); display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.trace .disclosure { margin: 0; font-size: 0.75rem; line-height: 1.55; color: var(--text-on-ink-muted); max-width: 46em; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .trace__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
  .trace__pillars li { padding-bottom: 1.2rem; }
}
@media (max-width: 860px) {
  .trace__chart:not(:empty) { height: clamp(250px, 64vw, 320px); cursor: default; }
  .trace__pillars { grid-template-columns: 1fr; }
  .trace__pillars li { padding: 1.2rem 0; }
  .js .trace .trace__pillars li, .js .trace .trace__actions { opacity: 1; transform: none; }
  .trace__xhair, .trace__readout, .trace__xdot { display: none; }
  .trace__actions { align-items: flex-start; flex-direction: column; gap: 1.5rem; }
}