/* Layout: header, nav, toolbar, sort/filter, grid */
/* HEADER — single row: logo · nav · action. Tall at rest, condenses on scroll. */
#header {
  position: sticky; top: 0; z-index: 100;
  background: var(--surface-raised);
  /* iOS standalone PWA (viewport-fit=cover + black-translucent status bar): reserve the
     status-bar band so the clock/battery don't overlap the logo/gear/COLLECTION. env() is
     0 on devices without a top inset, so this is a no-op elsewhere. */
  padding-top: env(safe-area-inset-top);
}
#header-inner {
  /* Full-bleed: logo hugs the left gutter, action the right gutter. */
  width: 100%; margin: 0;
  padding: 18px var(--gutter);
  display: grid; align-items: center;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: 'logo nav action';
  transition: padding var(--transition);
}
#header.condensed #header-inner { padding-top: 10px; padding-bottom: 10px; }
#logo-text { grid-area: logo; justify-self: start; display: flex; align-items: center; }
#logo-img { height: 92px; width: auto; display: block; transition: height var(--transition); }
#header.condensed #logo-img { height: 42px; }
#header-actions {
  grid-area: action; justify-self: end;
  position: relative;
  display: flex; align-items: center; gap: 10px;
}
#collection-btn {
  background: var(--purple); color: white;
  font-family: 'Amboy', sans-serif; font-size: 13px;
  padding: 8px 20px; border-radius: 999px; letter-spacing: var(--tracking-wide);
  transition: background var(--transition);
}
/* Plays button: a PEER of #collection-btn (filled purple, not the grey ghost treatment
   #settings-btn/#share-btn use below) — it's a standalone feature, not a utility icon.
   Same fill/radius family as COLLECTION, just icon-only and narrower, so it survives the
   ≤380px header squeeze that already shrinks #collection-btn to its padding floor. */
#plays-btn {
  position: relative;
  background: var(--purple); color: white;
  border: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
#plays-badge {
  display: none; position: absolute; top: -2px; right: -2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red); border: 1.5px solid var(--surface-raised);
}
#settings-btn {
  position: relative;
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center; color: var(--mid-grey);
  transition: color var(--transition);
}
/* Sync-failure indicator: the only signal outside the settings panel (which is closed
   ~99% of the time) — see the account plan's "Failure" decision. Mirrors #filter-badge's
   dot treatment. Retries happen automatically, so most failures resolve before anyone
   ever sees this. */
#settings-btn.sync-error::after {
  content: '';
  position: absolute; top: 2px; right: 2px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
  border: 1.5px solid var(--surface-raised);
}
/* Share icon: matches the gear button (icon-only, ghost). */
#share-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  display: flex; align-items: center; color: var(--mid-grey);
  transition: color var(--transition);
}

/* Guest pill: shown only in shared-link mode, in place of the COLLECTION button. */
#guest-pill { display: none; }
body.guest-collection #guest-pill {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: #FAEEDA; color: #633806; border: 1px solid #EF9F27;
  font-family: 'Amboy', sans-serif; font-size: 12px; letter-spacing: var(--tracking-wide);
  padding: 6px 6px 6px 12px; border-radius: 20px;
}
#guest-pill .guest-pill-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: #EF9F27; color: #4A1B0C;
  --x-size: 8px; --x-bar: 1.5px; /* smaller badge, so a shorter/finer glyph than the default */
}
/* In guest mode the COLLECTION + share buttons are replaced by the pill. */
body.guest-collection #collection-btn,
body.guest-collection #share-btn { display: none; }
/* Read-only collection: dim the ownership-toggle affordances + hide season buttons. */
#collection-shared-tag { display: none; }
body.guest-collection #collection-shared-tag {
  display: inline-block; margin-left: 10px;
  background: #FAEEDA; color: #633806; border: 1px solid #EF9F27;
  font-family: 'Amboy', sans-serif; font-size: 10px; letter-spacing: var(--tracking-wide);
  padding: 3px 8px; border-radius: 10px; vertical-align: middle;
}
body.guest-collection .season-toggle-btn,
body.guest-collection .collection-box-check { display: none; }
body.guest-collection .expansion-char-item { cursor: default; }
/* Touch: enlarge the exit × hit area toward the 44px guideline. */
@media (max-width: 600px) {
  body.guest-collection #guest-pill { padding: 8px 8px 8px 12px; }
  #guest-pill .guest-pill-x { width: 24px; height: 24px; --x-size: 10px; }
}
/* Dark mode: the amber pill/tag are hardcoded lights — retint so they read as a
   warm badge on charcoal instead of a glaring white-ish block. */
