/* The web wallet. Builds on styles.css (tokens, .btn, .wrap): same indigo ground and brass accent, a calmer
 * layout — this is a place to do something, not a place to be sold to. Mobile first; every input is 16px so
 * iOS does not zoom on focus; every tap target is at least 44px. */

[hidden] { display: none !important; }

.w-head { border-bottom: 1px solid var(--rule); background: var(--ground); position: sticky; top: 0; z-index: 20; }
.w-head-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.w-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.w-nav a { text-decoration: none; color: var(--muted); font-weight: 500; padding: 10px 14px; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center; }
.w-nav a:hover { color: var(--bone); }
.w-nav a[aria-current='page'] { color: var(--bone); background: var(--ground-2); }

.w-main { padding: 28px 0 72px; min-height: 70vh; }
.w-narrow { max-width: 560px; margin: 0 auto; }
.w-title { font-family: var(--disp); font-size: clamp(2rem, 6vw, 2.8rem); letter-spacing: 0.01em; font-weight: 400; margin-bottom: 6px; }
.w-sub { color: var(--muted); margin-bottom: 24px; }
.w-stack { display: grid; gap: 20px; }

.w-card { background: var(--ground-2); border: 1px solid var(--rule); border-radius: 18px; padding: 20px; display: grid; gap: 14px; }
.w-card h2 { font-size: 1.1rem; font-weight: 600; }
.w-balances { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.w-bal { background: var(--ground-2); border: 1px solid var(--rule); border-radius: 18px; padding: 20px; }
.w-bal .k { color: var(--muted); font-size: 0.9rem; display: block; }
.w-bal .v { font-family: var(--disp); font-size: 2.6rem; line-height: 1.1; display: block; margin-top: 4px; font-variant-numeric: tabular-nums; }
.w-bal.coins .v { color: var(--brass); }
.w-bal.cowries .v { color: var(--bone); }
.w-bal .n { color: var(--muted); font-size: 0.85rem; margin-top: 6px; display: block; }

.w-field { display: grid; gap: 6px; }
.w-field label { font-weight: 600; font-size: 0.95rem; }
.w-field .hint { color: var(--muted); font-size: 0.85rem; }
.w-input { width: 100%; min-height: 48px; padding: 10px 14px; font: inherit; font-size: 16px; color: var(--bone); background: var(--ground-3); border: 1.5px solid rgba(242, 233, 216, 0.28); border-radius: 12px; }
.w-input:focus { border-color: var(--brass); outline: none; box-shadow: 0 0 0 3px rgba(227, 169, 60, 0.3); }
.w-input.code { font-size: 1.6rem; letter-spacing: 0.5em; text-align: center; font-variant-numeric: tabular-nums; }
.w-input[aria-invalid='true'] { border-color: var(--verm); }

.w-btn-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.btn[disabled], .btn[aria-disabled='true'] { opacity: 0.5; cursor: not-allowed; }
.btn.small { min-height: 44px; padding: 0 16px; font-size: 0.95rem; }
.w-link { background: none; border: 0; color: var(--bone); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; font: inherit; min-height: 44px; padding: 0 4px; }
.w-link:disabled { color: var(--muted); cursor: default; text-decoration: none; }

.w-msg { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--rule); background: var(--ground-3); }
.w-msg.err { border-color: rgba(232, 67, 46, 0.6); background: rgba(232, 67, 46, 0.12); }
.w-msg.ok { border-color: rgba(46, 139, 91, 0.7); background: rgba(46, 139, 91, 0.14); }
.w-msg.warn { border-color: rgba(227, 169, 60, 0.7); background: rgba(227, 169, 60, 0.12); }

.w-bundles { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.w-bundle { text-align: left; font: inherit; color: var(--bone); background: var(--ground-3); border: 1.5px solid var(--rule); border-radius: 14px; padding: 14px; cursor: pointer; display: grid; gap: 2px; min-height: 88px; }
.w-bundle:hover { border-color: var(--bone); }
.w-bundle[aria-pressed='true'] { border-color: var(--brass); background: rgba(227, 169, 60, 0.12); }
.w-bundle .p { font-weight: 600; font-size: 1.1rem; }
.w-bundle .c { color: var(--brass); font-variant-numeric: tabular-nums; }
.w-bundle .b { color: var(--muted); font-size: 0.85rem; }

.w-list { list-style: none; display: grid; }
.w-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); }
.w-row:first-child { border-top: 0; }
.w-row .l { display: grid; min-width: 0; }
.w-row .l .t { font-weight: 500; }
.w-row .l .d { color: var(--muted); font-size: 0.85rem; }
.w-row .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.w-row .amt.in { color: #6fd39b; }
.w-row .amt.out { color: var(--bone); }
.w-row .amt small { color: var(--muted); font-weight: 400; margin-left: 4px; }

.w-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.w-tab { font: inherit; color: var(--muted); background: transparent; border: 1.5px solid var(--rule); border-radius: 99px; padding: 0 16px; min-height: 44px; cursor: pointer; }
.w-tab[aria-pressed='true'] { color: var(--ink); background: var(--bone); border-color: var(--bone); }

.w-skel { height: 1em; border-radius: 6px; background: linear-gradient(90deg, var(--ground-3), var(--ground-2), var(--ground-3)); background-size: 200% 100%; animation: w-sh 1.4s infinite; }
@keyframes w-sh { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .w-skel { animation: none; } }

.w-foot { border-top: 1px solid var(--rule); padding: 20px 0 40px; color: var(--muted); font-size: 0.9rem; }
.w-foot a { color: var(--muted); }
.w-foot-in { display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 520px) { .w-bal .v { font-size: 2.2rem; } .w-input.code { letter-spacing: 0.35em; } }
.w-big { font-size: 1.4rem; }
.w-grid2 { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* ---- the reader (/read/<chapter>) ---- */
.r-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.r-bar h1 { font-size: 1.15rem; font-weight: 600; }
.r-bar .sub { color: var(--muted); font-size: 0.9rem; }
.r-modes { display: flex; gap: 8px; flex-wrap: wrap; }
.r-stage { max-width: 760px; margin: 0 auto; }
.r-panels { display: grid; gap: 0; background: var(--ground-3); border-radius: 12px; overflow: hidden; }
.r-panel { display: block; width: 100%; height: auto; background: var(--ground-3); }
.r-pages { display: grid; gap: 12px; justify-items: center; }
.r-pages .r-panel { border-radius: 12px; max-height: 80vh; width: auto; max-width: 100%; margin: 0 auto; }
.r-pager { display: flex; gap: 12px; align-items: center; justify-content: center; }
.r-pager .pos { color: var(--muted); min-width: 6ch; text-align: center; font-variant-numeric: tabular-nums; }
.r-end { margin-top: 20px; }
.r-locked { max-width: 560px; margin: 0 auto; }
.r-door { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--rule); }
.r-door:first-of-type { border-top: 0; }
.r-door .what { display: grid; }
.r-door .what small { color: var(--muted); }

/* ---- the invite landing page (/invite/<token>) ---- */
.inv { max-width: 560px; margin: 0 auto; }
.inv-code-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.inv-code { font-size: 1.4rem; letter-spacing: 0.08em; padding: 10px 16px; border-radius: 12px; border: 1px dashed var(--rule); background: var(--ground-3); user-select: all; overflow-wrap: anywhere; }
.inv-ways { display: grid; gap: 10px; }