/*
 * Mwangaza Hub Phase 1 e2e demo pages. Classes only, variables only — no inline
 * styles ever (CSP: style-src 'self'). Dynamic visuals are CSS animations or
 * classList toggles; JS updates text and classes only.
 */

.ic { width: 22px; height: 22px; flex: none; }

/* ---------- page shells ---------- */

*, *::before, *::after { box-sizing: border-box; }
.pg, .dw { overflow-x: clip; }

.pg {
  min-height: 100dvh;
  max-width: 430px;
  margin: 0 auto;
  background: var(--color-page);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
}
.pg__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-8);
  min-height: 0;
}
.pg__body--flush { padding-top: 0; }
.pg__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5) var(--space-6);
  background: var(--color-surface);
  box-shadow: 0 -12px 30px -20px rgb(14 39 48 / 45%);
}

.top {
  flex: none;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-4);
}
.top__side { flex: 1; display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.top__side--end { justify-content: flex-end; }
.top__title { font-size: var(--text-md); font-weight: 600; color: var(--color-muted); }
.back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  height: var(--target);
  margin-inline-start: calc(var(--space-2) * -1);
  border-radius: var(--radius-md);
  color: var(--color-text);
  text-decoration: none;
}
.back svg { width: 24px; height: 24px; }

.brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; font-size: var(--text-base); color: var(--color-text); text-decoration: none; white-space: nowrap; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--brand-primary);
  display: inline-flex; align-items: center; justify-content: center;
}
.brand__dot { width: 11px; height: 11px; border-radius: var(--radius-pill); background: var(--brand-accent); box-shadow: 0 0 0 4px rgb(242 181 68 / 22%); }
.brand__soft { font-weight: 400; color: var(--color-muted); }

.progress { display: flex; gap: 5px; }
.progress__seg { width: 22px; height: 4px; border-radius: 2px; background: var(--color-line); }
.progress__seg--on { background: var(--brand-primary); }

/* tab bar (phone) */
.tabbar {
  flex: none;
  min-height: 72px;
  display: flex;
  padding: var(--space-2) var(--space-2) var(--space-4);
  background: var(--color-surface);
  box-shadow: 0 -1px 0 var(--color-line);
}
.tabbar__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding-top: 6px;
  color: var(--color-muted);
  font-size: 11px; font-weight: 600;
  text-decoration: none;
}
.tabbar__item--on { color: var(--brand-primary); font-weight: 700; }
.tabbar__item svg { width: 23px; height: 23px; }
.tabbar__send {
  flex: 1; display: flex; justify-content: center;
}
.tabbar__fab {
  width: 54px; height: 54px; margin-top: -10px;
  border-radius: 18px;
  background: var(--brand-primary); color: var(--color-on-primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -10px rgb(19 59 75 / 80%);
  text-decoration: none;
}
.tabbar__fab svg { width: 24px; height: 24px; }

/* ---------- type ---------- */

.t-title { margin: 0; font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; }
.t-title--xl { font-size: 2rem; letter-spacing: -0.025em; }
.t-lead { margin: 0; font-size: var(--text-base); line-height: 1.5; color: var(--color-muted); }
.t-label { margin: 0; font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.t-big { margin: 0; font-size: 3.25rem; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--color-muted); }
.fine { font-size: var(--text-sm); color: var(--color-muted); margin: 0; }
.t-ok { color: var(--status-delivered); font-weight: 600; }
.t-bad { color: var(--status-failed); font-weight: 600; }
.t-wait { color: var(--status-held); font-weight: 600; }
.t-center { text-align: center; }
.strike { text-decoration: line-through; color: var(--color-muted); font-weight: 400; }

/* ---------- generic blocks ---------- */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  display: flex; flex-direction: column; gap: var(--space-3);
  box-shadow: var(--shadow-card);
}
.card--flat { box-shadow: none; }
.card--pad { padding: var(--space-5); }
.card--ink { background: var(--color-inverse); color: var(--color-on-inverse); }
.card--ink .t-label, .card--ink .muted { color: var(--color-on-inverse-soft); }
.card--rows { padding: var(--space-1) 0; gap: 0; }
.card--tint { background: var(--color-page); box-shadow: none; }

.rowline {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  box-shadow: inset 0 -1px 0 var(--color-line);
}
.rowline:last-child { box-shadow: none; }
a.rowline { color: inherit; text-decoration: none; }
a.rowline:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.rowline__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rowline__title { font-size: var(--text-base); font-weight: 600; }
.rowline__sub { font-size: var(--text-sm); color: var(--color-muted); }
.rowline__val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rowline__act { font-size: var(--text-md); font-weight: 600; color: var(--brand-primary); text-decoration: none; white-space: nowrap; }

