/* ═══════════════════════════════════════════════════════════════════════
   BBA Peptides — earn surfaces (account, /refer, /partner, /storefront-terms).
   Composes /bba-ds.css only: every color, size, radius and container is a
   token; the shell, buttons, fields and chips come from the design system.
   This sheet holds the page sections these four pages share: the panel, the
   stat grid, the ledger table, the progress bar, the tier ladder, the tabs,
   the notice and the step list. Markup contracts (ids/classes the tests and
   other scripts pin) are untouched; .partner-grid / .partner-stat /
   .partner-link keep resolving as aliases of the system's stat grid.
   ═══════════════════════════════════════════════════════════════════════ */
@import url("/bba-ds.css?v=8130d69785");

/* ── page shell: one container, one left edge; a 760px column for records ── */
.earn-shell{max-width:var(--wrap);margin-inline:auto;padding:var(--s-5) var(--gutter) var(--s-7)}
.earn-col{max-width:calc(var(--measure) + 2*var(--s-6))}
.page-head{margin-bottom:var(--s-5)}
.page-head .h1{margin:var(--s-1) 0 var(--s-2)}
.page-head .meta{max-width:var(--measure)}
.hidden{display:none !important}

/* ── panel: white at alpha over the paper, one hairline, one radius ── */
.panel{background:var(--c-surface);border:.8px solid var(--c-line);border-radius:var(--r-surface);padding:var(--s-4);margin-bottom:var(--s-3)}
@media (min-width:720px){.panel{padding:var(--s-5)}}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-3);flex-wrap:wrap;margin-bottom:var(--s-3)}
.panel-title{font:600 var(--t-lg)/1.2 var(--f-sans);letter-spacing:-.01em;margin:var(--s-1) 0 0}
.panel-sub{font:600 var(--t-body)/1.3 var(--f-sans);margin:var(--s-5) 0 var(--s-2)}
.panel .meta+.meta{margin-top:var(--s-2)}
.panel-section{margin-top:var(--s-5);padding-top:var(--s-4);border-top:.8px solid var(--c-line)}
.panel-section:first-child{margin-top:0;padding-top:0;border-top:0}
.panel-section .panel-sub{margin-top:0}

/* ── tabs (sign in / create account) ── */
.tabs{display:flex;gap:var(--s-4);border-bottom:.8px solid var(--c-line);margin:0 0 var(--s-4)}
.tab{min-height:44px;padding:0;border:0;border-bottom:2px solid transparent;margin-bottom:-.8px;background:none;font:600 var(--t-sm)/1.2 var(--f-sans);color:var(--c-ink-2);cursor:pointer}
.tab:hover{color:var(--c-ink)}
.tab.active{color:var(--c-signal);border-bottom-color:var(--c-signal)}

/* ── forms ── */
.form-row{margin:0 0 var(--s-3)}
.form-row:last-child{margin-bottom:0}
.form-actions{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4)}
.form-grid{display:grid;gap:var(--s-3)}
@media (min-width:720px){.form-grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field--mono{font-family:var(--f-mono);font-size:var(--t-sm)}
.field[readonly]{color:var(--c-ink-2)}
.link-line,.partner-link{display:flex;align-items:center;gap:var(--s-2);margin-top:var(--s-1)}
.link-line .field,.partner-link .field{flex:1 1 auto;min-width:0}
.link-line .btn,.partner-link .btn{flex:none}
.input-prefix{position:relative}
.input-prefix>span{position:absolute;left:var(--s-3);top:50%;transform:translateY(-50%);font:500 16px/1 var(--f-mono);color:var(--c-ink-2);pointer-events:none}
.input-prefix>.field{padding-left:calc(2*var(--s-3));font-family:var(--f-mono);font-variant-numeric:tabular-nums slashed-zero}

/* ── notice (status line) ── */
.notice{padding:var(--s-2) var(--s-3);border:.8px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface-solid);color:var(--c-ink);font:400 var(--t-sm)/1.5 var(--f-sans);margin:0 0 var(--s-3)}
.notice.ok{border-color:var(--c-signal);color:var(--c-signal)}
.notice.err,.notice[data-kind="err"]{border-color:var(--c-warn);color:var(--c-warn)}
.notice:empty{display:none}
.verify{padding:var(--s-2) var(--s-3);border:.8px solid var(--c-warn);border-radius:var(--r-control);color:var(--c-warn);font:400 var(--t-sm)/1.5 var(--f-sans);margin-top:var(--s-3)}
.verify .btn{margin-top:var(--s-2)}

