/* ============================================================
   BRIDGE — client-experience layer for the Dealmaking OS
   Del Real Commercial · loads AFTER os.css + close.css
   Recolors the shared CLOSE surface components to Forest so
   agents can tell the two systems apart at a glance.
   Scope: everything is gated on body.bridge.
   ============================================================ */
body.bridge{
  --b-forest:#4f6b59;      /* deepened sage — legible on white, used for solid marks + headings */
  --b-forest2:#6C8A78;     /* brand Forest — accents */
  --b-forest-08:#f0f4f1;
  --b-forest-15:#e6ede8;
  --b-forest-40:#bcccc1;
  --b-forest-bd:#9db4a5;
}

/* ---- breadcrumb + eyebrow ---- */
body.bridge .crumb a{ color:var(--b-forest); }
body.bridge .eyebrow{ color:var(--b-forest); }
body.bridge .top .crumb a:hover{ color:var(--b-forest); }
body.bridge .btn--ghost:hover{ border-color:var(--b-forest); color:var(--b-forest); }

/* ---- lead copy accent ---- */
body.bridge .content .lead b{ color:var(--ink); }

/* ============================================================
   THE SPINE — six-node B·R·I·D·G·E backbone
   ============================================================ */
body.bridge .spine-track{ grid-template-columns:repeat(6,1fr); }
body.bridge .spine-track::before{ background:var(--b-forest-40); left:7%; right:7%; }
body.bridge .node .mk{ border-color:var(--b-forest-40); color:var(--b-forest); }
body.bridge .node:hover .mk{ border-color:var(--b-forest); box-shadow:0 8px 22px rgba(79,107,89,.18); }
body.bridge .node .map{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  background:var(--b-forest-15); border:1px solid var(--b-forest-bd); color:var(--b-forest);
  font-weight:600; font-size:7.5px; letter-spacing:.1em; text-transform:uppercase;
  padding:3px 7px; border-radius:999px; white-space:nowrap;
}

/* ============================================================
   STAGE ROW (hub cards on the spine page)
   ============================================================ */
body.bridge .stagecard .lmk{ background:var(--b-forest-08); color:var(--b-forest); }
body.bridge .stagecard .open{ color:var(--b-forest); border-color:var(--b-forest-40); }
body.bridge .stagecard .open:hover{ background:var(--b-forest-08); }
body.bridge .stagecard .map-chip{
  display:inline-flex; align-items:center; gap:6px; margin-top:9px;
  font-weight:600; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--b-forest); background:var(--b-forest-08); border:1px solid var(--b-forest-15);
  border-radius:999px; padding:4px 10px;
}
body.bridge .stagecard .map-chip b{ color:var(--ink); font-weight:700; }

/* Do side → Forest. Learn side keeps the OS gold. */
body.bridge .dl-do .dl-h{ color:var(--b-forest); }
body.bridge .dl-do .pin{ background:var(--b-forest); }
body.bridge .toollink svg{ color:var(--b-forest); }
body.bridge .toollink:hover{ border-color:var(--b-forest-40); }

/* ============================================================
   QUESTION RAIL — the question each stage answers
   ============================================================ */
body.bridge .qrail{
  display:flex; align-items:center; gap:13px; margin:14px 0 0;
  background:var(--b-forest-08); border:1px solid var(--b-forest-15);
  border-radius:12px; padding:13px 16px;
}
body.bridge .qrail .ql{
  font-weight:600; font-size:9px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--b-forest); white-space:nowrap;
}
body.bridge .qrail .qt{ font-weight:500; font-size:14px; color:var(--charcoal); line-height:1.4; }

/* ============================================================
   STAGE PAGE specifics
   ============================================================ */
body.bridge .stagehero .bigmk{ background:var(--b-forest); box-shadow:0 10px 30px rgba(79,107,89,.22); }
body.bridge .stagehero .sh-kick{ color:var(--b-forest); }

/* small CLOSE cross-reference next to the hero mark */
body.bridge .xref{
  display:inline-flex; align-items:center; gap:8px; margin:0 0 12px;
  font-weight:600; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--b-forest); background:var(--b-forest-08); border:1px solid var(--b-forest-15);
  border-radius:999px; padding:5px 11px;
}
body.bridge .xref b{ color:var(--ink); font-weight:700; }
body.bridge .xref .cm{
  width:16px; height:16px; border-radius:5px; background:var(--ocean); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:700;
}

/* agent "how to run it" note */
body.bridge .agentnote{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--white); border:1px solid var(--mist); border-left:3px solid var(--b-forest);
  border-radius:13px; padding:18px 20px; margin:8px 0 4px; box-shadow:0 1px 3px rgba(14,29,39,.04);
}
body.bridge .agentnote .an-ic{
  width:38px; height:38px; flex:0 0 auto; border-radius:10px; background:var(--b-forest-08);
  color:var(--b-forest); display:flex; align-items:center; justify-content:center;
}
body.bridge .agentnote .an-ic svg{ width:20px; height:20px; }
body.bridge .agentnote .an-h{
  font-weight:600; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--b-forest); margin:0 0 5px;
}
body.bridge .agentnote p{ margin:0; font-size:13px; line-height:1.55; color:var(--charcoal); }

/* DO panel → Forest */
body.bridge .panel.do .panel-h{ color:var(--b-forest); }
body.bridge .toolgrid--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1080px){ body.bridge .toolgrid--3{ grid-template-columns:1fr 1fr; } }
@media (max-width:760px){ body.bridge .toolgrid--3{ grid-template-columns:1fr; } }
body.bridge .panel.do .pin{ background:var(--b-forest); }
body.bridge .toolcard .ti{ background:var(--b-forest-08); color:var(--b-forest); }
body.bridge .toolcard:hover{ border-color:var(--b-forest-40); }
body.bridge .toolcard .arr{ color:var(--b-forest); }

/* LEARN video placeholder → Forest frame (kept distinct from gold lesson chips) */
body.bridge .media-ph{ background:var(--b-forest-08); border-color:var(--b-forest-40); }
body.bridge .media-ph .play{ border-color:var(--b-forest-40); color:var(--b-forest); }

/* prev / next */
body.bridge .stepnav a:hover{ border-color:var(--b-forest-40); }
body.bridge .stepnav .nmk{ background:var(--b-forest-08); color:var(--b-forest); }

/* ============================================================
   JOURNEY RIBBON (BRIDGE equivalent of the onboarding ribbon)
   ============================================================ */
body.bridge .onboard{ background:var(--b-forest); }
body.bridge .onboard .ob-ey{ color:var(--sunray); }
body.bridge .ob-steps{ grid-template-columns:repeat(6,1fr); }

@media (max-width:920px){
  body.bridge .spine-track{ grid-template-columns:1fr; }
  body.bridge .ob-steps{ grid-template-columns:1fr 1fr; }
}