/* ============================================================================
   Roster
   ----------------------------------------------------------------------------
   Three stacked tab strips used a third of the screen to answer a question
   most visits never ask. Ownership stays inline — it is the one filter people
   actually toggle — and faction and role move behind a sheet that reports
   itself on the button.

   Depends on tokens.css and kit.css.
   ========================================================================== */

.hr { padding: var(--s3) var(--s3) var(--s6); }

.hr-bar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.hr-tabs {
  display: flex;
  flex: 1;
  padding: 3px;
  border-radius: var(--rad-pill);
  background: var(--panel-sunken);
  box-shadow: var(--carve);
}

.hr-tab {
  flex: 1;
  min-height: 38px;
  border: 0;
  border-radius: var(--rad-pill);
  background: none;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: var(--fz-small);
  cursor: pointer;
  transition: color var(--t-quick) var(--ease-out), background var(--t-quick) var(--ease-out);
}
/* The visual pill is 38px; the hit area meets the 48dp floor. */
.hr-tab { position: relative; }
.hr-tab::after { content: ''; position: absolute; inset: -5px 0; }

.hr-tab.is-on {
  color: var(--text-ink);
  background: linear-gradient(180deg, var(--gold-200), var(--gold-400));
  box-shadow: var(--bevel), 0 2px 0 var(--gold-800);
}

/* The filter, its badge and the count are defined ONCE, with the rest of
   header row two further down this file. A 44px square icon-only filter
   lived here — earlier, and therefore winning: the pill holds an emblem,
   the word "Filter" and a count badge, and 44 square clipped all three
   on top of each other, which is what put "Filter" under the dropdown. */

.hr-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--s3); }
.hr-chip {
  padding: 3px 10px;
  border: 0;
  border-radius: var(--rad-pill);
  background: rgba(240, 192, 112, 0.14);
  color: var(--gold-200);
  font-size: var(--fz-tiny);
}
.hr-chip.clear { background: rgba(255, 255, 255, 0.08); color: var(--text-dim); cursor: pointer; }

/* The surveyed convention for a roster is five columns of square, nameless
   tiles. It does not transfer here, and the measurement is why.

   That convention is sized for a roster of four hundred. This game has
   sixteen heroes. Five columns of sixteen is four short rows: measured, it
   fills 72% of a 390dp frame and 52% of a tablet, against 97% for three.
   The tiles also shrink to 70px, so the art — which is what you actually
   pick a hero by — gets smaller in the name of fitting more, when there is
   nothing more to fit.

   The convention's PURPOSE is that finding a hero never means hunting. At
   sixteen heroes that is satisfied at three columns, with cards large enough
   to read and a screen that fills. So: adopt the intent, not the integer.

   auto-fill rather than a fixed three, because the fixed count was the real
   defect — it stretched three cards across a tablet. Widths choose their own
   column count now, and if the roster ever grows past a few dozen the rule
   converges on the surveyed five by itself. */
/* FIVE across, always. `auto-fill` with a 104px floor gave three columns
   on a 390px phone and twelve heroes on screen; the brief asks for five
   64-72dp icons, which is thirty. Five fixed columns with an 8px gutter
   lands each tile at 66px at 360 wide and 72px at 430 — inside the band at
   both ends, which a minmax cannot promise. */
.hr-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

/* Heroes already on the line say so, so the roster and the formation never
   disagree about who is fielded. */
.hr-grid .kit-hero.is-fielded { outline: 2px solid var(--gold-300); outline-offset: 1px; }
.hr-fielded {
  position: absolute;
  z-index: 4;
  /* Just above the name plate, not across the face and not ON the plate.
     Centred over the art it covered the hero's face; at 34% it landed
     squarely on the name — measured on a 153px card, the flag spanned
     82-97px and the name 95-117px, so one card's name vanished entirely.
     The plate starts at 53% from the top, so the flag ends above that. */
  inset: auto 0 50% 0;
  left: 50%;
  width: max-content;
  translate: -50% 0;
  padding: 1px 8px;
  border-radius: var(--rad-pill);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-ink);
  background: var(--gold-300);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hr-empty {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  padding: var(--s12) var(--s4);
  color: var(--text-dim);
  text-align: center;
}
.hr-empty p { margin: 0; }

/* --- the filter sheet -------------------------------------------------------- */

.hr-sheet-head {
  margin: var(--s3) 0 var(--s2);
  font-family: var(--font-display);
  font-size: var(--fz-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}
.hr-sheet-head:first-of-type { margin-top: 0; }

.hr-picks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
}

