/* EARNINGS: MONEY IN, LIVE, YOUR LINK, NEXT POST, YOUR TEAM and the earnings table (office-money.js).
   MONEY IN, LIVE matches the approved money-in comp (owner order, 25 Oct 2026, S16): sizes are the comp's at 1440 px,
   the big lines scaled down with the viewport. Faces only through the office tokens. */
.qo-overview{--qm-ink:#d3f5e5;--qm-pale:#c2f5d5;--qm-dim:#8fb3a1;row-gap:10px}
.qo-overview>.qo-panel{position:relative;isolation:isolate;padding:8px 12px 10px}
/* the recessed screen inside the riveted frame (bay.webp): a rim, a black gap, the dark screen. It takes the office
   panel's own screen colours where the office chrome sets them (--o-screen, --o-rim). */
.qo-overview>.qo-panel::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;background:var(--o-screen,#000d06);box-shadow:inset 0 0 0 2px var(--o-rim,#4f5544),inset 0 0 0 3px #000,inset 0 5px 12px #000;pointer-events:none}
.qo-overview .qo-unknown{color:var(--qm-dim)}

/* the main panel: the big title, TODAY and 30 DAYS, then the ledger */
.qo-overview>.qo-live{display:flex;flex-direction:column;min-height:0;padding:8px 14px 12px}
.qo .qo-live>h2{color:var(--o-green);font-size:clamp(44px,5.9vw,85px);line-height:.92;margin:3px 0 8px;text-shadow:0 0 18px rgba(0,237,128,.22),3px 4px #000}
.qo-overview .qo-totals{margin:0 0 20px}
.qo-overview .qo-totals p{font:700 clamp(32px,4.05vw,58px)/1 var(--o-display);color:var(--o-green);text-shadow:0 0 14px rgba(0,237,128,.2)}
.qo-overview .qo-totals p+p{font-size:clamp(20px,2.15vw,31px);margin-top:4px;color:var(--qm-pale);text-shadow:none}
.qo-overview .qo-totals .qo-muted{font:inherit;font-size:.6em;color:var(--qm-dim)}
/* a sum paid in two units: each unit on its own line, the first beside TODAY or 30 DAYS */
.qo-overview .qo-totals .qo-sum{display:inline-block;vertical-align:top}
.qo-overview .qo-totals .qo-unit{display:block}
.qo-overview .qo-team-share .qo-unit+.qo-unit::before{content:"\A";white-space:pre}
.qo-overview .qo-feed{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
.qo-overview .qo-ledger{border-top:2px solid var(--o-line);max-height:none;flex:1 1 auto;overflow:auto;font-size:clamp(16px,1.32vw,19px);line-height:1.3}
.qo-overview .qo-ledger li{min-height:77px;padding:6px 0;font-size:inherit;line-height:inherit;color:var(--qm-ink);border-bottom-color:#183326}
.qo-overview .qo-ledger li:last-child{border-bottom:0}
.qo-overview .qo-buy{white-space:nowrap}
.qo-overview .qo-ledger .qo-earned{justify-self:end;text-align:right;white-space:normal}
/* past five rows the ledger scrolls inside the panel, so the panel keeps the comp's height */
.qo-overview .qo-ledger:has(li:nth-child(6)){max-height:calc(5 * 77px)}

/* desktop and tablet: one grid for every row (the rows are subgrids), so the buy column lines up whatever the names.
   The payout column holds the room for the whole payout (the panel minus the narrowest time, the who column and a
   buy of up to 99.999 SOL) before the who column takes any free space for a long name, so "you +X" stays on one line
   and only a payout wider than that room drops its unit under it; a name that still does not fit wraps under "via",
   at its underscores first. The time column gives up to 2ch before anything overflows. */
@media(min-width:761px){
 .qo-overview .qo-ledger{--qm-time:7.4ch;--qm-who:13ch;--qm-gap:14px;display:grid;grid-template-columns:minmax(5.4ch,var(--qm-time)) minmax(var(--qm-who),max-content) max-content minmax(max-content,1fr);column-gap:var(--qm-gap);align-content:start;container-type:inline-size}
 .qo-overview .qo-ledger li{grid-column:1/-1;grid-template-columns:subgrid;column-gap:var(--qm-gap)}
 .qo-overview .qo-ledger .qo-earned{max-width:calc(100cqw - 5.4ch - var(--qm-who) - 14ch - 3 * var(--qm-gap))}
}
@media(max-width:1400px) and (min-width:1151px){.qo-overview .qo-ledger{--qm-time:6.4ch;--qm-who:12ch;--qm-gap:10px}}

/* fewer than five rows (a new creator): MONEY IN, LIVE no longer holds the comp's full height.
   - Three or four rows, or two with a sum paid in two units (a taller panel): the comp's columns, the rows sharing
     the panel's height up to 120 px each.
   - Fewer: the panel ends at its rows with YOUR TEAM under it, and NEXT POST stands under YOUR LINK beside both, so
     no panel stretches into empty space. */
@media(min-width:1151px){
 .qo-overview:not(:has(.qo-ledger li:nth-child(5)))>.qo-live{min-height:0}
 .qo-overview:has(.qo-ledger li:nth-child(2)):not(:has(.qo-ledger li:nth-child(5))):is(:has(.qo-ledger li:nth-child(3)),:has(.qo-totals .qo-unit+.qo-unit)) .qo-ledger{grid-auto-rows:minmax(77px,120px)}
 .qo-overview:not(:has(.qo-ledger li:nth-child(3))):not(:has(.qo-ledger li:nth-child(2)):has(.qo-totals .qo-unit+.qo-unit)){grid-template-areas:"live link" "live next" "team next"}
 .qo-overview:not(:has(.qo-ledger li:nth-child(3))):not(:has(.qo-ledger li:nth-child(2)):has(.qo-totals .qo-unit+.qo-unit))>.qo-live{grid-area:live}
 .qo-overview:not(:has(.qo-ledger li:nth-child(3))):not(:has(.qo-ledger li:nth-child(2)):has(.qo-totals .qo-unit+.qo-unit))>.qo-link-panel{grid-area:link}
 .qo-overview:not(:has(.qo-ledger li:nth-child(3))):not(:has(.qo-ledger li:nth-child(2)):has(.qo-totals .qo-unit+.qo-unit))>.qo-next-panel{grid-area:next}
 .qo-overview:not(:has(.qo-ledger li:nth-child(3))):not(:has(.qo-ledger li:nth-child(2)):has(.qo-totals .qo-unit+.qo-unit))>.qo-team-panel{grid-area:team}
}

/* the right column: YOUR LINK, NEXT POST, YOUR TEAM */
.qo .qo-overview>.qo-panel:not(.qo-live)>h2{font-size:clamp(34px,3.7vw,53px);line-height:.95;margin:0 0 12px}
.qo-overview .qo-copy{gap:8px;align-items:center}
/* YOUR LINK shows the whole link: the field's text size is its width over the link's length (--qm-chars, set by
   office-money.js; the body face is monospaced, 0.6 em a character; a hinting browser rounds the size and
   the advance to whole pixels, so half a pixel is kept for each), at most the comp's size */
.qo-overview .qo-copy--fit .qo-field{flex:1 1 auto;min-width:0;display:flex;container-type:inline-size}
.qo .qo-overview .qo-copy input:not([type="checkbox"]){min-height:60px;font-size:clamp(10px,calc(((100cqw - 28px) / var(--qm-chars,33) - .5px) / .6 - .5px),15px);padding:10px 8px;color:var(--qm-ink)}
.qo-overview .qo-copy .qo-key{min-height:56px;font-size:clamp(17px,1.4vw,20px);padding-inline:12px}
.qo-overview .qo-copy--long{flex-wrap:wrap}
.qo-overview .qo-copy--long .qo-field{flex-basis:100%}
.qo-overview .qo-copy--long .qo-key{margin-left:auto}
.qo-overview .qo-statline{margin-top:10px!important;font-size:16px;line-height:1.35;color:var(--qm-ink)}
/* money-in-v5 sets each stat line on one line at 1440; narrower, a line wraps without leaving one word behind */
.qo-overview .qo-statline{text-wrap:pretty}
@media(min-width:1151px){.qo-overview .qo-statline{font-size:14.5px}}
/* the field in the riveted inset the REFERRALS copy field uses (money-in-v5), at the same text width */
@media(min-width:761px){.qo .qo-overview .qo-copy--fit input:not([type="checkbox"]){border:8px solid transparent;border-radius:0;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/8px stretch;background:none;padding:8px 4px}}
.qo-overview .qo-statline+.qo-statline{margin-top:6px!important;color:var(--qm-pale);opacity:.86}
/* NEXT POST: the network and its time on one row (money-in-v5), wrapping only where the pair is wider than the box, in
   a bevelled steel inset (the panels' own steel at a small width). */
.qo-overview .qo-next{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.8em;row-gap:4px;padding:8px 12px 10px;border:solid transparent;border-width:8px 9px;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/8px 9px stretch}
.qo .qo-overview .qo-next h3{font-size:clamp(24px,2.15vw,31px);line-height:1;color:var(--o-green)}
.qo-overview .qo-next-at{margin:0;font:700 clamp(24px,2.15vw,31px)/1 var(--o-display);color:var(--o-green)}
.qo-overview .qo-next-paused{flex-basis:100%;margin:0;font:700 18px var(--o-display);color:#ffcf4b}
.qo-overview .qo-last{flex-basis:100%;margin:4px 0 0;font-size:clamp(17px,1.4vw,20px);color:var(--o-green)}
.qo-overview .qo-next-panel>.qo-last{margin-top:10px}
.qo-overview .qo-last a{color:var(--o-green);text-decoration:none}
.qo-overview .qo-last a:hover,.qo-overview .qo-last a:focus-visible{text-decoration:underline;text-underline-offset:4px}
.qo-overview .qo-team-panel>p{font-size:clamp(16px,1.3vw,18px);line-height:1.4;color:var(--qm-ink)}
.qo-overview .qo-team-panel>.qo-team-share{color:var(--o-green);margin-top:8px!important}
.qo-overview .qo-team-panel>.qo-muted{font-size:14px;margin-top:6px}

@media(max-width:1150px) and (min-width:761px){
 .qo .qo-live>h2{font-size:clamp(44px,7.4vw,85px)}
 .qo-overview .qo-totals p{font-size:clamp(32px,5vw,58px)}
 .qo-overview .qo-totals p+p{font-size:clamp(20px,2.7vw,31px)}
 .qo-overview .qo-ledger{font-size:18px}
}

/* phone: TODAY and 30 DAYS in their own panel, then the ledger with the buy under who; YOUR LINK's field takes the
   panel's width with COPY under it */
@media(max-width:760px){
 .qo-overview>.qo-panel{padding:12px 10px}
 .qo-overview>.qo-live{display:contents}
 .qo-overview>.qo-live::before,.qo-overview>.qo-live::after{display:none}
 .qo-overview .qo-totals,.qo-overview .qo-feed{position:relative;isolation:isolate}
 .qo-overview .qo-totals::before,.qo-overview .qo-feed::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:9px;background:var(--o-screen,#000d06);box-shadow:inset 0 0 0 2px var(--o-rim,#4f5544),inset 0 0 0 3px #000,inset 0 4px 10px #000;pointer-events:none}
 .qo-overview .qo-totals{margin:0;padding:14px 12px}
 .qo-overview .qo-totals p{font-size:22px;line-height:1.1}
 .qo-overview .qo-totals strong{display:block;font-size:clamp(30px,9.4vw,46px);line-height:1;margin:6px 0 10px;white-space:normal;overflow-wrap:anywhere}
 .qo-overview .qo-totals .qo-sum{display:block}
 .qo-overview .qo-totals .qo-unit+.qo-unit{margin-top:4px}
 .qo-overview .qo-totals p+p{font-size:18px;margin-top:0}
 .qo-overview .qo-totals p+p strong{font-size:clamp(24px,7.4vw,34px);margin-bottom:0}
 .qo-overview .qo-totals .qo-muted{font-size:14px}
 .qo-overview .qo-feed{padding:10px 8px}
 .qo-overview .qo-ledger{border-top-width:1px;max-height:none;font-size:14px}
 /* o4 draws four rows on a phone: past four the ledger scrolls inside its panel, so YOUR LINK and the NEXT POST title
    come up into the first 844 px */
 .qo-overview .qo-ledger:has(li:nth-child(6)){max-height:none}
 .qo-overview .qo-ledger:has(li:nth-child(5)){max-height:calc(4 * 43px)}
 .qo-overview .qo-ledger li{grid-template-columns:5.4ch minmax(0,1fr) auto;grid-template-areas:"time who paid" "time buy paid";column-gap:7px;row-gap:0;min-height:42px;padding:4px 0;line-height:1.25;align-items:center}
 .qo-overview .qo-ledger li>time{grid-area:time}
 .qo-overview .qo-who{grid-area:who}
 .qo-overview .qo-buy{grid-area:buy;color:var(--qm-pale);opacity:.85;font-size:13px;white-space:normal}
 .qo-overview .qo-ledger .qo-earned{grid-area:paid;font-size:14px;max-width:21ch}
 .qo .qo-overview>.qo-panel:not(.qo-live)>h2{font-size:clamp(28px,8.6vw,38px)}
 .qo-overview .qo-copy--fit{flex-wrap:wrap}
 .qo-overview .qo-copy--fit .qo-field{flex-basis:100%}
 .qo .qo-overview .qo-copy input:not([type="checkbox"]){min-height:52px;font-size:clamp(10px,calc(((100cqw - 28px) / var(--qm-chars,33) - .5px) / .6 - .5px),14px);padding:8px}
 .qo-overview .qo-copy .qo-key{min-height:50px;font-size:16px;padding-inline:12px}
 .qo-overview .qo-copy--fit .qo-key{flex:1 1 100%}
 /* a link of up to 34 characters stays on one row with COPY (o4), its text fitted to the field */
 .qo-overview .qo-copy--fit.qo-copy--row{flex-wrap:nowrap}
 .qo-overview .qo-copy--fit.qo-copy--row .qo-field{flex:1 1 auto}
 .qo-overview .qo-copy--fit.qo-copy--row .qo-key{flex:none;min-width:66px;padding-inline:8px}
 .qo .qo-overview .qo-copy--row input:not([type="checkbox"]){font-size:clamp(9px,calc(((100cqw - 20px) / var(--qm-chars,33) - .5px) / .6 - .5px),14px);padding:8px 6px}
 .qo-overview .qo-statline{font-size:14px;line-height:1.3}
 .qo-overview .qo-statline:first-of-type{margin-top:6px!important}
 .qo-overview .qo-statline+.qo-statline{margin-top:4px!important}
 .qo-overview .qo-next{padding:10px 12px}
 .qo .qo-overview .qo-next h3{font-size:26px}
 .qo-overview .qo-next-at{font-size:26px}
 .qo-overview .qo-last{font-size:16px}
 .qo-overview .qo-team-panel>p{font-size:16px}
}