:root[data-theme="dark"] body.guest-collection #guest-pill,
:root[data-theme="dark"] body.guest-collection #collection-shared-tag {
  background: #3A2E12; color: #F0C674; border-color: #6B5320;
}
:root[data-theme="dark"] #guest-pill .guest-pill-x {
  background: #6B5320; color: #F0C674;
}
#settings-panel {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface-raised);
  border: 1px solid var(--off-grey);
  border-radius: 12px;
  padding: 16px;
  min-width: 280px;
  /* Keep the popover on-screen as sections accumulate (mobile-first). */
  max-height: calc(100vh - 80px); overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 110;
}
#settings-panel.open { display: block; }
.settings-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  color: var(--dark-grey);
}
/* Toggle rendered as a switch (same <input type="checkbox">, restyled — no JS change).
   Track + ::before thumb; checked state fills purple and slides the thumb right. */
.settings-row input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0;
  position: relative; flex-shrink: 0; cursor: pointer;
  width: 44px; height: 26px; border-radius: 999px;
  background: var(--off-grey); transition: background var(--transition);
}
.settings-row input[type="checkbox"]::before {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform var(--transition);
}
.settings-row input[type="checkbox"]:checked { background: var(--purple); }
.settings-row input[type="checkbox"]:checked::before { transform: translateX(18px); }

/* Settings: label + info (ⓘ) button cluster */
.settings-row-label { display: flex; align-items: center; gap: 6px; }
.settings-row-label label { cursor: pointer; }
.info-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; line-height: 0;
  color: var(--color-ui-grey);
  background: none; border: none; cursor: pointer;
}
.info-btn svg { width: 18px; height: 18px; display: block; }
.info-btn[aria-expanded="true"] { color: var(--purple); }

/* Settings: inline help text revealed by the info button */
.settings-help {
  margin: 6px 0 0; padding: 8px 10px;
  font-family: var(--font-sans); font-size: 13px; line-height: 1.4;
  color: var(--mid-grey);
  background: var(--color-off-white); border-radius: 8px;
}
.settings-help[hidden] { display: none; }

/* Settings: nested subgroup, indented under the control it belongs to */
.settings-subgroup {
  margin-top: 8px; padding-left: 10px;
  border-left: 2px solid var(--off-grey);
}
.settings-subgroup.disabled { opacity: 0.4; pointer-events: none; }

/* Reusable collapsible disclosure (caret + label) */
.disclosure-head {
  display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 4px 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--dark-grey); text-align: left;
}
.disclosure-caret { font-size: 16px; line-height: 1; color: var(--mid-grey); transition: transform 0.15s ease; }
.disclosure-head[aria-expanded="true"] .disclosure-caret { transform: rotate(90deg); }
.disclosure-body { padding: 4px 0 2px; }
.disclosure-body[hidden] { display: none; }

/* Settings: known player-name rows (Log Play autofill roster, plus its hide/unhide
   controls) — same row shape as .stepper-row below (a list inside a settings
   disclosure), with a hairline separator since this list repeats rows the way steppers
   don't. */
.player-name-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-top: 1px solid var(--hairline);
  font-family: var(--font-sans); font-size: 13px; color: var(--dark-grey);
}
.player-name-row:first-of-type { border-top: none; padding-top: 0; }
.player-name-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Settings: threshold stepper rows */
.stepper-row {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 0;
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--dark-grey);
}
.stepper-label { display: flex; align-items: center; gap: 8px; }
/* Action-symbol image stands in for the type name; the colored dot sits to its left. */
.symbol-icon { width: 40px; height: 40px; object-fit: contain; display: block; }
/* Live specialist count: a person icon + number, pushed right to hug the stepper.
   The icon labels the number as "this many heroes". */
