/* /fund, the card funding page (owner decisions, 26 Oct 2026: "Privy card modal", "USDC by card + 1 swap"). One riveted
   plate under the site header, the sign-in panel's own plate (account.css .qa: deck-art/bay.webp as a 9-slice, its four
   screws in the corners, a dark well): the heading, the wallet the card pays into, the sign-in form when needed, the
   status line and the keys. Privy's modal opens over it.
   Faces only through the site's tokens (Option B, 26 Oct 2026): the pixel role (--t-font-pixel) for the heading, the
   display role (--t-font-display) for labels and keys, the body face for sentences. The page sits in the site shell,
   whose stylesheets load after this one, so every rule is scoped under .qfn. */

.qfn{
 --qfn-orange:var(--t-orange,#ff610b);--qfn-green:#00ee83;--qfn-ink:#f5eed5;--qfn-well:#000d07;
 --qfn-pixel:var(--t-font-pixel,"QUIT Pixel",monospace);
 --qfn-face:var(--t-font-display,"QUIT Display",monospace);
 --qfn-text:var(--t-font-body,"IBM Plex Mono",monospace);
 box-sizing:border-box;width:100%;max-width:820px;margin:0 auto;padding:18px 12px 40px;text-align:left
}
.qfn *,.qfn *::before,.qfn *::after{box-sizing:border-box}
.qfn [hidden]{display:none!important}

/* The shell's lobby deck and loader stay off this page, as on /gallery and /office. */
body:has(.qfn)>.q-ca,body:has(.qfn)>.q-boot{display:none}
body:has(.qfn)>.q-ca~.frame-main{padding-top:var(--c-header-height,var(--t-header-desktop,70px))}
/* Closed (data-fund-state, set by fund.js when sign-in is unavailable or the card modal cannot load): the plate holds
   only its line and CLOSE, so it stands in the middle of the room between the header and the footer, as the sign-in
   return page's plate stands, instead of over an empty black page (lane mobile O11, 30 Oct 2026). Loading, sign-in
   and the card modal keep the top, so a plate that grows into the sign-in form never jumps. */
body:has(.qfn)>.frame-main:has(>.qfn[data-fund-state="closed"]){display:flex;flex-direction:column;justify-content:center}

/* The plate: account.css gives .qa the bay plate and the well; here it is a page section, not a dialog. */
.qfn .qfn-plate{position:relative;max-height:none;overflow:visible;padding:26px 26px 24px}
.qfn .qfn-title{margin:0 0 20px;color:var(--qfn-orange);font:400 clamp(30px,5.4vw,54px)/1.04 var(--qfn-pixel);letter-spacing:.01em;text-shadow:3px 4px 0 #000;overflow-wrap:anywhere}

/* The wallet the card pays into: a recessed screen with its label, the short address and the network line. */
.qfn .qfn-screen{display:grid;gap:6px;margin:0 0 18px;padding:14px 16px 16px;border:3px solid #1b2a21;background:var(--qfn-well);box-shadow:inset 0 0 18px #00ff8014}
.qfn .qfn-screen strong{color:var(--qfn-green);font:400 16px/1.1 var(--qfn-face);letter-spacing:.1em}
.qfn .qfn-screen code{color:var(--qfn-ink);font:600 clamp(22px,3.4vw,30px)/1.15 var(--qfn-text);letter-spacing:.02em;overflow-wrap:anywhere}
.qfn .qfn-screen p{margin:0;color:#a9b3ab;font:400 15px/1.3 var(--qfn-text)}

/* Sign in first: the site's own form (account-panel.js) on the plate, as the office lays it. */
.qfn .qfn-signin h2{margin:0 0 14px;font:400 clamp(24px,3.2vw,36px)/1.1 var(--qfn-pixel);color:var(--qfn-orange);text-shadow:3px 4px #000}
.qfn .qa-inline{border:0;padding:0;background:none;max-height:none;overflow:visible}
/* The form's room, held from the first paint (fund.js shows the box before the panel fills it): the panel's settled
   height as the site draws it, with the Google and X keys on, at each width where its lines wrap differently. The line
   and CLOSE under it never move down as the form and then its keys come in. A shorter form (fewer keys, or an app's
   browser with no wallet) leaves the rest of its room empty under it. */
.qfn [data-fund-form]{min-height:618px}
@media (max-width:714px){.qfn [data-fund-form]{min-height:643px}}
@media (max-width:600px){.qfn [data-fund-form]{min-height:624px}}
@media (max-width:379px){.qfn [data-fund-form]{min-height:647px}}
@media (max-width:354px){.qfn [data-fund-form]{min-height:670px}}
@media (max-width:344px){.qfn [data-fund-form]{min-height:692px}}
/* The sign-in keys' row, and in an app's browser the OR above it, held unseen while Privy answers (fund.js holdSocial). */
.qfn [data-fund-form] [data-social-keys][data-fund-hold][hidden]{display:grid!important;visibility:hidden}
.qfn[data-fund-room="app"] [data-fund-form] .qa-or[hidden]{display:flex!important;visibility:hidden}
/* In an app's browser (data-fund-room="app", fund.js: Instagram, Facebook, TikTok and the other web views oauth.js
   names) the form has no Google key and no wallet row: its own settled height, X on, by the same kind of bands. */
.qfn[data-fund-room="app"] [data-fund-form]{min-height:463px}
@media (max-width:714px){.qfn[data-fund-room="app"] [data-fund-form]{min-height:488px}}
@media (max-width:600px){.qfn[data-fund-room="app"] [data-fund-form]{min-height:459px}}
@media (max-width:354px){.qfn[data-fund-room="app"] [data-fund-form]{min-height:482px}}
@media (max-width:349px){.qfn[data-fund-room="app"] [data-fund-form]{min-height:506px}}
@media (max-width:344px){.qfn[data-fund-room="app"] [data-fund-form]{min-height:528px}}
/* Until the site answers (data-fund-wait, fund.js, at most 1.5 s) the line and CLOSE under the held room wait unseen, so
   a closed answer that takes the room away again moves nothing anyone saw. */
.qfn[data-fund-wait] .qfn-status,.qfn[data-fund-wait] .qfn-keys{visibility:hidden}

/* CONVERT, the next step's slot (filled by the island when that step exists). */
.qfn .qfn-convert{margin:0 0 18px}

/* The line keeps one line's room when it is empty (content-box: the site's .qa-status padding sits outside it), so
   CLOSE does not move as the line empties or fills. */
.qfn .qfn-status{box-sizing:content-box;min-height:1.4em;margin:0 0 6px;font:400 17px/1.4 var(--qfn-text)}
.qfn .qfn-status:empty{display:block}
.qfn .qfn-keys{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin-top:10px}
.qfn .qfn-open{flex:1 1 320px;min-height:64px;font-size:clamp(18px,2.4vw,24px);letter-spacing:.06em}
.qfn .qfn-close{flex:0 0 auto;min-width:132px;min-height:64px;font-size:17px;letter-spacing:.08em}

@media (max-width:600px){
 .qfn{padding:10px 6px 28px}
 .qfn .qfn-plate{padding:18px 14px 18px}
 .qfn .qfn-title{margin-bottom:14px}
 .qfn .qfn-open,.qfn .qfn-close{flex:1 1 100%}
}