/**
 * @file hobbies.css
 * @description Styles for the Hobbies directory view (home, search, profile, join, me, matches). All classes scoped under the .hb- prefix.
 * @version-history
 *   v1.1.0 — 2026-06-02 — Phase 5: tokenize for dark mode (replaced bare light-only color literals with theme tokens)
 *   v1.2.0 — 2026-06-02 — Component unification (#4 buttons): remove .hb-btn* family;
 *     hobbies buttons use canonical theme.css .btn-primary / .btn-outline / .btn-danger / .btn-sm.
 *   v1.3.0 — 2026-06-02 — Component unification (#5 inputs): remove .hb-form-input/
 *     -textarea/-select; fields use canonical .input-field (kept hb-form-group/-label/-hint).
 *   v1.4.0 — 2026-06-02 — Component unification (#6 stat cards): remove .hb-stat*;
 *     stats use canonical .stat-grid / .stat-card / .stat-card-value.accent / .stat-card-label.
 *   v1.5.0 — 2026-06-02 — Component unification (#19): tokenize .hb-alert-success/-error
 *     (hardcoded rgba/#ef4444 → --success/-danger -bg/-fg/-border) — dark-mode fix.
 *   v1.6.0 — 2026-06-02 — Component unification (#15 headers): tokenize .hb-page-title
 *     gradient (hardcoded #E8564A → var(--accent-deep)); now token-equivalent to
 *     canonical theme.css .page-title/.page-subtitle (candidates for future deletion).
 *   v1.7.0 — 2026-06-02 — Component unification (#18 category cards): remove .hb-category-card/
 *     -icon/-name/-count; tiles use canonical theme.css .category-card (kept .hb-categories-grid
 *     wrapper — 200px columns differ from marketplace's 160px). Removed hardcoded hover #E8564A
 *     and rgba(0,0,0,0.06) shadow (now tokenized in the canonical class) — dark-mode fix.
 *   v1.8.0 — 2026-06-02 — Component unification (#17 pagination): tokenize
 *     .hb-pagination .active background (hardcoded rgba(232,86,74,0.06) →
 *     var(--accent-subtle)) — dark-mode fix. Numbered markup left in place (scoped
 *     .hb-, different UI from the canonical prev/page/next Pagination).
 *   v1.9.0 — 2026-06-02 — Component unification (#16 tags): tokenize .hb-tag
 *     (rgba(232,86,74,0.06)/0.2 + #E8564A → --accent-subtle/--accent-border/--accent)
 *     and .hb-tag-shared (rgba(34,197,94,.12)/.3 → --success-bg/-border/-fg) —
 *     dark-mode fix. Markup left as .hb-tag (rounded-20px pill, bespoke vs .tag-pill).
 */