.kv { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: var(--space-3) 0; }
.kvlist .kv { box-shadow: inset 0 -1px 0 var(--color-line); }
.kvlist .kv:last-child { box-shadow: none; }
.kv__k { color: var(--color-muted); }
.kv__v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.kv__v .fine { display: inline; }

.dotmark { width: 10px; height: 10px; border-radius: var(--radius-pill); flex: none; }
.dotmark--ok { background: var(--status-delivered); }
.dotmark--muted { background: var(--color-muted); }
.dotmark--bad { background: var(--status-failed); }
.dotmark--wait { background: #b8892b; }

/* checklist steps */
.steps { display: flex; flex-direction: column; }
.step { display: flex; align-items: center; gap: 14px; padding: 13px 0; }
.step__dot {
  width: 26px; height: 26px; border-radius: var(--radius-pill); flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-line); color: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--color-line);
}
.step__dot svg { width: 14px; height: 14px; opacity: 0; }
.step--done .step__dot { background: var(--status-delivered); box-shadow: none; }
.step--done .step__dot svg { opacity: 1; }
.step--now .step__dot { background: var(--brand-primary); box-shadow: none; animation: mzPulse 1s ease-in-out infinite; }
.step__label { flex: 1; font-size: var(--text-base); }
.step--done .step__label { text-decoration: line-through; color: var(--color-muted); }
.step--now .step__label { font-weight: 600; }
.step__time { font-size: var(--text-md); color: var(--color-muted); font-variant-numeric: tabular-nums; }

/* CSS-animated variant: steps light up in order, no JS */
.steps--play .step__dot svg { opacity: 0; }
.steps--play .step:nth-child(1) .step__dot, .steps--play .step:nth-child(1) .step__dot svg { animation-delay: 0.2s; }
.steps--play .step:nth-child(2) .step__dot, .steps--play .step:nth-child(2) .step__dot svg { animation-delay: 1.1s; }
.steps--play .step:nth-child(3) .step__dot, .steps--play .step:nth-child(3) .step__dot svg { animation-delay: 2s; }
.steps--play .step:nth-child(4) .step__dot, .steps--play .step:nth-child(4) .step__dot svg { animation-delay: 2.9s; }
.steps--play .step__dot { animation: mzStepDot 3.9s forwards; }
.steps--play .step__dot svg { animation: mzStepCheck 3.9s forwards; }
.steps--play .step__time { opacity: 0; animation: mzShow 0.4s forwards; }
.steps--play .step:nth-child(1) .step__time { animation-delay: 0.7s; }
.steps--play .step:nth-child(2) .step__time { animation-delay: 1.6s; }
.steps--play .step:nth-child(3) .step__time { animation-delay: 2.5s; }
.steps--play .step:nth-child(4) .step__time { animation-delay: 3.4s; }
@keyframes mzStepDot { 0%, 15% { background: var(--color-line); box-shadow: none; } 30%, 100% { background: var(--status-delivered); box-shadow: none; } }
@keyframes mzStepCheck { 0%, 20% { opacity: 0; } 35%, 100% { opacity: 1; } }
@keyframes mzShow { to { opacity: 1; } }

/* ---------- inputs ---------- */

.phonepill {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--color-surface); border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: 0 0 0 2px var(--brand-primary);
}
.phonepill__cc {
  height: 52px; padding: 0 var(--space-3); border-radius: var(--radius-md);
  background: var(--color-page); color: var(--color-text-soft);
  display: flex; align-items: center; font-weight: 600;
}
.phonepill input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: 600 1.375rem var(--font-sans); font-variant-numeric: tabular-nums;
  color: var(--color-text); min-height: 52px;
}
.caret { width: 2px; height: 26px; background: var(--brand-primary); animation: mzPulse 1s steps(1) infinite; }
@keyframes mzPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

