/* hero-trace.css — the homepage "Canopy pressure" card (js/hero-trace.js).
 *
 * Card look ported from the 2026-10 website prototype (its .instrument styles),
 * scoped under .hero-trace-slot so nothing here touches the rest of the site.
 * The hero is always dark, so there is one theme. Fonts are the site's own:
 * the CSP allows no third-party font origin. */

/* Placement (founder 2026-10-10). The slot sits in the hero text column between
 * the brand label and the title.
 * Wide screens: out of flow, to the LEFT of the column, top level with the title
 * (an absolute box with top:auto keeps its static position, which is the title's top).
 * Narrower screens: no room beside the text, so the column becomes a flex column
 * and the card is reordered below the CTA, left edge on the title's left edge. */
.hero-trace-slot { max-width: 460px; }
@media (min-width: 1200px) {
  .hero-text-col { position: relative; }
  .hero-text-col > .hero-trace-slot { position: absolute; right: calc(100% + 56px); width: 460px; }
}
@media (max-width: 1199.98px) {
  .hero-text-col { display: flex; flex-direction: column; }
  .hero-text-col > .hero-trace-slot { order: 1; margin-top: var(--space-6, 1.5rem); }
  /* flex items do not collapse margins; keep the caption-to-rule gap it had in block flow */
  .hero-text-col > hr.accent-line { margin-top: 0; }
}
.hero-trace-slot:empty { display: none; }

.hero-trace-slot .instrument {
  padding: 16px 16px 12px;
  background: rgba(14, 15, 17, .88);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .7);
  color: #fff;
  --ht-mono: var(--font-mono, ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace);
}
.hero-trace-slot .ins-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.hero-trace-slot .ins-title { display: inline-flex; align-items: center; gap: 9px; font-size: .82rem; font-weight: 600; letter-spacing: .01em; white-space: nowrap; }
.hero-trace-slot .rec { width: 8px; height: 8px; border-radius: 50%; background: #f43f5e; animation: ht-blink 1.4s infinite; }
@keyframes ht-blink { 50% { opacity: .25; } }
.hero-trace-slot .ins-tag {
  font-family: var(--ht-mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .16);
  padding: 3px 8px; border-radius: 99px; white-space: nowrap;
}
.hero-trace-slot .trace { width: 100%; height: 120px; display: block; overflow: visible; }
.hero-trace-slot .trace .grid line { stroke: rgba(255, 255, 255, .08); stroke-dasharray: 2 4; vector-effect: non-scaling-stroke; }
.hero-trace-slot .trace .ln { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hero-trace-slot .trace .ln.l { stroke: #6db5cf; }
.hero-trace-slot .trace .ln.r { stroke: #ef8a4c; }
.hero-trace-slot .trace .dot.l { fill: #6db5cf; }
.hero-trace-slot .trace .dot.r { fill: #ef8a4c; }
.hero-trace-slot .ins-read { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.hero-trace-slot .ins-read .k { display: flex; align-items: center; gap: 6px; font-size: .64rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(255, 255, 255, .58); }
.hero-trace-slot .ins-read .v { display: block; font-family: var(--ht-mono); font-size: .78rem; color: rgba(255, 255, 255, .6); margin-top: 3px; }
.hero-trace-slot .ins-read .v b { font-size: 1.3rem; color: #fff; font-weight: 500; font-variant-numeric: tabular-nums; }
.hero-trace-slot .sw { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.hero-trace-slot .sw.l { background: #6db5cf; }
.hero-trace-slot .sw.r { background: #ef8a4c; }
.hero-trace-slot .ins-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 10px; margin-top: 10px; font-family: var(--ht-mono); font-size: .66rem; color: rgba(255, 255, 255, .5); letter-spacing: .03em; }
.hero-trace-slot .ins-foot b { color: rgba(255, 255, 255, .85); font-weight: 500; }

/* ---- additions for the real-data trace; apply in the prototype's card too ---- */

.ins-plot { position: relative; }

/* loop restart: the plot fades out at the end of the climb and back in at the glide */
.trace { transition: opacity .5s ease; }
.trace.fading { opacity: 0; }

/* turn shading: which way the wing was circling, faint enough to sit under the lines */
.trace .tb { stroke: none; }
.trace .tb.tl { fill: rgba(109, 181, 207, .08); }
.trace .tb.tr { fill: rgba(239, 138, 76, .08); }

/* short phase label ("enters thermal", "core") — appears, holds, fades */
.ins-mark {
  position: absolute; top: 2px; left: 0;
  font-family: var(--ht-mono, ui-monospace, monospace); font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75); background: rgba(14, 15, 17, .78);
  padding: 2px 7px; border-radius: 4px;
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.ins-mark.on { opacity: 1; }

#vC { color: rgba(255, 255, 255, .55); }

.ins-cap { margin: 8px 0 0; font-size: .74rem; line-height: 1.45; color: rgba(255, 255, 255, .55); }

@media (max-width: 480px) {
  .hero-trace-slot .ins-read .v b { font-size: 1.1rem; }
  .hero-trace-slot .ins-read .k { font-size: .58rem; letter-spacing: .05em; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-trace-slot .rec { animation: none; }
  .ins-mark { transition: none; }
}