/* NIBBLEWAGE app.css — v2 "night workshop": the app pages (/send/, /s/:id, /me/, /board/, /docs/, 404). Owner: APP.
   Needs base.css first. Numbers that tick, addresses and rates use DM Mono; mint glow only on flowing amounts. */

.page { padding-top: 18px; padding-bottom: 24px; }
.page-head { display: grid; gap: 12px; margin: 26px 0 26px; }
.page-head h1 { font-size: clamp(34px, 5.4vw, 56px); }
.page-head .lead { margin: 0; }
.tag.you { background: rgba(255, 217, 160, .14); color: var(--lamp); border-color: rgba(255, 217, 160, .4); height: 20px; font-size: 10.5px; padding: 0 7px; vertical-align: 1px; }

/* hamster views */
.hamster-box { position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 360px; margin: 0 auto; }
.hamster-still { display: grid; place-items: center; }
.hamster-still img { width: 88%; height: auto; animation: nw-bob .9s ease-in-out infinite; transform-origin: 50% 90%; filter: drop-shadow(0 10px 30px rgba(255, 217, 160, .15)); }
.hamster-still[data-pose="nap"] img, .hamster-still[data-pose="idle"] img { animation: none; filter: saturate(.8) brightness(.85); }
.hamster-still.hop img { animation: nw-hop .6s cubic-bezier(.3, 1.6, .5, 1) 1; }
@keyframes nw-bob { 50% { transform: translateY(-3%) rotate(-1.5deg); } }
@keyframes nw-hop { 40% { transform: translateY(-14%); } }

/* ── stream cards ─────────────────────────────────────── */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.stream-card { display: grid; grid-template-columns: 1fr; gap: 6px; text-decoration: none; color: var(--ink); padding: 12px 18px 16px; transition: border-color .15s, box-shadow .15s; }
.stream-card:hover { border-color: var(--brass-line); color: var(--ink); box-shadow: var(--shadow-card), 0 0 0 1px var(--brass-line); }
.stream-card.is-example { border-style: dashed; border-color: rgba(244, 166, 160, .35); }
.sc-view { width: 100%; max-width: 150px; height: 130px; justify-self: center; }
.sc-body { display: grid; gap: 5px; min-width: 0; }
.sc-top { gap: 6px; }
.sc-top .status { height: 24px; font-size: 12px; padding: 0 9px; }
.sc-amount { font: 500 clamp(19px, 5.4vw, 23px)/1.15 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.sc-sym { font: 500 13px/1 var(--font-mono); color: var(--brass-ink); letter-spacing: .06em; }
.sc-usd { font: 400 13px/1.2 var(--font-mono); min-height: 1.2em; color: var(--muted-2); }
.sc-rate { font: 500 13.5px/1.3 var(--font-mono); color: var(--text-2); }
.sc-who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-who .mono { font-size: 12.5px; }

/* ── /send/ ───────────────────────────────────────────── */
.send-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 980px) { .send-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.presets { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.presets .chip[aria-pressed="true"] { background: rgba(201, 162, 91, .14); color: var(--lamp); border-color: var(--brass); }
.tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 12px; flex-wrap: wrap; }
.tabs button { border: 0; background: transparent; font: 400 19px/1 var(--font-display); padding: 9px 14px; border-radius: var(--radius-pill); cursor: pointer; color: var(--muted-2); }
.tabs button:hover { color: var(--lamp); }
.tabs button[aria-selected="true"] { background: var(--belly); color: var(--lamp); box-shadow: inset 0 0 0 1px var(--brass-line); }
.tabs .tag { margin-left: 8px; vertical-align: 3px; }
.step-h { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; font: 400 20px/1.1 var(--font-display); }
.step-h .n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass-ink); background: radial-gradient(circle at 35% 30%, rgba(245, 223, 168, .22), rgba(140, 106, 47, .1)); font: 500 13px/1 var(--font-mono); flex: none; }
.block { padding: 20px 0 8px; border-top: 1px solid var(--line); }
.block:first-of-type { border-top: 0; padding-top: 0; }
.assets { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.asset-btn { display: grid; gap: 3px; text-align: left; padding: 10px 12px; min-height: 66px; border: 1px solid var(--line-2); background: var(--field); border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--ink); transition: border-color .15s, background .15s; }
.asset-btn:hover { border-color: var(--brass-line); background: #121D33; }
.asset-btn[aria-pressed="true"] { border-color: var(--brass); background: linear-gradient(180deg, rgba(201, 162, 91, .16), rgba(201, 162, 91, .04)), var(--field); box-shadow: 0 0 0 1px var(--brass) inset, 0 8px 24px -14px rgba(255, 217, 160, .5); }
.asset-btn b { font: 500 16px/1 var(--font-mono); letter-spacing: .04em; color: var(--ink); }
.asset-btn[aria-pressed="true"] b { color: var(--lamp); }
.asset-btn .p { font: 400 12.5px/1.2 var(--font-mono); color: var(--text-2); }
.asset-btn .k { font-size: 11.5px; color: var(--muted-2); text-transform: uppercase; letter-spacing: .06em; }
.amount-row { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .amount-row { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
.input-unit { position: relative; }
.input-unit .unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: 500 14px/1 var(--font-mono); color: var(--brass-ink); pointer-events: none; }
.input-unit .input { padding-right: 76px; }
.fund-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.fund-row .input { width: 96px; min-height: 42px; font-family: var(--font-mono); }
.preview { display: grid; gap: 14px; }
.preview .big-rate { font: 500 clamp(28px, 4vw, 40px)/1.05 var(--font-mono); color: var(--flow); text-shadow: 0 0 22px var(--flow-glow); word-break: break-word; letter-spacing: -.02em; }
.preview .big-rate small { font: 500 14px/1 var(--font-mono); color: var(--muted-2); text-shadow: none; letter-spacing: 0; }
.preview #pv-day { font-family: var(--font-mono); font-size: 14px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: s; }
.steps li { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--muted-2); }
.steps li::before { counter-increment: s; content: counter(s); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2); font: 500 12px/1 var(--font-mono); flex: none; }
.steps li.on { color: var(--lamp); }
.steps li.on::before { border-color: var(--fur); background: var(--fur); color: var(--on-fur); box-shadow: 0 0 14px -2px rgba(242, 154, 63, .7); }
.steps li.done { color: var(--flow-ink); }
.steps li.done::before { content: '✓'; border-color: var(--flow); background: var(--flow); color: #052014; }
.callout { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--belly); border: 1px solid var(--line); font-size: 14.5px; color: var(--text-2); }
.callout.warn { background: var(--danger-wash); border-color: rgba(229, 96, 79, .35); }
.callout.flow { background: var(--flow-wash); border-color: rgba(91, 227, 166, .25); }
.callout.flow b { color: var(--flow); font-family: var(--font-mono); font-weight: 500; }
.locked { text-align: center; padding: 28px 16px; }
.csv-table { max-height: 300px; overflow: auto; }

