/* Korevra Gbam — screen layer.
 * Layout that belongs to whole screens rather than to a single component.
 * Screen modules use these classes and the component classes. They do not add CSS.
 */

/* ---------- landing ---------- */
.hero { padding: var(--sp-7) 0 var(--sp-6); }
.hero h1 { max-width: 16ch; }
.hero h1 em { font-style: italic; color: var(--gold-ink); }
.hero__dek { max-width: 60ch; color: var(--mut); font-size: var(--fs-lg); margin-top: var(--sp-4); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.hero__cta .btn { width: auto; }
.metastrip { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.section { padding: var(--sp-7) 0; border-top: 1px solid var(--line); }
.section__head { max-width: 62ch; margin-bottom: var(--sp-5); }
.section__head p.sub { margin-top: var(--sp-3); font-size: var(--fs-lg); }
.mcard { border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-5); background: var(--surface); }
.mcard h3 { margin: var(--sp-2) 0; }
.mcard .n { font-family: var(--mno); font-size: 10px; letter-spacing: .2em; color: var(--gold-ink); }
.mcard--flag { border-color: rgba(196, 85, 60, .4); background: rgba(196, 85, 60, .09); }
.mcard--flag .n { color: var(--clay-ink); }

/* ---------- goal page ---------- */
.goal__hero { text-align: center; padding: var(--sp-3) 0 var(--sp-4); }
.goal__title { font-family: var(--dsp); font-size: clamp(22px, 5vw, 30px); font-weight: 600; line-height: 1.12; margin: 6px 0 10px; }
.goal__figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.goal__figs .panel { padding: 10px 8px; }
.goal__sticky {
  position: sticky; bottom: 0; z-index: 30; padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0));
  background: linear-gradient(to top, var(--bg) 62%, transparent);
}

/* ---------- contribute ---------- */
.amount__display { text-align: center; padding: var(--sp-4) 0; }
.amount__display b { font-family: var(--mno); font-size: clamp(30px, 9vw, 44px); font-weight: 700; letter-spacing: -.03em; display: block; }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.keypad button {
  min-height: 52px; border-radius: var(--r-md); border: 1px solid var(--line);
  font-family: var(--mno); font-size: var(--fs-xl); color: var(--txt); background: var(--surface);
}
.keypad button:hover { background: var(--surface-2); }
.rail-choice { display: flex; flex-direction: column; gap: var(--sp-2); }
.acct-box {
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-3); text-align: center;
}
.acct-box b { font-family: var(--mno); font-size: var(--fs-2xl); letter-spacing: .08em; display: block; margin-top: 4px; }

/* ---------- receipt ---------- */
.receipt-wrap { max-width: 380px; margin-inline: auto; }
.queue-line {
  font-family: var(--mno); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-dpr); text-align: center; margin-top: 8px;
}

/* ---------- roll call and ledger ---------- */
.rollcall__filters { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.ledger__totals { display: grid; grid-template-columns: 1fr; gap: var(--sp-2); }
@media (min-width: 520px) { .ledger__totals { grid-template-columns: repeat(3, 1fr); } }
.entry { display: grid; grid-template-columns: 34px 1fr auto; gap: var(--sp-2); align-items: center; padding: 9px var(--sp-3); background: var(--bg-2); }
[data-theme="dark"] .entry { background: rgba(8, 25, 46, .72); }
.entry__seq { font-family: var(--mno); font-size: 10px; color: var(--mut); }

/* ---------- organiser console ---------- */
.kpi-row { display: grid; gap: var(--sp-2); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 560px) { .kpi-row { grid-template-columns: repeat(4, 1fr); } }
.chase__row { display: flex; align-items: center; gap: var(--sp-2); padding: 10px var(--sp-3); background: var(--bg-2); }
[data-theme="dark"] .chase__row { background: rgba(8, 25, 46, .72); }
.chase__why { font-size: var(--fs-xs); color: var(--mut); margin-top: 2px; }
.score-pill {
  font-family: var(--mno); font-size: 10px; padding: 2px 7px; border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--mut);
}

/* ---------- share kit ---------- */
.sharekit { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
@media (min-width: 760px) { .sharekit { grid-template-columns: 320px 1fr; } }
.qr { background: var(--paper); padding: var(--sp-3); border-radius: var(--r-md); display: grid; place-items: center; }
.qr svg { display: block; }
.poster {
  background: var(--paper); color: var(--ink); border-radius: var(--r-md);
  padding: var(--sp-5); text-align: center; aspect-ratio: 3 / 4; display: flex;
  flex-direction: column; justify-content: space-between;
}

/* ---------- committee and payouts ---------- */
.sign-row { display: flex; align-items: center; gap: var(--sp-2); padding: 9px var(--sp-3); background: var(--bg-2); }
[data-theme="dark"] .sign-row { background: rgba(8, 25, 46, .72); }
.approval-meter { display: flex; gap: 4px; }
.approval-meter i { width: 22px; height: 5px; border-radius: 3px; background: var(--state-unpaid); }
.approval-meter i.on { background: var(--teal-lt); }

/* ---------- ops ---------- */
.queue-card { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--sp-3); background: var(--surface); }
.queue-card + .queue-card { margin-top: var(--sp-2); }
.reason-list { font-size: var(--fs-xs); color: var(--mut); margin-top: 6px; }
.reason-list li { position: relative; padding-left: 14px; margin-top: 3px; }
.reason-list li::before { content: "·"; position: absolute; left: 4px; }
.risk-meter { display: flex; align-items: center; gap: var(--sp-2); }
.risk-meter .bar { flex: 1; }

/* ---------- channels ---------- */
.sim { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; justify-items: center; }
@media (min-width: 860px) { .sim { grid-template-columns: 340px 1fr; justify-items: start; } }

/* ---------- ai ---------- */
.ai-answer {
  border-left: 2px solid var(--gold); padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  font-size: var(--fs-md); line-height: 1.55;
}
.ai-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.ai-chips button { font-size: var(--fs-xs); }
.ai-badge {
  display: inline-flex; align-items: center; gap: 5px; font-family: var(--mno);
  font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--teal-ink);
}

/* ---------- tiny helpers used across screens ---------- */
.gap-1 { --gap: var(--sp-1); } .gap-2 { --gap: var(--sp-2); }
.gap-3 { --gap: var(--sp-3); } .gap-4 { --gap: var(--sp-4); } .gap-5 { --gap: var(--sp-5); }
.mt-1 { margin-top: var(--sp-1); } .mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-5 { margin-top: var(--sp-5); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.w-auto { width: auto; }