/* Shared profile panels (Overview, Game Stats, Heroes, Match History,
   Achievements) -- the pf-* rules for window.TDTT.profileOverview /
   profilePanels / profileAchievements. Moved verbatim out of app/profile.css
   so /app and /m load one copy. Self-contained: uses only tokens.css
   variables, .chip/.chip-row (controls.css) and the lb-profile-stat /
   lb-profile-section-label rules in leaderboard-detail.css. */

/* Phase 5b Task 3 -- rebuilt on the shared achievements taxonomy to match
   desktop's Achievements.tsx (Phase 5b Task 2): four summary tiles, an
   overall progress bar, a Featured row, a category chip row (this surface's
   narrower-layout equivalent of desktop's sidebar -- see profile.js's
   achvCategoryChipsHtml() header comment), and a searchable/sortable grid.
   The chip row reuses .chip/.chip-row (controls.css), same primitive and
   on/off pattern as .pf-gs-switcher above. */
.pf-achv-tiles { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:14px; }
@media (max-width:520px) { .pf-achv-tiles { grid-template-columns:repeat(2,1fr); } }

.pf-achv-progress {
  margin-bottom:16px; height:8px; border-radius:4px; background:var(--surface-2);
  border:1px solid var(--border); overflow:hidden;
}
.pf-achv-progress__bar {
  display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg, var(--gold), var(--magenta));
}

.pf-achv-featured { margin-bottom:16px; }
.pf-achv-featured-row { display:flex; flex-wrap:wrap; gap:8px; }
.pf-achv-featured-item {
  display:flex; align-items:center; gap:8px; padding:7px 11px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
}
.pf-achv-featured-item__icon { flex:none; display:flex; color:var(--text-dim); }
.pf-achv-featured-item.is-earned .pf-achv-featured-item__icon { color:var(--gold); }
.pf-achv-featured-item__name { font-size:.7rem; font-weight:700; color:var(--text); }

.pf-achv-categories { margin-bottom:14px; }