.stepper-count {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 3px;
  font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600;
  color: var(--mid-grey);
}
.count-icon { width: 13px; height: 13px; display: block; flex-shrink: 0; }
.spec-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  font-size: 20px; line-height: 1; color: var(--dark-grey);
  background: var(--color-off-white); border: 1px solid var(--off-grey); border-radius: 10px;
  cursor: pointer; touch-action: manipulation;
}
.stepper-btn:disabled { opacity: 0.35; cursor: default; }
.stepper-value {
  min-width: 28px; text-align: center;
  font-variant-numeric: tabular-nums; font-weight: 600; font-size: 16px;
}

/* Settings: reset-to-default link */
.thresholds-reset {
  margin-top: 6px; padding: 8px 12px; min-height: 36px; cursor: pointer;
  background: none; border: 1px solid var(--off-grey); border-radius: 8px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--purple);
}

/* Settings: App & offline dropdown (install + Chunk 2 download) */
#offline-section { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--off-grey); }
#offline-status { display: block; }
.offline-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; width: 100%; min-height: 40px; padding: 8px 14px;
  background: var(--purple); color: var(--white);
  border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  touch-action: manipulation;
}
.offline-btn[hidden] { display: none; }

/* Settings: ACCOUNT section (Google sign-in + signed-in identity/manage). Sits above
   DISPLAY in #settings-panel — see the account plan for why (identity frames everything
   below it, and it's a low-frequency action that doesn't earn a header button). */
#account-section { padding-bottom: 12px; border-bottom: 1px solid var(--off-grey); margin-bottom: 4px; }
/* First real <a> in the app's UI (everything else is buttons) — needs its own rule
   since there's no app-wide link style to inherit; browser default blue/underline
   would look out of place against the design system. */
.settings-help a,
#settings-disclaimer a { color: var(--purple); font-weight: 600; }

/* Unofficial-fan-project disclaimer, pinned at the bottom of the settings panel.
   Small and muted — present and readable, but not competing with the actual controls. */
#settings-disclaimer {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--off-grey);
  font-family: var(--font-sans); font-size: 11px; line-height: 1.5;
  color: var(--mid-grey);
}
/* Google's own button guidelines call for a light/white button with the multicolor G —
   not this app's purple — so it reads as a standard "Sign in with Google" control
   rather than a branded app action. */
.google-signin-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 44px; padding: 8px 14px;
  background: var(--white); color: var(--color-text-secondary);
  border: 1px solid var(--off-grey); border-radius: 10px; cursor: pointer;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  touch-action: manipulation;
}
#account-identity { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
#account-avatar {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--off-grey); color: var(--dark-grey);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-size: 13px; font-weight: 700;
}
#account-info { min-width: 0; flex: 1; }
#account-email {
  font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--color-text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#account-sync-status { font-family: var(--font-sans); font-size: 12px; color: var(--mid-grey); margin-top: 2px; }
#account-sync-status.is-error { color: var(--red); }
.account-delete-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; min-height: 40px; padding: 8px 14px; margin-top: 4px;
  background: none; color: var(--red);
  border: 1px solid var(--off-grey); border-radius: 10px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; font-weight: 600;
  touch-action: manipulation;
}

/* NAV — segmented pill toggle, bottom-aligned in the header row */
#nav-bar {
  grid-area: nav; justify-self: center; align-self: end;
  position: relative;
  display: flex; justify-content: center; gap: 2px;
  background: var(--color-off-white);
  border-radius: 999px; padding: 5px;
}
/* Sliding white pill behind the active tab; positioned in JS (movePill) */
.nav-pill {
  position: absolute; left: 0; top: 5px;
  height: calc(100% - 10px);
  background: var(--surface-raised); border-radius: 999px;
  box-shadow: var(--shadow-pill);
  transition: transform 0.25s ease, width 0.25s ease;
  z-index: 0; pointer-events: none;
}
.nav-pill.no-anim { transition: none; }
.nav-tab {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: clamp(4px, 1vw, 8px);
  padding: clamp(6px, 1.2vw, 9px) clamp(9px, 2.8vw, 22px); border-radius: 999px;
  font-family: 'Amboy', sans-serif; font-size: clamp(12px, 2vw, 15px);
  /* --color-label-grey (not --mid-grey): darker for contrast against the tinted
     track below, and theme-aware so it stays legible in dark mode too. */
  color: var(--color-label-grey);
  transition: color var(--transition);
  letter-spacing: var(--tracking-tight);
}
.nav-tab.active { color: var(--color-text-primary); }
/* Desktop: tint the pill track (not the text) per active tab, so which section
   you're on is visible without reading the labels. */
