/* REFERRALS: YOUR LINK, YOU EARNED, PAID IN $QUIT and INVITE A CREATOR (office-referrals.js), built to the approved r1
   comp (owner note S19, 25 Oct 2026). Sizes are the comp's at 1440 (cap heights: panel titles 34, rate figures 31, YOU
   EARNED 60, labels and key labels 16 to 19 CSS px); each rule below overrides the office.css rule of the same name.
   Faces only through the tokens: titles in the pixel role, figures, labels and keys in the display role, sentences and
   addresses in the body face. Titles, YOU EARNED, the rate sentences and the addresses are fitted to one line by
   office-referrals.js (fitLines) in whatever face loaded; --qo-fit-min is where a line stops shrinking and wraps. */
.qo-referrals>.qo-panel{padding:8px 6px 8px 10px;container-type:inline-size}
.qo-referrals h2{font-size:clamp(34px,3.75vw,56px);line-height:1;margin:-8px 0 14px}
/* A copy field: the address in r1's grey bezel (the bay plate) beside COPY. The read-only field that names it for
   assistive technology is hidden visually; when it has focus (the keyboard, or the office selecting it when the
   clipboard refuses) the drawn address shows the focus. */
.qo-copy-fit{position:relative;gap:10px}
.qo .qo-referrals .qo-copy-fit>input:not([type="checkbox"]){position:absolute;left:0;top:0;width:1px;height:1px;min-height:0;margin:0;padding:0;border:0;opacity:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}
.qo-copy-address{--qo-fit-min:14px;flex:1 1 auto;display:block;align-content:center;min-width:0;min-height:58px;padding:6px 12px;border:8px solid transparent;border-image:url(/runtime/quit/deck-art/bay.webp) 44 50 fill/8px stretch;color:var(--o-ink);font:400 19px/1.25 var(--o-body);overflow-wrap:anywhere;user-select:all}
.qo-copy-fit:has(>input:focus)>.qo-copy-address{background:#0b3a22;background-clip:padding-box}
.qo-copy-fit:has(>input:focus-visible)>.qo-copy-address{outline:2px solid var(--o-green);outline-offset:2px}
.qo-referrals .qo-copy .qo-key{min-width:92px;min-height:58px;padding:8px 14px 12px;font-size:26px}
/* The three rates share one figure column, r1's 120 px or as wide as the widest figure, so a longer rate never runs
   into its sentence; each sentence holds one line and is set smaller (to 14 px) before it wraps. */
.qo-referral-rates{display:grid;grid-template-columns:minmax(clamp(96px,8.2vw,118px),max-content) minmax(0,1fr);column-gap:10px;margin-top:14px;border-top:1px solid #396849}
.qo-referral-rates>div{grid-column:1/-1;grid-template-columns:subgrid;gap:0 10px;min-height:60px;padding:4px 0}
.qo-referral-rates dt{font-size:clamp(36px,3.05vw,44px);line-height:1}
.qo-referral-rates dd{--qo-fit-min:14px;font-size:16px;line-height:1.35}
.qo-referral-link>.qo-muted{margin-top:8px;font-size:16px}
.qo-referral-earned h2{margin-bottom:6px}
/* r1 sets the lower two titles closer to their plates, and the two sentences of PAID IN $QUIT on tighter leading. */
.qo-referral-mode h2,.qo-referral-invite h2{margin-bottom:6px}
/* YOU EARNED: centred under its title, as big as the comp, one line (set smaller when a long total needs it). */
.qo .qo-paid-total{font-size:86px;line-height:1.04;letter-spacing:0;text-align:center;white-space:normal;overflow-wrap:anywhere}
.qo .qo-sol-value{margin:4px 0 10px;font-size:19px}
.qo-referral-stats>div{min-height:54px;padding:6px 0}
.qo-referral-stats dt{font-size:23.5px;line-height:1.1}
.qo-referral-stats dd{font-size:22px;line-height:1.2}
/* PAID IN $QUIT: r1's two-half plate, the lit half about 140 of 246 px. */
.qo-payout-switch{width:246px;padding:6px;margin:0 0 10px}
.qo-payout-switch>.qo-key{width:60%;min-height:50px;padding:6px 8px 9px;font-size:26px}
.qo-referral-mode>p{font-size:18px;line-height:1.25}
.qo-referrals .qo-referral-mode>.qo-muted{margin-top:6px;font-size:17px;line-height:1.2}
.qo-share-kit{min-height:52px;margin:10px 0 8px;padding-block:6px 9px;font-size:26px}
.qo-invite-count{font-size:16px}
@media(max-width:760px){
 .qo-referrals>.qo-panel{padding:10px 7px}
 .qo-referrals h2{--qo-fit-min:22px;font-size:30px;margin:0 0 14px}
 /* On a phone COPY sits under the address, which takes the panel's whole width at the reading size and wraps after a
    slash, question mark or equals sign when it does not fit. */
 .qo-copy-fit{flex-wrap:wrap;gap:8px}
 .qo-copy-address{--qo-fit-min:16px;flex-basis:100%;min-height:52px;font-size:16px;line-height:1.35}
 .qo-referrals .qo-copy .qo-key{flex:1 1 100%;min-width:0;min-height:50px;padding:7px 10px 10px;font-size:20px}
 .qo-referral-rates{grid-template-columns:minmax(78px,max-content) minmax(0,1fr);column-gap:8px;margin-top:14px}
 .qo-referral-rates>div{gap:0 8px;min-height:58px}
 .qo-referral-rates dt{font-size:34px}
 .qo-referral-rates dd{--qo-fit-min:16px}
 .qo .qo-paid-total{font-size:58px}
 .qo .qo-sol-value{font-size:17px;margin-bottom:14px}
 .qo-referral-stats>div{min-height:48px}
 .qo-referral-stats dt{font-size:18px}
 .qo-referral-stats dd{font-size:17px}
 .qo-payout-switch{width:min(246px,100%)}
 .qo-payout-switch>.qo-key{min-height:48px;font-size:24px}
 .qo-referral-mode>p,.qo-referrals .qo-referral-mode>.qo-muted{font-size:16px;line-height:1.4}
 .qo-referral-mode h2,.qo-referral-invite h2{margin-bottom:14px}
 .qo-share-kit{min-height:56px;font-size:22px}
 .qo-invite-count{font-size:16px}
}