.otp { display: flex; gap: 9px; }
.otp__cell {
  flex: 1; height: 62px; border-radius: 14px; background: var(--color-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.otp__cell--focus { box-shadow: 0 0 0 2px var(--brand-primary); }

.fieldchip { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: var(--radius-pill); background: var(--color-page); color: var(--color-muted); border: 0; }
.mfield { background: var(--status-sent-bg); color: var(--status-sent); border-radius: 6px; padding: 1px 6px; font-weight: 600; white-space: nowrap; }
.mfield--warn { background: var(--status-held-bg); color: var(--status-held); }

/* message textarea */
.msgarea {
  width: 100%; min-height: 120px; border: 0; resize: vertical;
  font: var(--text-base) / 1.5 var(--font-sans); color: var(--color-text);
  background: transparent; outline: none;
}

/* ---------- notices ---------- */

.note {
  display: flex; align-items: center; gap: var(--space-3);
  border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4);
}
.note__main { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.note__title { font-size: var(--text-md); font-weight: 700; }
.note__sub { font-size: var(--text-md); }
.note--warn { background: var(--status-held-bg); }
.note--warn .note__title { color: #5e3e08; }
.note--warn .note__sub { color: var(--status-held); }
.note--bad { background: var(--status-failed-bg); }
.note--bad .note__title { color: var(--status-failed); }
.note--bad .note__sub { color: #7a2a20; }
.note--ok { background: var(--status-delivered-bg); }
.note--ok .note__title { color: var(--status-delivered); }
.note--info { background: var(--status-sent-bg); }
.note--info .note__title { color: var(--status-sent); }
.note__btn {
  flex: none; min-height: 40px; padding: 0 var(--space-4);
  border: 0; border-radius: var(--radius-md);
  background: var(--color-inverse); color: var(--color-on-inverse);
  font: 700 var(--text-md) var(--font-sans); cursor: pointer;
  display: inline-flex; align-items: center; text-decoration: none;
}

/* ---------- buttons ---------- */

.btn--accent { background: var(--brand-accent); color: var(--brand-on-accent); }
.btn--ghost { background: transparent; color: var(--color-muted); min-height: var(--target); }
.btn--sm { min-height: 40px; padding: 0 var(--space-4); font-size: var(--text-md); border-radius: var(--radius-md); }
.btn--danger { background: var(--status-failed); color: #fff; }
.btn--white { background: var(--color-surface); color: var(--color-text); border-color: var(--color-line); }

/* hold-to-confirm: money and sends need a hold, not a tap */
.hold { position: relative; overflow: hidden; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.hold__fill {
  position: absolute; inset: 0; width: 0;
  background: rgb(255 255 255 / 28%);
  pointer-events: none;
}
.hold.is-holding .hold__fill { animation: mzHold 0.85s linear forwards; }
.hold.is-held .hold__fill { width: 100%; }
.hold__label { position: relative; z-index: 1; }
@keyframes mzHold { to { width: 100%; } }
.hold-hint { font-size: var(--text-sm); color: var(--color-muted); text-align: center; margin: 0; }

/* ---------- sheets ---------- */

.sheetwrap { position: relative; flex: 1; display: flex; flex-direction: column; }
.sheetwrap__behind { flex: 1; opacity: 0.45; padding: var(--space-4) var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); min-height: 180px; }
.sheetwrap__scrim { position: absolute; inset: 0; background: rgb(14 39 48 / 42%); }
.sheet {
  position: relative;
  margin-top: auto;
  background: var(--color-surface);
  border-radius: 28px 28px 0 0;
  padding: var(--space-3) var(--space-5) var(--space-7, 30px);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.sheet__grab { width: 40px; height: 5px; border-radius: var(--radius-pill); background: var(--color-line); margin: 0 auto var(--space-2); }
.sheet__title { margin: 0; font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.02em; }

.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); }
.amt {
  min-height: 50px; border-radius: 14px; border: 0; cursor: pointer;
  background: var(--color-page); color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  font: 600 var(--text-base) var(--font-sans); font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.amt--on { background: var(--brand-primary); color: var(--color-on-primary); font-weight: 700; }

/* ---------- column mapper ---------- */

.map { background: var(--color-surface); border-radius: 18px; overflow: hidden; }
.map__head, .map__row { display: grid; grid-template-columns: 1.25fr 1fr 0.8fr; }
.map__head { padding: var(--space-3) var(--space-3) var(--space-2); background: var(--color-page); }
.map__col { display: flex; flex-direction: column; gap: 6px; padding: 0 var(--space-1); min-width: 0; }
.map__name { font-size: 11.5px; font-weight: 600; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.map__row { padding: 11px var(--space-4); font-size: var(--text-md); font-variant-numeric: tabular-nums; box-shadow: inset 0 -1px 0 var(--color-line); }
.map__row:last-child { box-shadow: none; }
.map__row .bad { color: var(--status-failed); }
.maptag {
  font-size: 13px; font-weight: 700; border-radius: 8px; padding: 5px 8px;
  display: inline-block; border: 0; cursor: pointer;
  background: var(--status-sent-bg); color: var(--status-sent);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.maptag--ok { background: var(--status-delivered-bg); color: var(--status-delivered); }
.maptag--skip { background: var(--status-queued-bg); color: var(--status-queued); }
select.mapsel {
  font-size: 13px; font-weight: 700; border-radius: 8px; padding: 5px 4px;
  border: 0; background: var(--status-sent-bg); color: var(--status-sent);
  max-width: 100%; min-height: 30px;
}
select.mapsel.is-ok { background: var(--status-delivered-bg); color: var(--status-delivered); }
select.mapsel.is-skip { background: var(--status-queued-bg); color: var(--status-queued); }

/* ---------- progress bars / live ---------- */

.bar { height: 10px; border-radius: var(--radius-pill); background: var(--color-line); overflow: hidden; display: flex; }
.bar__seg { height: 100%; }
.bar__seg--ok { background: var(--status-delivered); }
.bar__seg--bad { background: var(--status-failed); }
.bar__seg--brand { background: var(--brand-primary); }
.anim-fill { width: 0; animation: mzGrow 1.2s ease-out forwards; animation-delay: 0.3s; }
.anim-fill--81 { --fill-to: 81%; }
.anim-fill--2 { --fill-to: 2%; }
.anim-fill--64 { --fill-to: 64%; }
.anim-fill--30 { --fill-to: 30%; }
.anim-fill--6 { --fill-to: 6%; }
.anim-fill--41 { --fill-to: 41%; }
@keyframes mzGrow { to { width: var(--fill-to, 50%); } }
.bar--thin { height: 6px; }

.live { display: inline-flex; align-items: center; gap: 7px; color: var(--status-delivered); font-weight: 700; font-size: var(--text-md); }
.live__dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--status-delivered); animation: mzPulse 1.4s ease-in-out infinite; }

.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); }
.statgrid--3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: 3px; box-shadow: var(--shadow-card); }
.stat__k { font-size: var(--text-sm); color: var(--color-muted); font-weight: 700; }
.stat__k--ok { color: var(--status-delivered); }
.stat__k--bad { color: var(--status-failed); }
.stat__v { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.stat__v--xl { font-size: 2.875rem; letter-spacing: -0.035em; }
.ministat { display: flex; flex-direction: column; gap: 2px; }
.ministat__v { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ministat__v--bad { color: var(--status-failed); }
.ministat__v--ok { color: var(--status-delivered); }

/* ---------- bubbles ---------- */

.bubble {
  align-self: flex-start; max-width: 300px;
  background: var(--color-surface);
  border-radius: 20px 20px 20px 6px;
  padding: 14px 16px; box-shadow: var(--shadow-card);
  font-size: var(--text-base); line-height: 1.45;
}
.bubble__from { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.04em; }
.bubble--out { align-self: flex-end; background: var(--brand-primary); color: var(--color-on-primary); border-radius: 18px 18px 6px 18px; }

/* ---------- guide: the inline non-verbose guide ---------- */

.guide {
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  padding: 0 var(--space-4);
}
.guide summary {
  min-height: var(--target);
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--text-md); font-weight: 600; color: var(--color-muted);
  cursor: pointer; list-style: none;
}
.guide summary::before {
  content: "?";
  width: 20px; height: 20px; border-radius: var(--radius-pill); flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--status-sent-bg); color: var(--status-sent);
  font-size: var(--text-sm); font-weight: 700;
}
.guide summary::-webkit-details-marker { display: none; }
.guide__body { padding: 0 0 var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-md); color: var(--color-text-soft); }
.guide__body p { margin: 0; }
.guide__links { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: var(--space-1); }
.guide__links a { font-size: var(--text-md); font-weight: 600; color: var(--brand-primary); }

/* path chips: the happy / wrong / unsure lanes of a flow */
.paths { display: flex; flex-direction: column; gap: var(--space-2); }
.paths__label { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.pathlink {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-3); border-radius: 13px;
  background: var(--color-surface); text-decoration: none; color: var(--color-text);
  font-size: var(--text-md);
}
.pathlink__dot { width: 10px; height: 10px; border-radius: var(--radius-pill); flex: none; }
.pathlink__dot--ok { background: var(--status-delivered); }
.pathlink__dot--bad { background: var(--status-failed); }
.pathlink__dot--wait { background: #b8892b; }
.pathlink__name { flex: 1; font-weight: 600; }
.pathlink__from { font-size: var(--text-sm); color: var(--color-muted); }

/* ---------- desktop shells ---------- */

.desk { min-height: 100dvh; display: flex; background: var(--color-page); color: var(--color-text); }
.side {
  width: 232px; flex: none; background: var(--color-surface);
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-5) var(--space-3);
  box-shadow: 1px 0 0 var(--color-line);
}
.side__brand { display: flex; align-items: center; gap: var(--space-2); padding: 4px 8px var(--space-5); }
.side__avatar {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: #2e6b3f; color: #fff; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.side__name { font-size: var(--text-md); font-weight: 700; line-height: 1.25; }
.side__sub { font-size: var(--text-xs); color: var(--color-muted); }
.sidelink {
  min-height: 40px; padding: 0 var(--space-3); border-radius: 11px;
  display: flex; align-items: center;
  font-size: var(--text-md); color: var(--color-muted); text-decoration: none;
}
.sidelink--on { font-weight: 700; background: var(--status-sent-bg); color: var(--status-sent); }
.side__wallet { margin-top: auto; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-6) var(--space-7, 30px); }
.main--row { flex-direction: row; }
.main__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pagehead { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.pagehead__actions { display: flex; gap: var(--space-2); flex: none; }

.drawer {
  width: 380px; flex: none; background: var(--color-surface);
  display: flex; flex-direction: column;
  box-shadow: -1px 0 0 var(--color-line);
}
.drawer__head {
  min-height: 64px; flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-5); box-shadow: inset 0 -1px 0 var(--color-line);
}
.drawer__body { flex: 1; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); min-height: 0; }
.drawer__foot { flex: none; padding: var(--space-3) var(--space-4) var(--space-4); box-shadow: inset 0 1px 0 var(--color-line); display: flex; flex-direction: column; gap: var(--space-2); }
.drawer__input { min-height: 46px; border-radius: 13px; background: var(--color-page); display: flex; align-items: center; padding: 0 var(--space-3); font-size: var(--text-md); color: var(--color-muted); }
.ask__q { align-self: flex-end; max-width: 260px; background: var(--brand-primary); color: #fff; border-radius: 18px 18px 6px 18px; padding: 11px 15px; font-size: var(--text-md); }
.ask__a { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-md); line-height: 1.55; }
.ask__chip { min-height: 44px; padding: 0 var(--space-3); border-radius: var(--radius-md); background: var(--status-sent-bg); color: var(--status-sent); font-size: var(--text-md); font-weight: 600; display: flex; align-items: center; text-decoration: none; }