.pf-achv-controls { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.pf-achv-search {
  width:100%; padding:8px 12px; border-radius:9px; border:1px solid var(--border);
  background:var(--input); color:var(--text); font-size:.76rem;
}
.pf-achv-search::placeholder { color:var(--muted); }
.pf-achv-search:focus { outline:none; border-color:var(--cyan); }
.pf-achv-sort { padding-bottom:0; }

.pf-achv-grid { display:flex; flex-direction:column; gap:8px; }
.pf-achv-empty { text-align:center; padding:24px 16px; }

.pf-achv-card {
  display:flex; align-items:flex-start; gap:12px; padding:10px 14px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
}
.pf-achv-card.is-earned { border-color:rgba(255,192,0,.4); box-shadow:0 0 12px rgba(255,192,0,.12); }
.pf-achv-card__icon {
  flex:none; display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:8px; background:var(--surface-2); color:var(--text-dim);
}
.pf-achv-card.is-earned .pf-achv-card__icon { background:rgba(255,192,0,.15); color:var(--gold); }
.pf-achv-card__body { flex:1 1 auto; min-width:0; }
.pf-achv-card__head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pf-achv-card__name { font-size:.78rem; font-weight:700; color:var(--text); }
.pf-achv-card__status {
  flex:none; font-family:var(--mono); font-size:.6rem; padding:2px 7px; border-radius:999px;
  border:1px solid var(--border); color:var(--text-dim); white-space:nowrap;
}
.pf-achv-card__status.is-earned { color:var(--bg); background:var(--gold); border-color:var(--gold); }
.pf-achv-card__desc { font-size:.68rem; color:var(--text-dim); margin-top:2px; }
.pf-achv-card__completed { display:block; font-size:.6rem; color:var(--muted); margin-top:6px; }
.pf-achv-card__progress-row {
  display:flex; align-items:center; justify-content:space-between;
  font-size:.6rem; color:var(--text-dim); margin-top:6px; margin-bottom:3px;
}
.pf-achv-card__progress { height:5px; border-radius:2.5px; background:var(--surface-2); overflow:hidden; }
.pf-achv-card__progress-bar { display:block; height:100%; background:var(--cyan); border-radius:2.5px; }

/* Phase 2c Task 2 -- Overview tab nine-card grid
   (window.TDTT.profileOverview.html, public/shared/profile-overview.js).
   Each card is .tdtt-panel/.tdtt-panel__head (chrome.css) and single-stat
   cells reuse .lb-profile-stat (leaderboard.css) -- these .pf-ov-* rules
   cover only what nothing existing already shaped: the card grid track,
   the play-history bars, and simple label/value list rows.

   The breakpoints below key off the VIEWPORT (min-width media queries), not
   this element's own container width -- same convention chrome.css already
   uses everywhere on /app (e.g. its 620px .tdtt-listrow rules). .pf-panel /
   .pf-tabpanel above are kept wide enough (1080px) that the 1080px viewport
   breakpoint isn't lying about the space actually available to 3 columns,
   which was fix round 1's bug; it does not make this a container query. */
.pf-ov-grid { display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width: 720px) {
  .pf-ov-grid { grid-template-columns:repeat(2,1fr); }
}
@media (min-width: 1080px) {
  .pf-ov-grid { grid-template-columns:repeat(3,1fr); }
}

.pf-ov-stats { display:grid; grid-template-columns:repeat(var(--pf-ov-n,3),1fr); gap:6px; }

.pf-ov-list { display:flex; flex-direction:column; gap:8px; list-style:none; margin:0; padding:0; }
.pf-ov-row { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.74rem; }
.pf-ov-row .l { color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pf-ov-row__logo { display:inline-block; font-size:8px; vertical-align:-3px; margin-right:6px; }
.pf-ov-row .v { flex:none; font-family:var(--mono); font-size:.68rem; color:var(--text-dim); }
.pf-ov-row a { flex:none; font-family:var(--mono); font-size:.68rem; color:var(--cyan); text-decoration:none; }
.pf-ov-row a:hover { text-decoration:underline; }

.pf-ov-bars { display:flex; flex-direction:column; gap:10px; }
.pf-ov-bar-row__head { display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:.68rem; }
.pf-ov-bar-row__head .l { color:var(--text); }
.pf-ov-bar-row__head .v { color:var(--text-dim); }
.pf-ov-bar-track { margin-top:4px; height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; }
.pf-ov-bar-fill { display:block; height:100%; background:var(--cyan); border-radius:3px; }

.pf-ov-bio { margin:0; font-size:.76rem; color:var(--text-dim); white-space:pre-wrap; }
.pf-ov-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
/* Fix round 1 -- a static informational badge, deliberately NOT the .chip
   primitive, same ruling and same visual formula leaderboard.css's own
   .lb-profile-region already documents (:137-141): .chip carries
   interactive/filter semantics (hover, selected-state brackets) a read-only
   profile tag doesn't have. */
.pf-ov-tag { font-size:.62rem; padding:2px 8px; border-radius:999px;
             background:var(--surface-2); border:1px solid var(--border); color:var(--text-dim); }

/* ── Game Stats panel (Phase 4b Task 2) ───────────────────────────────────
   window.TDTT.profilePanels.gameStatsHtml() (public/shared/profile-panels.js)
   -- same pf-* precedent as .pf-ov-* above, new prefix because this is a
   different card family (a switcher + per-game rows/cards, not the nine-card
   Overview grid). Reuses .chip/.chip-row (controls.css) for the switcher --
   the reticle-bracket selected state IS the right pattern here, a game
   switcher is a filter, not a mode tab. Reuses .tdtt-panel, .lb-profile-stat
   (.v/.l) and .pf-ov-body's grid-child spacing wherever the shape already
   matches -- only what's genuinely new gets a new rule below. */
.pf-gs-switcher { margin-bottom:14px; }
.pf-gs-chip__logo { display:inline-block; font-size:8px; vertical-align:-3px; margin-right:5px; }
.pf-gs-chip__count { opacity:.7; margin-left:3px; }

.pf-gs-total { margin-bottom:14px; }
.pf-gs-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
@media (max-width:520px) { .pf-gs-stats { grid-template-columns:repeat(2,1fr); } }

.pf-gs-rows { display:flex; flex-direction:column; gap:8px; }
.pf-gs-row {
  display:flex; align-items:center; gap:12px; padding:10px 14px; cursor:pointer;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  transition:border-color .15s ease, transform .15s ease;
}
.pf-gs-row:hover { border-color:var(--cyan); transform:translateY(-1px); }
.pf-gs-row__logo { display:block; font-size:9px; flex:none; }
.pf-gs-row__body { flex:1 1 auto; min-width:0; }
.pf-gs-row__name { font-family:var(--head); font-size:.74rem; font-weight:700; color:var(--text); }
.pf-gs-row__line { font-size:.68rem; color:var(--text-dim); margin-top:2px; }
.pf-gs-row__line--empty { font-style:italic; }
.pf-gs-win { color:var(--gold); font-weight:600; }
.pf-gs-loss { color:var(--red); font-weight:600; }
.pf-gs-row__meta { flex:none; display:flex; gap:6px; }
.pf-gs-badge {
  font-family:var(--mono); font-size:.6rem; padding:2px 7px; border-radius:999px;
  border:1px solid var(--border); color:var(--text-dim); white-space:nowrap;
}
.pf-gs-badge--rank { color:var(--bg); background:var(--gold); border-color:var(--gold); }

.pf-gs-single { margin-bottom:14px; }
.pf-gs-empty { text-align:center; padding:28px 16px; }

.pf-gs-bygame__title { font-family:var(--head); font-size:.78rem; font-weight:700; color:var(--text); margin:0 0 8px; }
.pf-gs-bygame__grid { display:grid; grid-template-columns:1fr; gap:10px; }
@media (min-width:760px) { .pf-gs-bygame__grid { grid-template-columns:repeat(2,1fr); } }
.pf-gs-bygame-card { border:1px solid var(--border); border-radius:10px; padding:12px; background:var(--surface); }
.pf-gs-bygame-card.is-highlighted { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset; }
.pf-gs-bygame-card__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.pf-gs-bygame-card__name { font-family:var(--head); font-size:.7rem; font-weight:700; color:var(--text); }
.pf-gs-bygame-card__wr { font-family:var(--mono); font-size:.72rem; color:var(--cyan); font-weight:700; }

/* ── Heroes panel (Phase 6 Task 3) — replaces the Phase 4b INTERIM plain
   list (a single record+win-rate row, no filter bar, no detail pane) with
   the real spec panel window.TDTT.profilePanels.heroesHtml() now renders:
   a sort+archetype filter bar, three summary tiles, a ranked paginated
   grid, and a detail pane (portrait/record/win rate/games/globalRank/
   trend/archetype distribution) -- mirrors desktop's HeroesPanel.tsx.
   Reuses .chip/.chip-row (controls.css) for both chip rows, .lb-profile-stat
   (leaderboard.css, via statTileHtml() in profile-panels.js) for every
   tile, and .lb-btn (leaderboard.css) for the pager buttons -- only the
   genuinely new shapes (the grid card, the trend dots, the distribution
   bar) get new rules below. */
.pf-heroes-controls { display:flex; flex-direction:column; gap:8px; margin-bottom:14px; }
.pf-heroes-sort { padding-bottom:0; }
.pf-heroes-archetype { padding-bottom:0; }

.pf-heroes-tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-bottom:14px; }

.pf-heroes-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px; }
@media (min-width:520px) { .pf-heroes-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:900px) { .pf-heroes-grid { grid-template-columns:repeat(4,1fr); } }

.pf-heroes-card {
  display:block; text-align:left; padding:0; overflow:hidden; cursor:pointer;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
  transition:border-color .15s ease, transform .15s ease;
}
.pf-heroes-card:hover { border-color:var(--cyan); transform:translateY(-1px); }
.pf-heroes-card.is-selected { border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset; }
.pf-heroes-card__portrait-wrap { position:relative; display:block; aspect-ratio:2/3; background:var(--surface-2); }
.pf-heroes-card__portrait { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top; }
.pf-heroes-card__rank {
  position:absolute; top:6px; left:6px; font-family:var(--mono); font-size:.6rem; font-weight:700;
  color:#fff; background:rgba(0,0,0,.7); padding:2px 6px; border-radius:4px;
}
.pf-heroes-card__body { display:block; padding:8px 10px; }
.pf-heroes-card__name {
  display:block; font-family:var(--head); font-size:.72rem; font-weight:700; color:var(--text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pf-heroes-card__line { display:block; font-size:.64rem; color:var(--text-dim); margin-top:2px; }
/* Record band split (Task 2 fix round 1 ruling, mirrored -- see
   heroCardHtml()'s own header comment in profile-panels.js): the W-L
   record chip is banded; the win-rate percentage next to it stays plain. */
.pf-heroes-card__record.good { color:var(--green); }
.pf-heroes-card__record.even { color:var(--gold); }
.pf-heroes-card__record.bad { color:var(--red); }
.pf-heroes-card__winrate { display:block; font-size:.64rem; font-weight:700; color:var(--text); margin-top:1px; }

.pf-heroes-pager { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:16px; }
.pf-heroes-pager__status { font-size:.68rem; color:var(--muted); }

.pf-heroes-detail-empty { text-align:center; padding:20px 16px; font-size:.76rem; color:var(--muted); }

.pf-heroes-detail { border:1px solid var(--border); border-radius:10px; padding:14px; background:var(--surface); }
.pf-heroes-detail__head { display:flex; align-items:flex-start; gap:12px; }
.pf-heroes-detail__portrait {
  flex:none; width:64px; height:64px; object-fit:cover; object-position:top;
  border-radius:8px; border:1px solid var(--border); background:var(--surface-2);
}
.pf-heroes-detail__id { min-width:0; }
.pf-heroes-detail__name { margin:0; font-family:var(--head); font-size:.9rem; font-weight:700; color:var(--text); }
.pf-heroes-detail__archetype {
  margin:2px 0 0; font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-dim);
}
.pf-heroes-detail__stats { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; margin-top:12px; }
@media (min-width:480px) { .pf-heroes-detail__stats { grid-template-columns:repeat(4,1fr); } }

.pf-heroes-detail__section { margin-top:14px; }
.pf-heroes-detail__section-title {
  margin:0 0 8px; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700;
  color:var(--muted);
}
.pf-heroes-detail__section-note { text-transform:none; letter-spacing:normal; color:var(--muted); opacity:.7; }

.pf-heroes-trend-unavailable { margin:0; font-size:.72rem; color:var(--muted); }
.pf-heroes-trend__dots { display:flex; gap:4px; }
.pf-heroes-trend__dot { width:10px; height:10px; border-radius:3px; }
.pf-heroes-trend__dot.is-win { background:var(--green); }
.pf-heroes-trend__dot.is-loss { background:var(--red); }
.pf-heroes-trend__summary { margin:6px 0 0; font-size:.66rem; color:var(--muted); }

.pf-heroes-archdist-empty { margin:0; font-size:.72rem; color:var(--muted); }
.pf-heroes-archdist__bar {
  display:flex; height:10px; border-radius:5px; overflow:hidden; background:var(--surface-2);
}
.pf-heroes-archdist__slice { display:block; height:100%; }
.pf-heroes-archdist__legend { display:flex; flex-wrap:wrap; gap:8px 12px; margin-top:8px; }
.pf-heroes-archdist__legend-item {
  display:flex; align-items:center; gap:5px; font-size:.64rem; color:var(--text-dim);
}
.pf-heroes-archdist__swatch { display:inline-block; width:8px; height:8px; border-radius:2px; }

/* ── Match History panel (Phase 4b Task 3) — GET /api/stats/:id/history
   ?limit=50 returns a plain array with no total/offset/cursor, so a real
   pager has nothing to page through; .pf-history__note surfaces the 50-row
   limit to the reader instead (see matchHistoryHtml()'s header comment —
   the pager itself is deferred). Row shape mirrors .pf-heroes-row, with a
   result chip on the left instead of a rank number. */
.pf-history__note { font-size:.68rem; color:var(--muted); margin:0 0 10px; }
.pf-history-rows { display:flex; flex-direction:column; gap:8px; }
.pf-history-row {
  display:flex; align-items:center; gap:12px; padding:8px 14px;
  border:1px solid var(--border); border-radius:10px; background:var(--surface);
}
.pf-history-row.is-win { border-color:rgba(0,230,118,.35); }
.pf-history-row.is-loss { border-color:rgba(255,23,68,.3); }
.pf-history-row__result {
  flex:none; width:44px; text-align:center; font-family:var(--head); font-size:.62rem;
  font-weight:700; letter-spacing:.03em; color:var(--text-dim);
}
.pf-history-row.is-win .pf-history-row__result { color:var(--green); }
.pf-history-row.is-loss .pf-history-row__result { color:var(--red); }
.pf-history-row__portrait {
  flex:none; width:32px; height:56px; object-fit:cover; object-position:top;
  border-radius:6px; border:1px solid var(--border); background:var(--surface-2);
}
.pf-history-row__body { flex:1 1 auto; min-width:0; }
.pf-history-row__name { font-family:var(--head); font-size:.74rem; font-weight:700; color:var(--text); }
.pf-history-row__line { font-size:.68rem; color:var(--text-dim); margin-top:2px; }
.pf-history-row__meta { flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.pf-history-row__hp { font-family:var(--mono); font-size:.66rem; color:var(--text-dim); }
.pf-history-row__date { font-size:.62rem; color:var(--muted); white-space:nowrap; }