/* =====================================================================
   CSG Market Intelligence - shared report design system (mi.css)
   One stylesheet linked by every Market Intelligence report so the suite
   shares a consistent, polished, dependency-free component set.
   Brand tokens mirror /css/styles.css; safe to load alongside page styles.
   ===================================================================== */
:root{
  --mi-navy:#00163D; --mi-blue:#0390D9; --mi-teal:#11BDBF; --mi-action:#1E40AF;
  --mi-pos:#0B7A4B; --mi-neg:#B42318; --mi-ink:#1A2B4A; --mi-muted:#4A5568;
  --mi-border:#E2E8F0; --mi-soft:#F7F9FC; --mi-hover:#EAF4FB; --mi-white:#fff;
  --mi-radius:14px;
}

/* ---- KPI stat strip (also repairs legacy #gstats pages that lacked a grid) ---- */
.mi-stats,#gstats.mi-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:1rem;margin:1.5rem 0;}
.mi-stat{background:var(--mi-white);border:1px solid var(--mi-border);border-radius:var(--mi-radius);
  padding:1.2rem 1.35rem;box-shadow:0 1px 2px rgba(16,40,80,.04);}
.mi-stat .v{font-size:2rem;font-weight:800;color:var(--mi-navy);line-height:1.1;letter-spacing:-.02em;}
.mi-stat .v small{font-size:1rem;font-weight:600;color:var(--mi-muted);}
.mi-stat .v.pos{color:var(--mi-pos);} .mi-stat .v.neg{color:var(--mi-neg);} .mi-stat .v.teal{color:var(--mi-blue);}
.mi-stat .l{font-size:.8rem;color:var(--mi-muted);margin-top:.45rem;line-height:1.45;}

/* ---- legacy stat-strip repair: original pages use #gstats/.gstat/.gv/.gl and
   some shipped without a grid (Landing Durability, Movement Map rendered as a
   vertical text stack). These rules render every legacy stat strip consistently. */
#gstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:1rem;margin:1.5rem 0;}
.gstat{background:var(--mi-white);border:1px solid var(--mi-border);border-radius:var(--mi-radius);
  padding:1.2rem 1.35rem;box-shadow:0 1px 2px rgba(16,40,80,.04);}
.gstat .gv{font-size:2rem;font-weight:800;color:var(--mi-navy);line-height:1.1;letter-spacing:-.02em;}
.gstat .gv.t{color:var(--mi-blue);} .gstat .gv.b{color:var(--mi-teal);}
.gstat .gl{font-size:.8rem;color:var(--mi-muted);margin-top:.45rem;line-height:1.45;}

/* ---- methodology / scope banner (top of each public report). Named .mi-scope
   to avoid colliding with the hub's existing .mi-method ("how it works") grid. */
