/* ============================================================
   EXACT-MATCH override layer — pixel-identical port of values from
   /stage-bc/exact-shell.css, scoped onto the LIVE app's existing
   class names (no JS/markup changes). Loaded LAST, after
   academy-r4.css, so it wins every cascade tie.
   Source of truth: workspace-steve/.../figma-redesign/stage-bc/
   exact-shell.css + graduate-tools.html + journey.html
   ============================================================ */

/* ---- 1. Primary / ghost CTA buttons (.btn / .btn.ghost) ----
   stage-bc source: .xg-next / .xg-back */
.btn {
  border-radius: 9px !important;
  padding: 13px 22px !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  box-shadow: none !important;
  background: var(--green) !important;
  color: #fff !important;
  border: 0 !important;
}
.btn:hover { background: #2C8168 !important; filter: none !important; transform: none !important; }
.btn.ghost {
  background: #D9EBEC !important;
  color: #6E8188 !important;
  border: 0 !important;
  box-shadow: none !important;
}
.btn.ghost:hover { border-color: transparent !important; }

/* ---- 2. Page nav footer (.page-nav) ---- */
.page-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 40px; }

/* ---- 3. Step/mini cards (.mini, .stepbox) ----
   stage-bc source: .xg-stepcard */
.mini, .stepbox {
  background: #ECF5F9 !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 2px rgba(2,23,29,.04) !important;
}
.mini:hover, .stepbox:hover { transform: none !important; box-shadow: 0 1px 2px rgba(2,23,29,.04) !important; border-color: transparent !important; }
.mini .k, .stepbox .n {
  display: block; color: #329879 !important; font-size: .72rem !important; font-weight: 600 !important;
  margin-bottom: 7px !important; letter-spacing: normal !important;
}
.mini .k::before, .stepbox .n::before { display: none !important; }
.mini .h, .stepbox .h {
  display: block; font-size: .88rem !important; font-weight: 600 !important; color: #02171D !important; margin-bottom: 5px !important;
}
.mini p, .stepbox p { margin: 0 !important; font-size: .72rem !important; line-height: 1.55 !important; color: #77898F !important; }

/* ---- 4. Typography (h1/h2/.page-tag/.lede) ----
   stage-bc source: .xg-h1 / .xg-h2 / .xg-kicker / .xg-sub */
#page h1 { font-size: 1.72rem !important; font-weight: 600 !important; letter-spacing: -0.01em !important; margin: 0 0 8px !important; color: #02171D !important; }
#page h2 { font-size: 1.04rem !important; font-weight: 600 !important; color: #02171D !important; margin: 30px 0 12px !important; border-top: 0 !important; padding-top: 0 !important; }
#page .page-tag {
  color: #329879 !important; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: .01em !important;
  margin: 0 0 6px !important; text-transform: none !important;
}
#page .page-tag::before { display: none !important; }
#page .lede { font-size: .84rem !important; color: #77898F !important; margin: 0 0 30px !important; font-weight: 500 !important; max-width: none !important; line-height: 1.5 !important; }

/* ---- 5. Grid layouts (.grid4 / .steps) ----
   stage-bc source: .xg-4col / .xg-3col */
#page .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 8px; }
#page .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 14px; }
#page hr { border: 0; border-top: 1px solid #C9D3D6; margin: 28px 0; }

/* ---- 6. Sidebar shell (.layout aside, .nav-item, .side-progress, .user-chip) ----
   stage-bc source: .xg-side / .xg-item / .xg-progress / .xg-account */
