/* =====================================================================
   THE ACHIEVEMENTS HALL /achievements/ (design B, owner-approved 2026-09-26).
   Loads after wraith-suite.css,
   wraith-hall.css and achievements.css. Prefix: pv-. Owner: Achievements
   Page Coder. Three type collections, dense grids, a category icon and a
   category colour accent on every tile (never the rarity frame colours).
   ===================================================================== */
.pv-page .ah-hero { min-height: clamp(220px, 28vh, 320px); }

/* the three kinds, right under the hero */
/* four summary cards: one row of four on desktop, 2x2 from 1099px down, one column of compact rows on phones; equal heights */
.pv-kinds { display: grid; gap: 0.7rem; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; margin-top: clamp(1rem, 3vw, 1.6rem); }
@media (max-width: 1099px) { .pv-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-kind { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "n t" "n l" "n h"; column-gap: 0.8rem; align-items: baseline;
  padding: 0.8rem 1rem; border-radius: 14px; background: var(--ws-panel); border: 1px solid var(--ws-line); color: inherit; text-decoration: none; min-width: 0; transition: border-color 0.16s ease, transform 0.16s ease; }
.pv-kind:hover { border-color: var(--ws-fire); transform: translateY(-2px); color: inherit; }
.pv-kind b { grid-area: n; font-family: var(--ws-mono); font-size: clamp(1.6rem, 4vw, 2.2rem); color: var(--ws-flame); line-height: 1; align-self: center; }
.pv-kind span { grid-area: t; font-family: var(--ws-display); font-weight: 700; font-size: 1.05rem; }
.pv-kind small { grid-area: l; font-size: var(--ws-fs-xs); color: var(--ws-mute); line-height: 1.35; }
.pv-kind em { grid-area: h; font-style: normal; font-size: var(--ws-fs-xs); color: var(--ws-faint); margin-top: 0.15rem; }
.pv-kind { align-content: center; }
.pv-kind span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* phone: one column of compact rows (count, name, short line); each collection repeats its full explainer below */
@media (max-width: 760px) { .pv-kinds { gap: 0.4rem; grid-template-columns: minmax(0, 1fr); } .pv-kind { grid-template-areas: "n t" "n l"; padding: 0.55rem 0.8rem; } .pv-kind b { font-size: 1.5rem; } .pv-kind span { font-size: 0.95rem; } .pv-kind em { display: none; } }

/* sticky bar: the three tabs, search, rarity */
.pv-bar { position: sticky; top: var(--ws-top, 0px); z-index: 30; margin-top: 1.2rem; padding: 0.6rem 0; background: linear-gradient(var(--ws-bg) 80%, rgba(12, 7, 5, 0.85)); border-bottom: 1px solid var(--ws-line-2); }
.pv-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; }
.pv-tabs { display: flex; gap: 0.3rem; padding: 0.2rem; border-radius: 999px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ws-line-2); }
.pv-tabs a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.85rem; border-radius: 999px; font-weight: 600; font-size: var(--ws-fs-sm); color: var(--ws-mute); text-decoration: none; white-space: nowrap; }
.pv-tabs a small { font-family: var(--ws-mono); font-size: var(--ws-fs-xs); opacity: 0.8; }
.pv-tabs a:hover { color: var(--ws-ink); }
.pv-tabs a.is-on { background: linear-gradient(180deg, var(--ws-gold), var(--ws-fire)); color: #1a0b04; }
.pv-bar .ws-search { flex: 1 1 200px; max-width: 300px; }
.pv-bar .ah-rar { flex-wrap: nowrap; }
.pv-count { font-size: var(--ws-fs-xs); color: var(--ws-faint); margin-left: auto; }
@media (max-width: 760px) {
  .pv-bar-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .pv-bar-row::-webkit-scrollbar { display: none; }
  .pv-bar .ws-search { flex: 0 0 170px; }
  .pv-bar .ah-rar, .pv-count, .pv-bar [data-clear] { flex: none; }
}

/* category legend: chips that filter (no headers are inserted) */
.pv-legend { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.9rem 0 0.3rem; }
.pv-chip { appearance: none; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.22rem 0.6rem 0.22rem 0.3rem; border-radius: 999px; font: inherit; font-size: var(--ws-fs-xs);
  color: var(--ws-mute); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ws-line-2); cursor: pointer; white-space: nowrap; }
.pv-chip small { font-family: var(--ws-mono); opacity: 0.7; }
.pv-chip:hover { color: var(--ws-ink); border-color: var(--ws-line); }
.pv-chip.is-on { color: var(--ws-ink); border-color: var(--cat, var(--ws-fire)); background: color-mix(in srgb, var(--cat, var(--ws-fire)) 16%, transparent); }
.pv-chip[data-cat-filter=""] { padding-left: 0.6rem; }
.pv-chip .pv-cat { width: 20px; height: 20px; }
@media (max-width: 760px) { .pv-legend { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.3rem; scrollbar-width: thin; } .pv-chip { flex: none; } }

/* category icon: a small disc; in a tile it sits in the top-left corner */
.pv-cat { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: none; border-radius: 50%;
  background: rgba(12, 7, 5, 0.85); border: 1px solid var(--ws-line-2); color: var(--ws-mute); }
