/* ============================================================
   bex+Co. Referral Program: "My referrals" dashboard, page-specific CSS.
   Tokens, reset, base type, .btn/.nav/.card/.field family come from the
   kit + affiliate.css (linked before this file). This file adds only the
   dashboard components: link card, stat tiles, click bars, referral rows,
   share messages and the payout card.
   ============================================================ */

.fsent{font-size:.92rem;color:var(--primary);font-weight:600;margin:0}

/* ---------- dashboard cards ---------- */
.dcard{background:var(--tone);border:1px solid rgba(46,46,45,.09);border-radius:var(--r-card);
  box-shadow:var(--sh-sm);padding:24px 22px;max-width:640px;margin:0 auto 18px}
@media(max-width:520px){.dcard{padding:20px 18px}}
.dcard-head{margin-bottom:14px}
.dcard-head h2{margin:0;font-size:1.2rem}

/* ---------- link card ---------- */
.linkcard{text-align:left}
.linkrow{background:var(--sand);border:1px dashed rgba(28,94,98,.4);border-radius:var(--r-sm);
  padding:14px 16px;margin-bottom:14px;overflow-wrap:anywhere}
.dashlink{font-family:var(--sans);font-weight:700;font-size:1.02rem;color:var(--primary)}
.linkbtns{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.linkbtns .btn{flex:1 1 auto;min-width:110px;min-height:44px;text-align:center}
.qrwrap{display:flex;align-items:center;gap:14px}
.qrwrap canvas{border-radius:8px;border:1px solid rgba(46,46,45,.12);background:#fff}
.qrnote{font-size:.82rem;color:var(--secondary)}

/* ---------- stat tiles ---------- */
.stat-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;max-width:640px;margin:0 auto 6px}
@media(max-width:520px){.stat-tiles{gap:8px}}
.stat-tile{background:var(--tone);border:1px solid rgba(46,46,45,.09);border-radius:var(--r-card);
  padding:16px 8px;text-align:center;box-shadow:var(--sh-sm)}
.stat-num{display:block;font-family:var(--serif);font-size:clamp(1.5rem,5vw,2rem);color:var(--primary);
  font-variant-numeric:tabular-nums;line-height:1.15}
.stat-lab{display:block;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--secondary);font-weight:700;margin-top:4px}
.clickerr{max-width:640px;margin:0 auto 6px;font-size:.85rem;color:var(--secondary);text-align:center}

/* ---------- click bars ---------- */
.clickbars{display:flex;align-items:flex-end;gap:2px;height:40px;max-width:640px;margin:0 auto 24px;
  padding:6px 4px 0}
.cbar{flex:1 1 auto;background:var(--primary);opacity:.55;border-radius:2px 2px 0 0;min-width:2px}

/* ---------- referral rows ---------- */
.refrow{padding:14px 0;border-bottom:1px solid rgba(46,46,45,.08)}
.refrow:last-child{border-bottom:0}
.refhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.refname{font-weight:700;color:var(--ink)}
.refdate{font-size:.8rem;color:var(--secondary)}
.refsteps{display:flex;flex-wrap:wrap;gap:6px}
.refstep{font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;font-weight:700;
  padding:5px 9px;border-radius:999px;background:rgba(46,46,45,.07);color:var(--secondary)}
.refstep.done{background:rgba(28,94,98,.12);color:var(--primary)}
.refstage.muted{font-size:.85rem;color:var(--secondary);font-style:italic}