.layout aside {
  background: #E2E9EC !important;
  border-right: 1px solid #E5EEF2 !important;
  width: 250px !important;
}
.layout aside .brand { padding: 24px 22px 20px !important; border-bottom: 1px solid #D4DEE1 !important; margin-bottom: 0 !important; }
.nav-item {
  border-radius: 8px !important;
  padding: 9px 10px !important;
  margin: 2px 0 !important;
  transform: none !important;
}
.nav-item:hover { background: transparent !important; transform: none !important; }
.nav-item.active { background: #D0E1E0 !important; }
.nav-item .num {
  border-radius: 50% !important;
  width: 26px !important; height: 26px !important;
  border: 1.4px solid #329879 !important;
  color: #329879 !important;
  background: transparent !important;
}
.nav-item.done .num { background: #329879 !important; border-color: #329879 !important; color: #fff !important; }
.nav-item .t { font-size: .8rem !important; font-weight: 600 !important; color: #02171D !important; }
.nav-item .t small { font-size: .69rem !important; font-weight: 500 !important; color: #94A2A7 !important; margin-top: 2px !important; }
.nav-item[style*="opacity"] .num { border-color: #B7C3C8 !important; color: #9AA8AD !important; }
.nav-item[style*="opacity"] .t { color: #9AA8AD !important; }
.nav-item[style*="opacity"] .t small { color: #AEB9BD !important; }

.side-progress {
  margin: 8px 16px 18px !important;
  background: #ECF5F9 !important;
  border-radius: 10px !important;
  padding: 14px 14px 12px !important;
  border-top: 0 !important;
  box-shadow: 0 1px 2px rgba(2,23,29,.05) !important;
}
.side-bar { background: #D5DFE2 !important; height: 5px !important; border-radius: 3px !important; }
.side-bar span, #progFill { background: #329879 !important; }

.user-chip {
  display: flex !important; align-items: center !important; gap: 8px !important;
  background: #D9EBEC !important; border-radius: 9px !important; border-top: 0 !important;
  padding: 7px 8px !important; margin: 12px 16px 16px !important;
}
.user-chip a {
  background: #F6DEDA !important; color: #D9574A !important;
  font-size: .68rem !important; font-weight: 600 !important;
  padding: 5px 10px !important; border-radius: 7px !important;
  text-decoration: none !important;
}

/* ---- 7. Leader-code page — exact port of .xg-codecard etc from exact-shell.css ---- */
.xg-codecard{background:#ECF5F9;border-radius:14px;padding:24px 28px;box-shadow:0 1px 4px rgba(2,23,29,.06);margin-bottom:20px}
.xg-codecard .lk{color:#329879;font-size:.64rem;font-weight:700;letter-spacing:.12em;display:block;margin-bottom:6px}
.xg-codecard .code{font-size:1.9rem;font-weight:700;letter-spacing:.04em;color:#02171D}
.xg-codehead{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.xg-savedchip{display:inline-flex;align-items:center;gap:6px;background:#CBE7E3;color:#1F6A52;font-size:.72rem;font-weight:600;padding:7px 14px;border-radius:999px}
.xg-changelink{font-size:.7rem;color:#77898F;text-decoration:underline;margin-left:14px}
.xg-codehr{border:0;border-top:1px solid #C9D3D6;margin:20px 0}
.xg-linkrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.xg-linkfield{flex:1;display:flex;align-items:center;gap:8px;background:#CDD8DC;border-radius:8px;padding:12px 15px;font-size:.78rem;color:#1F373F;min-width:200px;word-break:break-all}
.xg-btn-soft{border:0;background:#DCEBEA;color:#329879;font-family:inherit;font-size:.76rem;font-weight:600;padding:12px 20px;border-radius:8px;cursor:pointer;white-space:nowrap}
.xg-foot{display:flex;align-items:center;justify-content:space-between;margin-top:40px;flex-wrap:wrap;gap:12px}
.xg-back{display:inline-flex;align-items:center;gap:7px;border:0;background:#D9EBEC;color:#6E8188;font-family:inherit;font-size:.8rem;font-weight:600;padding:12px 20px;border-radius:9px;cursor:pointer}
.xg-next{display:inline-flex;align-items:center;gap:8px;border:0;background:#329879;color:#fff;font-family:inherit;font-size:.8rem;font-weight:600;padding:13px 22px;border-radius:9px;cursor:pointer}
.xg-next:hover{background:#2C8168}
.xg-3col{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.xg-stepcard{background:#ECF5F9;border-radius:12px;padding:16px 18px;box-shadow:0 1px 2px rgba(2,23,29,.04)}
.xg-stepcard .k{display:block;color:#329879;font-size:.72rem;font-weight:600;margin-bottom:7px}
.xg-stepcard b{display:block;font-size:.88rem;font-weight:600;color:#02171D;margin-bottom:5px}
.xg-stepcard p{margin:0;font-size:.72rem;line-height:1.55;color:#77898F}
@media (max-width:900px){
  .xg-3col{grid-template-columns:1fr}
  .xg-codehead{flex-direction:column;align-items:flex-start}
  .xg-foot{flex-direction:column;align-items:stretch}
}