/* wgf-csearch-filters.css - filter bar for /character/search/ (class -> spec palette, faction
   crests, min-rating input, Reset). The character-search page loads only the global site shell,
   not wgf-pvp.css, so the shared wgf-pvp-* chip classes are re-declared here scoped under .wgf-csf
   (visual twin of the arena-ladder filterbar). Bump the ?v= in pvp_app.character_search on change. */

.wgf-csf { margin: 0 0 1rem; }

/* GET-form row: min-rating input + Apply + Reset. */
.wgf-csf .wgf-pvp-filterbar { display: flex; align-items: flex-end; gap: .55rem; flex-wrap: wrap;
  margin: 0 0 .6rem; padding: .55rem .7rem; background: var(--wgf-panel-2, #211d17);
  border: 1px solid var(--wgf-border-neutral, #2c261c); border-radius: 10px; }
.wgf-csf .wgf-csf-rate { display: inline-flex; flex-direction: column; gap: .2rem; }
.wgf-csf .wgf-csf-rateinput { flex: 0 0 auto; min-width: 6rem; width: 7rem;
  font-variant-numeric: tabular-nums; }
.wgf-csf .wgf-pvp-search { background: #15130f; border: 1px solid var(--wgf-line, #3a352e);
  border-radius: 8px; padding: .45rem .7rem; color: var(--wgf-ink, #ece6db); font-size: .85rem; }
.wgf-csf .wgf-pvp-applybtn { cursor: pointer; border: 1px solid var(--wgf-border-neutral, #2c261c);
  border-radius: 8px; background: var(--wgf-panel-3, #2a251d); color: var(--wgf-text);
  font-weight: 600; font-size: .82rem; padding: .45rem .9rem; }
.wgf-csf .wgf-pvp-applybtn:hover { border-color: var(--wgf-gold);
  color: var(--wgf-gold-bright); }
.wgf-csf .wgf-pvp-resetbtn { display: inline-flex; align-items: center;
  color: var(--wgf-muted); text-decoration: none; font-size: .82rem; padding: .45rem .6rem; }
.wgf-csf .wgf-pvp-resetbtn:hover { color: var(--wgf-gold-bright); }
.wgf-csf .wgf-pvp-tlbl { color: #8d8170; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .04em; }

/* Class icon palette. */
.wgf-csf .wgf-pvp-classfilter { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin: 0 0 .5rem; }
.wgf-csf .wgf-pvp-classicon { display: inline-flex; padding: var(--space-1); border-radius: 8px;
  border: 2px solid transparent; line-height: 0; opacity: .8;
  transition: opacity .12s, border-color .12s, transform .12s; }
.wgf-csf .wgf-pvp-classicon img, .wgf-csf .wgf-pvp-classicon .wgf-pvp-icon { width: 32px; height: 32px;
  border-radius: 7px; display: block; margin: 0; }
.wgf-csf .wgf-pvp-classicon-x { display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 7px; background: var(--wgf-panel-3, #2a251d);
  color: var(--wgf-muted); font-size: .7rem; font-weight: 700; }
.wgf-csf .wgf-pvp-classicon:hover { opacity: 1; transform: translateY(-1px);
  border-color: var(--wgf-border-strong); }
.wgf-csf .wgf-pvp-classicon.on { opacity: 1; border-color: var(--wgf-gold-primary);
  box-shadow: 0 0 0 1px var(--wgf-gold-primary) inset; }
.wgf-csf .wgf-pvp-classicon:focus-visible { outline: none; opacity: 1;
  border-color: var(--wgf-gold-primary); }

/* Revealed spec row for the selected class. */
.wgf-csf .wgf-pvp-specrow2 { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
  margin: 0 0 .6rem; padding: .45rem .55rem; background: var(--wgf-panel-1, #1a1611);
  border: 1px solid var(--wgf-border-neutral, #2c261c); border-radius: 8px; }
.wgf-csf .wgf-pvp-specicon { display: inline-flex; padding: 2px; border-radius: 8px;
  border: 2px solid transparent; line-height: 0; opacity: .82;
  transition: opacity .12s, border-color .12s, transform .12s; }
.wgf-csf .wgf-pvp-specicon .wgf-pvp-icon { width: 30px; height: 30px; border-radius: 6px;
  display: block; margin: 0; }
.wgf-csf .wgf-pvp-specicon:hover { opacity: 1; transform: translateY(-1px);
  border-color: var(--wgf-border-strong); }
.wgf-csf .wgf-pvp-specicon.on { opacity: 1; border-color: var(--wgf-gold-primary);
  box-shadow: 0 0 0 1px var(--wgf-gold-primary) inset; }
.wgf-csf .wgf-pvp-specicon:focus-visible { outline: none; opacity: 1;
  border-color: var(--wgf-gold-primary); }
.wgf-csf .wgf-pvp-specreset { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-left: .15rem; border-radius: 8px;
  border: 1px solid var(--wgf-border-neutral, #2c261c); color: var(--wgf-muted);
  text-decoration: none; font-size: 1.1rem; }
.wgf-csf .wgf-pvp-specreset:hover { color: var(--wgf-gold-bright);
  border-color: var(--wgf-gold); }

/* Faction crest toggles. */
.wgf-csf .wgf-pvp-factionrow { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin: 0; }
.wgf-csf .wgf-pvp-facbtns { display: inline-flex; gap: .35rem; }
.wgf-csf .wgf-pvp-facbtn { display: inline-flex; align-items: center; justify-content: center;
  padding: .25rem .45rem; border-radius: 8px; border: 1px solid var(--wgf-border-neutral, #2c261c);
  background: var(--wgf-panel-1, #1a1611); color: var(--wgf-muted); text-decoration: none;
  font-size: .8rem; line-height: 1; transition: border-color .12s, background .12s; }
.wgf-csf .wgf-pvp-facbtn img { width: 22px; height: 22px; display: block; }
.wgf-csf .wgf-pvp-facbtn:hover { border-color: var(--wgf-border-strong);
  color: var(--wgf-text); }
.wgf-csf .wgf-pvp-facbtn.on { border-color: var(--wgf-gold-primary);
  box-shadow: 0 0 0 1px var(--wgf-gold-primary) inset; color: var(--wgf-text); }
.wgf-csf .wgf-pvp-facbtn:focus-visible { outline: none;
  border-color: var(--wgf-gold-primary); }

/* ============================================================================
   KIT RE-CUT (2026-07-03) - the character-search chrome adopts the in-game kit
   (docs/ui-ux/13-ingame-reference.md sec 0.4/0.9). The page header is a metal
   .wgf-window with a gold Friz title + US | EU tab strip; the filter controls
   are kit controls (the min-rating input rides the AH inputfield art, Apply is
   the client red button, factions are squared crest tabs - no rounded pills);
   results sit in the near-black .wgf-well. Kit atoms come from wgf-chrome.css
   (loaded on this page); these rules only scope/host them. Squared plates
   everywhere (--radius-pill is dead as a container radius, sec 0.4).
   ============================================================================ */

/* Window header + region tabs */
.wgf-csearch-hero { margin: 0 0 1rem; }
.wgf-csearch-hero .wgf-window__body { padding: var(--space-4) var(--space-5); }
.wgf-csearch-h1 { margin: 0; font-family: var(--font-game-display, var(--font-game));
  font-weight: 700; font-variant: small-caps; letter-spacing: .02em;
  color: var(--wgf-gold-bright); text-shadow: var(--text-ink-outline);
  font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.wgf-csearch-sub { margin: .35rem 0 0; color: var(--wgf-muted);
  font-family: var(--font-ui); font-size: .92rem; }
.wgf-csearch-regiontabs { justify-content: flex-end; }
.wgf-csearch-regiontabs .wgf-tab { min-width: 56px; text-decoration: none; }

/* Results well */
.wgf-csearch-well { padding: var(--space-2); }
.wgf-csearch-well .wgf-csearch__empty { margin: .4rem; color: var(--wgf-muted); }

/* Filter bar container -> squared plate (sec 0.4: no rounded pill containers) */
.wgf-csf .wgf-pvp-filterbar { border-radius: 3px; }
.wgf-csf .wgf-pvp-specrow2,
.wgf-csf .wgf-pvp-classfilter { border-radius: 3px; }

/* Min-rating input rides the AH inputfield art (.wgf-input wrapper); the real
   <input> keeps its wgf-csf-rateinput test hook but drops its own plate so the
   kit field art shows through. */
.wgf-csf .wgf-csf-ratewrap { width: 7rem; min-width: 6rem; height: var(--wgf-input-h, 36px);
  padding: 0 10px; }
.wgf-csf .wgf-csf-ratewrap > .wgf-csf-rateinput { flex: 1 1 auto; min-width: 0; width: 100%;
  height: 100%; padding: 0; border: 0; background: transparent;
  font-variant-numeric: tabular-nums; color: var(--wgf-text); }
.wgf-csf .wgf-csf-ratewrap > .wgf-csf-rateinput:focus { outline: none; }

/* Apply = the client red button; sit it flush with the input baseline. */
.wgf-csf .wgf-csf-applybtn { align-self: stretch; }

/* Faction selection = squared crest tabs (sec 0.4: crests, not rounded pills). */
.wgf-csf-factiontabs .wgf-pvp-facbtn { border-radius: 2px; }
.wgf-csf-factiontabs .wgf-pvp-facbtns { gap: .3rem; }