/* muserefer design system — shared by every page.
   Loaded AFTER each page's inline <style>, so these rules refine the page
   styles without replacing them. Visual language stays muserefer's own:
   paper #f6f5f1, ink #111, blue #2563eb, >> — no generic SaaS template
   look, no centered hero, no pill-badge rows. Design here means feedback
   and hierarchy: hover lift, press states, focus rings, urgency color on
   the uses bar, and a toast for every copy/used/report action. */

/* Cards: lift on hover wherever a card is clickable or listed. */
.wall .card, .guide-card, .group .card {
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.wall .card:hover, .guide-card:hover, .group .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
/* Page-1 slots: paid occupants get a solid frame; backfilled free fills
   get a dashed frame — the distinction is honest, not decorative. */
.card.slot-paid { border-color: #111; }
.card.slot-fill { border-style: dashed; border-color: #c9c5bc; }
/* Brief blue ring when a card click copies its code. */
.card.copied-flash { box-shadow: 0 0 0 2px #2563eb !important; }

/* Buttons: hover + press feedback everywhere. */
.btn { transition: background .15s ease, transform .1s ease, box-shadow .15s ease; }
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, .tab:focus-visible, .chip:focus-visible,
input:focus-visible, select:focus-visible, a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Uses bar urgency: blue normally, amber at 10 or fewer left, red at 3
   or fewer. Empty (0 left) is already red via the page styles. */
.bar > div.low { background: #d97706; }
.bar > div.critical { background: #b91c1c; }

/* Codes and counts: tabular numbers so values don't jump on update. */
.code, .domain, .count { font-variant-numeric: tabular-nums; }

/* Toast: bottom-center dark pill for copy/used/report feedback. */
#toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translate(-50%, 16px);
  background: #111; color: #fff;
  padding: 11px 20px; border-radius: 99px;
  font-size: 14px; font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 9999; box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Filter chips (guides hub and anywhere a list is filtered). */
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.chip {
  padding: 8px 14px; border-radius: 99px; border: 1px solid #ccc;
  background: #fff; cursor: pointer; font-size: 14px;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.chip:hover { border-color: #111; }
.chip.active { background: #111; color: #fff; border-color: #111; }