/* ---------- empty state + share messages ---------- */
.sharemsgs{display:grid;gap:12px}
.sharemsg{background:var(--sand);border-radius:var(--r-sm);padding:14px 16px;
  display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.sharemsg p{margin:0;font-size:.92rem;color:var(--ink);line-height:1.5}

/* ---------- payout ---------- */
/* :not([hidden]) so this display:flex never wins over the [hidden] state JS sets */
#payout-set:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;gap:12px;justify-content:space-between}

/* tap targets: the kit's own .btn/.btn-sm padding already clears 44px; this
   covers the plain inputs/selects on this page */
input,select{min-height:44px}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{
  outline:3px solid var(--primary);outline-offset:2px}


/* Loading: looks like the top of the dashboard, tall enough that the
   footer doesn't jump when the real page swaps in. */
#view-loading:not([hidden]){min-height:55vh;display:flex;align-items:center}
#view-loading .container{width:100%}

/* ============================================================
   Luxe pass (2026-09-23). Same language as /refer/: the deep lux panel for
   the hero (square edges), a tan body, and the iridescent glow reserved for
   the one thing that matters here: the link card. Load order: kit ->
   affiliate.css -> me.css -> bex-kit-lux-v1.css. Colors are kit and --lux-*
   tokens only. Motion: none added.
   ============================================================ */

/* ---------- hero ---------- */
.me-hero.lux-panel{border-radius:0;box-shadow:none}
.me-hero{position:relative;overflow:hidden;text-align:center;
  padding:clamp(44px,6vw,84px) 0 clamp(112px,11vw,150px)}
/* a soft iridescent light behind the headline, held low */
.me-hero::before{content:"";position:absolute;left:50%;top:10%;width:min(760px,120vw);aspect-ratio:2/1;
  transform:translateX(-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,var(--lux-iris) 0%,color-mix(in srgb,var(--mint) 50%,transparent) 45%,transparent 72%);
  opacity:.16;filter:blur(40px)}
.me-hero-in{position:relative;max-width:760px}
.me-pill:not([hidden]){display:inline-block}
.me-pill{margin:0 0 18px;padding:7px 16px;border-radius:999px;
  background:var(--lux-glass-bg);border:var(--lux-glass-line);color:var(--lux-paper);
  font-size:.9375rem;font-weight:700;letter-spacing:.02em}
.me-kicker{display:block;font-size:.9375rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;margin-bottom:16px}
.me-h1{font-size:clamp(2.5rem,5.6vw,4.4rem);line-height:1.04;margin:0 0 20px}
.me-br{display:block}
.me-lead{margin:0 auto;max-width:44ch;color:var(--lux-paper);opacity:.9;font-size:clamp(1.06rem,1.4vw,1.2rem)}

/* ---------- body: tan, tight under the hero ---------- */
.me-body{position:relative;isolation:isolate;padding-top:0}
.me-body:not([hidden]){display:flow-root}
.me-body .dcard{max-width:760px;border-radius:var(--lux-r-card);box-shadow:var(--lux-sh-md);
  border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);padding:28px 28px 26px;margin-bottom:22px}

/* ---------- THE LINK CARD: big, first, glowing ---------- */
.me-body .me-linkcard{position:relative;max-width:820px;
  margin:calc(-1 * clamp(80px,8vw,108px)) auto 26px;
  border:2px solid transparent;border-radius:var(--lux-r-panel);
  background:linear-gradient(var(--tone),var(--tone)) padding-box,var(--lux-iridescent) border-box;
  box-shadow:var(--lux-sh-lg);
  padding:clamp(24px,3.4vw,40px);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,3vw,40px);align-items:center}
/* the glow: iridescent ground blurred behind the card (me-body is the stacking
   context, so it paints over the hero edge and under the card) */
/* Toned down per Andrew 09-23: a soft halo, not a neon ring. */
.me-body .me-linkcard::before{content:"";position:absolute;inset:-4px;z-index:-1;border-radius:inherit;
  background:var(--lux-iridescent);filter:blur(16px);opacity:.45;pointer-events:none}
.me-label{font-size:.9375rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--primary);margin-bottom:12px}
.me-linkcard .linkrow{background:var(--lux-paper);border:1px solid color-mix(in srgb,var(--primary) 22%,transparent);
  border-radius:var(--r-img);padding:16px 18px;margin-bottom:18px}
.me-linkcard .dashlink{display:block;font-family:var(--sans);font-weight:700;color:var(--lux-deep);
  font-size:clamp(1.25rem,2.6vw,1.75rem);line-height:1.25;letter-spacing:-.005em;overflow-wrap:anywhere}
.me-linkcard .linkbtns{margin:0;gap:10px}
.me-linkcard .linkbtns .btn{min-height:48px}
.me-linkcard .me-copy{flex:1 1 100%;font-size:.9rem;padding:17px 28px}
.me-linkcard .qrwrap{flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:170px}
.me-linkcard .qrwrap canvas{width:140px;height:140px;padding:8px;border-radius:14px;background:var(--tone);
  border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:var(--sh-sm);image-rendering:pixelated}
