/* wgf-rep-pane.css - the /faction/ page as the client's Reputation pane (faction_wiki.py).
 *
 * Owner rulings 2026-10-10 (evening): every page looks like it came straight out of the
 * game, client art 1:1, NO blue cards. The page is ONE metal window titled "Reputation"
 * (the .wgf-window kit from wgf-chrome.css: UIFrameMetal nine-slice over Class Hall stone),
 * holding the list inset (.wgf-inset kit: UI-Frame-Inner rims + marble) and the detail
 * frame. Every other block is a kit window (.wgf-window.wgf-rep-sec).
 *
 * Art used (all extracted client files):
 *   assets/ui/achv/plusminus.png              the header row's +/- toggle (top half = minus)
 *   assets/ui/achv/category-background.png    the reputation row plate
 *   assets/ui/achv/category-highlight.png     the selected row band
 *   assets/ui/achv/piece-progressbar-border.png  the standing bar border. MISSING SLICE:
 *       the client's own ReputationBar border is not in assets/ui; this is the closest
 *       extracted status-bar frame (same AchievementFrame atlas family).
 *   assets/ui/achv/statusbar-highlight.png    the bar's gloss
 *   assets/ui/blizzard/dialogbox-background-dark.png  the detail frame body
 *   assets/ui/blizzard/tooltip-border-9slice.png      the detail frame rim
 * The bar fill is the client's FACTION_BAR_COLORS vertex tint on a white status bar, so a
 * flat colour IS the art (the client tints, it does not texture, that fill).
 */

/* -- the window --------------------------------------------------------------------- */
.wgf-repframe { margin: 0 0 var(--space-4, 16px); }
.wgf-repframe__body {
  display: grid;
  gap: var(--space-3, 12px);
  grid-template-columns: minmax(0, 1fr);
  padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
}
@media (min-width: 900px) {
  .wgf-repframe__body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
}