.mi-scope{max-width:1080px;margin:1rem auto 0;padding:.8rem 1.15rem;background:#F0F6FC;
  border:1px solid #D6E4F0;border-radius:10px;color:#3B4A5C;font-size:.82rem;line-height:1.55;}
.mi-scope.warn{background:#FFF7ED;border-color:#FED7AA;color:#9A3412;}
.mi-scope b{color:inherit;}
.mi-srcline{max-width:1080px;margin:.55rem auto 0;font-size:.78rem;color:#5B6B7C;text-align:center;line-height:1.5;}
.mi-srcline b{color:var(--mi-navy);font-weight:600;}

/* ---- section heads ---- */
.mi-h{font-size:1.18rem;font-weight:700;color:var(--mi-navy);margin:1.9rem 0 .35rem;}
.mi-sub{font-size:.85rem;color:var(--mi-muted);margin:0 0 1rem;line-height:1.5;}

/* ---- data table ---- */
.mi-table-wrap{overflow-x:auto;border:1px solid var(--mi-border);border-radius:var(--mi-radius);
  background:var(--mi-white);box-shadow:0 1px 2px rgba(16,40,80,.04);}
.mi-table{width:100%;border-collapse:collapse;font-size:.9rem;}
.mi-table thead th{background:var(--mi-navy);color:#fff;text-align:left;padding:.72rem .95rem;
  font-weight:600;font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
.mi-table th.num,.mi-table td.num{text-align:right;font-variant-numeric:tabular-nums;}
.mi-table thead th{cursor:pointer;user-select:none;}
.mi-table thead th:hover{background:#0A2552;}
.mi-table thead th[aria-sort]::after{content:" \25B2";font-size:.7em;opacity:.85;}
.mi-table thead th[aria-sort="descending"]::after{content:" \25BC";}
.mi-table tbody td{padding:.66rem .95rem;border-top:1px solid #EEF2F6;color:var(--mi-ink);}
.mi-table tbody tr:nth-child(even){background:var(--mi-soft);}
.mi-table tbody tr:hover{background:var(--mi-hover);}
.mi-table .rk{color:#94A3B8;font-weight:700;width:2.2rem;}
.mi-table .firm{font-weight:600;color:var(--mi-navy);}

/* ---- horizontal bar chart ---- */
.mi-bars{display:flex;flex-direction:column;gap:.55rem;margin:.4rem 0 .2rem;}
.mi-bar{display:grid;grid-template-columns:minmax(120px,205px) 1fr minmax(120px,auto);align-items:center;gap:.85rem;}
.mi-bar .lab{font-size:.84rem;color:var(--mi-muted);text-align:right;}
.mi-bar .track{background:#EEF2F6;border-radius:6px;overflow:hidden;height:22px;}
.mi-bar .fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--mi-blue),var(--mi-teal));min-width:2px;}
.mi-bar .fill.neg{background:linear-gradient(90deg,#e06a5e,var(--mi-neg));}
.mi-bar .fill.pos{background:linear-gradient(90deg,#34c08a,var(--mi-pos));}
.mi-bar .fill.purple{background:linear-gradient(90deg,#a78bfa,#7c5cbf);}
.mi-bar .val{font-size:.84rem;color:var(--mi-ink);font-variant-numeric:tabular-nums;}
.mi-bar .val .q{color:var(--mi-muted);}

/* ---- diverging net-flow bars (zero in the middle) ---- */
.mi-div{display:grid;grid-template-columns:minmax(150px,220px) 1fr 1fr minmax(120px,auto);align-items:center;gap:.5rem;}
.mi-div .lab{font-size:.84rem;color:var(--mi-muted);text-align:right;}
.mi-div .L{display:flex;justify-content:flex-end;}
.mi-div .R{display:flex;justify-content:flex-start;}
.mi-div .seg{height:22px;border-radius:4px;}
.mi-div .seg.neg{background:linear-gradient(90deg,#e06a5e,var(--mi-neg));}
.mi-div .seg.pos{background:linear-gradient(90deg,#34c08a,var(--mi-pos));}
.mi-div .val{font-size:.84rem;font-variant-numeric:tabular-nums;}

/* ---- badges ---- */
.mi-badge{display:inline-block;font-size:.68rem;font-weight:700;padding:.16rem .55rem;border-radius:999px;letter-spacing:.02em;}
.mi-badge.burst{background:#FEF3C7;color:#92400E;} .mi-badge.vet{background:#E0E7FF;color:#3730A3;}
.mi-badge.conv{background:#EDE9FE;color:#5B21B6;} .mi-badge.small{background:#F1F5F9;color:#64748B;}

/* ---- notes / coverage / states ---- */
.mi-note{font-size:.8rem;color:var(--mi-muted);margin-top:.7rem;line-height:1.55;}
.mi-coverage{background:#FFF7ED;border:1px solid #FED7AA;border-radius:12px;padding:.85rem 1.1rem;
  color:#9A3412;font-size:.85rem;line-height:1.5;margin:1rem 0;}
.mi-empty{padding:2rem;text-align:center;color:var(--mi-muted);font-style:italic;}
.mi-skel{height:120px;border-radius:var(--mi-radius);
  background:linear-gradient(90deg,#F3F6FA,#FAFCFF,#F3F6FA);background-size:200% 100%;animation:mi-pulse 1.4s ease-in-out infinite;}
@keyframes mi-pulse{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* ---- two-column layout for paired leaderboards ---- */
.mi-grid2{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;align-items:start;}

/* ---- state link grid (Local Market index) ---- */
.mi-states{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.6rem;margin:1.5rem 0;}
.mi-states a{display:block;padding:.7rem 1rem;background:var(--mi-white);border:1px solid var(--mi-border);
  border-radius:10px;text-decoration:none;color:var(--mi-navy);font-weight:600;transition:all .12s;}
.mi-states a:hover{border-color:var(--mi-blue);box-shadow:0 2px 8px rgba(3,144,217,.12);transform:translateY(-1px);}

@media(max-width:760px){
  .mi-stat .v{font-size:1.6rem;}
  .mi-bar,.mi-div{grid-template-columns:1fr;gap:.25rem;}
  .mi-bar .lab,.mi-div .lab{text-align:left;}
  .mi-grid2{grid-template-columns:1fr;}
}