.me-linkcard .qrnote{font-size:.9375rem;line-height:1.4;color:var(--secondary)}
@media(max-width:700px){
  .me-body .me-linkcard{grid-template-columns:1fr}
  .me-linkcard .qrwrap{flex-direction:row;max-width:none;text-align:left;justify-content:flex-start}
  .me-linkcard .qrwrap canvas{width:112px;height:112px;flex:none}
}

/* ---------- stats ---------- */
.me-body .stat-tiles{max-width:760px;gap:14px;margin-bottom:10px}
.me-body .stat-tile{border-radius:var(--lux-r-card);box-shadow:var(--lux-sh-md);border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);padding:20px 8px 18px}
.me-body .stat-num{color:var(--lux-deep);font-size:clamp(2rem,5vw,2.6rem);font-weight:500}
.me-body .stat-lab{font-size:.9375rem;letter-spacing:.02em;text-transform:none;margin-top:6px}
.me-body .clickbars{max-width:760px;height:44px;margin-bottom:30px}
.me-body .clickbars[hidden]{display:none}
.me-body .cbar{opacity:.5}
.me-body .clickerr{font-size:.9375rem}

/* ---------- share messages ---------- */
.me-msgs{max-width:1040px;margin:clamp(28px,4vw,48px) auto clamp(30px,4vw,48px)}
.me-h2{text-align:center;font-size:clamp(1.8rem,3.4vw,2.6rem);line-height:1.1;margin:0 0 clamp(18px,2.4vw,28px)}
.me-msgs .sharemsgs{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:860px){.me-msgs .sharemsgs{grid-template-columns:1fr}}
.me-msgs .sharemsg{background:var(--tone);border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  border-radius:var(--lux-r-card);box-shadow:var(--lux-sh-md);padding:22px 22px 20px;gap:12px}
.me-msglabel{display:inline-block;font-size:.9375rem;font-weight:700;color:var(--primary);
  padding:5px 12px;border-radius:999px;background:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55)),var(--lux-iridescent)}
.me-msgs .sharemsg p{font-size:1rem;line-height:1.6;flex:1 1 auto}
.me-msgs .sharemsg .lnk{font-weight:700;color:var(--primary);overflow-wrap:anywhere}
.me-msgs .sharemsg .btn{margin-top:auto}

/* ---------- referrals, payout, how it works: restyle only ---------- */
.me-body .dcard-head h2{font-size:1.5rem}
.me-body .refstep{font-size:.9375rem;letter-spacing:.01em;text-transform:none;padding:5px 12px}
.me-body .refdate,.me-body .refstage.muted{font-size:.9375rem}
.me-empty{font-size:1.1rem}
.me-body .paylist li{background:var(--lux-paper);border-radius:var(--r-img)}
.me-body .paylist li b{display:inline-flex;align-items:center;justify-content:center;flex:0 0 36px;width:36px;height:36px;
  border-radius:50%;font-size:1.05rem;color:var(--primary);
  background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),var(--lux-iridescent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--lux-deep) 10%,transparent)}
.me-body .paylist li{align-items:center}
.me-body .fnote{font-size:.9375rem}

/* ---------- signed out / expired: same card language ---------- */
#view-signedout .card,#view-expired .card{border-radius:var(--lux-r-panel);box-shadow:var(--lux-sh-md);border:1px solid color-mix(in srgb,var(--ink) 7%,transparent)}
#view-signedout .fl,#view-expired .fl{font-size:.9375rem;letter-spacing:.01em;text-transform:none;color:var(--ink)}
.me-body .dcard-head .eyebrow{font-size:.9375rem;letter-spacing:.16em;margin-bottom:8px}
/* the kit's .btn is display:inline-flex, which beat [hidden]: Share showed (and did
   nothing) on browsers without navigator.share. Hidden means hidden. */
#btn-share[hidden]{display:none}
@media(max-width:520px){
  .me-body .me-linkcard{padding:22px 18px}
  .me-linkcard .linkrow{padding:13px 12px}
  .me-linkcard .dashlink{font-size:clamp(1rem,4.5vw,1.25rem)}
  .me-body .stat-tiles{gap:10px}
  .me-body .stat-tile{padding:16px 6px 14px}
}
.me-body .paylist{max-width:none}
/* the sign-in screens fill the window, so the footer never floats mid-screen */
#view-signedout:not([hidden]),#view-expired:not([hidden]){min-height:calc(100svh - var(--refer-nav-h))}