/* control room */
.ctl { min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-page); color: var(--color-text); }
.ctlbar {
  min-height: 58px; flex: none;
  background: var(--color-inverse); color: var(--color-on-inverse);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-5); gap: var(--space-4);
}
.ctlbar__nav { display: flex; gap: 4px; }
.ctlbar__link { font-size: var(--text-md); color: var(--color-on-inverse-soft); text-decoration: none; padding: 7px 13px; border-radius: 9px; }
.ctlbar__link--on { font-weight: 700; background: rgb(255 255 255 / 12%); color: var(--color-on-inverse); }
.ctlbar__who { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-on-inverse-soft); }
.ctlbody { flex: 1; display: flex; min-height: 0; }
.ctlmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6) var(--space-7, 28px); }
.ctlpanel { width: 340px; flex: none; background: var(--color-surface); padding: var(--space-6) var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); box-shadow: -1px 0 0 var(--color-line); }
.ctlqueue { width: 320px; flex: none; background: var(--color-surface); display: flex; flex-direction: column; box-shadow: 1px 0 0 var(--color-line); overflow: auto; }
.qitem { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); box-shadow: inset 0 -1px 0 var(--color-line); text-decoration: none; color: var(--color-text); }
.qitem--on { background: var(--color-page); box-shadow: inset 3px 0 0 var(--brand-primary); }

