/* PerkSwap — shared mobile-first styles for the MVP app screens.
   Brand tokens extracted from public/index.html so the app matches the
   marketing landing. Functional UI to be restyled later by a designer. */

:root {
    --brand:#0bb783; --brand-d:#067050; --brand-btn:#0a7a58; --ink:#0f1912; --muted:#5b6b62;
    --bg:#f6faf8; --card:#fff; --line:#e2ece7;
    --danger:#c0392b; --danger-bg:#fdecea; --ok:#0a7f5c; --ok-bg:#e7f7f0;
    --warn:#8a6d00; --warn-bg:#fdf6e3;
}
* { box-sizing:border-box; }
body {
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;
    line-height:1.5;
}
.wrap {
    max-width:480px; margin:0 auto;
    padding:20px 18px calc(28px + env(safe-area-inset-bottom));
}

/* Header */
.top {
    display:flex; align-items:center; gap:10px;
    padding-top:env(safe-area-inset-top);
    margin-bottom:6px;
}
.logo {
    width:48px; height:48px; border-radius:12px;
    background:linear-gradient(135deg,var(--brand-btn),var(--brand-d));
    display:grid; place-items:center; color:#fff; font-weight:800; font-size:17px;
    text-decoration:none;
}
.top strong { font-size:1.05rem; }
.top .spacer { flex:1; }
.top a.navlink { color:var(--brand-d); font-size:.9rem; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; min-height:48px; padding:0 8px; }

h1 { font-size:1.4rem; margin:16px 0 4px; letter-spacing:-.02em; }
h2 { font-size:1.05rem; margin:0 0 10px; letter-spacing:-.01em; }
.sub { color:var(--muted); margin:0 0 18px; }
.muted { color:var(--muted); }
.small { font-size:.82rem; }

/* Cards */
.card {
    background:var(--card); border:1px solid var(--line); border-radius:14px;
    padding:16px; margin-bottom:14px;
}
.card h2 { display:flex; align-items:center; gap:8px; }

/* Forms */
label { display:block; font-size:.85rem; font-weight:600; margin:12px 0 5px; }
label:first-of-type { margin-top:0; }
input, select, textarea {
    width:100%; padding:12px; font-size:1rem; font-family:inherit;
    border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink);
    -webkit-appearance:none; appearance:none;
}
input:focus, select:focus, textarea:focus { outline:2px solid var(--brand); border-color:var(--brand); }
.hint { font-size:.76rem; color:var(--muted); margin:4px 0 0; }

/* Buttons */
.btn {
    display:block; width:100%; text-align:center; padding:14px; margin-top:14px;
    border-radius:12px; font-weight:700; font-size:1rem; text-decoration:none;
    border:1px solid var(--brand-btn); background:var(--brand-btn); color:#fff; cursor:pointer;
}
.btn.ghost { background:var(--card); color:var(--brand-d); }
.btn.slim { padding:12px 10px; min-height:48px; margin-top:0; font-size:.9rem; width:auto; }
.btn:disabled { opacity:.55; cursor:default; }
.btn-row { display:flex; gap:10px; }
.btn-row .btn { flex:1; }

/* Messages */
.banner { border-radius:11px; padding:12px 14px; margin:12px 0; font-size:.9rem; display:none; }
.banner.show { display:block; }
.banner.err { background:var(--danger-bg); color:var(--danger); border:1px solid #f5c6cb; }
.banner.ok  { background:var(--ok-bg); color:var(--ok); border:1px solid #b8e6d3; }
.banner.warn{ background:var(--warn-bg); color:var(--warn); border:1px solid #f0e2b0; }

/* Balances / lists */
.row {
    display:flex; align-items:center; gap:10px; padding:11px 0;
    border-bottom:1px solid var(--line);
}
.row:last-child { border-bottom:0; }
.row .grow { flex:1; min-width:0; }
.row .name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.row .meta { font-size:.78rem; color:var(--muted); }
.num { text-align:right; font-variant-numeric:tabular-nums; font-weight:700; white-space:nowrap; }

/* Status pills */
.pill { display:inline-block; padding:2px 9px; border-radius:999px; font-size:.72rem; font-weight:700; }
.pill.proposed { background:var(--warn-bg); color:var(--warn); }
.pill.active   { background:var(--ok-bg); color:var(--ok); }
.pill.spent, .pill.closed, .pill.expired, .pill.withdrawn, .pill.rejected { background:#eef2f0; color:var(--muted); }

.empty { color:var(--muted); font-size:.9rem; padding:8px 0; }

/* Voucher / QR display */
.qrbox { text-align:center; padding:6px 0; }
.qrbox img { width:220px; height:220px; max-width:100%; border-radius:12px; border:1px solid var(--line); }
.code-big {
    font-size:1.6rem; font-weight:800; letter-spacing:.04em; text-align:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin:10px 0 4px;
    word-break:break-all;
}

/* Copy of a small id for the MVP session */
.idchip {
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem;
    background:#eef2f0; border:1px solid var(--line); border-radius:8px;
    padding:14px 8px; min-height:48px; word-break:break-all; cursor:pointer;
}

/* Camera scanner */
#scanWrap { display:none; margin-top:12px; }
#scanWrap.show { display:block; }
#scanVideo { width:100%; border-radius:12px; background:#000; max-height:60vh; }

.foot { margin-top:22px; font-size:.75rem; color:var(--muted); text-align:center; }
.foot a { color:var(--brand-d); display:inline-block; padding:14px 8px; min-height:48px; }


/* ── Trade form: give/get pairing, plain-language echo, confirm step ───────── */
.swap { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:end; margin-top:6px; }
.swap .arrow { font-size:1.3rem; color:var(--muted); padding-bottom:26px; }
.swap label { margin-top:0; }
.swap .sub-hint { font-size:.74rem; color:var(--muted); margin:4px 0 0; min-height:2.2em; }
.echo { background:var(--ok-bg); color:var(--ok); border-radius:10px; padding:10px 12px; font-size:.88rem; margin:12px 0 0; display:none; }
.echo.show { display:block; }
.confirm-box { border:2px solid var(--brand-btn); border-radius:12px; padding:14px; margin-top:12px; display:none; }
.confirm-box.show { display:block; }
.confirm-box h3 { margin:0 0 8px; font-size:1rem; }
.confirm-box ul { margin:0 0 6px; padding-left:20px; }
.consent-box { border:1px solid var(--line); border-left:4px solid var(--brand-btn); border-radius:10px; padding:10px 12px; margin-top:10px; background:#fff; }
.consent-box label { display:flex; align-items:flex-start; gap:10px; margin:0; font-weight:700; font-size:.88rem; color:var(--ink); }
.consent-box input[type=checkbox] { flex:none; width:22px; height:22px; padding:0; margin:0; accent-color:var(--brand-btn); }
#iSubmit { margin-top:12px; }
.section-flag { border-left:4px solid var(--brand-btn); }

/* First-run steps */
.steps { list-style:none; counter-reset:s; padding:0; margin:10px 0 0; }
.steps li { counter-increment:s; display:flex; gap:10px; align-items:flex-start; padding:8px 0; color:var(--muted); font-size:.9rem; }
.steps li::before { content:counter(s); flex:none; width:24px; height:24px; border-radius:50%; background:#eef2f0; color:var(--muted); font-weight:800; display:grid; place-items:center; font-size:.8rem; }
.steps li.now { color:var(--ink); font-weight:700; }
.steps li.now::before { background:var(--brand-btn); color:#fff; }