.hr-pick {
  display: grid;
  justify-items: center;
  gap: 3px;
  min-height: 68px;
  padding: var(--s2) 4px;
  border: 2px solid transparent;
  border-radius: var(--rad-md);
  background: var(--panel-sunken);
  color: var(--text-muted);
  cursor: pointer;
  box-shadow: var(--carve);
}
.hr-pick.is-on {
  border-color: var(--gold-400);
  background: rgba(240, 192, 112, 0.14);
  color: var(--text-cream);
}
.hr-pick-any {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--fz-tiny);
}
.hr-pick-label { font-size: var(--fz-tiny); text-align: center; line-height: 1.1; }

/* --- copies and locks -------------------------------------------------------
   One row per copy held. The lock is the control that matters: it is what
   stands between a hero you are building and an auto-fill that would eat it. */

.hd-copies { display: grid; gap: var(--s1); }

.hd-copy {
  display: flex;
  gap: var(--s2);
  align-items: center;
  padding: var(--s1) var(--s2);
  border-radius: var(--rad-sm);
  background: var(--ink-700);
}
/* The copy every other screen means when it names this hero. */
.hd-copy.is-best { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-300) 46%, transparent); }

.hd-copy-tier {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--aw);
  font-size: var(--fz-tiny);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hd-copy-lv, .hd-copy-pow {
  display: inline-flex;
  gap: 3px;
  align-items: center;
  color: var(--text-muted);
  font-size: var(--fz-tiny);
}
.hd-copy-flag {
  padding: 0 var(--s1);
  border-radius: var(--rad-pill);
  background: color-mix(in srgb, var(--success) 26%, transparent);
  color: var(--success);
  font-size: 0.56rem;
  font-weight: 700;
}

.hd-copy-lock, .hd-copy-go {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: var(--rad-sm);
  background: var(--ink-800);
  color: var(--text-dim);
  cursor: pointer;
}
.hd-copy-lock.is-on {
  background: color-mix(in srgb, var(--gold-300) 24%, transparent);
  color: var(--gold-200);
}
.hd-copy-lock:hover, .hd-copy-go:hover { color: var(--text-cream); }

/* --- roster rarity and tier filters ---------------------------------------- */

.hr-sort {
  display: flex;
  gap: var(--s1);
  overflow-x: auto;
  padding: 0 var(--s3) var(--s1);
}
.hr-sort button {
  flex: 0 0 auto;
  padding: 2px var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--rad-pill);
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-size: var(--fz-tiny);
  font-weight: 700;
}
.hr-sort button.is-on {
  border-color: var(--gold-300);
  background: color-mix(in srgb, var(--gold-300) 18%, transparent);
  color: var(--gold-200);
}

/* The rarity row in the filter sheet reuses the pick tiles, but a letter
   rather than an emblem — there is no crest for "SSR". */
.hr-pick-rar {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--rar, var(--text-dim)) 26%, transparent);
  color: var(--rar, var(--text-dim));
  font-size: var(--fz-tiny);
  font-weight: 900;
}


/* --- faction filter bar ----------------------------------------------------
   DOCKED above the bottom nav as a solid bar, not a gradient fading into
   the grid: a translucent strip over scrolling icons is a strip you read
   the icons through. The grid gets bottom padding to match, so the last
   row is never underneath it. */

.hr-facbar {
  position: sticky;
  bottom: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: auto repeat(6, 1fr);
  align-items: center;
  gap: 4px;
  margin: 0 calc(var(--s3) * -1);
  padding: 6px var(--s3) max(6px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--ink-900, #070a11);
  box-shadow: 0 -6px 14px rgba(0, 0, 0, 0.45);
}

.hr-facbtn {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-dim);
  font-size: var(--fz-tiny);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out);
}
/* The emblems carry their faction's own colour rather than sitting grey
   until chosen — the bar is a row of six crests, and six grey discs is a
   row of six nothings. */
.hr-facbtn .gi { filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); opacity: 0.72; }
.hr-facbtn.is-on .gi { opacity: 1; }

/* The chosen one grows and takes a ring. */
.hr-facbtn.is-on {
  transform: scale(1.18);
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--f, var(--gold-300)) 85%, transparent),
    0 0 10px color-mix(in srgb, var(--f, var(--gold-300)) 45%, transparent);
}

.hr-facbtn.is-all {
  min-width: 38px;
  border-radius: var(--rad-sm);
  box-shadow: inset 0 0 0 1px var(--line);
}
.hr-facbtn.is-all.is-on {
  transform: none;
  color: var(--ink-900, #070a11);
  background: var(--gold-300);
  box-shadow: none;
}

/* The hit area stays at the 48dp floor even though the control is 32. */
.hr-facbtn::before { content: ''; position: absolute; inset: -8px; }

/* --- header row two -------------------------------------------------------- */

.hr-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--s2);
}

