/* Korevra Gbam — component layer.
 * Every screen composes from these. Do not invent a new visual language per screen.
 */

/* ======================================================================
 * App chrome
 * ==================================================================== */
.appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.appbar__title { font-family: var(--dsp); font-size: var(--fs-lg); font-weight: 600; }
.appbar__sub { font-family: var(--mno); font-size: var(--fs-xs); color: var(--mut); }
.appbar__actions { margin-left: auto; display: flex; gap: var(--sp-2); align-items: center; }

.mark { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 9px; }
.wordmark { font-family: var(--dsp); font-weight: 700; letter-spacing: -.02em; line-height: 1; }
.wordmark .dot { color: var(--gold-ink); }

.tabbar {
  position: sticky; bottom: 0; z-index: 40;
  display: flex; border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.tabbar button {
  flex: 1; padding: 9px 2px 11px; color: var(--mut);
  font-family: var(--mno); font-size: 9px; letter-spacing: .1em; text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.tabbar button[aria-current="page"] { color: var(--gold-ink); }
.tabbar svg { width: 18px; height: 18px; }

.sidenav { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-2); }
.sidenav button {
  display: flex; align-items: center; gap: var(--sp-2); width: 100%;
  padding: 9px var(--sp-3); border-radius: var(--r-sm);
  color: var(--txt-2); font-size: var(--fs-sm); text-align: left;
}
.sidenav button:hover { background: var(--surface); color: var(--txt); }
.sidenav button[aria-current="page"] { background: var(--surface-2); color: var(--txt); font-weight: 500; }
.sidenav__group { padding: var(--sp-3) var(--sp-3) var(--sp-1); }

/* ======================================================================
 * Panels and cards
 * ==================================================================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-3) var(--sp-4);
}
/* A tinted panel lifts the background, so muted text loses contrast against it.
 * Inside a tint, the muted role steps up one level. Measured worst case is 6.0:1. */
.panel--gold, .panel--teal, .panel--clay { --mut: var(--txt-2); }
.panel--gold { border-color: rgba(212, 168, 67, .42); background: rgba(212, 168, 67, .10); }
.panel--teal { border-color: rgba(63, 191, 160, .36); background: rgba(27, 138, 138, .12); }
.panel--clay { border-color: rgba(196, 85, 60, .40); background: rgba(196, 85, 60, .10); }
.panel--flat { background: none; }
.panel__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-2);
}
[data-theme="light"] .panel { box-shadow: var(--shadow-1); }

.stat { text-align: center; }
.stat .lab { display: block; margin-bottom: 3px; }

/* ======================================================================
 * The paper artifacts — card and receipt
 * ==================================================================== */
