/* ==========================================================================
   RiftFantasy — pick-a-team page

   Mobile-first. Most visitors arrive on a phone from a link in a Twitter
   thread and leave by pasting text back into it, so the phone layout is the
   base and the desktop grid is the media query.

   Colours come entirely from the season theme tokens in
   static/css/season-theme.css (--paper / --plate / --rule / --ink* / --gold),
   so the page reskins with every season and with the classic-palette toggle.
   Nothing here hardcodes a colour except the over-budget red, which reuses
   --red from the same file.

   Deliberate omissions:
   - No backdrop-filter (unreliable on iOS — see the Coolify notes).
   - No hover-only affordances; every state has to read on tap.
   - dvh, not vh: mobile Safari's address bar makes vh wrong.
   ========================================================================== */

.rf {
  max-width: 940px;
  margin: 0 auto;
  /* Bottom padding clears base.html's fixed #ad-bottom-bar (~58px) and the
     iOS home indicator. */
  padding: 1.6rem var(--gut) calc(5rem + env(safe-area-inset-bottom, 0px));
}

.rf-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── header ─────────────────────────────────────────────────────────────── */

.rf-head { margin-bottom: 1.1rem; }
.rf-head h1 { margin: 0 0 .2rem; font-size: 1.7rem; letter-spacing: -.01em; }
.rf-tag { margin: 0 0 .35rem; font-size: 1rem; color: var(--ink-2); }
.rf-meta { margin: 0; color: var(--ink-3); font-size: .86rem; }

.rf-alert {
  margin: 0 0 1rem; padding: .7rem .85rem;
  border: 1px solid var(--rule); border-left: 3px solid var(--acc);
  border-radius: 8px; background: var(--plate); font-size: .9rem;
}
.rf-alert--muted { border-left-color: var(--rule); color: var(--ink-3); }

/* ── search ─────────────────────────────────────────────────────────────── */

.rf-search { display: flex; gap: .5rem; margin-bottom: .8rem; }
.rf-search input {
  flex: 1; min-width: 0;
  padding: .7rem .8rem;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--plate); color: var(--ink);
  /* 16px minimum or iOS zooms on focus and never zooms back. */
  font: inherit; font-size: 16px;
}
.rf-search input::placeholder { color: var(--ink-4); }

.rf-results {
  list-style: none; margin: 0 0 1rem; padding: 0;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--plate);
  max-height: 52dvh; overflow-y: auto;
}
.rf-results li + li { border-top: 1px solid var(--rule-2); }

/* ── tier sheet ─────────────────────────────────────────────────────────── */

.rf-sheet { display: grid; gap: .9rem; }

.rf-tier {
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--plate); padding: .85rem .9rem;
}
.rf-tier-h { display: flex; align-items: baseline; gap: .55rem; }
.rf-tier-name { font-weight: 700; font-size: 1rem; color: var(--ink); }
.rf-tier-gold { margin-left: auto; font-weight: 700; color: var(--gold); }
.rf-tier-n { color: var(--ink-4); font-size: .78rem; min-width: 2.6em; text-align: right; }
.rf-tier-blurb { margin: .25rem 0 .6rem; color: var(--ink-3); font-size: .84rem; }
.rf-tier-more { margin: 0; color: var(--ink-3); font-size: .86rem; font-style: italic; }

/* The top tier earns a little more presence — it is the scarce one. */
.rf-tier--legend { border-color: rgba(var(--gold-rgb), .5); }

.rf-players { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }

/* ── a player row ───────────────────────────────────────────────────────── */

.rf-pick {
  display: flex; align-items: center; gap: .55rem;
  width: 100%;
  /* >=44px tap target. */
  min-height: 44px; padding: .45rem .6rem;
  border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.rf-pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rf-pick[aria-pressed="true"] {
  border-color: var(--gold); background: var(--plate-2);
}
.rf-pick[aria-pressed="true"] .rf-pn::before { content: "✓ "; color: var(--gold); }
.rf-pick[disabled] { opacity: .45; cursor: not-allowed; }
/* "Team is full" is NOT the same as "you cannot afford this" — dimming the
   entire sheet the moment a 5th player is picked makes the page look broken.
   Full rosters keep normal contrast and explain themselves on tap. */
.rf-pick.is-blocked { opacity: 1; cursor: pointer; }

.rf-pn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-pc { color: var(--ink-4); font-size: .78rem; flex-shrink: 0; }
.rf-pe {
  color: var(--ink-3); font-size: .78rem; flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
/* In search results the row is name / community / gold. The community is the
   first thing to give up when space runs out — the gold is not optional. */
@media (max-width: 26rem) { .rf-results .rf-pc { display: none; } }
.rf-pe { max-width: 45%; overflow: hidden; text-overflow: ellipsis; }

/* ── gold ───────────────────────────────────────────────────────────────── */

.rf-gold { display: inline-flex; align-items: center; gap: .22em; white-space: nowrap; color: var(--gold); }
.rf-gold-n { font-variant-numeric: tabular-nums; }
.rf-gold-i { flex-shrink: 0; display: block; }

/* ── output / check ─────────────────────────────────────────────────────── */

.rf-out, .rf-check {
  margin-top: 1.2rem; padding: .95rem;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--plate);
}
.rf-out h2, .rf-check h2 { margin: 0 0 .6rem; font-size: 1rem; color: var(--ink); }
.rf-muted { color: var(--ink-3); font-size: .86rem; margin: 0 0 .6rem; }

.rf-outtext {
  margin: 0 0 .8rem; padding: .8rem;
  border: 1px solid var(--rule-2); border-radius: 8px;
  background: var(--paper); color: var(--ink);
  font-size: .88rem; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}

.rf-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

.rf-btn {
  min-height: 44px; padding: .55rem 1rem;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--plate-2); color: var(--ink);
  font: inherit; font-weight: 600; cursor: pointer;
}
.rf-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rf-btn--primary { border-color: var(--gold); color: var(--gold); }
.rf-btn--ghost { background: transparent; font-weight: 500; color: var(--ink-3); }

