/* ====================================================================
   N.D.A. — Purple holographic accent layer
   Loaded AFTER styles-responsive.css so these colors win.
   Goal: subtle iridescent accents over the industrial-terminal base.
   Restraint matters — too much and the credibility evaporates.
   ==================================================================== */

:root {
  --accent:    #b39cff;                 /* lavender purple — primary */
  --accent-2:  #9cffea;                 /* mint cyan — gradient mid */
  --accent-3:  #e9a6ff;                 /* magenta — gradient tail */
  --holo:      linear-gradient(135deg, #b39cff 0%, #9cffea 50%, #e9a6ff 100%);
  --holo-h:    linear-gradient(90deg,  #b39cff 0%, #9cffea 25%, #e9a6ff 50%, #9cffea 75%, #b39cff 100%);
}

@keyframes holo-shift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ===== Thin holographic top bar (subtle global accent) ===== */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--holo-h);
  background-size: 200% 100%;
  animation: holo-shift 8s linear infinite;
  z-index: 100;
  pointer-events: none;
}

/* ===== LED status dots — purple with a soft glow ===== */
.led,
nav.top .status .led,
.case-tag .led,
.vrow .v-status .led,
.drow .dstatus .led,
.rcard .status .led {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(179, 156, 255, 0.55);
}

/* Traffic-light strip in dispatch + module hero headers */
.dpanel .dh .lights i:nth-child(1),
.mh-side .head .lights i:nth-child(1),
.pnl-head .lights i:first-child {
  background: var(--accent) !important;
  box-shadow: 0 0 8px rgba(179, 156, 255, 0.55);
}
.dpanel .dh .lights i:nth-child(2),
.mh-side .head .lights i:nth-child(2) {
  background: var(--accent-3) !important;
  box-shadow: 0 0 6px rgba(233, 166, 255, 0.35);
}
.dpanel .dh .lights i:nth-child(3),
.mh-side .head .lights i:nth-child(3) {
  background: var(--accent-2) !important;
  box-shadow: 0 0 6px rgba(156, 255, 234, 0.30);
}

/* ===== Hero blinking cursor — purple ===== */
.hero-title .cur {
  background: var(--accent) !important;
  box-shadow: 0 0 14px rgba(179, 156, 255, 0.7);
}

/* ===== Big numbers — iridescent gradient text ===== */
.case-numbers .cn,
.mb-cell .mbn,
.metric .mn,
.mh-stats .n,
.rh-metrics .n {
  background: var(--holo);
  background-size: 200% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: holo-shift 12s ease-in-out infinite;
}
/* Keep unit suffixes neutral */
.case-numbers .cn .u,
.mb-cell .mbn .u,
.metric .mn .unit,
.mh-stats .n .u {
  background: none;
  -webkit-text-fill-color: var(--dim);
          color: var(--dim);
}

/* ===== Section heading — tiny accent underline ===== */
.sec-head h2 {
  position: relative;
  display: inline-block;
}
.sec-head h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: -10px;
  width: 36px; height: 2px;
  background: var(--holo);
  background-size: 200% 100%;
  animation: holo-shift 6s linear infinite;
}

/* ===== Inquire / solid button — purple holographic on hover ===== */
.btn.solid:hover {
  background: var(--holo);
  background-size: 200% 100%;
  animation: holo-shift 5s linear infinite;
  color: var(--bg);
  border-color: transparent;
}
.btn:hover { border-color: var(--accent); }

/* ===== ID pill on module pages ===== */
.mh-tag .id-pill {
  border-color: var(--accent);
  color: var(--accent);
}

/* ===== Console prompt arrow — purple ===== */
.console .ln.run::before { color: var(--accent); }
.console b { color: var(--accent); }

/* ===== "Live state" headers — purple ===== */
.mh-side .head b,
.dpanel .dh b,
.case-bar b,
.pnl-head b { color: var(--accent); }

/* ===== Hover background tints — soft purple wash ===== */
.module:hover           { background: rgba(179, 156, 255, 0.06) !important; }
.partner:hover          { background: rgba(179, 156, 255, 0.06) !important; }
.vrow:hover             { background: rgba(179, 156, 255, 0.08) !important; }
.rcard:hover            { background: rgba(179, 156, 255, 0.08) !important; }
.drow:hover             { background: rgba(179, 156, 255, 0.05) !important; }
.omod:hover             { background: rgba(179, 156, 255, 0.05) !important; }

/* ===== Module card hover — animated accent rail at bottom ===== */
.module { position: relative; }
.module::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--holo);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}
.module:hover::after {
  opacity: 1;
  animation: holo-shift 4s linear infinite;
}

/* ===== Roster card arrow — purple, with glow on hover ===== */
.rcard:hover .arrow {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(179, 156, 255, 0.6);
}

/* ===== Active filter chip — holographic fill ===== */
.chip.active {
  background: var(--holo) !important;
  background-size: 200% 100% !important;
  border-color: transparent !important;
  color: var(--bg) !important;
  animation: holo-shift 6s linear infinite;
}

/* ===== h-kicker :: markers ===== */
.h-kicker b { color: var(--accent); }

/* ===== Foot lockup — subtle purple wash through the N.D.A. mark ===== */
.foot-lock .big {
  background: linear-gradient(135deg, var(--fg) 35%, var(--accent) 60%, var(--fg) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
          color: transparent;
  animation: holo-shift 14s linear infinite;
}

/* ===== Up-arrows in metrics — purple ===== */
.metric .ml .up,
.mb-cell .mbl .arrow { color: var(--accent); }

/* ===== Log-level markers — purple-tint WARN, soft INFO ===== */
.log .ent .lvl.warn { color: var(--accent-3); }
.log .ent .lvl.info { color: rgba(179, 156, 255, 0.75); }

/* ===== SVG route pulses (footprint map) — purple with glow ===== */
.routing svg circle {
  fill: var(--accent);
  filter: drop-shadow(0 0 5px rgba(179, 156, 255, 0.8));
}
/* HQ marker — purple */
.routing svg g[transform="translate(320 200)"] rect[fill="#e8ecef"] { fill: var(--accent); }
/* Dashed lanes — slight purple tint */
.routing svg g[stroke="#6c7681"] { stroke: rgba(179, 156, 255, 0.45); }

/* ===== Form submit button — already covered by .btn.solid:hover ===== */
.submit { transition: background 0.25s; }

/* ===== Workflow SVG nodes (module pages) — boost end-states ===== */
.wf svg g rect[stroke="#e8ecef"] { stroke: var(--accent); filter: drop-shadow(0 0 4px rgba(179, 156, 255, 0.4)); }

/* ===== Mobile tap-friendly: keep accents visible on touch ===== */
@media (hover: none) {
  .module::after { opacity: 0.6; }
  .rcard .arrow { color: var(--accent); }
}

/* ====================================================================
   Light-touch additions — extra purple in small places.
   Goal: a little more presence without losing the industrial feel.
   ==================================================================== */

/* ACTIVE status pills across cards */
.partner .p-id b,
.module .mod-head .pid,
.vrow .v-status,
.rcard .rch b,
.rcard .status,
.eng .eh b,
.omod .omk b,
.drow .dstatus,
.pstep .pnum b,
.module .mod-head .pid { color: var(--accent); }

/* Crumbs row right-side values (NDA-HOME, LAX-01, etc.) */
.crumbs b { color: var(--accent); }

/* Breadcrumb crumb segment on subpages */
.breadbar .crumb { color: var(--accent); }

/* Contact form numbered labels — subtle */
.form-row label { color: var(--accent); opacity: 0.85; }

/* infogrid headings in contact left column */
.infogrid b { color: var(--accent); }

/* Hero-side h4 ("// Operations Log", "// Service Modules") */
.hero-side h4 { color: var(--accent); }

/* Module hover "VIEW →" indicator gets a glow */
.module:hover .mod-head .pid {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(179, 156, 255, 0.5);
}

/* Section meta on right side of section heads — soft purple, not full */
.sec-head .meta a { color: var(--accent); }

/* Console b (the `nda` command in mini console) — already purple, keep */
.case-tag { color: var(--accent); }

/* Foot-grid headings */
.foot-grid b { color: var(--accent); }


/* ====================================================================
   Hero restructure — slogan first, op log below as horizontal band
   ==================================================================== */

.hero-main-stacked { grid-template-columns: 1fr !important; min-height: 0 !important; }
.hero-center-wide {
  padding: 56px 48px 48px !important;
  min-height: 480px;
  align-items: center;
  text-align: center;
}
.hero-center-wide > div:first-child {
  max-width: 920px;
  margin: 0 auto;
}
.hero-title.hero-title-center {
  font-size: 96px;
  line-height: 0.96;
  text-align: center;
  margin: 28px 0 32px;
}
.hero-title.hero-title-center .seg { display: block; }
.hero-center-wide .h-kicker {
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.hero-center-wide .h-actions { justify-content: center; }
.hero-center-wide .console {
  max-width: 720px;
  margin: 32px auto 0;
  text-align: left;
}

/* Op log band below hero */
.hero-oplog {
  position: relative;
  z-index: 1;
  margin: 0 28px;
  border: 1px solid var(--line);
  border-top: none;
  background: var(--bg-2);
}
.hero-oplog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.hero-oplog-head h4 {
  margin: 0;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 700;
}
.hero-oplog-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.hero-oplog-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.hero-oplog-grid .ops-cell {
  padding: 18px 22px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 100px;
}
.hero-oplog-grid .ops-cell:last-child { border-right: none; }
.hero-oplog-grid .ops-cell span {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.hero-oplog-grid .ops-cell b {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 28px;
  color: var(--fg);
  letter-spacing: -0.02em;
}

/* Responsive op log — collapse on tablet/mobile */
@media (max-width: 1024px) {
  .hero-center-wide { padding: 40px 24px !important; min-height: 0; }
  .hero-title.hero-title-center { font-size: 64px; }
  .hero-oplog-grid { grid-template-columns: repeat(3, 1fr); }
  .hero-oplog-grid .ops-cell:nth-child(3n) { border-right: none; }
  .hero-oplog-grid .ops-cell:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .hero-center-wide { padding: 28px 18px !important; }
  .hero-title.hero-title-center { font-size: 42px; }
  .hero-oplog { margin: 0 14px; }
  .hero-oplog-grid { grid-template-columns: 1fr 1fr; }
  .hero-oplog-grid .ops-cell {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    padding: 14px 18px;
    min-height: 80px;
  }
  .hero-oplog-grid .ops-cell:nth-child(2n) { border-right: none; }
  .hero-oplog-grid .ops-cell:nth-last-child(-n+1) { border-bottom: none; }
  .hero-oplog-grid .ops-cell b { font-size: 22px; }
  .hero-oplog-head { padding: 10px 16px; }
}