.card {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-4) 0;
  box-shadow: var(--shadow-2);
}
.card--tear::after {
  content: ""; display: block; height: 12px; margin: var(--sp-3) calc(var(--sp-4) * -1) 0;
  background: radial-gradient(circle at 6px -2px, transparent 6px, var(--paper) 6.5px);
  background-size: 12px 12px;
}
.card__kick {
  font-family: var(--mno); font-size: 8.4px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-dpr);
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2);
}
.card__ttl {
  font-family: var(--dsp); font-size: var(--fs-xl); line-height: 1.12; font-weight: 600;
  margin: 7px 0 2px; letter-spacing: -.01em;
}
.card__sub { font-size: var(--fs-xs); color: #55606C; }
.card .rule {
  height: 1px; border: 0; margin: 11px 0 10px;
  background: linear-gradient(90deg, var(--gold-dp), rgba(168, 124, 30, .14));
}
.figs { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.figs b { font-family: var(--mno); font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.figs small { font-family: var(--mno); font-size: 10px; color: #55606C; display: block; }
.pct { font-family: var(--dsp); font-size: 26px; font-weight: 700; color: var(--gold-dpr); line-height: 1; }

.stamp {
  position: absolute; top: 14px; right: 14px; transform: rotate(-11deg);
  font-family: var(--dsp); font-weight: 700; font-size: 17px; letter-spacing: .04em;
  color: var(--gold-dpr); border: 2.5px solid var(--gold-dpr);
  border-radius: 6px; padding: 2px 8px; opacity: .88;
}

.receipt__lines {
  font-family: var(--mno); font-size: 9.6px; line-height: 1.75; color: #55606C;
  text-transform: uppercase; letter-spacing: .03em;
}

/* ======================================================================
 * The member grid — the wall of tiles. Gold means settled.
 * ==================================================================== */
.grid-tiles { display: grid; gap: 3px; margin: 11px 0 9px; }
.grid-tiles i {
  aspect-ratio: 1; border-radius: 2px; display: block;
  background: var(--state-unpaid);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.grid-tiles i.is-paid {
  background: linear-gradient(150deg, var(--gold), var(--gold-dp));
  box-shadow: 0 0 0 .5px rgba(168, 124, 30, .5);
}
.grid-tiles i.is-promised { background: rgba(196, 85, 60, .34); }
.card .grid-tiles i { background: rgba(13, 43, 78, .13); }
.card .grid-tiles i.is-paid { background: linear-gradient(150deg, var(--gold), var(--gold-dp)); }
.card .grid-tiles i.is-promised { background: rgba(196, 85, 60, .28); }

@media (prefers-reduced-motion: no-preference) {
  .grid-tiles i.just-paid { animation: strike 520ms var(--ease); }
  @keyframes strike {
    0% { transform: scale(1); }
    35% { transform: scale(1.45); }
    100% { transform: scale(1); }
  }
}

.legend {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-family: var(--mno); font-size: 8.6px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--mut);
}
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend span::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--state-unpaid); }
.legend .k-paid::before { background: var(--gold); }
.legend .k-promised::before { background: rgba(196, 85, 60, .55); }
.card .legend { color: #55606C; }

/* ======================================================================
 * Progress ring
 * ==================================================================== */
.ring { display: grid; place-items: center; margin-inline: auto; }
.ring svg { transform: rotate(-90deg); }
.ring__track { stroke: var(--state-unpaid); fill: none; }
.ring__fill { stroke: var(--gold); fill: none; stroke-linecap: butt; transition: stroke-dashoffset 600ms var(--ease); }
.ring__label { text-align: center; }
.ring__label b { font-family: var(--dsp); font-size: 25px; font-weight: 700; line-height: 1; display: block; }
.ring__label small { font-family: var(--mno); font-size: 8.6px; letter-spacing: .14em; color: var(--mut); text-transform: uppercase; }
.ring-wrap { position: relative; display: grid; place-items: center; }
.ring-wrap .ring__label { position: absolute; inset: 0; display: grid; place-content: center; }

/* ======================================================================
 * Buttons
 * ==================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; min-height: 44px; padding: 11px var(--sp-4);
  border-radius: var(--r-md); font-size: var(--fs-md); font-weight: 700;
  background: var(--fill-gold); color: var(--fill-gold-ink);
  transition: transform var(--dur) var(--ease), filter var(--dur) var(--ease);
  text-align: center;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .48; pointer-events: none; }
.btn--teal { background: var(--fill-teal); color: var(--fill-teal-ink); }
.btn--clay { background: var(--fill-clay); color: var(--fill-clay-ink); }
.btn--navy { background: var(--fill-navy); color: var(--fill-navy-ink); }
.btn--ghost {
  background: none; border: 1px solid var(--line-2); color: var(--txt); font-weight: 500;
}
.btn--ghost:hover { background: var(--surface); filter: none; }
.btn--plain { background: none; color: var(--teal-ink); font-weight: 500; min-height: 36px; padding: 6px 10px; }
.btn--sm { min-height: 34px; padding: 6px var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--auto { width: auto; }
.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.fab {
  position: fixed; right: 18px; bottom: 76px; z-index: 45;
  width: auto; padding: 12px 18px; border-radius: var(--r-pill);
  box-shadow: var(--shadow-2);
}

/* ======================================================================
 * Form controls
 * ==================================================================== */
.field { display: block; }
.field > .lab { display: block; margin-bottom: 5px; }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px var(--sp-3);
  background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--txt); font-size: var(--fs-md);
}
.textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.input::placeholder, .textarea::placeholder { color: var(--mut); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { border-color: var(--focus); }
.input[aria-invalid="true"] { border-color: var(--clay); }
.field__err { color: var(--clay-ink); font-size: var(--fs-xs); margin-top: 4px; display: block; }
.field__hint { color: var(--mut); font-size: var(--fs-xs); margin-top: 4px; display: block; }

.input--money {
  font-family: var(--mno); font-size: var(--fs-2xl); font-weight: 700;
  text-align: center; letter-spacing: -.02em; min-height: 56px;
}

.pills { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.pill {
  flex: 1 1 auto; min-width: 72px; min-height: 40px; padding: 9px var(--sp-2);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--mno); font-size: var(--fs-sm); color: var(--txt-2);
  display: inline-flex; align-items: center; justify-content: center;
}
.pill:hover { border-color: var(--line-2); }
.pill[aria-pressed="true"], .pill.is-sel {
  border-color: var(--gold); background: rgba(212, 168, 67, .16); color: var(--gold-ink); font-weight: 500;
}
[data-theme="light"] .pill[aria-pressed="true"] { background: rgba(212, 168, 67, .22); }

.switch { display: inline-flex; align-items: center; gap: var(--sp-2); cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 42px; height: 24px; border-radius: var(--r-pill);
  background: var(--state-unpaid); position: relative; transition: background var(--dur) var(--ease); flex: 0 0 auto;
}
.switch__track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--paper); transition: transform var(--dur) var(--ease);
}
.switch input:checked + .switch__track { background: var(--teal); }
.switch input:checked + .switch__track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--focus); outline-offset: 2px; }

