/* GhostFi Vapour: Pay many, points, developers, embed. Additions only, kit tokens only (ghostfi.css and app.css stay
   untouched). Reuses the kit .cv card, .fld, .pick, .dep, .out, .tx, .tiles, .tiers, .panel and the app.css .blog table
   (its phone reflow under 760 px). */

/* ---------- Pay many: compose ---------- */
.v .bwrap{display:grid;gap:40px}
.v .bk{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start}
.v .bk-in{gap:18px}
.v .bk-from{display:flex}
.v .bk-lh{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.v .bk-lh .note{font-family:var(--fm)}
.v .fld.list{height:auto;align-items:stretch;padding:12px 14px}
.v .fld.list textarea.in{min-height:calc(7 * 1.6em);max-height:420px;overflow:auto;font:400 13px/1.6 var(--fm);white-space:pre-wrap;word-break:break-all}
.v .bk-up{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v .bk-up .btn{cursor:pointer}
.v .bk-up input:focus-visible+.note,.v .bk-up label:has(+input:focus-visible){outline:2px solid var(--mint);outline-offset:2px}
.v .bk-up .note.err,.v .bmsg.err{color:var(--red)}
.v .bsum{position:sticky;top:88px;gap:14px;justify-items:stretch}
.v .bsum-b{display:grid;gap:14px}
.v .bsum .out b{font-size:28px;overflow-wrap:anywhere}
.v .bsum .tx{padding:2px 0}
.v .bsum .tx em{justify-content:flex-end;text-align:right;font:500 13px var(--fm);color:var(--fg)}
.v .bsum .tx em small{flex-basis:100%;font:400 11.5px var(--fb);color:var(--tx)}
.v .bsum .tx em b{color:var(--mint);font-weight:600}
.v .bsum>.note{text-wrap:pretty}
.v .bsum .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}
.v .bmsg{font-size:13.5px;color:var(--tx)}
.v .bmsg:empty{display:none}
.v .berr{display:grid;gap:4px;margin-top:6px;font-size:13.5px;color:var(--tx)}
.v .berr b{font:500 12px var(--fm);color:var(--fg);margin-right:6px}

/* the line tables (Pay many compose + status): the app.css .blog table, wider cells for addresses */
.v .bl td{vertical-align:top}
.v .bl .bno{font:500 12px var(--fm);color:var(--tx);width:36px}
.v .bl .rc{display:table-cell;min-width:240px}
.v .bl .rc b{display:block;color:var(--fg);font-weight:600;font-size:14px;overflow-wrap:anywhere}
.v .bl .rc b.mu{color:var(--tx);font-weight:500}
.v .bl .rc code.addr{margin-top:4px;font-size:12.5px;color:var(--tx)}
.v .bl .rc .bh{display:block;margin-top:4px;font:500 13px var(--fm);color:var(--mint)}
.v .bl .rc .note{display:block;margin-top:2px;font-size:12px;color:var(--tx)}
.v .bl .rc .err{margin-top:8px}
.v .bl .rc .chip{margin-top:8px}
.v .bl .bamt{display:block;font:600 14px var(--fm);color:var(--fg);white-space:nowrap}
.v .bl .bnet{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:12px;color:var(--tx)}
.v .bl td .note{display:block;font-size:12px;color:var(--tx)}
.v .bl tr.bad td{background:rgba(255,107,139,.05)}
.v .bl tr.bad td:first-child{box-shadow:inset 2px 0 0 var(--red)}
.v .bl tr.dup td:first-child{box-shadow:inset 2px 0 0 var(--yel)}
.v .bl .bok{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:rgba(122,240,224,.14);color:var(--mint)}
.v .bl .bok svg{width:12px;height:12px}
.v .chip.warn{border-color:rgba(255,211,122,.4);color:var(--yel);background:rgba(255,211,122,.06)}
.v .chip.bad{border-color:rgba(255,107,139,.45);color:var(--red);background:rgba(255,107,139,.06)}
.v .blog-wrap[aria-busy=true] tbody{opacity:.55;transition:opacity .15s}
.v .bl .bst{min-width:150px}
.v .bl .bst .note{margin-top:6px}
.v .bl .bst .note.hold{color:var(--yel)}
.v .bhash{display:block;margin-top:6px;font:400 12px var(--fm);color:var(--mint);word-break:break-all}
.v .bhash .hash .g:nth-child(even){opacity:.62}
.v .bhash .tail{white-space:nowrap}
.v .bhash .ic{display:inline-block;vertical-align:-1px;margin-left:4px}
.v .pillst.sm{height:26px;padding:0 10px;font-size:11.5px;white-space:nowrap}
.v .pillst.wait:not(.run) i{background:var(--tx);box-shadow:none}
.v .pillst.run i{animation:vblink 1.3s steps(1) infinite}
.v .pillst.bad{border-color:rgba(255,107,139,.45)}

/* ---------- Pay many: status ---------- */
.v .bstat{display:grid;gap:18px;max-width:880px;margin:0 auto;width:100%;align-content:start}
.v .bstat .oh{display:grid;gap:10px;max-width:640px}
.v .bstat .oh .top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.v .bstat .oh h1{font-size:36px}
.v .bstat .oh p{color:var(--tx);font-size:15.5px;overflow-wrap:anywhere}
.v .bstat .dep{max-width:640px}
.v .bstat>.alertbox{max-width:640px}
.v .tiles.t4{grid-template-columns:repeat(4,minmax(0,1fr))}
.v .tile.hold b{color:var(--yel)}
.v .bstat:has(#sLinesWrap[hidden]):has(#sNf[hidden]){min-height:70svh}

/* ---------- points ---------- */
.v .pts{display:grid;gap:56px}
.v .pts .two{align-items:start}
.v .pts .panel .tiles{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.v .pts .panel .tile{padding:14px 16px}
.v .pts .panel .tile b{font-size:24px;overflow-wrap:anywhere}
.v .pts .pw{display:grid;gap:4px;width:100%}
.v .pts .pw code.addr{font-size:13px}
.v .pname{display:grid;gap:8px;width:100%}
.v .pname .fld{height:52px;padding-right:6px}
.v .pname .fld .in{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:0;font:400 15px var(--fb);color:var(--fg)}
.v .pname .fld .in::placeholder{color:var(--mu)}
.v .pts .gl{padding-left:20px}
.v .pts .gl li{font-size:15px}
.v .pl .prk{font:600 14px var(--fm);color:var(--fg);width:64px}
.v .pl tr.me td{background:rgba(122,240,224,.06)}
.v .pl .pnm{overflow-wrap:anywhere}
.v .pl .pnm.anon{font:400 13px var(--fm);color:var(--tx)}
.v .pl .pnum{font:500 14px var(--fm);color:var(--fg);text-align:right;white-space:nowrap}
.v .pl th.pnum{text-align:right}
.v .tiers.t4{grid-template-columns:repeat(4,minmax(0,1fr))}
.v .tier .tfee{font:700 22px/1.1 var(--fd);color:var(--fg);letter-spacing:-.02em}
.v .tier .tyou{font:500 11px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}
.v .sh .ph{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v .pts .rmsg{width:100%}

/* ---------- developers ---------- */
.v .dev{display:grid;gap:72px}
.v .dsec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:32px;align-items:start}
.v .dsec .sh{position:sticky;top:88px}
.v .dsec .sh p{font-size:15.5px}
.v .dsec .sh .note{font-size:13px}
.v .dcol{display:grid;gap:16px;min-width:0}
.v .snip{position:relative;display:grid;border-radius:var(--rs);background:rgba(0,0,0,.34);border:1px solid var(--ln)}
.v .snip-h{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-bottom:1px solid var(--ln)}
.v .snip-h .lbl{color:var(--tx)}
.v .snip pre{margin:0;padding:14px 16px 16px;font:400 12.5px/1.65 var(--fm);color:var(--fg);white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;tab-size:2}
.v .snip pre .c{color:var(--tx)}
.v .snip pre .k{color:var(--lav)}
.v .snip pre .s{color:var(--mint)}
.v .facts.api dt{font-family:var(--fm);font-size:12.5px;color:var(--fg)}
.v .facts.api dd{color:var(--tx);font-size:14px}
.v .facts.api dd code{font-size:12.5px;color:var(--fg)}
.v .dev .alertbox{max-width:72ch}
.v .dlist{display:grid;gap:10px;padding-left:20px;list-style:disc}
.v .dlist li{color:var(--tx);font-size:15px;line-height:1.6}
.v .dlist li::marker{color:var(--mu)}
.v .dlist code{font-size:13px;color:var(--fg)}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .v .bk{grid-template-columns:minmax(0,1fr)}
  .v .bsum{position:static}
  .v .dsec{grid-template-columns:minmax(0,1fr);gap:20px}
  .v .dsec .sh{position:static}
}
@media (max-width:900px){
  .v .tiles.t4,.v .tiers.t4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  /* app.css reflows .blog rows into a 2-column grid: the recipient takes the full row, status too */
  .v .bl .rc,.v .bl .bst{grid-column:1/-1;min-width:0}
  .v .bl tr{padding-left:10px}
  .v .bl td,.v .bl tr.bad td{background:none}
  .v .bl tr.bad{background:rgba(255,107,139,.05);box-shadow:inset 2px 0 0 var(--red)}
  .v .bl tr.dup{box-shadow:inset 2px 0 0 var(--yel)}
  .v .bl tr.bad td:first-child,.v .bl tr.dup td:first-child{box-shadow:none}
  .v .bl .bamt{white-space:normal}
  .v .pl tr{grid-template-columns:auto minmax(0,1fr) auto}
  .v .pl td.pnm{grid-column:2/-1}
  .v .pl td.pnum{text-align:left}
}
@media (max-width:560px){
  .v .bstat .oh h1{font-size:30px}
  .v .pts .panel .tiles{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .v .pts .panel .tile:first-child{grid-column:1/-1}
  .v .tiles.t4{gap:10px}
  .v .tiles.t4 .tile{padding:14px 16px}
  .v .tiles.t4 .tile b{font-size:24px}
}
@media (prefers-reduced-motion:reduce){ .v .pillst.run i{animation:none} .v .blog-wrap[aria-busy=true] tbody{transition:none} }

/* ---------- embed (/embed/): compact, no site chrome, 320 to 440 px ---------- */
html.emb-html,html.emb-html body{min-height:0;background:transparent}
.v.emb{min-height:0;padding:12px;background:var(--bg);border-radius:18px}
.v.emb .ewrap{position:relative;z-index:1;display:grid;gap:12px;max-width:440px;margin:0 auto}
.v.emb .cv{padding:16px;gap:12px;backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none}
.v.emb .fld{height:56px}
.v.emb .fld .amt{font-size:22px}
.v.emb .fld.addr{min-height:50px}
.v.emb .pick.locked{cursor:default;box-shadow:none}
.v.emb .pick.locked .ic{display:none}
.v.emb .quote{grid-template-columns:minmax(0,1fr)}
.v.emb .quote div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 12px}
.v.emb .quote b{text-align:right}
.v.emb .edisc{display:grid;gap:4px;font-size:12px;color:var(--tx);line-height:1.5}
.v.emb .efoot{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:12px;color:var(--tx)}
.v.emb .efoot a{display:inline-flex;align-items:center;gap:6px;color:var(--fg);font-weight:600;padding-block:6px}
.v.emb .efoot a:hover{color:var(--mint)}
.v.emb .eord{display:grid;gap:12px}
.v.emb .eord .oh h2{font-size:24px;line-height:1.15}
.v.emb .eord .oh p{color:var(--tx);font-size:14px;overflow-wrap:anywhere}
.v.emb .dep{grid-template-columns:minmax(0,1fr);padding:14px;gap:12px}
.v.emb .dep .qr{width:132px;height:132px;justify-self:center}
.v.emb .amtline b{font-size:24px}
.v.emb .st{padding:2px 14px}
.v.emb .st li{padding:10px 0}
.v.emb .out b{font-size:24px}
.v.emb .out span{overflow-wrap:anywhere}
.v.emb .tx{font-size:12.5px}
.v.emb .eoff{display:grid;gap:10px;justify-items:center;text-align:center;padding:28px 18px}
.v.emb .eoff p{color:var(--tx);max-width:34ch}
/* light theme (?theme=light): the same kit, its token values swapped; mint text darkened to keep 4.5:1 on the light ground */
.v.emb.light{--bg:#F5F5FA;--pn:rgba(20,21,43,.035);--p2:rgba(20,21,43,.06);--p3:rgba(20,21,43,.09);--ln:rgba(20,21,43,.12);--ln2:rgba(20,21,43,.2);
  --fg:#15162B;--tx:#3D4166;--mu:#5A5F88;--mint:#0B7468;--yel:#8A5A00;--red:#C2264B;--ring:0 0 0 3px rgba(11,116,104,.3);--tx-glow:#3D4166}
.v.emb.light .cv{background:#FFFFFF;border-color:var(--ln2)}
.v.emb.light .fld{background:rgba(20,21,43,.035)}
.v.emb.light .fld .amt::placeholder{color:var(--mu)}
.v.emb.light .pick{background:#FFFFFF}
.v.emb.light .quote div{background:#FFFFFF}
.v.emb.light .out{background:linear-gradient(135deg,rgba(142,119,255,.1),rgba(11,116,104,.06));border-color:rgba(11,116,104,.3)}
.v.emb.light .dep,.v.emb.light .st{background:#FFFFFF}
.v.emb.light .alertbox{background:rgba(138,90,0,.06);border-color:rgba(138,90,0,.3)}
.v.emb.light .alertbox.bad{background:rgba(194,38,75,.06);border-color:rgba(194,38,75,.3)}
.v.emb.light .qr{border:1px solid var(--ln)}
.v.emb.light .blob{display:none}
@media (max-width:760px){
  .v .bl td.bno{grid-column:1/-1;display:flex;align-items:baseline;gap:6px;width:auto}
  .v .bl td.bno::before{font-size:10.5px}
}
/* points: signed-out and signed-in blocks keep the panel's rhythm */
.v .pts .pout,.v .pts .pin{display:grid;gap:16px;width:100%;justify-items:start}
.v .pts .pout p{color:var(--tx)}
.v .pts .ptsline{margin:-4px 0 0}
/* headings that take focus from script (after an order is created, after sign-in) are not controls: no focus box */
.v [tabindex="-1"]:focus{outline:none}
/* phone tables: chips and pills keep their own width inside the reflowed cells; leaderboard rows on one line */
@media (max-width:760px){
  .v .bl td .pillst,.v .bl td .chip,.v .pl td .chip{justify-self:start;width:max-content;max-width:100%}
  .v .pl tr{grid-template-columns:48px minmax(0,1fr) auto auto;align-items:end;gap:4px 14px;padding:12px 0}
  .v .pl td.prk::before,.v .pl td.pnm::before{content:none}
  .v .pl td.pnm{grid-column:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .v .pl td.pnum{text-align:right;justify-items:end}
  .v .pl tr.me{background:rgba(122,240,224,.06);border-radius:10px}
  .v .pl tr.me td{background:none}
}