/* ── Shared audit-page CSS ────────────────────────────────────────
 *
 * Linked from every page on jumper-audit-uat (via the Dockerfile +
 * the deploy skill cp list). Holds:
 *
 *  1. Shared color/spacing TOKENS — prefixed `--ui-*` so they don't
 *     collide with per-page `:root` definitions. New components
 *     should reach for these; existing CSS keeps its locals.
 *
 *  2. Reusable utility CLASSES for patterns that re-implement on
 *     every page (status pills, chip badges, action buttons).
 *     Opt-in — apply the class to use the shared style.
 *
 * 2026-05-31 — DESIGN SYSTEM ADOPTION. This :root is now the SINGLE
 * source of truth for every audit page's palette. Each page links
 * this file and no longer defines its own :root — the canonical
 * tokens below (legacy names like --bg/--accent AND the --ui-* set)
 * resolve here. Pages were collapsed from 4 divergent palettes
 * (warm-gold, teal, orange, cool-grey) onto ONE: warm-dark bg with a
 * gold/brass accent (plurality + most-edited page + on-brand for the
 * steampunk look). Legacy and --ui-* names are kept in lockstep so a
 * page can't show two different "accents".
 *
 * Inventory of tokens:
 *   colors:    --ui-good --ui-warn --ui-bad --ui-accent --ui-violet --ui-muted
 *   bg tints:  --ui-good-bg --ui-warn-bg --ui-bad-bg --ui-violet-bg
 *   borders:   --ui-good-border --ui-warn-border --ui-bad-border --ui-violet-border
 *   spacing:   --ui-pad-sm --ui-pad-md --ui-pad-lg
 *   radius:    --ui-radius-sm --ui-radius-md --ui-radius-lg
 *   font-size: --ui-fs-sm --ui-fs-md --ui-fs-lg
 *
 * Inventory of utility classes:
 *   .ui-pill       — small status indicator (sync state, count badges)
 *   .ui-chip       — filter / category chip (toggleable)
 *   .ui-chip.is-active
 *   .ui-badge      — tiny accent label inside a card title
 *   .ui-badge--good / --warn / --bad / --violet
 *   .ui-btn        — base button (matches the existing approve/reject style)
 *   .ui-btn--good / --bad / --warm / --neutral
 *   .ui-banner     — full-width notification bar at top of page
 *   .ui-banner--alert / --info
 *   .ui-section-head — small uppercase label for grouping
 * */

:root {
  /* ══ CANONICAL PALETTE — single source of truth for all pages ══
     Warm-dark shell + gold/brass accent. Legacy names (--bg, --accent,
     …) and the --ui-* set below are kept in lockstep. */

  /* Shell */
  --bg:           #14110e;   /* page background (was 4 values) */
  --panel:        #1c1814;   /* card / panel surface */
  --panel2:       #221d18;   /* raised sub-surface */
  --panel-2:      #221d18;   /* alias — mission family hyphen spelling */
  --panel-hover:  #2c2620;
  --border:       #2f2a23;   /* solid hairline */
  --text:         #e8e0d0;   /* body text */
  --ink:          #f0e6d2;   /* brighter heading ink */
  --muted:        #9a8e7a;   /* secondary text */
  --shadow:       0 2px 12px rgba(0, 0, 0, 0.45);

  /* Accent + semantic status (legacy names — mirror the --ui-* set) */
  --accent:       #d4a85e;   /* gold/brass — the house accent */
  --accent-dim:   #b08540;
  --good:         #5fb46b;   /* green  — ready / ok */
  --warn:         #f6c84d;   /* yellow — changed / attention (distinct from gold accent) */
  --bad:          #d46b5f;   /* red    — error / drift */
  --warm:         #d99a52;   /* amber  — secondary warm tone */
  --pending:      #c6a85a;   /* approval-pending tone */
  --violet:       #cba8e8;   /* boon / potential-approval family */

  /* Skill-class + misc semantic accents (page-specific, globalized) */
  --melee:        #e74c3c;
  --range:        #3aa6ff;
  --skill:        #b685e0;
  --blue:         #6aa8c4;
  --gold:         #f0c084;
  --purple:       #b685e0;
  --green:        #5fb46b;   /* hub alias of --good */
  --amber:        #d4a04b;   /* hub gold */
  --red:          #d46b5f;   /* hub alias of --bad */

  /* Rarity ramps — player_skills (rarity-*) + mods (r-*) */
  --rarity-common:    #9b8e74;
  --rarity-uncommon:  #c9d6e3;
  --rarity-rare:      #f6c84d;
  --r-common:     #c8d0db;
  --r-uncommon:   #8de29a;
  --r-rare:       #74b0ff;
  --r-epic:       #c79ce6;
  --r-legendary:  #f0c084;

  /* ── --ui-* design-system tokens (mirror the canonical roles) ── */
  --ui-good:    #5fb46b;
  --ui-warn:    #f6c84d;
  --ui-bad:     #d46b5f;
  --ui-accent:  #d4a85e;     /* gold/brass — matches --accent */
  --ui-violet:  #cba8e8;
  --ui-muted:   #9a8e7a;
  --ui-text:    #e8e0d0;
  --ui-border:  rgba(255, 255, 255, 0.12);

  /* Background tints (12-18% alpha — matches existing badge backdrops) */
  --ui-good-bg:    rgba( 95, 184, 107, 0.15);
  --ui-warn-bg:    rgba(246, 200,  77, 0.15);
  --ui-bad-bg:     rgba(212, 107,  95, 0.18);
  --ui-accent-bg:  rgba(212, 168,  94, 0.15);
  --ui-violet-bg:  rgba(203, 168, 232, 0.18);

  --ui-good-border:   rgba( 95, 184, 107, 0.50);
  --ui-warn-border:   rgba(246, 200,  77, 0.50);
  --ui-bad-border:    rgba(212, 107,  95, 0.55);
  --ui-accent-border: rgba(212, 168,  94, 0.55);
  --ui-violet-border: rgba(203, 168, 232, 0.55);

  --ui-pad-sm:   4px;
  --ui-pad-md:   8px;
  --ui-pad-lg:  12px;

  --ui-radius-sm:  3px;
  --ui-radius-md:  6px;
  --ui-radius-lg:  9px;

  --ui-fs-xs:   10px;
  --ui-fs-sm:   11px;
  --ui-fs-md:   13px;
  --ui-fs-lg:   15px;
}