.hr-filter {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--rad-pill);
  background: var(--panel-sunken);
  color: var(--text-muted);
  font-size: var(--fz-tiny);
  cursor: pointer;
}
.hr-filter.is-on { border-color: var(--gold-300); color: var(--text-cream); }
.hr-filter-count {
  display: grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 0.55rem;
  color: var(--ink-900, #070a11);
  background: var(--gold-300);
}

/* One dropdown instead of five chips. The chips were a row of their own
   and four of the five were always the wrong answer. */
.hr-sortbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--rad-pill);
  background: var(--panel-sunken);
  color: var(--text-muted);
  font-family: inherit;
  font-size: var(--fz-tiny);
  cursor: pointer;
}
.hr-sortbtn:hover { color: var(--text-cream); border-color: var(--line-strong); }
/* A drawn caret, so it matches the rest and does not inherit the
   platform's own arrow glyph. */
.hr-caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
}

.hr-sortlist { display: grid; gap: 2px; }
.hr-sortrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0 var(--s3);
  border: 0;
  border-radius: var(--rad-sm);
  background: var(--panel-sunken);
  color: var(--text-muted);
  font-size: var(--fz-small);
  cursor: pointer;
}
.hr-sortrow.is-on {
  background: color-mix(in srgb, var(--gold-300) 18%, transparent);
  color: var(--text-cream);
}

.hr-copytoggle {
  min-height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line);
  border-radius: var(--rad-pill);
  background: transparent;
  color: var(--text-dim);
  font-size: var(--fz-tiny);
  cursor: pointer;
}
.hr-copytoggle.is-on {
  border-color: var(--gold-300);
  color: var(--text-cream);
  background: color-mix(in srgb, var(--gold-300) 16%, transparent);
}

/* The count doubles as the way to get more. */
.hr-count {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  min-height: 32px;
  padding: 0 4px 0 8px;
  border: 0;
  background: none;
  color: var(--text-muted);
  font-size: var(--fz-tiny);
  cursor: pointer;
}
.hr-count-plus {
  display: grid;
  place-items: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  font-weight: 700;
  color: var(--ink-900, #070a11);
  background: var(--gold-300);
}

/* --- the sheet the roster sits on ------------------------------------------
   A touch lighter than the app background, with a faint weave, so the
   icons read as objects ON something rather than holes IN it. */
.hr {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--s3) var(--s3) 0;
  background:
    repeating-linear-gradient(126deg,
      transparent 0 9px, rgba(255, 255, 255, 0.012) 9px 10px),
    var(--ink-700, #121829);
}

/* The grid takes the space, so the faction bar is pushed to the bottom
   even on a short list, and the last row clears it. */
.hr-grid { margin-bottom: var(--s3); }

/* --- view tabs -------------------------------------------------------------
   Heroes / Library / Formations: three readings of the same collection.
   A segmented control, so it reads as one choice of three rather than as
   three separate buttons. */

.hr-views {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  margin-bottom: var(--s2);
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: var(--rad-md);
  background: var(--panel-sunken);
}

.hr-view {
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: var(--rad-sm);
  /* Explicit: a <button> with no background declared is light grey in
     every browser, and the whole strip came out as three pale boxes with
     cream text on them. */
  background: transparent;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: var(--fz-tiny);
  cursor: pointer;
}
.hr-view:hover { color: var(--text-cream); }
.hr-view.is-on {
  background: linear-gradient(180deg, var(--gold-300), var(--gold-500));
  color: var(--ink-900, #070a11);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

/* A thin rarity band, spanning the grid. Only on the default sort, where
   rarity is what the order is actually grouped by. */
.hr-band {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 0;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--rar, var(--text-dim));
}
.hr-band::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--rar, #fff) 45%, transparent), transparent);
}
.hr-band:first-child { margin-top: 0; }

/* The grid takes whatever vertical space is going, so the faction bar is
   pushed to the BOTTOM of the screen on a short list instead of sitting
   under the last row with a gap beneath it.
   
   `position: sticky` alone does not do this: it pins an element while
   its container scrolls, and a container that does not scroll never
   moves it. Filter to one faction and the list is seven icons, the page
   does not scroll, and the bar sat mid-screen with the navbar far below.
   `flex-grow` on the grid closes the gap; `flex-basis: auto` leaves a
   long list at its natural height so scrolling still works. */
.hr-grid { flex: 1 0 auto; align-content: start; }

/* Nothing in header row two may be squeezed. The controls have fixed
   content and the count is the only thing that can give. */
.hr-filter, .hr-sortbtn, .hr-copytoggle { flex: 0 0 auto; }
.hr-count { flex: 0 1 auto; min-width: 0; }

/* Export and Import, two to a row. `block` is `width: 100%`, so a flex
   row of two asked for 200% of the panel and the second was pushed off
   the right edge. */
.settings-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }