/* =============================================================================
   ruopass.com / rallypass.bio — the shared identity origins
   =============================================================================
   Operator, 2026-09-16: "ruopass.com does fuck all" — "neither does
   rallypass.bio" — "make ruopass a sexy login site sexy ui" — "light colors" —
   "and rally pass sexy with peprally colors".

   ── This is NOT a third palette ─────────────────────────────────────────────
   `shared/auth.css` owns the two presentations and every surface token:

     .ruo-auth--light   RUO Pass's own neutrals, keeping the brand's accent
     .ruo-auth--rally   every surface derived from the brand's --checkout-*

   Both origins render inside one of those two roots, chosen by
   `auth_surface_class(origin.pass_key)` — the SAME helper, off the SAME
   `RallyPass.store?` list. This file adds only what an auth form never
   needed: an accent for a door that wears no brand, and the blocks for a
   landing page and an order list.

   It declares NO --auth-* token. A guard asserts that, because the cheapest
   way to "fix" a contrast problem here would be to redeclare one — and then
   the palette is forked, the fork is invisible, and it stays invisible until
   somebody re-themes a storefront and the login is left behind.

   ── Why the RUO door needs an accent of its own ─────────────────────────────
   `--auth-accent` is `var(--checkout-accent, #E8550F)`. On a brand door
   --checkout-accent comes from that brand's sheet. ruopass.com links NO brand
   sheet — deliberately, because a page quoting another brand's tokens is that
   brand's page with the badge filed off — so without this it would fall
   through to the literal fallback, which is PepRally's Ember, on the one
   surface whose entire job is to name no brand.

   Scoped to `.ruo-pass-origin--ruopass`, a class that exists only on
   ruopass.com. Scoping it to `.ruo-pass-origin` would be (0,1,0), equal to
   `.peprally`, later in source order — and would silently repaint the Rally
   Pass door in the neutral accent.

   Measured: #FFFFFF on #1F5F5B is 7.38:1 (AA and AAA for body text). The
   hover is darker, so it can only improve.

   ── Every selector names the block root ─────────────────────────────────────
   `.rp-site .rp-site__x`, and on an anchor `.rp-site a.rp-site__x`. A brand
   sheet styles bare elements inside its own scope — `.peprally p` is (0,1,1)
   and a lone class is (0,1,0), so it loses, and it takes the TYPOGRAPHY with
   it, not only the colour. On rallypass.bio peprally.css is loaded, so this
   is not a precaution: it is the live cascade.

   ── The accent is a fill and a rule, never a letterform ────────────────────
   Same rule auth.css follows. A light door needs a darker accent for text and
   a dark door needs a lighter one; one derived token cannot be both, so
   hierarchy here is size, weight and letter-spacing.
   ============================================================================= */

/* ── The RUO Pass door's own accent ────────────────────────────────────── */

.ruo-pass-origin--ruopass {
  --checkout-accent: #1F5F5B;
  --checkout-accent-hover: #174946;
  --checkout-font-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --checkout-font-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ── The site layout, in place of the auth grid ──────────────────────────
   `.ruo-auth` is a grid built for one page shape: a headline column and a
   form card beside it. The landing and the member page are neither. Written
   `.ruo-auth.rp-site` so it wins on SPECIFICITY (0,2,0) rather than on source
   order — source order survives a file being reordered only by accident, and
   this repo has already shipped a padding shorthand that destroyed the rule
   above it for exactly that reason.

   The palette, the wash and the stacking context are all untouched. */
.ruo-auth.rp-site {
  display: block;
  align-content: normal;
  padding: 1.5rem 1.15rem 3.5rem;
}

.rp-site .rp-site__wrap {
  max-width: 48rem;
  margin: 0 auto;
}

/* ── The signed-in bar ─────────────────────────────────────────────────── */

.rp-site .rp-site__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
}

.rp-site a.rp-site__nav-mark {
  font-family: var(--auth-font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--auth-text);
  text-decoration: none;
}

.rp-site a.rp-site__nav-mark:hover {
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-color: var(--auth-accent);
}

.rp-site .rp-site__nav-form { margin: 0; }

/* Sign out is a real form POST, so it is a <button> and not a link. The
   colour is the panel's own ink, because an accent-coloured letterform is
   the one thing this palette cannot guarantee on both doors. */
.rp-site .rp-site__nav-out {
  padding: 0.5rem 0.85rem;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--auth-text);
  background: var(--auth-raise);
  border: 1px solid var(--auth-border);
  border-radius: 999px;
  cursor: pointer;
}

.rp-site .rp-site__nav-out:hover { border-color: var(--auth-accent); }

/* ── The landing call to action ─────────────────────────────────────────
   Both carry the `a` qualifier. `.brand a { color: var(--color-accent) }` is
   (0,1,1) and beats a lone class — an accent-filled button whose text is
   repainted the accent is 1:1 invisible text, which shipped on four brands. */

.rp-site .rp-site__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin: 2rem 0 0;
}

.rp-site a.rp-site__cta {
  display: inline-block;
  padding: 0.9rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--auth-on-cta);
  background: var(--auth-cta);
  border: 1px solid var(--auth-cta);
  border-radius: 10px;
  transition: background-color 140ms ease;
}

.rp-site a.rp-site__cta:hover {
  background: var(--auth-cta-hover);
  border-color: var(--auth-cta-hover);
}

.rp-site a.rp-site__ghost {
  display: inline-block;
  padding: 0.9rem 1.5rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--auth-text);
  background: var(--auth-panel);
  border: 1px solid var(--auth-border);
  border-radius: 10px;
}