.seg { display: inline-flex; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 3px; gap: 2px; }
.seg button { padding: 7px var(--sp-3); border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--mut); }
.seg button[aria-pressed="true"] { background: var(--surface-2); color: var(--txt); font-weight: 500; }

/* ======================================================================
 * Lists
 * ==================================================================== */
.list {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-md); overflow: hidden;
}
.item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 10px var(--sp-3); background: var(--bg-2); text-align: left; width: 100%;
}
[data-theme="dark"] .item { background: rgba(8, 25, 46, .72); }
button.item:hover { background: var(--surface-2); }
.item__main { flex: 1; min-width: 0; }
.item__main b { display: block; font-size: var(--fs-sm); font-weight: 500; }
.item__main small { font-family: var(--mno); font-size: 10px; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.item__end { flex: 0 0 auto; text-align: right; }

.av {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  background: var(--fill-mut); color: var(--txt);
}
.av--paid { background: linear-gradient(140deg, var(--gold), var(--gold-dp)); color: var(--fill-gold-ink); }
.av--lg { width: 40px; height: 40px; font-size: 13px; }

.amt { font-family: var(--mno); font-size: var(--fs-sm); font-weight: 700; color: var(--gold-ink); }
.amt--mut { color: var(--mut); font-weight: 400; }

/* ======================================================================
 * Tags and badges
 * ==================================================================== */
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mno); font-size: 8.8px; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 5px;
  background: rgba(63, 191, 160, .16); color: var(--teal-ink); border: 1px solid rgba(63, 191, 160, .32);
}
.tag--gold { background: rgba(212, 168, 67, .16); color: var(--gold-ink); border-color: rgba(212, 168, 67, .34); }
.tag--clay { background: rgba(196, 85, 60, .16); color: var(--clay-ink); border-color: rgba(196, 85, 60, .36); }
.tag--mut { background: var(--fill-mut); color: var(--mut); border-color: var(--line); }
.tag--plum { background: rgba(106, 79, 163, .18); color: var(--plum-ink); border-color: rgba(106, 79, 163, .34); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mno); font-size: var(--fs-xs); letter-spacing: .06em;
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 6px 12px; color: var(--mut);
}
.chip b { color: var(--txt); font-weight: 500; }

