/* =============================================================================
   FUTRON HUD LAYER
   Added 2026-09-01. Additive only — this file adds classes, it never restyles
   an existing selector, so removing the <link> returns the site exactly to
   where it was.

   SOURCED, NOT INVENTED. Every technique below came out of a visual review of
   19 Pinterest references and 6 Instagram references (88 saved posts), opened
   as pixels, written up in PIN_SWEEP.md / IG_SWEEP.md. Attribution is on each
   block so a later editor knows what it is imitating and can go look.

   THE CONSTRAINT THAT SHAPED ALL OF IT (DJ): "plain enough to look like a real
   dystopian cyberpunk future corporate professional website that corporate
   companies can take seriously, but at the same time cool futuristic graphic
   design that is interactive."

   So the governing rule is: DECORATION THAT DOES WORK. A corner bracket that
   carries a manifest ID, a progress track that is actually parcel tracking, a
   status triad that answers "is my delivery safe" at a glance. Anything that
   was costume got rejected in the sweep and is listed at the bottom of
   PIN_SWEEP.md — phosphor bloom, CRT aberration on body text, hazard stripes,
   HACK/BREACH semantics. Those lose a procurement review.
   ============================================================================= */

:root {
  --hud-line: rgba(5, 217, 232, 0.42);
  --hud-line-soft: rgba(255, 255, 255, 0.10);
  --hud-ink: #7C8698;
  --hud-live: #05D9E8;
  --hud-warn: #F5A623;
  --hud-crit: #FF2A6D;
  --hud-ok: #4FB286;
  --hud-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
}
html[data-theme="light"] {
  --hud-line: rgba(0, 86, 120, 0.34);
  --hud-line-soft: rgba(0, 0, 0, 0.10);
  --hud-ink: #5B6472;
  --hud-live: #00707E;
}

/* ── 1 · CORNER-BRACKET FRAME ────────────────────────────────────────────────
   PIN_SWEEP #1, refs 10/14/03 — "the single highest impact-to-risk ratio item
   in the sweep." Four L-shaped corners, NEVER a closed rectangle: a closed box
   reads as a border, an open one reads as a reticle. */
.hud-frame { position: relative; }
.hud-frame::before,
.hud-frame::after,
.hud-frame > .hud-c::before,
.hud-frame > .hud-c::after {
  content: "";
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid var(--hud-line);
  pointer-events: none;
}
.hud-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hud-frame::after  { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.hud-frame > .hud-c::before { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.hud-frame > .hud-c::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

/* Corner metadata quadruple — the labels that make the frame informational
   rather than ornamental. */
.hud-meta {
  position: absolute; z-index: 2;
  font-family: var(--hud-mono);
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hud-ink); pointer-events: none;
}
.hud-meta.tl { top: 8px; left: 12px; }
.hud-meta.tr { top: 8px; right: 12px; }
.hud-meta.bl { bottom: 8px; left: 12px; }
.hud-meta.br { bottom: 8px; right: 12px; }

/* ── 2 · PLUS-MARK LATTICE ───────────────────────────────────────────────────
   PIN_SWEEP #2, refs 18b/08. One tiled data-URI. The eye completes a grid that
   is never actually drawn — depth with no weight, and it never competes with
   text because it sits at 6% opacity. */
.hud-lattice { position: relative; }
.hud-lattice::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'>\
<g stroke='%23ffffff' stroke-opacity='0.06' stroke-width='1'>\
<path d='M28 24.5v7M24.5 28h7'/></g></svg>");
  background-size: 56px 56px;
}
html[data-theme="light"] .hud-lattice::before {
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'>\
<g stroke='%23000000' stroke-opacity='0.07' stroke-width='1'>\
<path d='M28 24.5v7M24.5 28h7'/></g></svg>");
}
.hud-lattice > * { position: relative; z-index: 1; }

/* ── 3 · INSTRUMENT BAR ──────────────────────────────────────────────────────
   IG_SWEEP #9 + PIN_SWEEP #3. A live dispatch clock and a real coverage
   readout. This is the piece that decides whether the site reads as an
   operations desk or as a costume — so the numbers are REAL (see
   js/futron-hud.js) and tabular-nums keeps them from jittering. */
.hud-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  padding: 7px 20px;
  border-bottom: 1px solid var(--hud-line-soft);
  font-family: var(--hud-mono);
  font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--hud-ink);
  font-variant-numeric: tabular-nums;
}
.hud-bar .grp { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.hud-bar b { color: var(--hud-live); font-weight: 500; }

/* Blinking availability chip. ONE blinking thing on the page — PIN_SWEEP #8
   is explicit that if everything moves, nothing is urgent. */
.hud-pulse::before {
  content: ""; display: inline-block;
  width: 6px; height: 6px; margin-right: 7px;
  background: var(--hud-ok); border-radius: 50%;
  vertical-align: 1px;
  animation: hud-blink 2.4s ease-in-out infinite;
}
@keyframes hud-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }

/* ── 4 · MONOSPACE LABEL GRAMMAR ─────────────────────────────────────────────
   PIN_SWEEP #4, refs 07/03/14. Three conventions, zero graphics: a ` //`
   terminator on field labels, a `/01` section index, and a small sub-label.
   This carries most of the "future corporate" register on its own and is
   completely safe on a page a procurement officer reads. */
.hud-idx {
  display: block;
  font-family: var(--hud-mono);
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--hud-live);
  margin-bottom: 10px;
}
.hud-idx::after { content: " //"; color: var(--hud-ink); }
.hud-sub {
  display: block;
  font-family: var(--hud-mono);
  font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hud-ink); margin-top: 6px;
}

/* ── 5 · TRAFFIC-LIGHT STATUS TRIAD ──────────────────────────────────────────
   IG_SWEEP #3, ref 22 — "the most procurement-legible component in the entire
   sweep; it answers 'is my delivery safe' instantly." Borrowed from a
   critical-infrastructure console, which is exactly the register we want. */
.hud-triad { display: flex; gap: 22px; flex-wrap: wrap; margin: 18px 0 0; }
.hud-stat {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--hud-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hud-ink);
}
.hud-stat i {
  width: 8px; height: 8px; flex: none; align-self: center;
  background: var(--hud-ok); display: block;
}
.hud-stat.warn i { background: var(--hud-warn); }
.hud-stat.crit i { background: var(--hud-crit); }
.hud-stat b {
  font-size: 0.95rem; color: var(--hud-live); font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── 6 · SEGMENTED TRACK ─────────────────────────────────────────────────────
   PIN_SWEEP #6, refs 09/14/18b. NEVER a smooth filled bar. This is the one
   place the aesthetic and the actual product coincide exactly: a segmented
   track IS what parcel tracking looks like. */
.hud-track { display: flex; align-items: center; gap: 5px; margin: 12px 0 0; }
.hud-track span {
  width: 15px; height: 4px;
  background: var(--hud-line-soft);
  border: 1px solid transparent;
}
.hud-track span.on { background: var(--hud-live); }
.hud-track span.now { background: transparent; border-color: var(--hud-live); }
.hud-track em {
  font-family: var(--hud-mono); font-style: normal;
  font-size: 0.55rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--hud-ink); margin-left: 8px;
}

/* ── 7 · CHAMFER ─────────────────────────────────────────────────────────────
   PIN_SWEEP #7, refs 14/20/11. The sweep is explicit: header, primary CTA and
   footer band ONLY. "Applied to every card it becomes noise." */
.hud-chamfer {
  clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px);
}

/* ── 8 · TELETYPE REVEAL ─────────────────────────────────────────────────────
   PIN_SWEEP #8, ref 18a. Lines arrive one at a time on scroll. Wrapped in
   reduced-motion, and the content is fully present without JS. */
.hud-type > * { opacity: 0; transform: translateY(6px); }
.hud-type.in > * {
  opacity: 1; transform: none;
  transition: opacity .5s ease, transform .5s ease;
}
.hud-type.in > *:nth-child(1) { transition-delay: .00s; }
.hud-type.in > *:nth-child(2) { transition-delay: .07s; }
.hud-type.in > *:nth-child(3) { transition-delay: .14s; }
.hud-type.in > *:nth-child(4) { transition-delay: .21s; }
.hud-type.in > *:nth-child(5) { transition-delay: .28s; }
.hud-type.in > *:nth-child(6) { transition-delay: .35s; }

@media (prefers-reduced-motion: reduce) {
  .hud-type > *, .hud-type.in > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hud-pulse::before { animation: none; }
}
/* No-JS safety: if the observer never runs, the content must still be visible.
   An animation that hides content and depends on script to reveal it is a
   content-loss bug wearing a transition. */
.no-js .hud-type > * { opacity: 1; transform: none; }

/* ── 9 · REGISTRATION MARKS ──────────────────────────────────────────────────
   IG_SWEEP #14 (SAKA). Pure pseudo-elements, zero assets. Reads as a technical
   drawing rather than a graphic. */
.hud-reg { position: relative; }
.hud-reg::after {
  content: "+";
  position: absolute; top: 14px; right: 18px;
  font-family: var(--hud-mono); font-size: 0.8rem; line-height: 1;
  color: var(--hud-line); pointer-events: none;
}

/* ── 10 · OVERSIZED METRIC ───────────────────────────────────────────────────
   IG_SWEEP #13, ref 24. A large number with a 6px caption. Used sparingly —
   these are the facts a facility actually weighs. */
.hud-metrics {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px; margin: 30px 0 0;
}
.hud-metric b {
  display: block;
  font-family: var(--hud-mono);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hud-metric span {
  display: block; margin-top: 8px;
  font-family: var(--hud-mono);
  font-size: 0.55rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--hud-ink);
}

@media (max-width: 640px) {
  .hud-bar { font-size: 0.54rem; gap: 10px; padding: 6px 14px; }
  .hud-bar .grp { gap: 10px; }
  .hud-meta { font-size: 0.5rem; }
}