/* doc / placeholder surface */
.docpane {
  flex: 1; border-radius: var(--radius-lg);
  background: repeating-linear-gradient(135deg, var(--color-line), var(--color-line) 8px, var(--color-page) 8px, var(--color-page) 16px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 220px;
}
.docpane__name { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-muted); }
.docpane__note { font-size: var(--text-xs); color: var(--color-muted); }

.checks { display: flex; flex-direction: column; gap: var(--space-2); }
.chk { background: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-3) var(--space-3); display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-md); box-shadow: var(--shadow-card); }
.chk__box { width: 20px; height: 20px; border-radius: 6px; flex: none; background: var(--status-delivered); color: #fff; display: flex; align-items: center; justify-content: center; }
.chk__box svg { width: 12px; height: 12px; }
.chk__box--wait { background: var(--status-held); }

/* code blocks */
.codeblock {
  background: var(--color-inverse); color: var(--color-on-inverse);
  border-radius: var(--radius-lg); padding: var(--space-5) var(--space-5);
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.75;
  overflow-x: auto; white-space: pre;
}
.codeblock--resp { background: #16323d; }
.codeblock .ok { color: #6fcfae; }
.codetabs { display: flex; gap: 6px; }
.codetabs__t { font-size: var(--text-sm); font-weight: 700; padding: 5px 11px; border-radius: 8px; color: rgb(255 255 255 / 50%); }
.codetabs__t--on { background: rgb(255 255 255 / 12%); color: #fff; }

/* toggle */
.toggle { width: 44px; height: 26px; border-radius: var(--radius-pill); background: var(--color-line); padding: 3px; display: inline-flex; }
.toggle__nub { width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--color-surface); }
.toggle--on { background: var(--status-delivered); justify-content: flex-end; }

/* table grids */
.gtable { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.gtable__head { padding: var(--space-3) var(--space-5) var(--space-2); background: var(--color-page); font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.gtable__row { padding: var(--space-3) var(--space-5); font-size: var(--text-md); box-shadow: inset 0 -1px 0 var(--color-line); align-items: center; }
.gtable__row:last-child { box-shadow: none; }
.grid-cols-results { display: grid; grid-template-columns: 1.2fr 1.2fr 1fr 1.6fr 0.7fr; }
.grid-cols-pay { display: grid; grid-template-columns: 1.1fr 0.9fr 1fr 1.6fr 0.8fr; }
.grid-cols-hook { display: grid; grid-template-columns: 0.7fr 1.6fr 1fr 0.6fr; }
.grid-cols-audit { display: grid; grid-template-columns: 0.9fr 1.4fr 1.6fr 1fr; }
.grid-cols-acct { display: grid; grid-template-columns: 1.6fr 1fr 1fr 0.8fr; }

/* ---------- flow index / docs ---------- */

.home { max-width: 980px; margin: 0 auto; padding: var(--space-8) var(--space-5) var(--space-12); display: flex; flex-direction: column; gap: var(--space-6); }
.flowgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.flowcard { background: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); box-shadow: var(--shadow-card); text-decoration: none; color: var(--color-text); }
.flowcard__num { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; color: var(--color-muted); }
.flowcard__title { font-size: var(--text-lg); font-weight: 700; }
.flowcard__who { font-size: var(--text-md); color: var(--color-muted); }

.docs { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--space-5) var(--space-12); display: flex; flex-direction: column; gap: var(--space-4); }
.docs details { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 0 var(--space-5); }
.docs details > summary {
  min-height: 56px; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-base); font-weight: 700; cursor: pointer; list-style: none;
}
.docs details > summary::-webkit-details-marker { display: none; }
.docs details > summary .chev { transition: transform 0.15s; color: var(--color-muted); flex: none; }
.docs details[open] > summary .chev { transform: rotate(90deg); }
.docs__body { padding: 0 0 var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-md); color: var(--color-text-soft); }
.docs__body p { margin: 0; }
.demo { border-radius: var(--radius-md); background: var(--color-page); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.demo__label { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }

/* avatar, misc */
.avatar { width: 34px; height: 34px; border-radius: var(--radius-pill); background: #3e5d68; color: #fff; font-size: var(--text-xs); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: var(--target); height: var(--target); border-radius: var(--radius-md); color: var(--color-muted); text-decoration: none; }
.iconbtn svg { width: 22px; height: 22px; }
.filecard { display: flex; align-items: center; gap: var(--space-3); }
.fileicon { width: 40px; height: 40px; border-radius: 11px; background: var(--status-delivered-bg); color: var(--status-delivered); display: flex; align-items: center; justify-content: center; flex: none; }
.fileicon svg { width: 20px; height: 20px; }
.keybadge { font-size: var(--text-xs); font-weight: 700; padding: 4px 9px; border-radius: 7px; }
.keybadge--live { background: var(--status-delivered-bg); color: var(--status-delivered); }
.keybadge--test { background: var(--status-held-bg); color: var(--status-held); }
.mono { font-family: var(--font-mono); font-size: var(--text-md); }
.spread { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.vlist { display: flex; flex-direction: column; gap: var(--space-3); }
.flex1 { flex: 1; min-width: 0; }
.tag { display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: 600; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-line); color: var(--color-muted); }
.tag.t-ok { background: var(--status-delivered-bg); color: var(--status-delivered); }
.tag.t-bad { background: var(--status-failed-bg); color: var(--status-failed); }
.tag.t-wait { background: var(--status-held-bg); color: var(--status-held); }
.hlist { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pillnav { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.pillnav a { font-size: var(--text-md); font-weight: 600; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--color-surface); color: var(--brand-primary); text-decoration: none; box-shadow: var(--shadow-card); }

/* lockscreen (notification-driven paths) */
.lock { max-width: 430px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: var(--space-12) var(--space-6); background: var(--color-inverse); color: var(--color-on-inverse); }
.lock__clock { font-size: 4.5rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.lock__date { font-size: var(--text-lg); color: var(--color-on-inverse-soft); }
.notif { width: 100%; background: rgb(255 255 255 / 10%); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; gap: var(--space-3); text-decoration: none; color: var(--color-on-inverse); }
.notif__body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.notif__title { font-weight: 700; font-size: var(--text-md); }
.notif__text { font-size: var(--text-md); color: var(--color-on-inverse-soft); }
.notif__time { font-size: var(--text-sm); color: var(--color-on-inverse-soft); }

/* desk / laptop layout */
.dw { min-height: 100dvh; display: flex; flex-direction: column; background: var(--color-bg); }
.dw__top { display: flex; align-items: center; gap: var(--space-4); padding: 10px var(--space-5); background: var(--color-surface); box-shadow: var(--shadow-card); position: sticky; top: 0; z-index: 5; }
.dw__body { flex: 1; display: flex; gap: var(--space-4); padding: var(--space-4) var(--space-5); max-width: 1180px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.dw__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.dw__ask { width: 340px; flex: none; }
@media (max-width: 900px) {
  .dw__body { flex-direction: column; padding: var(--space-3); }
  .dw__ask { width: auto; }
  .dw__top { flex-wrap: wrap; padding: 10px var(--space-3); }
}

/* Ask Mwangaza panel */
.ask { background: var(--color-surface); border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: flex; flex-direction: column; max-height: 70vh; }
.ask__head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-weight: 700; color: var(--brand-primary); border-bottom: 1px solid var(--color-line); }
.ask__head .ic { width: 18px; height: 18px; }
.ask__msgs { flex: 1; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); }
.ask__input { border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 10px 16px; margin: var(--space-3); font: inherit; }
.ask__input:focus-visible { outline: 2px solid var(--color-focus); }

/* code tile + guide head */
.codetile { font-family: var(--font-mono); font-size: var(--text-sm); background: var(--brand-ink); color: #d7efe9; padding: var(--space-4); border-radius: var(--radius-card); overflow-x: auto; margin: 0; white-space: pre; }
.guide__head { display: flex; align-items: center; gap: var(--space-2); color: var(--brand-primary); }
.guide__head .ic { width: 18px; height: 18px; }

/* ---------- taste pass: density, hairlines, restraint ---------- */
/* e2e.css loads after tokens.css, so these root overrides affect the e2e
   site only — the component gallery and tests keep the starter scale. */
:root {
  --text-base: 0.9375rem;   /* 15 — was 17 */
  --text-lg: 1.0625rem;     /* 17 — was 20 */
  --text-xl: 1.1875rem;     /* 19 — was 24 */
  --text-2xl: 1.4375rem;    /* 23 */
  --text-md: 0.8125rem;     /* 13 */
  --text-sm: 0.75rem;       /* 12 */
  --text-xs: 0.6875rem;     /* 11 */
  --color-page: #f2f4f5;
  --color-surface: #ffffff;
  --color-line: #e2e8ea;
  --color-text: #14262d;
  --color-text-soft: #3c525b;
  --color-muted: #647880;
  --radius-card: 12px;
  --radius-lg: 12px;
  --radius-md: 9px;
  --shadow-card: 0 1px 2px rgb(18 43 52 / 5%);
}
.t-title { font-size: var(--text-2xl); }
.t-title--xl { font-size: 1.625rem; }
.t-big { font-size: 2rem; letter-spacing: -0.03em; }
.card { border: 1px solid var(--color-line); }
.btn { border-radius: 9px; }
.note { border-radius: 10px; }
.guide, .pathlink { border-radius: 10px; }

/* desk + control room: dense, quiet, tabular */
.desk, .ctl {
  font-size: 0.8125rem;
  --text-base: 0.8125rem;
  --text-md: 0.75rem;
  --text-sm: 0.6875rem;
  --text-xs: 0.625rem;
  --text-lg: 0.9375rem;
  --text-xl: 1.0625rem;
  --text-2xl: 1.3125rem;
  --space-3: 10px; --space-4: 14px; --space-5: 18px; --space-6: 22px; --space-7: 28px;
}
.desk .btn, .ctl .btn { min-height: 34px; padding: 0 13px; font-size: 0.8125rem; font-weight: 600; border-radius: 8px; }
.desk .btn--sm, .ctl .btn--sm { min-height: 28px; padding: 0 10px; font-size: 0.75rem; }
.side { width: 208px; padding: var(--space-4) var(--space-3); }
.sidelink { font-size: 0.8125rem; min-height: 34px; padding: 0 10px; border-radius: 8px; }
.side__brand { padding: 0 10px var(--space-4); }
.side__name { font-size: 0.8125rem; }
.side__sub { font-size: 0.625rem; }
.side__avatar { width: 30px; height: 30px; border-radius: 8px; font-size: 0.75rem; }
.side__wallet { padding: var(--space-3); }
.side__wallet .stat__v { font-size: var(--text-lg); }
.side__wallet .btn { width: 100%; margin-top: 2px; }
.main { gap: var(--space-4); }
.main__col { gap: var(--space-3); }
.pagehead .t-title { font-size: 1.3125rem; }
.pagehead { align-items: center; }
.stat { padding: var(--space-3) var(--space-4); border-radius: 10px; }
.stat__v { font-size: var(--text-xl); }
.gtable__row { padding: var(--space-2) var(--space-5); }
.gtable__head { padding: var(--space-2) var(--space-5) var(--space-1); }
.ctlbar { min-height: 52px; padding: 0 var(--space-4); }
.ctlbar .brand__soft { font-size: 0.875rem; }
.ctlmain { gap: var(--space-3); padding: var(--space-5) var(--space-6); }
.ctlqueue { width: 280px; }
.qitem { padding: var(--space-2) var(--space-4); }
.drawer { width: 340px; }
.drawer__head { min-height: 52px; padding: 0 var(--space-4); }
.drawer__body { padding: var(--space-4); }
.codeblock { padding: var(--space-4); font-size: 0.75rem; }
.keybadge { font-size: 0.625rem; }
.mono { font-size: 0.75rem; }
.avatar { width: 28px; height: 28px; }
.desk .chip, .ctl .chip { font-size: 0.6875rem; padding: 2px 8px; }
.t-ok svg, .chk__box svg { vertical-align: -2px; }

/* filter tabs row (progressive disclosure on tables) */
.tabs { display: flex; gap: 4px; align-items: center; }
.tab { font-size: 0.75rem; font-weight: 600; color: var(--color-muted); padding: 6px 12px; border-radius: var(--radius-pill); text-decoration: none; }
.tab--on { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-line); }
.tab__n { font-variant-numeric: tabular-nums; color: var(--color-muted); margin-left: 4px; }

/* segmented row header: table title + actions */
.thead-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 2px; }
.thead-bar__t { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-muted); }

/* field-look rows inside settings cards */
.setrow { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; }
.setrow + .setrow { box-shadow: inset 0 1px 0 var(--color-line); }
.setrow__k { flex: 1; min-width: 0; }
.setrow__t { font-size: 0.8125rem; font-weight: 600; }
.setrow__s { font-size: 0.6875rem; color: var(--color-muted); }
.setrow__v { font-size: 0.8125rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; }
.setedit { font-size: 0.75rem; font-weight: 600; color: var(--brand-primary); text-decoration: none; }

/* danger zone */
.danger { border: 1px solid #f0d4d4; background: #fdf6f6; }
.danger .rowline__title { color: var(--status-failed); }

/* mini search field */
.search { display: flex; align-items: center; gap: 8px; background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 0.75rem; color: var(--color-muted); min-width: 200px; }
.search input { border: 0; background: none; font: inherit; color: var(--color-text); outline: none; flex: 1; }

/* icon+label quiet link */
.qlink { display: inline-flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 600; color: var(--brand-primary); text-decoration: none; }
.qlink .ic { width: 14px; height: 14px; }

/* grid column presets for the new tables */
.grid-cols-camp { display: grid; grid-template-columns: 1.8fr 1fr 1.2fr 1fr 0.9fr; }
.grid-cols-members { display: grid; grid-template-columns: 1.4fr 1.4fr 1fr 0.7fr; }
.grid-cols-tmpl { display: grid; grid-template-columns: 1.4fr 2.4fr 0.8fr 0.6fr; }
.grid-cols-opts { display: grid; grid-template-columns: 1.3fr 1.4fr 0.8fr 1fr 0.6fr; }
.grid-cols-senders { display: grid; grid-template-columns: 1.2fr 1.6fr 1fr 0.8fr 0.7fr; }
.grid-cols-invoices { display: grid; grid-template-columns: 0.8fr 1.2fr 1fr 0.8fr 0.7fr; }
.grid-cols-routes { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 0.8fr; }
@media (max-width: 900px) {
  .desk { flex-direction: column; }
  .side { width: auto; flex-direction: row; flex-wrap: wrap; gap: 4px; }
  .side__wallet { display: none; }
  .ctlbody { flex-direction: column; }
  .ctlqueue { width: auto; flex-direction: row; overflow-x: auto; }
  .ctlpanel { width: auto; }
  .drawer { width: auto; border-top: 1px solid var(--color-line); }
}