/* ======================================================================
 * Bars, meters
 * ==================================================================== */
.bar { height: 8px; border-radius: 4px; background: var(--state-unpaid); overflow: hidden; }
.bar > i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dp), var(--gold)); }
.bar--teal > i { background: linear-gradient(90deg, var(--teal-dp), var(--teal-lt)); }
.bar--clay > i { background: linear-gradient(90deg, var(--clay-dp), var(--clay)); }

/* ======================================================================
 * Tables
 * ==================================================================== */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.tbl { font-size: var(--fs-sm); min-width: 520px; }
.tbl th {
  text-align: left; padding: 10px var(--sp-3); font-family: var(--mno);
  font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-ink);
  font-weight: 400; border-bottom: 1px solid var(--line); white-space: nowrap;
  background: var(--surface); position: sticky; top: 0;
}
.tbl td { padding: 10px var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; color: var(--txt-2); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl td b { color: var(--txt); font-weight: 500; }
.tbl .num { text-align: right; }

/* ======================================================================
 * Sheets, modals, toasts
 * ==================================================================== */
.scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(4, 11, 21, .62);
  backdrop-filter: blur(3px); display: grid; place-items: end center;
}
.sheet {
  width: min(560px, 100%); max-height: 88vh; overflow-y: auto;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-xl) var(--r-xl) 0 0; padding: var(--sp-4) var(--sp-4) var(--sp-6);
  box-shadow: var(--shadow-3);
}
@media (min-width: 720px) {
  .scrim { place-items: center; }
  .sheet { border-radius: var(--r-xl); }
}
.sheet__grip { width: 40px; height: 4px; border-radius: 3px; background: var(--line-2); margin: 0 auto var(--sp-3); }
.sheet__head { display: flex; align-items: flex-start; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.sheet__head h3 { flex: 1; }

.toasts { position: fixed; left: 50%; transform: translateX(-50%); bottom: 90px; z-index: 95; display: flex; flex-direction: column; gap: var(--sp-2); width: min(420px, 92vw); }
.toast {
  background: var(--navy-2); color: var(--txt); border: 1px solid var(--line-2);
  border-radius: var(--r-md); padding: 11px var(--sp-4); font-size: var(--fs-sm);
  box-shadow: var(--shadow-2); display: flex; gap: var(--sp-2); align-items: center;
}
.toast--ok { border-color: rgba(63, 191, 160, .5); }
.toast--err { border-color: rgba(196, 85, 60, .55); }

/* ======================================================================
 * Empty, loading, error states
 * ==================================================================== */
.empty { text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--mut); }
.empty h4 { color: var(--txt); margin-bottom: 6px; }
.skel {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface-2) 37%, var(--surface) 63%);
  background-size: 400% 100%; border-radius: var(--r-sm); min-height: 14px;
}
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: shimmer 1.3s linear infinite; }
  @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
}
.spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--line-2); border-top-color: var(--gold); display: inline-block;
}
@media (prefers-reduced-motion: no-preference) {
  .spinner { animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
}

/* ======================================================================
 * Trust and custody notice — appears wherever money is shown
 * ==================================================================== */
.custody {
  display: flex; gap: var(--sp-2); align-items: flex-start;
  font-size: var(--fs-xs); color: var(--mut); line-height: 1.5;
  border-left: 2px solid var(--teal); padding: 2px 0 2px var(--sp-3);
}
.custody b { color: var(--teal-ink); font-weight: 500; }

/* ======================================================================
 * Proof panel — invariants, shown to anyone who asks
 * ==================================================================== */
.proof { display: flex; flex-direction: column; gap: 1px; }
.proof__row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px var(--sp-3); background: var(--surface); font-size: var(--fs-sm);
}
.proof__row b { font-family: var(--mno); font-size: 10px; letter-spacing: .1em; width: 42px; flex: 0 0 auto; color: var(--mut); }
.proof__row.is-ok::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--teal-lt); flex: 0 0 auto; }
.proof__row.is-bad::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); flex: 0 0 auto; }
.hashline { font-family: var(--mno); font-size: 9.6px; color: var(--mut); word-break: break-all; letter-spacing: .02em; }

