/*
 * chips.css — Shared filter-chip system.
 *
 * One stylesheet, two surfaces:
 *   - /tools/index.html (public free-tools directory)
 *   - app-v2.html SPA toolbox (.filter-chips inside #toolbox-cat-chips)
 *
 * Design intent (behavioural-science backed):
 *
 *   • Chunking (Miller 1956)         — 20+ categories partition into 4 bands
 *                                       (money / build / make / life) via subtle
 *                                       tinted backgrounds. Eye finds its band
 *                                       pre-attentively (Treisman), then scans
 *                                       within band — ~3-6 items each, inside
 *                                       working-memory cap.
 *
 *   • Anchoring (Tversky & Kahneman) — Count is the BOLD lead, label is secondary.
 *                                       "28 Business" not "Business (28)". Numbers
 *                                       drive scan + interest; users gravitate to
 *                                       categories with more options.
 *
 *   • Fitts's Law                    — 40px target height (was ~28px visual).
 *                                       Bigger = faster = higher click-through.
 *
 *   • Processing fluency (Reber)     — Higher contrast and clean type read as
 *                                       higher quality. No emoji clutter on tinted
 *                                       chips — colour replaces icon noise.
 *
 *   • Aesthetic-usability (Norman)   — Consistent visual language across both
 *                                       free-tier surfaces builds spatial memory
 *                                       and reduces cognitive switching cost.
 *
 * Markup contract (both surfaces emit this):
 *
 *   <div class="filter-chips" role="tablist">              ← already exists on both
 *     <button class="chip active" data-cat="all">…</button>
 *     <button class="chip" data-cat="business" data-band="money">…</button>
 *     <button class="chip" data-cat="finance"  data-band="money">…</button>
 *     …
 *   </div>
 *
 *   Inside each chip:
 *     <span class="chip-count">28</span>
 *     <span class="chip-label">Business</span>
 *
 *   Bands: data-band="money" | "build" | "make" | "life"
 *   The "All" chip has no data-band — it's the neutral anchor.
 *
 *   Sub-chips (.sub-chip) follow the same scaling rules, smaller footprint.
 *
 * All colour tokens come from tokens.css. Light/dark theme handled via the
 * [data-theme="light"] override block at the bottom.
 */

/* ════════════════════════════════════════════════════════════
   Rail container
   ════════════════════════════════════════════════════════════ */
.filter-chips,
.chips-scroll {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 0 10px;
  align-items: center;
}

/* ════════════════════════════════════════════════════════════
   Base chip — Fitts-compliant, count-first
   ════════════════════════════════════════════════════════════ */
.chip {
  /* Layout */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px 8px 10px;
  border-radius: 100px;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;

  /* Type — heading face, tighter tracking, deliberate weight */
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1;

  /* Default (neutral) appearance — used by "All" chip + unbanded chips */
  background: var(--surface-inset);
  color: var(--text);
  border: 1.5px solid var(--border);

  /* Motion */
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.chip:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}

.chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--ring);
}

.chip:active { transform: translateY(0); }