/* ── /s/:id ───────────────────────────────────────────── */
.stream-hero { display: grid; gap: 8px; grid-template-columns: minmax(0, 1fr); align-items: center; padding: 22px; }
@media (min-width: 900px) { .stream-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 32px 36px; } }
.stream-hero .meta { gap: 8px; }
.stream-hero .counter { font: 500 clamp(36px, 7.4vw, 76px)/1 var(--font-mono); color: var(--flow); text-shadow: 0 0 30px var(--flow-glow), 0 0 2px rgba(91, 227, 166, .7); font-variant-numeric: tabular-nums; letter-spacing: -.03em; word-break: break-all; margin: 14px 0 4px; }
.stream-hero .counter.stopped { color: var(--ink); text-shadow: none; }
.stream-hero .counter-sym { font: 500 clamp(16px, 2.2vw, 22px)/1 var(--font-mono); color: var(--brass-ink); letter-spacing: .1em; }
.stream-hero .counter-usd { font: 500 19px/1.3 var(--font-mono); color: var(--text-2); margin-top: 6px; }
.stream-hero .counter-lbl { font-size: 15px; color: var(--muted-2); }
.stream-hero .hamster-box { max-width: 380px; }
.parties { display: grid; gap: 10px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 560px) { .parties { grid-template-columns: 1fr auto 1fr; } }
.party { padding: 14px; border-radius: var(--radius-sm); background: var(--field); border: 1px solid var(--line); min-width: 0; }
.party .who { font: 500 11.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--brass-ink); margin-bottom: 8px; }
.party .addr { font: 400 13px/1.45 var(--font-mono); word-break: break-all; }
.party-arrow { justify-self: center; font: 500 24px/1 var(--font-mono); color: var(--brass); }
.actions-grid { display: grid; gap: 10px; }
.action-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.action-row .input { flex: 1 1 160px; min-height: 44px; font-family: var(--font-mono); }
.fee-line { font-size: 13.5px; color: var(--muted-2); }
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.events li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); align-items: center; font-size: 14.5px; }
.events li:first-child { border-top: 0; }
.events .num { font-family: var(--font-mono); font-size: 13.5px; }
.ev-k { font-weight: 700; text-transform: capitalize; color: var(--ink); }
.share-row { display: flex; gap: 8px; flex-wrap: wrap; }
.notfound { text-align: center; padding: 40px 20px; }
.notfound .hamster-box { max-width: 220px; }

/* ── /me/ and /board/ ─────────────────────────────────── */
.totals { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .totals { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.total { padding: 16px 18px; }
.total .k { font: 500 11.5px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--brass-ink); }
.total .v { font: 500 clamp(22px, 3vw, 30px)/1.15 var(--font-mono); margin-top: 8px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; letter-spacing: -.02em; color: var(--ink); }
.total .v.flow { color: var(--flow); text-shadow: 0 0 20px var(--flow-glow); }
.total .v .small { font-family: var(--font-text); font-size: 13px; letter-spacing: 0; text-shadow: none; }
.section-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 34px 0 14px; }
.connect-card { display: grid; gap: 16px; place-items: center; text-align: center; padding: 34px 20px; }
.connect-card .hamster-box { max-width: 220px; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.tbl a.sid { font: 500 14px/1 var(--font-mono); text-decoration: none; color: var(--lamp); }
.tbl td b { color: var(--ink); font-family: var(--font-mono); font-weight: 500; }
.tbl .flow { color: var(--flow); text-shadow: 0 0 12px var(--flow-glow); }

/* ── /docs/ ───────────────────────────────────────────── */
.docs-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) { .docs-grid { grid-template-columns: 220px minmax(0, 1fr); } .toc { position: sticky; top: 16px; align-self: start; } }
.toc { display: grid; gap: 2px; font-size: 14.5px; padding: 10px; border: 1px solid var(--brass-faint); border-radius: var(--radius-card); background: rgba(18, 27, 46, .6); }
.toc a { padding: 7px 12px; border-radius: var(--radius-pill); text-decoration: none; font-weight: 500; color: var(--text-2); }
.toc a:hover { background: var(--belly); color: var(--lamp); }
.docs section { margin-bottom: 18px; }
.docs h2 { margin-bottom: 14px; }
.docs h3 { margin: 18px 0 8px; }
.docs p, .docs li { max-width: 72ch; color: var(--text-2); }
.docs b { color: var(--ink); }
.docs ul, .docs ol { padding-left: 22px; margin: 0 0 1em; }
.docs li { margin-bottom: 6px; }
.docs li::marker { color: var(--brass); }
.three-steps { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); counter-reset: st; }
@media (min-width: 760px) { .three-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.three-steps > div { padding: 18px; border-radius: var(--radius-sm); background: var(--field); border: 1px solid var(--line); }
.three-steps > div::before { counter-increment: st; content: counter(st); display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--brass); color: var(--brass-ink); font: 500 15px/1 var(--font-mono); margin-bottom: 12px; background: radial-gradient(circle at 35% 30%, rgba(245, 223, 168, .22), rgba(140, 106, 47, .1)); }
details.faq { border-top: 1px solid var(--line); padding: 13px 0; }
details.faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 10px; color: var(--ink); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: '+'; font: 500 20px/1 var(--font-mono); color: var(--brass); }
details.faq[open] summary::after { content: '–'; }
details.faq p { margin: 10px 0 0; }
.addr-list { display: grid; gap: 10px; }
.addr-list div { display: grid; gap: 4px; }
.addr-list b { color: var(--ink); }
.addr-list code { font-size: 12.5px; }

/* 404 */
.lost { text-align: center; padding: 40px 0 10px; display: grid; gap: 14px; justify-items: center; }
.lost .hamster-box { max-width: 260px; }
.kv dd.flow { color: var(--flow); text-shadow: 0 0 14px var(--flow-glow); }
#rate-line .mono, .sc-rate .mono { font-size: .95em; color: var(--ink); }