.rf-checkform { display: flex; gap: .5rem; }
.rf-checkform input {
  flex: 1; min-width: 0; padding: .7rem .8rem;
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  font: inherit; font-size: 16px;
  font-variant-numeric: tabular-nums; letter-spacing: .06em;
}

/* ── your team ─────────────────────────────────────────────────────────── */

/* Full-width slot rows, not a five-across strip. The strip gave each name
   ~70px on a 400px phone and rendered them as unreadable stubs
   ("ICE Squirt", "e Crusher"). */
.rf-team {
  margin: 0 0 1.1rem; padding: .85rem .9rem;
  border: 1px solid rgba(var(--gold-rgb), .45); border-radius: 12px;
  background: var(--plate-2);
}
.rf-team-h { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem; }
.rf-team-h h2 { margin: 0; font-size: 1rem; color: var(--ink); }

.rf-budget {
  margin-left: auto; display: inline-flex; align-items: baseline; gap: .15rem;
  font-weight: 700; font-variant-numeric: tabular-nums; color: var(--gold);
}
/* The coin has to opt out of the baseline alignment. In the budget the gold
   span holds ONLY the svg (no number), so its baseline is the svg's bottom
   margin edge and the coin sinks below the digits. Tier headers are unaffected
   because their number comes first and supplies the baseline. */
.rf-budget .rf-gold { align-self: center; }
.rf-of { color: var(--ink-4); font-weight: 500; font-size: .85rem; }
.is-over .rf-spend, .rf-spend.is-over { color: var(--red); }

.rf-slots { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.rf-slots li {
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .4rem .6rem;
  border: 1px dashed var(--rule); border-radius: 8px;
  color: var(--ink-4); font-size: .9rem;
}
.rf-slots li .rf-slot-n {
  flex: 1; min-width: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.rf-slots li .rf-slot-g { font-variant-numeric: tabular-nums; color: var(--gold); }
.rf-slots li .rf-slot-x { color: var(--ink-4); font-size: 1.1rem; line-height: 1; }
.rf-slots li.is-filled {
  border-style: solid; border-color: var(--gold);
  color: var(--ink); background: var(--plate-3); cursor: pointer;
}

.rf-hint {
  margin: .6rem 0 0; padding: .5rem .6rem;
  border-radius: 8px; background: var(--tint-2);
  color: var(--ink-2); font-size: .85rem;
}

/* ── sticky mini bar ───────────────────────────────────────────────────── */

/* One ~44px row: the picks as self-sizing chips, gold pinned right. Fixed
   slots clipped names to stubs ("ICE Squirt", "e Crusher"); chips size to
   their content and the strip scrolls instead. */
.rf-mini {
  position: sticky; top: 50px; z-index: 500;
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .8rem; padding: .35rem .6rem;
  border: 1px solid rgba(var(--gold-rgb), .4); border-radius: 10px;
  background: var(--plate-2);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.rf-chips {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: .3rem;
  flex: 1; min-width: 0;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rf-chips::-webkit-scrollbar { display: none; }
.rf-chip {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .3rem;
  min-height: 32px; padding: .2rem .5rem;
  border: 1px solid var(--gold); border-radius: 999px;
  background: var(--plate-3); color: var(--ink);
  font: inherit; font-size: .8rem; cursor: pointer;
  max-width: 11rem;
}
.rf-chip .rf-chip-n {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-chip .rf-chip-x { color: var(--ink-4); font-size: .95rem; line-height: 1; }
.rf-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rf-chip--empty {
  border-style: dashed; border-color: var(--rule);
  background: transparent; color: var(--ink-4); cursor: default;
  min-width: 32px; justify-content: center;
}

/* ── pager ─────────────────────────────────────────────────────────────── */

.rf-pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: .3rem; margin-top: .7rem;
}
.rf-pg {
  min-width: 40px; min-height: 40px; padding: 0 .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--rule); border-radius: 8px;
  background: transparent; color: var(--ink-2);
  font: inherit; font-size: .86rem; font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.rf-pg:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rf-pg[aria-current="true"] {
  border-color: var(--gold); color: var(--gold); font-weight: 700;
  background: var(--plate-2);
}
.rf-pg[disabled] { opacity: .35; cursor: default; }
.rf-pg-gap { color: var(--ink-4); padding: 0 .1rem; }

/* ── desktop ────────────────────────────────────────────────────────────── */

@media (min-width: 46rem) {
  .rf { padding-top: 2.2rem; }
  .rf-head h1 { font-size: 2rem; }
  .rf-sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  /* The three search-only tiers carry no rows, so they read better full-width
     under the four that do. */
  .rf-tier--local, .rf-tier--prospect, .rf-tier--dark { grid-column: 1 / -1; }
  .rf-slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .rf * { animation: none !important; transition: none !important; }
}