/* Count — bold lead anchor (Tversky). Mono face = numerical = trustworthy. */
.chip-count {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  background: var(--surface);
  border-radius: 100px;
  padding: 3px 8px;
  min-width: 24px;
  text-align: center;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

/* Label — secondary, but not whispered */
.chip-label {
  font-family: var(--font-heading);
  font-weight: 600;
  color: inherit;
}

/* Optional emoji (kept for backwards-compat, lower visual weight) */
.chip-emoji {
  font-size: 0.85rem;
  opacity: 0.7;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════
   Band tints — pre-attentive chunking
   Each band gets a soft tinted background + a stronger active state.
   ════════════════════════════════════════════════════════════ */

/* MONEY — warm amber/gold (business, finance, real estate) */
.chip[data-band="money"] {
  background: rgba(248, 189, 68, 0.08);
  border-color: rgba(248, 189, 68, 0.22);
  color: var(--text);
}
.chip[data-band="money"] .chip-count {
  background: rgba(248, 189, 68, 0.18);
  color: #8a5e00;
}
.chip[data-band="money"]:hover {
  background: rgba(248, 189, 68, 0.14);
  border-color: rgba(248, 189, 68, 0.4);
}

/* BUILD — slate/steel (construction, OBC, WSIB) */
.chip[data-band="build"] {
  background: rgba(82, 109, 130, 0.08);
  border-color: rgba(82, 109, 130, 0.22);
  color: var(--text);
}
.chip[data-band="build"] .chip-count {
  background: rgba(82, 109, 130, 0.18);
  color: #344b5e;
}
.chip[data-band="build"]:hover {
  background: rgba(82, 109, 130, 0.14);
  border-color: rgba(82, 109, 130, 0.4);
}

/* MAKE — lavender/violet (calculators, converters, devtools, creative, music) */
.chip[data-band="make"] {
  background: rgba(124, 87, 211, 0.08);
  border-color: rgba(124, 87, 211, 0.22);
  color: var(--text);
}
.chip[data-band="make"] .chip-count {
  background: rgba(124, 87, 211, 0.18);
  color: #5b3aa3;
}
.chip[data-band="make"]:hover {
  background: rgba(124, 87, 211, 0.14);
  border-color: rgba(124, 87, 211, 0.4);
}

/* LIFE — sage/green (productivity, health, education, printables, fun, kids, …) */
.chip[data-band="life"] {
  background: rgba(67, 137, 92, 0.08);
  border-color: rgba(67, 137, 92, 0.22);
  color: var(--text);
}
.chip[data-band="life"] .chip-count {
  background: rgba(67, 137, 92, 0.18);
  color: #2a6541;
}
.chip[data-band="life"]:hover {
  background: rgba(67, 137, 92, 0.14);
  border-color: rgba(67, 137, 92, 0.4);
}

/* ════════════════════════════════════════════════════════════
   Active state — saturated band colour, white count pill
   ════════════════════════════════════════════════════════════ */
.chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
  box-shadow: var(--glow);
}
.chip.active .chip-count {
  background: rgba(255, 255, 255, 0.85);
  color: var(--text-on-primary);
}
.chip.active:hover {
  background: var(--primary-hover);
  border-color: var(--primary-hover);
}

/* Banded active states — each band gets its own saturated active hue.
   This is the "you are here" signal: band tint becomes band-true colour. */
.chip[data-band="money"].active {
  background: #d4920a;
  border-color: #d4920a;
  color: #fff;
}
.chip[data-band="money"].active .chip-count {
  background: rgba(255, 255, 255, 0.95);
  color: #8a5e00;
}

.chip[data-band="build"].active {
  background: #475e74;
  border-color: #475e74;
  color: #fff;
}
.chip[data-band="build"].active .chip-count {
  background: rgba(255, 255, 255, 0.95);
  color: #344b5e;
}

.chip[data-band="make"].active {
  background: #6c47c4;
  border-color: #6c47c4;
  color: #fff;
}
.chip[data-band="make"].active .chip-count {
  background: rgba(255, 255, 255, 0.95);
  color: #5b3aa3;
}

.chip[data-band="life"].active {
  background: #3a7a52;
  border-color: #3a7a52;
  color: #fff;
}
.chip[data-band="life"].active .chip-count {
  background: rgba(255, 255, 255, 0.95);
  color: #2a6541;
}

/* ════════════════════════════════════════════════════════════
   Sub-chips — same vocabulary, lighter footprint
   ════════════════════════════════════════════════════════════ */
.sub-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px 14px 8px;
}

.sub-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-family: var(--font-heading);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}
.sub-chip:hover {
  border-color: var(--border-strong);
  color: var(--text);
}
.sub-chip.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--text-on-primary);
}

/* ════════════════════════════════════════════════════════════
   DARK THEME — band tints lift, counts use brighter text
   tokens.css [data-theme="light"] is the override; defaults are dark.
   ════════════════════════════════════════════════════════════ */
:root .chip[data-band="money"] .chip-count { color: #f8bd44; }
:root .chip[data-band="build"] .chip-count { color: #9dc3ff; }
:root .chip[data-band="make"]  .chip-count { color: #c0b9ff; }
:root .chip[data-band="life"]  .chip-count { color: #88d375; }

/* Light theme restores the darker count-text colours. */
[data-theme="light"] .chip[data-band="money"] .chip-count { color: #8a5e00; }
[data-theme="light"] .chip[data-band="build"] .chip-count { color: #344b5e; }
[data-theme="light"] .chip[data-band="make"]  .chip-count { color: #5b3aa3; }
[data-theme="light"] .chip[data-band="life"]  .chip-count { color: #2a6541; }

/* ════════════════════════════════════════════════════════════
   Mobile — keep bands, drop padding, allow horizontal scroll
   ════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .filter-chips,
  .chips-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .filter-chips::-webkit-scrollbar,
  .chips-scroll::-webkit-scrollbar { display: none; }

  .chip {
    flex-shrink: 0;
    min-height: 36px;
    padding: 6px 12px 6px 8px;
    font-size: 0.74rem;
  }
  .chip-count {
    font-size: 0.74rem;
    padding: 2px 7px;
    min-width: 22px;
  }
}