/* -- the list inset: header row + this reputation's row ----------------------------- */
.wgf-rep-list { padding: var(--space-2, 8px); align-self: start; }
.wgf-rep-list__header {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 0 6px;
  font-family: var(--font-game, inherit);
  color: var(--gold, #ffd100);
}
.wgf-rep-list__header a { color: inherit; text-decoration: none; }
.wgf-rep-list__header a:hover { text-decoration: underline; }
.wgf-rep-list__pm {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  background: url(/assets/ui/achv/plusminus.png) 0 0 / 16px 32px no-repeat;
}
.wgf-rep-list__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "crest name" "crest bar";
  align-items: center;
  gap: 4px 10px;
  margin: 4px 0 0 18px;
  padding: 8px 10px;
  background: url(/assets/ui/achv/category-background.png) center / 100% 100% no-repeat;
}
.wgf-rep-list__row.is-selected {
  background:
    url(/assets/ui/achv/category-highlight.png) center / 100% 100% no-repeat,
    url(/assets/ui/achv/category-background.png) center / 100% 100% no-repeat;
}
.wgf-rep-list__crest { grid-area: crest; }
.wgf-rep-list__crest:empty { display: none; }
.wgf-shell-page main .wgf-rep-list__name,
.wgf-rep-list__name {
  grid-area: name;
  margin: 0;
  font-family: var(--font-game, inherit);
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  line-height: 1.15;
  color: var(--gold, #ffd100);
  text-shadow: var(--text-ink-outline, 0 1px 0 #000);
}
.wgf-rep-list__row > .wgf-rep-bar { grid-area: bar; }

/* -- the standing bar ------------------------------------------------------------------ */
.wgf-rep-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 22px;
  min-width: 0;
  padding: 0 10px;
  border: none;
  border-image: url(/assets/ui/achv/piece-progressbar-border.png) 8 10 8 10 fill / 8px 10px stretch;
  overflow: hidden;
  font-size: var(--text-sm, .875rem);
  color: #fff;
  text-shadow: 0 1px 1px #000;
}
.wgf-rep-bar::before {
  content: "";
  position: absolute;
  inset: 3px 4px;
  background: #000;
  opacity: .72;
}
.wgf-rep-bar__fill {
  position: absolute;
  inset: 3px auto 3px 4px;
  max-width: calc(100% - 8px);
  background: url(/assets/ui/achv/statusbar-highlight.png) left top / 100% 100% no-repeat,
    var(--rep-bar, rgb(229, 178, 0));
}
.wgf-rep-bar--hostile    { --rep-bar: rgb(204, 77, 56); }
.wgf-rep-bar--unfriendly { --rep-bar: rgb(191, 69, 0); }
.wgf-rep-bar--neutral    { --rep-bar: rgb(229, 178, 0); }
.wgf-rep-bar--friendly   { --rep-bar: rgb(0, 153, 26); }
.wgf-rep-bar--renown     { --rep-bar: rgb(0, 140, 255); }
.wgf-rep-bar__label, .wgf-rep-bar__val { position: relative; white-space: nowrap; }
.wgf-rep-bar__val { font-variant-numeric: tabular-nums; }

/* -- the detail frame (ReputationDetailFrame: dark dialog body, tooltip rim) ------------ */
.wgf-rep-detail {
  padding: 14px 16px;
  border: 12px solid transparent;
  border-image: url(/assets/ui/blizzard/tooltip-border-9slice.png) 16 / 12px / 0 round;
  background: url(/assets/ui/blizzard/dialogbox-background-dark.png) left top / 64px 64px repeat;
  background-clip: padding-box;
  min-width: 0;
}
.wgf-shell-page main .wgf-rep-detail__title,
.wgf-rep-detail__title {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-game, inherit);
  font-size: 1.2rem;
  color: var(--gold, #ffd100);
}
.wgf-rep-detail__desc { margin: 0 0 8px; }
.wgf-rep-detail__summary { margin: 0 0 10px; color: var(--wgf-text, #f4ecd8); line-height: 1.5; }
.wgf-rep-detail__facts { margin: 0; }

/* -- the standing ladder ------------------------------------------------------------------ */
.wgf-rep-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 640px; }
.wgf-rep-ladder__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8em minmax(0, 10em);
  align-items: center;
  gap: 10px;
}
.wgf-rep-ladder__row > .wgf-rep-bar { order: 2; }
.wgf-rep-ladder__name { order: 1; font-family: var(--font-game, inherit); }
.wgf-rep-ladder__span { order: 3; font-size: var(--text-sm, .875rem); color: var(--wgf-muted, #a49b86); }
.wgf-rep-ladder__row.is-start .wgf-rep-ladder__name::after { content: " (start)"; color: var(--wgf-muted, #a49b86); font-weight: 400; }
@media (max-width: 560px) {
  .wgf-rep-ladder__row { grid-template-columns: 1fr; gap: 2px; }
}

/* -- every other block: a kit window; shared blocks that still print .wgf-section sit in
      the client inset (UI-Frame-Inner rims + marble), never the retired navy plate ------ */
.wgf-rep-sec { margin: 0 0 var(--space-4, 16px); }
.wgf-rep-sec > .wgf-window__body { padding: var(--space-3, 12px) var(--space-4, 16px); }
.wgf-rep-sec__h3 { margin: var(--space-3, 12px) 0 var(--space-2, 8px); font-family: var(--font-game, inherit); color: var(--gold, #ffd100); font-size: 1rem; }
.wgf-shell-page main .wgf-rep-page .wgf-section,
.wgf-rep-page .wgf-section {
  background: var(--wgf-inset-art);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-3, 12px) var(--space-4, 16px);
  margin: 0 0 var(--space-4, 16px);
}
.wgf-shell-page main .wgf-rep-page .wgf-section > .section-heading,
.wgf-rep-page .wgf-section > .section-heading { color: var(--gold, #ffd100); }

/* sibling tiles read as reputation rows, not cards */
.wgf-shell-page main .wgf-rep-page .wgf-rep-tiles .wgf-ag-card,
.wgf-shell-page main .wgf-rep-page .wgf-ag-grid .wgf-ag-card {
  background: url(/assets/ui/achv/category-background.png) center / 100% 100% no-repeat;
  border: 0;
  box-shadow: none;
}