@media (min-width: 601px) {
  #nav-bar:has(.nav-tab[data-tab="heroes"].active) { background: #D3E7F5; }
  #nav-bar:has(.nav-tab[data-tab="villains"].active) { background: #F1CCCD; }
  #nav-bar:has(.nav-tab[data-tab="modes"].active) { background: #F8EACD; }
}
/* Inline SVG (fill: currentColor) so text + icon recolor together per state.
   Explicit width: SVG flex children collapse to 0 with width:auto. The viewBox
   + default preserveAspectRatio keeps each icon undistorted within the box. */
.nav-tab-icon { width: clamp(13px, 2vw, 16px); height: clamp(13px, 2vw, 16px); flex-shrink: 0; }

/* TOOLBAR — sticks below the condensed header (~62px + any top safe-area inset) */
#toolbar-wrap {
  position: sticky; top: calc(62px + env(safe-area-inset-top)); z-index: 98;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--off-grey);
}
#toolbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--gutter); background: var(--surface-raised);
  max-width: var(--content-max); margin: 0 auto; width: 100%;
}
#count-label {
  font-family: 'Amboy', sans-serif; font-size: 16px;
  color: var(--dark-grey); letter-spacing: var(--tracking-wide);
}
#search-wrap {
  display: flex; align-items: center;
  background: var(--off-grey); border-radius: var(--radius-pill);
  padding: 7px 12px; gap: 8px; width: 280px;
}
#search-input {
  border: none; background: none; outline: none;
  /* 16px min so iOS Safari doesn't auto-zoom the page on focus (it zooms any
     input under 16px). Wrapper is 44px tall, so this is font-only. */
  font-size: 16px; color: var(--color-text-primary); width: 100%;
}
/* --color-label-grey (not --mid-grey/--color-ui-grey): darker for contrast against
   the mobile search-bar tint (see overlays.css), and theme-aware. */
#search-input::placeholder { color: var(--color-label-grey); }
#search-icon { stroke: var(--color-label-grey); flex-shrink: 0; }
/* Clear-search "×": hidden until there's a query (toggled via #search-wrap.has-query). */
/* Explicit box: the X is drawn by .icon-x's bars (css/overlays.css), so there's no text
   left to size this button. */
#search-clear {
  display: none; border: none; background: none; cursor: pointer;
  color: var(--color-ui-grey);
  width: 24px; height: 24px; padding: 0; flex-shrink: 0;
}
#search-wrap.has-query #search-clear { display: flex; align-items: center; }
#filter-icon { stroke: var(--color-label-grey); }

/* SORT/FILTER */
#sort-filter-panel {
  display: none;
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--surface-raised);
  border: 1px solid var(--off-grey);
  border-radius: 12px;
  padding: 16px;
  width: 430px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  z-index: 110;
}
#sort-filter-panel.open { display: block; }
.sf-section { margin-bottom: 16px; }
.sf-section:last-child { margin-bottom: 0; }
#sf-filter-section {
  margin-top: 8px;
  padding-top: 28px;
  border-top: 1px solid var(--hairline);
}
.sf-section-head {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 29px;
  margin-bottom: 10px;
}
.sf-section-head-actions { display: flex; align-items: center; gap: 8px; }
.sf-section-title {
  font-family: 'Amboy', sans-serif; font-size: 12px;
  color: var(--mid-grey); letter-spacing: var(--tracking-wide);
}
.sf-subgroup { margin-bottom: 12px; }
.sf-subgroup:last-child { margin-bottom: 0; }
.sf-sublabel {
  font-family: var(--font-sans); font-size: 12px; font-weight: 500;
  color: var(--mid-grey); letter-spacing: var(--tracking-wide);
  margin-bottom: 9px;
}
.sf-pills {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.sf-pill {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--hairline);
  color: var(--dark-grey); cursor: pointer;
  transition: all var(--transition); white-space: nowrap;
  background: none;
}
/* Inverted pill: fill = primary-text color, label = page color. Works in both
   themes (dark fill / light label in light mode; light fill / dark label in dark). */