/* hobbies view — scoped under .hb */
.hb-wrap { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 24px 16px 80px; }
  .hb-nav { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; margin-bottom: 24px; border-bottom: 1px solid var(--border); }
  .hb-nav-brand { color: var(--accent); font-weight: 700; font-size: 1rem; cursor: pointer; letter-spacing: .05em; }
  .hb-nav-brand:hover { color: #E8564A; }
  .hb-nav-links { display: flex; gap: 16px; align-items: center; }
  .hb-nav-links a { color: var(--text-dim); text-decoration: none; font-size: .85rem; cursor: pointer; transition: color .2s; }
  .hb-nav-links a:hover { color: var(--accent); }
  .hb-lang-toggle { display: flex; margin-left: 8px; }
  .hb-lang-btn { padding: 4px 10px; border: 1px solid var(--border); background: transparent; color: var(--text-muted); cursor: pointer; font-size: .75rem; font-weight: 700; transition: all .2s; }
  .hb-lang-btn:first-child { border-radius: 4px 0 0 4px; }
  .hb-lang-btn:last-child { border-radius: 0 4px 4px 0; }
  .hb-lang-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); }
  /* hb-page-title is token-equivalent to canonical theme.css .page-title (candidate for future deletion → use .page-title). */
  .hb-page-title { font-size: 1.8rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-deep)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 8px; }
  .hb-page-subtitle { color: var(--text-dim); font-size: 1rem; margin-bottom: 32px; }
  .hb-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-bottom: 16px; transition: background .2s, border-color .2s, box-shadow .2s; }
  .hb-card:hover { background: var(--bg-surface); border-color: #E8564A; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
  .hb-card-link { display: block; text-decoration: none; color: inherit; cursor: pointer; }
  .hb-card-title { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
  .hb-card-meta { color: var(--text-dim); font-size: .85rem; margin-bottom: 8px; }
  .hb-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
  .hb-tag { display: inline-block; padding: 4px 12px; background: var(--accent-subtle); border: 1px solid var(--accent-border); border-radius: 20px; font-size: .8rem; color: var(--accent); white-space: nowrap; }
  .hb-tag-shared { background: var(--success-bg); border-color: var(--success-border); color: var(--success-fg); }
  /* .hb-btn* removed — hobbies uses canonical theme.css .btn-primary / .btn-outline /
     .btn-danger (tokenized) / .btn-sm (anchor-safe). Unified 2026-06-02 (#4 buttons). */
  .hb-form-group { margin-bottom: 16px; }
  .hb-form-label { display: block; font-size: .85rem; color: var(--text-dim); margin-bottom: 6px; font-weight: 500; }
  /* .hb-form-input/-textarea/-select removed — hobbies form fields use canonical
     theme.css .input-field (focus ring added). Unified 2026-06-02 (#5). */
  .hb-form-hint { font-size: .78rem; color: var(--text-muted); margin-top: 4px; }
  /* .hb-stat* removed — hobbies stats use canonical .stat-grid / .stat-card /
     .stat-card-value.accent / .stat-card-label. Unified 2026-06-02 (#6). */
  /* Grid wrapper kept per-view: hobbies uses 200px min-width columns (marketplace 160px). */
  .hb-categories-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px; }
  /* .hb-category-card/-icon/-name/-count removed — hobbies interest tiles use canonical
     theme.css .category-card / -icon / -name / -count. The former rules were token-
     equivalent; the hover #E8564A and rgba(0,0,0,0.06) shadow are now tokenized
     (var(--accent)/var(--shadow-md)) — dark-mode fix. Unified 2026-06-02 (#18). */
  .hb-empty { text-align: center; padding: 48px 16px; }
  .hb-empty-icon { font-size: 3rem; margin-bottom: 16px; opacity: .4; }
  .hb-empty-text { color: var(--text-dim); font-size: 1rem; }
  .hb-alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 16px; font-size: .9rem; }
  .hb-alert-success { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-fg); }
  .hb-alert-error { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-fg); }
  .hb-facets { margin-bottom: 24px; }
  .hb-facet-group { margin-bottom: 12px; }
  .hb-facet-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
  .hb-facet-items { display: flex; flex-wrap: wrap; gap: 6px; }
  .hb-facet-item { padding: 4px 10px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 20px; font-size: .78rem; color: var(--text-dim); cursor: pointer; transition: all .2s; }
  .hb-facet-item:hover { border-color: var(--accent); color: var(--accent); }
  .hb-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 24px; }
  .hb-pagination a { padding: 8px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; font-size: .85rem; cursor: pointer; }
  .hb-pagination a:hover { border-color: var(--accent); color: var(--accent); }
  .hb-pagination .active { border-color: var(--accent); color: var(--accent); background: var(--accent-subtle); }
  .hb-profile-header { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
  .hb-profile-avatar { font-size: 2.5rem; }
  .hb-profile-name { font-size: 1.5rem; font-weight: 700; color: var(--text); }
  .hb-profile-ghii { font-size: .85rem; color: var(--text-muted); font-family: monospace; }
  .hb-profile-section { margin-bottom: 20px; }
  .hb-profile-section-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
  .hb-profile-bio { color: var(--text); line-height: 1.7; }
  .hb-profile-detail { color: var(--text-dim); font-size: .9rem; }
  @media (max-width: 600px) { .hb-page-title { font-size: 1.4rem; } .hb-wrap { padding: 16px 12px 60px; } .hb-categories-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }
