/* ============================================================
   IRONNODE.ai — Hi-Vis Signal Theme
   Design System v2.0 · Rev 2026.07
   Positioning: the rented AI network for the jobsite.
   Drop this file in and apply .in-theme to any container, or
   copy the :root block into an existing stylesheet.
   ============================================================ */

:root {
  /* ---- Surfaces (dark field) ---- */
  --in-void:      #0B0C0E;   /* primary background            */
  --in-deck:      #121417;   /* cards / panels                */
  --in-steel:     #191D22;   /* raised surfaces / headers     */
  --in-line:      #282E35;   /* hairline borders / grid       */
  --in-line-2:    #3A424B;   /* brighter border / focus       */

  /* ---- Signal accents ---- */
  --in-signal:    #C6F135;   /* PRIMARY hi-vis lime — ration it */
  --in-signal-2:  #A8D620;   /* hover / gradient end / on-light */
  --in-signal-ink:#5A7A0A;   /* lime TEXT that passes AA contrast on white (4.58:1) */
  --in-link:      #38E1FF;   /* connectivity cyan — data / secondary */
  --in-amber:     #FFB020;   /* caution / review state        */
  --in-hazard:    #FF4D2E;   /* detection / critical alert    */

  /* ---- Type colors ---- */
  --in-white:     #F4F6F4;   /* primary text on dark          */
  --in-fog:       #9BA3AB;   /* secondary text                */
  --in-dim:       #5E6771;   /* metadata / mono labels        */

  /* ---- Fonts ---- */
  --in-font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --in-font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --in-font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- Type scale ---- */
  --in-h1: 700 clamp(44px,7vw,86px)/0.98 var(--in-font-display);
  --in-h2: 700 clamp(30px,4vw,46px)/1.05 var(--in-font-display);
  --in-h3: 600 clamp(20px,2.4vw,30px)/1.2 var(--in-font-display);
  --in-body: 400 16px/1.7 var(--in-font-body);
  --in-kicker: 500 12px/1 var(--in-font-mono);     /* + letter-spacing:3px, uppercase, --in-signal */
  --in-stat: 700 clamp(40px,6vw,72px)/1 var(--in-font-display);

  /* ---- Geometry ---- */
  --in-radius: 6px;
  --in-radius-sm: 3px;
  --in-grid: 56px;               /* sensor-grid cell */
  --in-maxw: 1160px;

  /* ---- Elevation / glow ---- */
  --in-glow-signal: 0 0 12px rgba(198,241,53,.45);
  --in-shadow: 0 8px 30px rgba(0,0,0,.5);

  /* ---- Reusable textures ---- */
  --in-sensor-grid:
    linear-gradient(var(--in-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--in-line) 1px, transparent 1px);
  --in-hazard-stripe:
    repeating-linear-gradient(45deg, var(--in-amber) 0 12px, var(--in-void) 12px 24px);
}

/* ---------- Base ---------- */
.in-theme,
body.in-theme {
  background: var(--in-void);
  color: var(--in-white);
  font: var(--in-body);
  -webkit-font-smoothing: antialiased;
}
.in-theme.in-grid {
  background-image: var(--in-sensor-grid);
  background-size: var(--in-grid) var(--in-grid);
}

/* ---------- Type helpers ---------- */
.in-h1 { font: var(--in-h1); letter-spacing: -2px; }
.in-h2 { font: var(--in-h2); letter-spacing: -.5px; }
.in-h3 { font: var(--in-h3); letter-spacing: -.3px; }
.in-kicker {
  font: var(--in-kicker); letter-spacing: 3px; text-transform: uppercase;
  color: var(--in-signal); display: inline-flex; align-items: center; gap: 10px;
}
.in-kicker::before { content: ""; width: 22px; height: 1px; background: currentColor; }
.in-mono { font-family: var(--in-font-mono); }
.in-stat { font: var(--in-stat); color: var(--in-signal); }
.in-signal { color: var(--in-signal); }

/* ---------- Buttons ---------- */
.in-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--in-font-display); font-weight: 600; font-size: 14px;
  padding: 12px 22px; border-radius: var(--in-radius-sm); border: none;
  cursor: pointer; text-decoration: none;
}
.in-btn--signal { background: var(--in-signal); color: var(--in-void); }
.in-btn--signal:hover { background: var(--in-signal-2); }
.in-btn--ghost { background: transparent; color: var(--in-white); border: 1px solid var(--in-line-2); }

/* ---------- Panel / card ---------- */
.in-panel {
  background: var(--in-deck); border: 1px solid var(--in-line);
  border-radius: var(--in-radius);
}

/* ---------- Status chips (core UI vocabulary) ---------- */
.in-badge {
  font-family: var(--in-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 2px;
}
.in-badge--live  { background: rgba(198,241,53,.14); color: var(--in-signal); border: 1px solid rgba(198,241,53,.3); }
.in-badge--warn  { background: rgba(255,176,32,.13); color: var(--in-amber);  border: 1px solid rgba(255,176,32,.3); }
.in-badge--alert { background: rgba(255,77,46,.13);  color: var(--in-hazard); border: 1px solid rgba(255,77,46,.35); }

/* ---------- Motifs ---------- */
.in-hazard-rule { height: 16px; background: var(--in-hazard-stripe); }

/* ---------- On-light override ----------
   Pure --in-signal fails WCAG contrast on white. On light surfaces,
   swap lime TEXT for --in-signal-ink (#5A7A0A). Lime FILLS (buttons,
   blocks) are fine on white with dark ink on top. */
.in-on-light { background: var(--in-white); color: var(--in-void); }
.in-on-light .in-signal { color: var(--in-signal-ink); }

/*
  USAGE RATIO — keep the field dark, ration the signal:
    ~72%  void + deck surfaces
    ~20%  white + fog type
    ~6%   signal lime (one hot thing per surface)
    ~2%   functional states (amber / hazard / link)
*/

/* ============================================================
   SITE MOTION LAYER — ironnode.ai
   Reveal, lock-on, ticker, parallax, scan bar. All transform/
   opacity only; fully disabled under prefers-reduced-motion.
   ============================================================ */

/* ---------- Fonts ---------- */
/* Pages load Space Grotesk / IBM Plex Mono / Inter via Google Fonts <link>. */

/* ---------- Base page ---------- */
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--in-void); color: var(--in-white); font: var(--in-body); -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-x: hidden; }
* , *::before, *::after { box-sizing: border-box; }
a { color: var(--in-signal); text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
.wrap { max-width: var(--in-maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }

/* ---------- Scan bar (scroll progress) ---------- */
.scan-bar { position: fixed; top: 0; left: 0; height: 2px; width: 0%; z-index: 90; background: var(--in-signal); box-shadow: var(--in-glow-signal); }
.scan-read { position: fixed; top: 72px; right: 12px; z-index: 90; font-family: var(--in-font-mono); font-size: 10px; letter-spacing: 2px; color: var(--in-dim); padding: 6px 12px; background: color-mix(in srgb, var(--in-void) 70%, transparent); border: 1px solid var(--in-line); border-radius: var(--in-radius-sm); pointer-events: none; }
.scan-read b { color: var(--in-signal); font-weight: 500; }
@media (max-width: 720px) { .scan-read { display: none; } }

/* ---------- Reveal ---------- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); }
.rv.in { opacity: 1; transform: none; }
.rv-d1 { transition-delay: .08s; } .rv-d2 { transition-delay: .16s; } .rv-d3 { transition-delay: .24s; } .rv-d4 { transition-delay: .32s; }

/* ---------- Lock-on reticle (section acquire) ---------- */
.lock { position: relative; }
.lock > .lc { position: absolute; width: 14px; height: 14px; border: 2px solid var(--in-signal); opacity: 0; transition: opacity .3s, transform .55s cubic-bezier(.2,.7,.2,1); }
.lock > .lc.c1 { top: -10px; left: -14px; border-right: 0; border-bottom: 0; transform: translate(-14px,-14px); }
.lock > .lc.c2 { top: -10px; right: -14px; border-left: 0; border-bottom: 0; transform: translate(14px,-14px); }
.lock > .lc.c3 { bottom: -10px; right: -14px; border-left: 0; border-top: 0; transform: translate(14px,14px); }
.lock > .lc.c4 { bottom: -10px; left: -14px; border-right: 0; border-top: 0; transform: translate(-14px,14px); }
.lock.in > .lc { opacity: 1; transform: none; }
.lock.in { animation: lockflash .9s ease-out .45s 1; }
@keyframes lockflash { 0% { text-shadow: none; } 30% { text-shadow: 0 0 18px rgba(198,241,53,.55); } 100% { text-shadow: none; } }

/* ---------- Stat count-up ---------- */
.stat-v { font: var(--in-stat); letter-spacing: -1px; color: var(--in-signal); font-variant-numeric: tabular-nums; }
.stat-l { font-family: var(--in-font-mono); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--in-fog); margin-top: 8px; line-height: 1.5; }

/* ---------- Telemetry ticker ---------- */
.tick { border-block: 1px solid var(--in-line); overflow: hidden; padding: 10px 0; background: var(--in-deck); }
.tick .lane { display: flex; width: max-content; animation: tickmove 42s linear infinite; }
.tick:hover .lane { animation-play-state: paused; }
.tick .ev { display: inline-flex; align-items: center; gap: 8px; font-family: var(--in-font-mono); font-size: 11px; letter-spacing: 1px; color: var(--in-fog); padding: 0 26px; white-space: nowrap; }
.tick .ev b { font-weight: 500; }
.tick .ev .ok { color: var(--in-signal); } .tick .ev .wr { color: var(--in-amber); } .tick .ev .al { color: var(--in-hazard); } .tick .ev .cy { color: var(--in-link); }
@keyframes tickmove { to { transform: translateX(-50%); } }

/* ---------- Hazard rule (animated creep) ---------- */
.hz { height: 14px; background: var(--in-hazard-stripe); background-size: 34px 34px; }
.hz-anim { animation: hzcreep 2.6s linear infinite; }
@keyframes hzcreep { to { background-position: 34px 0; } }

/* ---------- Detection frame vocabulary ---------- */
.det-frame { position: relative; overflow: hidden; border: 1px solid var(--in-line-2); border-radius: var(--in-radius); background: var(--in-steel); }
.det-frame .ret { position: absolute; inset: 10px; pointer-events: none; z-index: 5; }
.det-frame .ret i { position: absolute; width: 16px; height: 16px; border: 2px solid var(--in-signal); opacity: .9; }
.det-frame .ret i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.det-frame .ret i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.det-frame .ret i:nth-child(3) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.det-frame .ret i:nth-child(4) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.dbox { position: absolute; z-index: 4; border: 1.5px solid var(--in-signal); border-radius: 2px; }
.dbox .cap { position: absolute; top: -20px; left: -1.5px; font-family: var(--in-font-mono); font-size: 9px; font-weight: 600; letter-spacing: 1px; padding: 3px 6px; border-radius: 2px; background: var(--in-signal); color: var(--in-void); white-space: nowrap; }
.dbox.warn { border-color: var(--in-amber); } .dbox.warn .cap { background: var(--in-amber); }
.dbox.alert { border-color: var(--in-hazard); } .dbox.alert .cap { background: var(--in-hazard); color: #fff; }
.hud-chip { position: absolute; z-index: 6; font-family: var(--in-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 1.5px; padding: 5px 9px; border-radius: 2px; background: color-mix(in srgb, var(--in-void) 62%, transparent); backdrop-filter: blur(3px); color: var(--in-white); }
.hud-chip.live { color: var(--in-signal); }
.hud-chip.live::before { content: "●"; margin-right: 7px; animation: blink 1.4s steps(1) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.scanline { position: absolute; left: 0; right: 0; height: 30%; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(198,241,53,.10), transparent); animation: scan 5s linear infinite; }
@keyframes scan { 0% { transform: translateY(-60%); } 100% { transform: translateY(360%); } }

/* ---------- Coordinate tag ---------- */
.coord { font-family: var(--in-font-mono); font-size: 10px; letter-spacing: 1px; color: var(--in-dim); line-height: 1.7; }
.coord b { color: var(--in-fog); font-weight: 500; }

/* ---------- Section scaffolding ---------- */
.sec { padding: clamp(64px, 9vw, 110px) 0; border-bottom: 1px solid var(--in-line); position: relative; }
.sec-head { max-width: 720px; margin-bottom: clamp(34px, 5vw, 56px); }
.sec-head .in-kicker { margin-bottom: 18px; }
.sec-head h2 { font: var(--in-h2); letter-spacing: -.5px; margin: 0; }
.sec-head h2 .in-signal { color: var(--in-signal); }
.sec-head .sub { font-size: 16px; line-height: 1.7; color: var(--in-fog); margin: 18px 0 0; max-width: 620px; }

/* ---------- Cards ---------- */
.card-grid { display: grid; gap: 14px; }
.in-panel { padding: 24px; }
.in-panel h4 { font-family: var(--in-font-display); font-weight: 600; font-size: 19px; letter-spacing: -.3px; margin: 0 0 8px; color: var(--in-white); }
.in-panel p { font-size: 14px; color: var(--in-fog); line-height: 1.6; margin: 0; }
.pnum { font-family: var(--in-font-mono); font-size: 11px; color: var(--in-signal); letter-spacing: 1.5px; margin-bottom: 12px; }

/* ---------- Nav ---------- */
.nav { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--in-line); background: color-mix(in srgb, var(--in-void) 86%, transparent); backdrop-filter: blur(9px); }
.nav .bar { max-width: var(--in-maxw); margin: 0 auto; padding: 0 clamp(20px,4vw,32px); height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.nav .wm { display: flex; align-items: center; gap: 11px; font-family: var(--in-font-display); font-weight: 700; font-size: 16px; letter-spacing: -.5px; color: var(--in-white); }
.nav .wm img { width: 26px; height: 26px; }
.nav .wm .ai { color: var(--in-signal); }
.nav .links { display: flex; gap: 22px; align-items: center; font-family: var(--in-font-mono); font-size: 11px; letter-spacing: 1.5px; }
.nav .links a { color: var(--in-fog); text-transform: uppercase; }
.nav .links a:hover, .nav .links a[aria-current="page"] { color: var(--in-signal); }
@media (max-width: 860px) { .nav .links a:not(.in-btn) { display: none; } }
.in-btn.sm { padding: 9px 16px; font-size: 13px; }
.in-btn .arr { transition: transform .22s; }
.in-btn:hover .arr { transform: translateX(3px); }

/* ---------- Footer ---------- */
.foot { padding: clamp(44px,6vw,64px) 0 28px; }
.foot .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 26px; }
.foot h5 { font-family: var(--in-font-mono); font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--in-dim); margin: 0 0 14px; }
.foot a.fl, .foot p.fl { display: block; font-size: 14px; color: var(--in-fog); line-height: 2; margin: 0; }
.foot a.fl:hover { color: var(--in-white); }
.foot .base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--in-line); font-family: var(--in-font-mono); font-size: 10px; letter-spacing: 1px; color: var(--in-dim); }
@media (max-width: 720px) { .foot .cols { grid-template-columns: 1fr 1fr; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .lock > .lc { opacity: 1 !important; transform: none !important; transition: none !important; }
  .lock.in { animation: none; }
  .tick .lane { animation: none; flex-wrap: wrap; width: auto; }
  .hz-anim, .scanline, .hud-chip.live::before { animation: none; }
  .scanline { display: none; }
  .par { transform: none !important; }
}

/* ---------- Alert rows (console + teasers) ---------- */
.alertrow { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--in-line); border-left: 3px solid var(--in-signal); border-radius: var(--in-radius-sm); background: var(--in-steel); }
.alertrow.warn { border-left-color: var(--in-amber); }
.alertrow.alert { border-left-color: var(--in-hazard); }
.alertrow .at { font-family: var(--in-font-display); font-weight: 600; font-size: 13.5px; color: var(--in-white); }
.alertrow .ab { font-size: 12.5px; color: var(--in-fog); }
.alertrow .tm { margin-left: auto; font-family: var(--in-font-mono); font-size: 9px; color: var(--in-dim); white-space: nowrap; padding-top: 2px; }