.pv-cat .wi { width: 15px; height: 15px; }
.pv-cat { color: var(--cat, var(--ws-mute)); border-color: color-mix(in srgb, var(--cat, #888) 45%, transparent); }
.pv-chip .pv-cat, [data-cat] > .pv-cat { color: var(--cat); }
/* a showcase card whose item has its own medallion: the art replaces the small category disc */
.pv-cat.has-art { position: relative; width: 40px; height: 40px; border: 0; background: none; }
.pv-cat.has-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: 50%; }
.pv-cat.has-art img ~ .wi { visibility: hidden; }
.pv-cat.is-corner { position: absolute; top: 0.35rem; left: 0.35rem; z-index: 2; }
@media (max-width: 520px) { .pv-cat.is-corner { width: 20px; height: 20px; top: 0.25rem; left: 0.25rem; } .pv-cat.is-corner .wi { width: 13px; height: 13px; } }

/* collections */
.pv-sec { margin-top: clamp(1.6rem, 4vw, 2.4rem); scroll-margin-top: calc(var(--ws-top, 0px) + 70px); }
.pv-sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; margin-bottom: 0.7rem; }
.pv-sec-head .ws-h2 { margin: 0; flex: 1 1 100%; }
.pv-line { margin: 0; color: var(--ws-mute); font-size: var(--ws-fs-sm); }
.pv-meta { font-size: var(--ws-fs-xs); color: var(--ws-faint); font-family: var(--ws-mono); }

/* showcase: one compact row */
.pv-showcase { display: grid; gap: 0.6rem; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 0.9rem; }
.pv-show-card { appearance: none; font: inherit; color: inherit; text-align: left; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.6rem; align-items: start;
  padding: 0.6rem 0.75rem; border-radius: 12px; background: var(--ws-panel-2); border: 1px solid var(--ws-line-2); cursor: pointer; min-width: 0; }
.pv-show-card:hover { border-color: var(--ws-line); }
.pv-show-card.is-note { cursor: default; grid-template-columns: minmax(0, 1fr); }
.pv-show-text { display: flex; flex-direction: column; min-width: 0; }
.pv-show-text small { font-size: var(--ws-fs-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ws-faint); }
.pv-show-text b { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-show-text b small { font-size: var(--ws-fs-xs); text-transform: none; letter-spacing: 0; }
.pv-show-text span { font-size: var(--ws-fs-xs); color: var(--ws-mute); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-show-card .ws-meter { grid-column: 1 / -1; margin-top: 0.3rem; }
.pv-show-card[data-cat] { border-left: 3px solid var(--cat); }
@media (max-width: 900px) { .pv-showcase { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(210px, 70%); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 0.3rem; } .pv-show-card { scroll-snap-align: start; } }

/* the dense grid: one per collection, no category headers */
.pv-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(114px, 1fr)); }
.pv-grid.is-badges { grid-template-columns: repeat(auto-fill, minmax(134px, 1fr)); }
@media (max-width: 520px) { .pv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; } .pv-grid.is-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pv-grid .wh-tile { --tsize: 74px; position: relative; padding: 0.55rem 0.3rem 0.5rem; gap: 0.3rem; cursor: pointer; }
.pv-grid .wh-tile-name { font-size: 0.88rem; line-height: 1.2; }
.pv-grid .wh-rarity { font-size: 0.74rem; }
.pv-grid .wh-tile-meta { font-size: 0.78rem; }
.pv-grid .wh-tile.is-locked .wh-tile-meta { color: var(--ws-faint); }
.pv-grid .wb-cell { position: relative; padding: 0.6rem 0.35rem 0.55rem; gap: 0.25rem; }
.pv-grid .wb-cell .wh-tier { font-size: 0.78rem; }
.pv-grid .wb-val { font-size: 0.8rem; }
.pv-grid .ah-tier-rar { font-size: 0.74rem; }
.pv-grid .wh-tile:focus-visible, .pv-grid .wb-cell:focus-visible { outline: 2px solid var(--ws-fire); outline-offset: 2px; }
/* variant B: a thin category bar along the bottom and a faint wash, never touching the rarity frame colours */
.pv-grid .pv-tile[data-cat] { box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--cat) 80%, transparent); background: linear-gradient(0deg, color-mix(in srgb, var(--cat) 9%, transparent), transparent 55%), rgba(255, 255, 255, 0.02); }
.pv-more { display: flex; justify-content: center; margin-top: 0.9rem; }
.pv-empty { text-align: center; color: var(--ws-mute); padding: 2rem 0; }
.pv-foot { margin: 2rem 0 2.5rem; color: var(--ws-faint); font-size: var(--ws-fs-sm); }
.pv-flag { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.55rem; border-radius: 999px; border: 1px dashed var(--ws-line); font-size: var(--ws-fs-xs); color: var(--ws-faint); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }

/* phone: the rarity chip stays on one line in a 3-column tile */
@media (max-width: 520px) { .pv-grid .wh-rarity { font-size: 0.62rem; letter-spacing: 0.02em; padding-left: 0.35rem; padding-right: 0.35rem; white-space: nowrap; } }
.pv-secrets { appearance: none; font: inherit; display: inline-flex; flex-wrap: wrap; gap: 0.35rem; align-items: baseline; margin-top: 0.35rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--ws-line-2); background: var(--ws-panel-2); color: var(--ws-mute); font-size: var(--ws-fs-sm); cursor: pointer; transition: border-color 0.16s ease, color 0.16s ease; }
.pv-secrets b { color: var(--ws-ink); }
.pv-secrets u { text-decoration: none; color: var(--ws-fire); font-weight: 600; }
.pv-secrets:hover, .pv-secrets[aria-pressed="true"] { border-color: var(--ws-fire); color: var(--ws-ink); }

/* clan collection (hall.js drawClanGrids): two sub-grids with small headings; an empty one hides */
.pv-sub { margin: 1rem 0 0.5rem; font-family: var(--ws-display); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ws-mute); }
.pv-sub[hidden], .pv-grid[hidden] { display: none; }