/* wgf-tracked.css - the sitewide tracked-items star + /tracked/ page styles.
   Companion to assets/wgf-tracked.js (window.WGFTracked).

   Design doctrine: 1:1 in-game chrome. The star is the real client favorite
   asset (assets/ui/auctionhouse-icon-favorite.png) with opacity states - the
   same .wgf-favbtn treatment wgf-chrome.css ships (single-homed there for the
   AH); restated on .wgf-trk-star so pages that load without the chrome kit
   still draw the correct star. Squared corners everywhere, no pills. */

/* ---- the star (fallback twin of .wgf-favbtn in wgf-chrome.css) --------------- */
.wgf-trk-star {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: url(/assets/ui/auctionhouse-icon-favorite.png) center / contain no-repeat transparent;
  opacity: 0.4;
  cursor: pointer;
  transition: opacity 120ms ease, filter 120ms ease;
}
.wgf-trk-star:hover { opacity: 0.85; filter: brightness(1.1); }
.wgf-trk-star.is-tracked {
  opacity: 1;
  filter: brightness(1.15) drop-shadow(0 0 2px rgba(240, 200, 100, 0.6));
}
.wgf-trk-star:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px rgba(240, 200, 100, 0.7));
}
.wgf-trk-star.is-disabled { cursor: default; opacity: 0.15; }

@media (prefers-reduced-motion: reduce) {
  .wgf-trk-star { transition: none; }
}

/* ---- inline sign-in prompt (the comments-gate look, anchored to a star) ------
   Warband restyle 2026-08-05: the gate is a gold-trimmed dark well, the same
   panel language as the character-select screen's floating panels. */
.wgf-trk-gate {
  position: fixed;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 280px;
  max-width: calc(100vw - 16px);
  padding: 14px 12px;
  border: 1px solid var(--wgf-gold-dark, #5a4410);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.35)),
    var(--wgf-well, #0a0a0c);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.75),
    inset 0 0 0 1px rgba(0, 0, 0, 0.6),
    0 6px 18px rgba(0, 0, 0, 0.6);
}

.wgf-trk-gate__copy {
  margin: 0;
  font-size: 12.8px;
  line-height: 1.5;
  color: var(--wgf-muted, #c9bda4);
}

.wgf-trk-gate__btn { text-decoration: none; }

/* ---- /tracked/ list (realm groups) -------------------------------------------
   Warband restyle 2026-08-05: the list wears the character-select screen's
   panel language wherever it mounts (/tracked/ page, /account/ window). Realm
   group headers are carved gold-trimmed plates, rows are dark warband plates
   that lift gold on hover, and the remove button is the client's own red X
   slice (128-redbutton-exit), never an invented glyph. All colors come from
   the token home in static/css/_tokens.css with literal fallbacks for any
   page that ships without it. */
.wgf-trk-group { margin-top: 14px; }

.wgf-trk-group__title {
  margin: 0 0 8px;
  padding: 5px 10px;
  font-family: var(--font-game, inherit);
  font-size: var(--text-sm, 13px);
  font-weight: 700;
  font-variant: small-caps;
  letter-spacing: 0.05em;
  color: var(--wgf-gold, #f0c040);
  text-shadow: var(--text-ink-outline, 0 1px 2px rgba(0, 0, 0, 0.92));
  border: 1px solid var(--wgf-gold-dark, #5a4410);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(0, 0, 0, 0.30)),
    var(--wgf-panel, #221b11);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.wgf-trk-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.wgf-trk-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin-bottom: 4px;
  border: 1px solid var(--wgf-border-neutral, #453824);
  background: linear-gradient(180deg, #0d0a06, var(--wgf-bg-base, #16110a));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.55);
}
.wgf-trk-row:hover {
  border-color: var(--wgf-gold-dark, #5a4410);
  background: linear-gradient(180deg, #14100a, #1a140c);
}
.wgf-trk-row.is-going { opacity: 0.45; }
.wgf-trk-row.is-error { outline: 1px solid rgba(200, 60, 40, 0.7); }

.wgf-trk-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: block;
}

.wgf-trk-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--wgf-gold-bright, #ffd978);
  text-decoration: none;
}

.wgf-trk-when {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--wgf-muted, #c9bda4);
}

/* The remove control is the client's real red X (the .wgf-window__x /
   .wgf-iconbtn--x slice). The markup keeps its accessible times glyph and
   aria-label; the art paints over it (font-size 0 hides the text glyph). The
   hover/active rules restate the background so wgf-account.css's older flat
   red wash (same specificity, earlier in the cascade) never repaints it. */
.wgf-trk-drop {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: url(/assets/ui/128-redbutton-exit.png) center / contain no-repeat transparent;
  color: transparent;
  font-size: 0;
  line-height: 1;
  cursor: pointer;
  transition: filter 120ms ease;
}
.wgf-trk-drop:hover {
  background: url(/assets/ui/128-redbutton-exit.png) center / contain no-repeat transparent;
  filter: brightness(1.15);
}
.wgf-trk-drop:active {
  background: url(/assets/ui/128-redbutton-exit-pressed.png) center / contain no-repeat transparent;
  filter: none;
}
.wgf-trk-drop:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring, 0 0 0 2px rgba(240, 200, 100, 0.7));
}

/* The /tracked/ page seats the list in a chrome-kit well; this modifier is the
   gold trim on that well (the markup hook lives in tracked_app.py only, so the
   /account/ mount is untouched by it). */
.wgf-trk-well { border-color: var(--wgf-gold-dark, #5a4410); }

@media (prefers-reduced-motion: reduce) {
  .wgf-trk-drop { transition: none; }
}