/* =============================================================================
   The member area on a phone — 2026-10-23
   =============================================================================
   Operator: "production is shit on my phone ... 83% of our customers visit
   with the phone ... fucking test it." Every rule here answers a defect a
   390px review found and test/system/member_area_on_a_phone_test.rb measures
   in a real browser. Loaded by layouts/member (and layouts/peprally for the
   Rally page's team-buying link). Kept in its own sheet so it does not
   collide with the brand sheets other work edits.

   Rules this sheet keeps:
   · every selector names its block root (`.rally-pass …`, `.rp-tabs …`,
     `.rally-invite …`, `.peprally-ss …`), so a brand sheet's
     `.peprally p` / `.peprally a` at (0,1,1) cannot take the rule over;
   · anchors carry `a.`;
   · no literal colour — brand tokens only; no opacity on text;
   · phone-only rules sit in a max-width query, so the desk (1280) is
     exactly what it was.
   ========================================================================== */

/* ── Long words wrap, at every width ───────────────────────────────────
   A Rally title is a trademark plus a code — "UNDERGROUNDAFJMGQ…" has no
   break opportunity, so it laid the page out 553px wide in a 390px phone.
   Headings and the controls that print a title may break anywhere; body
   copy breaks only a word that would otherwise overflow. */
.rally-pass-body .rally-pass { overflow-wrap: break-word; }
.rally-pass-body .rally-pass h1,
.rally-pass-body .rally-pass h2,
.rally-pass-body .rally-pass h3,
.rally-pass-body .rally-pass .rally-pass__code,
.rally-pass-body .rally-pass a.rally-welcome__cta,
.rally-pass-body .rally-pass button.rally-welcome__cta {
  overflow-wrap: anywhere;
  min-width: 0;
  max-width: 100%;
}

/* ── The squadron share drawer ─────────────────────────────────────────
   The link stays out; the three written messages fold behind one summary
   that is itself a 44px control. Each box is sized to its whole text. */
.rally-pass .squadron__more { margin: 4px 0 0; }
/* Newer Chrome hides a closed <details> with content-visibility, which
   still lays the children out (the PepRally menu found this first). A
   closed drawer has no boxes at all. */
.rally-pass .squadron__more:not([open]) > :not(summary) { display: none; }
.rally-pass .squadron__more-summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text, #ffffff);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.rally-pass .squadron__more .squadron__message {
  min-height: 0;
  field-sizing: content;
  resize: none;
}

/* ── The Rally page's link to the Rally Pass is a LINK, not a button ──
   It sat in the middle of a sentence as a full ember pill. Ink is the
   page's own text colour (accent as ink fails AA on Carbon); the
   underline is what says "link". */
.peprally .peprally-ss a.peprally-ss__link {
  display: inline;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--color-text);
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── The invite card wears PepRally, not teal ──────────────────────────
   Its dark presentation brought its own teal accent and a teal Copy link
   with dark ink — off the brand on the one card meant to be sent out.
   (0,3,0) beats the card's own `.rally-invite.rally-invite--dark`.
   White on --cta-accent is 5.03:1; --color-accent as an eyebrow on the
   card is 5.0:1. */
.peprally .rally-invite.rally-invite--dark {
  --ri-accent: var(--color-accent);
  --ri-cta-bg: var(--cta-accent);
  --ri-cta-ink: var(--rally-band-ink);
}

/* ── Locked redeem rungs read as locked ────────────────────────────────
   A rung the balance cannot reach is not filled like one it can. */
.rally-pass .rally-pass__tiers .rally-pass__tier--locked {
  background: transparent;
  box-shadow: none;
}

/* "points" under each rung was text at 0.82 opacity — alpha on text makes
   its contrast a guess. Quieter by size, not by alpha. */
.rally-pass .rally-pass__tiers .rally-pass__tier-cost { opacity: 1; }

@media (max-width: 759.98px) {
  /* ── The tab rail wraps instead of hiding VOTE, ORDERS and ACCOUNT ──
     It was one scrolling row with its scrollbar hidden, so a phone saw
     "DEALS RANK UP POINTS VO" and no sign anything followed. Two rows,
     every tab on screen, the open one underlined where it sits. */
  .rp-tabs .rp-tabs__list {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 0;
  }
  .rp-tabs .rp-tabs__tab {
    padding: 12px 12px 14px;
    letter-spacing: 0.1em;
  }

  /* ── Points: the balance once, the rungs two by two ──────────────────
     The ladder repeated the card's balance directly beneath it, and four
     rungs wrapped 3 + 1. */
  .rally-pass .rally-pass__card--points .rally-ladder__balance,
  .rally-pass .rally-pass__card--points .rally-ladder__balance-sub { display: none; }
  .rally-pass .rally-pass__card--points .rally-pass__tiers {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .rally-pass .rally-pass__card--points .rally-pass__tier { min-width: 0; }

  /* ── "Commit — charges nothing" on one line ─────────────────────────
     It wrapped with its arrow stranded on a line of its own. Tighter
     padding and tracking keep the whole sentence on one line at 360px. */
  .rally-pass button.rally-welcome__cta.squadron__commit {
    white-space: nowrap;
    padding: 16px 20px;
    font-size: 14px;
    letter-spacing: 0;
    gap: 8px;
  }
}