/* Gobanimo Microfinance — shared portal design tokens (My Account / Get Started / FMaaS pages).
   Linked from each page's <head>, before that page's own <style>. Only the
   values that are identical across all three pages live here; sizing that's
   deliberately page-specific (button padding, body font-size, card layout)
   stays local. */
:root{--emerald:#124734;--forest:#0E3826;--night:#09291C;--gold:#D2683C;--gold-dark:#A44A20;
--ivory:#F3EFE7;--paper:#FAF8F1;--ink:#181C1A;--body:#44504A;--hairline:#E3DECF;--ok:#2B7B4F;--warn:#B07A1E;--err:#B43B3B;--wa:#25D366}
*{box-sizing:border-box}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;font-weight:600;margin:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Responsive tables: portal pages don't load the marketing base.css, so the
   anti-overflow rules live here. Wrap any <table> in .table-wrap. */
table{max-width:100%}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Loading placeholder rows shown while a view's data is in flight. */
.skeleton{height:14px;background:var(--ivory);margin:12px 0;position:relative;overflow:hidden}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);animation:skel 1.2s infinite}
@keyframes skel{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.skeleton::after{animation:none}}

/* Labelled proportional bar (share of a whole, or progress toward a total) —
   originally the FMaaS statement's per-product breakdown; also used by My
   Account for repayment/allocation progress, so it lives here now. */
.barrow{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:13.5px}
.barrow .lab{width:90px;color:var(--body)}
.barrow .track{flex:1;height:10px;background:var(--ivory);border:1px solid var(--hairline);position:relative}
.barrow .track i{position:absolute;inset:0;right:auto;background:var(--gold)}
.barrow .n{width:36px;text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