/* ── PILL — small status indicator ───────────────────────────── */
.ui-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--ui-fs-sm);
  font-weight: 600;
  padding: 1px var(--ui-pad-md);
  border-radius: var(--ui-radius-lg);
  border: 1px solid var(--ui-border);
  color: var(--ui-muted);
  background: rgba(255, 255, 255, 0.04);
  vertical-align: middle;
  letter-spacing: 0.03em;
}
.ui-pill--good   { color: var(--ui-good);   border-color: var(--ui-good-border);   background: var(--ui-good-bg); }
.ui-pill--warn   { color: var(--ui-warn);   border-color: var(--ui-warn-border);   background: var(--ui-warn-bg); }
.ui-pill--bad    { color: var(--ui-bad);    border-color: var(--ui-bad-border);    background: var(--ui-bad-bg); }
.ui-pill--accent { color: var(--ui-accent); border-color: var(--ui-accent-border); background: var(--ui-accent-bg); }
.ui-pill--violet { color: var(--ui-violet); border-color: var(--ui-violet-border); background: var(--ui-violet-bg); }

/* ── CHIP — filter / category toggle ──────────────────────────── */
.ui-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--ui-fs-sm);
  padding: 4px var(--ui-pad-md);
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border);
  color: var(--ui-muted);
  background: transparent;
  cursor: pointer;
  user-select: none;
}
.ui-chip:hover { color: var(--ui-text); border-color: rgba(255, 255, 255, 0.25); }
.ui-chip.is-active {
  color: var(--ui-text);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.30);
}
.ui-chip--violet.is-active {
  color: var(--ui-violet);
  border-color: var(--ui-violet-border);
  background: var(--ui-violet-bg);
}
.ui-chip--warn.is-active {
  color: var(--ui-warn);
  border-color: var(--ui-warn-border);
  background: var(--ui-warn-bg);
}
.ui-chip--bad.is-active {
  color: var(--ui-bad);
  border-color: var(--ui-bad-border);
  background: var(--ui-bad-bg);
}
.ui-chip-count {
  font-style: italic;
  opacity: 0.85;
  margin-left: 4px;
}

