/* Trump Action Archive — shared components (single source of truth).
   CANONICAL copy: taa/public/assets/components.css (git-tracked).
   The theme copy (wordpress/taa-shell/components.css) is GENERATED from this file
   by wordpress/tools/sync_tokens.sh — never hand-edit the theme copy.
   Loaded after tokens.css and before each app's own stylesheet.

   Scope is deliberate: only the product's core VOCABULARY that must read
   identically in the archive app and the WordPress shell — the verification
   badges and the tag chips. Header/nav and the newsletter form stay app-local
   (their bar width tracks each app's content width; the form's light/dark
   default differs per app) and are candidates for the visual-redesign pass. */

/* ---- keyboard focus ring (a11y baseline, both apps) ---- */
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent-2); outline-offset: 2px;
}

/* ---- verification badges (Tier 1 / Corroborated / single-source) ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .02em; border-radius: 3px; padding: 3px 9px; white-space: nowrap; text-transform: uppercase;
  color: #fff; background: var(--muted);
}
/* color repeated on the colored variants (not just base) so a more specific
   context rule — e.g. the theme's `.states span` — can't override it to dark text. */
.badge.tier1 { background: var(--accent); color: #fff; }
.badge.corrob { background: var(--accent-2); color: #fff; }
.badge.single { background: #e7e1d3; color: #6a6152; border: 1px solid var(--rule-strong); }
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; }

/* ---- tag chips (attack targets / traits) ---- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: .8rem; border-radius: 20px; padding: 3px 12px; border: 1px solid var(--rule-strong); background: #eee7d7; color: #5c5442; }
.chip.attack { background: #f5e9e8; color: #7a3030; border-color: #e2c4c2; }
.chip.trait { background: #eaf0f5; color: #31506b; border-color: #cddbe6; }
a.chip { text-decoration: none; cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
a.chip.attack:hover { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
a.chip.trait:hover { border-color: var(--accent-2); box-shadow: 0 0 0 1px var(--accent-2); }