/* archon-popularity.css - page styles for /midnight-season-2-what-raiders-wear/.

   CHROME-NEUTRAL BY CONSTRUCTION, the trinket-tiers.css / tier-stats.css
   contract: every selector is `.ap-*` prefixed, there are ZERO token
   declarations, and there is no :root / body / bare-element rule anywhere in
   this file. The page is FRAMED (it shares header.php + footer.php + the theme
   engine with the rest of the site), so a single bare-element rule here would
   leak into the shared chrome.

   Every colour is a var() off the site's own theme tokens with a conservative
   fallback, so all themes and the per-viewer font picker follow for free.
   Class names use the site's own --c-<class> tokens; the demand bar uses ONE
   accent at varying strength rather than a red-to-green ramp, because these are
   popularity shares, not grades - a traffic-light palette would read as a
   quality judgement the data does not make. */

.ap-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 18px 16px 48px;
}

.ap-title {
  margin: 0 0 10px;
  font-size: 1.6rem;
  letter-spacing: .2px;
  color: var(--text-primary, #e8e8ea);
}

.ap-lead,
.ap-sec-lead,
.ap-howto {
  color: var(--text-secondary, #b6b7bd);
  line-height: 1.62;
}

.ap-lead {
  margin: 0 0 14px;
  max-width: 80ch;
}

.ap-lead strong { color: var(--text-primary, #e8e8ea); }

.ap-src,
.ap-lead a,
.ap-rel a,
.ap-td-item a {
  color: var(--text-link, #7db9ff);
  text-decoration: none;
}
.ap-src:hover,
.ap-lead a:hover,
.ap-rel a:hover,
.ap-td-item a:hover { text-decoration: underline; }

/* --- provenance chips ------------------------------------------------- */

.ap-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.ap-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--border-secondary, #34343a);
  border-radius: 999px;
  background: var(--bg-input, #1b1b1f);
  color: var(--text-muted, #8b8c93);
  font-size: .82rem;
  white-space: nowrap;
}

.ap-chip a { color: var(--text-link, #7db9ff); text-decoration: none; font-weight: 600; }
.ap-chip a:hover { text-decoration: underline; }

/* --- difficulty toggle ------------------------------------------------ */

.ap-diffs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}

.ap-diff {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 104px;
  padding: 7px 14px;
  border: 1px solid var(--border-secondary, #34343a);
  border-radius: 8px;
  background: var(--bg-card, #17171a);
  color: var(--text-secondary, #b6b7bd);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .12s ease, background .12s ease;
}

.ap-diff small {
  font-weight: 400;
  font-size: .74rem;
  color: var(--text-muted, #8b8c93);
}

a.ap-diff:hover {
  border-color: var(--accent, #d4a437);
  background: var(--bg-hover, #202024);
}

.ap-diff.is-on {
  border-color: var(--accent, #d4a437);
  background: var(--accent-bg, rgba(212, 164, 55, .12));
  color: var(--text-primary, #e8e8ea);
}

.ap-diff.is-off {
  opacity: .45;
  cursor: not-allowed;
}

/* --- how to read ------------------------------------------------------ */

.ap-howto {
  margin: 0 0 20px;
  padding: 12px 16px;
  border: 1px solid var(--border-secondary, #34343a);
  border-left: 3px solid var(--accent, #d4a437);
  border-radius: 6px;
  background: var(--bg-card, #17171a);
  max-width: 92ch;
}

.ap-howto h3 {
  margin: 0 0 6px;
  font-size: .95rem;
  color: var(--text-primary, #e8e8ea);
}

.ap-howto ul { margin: 0; padding-left: 18px; }
.ap-howto li { margin: 3px 0; }
.ap-howto strong { color: var(--text-primary, #e8e8ea); }

/* --- sections + callout cards ----------------------------------------- */

.ap-sec { margin: 0 0 28px; }

.ap-sec-h {
  margin: 0 0 4px;
  font-size: 1.15rem;
  color: var(--text-primary, #e8e8ea);
}

.ap-sec-lead {
  margin: 0 0 12px;
  max-width: 84ch;
}

.ap-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}

.ap-card {
  padding: 10px 12px;
  border: 1px solid var(--border-secondary, #34343a);
  border-radius: 8px;
  background: var(--bg-card, #17171a);
}

.ap-card-h {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}

.ap-card-name { font-weight: 600; line-height: 1.3; }

.ap-card-m {
  color: var(--text-muted, #8b8c93);
  font-size: .8rem;
  margin-bottom: 6px;
}

.ap-card-m.ap-dim { margin: 4px 0 0; }

.ap-card-owner {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: .9rem;
}

.ap-card-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* --- filter bar ------------------------------------------------------- */

.ap-filterbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
}

.ap-filter-l {
  color: var(--text-muted, #8b8c93);
  font-size: .85rem;
}

.ap-filter {
  flex: 0 1 300px;
  padding: 6px 10px;
  border: 1px solid var(--border-secondary, #34343a);
  border-radius: 6px;
  background: var(--bg-input, #1b1b1f);
  color: var(--text-primary, #e8e8ea);
  font: inherit;
  font-size: .9rem;
}

.ap-filter:focus-visible {
  outline: 2px solid var(--accent, #d4a437);
  outline-offset: 1px;
}

.ap-filter-n {
  color: var(--text-muted, #8b8c93);
  font-size: .82rem;
}

/* --- spec representation meter ---------------------------------------- */

/* Collapsed by default: a first-time reader came for the item boards, so this
   sits folded with its headline numbers on the summary and opens on one click.
   Same disclosure idiom the slot sections used before they became URL pages. */

.ap-pop-wrap {
  border: 1px solid var(--border-secondary, #34343a);
  border-radius: 8px;
  background: var(--bg-card, #17171a);
  padding: 0 14px;
}

.ap-pop-wrap[open] { padding-bottom: 14px; }

.ap-pop-sum {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 11px 0;
  cursor: pointer;
  list-style: none;
}

.ap-pop-sum::-webkit-details-marker { display: none; }

.ap-pop-sum::before {
  content: "B8";
  color: var(--text-muted, #8b8c93);
  font-size: .8em;
  transition: transform .12s ease;
}

.ap-pop-wrap[open] > .ap-pop-sum::before { transform: rotate(90deg); }

.ap-pop-sum:focus-visible {
  outline: 2px solid var(--accent, #d4a437);
  outline-offset: 2px;
}

.ap-pop-sum-h {
  color: var(--text-primary, #e8e8ea);
  font-size: 1.05rem;
  font-weight: 600;
}

.ap-pop-sum-m {
  color: var(--text-muted, #8b8c93);
  font-size: .84rem;
}


/* Class color is the ONLY color here: these are shares of a population, not
   grades, so there is no ramp and no good/bad axis. Bars are drawn relative to
   the LARGEST share (not to 100) so the tail stays legible at ~0.3%, while the
   printed percentage is always the true share - the stacked bar above carries
   the honest 100% proportions. */

.ap-meter {
  display: flex;
  width: 100%;
  height: 26px;
  margin: 0 0 16px;
  border: 1px solid var(--border-secondary, #34343a);
  border-radius: 6px;
  background: var(--bg-input, #1b1b1f);
  overflow: hidden;
}

.ap-meter i {
  display: block;
  height: 100%;
  min-width: 1px;
  border-right: 1px solid var(--bg-body, #0f0f11);
  cursor: help;
}

.ap-pop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ap-pop-row {
  display: grid;
  grid-template-columns: 2.1em minmax(150px, 1fr) 90px 4.2em 4.4em;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: .88rem;
}

.ap-pop-rank {
  color: var(--text-muted, #8b8c93);
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ap-pop-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ap-pop-name small {
  color: var(--text-muted, #8b8c93);
  font-weight: 400;
  font-size: .76rem;
}

.ap-pop-bar {
  height: 7px;
  border-radius: 4px;
  background: var(--bg-input, #1b1b1f);
  overflow: hidden;
}

.ap-pop-bar i { display: block; height: 100%; }

.ap-pop-pct {
  color: var(--text-primary, #e8e8ea);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.ap-pop-n {
  color: var(--text-muted, #8b8c93);
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* --- the board: slot nav + one slot's table ---------------------------- */

/* Splitting the board by slot is not only layout - it is what keeps the Wowhead
   tooltip hydration to a sane number of anchors per view. See the CSP note in
   archon-popularity.php. */

.ap-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 14px;
}

.ap-slotlink {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--border-secondary, #34343a);
  border-radius: 999px;
  background: var(--bg-card, #17171a);
  color: var(--text-secondary, #b6b7bd);
  font-size: .88rem;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .12s ease, background .12s ease;
}

.ap-slotlink b {
  color: var(--text-muted, #8b8c93);
  font-weight: 600;
  font-size: .78rem;
  font-variant-numeric: tabular-nums;
}

a.ap-slotlink:hover {
  border-color: var(--accent, #d4a437);
  background: var(--bg-hover, #202024);
  color: var(--text-primary, #e8e8ea);
}

.ap-slotlink.is-on {
  border-color: var(--accent, #d4a437);
  background: var(--accent-bg, rgba(212, 164, 55, .12));
  color: var(--text-primary, #e8e8ea);
  font-weight: 600;
}

.ap-slotlink.is-on b { color: var(--text-secondary, #b6b7bd); }

.ap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  border: 1px solid var(--border-secondary, #34343a);
  border-radius: 8px;
  background: var(--bg-card, #17171a);
  overflow: hidden;
}

.ap-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 7px 12px;
  border-top: 1px solid var(--border-secondary, #34343a);
  border-bottom: 1px solid var(--border-secondary, #34343a);
  background: var(--bg-input, #1b1b1f);
  color: var(--text-muted, #8b8c93);
  font-size: .78rem;
  font-weight: 600;
  text-align: left;
  white-space: nowrap;
}

.ap-table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid var(--border-secondary, #34343a);
  vertical-align: top;
}

.ap-table tbody tr:last-child td { border-bottom: 0; }
.ap-table tbody tr:hover { background: var(--accent-bg, rgba(212, 164, 55, .07)); }

.ap-th-item, .ap-td-item { width: 250px; }
.ap-th-n, .ap-td-n { width: 120px; white-space: nowrap; }

.ap-td-item {
  display: table-cell;
  line-height: 1.45;
}

.ap-item-ico,
.ap-ico {
  vertical-align: -3px;
  border-radius: 3px;
}

.ap-item-ico { margin-right: 6px; }

.ap-warn {
  margin-left: 4px;
  color: var(--text-muted, #8b8c93);
  cursor: help;
}

.ap-n {
  display: inline-block;
  min-width: 1.6em;
  color: var(--text-primary, #e8e8ea);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ap-bar {
  display: inline-block;
  width: 60px;
  height: 6px;
  margin-left: 6px;
  border-radius: 3px;
  background: var(--bg-input, #1b1b1f);
  overflow: hidden;
  vertical-align: middle;
}

.ap-bar i {
  display: block;
  height: 100%;
  background: var(--accent, #d4a437);
}

.ap-td-specs { line-height: 1.9; }

.ap-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 5px 3px 0;
  padding: 1px 7px 1px 4px;
  border: 1px solid var(--border-secondary, #34343a);
  border-radius: 999px;
  background: var(--bg-input, #1b1b1f);
  font-size: .8rem;
  white-space: nowrap;
}

.ap-mini b {
  color: var(--text-primary, #e8e8ea);
  font-variant-numeric: tabular-nums;
}

/* --- caveats + related ------------------------------------------------ */

.ap-caveats,
.ap-rel ul {
  margin: 0;
  padding-left: 18px;
  color: var(--text-secondary, #b6b7bd);
  line-height: 1.62;
  max-width: 92ch;
}

.ap-caveats li,
.ap-rel li { margin: 4px 0; }

.ap-empty {
  color: var(--text-muted, #8b8c93);
  font-style: italic;
}

/* --- narrow screens --------------------------------------------------- */

@media (max-width: 760px) {
  .ap-th-item, .ap-td-item { width: auto; }
  .ap-th-n, .ap-td-n { width: 78px; }
  .ap-bar { display: none; }
  .ap-table { font-size: .85rem; }
  .ap-diff { min-width: 88px; padding: 6px 10px; }
  .ap-pop-row { grid-template-columns: 1.9em minmax(120px, 1fr) 60px 4em; font-size: .84rem; }
  .ap-pop-n { display: none; }
}