.rp-site a.rp-site__ghost:hover { border-color: var(--auth-accent); }

/* ── The member's page ──────────────────────────────────────────────────── */

.rp-site .rp-site__head { margin-bottom: 1.5rem; }

.rp-site .rp-site__title {
  margin: 0;
  font-family: var(--auth-font-display);
  font-size: clamp(1.5rem, 5.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--auth-text);
}

.rp-site .rp-site__subtitle {
  margin: 0.4rem 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--auth-muted);
}

.rp-site .rp-site__card {
  padding: 1.35rem 1.25rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--auth-border);
  border-radius: 16px;
  background: var(--auth-panel);
  color: var(--auth-text);
  box-shadow: var(--auth-lift);
}

.rp-site .rp-site__card-title {
  margin: 0 0 1rem;
  font-family: var(--auth-font-display);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--auth-text);
}

.rp-site .rp-site__note {
  margin: 1rem 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--auth-muted);
}

.rp-site .rp-site__empty {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--auth-muted);
}

/* ── The order list ─────────────────────────────────────────────────────── */

.rp-site .rp-site__orders {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rp-site .rp-site__order {
  padding: 0.95rem 0;
  border-top: 1px solid var(--auth-border);
}

.rp-site .rp-site__order:first-child {
  padding-top: 0;
  border-top: 0;
}

.rp-site .rp-site__order-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.rp-site .rp-site__order-brand {
  font-family: var(--auth-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--auth-text);
}

/* The status carries the panel's ink and a coloured RULE, never coloured
   letterforms — the same decision the alert box makes. A tone that had to be
   legible as text would need contrast-testing against two different panels,
   and the tone that failed would fail silently. */
.rp-site .rp-site__chip {
  flex: none;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--auth-border);
  border-left-width: 3px;
  border-left-color: var(--rp-tone-wait);
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--auth-text);
  background: var(--auth-raise);
}

.rp-site .rp-site__chip--ok    { border-left-color: var(--rp-tone-ok); }
.rp-site .rp-site__chip--wait  { border-left-color: var(--rp-tone-wait); }
.rp-site .rp-site__chip--alert { border-left-color: var(--rp-tone-alert); }
.rp-site .rp-site__chip--off   { border-left-color: var(--rp-tone-off); }

.rp-site .rp-site__order-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--auth-muted);
}

.rp-site .rp-site__order-total {
  font-weight: 700;
  color: var(--auth-text);
}

.rp-site .rp-site__order-note {
  margin: 0.3rem 0 0;
  font-size: 0.84rem;
  color: var(--auth-muted);
}

/* ── Points ─────────────────────────────────────────────────────────────── */

.rp-site .rp-site__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.rp-site .rp-site__stat {
  padding-left: 0.85rem;
  border-left: 2px solid color-mix(in srgb, var(--auth-accent) 55%, var(--auth-panel));
}

.rp-site .rp-site__stat-value {
  display: block;
  font-family: var(--auth-font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--auth-text);
}

.rp-site .rp-site__stat-label {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auth-muted);
}

.rp-site .rp-site__ladder { margin-top: 1.35rem; }

.rp-site .rp-site__code {
  margin: 0;
  padding: 0.85rem 1rem;
  border: 1px dashed var(--auth-accent);
  border-radius: 10px;
  background: var(--auth-raise);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--auth-text);
}

/* ── The ballot ─────────────────────────────────────────────────────────── */

.rp-site .rp-site__ballot {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.rp-site .rp-site__ballot-form { margin: 0; }

.rp-site .rp-site__ballot-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 1rem;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 600;
  text-align: left;
  color: var(--auth-text);
  background: var(--auth-raise);
  border: 1px solid var(--auth-border);
  border-radius: 10px;
  cursor: pointer;
}

.rp-site .rp-site__ballot-option:hover { border-color: var(--auth-accent); }

.rp-site .rp-site__ballot-option.is-mine {
  border-color: var(--auth-accent);
  border-left-width: 3px;
}

/* The vial's collective content. Same supporting role as the mark
   beside it, so it takes the same token rather than a new one — and
   like every rule in this sheet it names the block root, because a
   lone class is (0,1,0) and loses to the brand sheet's bare-element
   rules on typography as well as on colour. */
.rp-site .rp-site__ballot-dose {
  flex: none;
  margin-left: 8px;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  color: var(--auth-muted);
}

.rp-site .rp-site__ballot-mark {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--auth-muted);
}

/* ── Tones ───────────────────────────────────────────────────────────────
   Decoration only: every one of these is used exclusively as a border
   colour, never as `color`, so none of them carries a contrast duty and none
   has to be legible on two different panels. Declared on the block root so
   they are one table rather than four literals scattered through the rules. */
.rp-site {
  --rp-tone-ok:    #2E9E6B;
  --rp-tone-wait:  #C08A2E;
  --rp-tone-alert: #D92D20;
  --rp-tone-off:   #8A8A94;
}

/* ── Wider than a phone ─────────────────────────────────────────────────
   min-width only, mobile first: most traffic is paid mobile, and the wider
   layout is the enhancement rather than the base. */
@media (min-width: 46rem) {
  .ruo-auth.rp-site { padding: 3.5rem clamp(2rem, 6vw, 5rem) 4rem; }

  .rp-site .rp-site__card { padding: 1.75rem 1.85rem; }

  .rp-site .rp-site__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .rp-site a.rp-site__cta { transition: none; }
}