/* ── BADGE — tiny label inside a card title ─────────────────── */
.ui-badge {
  display: inline-block;
  font-size: var(--ui-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 7px;
  border-radius: var(--ui-radius-lg);
  vertical-align: middle;
  margin-left: 4px;
  border: 1px solid transparent;
}
.ui-badge--good   { color: var(--ui-good);   background: var(--ui-good-bg);   border-color: var(--ui-good-border); }
.ui-badge--warn   { color: var(--ui-warn);   background: var(--ui-warn-bg);   border-color: var(--ui-warn-border); }
.ui-badge--bad    { color: var(--ui-bad);    background: var(--ui-bad-bg);    border-color: var(--ui-bad-border); }
.ui-badge--accent { color: var(--ui-accent); background: var(--ui-accent-bg); border-color: var(--ui-accent-border); }
.ui-badge--violet { color: var(--ui-violet); background: var(--ui-violet-bg); border-color: var(--ui-violet-border); }

/* ── BUTTON — base action button ─────────────────────────────── */
.ui-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font: inherit;
  font-size: var(--ui-fs-md);
  font-weight: 600;
  padding: var(--ui-pad-sm) var(--ui-pad-md);
  border-radius: var(--ui-radius-md);
  border: 1px solid var(--ui-border);
  background: transparent;
  color: var(--ui-text);
  cursor: pointer;
}
.ui-btn:active { transform: translateY(1px); }
.ui-btn--good { color: var(--ui-good); border-color: var(--ui-good-border); background: var(--ui-good-bg); }
.ui-btn--bad  { color: var(--ui-bad);  border-color: var(--ui-bad-border);  background: var(--ui-bad-bg); }
.ui-btn--warn { color: var(--ui-warn); border-color: var(--ui-warn-border); background: var(--ui-warn-bg); }
.ui-btn--violet { color: var(--ui-violet); border-color: var(--ui-violet-border); background: var(--ui-violet-bg); }
.ui-btn--neutral { color: var(--ui-muted); }
.ui-btn[disabled] { opacity: 0.5; cursor: default; }

/* ── BANNER — full-width notification bar at top of page ────── */
.ui-banner {
  display: flex; align-items: center; gap: var(--ui-pad-md);
  padding: var(--ui-pad-md) var(--ui-pad-lg);
  margin-bottom: var(--ui-pad-lg);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  font-size: var(--ui-fs-md);
  color: var(--ui-text);
}
.ui-banner--alert {
  background: var(--ui-bad-bg);
  border-color: var(--ui-bad-border);
  color: var(--ui-bad);
}
.ui-banner--warn {
  background: var(--ui-warn-bg);
  border-color: var(--ui-warn-border);
  color: var(--ui-warn);
}
.ui-banner--info {
  background: var(--ui-accent-bg);
  border-color: var(--ui-accent-border);
  color: var(--ui-accent);
}
.ui-banner a { color: inherit; text-decoration: underline; }
.ui-banner-close {
  margin-left: auto;
  background: transparent;
  border: none;
  color: inherit;
  font-size: var(--ui-fs-lg);
  cursor: pointer;
  opacity: 0.55;
}
.ui-banner-close:hover { opacity: 1; }

/* ── SECTION HEAD — small uppercase grouping label ───────────── */
.ui-section-head {
  font-size: var(--ui-fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ui-muted);
  padding-bottom: var(--ui-pad-sm);
  border-bottom: 1px solid var(--ui-border);
  margin: var(--ui-pad-lg) 0 var(--ui-pad-md);
}

/* ── Hub-only: cross-page work overview row ─────────────────── */
/* See index.html "Today's queue" banner — pulled from the same
 * endpoints the per-page chips read, so the user can see
 * approve-pending + drift + gaps + ready-to-live across the WHOLE
 * audit ecosystem without clicking into each card. */
.ui-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--ui-pad-md);
  margin: var(--ui-pad-lg) 0 calc(var(--ui-pad-lg) * 2);
}
.ui-overview-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-md);
  padding: var(--ui-pad-md) var(--ui-pad-lg);
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.ui-overview-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}
.ui-overview-card.has-attention {
  border-color: var(--ui-warn-border);
  background: var(--ui-warn-bg);
}
.ui-overview-card.has-alert {
  border-color: var(--ui-bad-border);
  background: var(--ui-bad-bg);
}
.ui-overview-count {
  font-size: 22px;
  font-weight: 700;
  color: var(--ui-text);
  line-height: 1.1;
}
.ui-overview-card.has-attention .ui-overview-count { color: var(--ui-warn); }
.ui-overview-card.has-alert .ui-overview-count     { color: var(--ui-bad); }
.ui-overview-label {
  font-size: var(--ui-fs-sm);
  color: var(--ui-muted);
  letter-spacing: 0.03em;
}
.ui-overview-hint {
  font-size: var(--ui-fs-xs);
  color: var(--ui-muted);
  opacity: 0.75;
  margin-top: 2px;
}