/* ============================================================================
   SGA Dashboard Explainer — self-hosted "?" metric help.
   Light/white SGA navy-gold theme. Zero dependencies. PHI-safe.
   Pairs with dashboard-walkthrough / sga-scorecard / drillable-dashboard.
   Palette inherits the host page's --navy/--gold/etc when present, else falls
   back to the sga-scorecard defaults below.
   ========================================================================== */
:root{
  --sgx-navy:  var(--navy,  #0f2742);
  --sgx-navy2: var(--navy2, #1b365d);
  --sgx-gold:  var(--gold,  #c8a45c);
  --sgx-ink:   var(--ink,   #16202c);
  --sgx-muted: var(--muted, #6b7280);
  --sgx-line:  var(--line,  #e6eaef);
  --sgx-card:  var(--card,  #ffffff);
}

/* ---- the inline "?" button (append to any heading / label / KPI) -------- */
.sga-x-btn{
  cursor:pointer; border:1px solid var(--sgx-line); background:#fff;
  color:var(--sgx-navy2); font:800 10px/15px Inter,system-ui,sans-serif;
  width:17px; height:17px; border-radius:50%; text-align:center; padding:0;
  margin-left:6px; vertical-align:middle; flex:none; transition:background .12s,color .12s;
}
.sga-x-btn:hover,.sga-x-btn:focus-visible{ background:var(--sgx-navy); color:#fff; border-color:var(--sgx-navy); outline:none; }
.sga-x-btn:focus-visible{ box-shadow:0 0 0 3px rgba(200,164,92,.45); }

/* ---- overlay + panel (shared by single-group modal and glossary) -------- */
.sgx-overlay{
  position:fixed; inset:0; background:rgba(15,39,66,.38); z-index:2147483000;
  display:none; align-items:flex-start; justify-content:center;
  overflow:auto; padding:40px 16px;
}
.sgx-overlay.show{ display:flex; }
.sgx-panel{
  background:var(--sgx-card); border-radius:16px; max-width:660px; width:100%;
  padding:20px 24px; box-shadow:0 18px 60px rgba(15,39,66,.35);
  font-family:Inter,system-ui,-apple-system,sans-serif;
}
.sgx-panel.sgx-wide{ max-width:820px; }
@media(prefers-reduced-motion:no-preference){
  .sgx-overlay.show .sgx-panel{ animation:sgx-pop .16s ease-out; }
}
@keyframes sgx-pop{ from{ transform:translateY(8px); opacity:.4 } to{ transform:none; opacity:1 } }

.sgx-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; }
.sgx-title{ margin:0; color:var(--sgx-navy); font-size:17px; font-weight:800; line-height:1.25; }
.sgx-close{
  border:0; background:none; font-size:24px; line-height:1; cursor:pointer;
  color:var(--sgx-muted); padding:0 2px; flex:none;
}
.sgx-close:hover{ color:var(--sgx-navy); }
.sgx-intro{ font-size:13.5px; line-height:1.55; color:var(--sgx-ink); margin:8px 0 6px; }

/* ---- one metric row: name | plain-English + how-it's-calculated + source - */
.sgx-terms{ margin-top:6px; }
.sgx-term{
  display:grid; grid-template-columns:168px 1fr; gap:12px;
  padding:11px 0; border-top:1px solid #eef1f5;
}
.sgx-term:first-child{ border-top:0; }
.sgx-name{ color:var(--sgx-navy); font-weight:800; font-size:12.8px; line-height:1.4; }
.sgx-plain{ font-size:12.8px; line-height:1.5; color:var(--sgx-ink); }
.sgx-calc{ font-size:11.8px; line-height:1.45; color:var(--sgx-muted); margin-top:4px; }
.sgx-calc b{ color:var(--sgx-navy2); font-weight:700; }
.sgx-calc code{ background:#f1f4f7; border-radius:4px; padding:1px 5px; font-size:11px; }
.sgx-src{
  display:inline-block; font-size:10.5px; font-weight:700; color:var(--sgx-navy2);
  background:#eef2f7; border-radius:999px; padding:2px 9px; margin-top:6px;
}
@media(max-width:560px){ .sgx-term{ grid-template-columns:1fr; gap:3px; } }

/* ---- glossary (all groups in one searchable modal) --------------------- */
.sgx-search{
  width:100%; padding:9px 12px; margin:10px 0 2px; box-sizing:border-box;
  border:1px solid var(--sgx-line); border-radius:10px; font-size:13px;
  font-family:inherit; color:var(--sgx-ink);
}
.sgx-search:focus{ outline:none; border-color:var(--sgx-gold); box-shadow:0 0 0 3px rgba(200,164,92,.2); }
.sgx-group{ margin-top:16px; }
.sgx-group-h{
  color:var(--sgx-navy); font-weight:800; font-size:14px;
  border-bottom:2px solid var(--sgx-gold); padding-bottom:5px; margin-bottom:2px;
}
.sgx-group-i{ font-size:12px; color:var(--sgx-muted); margin:6px 0 0; line-height:1.5; }
.sgx-empty{ color:var(--sgx-muted); font-size:12.5px; padding:14px 0; }
.sgx-hidden{ display:none !important; }

/* ---- floating "Metric guide" launcher --------------------------------- */
.sgx-launch{
  position:fixed; left:18px; bottom:18px; z-index:2147482000;
  background:var(--sgx-navy); color:#fff; border:0; border-radius:999px;
  padding:9px 15px 9px 11px; font:700 12.5px Inter,system-ui,sans-serif;
  cursor:pointer; box-shadow:0 6px 20px rgba(15,39,66,.3);
  display:inline-flex; align-items:center; gap:8px; transition:transform .12s;
}
.sgx-launch:hover{ transform:translateY(-1px); }
.sgx-launch .sgx-i{
  width:18px; height:18px; border-radius:50%; background:var(--sgx-gold);
  color:var(--sgx-navy); font-weight:900; font-size:12px; line-height:18px; text-align:center; flex:none;
}
@media print{ .sgx-launch,.sga-x-btn{ display:none !important; } }