/* ── stat grid (the referral and storefront figures) ── */
.stat-grid,.partner-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);margin:var(--s-3) 0 0}
@media (min-width:720px){.stat-grid,.partner-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stat,.partner-stat{display:flex;flex-direction:column;gap:2px;min-width:0;padding:var(--s-3);border:.8px solid var(--c-line);border-radius:var(--r-control);background:var(--c-surface-solid)}
.stat>span:first-child,.partner-stat>span:first-child,.stat-label{font:400 var(--t-xs)/16px var(--f-sans);color:var(--c-ink-2)}
.stat strong,.partner-stat strong{font:500 var(--t-lg)/1.15 var(--f-mono);color:var(--c-ink);font-variant-numeric:tabular-nums slashed-zero;letter-spacing:-.01em;overflow-wrap:anywhere}
.stat small,.partner-stat small{font:400 var(--t-xs)/16px var(--f-sans);color:var(--c-ink-2)}
.stat--wide{grid-column:1 / -1}

/* ── progress to the next tier ── */
.progress-row{margin-top:var(--s-3)}
.progress{height:6px;border-radius:var(--r-pill);background:var(--c-line);overflow:hidden}
.progress-fill{display:block;height:100%;width:0;border-radius:inherit;background:var(--c-signal);transition:width var(--dur) var(--ease)}
.progress-row .meta{margin-top:var(--s-2)}

/* ── ledger tables (orders, statement, payouts, activity, the tier ladder) ── */
.tbl-wrap{overflow:auto;margin-top:var(--s-3);-webkit-overflow-scrolling:touch}
.tbl{width:100%;border-collapse:collapse;font:400 var(--t-sm)/1.4 var(--f-sans)}
.tbl th{text-align:left;padding:0 var(--s-2) var(--s-2) 0;border-bottom:.8px solid var(--c-ink);font:500 var(--t-xs)/16px var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--c-ink-2);white-space:nowrap}
.tbl td{padding:var(--s-2) var(--s-2) var(--s-2) 0;border-bottom:.8px solid var(--c-line);vertical-align:top}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl .num,.tbl td.mono,.tbl .code{font-family:var(--f-mono);font-variant-numeric:tabular-nums slashed-zero}
.tbl th.num,.tbl td.num{text-align:right;white-space:nowrap}
.tbl a{color:var(--c-signal)}
.tbl .tx{font-family:var(--f-mono);font-size:var(--t-xs);overflow-wrap:anywhere}
.status{display:inline-block;font:500 var(--t-xs)/16px var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--c-ink-2);white-space:nowrap}
.status.paid,.status.shipped,.status.earned,.status[data-tone="ok"]{color:var(--c-signal)}
.status.cancelled,.status.void,.status.reversed,.status.rejected,.status[data-tone="off"]{color:var(--c-ink-2)}
.status.awaiting_payment,.status.awaiting_verification,.status.pending,.status.requested,.status.approved,.status[data-tone="warn"]{color:var(--c-warn)}
.ladder td:first-child{font-weight:600;color:var(--c-ink)}
.ladder tr.is-current td{background:var(--c-signal-tint)}

/* ── step list (how it works) ── */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:var(--s-3)}
.steps li{position:relative;padding-left:calc(var(--s-5) + var(--s-2));counter-increment:step}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:2px;font:500 var(--t-sm)/1.4 var(--f-mono);color:var(--c-signal);letter-spacing:.04em}
.steps li b{display:block;font-weight:600;color:var(--c-ink)}
.steps li span{color:var(--c-ink-2)}

/* ── definition rows (what the program is) ── */
.kv{margin:0;display:grid;gap:0}
.kv>div{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-1);padding:var(--s-3) 0;border-top:.8px solid var(--c-line)}
.kv>div:first-child{border-top:0;padding-top:0}
.kv dt{margin:0;font:500 var(--t-xs)/16px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c-signal)}
.kv dd{margin:0;color:var(--c-ink)}
.kv dd .num{font-family:var(--f-mono)}
@media (min-width:720px){.kv>div{grid-template-columns:200px minmax(0,1fr);gap:var(--s-3)}}

/* ── FAQ (details) ── */
.faq{margin:0;padding:0;border-top:.8px solid var(--c-line)}
.faq details{border-bottom:.8px solid var(--c-line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:48px;padding:var(--s-2) 0;cursor:pointer;list-style:none;font:600 var(--t-body)/1.4 var(--f-sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 var(--t-lg)/1 var(--f-mono);color:var(--c-ink-2);flex:none}
.faq details[open] summary::after{content:"−"}
.faq .faq-a{padding:0 0 var(--s-3);color:var(--c-ink-2);max-width:var(--measure)}
.faq .faq-a p+p{margin-top:var(--s-2)}

/* ── two-column section on wide screens (/refer: text + ladder) ── */
.split{display:grid;gap:var(--s-5)}
@media (min-width:960px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.cta-row{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center;margin-top:var(--s-4)}

/* ── legal reading column ── */
.legal .h2{font-size:var(--t-lg);margin:var(--s-6) 0 var(--s-2)}
.legal ul{margin:0 0 var(--s-3);padding-left:var(--s-4);color:var(--c-ink-2)}
.legal li{margin:0 0 var(--s-2)}
.legal li+li{margin-top:var(--s-1)}
.legal p{color:var(--c-ink-2)}
.legal p+p,.legal ul+p,.legal p+ul{margin-top:var(--s-3)}
.legal b,.legal strong{color:var(--c-ink)}
.legal .flag{border-left:2px solid var(--c-accent);padding:var(--s-3) var(--s-3) var(--s-3) var(--s-4);margin:var(--s-3) 0;background:var(--c-surface);border-radius:0 var(--r-control) var(--r-control) 0}
.legal .flag p{color:var(--c-ink)}
.legal .updated{font:400 var(--t-xs)/16px var(--f-mono);color:var(--c-ink-2);margin:var(--s-2) 0 0}
.legal .foot{margin-top:var(--s-6);padding-top:var(--s-3);border-top:.8px solid var(--c-line)}
.legal .num{font-family:var(--f-mono);font-variant-numeric:tabular-nums slashed-zero}

/* reduced motion = full stop */
@media (prefers-reduced-motion:reduce){.progress-fill{transition:none}}