/* ======================================================================
 * WhatsApp and USSD simulators
 * ==================================================================== */
.wa { background: #ECE1D6; color: #0F1C14; border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; }
.wa__top { background: #075E54; color: #fff; padding: 9px var(--sp-3); display: flex; align-items: center; gap: var(--sp-2); }
.wa__body {
  flex: 1; padding: var(--sp-3) 10px; display: flex; flex-direction: column; gap: var(--sp-2);
  background-image: radial-gradient(rgba(13, 43, 78, .05) 1px, transparent 1px); background-size: 14px 14px;
  overflow-y: auto; min-height: 260px;
}
.bub { max-width: 84%; padding: 7px 10px; border-radius: 9px; font-size: var(--fs-sm); line-height: 1.42; box-shadow: 0 1px 1px rgba(0, 0, 0, .13); }
.bub--in { background: #fff; align-self: flex-start; border-top-left-radius: 2px; }
.bub--out { background: #DCF8C6; align-self: flex-end; border-top-right-radius: 2px; }
.bub time { display: block; text-align: right; font-size: 9px; color: #4A5D4E; font-family: var(--mno); margin-top: 3px; }
.bub .sndr { display: block; font-size: 10.5px; font-weight: 700; margin-bottom: 2px; }
.wa__bar { background: #ECE1D6; padding: var(--sp-2) 10px; display: flex; gap: var(--sp-2); align-items: center; }

.ussd {
  background: #0B1410; color: #9BE8A9; font-family: var(--mno); font-size: var(--fs-sm);
  padding: var(--sp-4); line-height: 1.75; border-radius: var(--r-md); min-height: 280px;
  text-shadow: 0 0 8px rgba(56, 220, 120, .3); white-space: pre-wrap;
}
.ussd hr { border: 0; border-top: 1px dashed rgba(155, 232, 169, .3); margin: 10px 0; }

/* ======================================================================
 * Phone frame — used by the channel simulators and the design gallery
 * ==================================================================== */
.phone {
  width: 302px; border-radius: 38px; padding: 9px; flex: 0 0 auto;
  background: linear-gradient(160deg, #25384F, #0A1626 60%);
  box-shadow: var(--shadow-3), 0 0 0 1px rgba(244, 237, 223, .10), inset 0 1px 0 rgba(255, 255, 255, .10);
}
.phone__screen { border-radius: 30px; overflow: hidden; background: var(--navy); display: flex; flex-direction: column; min-height: 600px; }

/* ======================================================================
 * Rails — horizontal scrollers
 * ==================================================================== */
.rail { display: flex; gap: var(--sp-4); overflow-x: auto; padding: 4px 2px var(--sp-4); scroll-snap-type: x proximity; }
.rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* ======================================================================
 * Console shell — institution and operations
 * ==================================================================== */
.console { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
@media (min-width: 940px) {
  .console { grid-template-columns: 236px 1fr; }
  .console__nav { border-right: 1px solid var(--line); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.console__nav { background: var(--surface); }
.console__body { padding: var(--sp-4); min-width: 0; }
@media (min-width: 940px) { .console__body { padding: var(--sp-5) var(--sp-6); } }
.console__head { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; justify-content: space-between; margin-bottom: var(--sp-4); }

/* ======================================================================
 * Mobile shell — consumer and organiser
 * ==================================================================== */
.shell { display: flex; flex-direction: column; min-height: 100vh; max-width: 560px; margin-inline: auto; }
.shell__body { flex: 1; padding: var(--sp-4); }
@media (min-width: 640px) { .shell { border-inline: 1px solid var(--line); } }