/* precon-hub.css — /precons/ only (the hub). Page-scoped, like life-counter.css
 * and playtest.css: these rules style two things no other page has, so they
 * don't belong in the site-wide styles.css (and don't cost every page a token
 * bump when they change). Loaded AFTER styles.css.
 */

/* The badge is the link to the guide here (2026-10-14). As an anchor it
   inherits the global underline, and `a:hover { color: var(--link-hover) }`
   outranks .precon-badge's white text on specificity, turning a hovered pill's
   label the colour of its own background. These selectors are (0,1,1) and
   (0,2,1), so they win both. The other badge call sites (/precons/prices/,
   the Secret Lair index) are still <span>s and never load this file. */
a.precon-badge,
a.precon-badge:visited { color: #fff; text-decoration: none; }
a.precon-badge:hover,
a.precon-badge:focus-visible { color: #fff; background: var(--link-hover); text-decoration: none; }

/* The filter bar (precon-hub.js). The colour toggles and the guide box are
   checkboxes, and `.filter-bar input`'s 150px min-width (100% width under
   620px) is written for text boxes, so both are undone here. These name .field
   as well, on purpose: `.filter-bar .field > label` (display: block) and
   `.filter-bar .field` carry the same specificity as a plain
   `.filter-bar .ph-colors`, and this file must not depend on load order to win. */
.filter-bar .field.ph-colors {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  border: 0;
  padding: 0;
  min-width: 0;
}
.filter-bar .field.ph-colors legend { padding: 0; margin-bottom: 4px; font-size: 0.85rem; font-weight: 600; }
.filter-bar .field.ph-colors > label,
.filter-bar .field.ph-check > label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  margin: 0 8px 0 0;
  cursor: pointer;
}
.filter-bar .field.ph-colors input,
.filter-bar .field.ph-check input { min-width: 0; width: auto; margin: 0; }
.filter-bar .ph-colors .mana-pip { width: 20px; height: 20px; }