.sf-pill.active { background: var(--color-text-primary); color: var(--surface-page); border-color: var(--color-text-primary); }

/* Token (BY ICON) sort pills: colored dot + matching border */
.sf-token { display: inline-flex; align-items: center; gap: 7px; }
.sf-token::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--_tok); flex: none;
}
.tok-move   { --_tok: var(--move-color);    border-color: var(--move-color); }
.tok-fight  { --_tok: var(--fight-color);   border-color: var(--fight-color); }
.tok-heroic { --_tok: var(--heroic-accent); border-color: var(--heroic-accent); }
.tok-wild   { --_tok: var(--wild-color);    border-color: var(--wild-color); }

/* Filter segmented control: joined options, divided, unselected by default */
.sf-seg {
  display: inline-flex; align-items: center;
  border: 1.5px solid var(--off-grey);
  border-radius: var(--radius-pill); overflow: hidden;
}
.sf-seg .sf-pill { border: none; border-radius: 0; }
.sf-seg .sf-pill + .sf-pill { border-left: 1.5px solid var(--off-grey); }
.sort-dir-btn {
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  border: 1.5px solid var(--off-grey);
  color: var(--dark-grey); cursor: pointer;
  background: none; transition: all var(--transition);
}
/* Favorites-first toggle — an outline-circle button (mirrors #detail-fav-btn)
   rather than a pill, since it's a standalone on/off switch, not a member of
   the ORDER/BY ICON exclusive-choice groups. */
.fav-first-btn {
  flex: none;
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1.5px solid var(--off-grey); cursor: pointer;
  color: var(--dark-grey);
  transition: border-color var(--transition), color var(--transition);
}
.fav-first-btn .fav-heart-icon {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2;
}
.fav-first-btn.active { border-color: var(--favorite); color: var(--favorite); }
.fav-first-btn.active .fav-heart-icon { fill: var(--favorite); }
#filter-badge {
  display: none; position: absolute; top: -4px; right: -4px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--red);
}

/* GRID */
#main-content { padding: 8px 0 var(--space-fab-clear); }
.card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px; padding: 8px var(--gutter);
  max-width: var(--content-max);
  margin: 0 auto;
}


/* De-inlined from markup (search-wrap positioning + sort button) */
#search-wrap { position: relative; z-index: 110; }
.sort-btn { background: none; border: none; cursor: pointer; padding: 0 4px; display: flex; align-items: center; position: relative; }

/* Hover effects only on true hover-capable pointers (desktop mouse), so they
   don't "stick" on touch devices after a tap. */
@media (hover: hover) {
  #collection-btn:hover { background: var(--purple-dark); }
  #plays-btn:hover { background: var(--purple-dark); }
  #settings-btn:hover { color: var(--purple); }
  #share-btn:hover { color: var(--purple); }
  .info-btn:hover { color: var(--purple); }
  .stepper-btn:hover:not(:disabled) { border-color: var(--purple); color: var(--purple); }
  .thresholds-reset:hover { border-color: var(--purple); }
  .offline-btn:hover { filter: brightness(1.08); }
  .nav-tab:not(.active):hover { color: var(--dark-grey); }
  #search-clear:hover { color: var(--color-text-primary); }
  .sf-pill:hover { border-color: var(--dark-grey); }
  .sf-seg .sf-pill:hover { background: rgba(0, 0, 0, 0.04); }
  .sort-dir-btn:hover { border-color: var(--dark-grey); }
  .fav-first-btn:hover { border-color: var(--dark-grey); }
}