/* vrc.dj  Components: buttons, page header, cards, tags, empty state */
/* --- Buttons */
.btn-accent {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1.6rem;
  background: color-mix(in srgb, var(--accent) 80%, transparent); color: var(--white); border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: var(--radius-sm); font-size: .925rem; font-weight: 600;
  cursor: pointer; transition: all .18s var(--ease); text-decoration: none; white-space: nowrap;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.btn-accent:hover { background: var(--accent-bright); color: var(--white); transform: translateY(-1px); box-shadow: 0 4px 20px var(--accent-glow); }
[data-theme="light"] .btn-accent,
[data-theme="light"] .btn-accent:hover { color: #fff; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn-accent,
  :root:not([data-theme="dark"]) .btn-accent:hover { color: #fff; }
}
.btn-ghost {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .7rem 1.6rem;
  background: color-mix(in srgb, var(--bg-card) 60%, transparent); color: var(--text-secondary); border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: var(--radius-sm); font-size: .925rem; font-weight: 500;
  cursor: pointer; transition: all .18s var(--ease); text-decoration: none; white-space: nowrap;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
}
.btn-ghost:hover { background: var(--bg-card-hover); color: var(--text); border-color: var(--border-bright); }

/* --- Page header */
.pg-header { padding: 3rem 0 2rem; margin-bottom: 2.5rem; position: relative; overflow: hidden; }
.pg-header::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--border) 20%, var(--border) 80%, transparent 100%);
}
.pg-header h1 { font-size: clamp(1.6rem,4vw,2.4rem); font-weight: 800; color: var(--white); letter-spacing: -.025em; margin: 0 0 .2rem; }
.pg-header p  { color: var(--text-secondary); font-size: .9rem; margin: 0; }

/* --- Cards */
.card-grid            { display: grid; grid-template-columns: repeat(auto-fill,minmax(155px,1fr)); gap: 1.1rem; }
@media (min-width:576px)  { .card-grid { grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); } }
@media (min-width:768px)  { .card-grid { grid-template-columns: repeat(auto-fill,minmax(195px,1fr)); } }
@media (min-width:1200px) { .card-grid { grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); } }
.comm-grid            { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 1.25rem; }

/* Roster (artist / community listing) */
.roster {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.roster-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.15rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
  transition: background .18s var(--ease);
}
.roster-row:last-child .roster-item,
.roster-item:last-child { border-bottom: none; }
.roster-row {
  position: relative;
}
.roster-kbd {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: color-mix(in srgb, var(--bg-elevated) 70%, transparent);
  color: var(--text-muted);
  font-size: .6rem;
  font-family: inherit;
  line-height: 1;
  pointer-events: none;
}
.roster-edit-btn {
  position: absolute;
  right: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  opacity: .4;
  font-size: 1rem;
  padding: .35rem;
  transition: opacity .18s var(--ease), color .18s var(--ease);
  z-index: 1;
}
.roster-edit-btn:hover {
  opacity: 1;
  color: var(--accent-bright);
}
.roster-row .roster-item {
  padding-right: 2.75rem;
}
.roster-item:hover {
  background: rgba(124,58,237,.06);
}
.roster-logo {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  font-size: 1.4rem;
}
.roster-logo img {
  max-width: 44px; max-height: 44px;
  width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
}
.roster-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.roster-name {
  font-size: .925rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: .005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.roster-text {
  font-size: .775rem;
  color: var(--text-secondary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.roster-arrow {
  flex-shrink: 0;
  font-size: .7rem;
  color: var(--text-muted);
  transition: transform .18s var(--ease), color .18s var(--ease);
}
.roster-item:hover .roster-arrow {
  transform: translateX(3px);
  color: var(--accent-bright);
}
.roster-item:hover .roster-name {
  color: var(--white);
}
/* Light mode: give roster a white card background and fix hover name colour */
[data-theme="light"] .roster,
[data-theme="light"] .roster-item {
  background: var(--bg-surface);
}
[data-theme="light"] .roster-item:hover {
  background: color-mix(in srgb, var(--accent-base) 6%, var(--bg-surface));
}
[data-theme="light"] .roster-item:hover .roster-name {
  color: var(--accent);
}
[data-theme="light"] .roster-logo img {
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.15));
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .roster,
  :root:not([data-theme="dark"]) .roster-item {
    background: var(--bg-surface);
  }
  :root:not([data-theme="dark"]) .roster-item:hover {
    background: color-mix(in srgb, var(--accent-base) 6%, var(--bg-surface));
  }
  :root:not([data-theme="dark"]) .roster-item:hover .roster-name {
    color: var(--accent);
  }
  :root:not([data-theme="dark"]) .roster-logo img {
    filter: drop-shadow(0 1px 3px rgba(0,0,0,.15));
  }
}
/* Tag cloud & chips */
.tag-cloud-wrap {
  margin-bottom: 2rem;
}
/* Inner clip container - overflow is applied here, NOT on the outer wrap */
.tag-cloud-clip {
  position: relative;
}
.tag-cloud-wrap[data-collapsed="true"] .tag-cloud-clip {
  overflow: hidden;
  max-height: var(--collapse-h, 120px);
}
/* fade overlay - inside .tag-cloud-clip, anchored to its bottom edge */
.tag-cloud-fade {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0; right: 0;
  height: calc(var(--collapse-h, 120px) * 0.55);
  background: linear-gradient(to bottom, transparent 0%, var(--bg-base, #080b14) 100%);
  pointer-events: none;
}
.tag-cloud-wrap[data-collapsed="true"] .tag-cloud-fade {
  display: block;
}
/* expand/collapse toggle button - lives outside .tag-cloud-clip, always visible */
.tag-cloud-expand {
  display: none;
  width: 100%;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: .8rem;
  cursor: pointer;
  padding: .35rem 0 0;
  text-align: center;
  transition: color .15s;
}
.tag-cloud-expand:hover { color: var(--white); }
.tag-cloud-wrap[data-collapsed="true"]  .tag-cloud-expand,
.tag-cloud-wrap[data-collapsed="false"] .tag-cloud-expand {
  display: block;
}
.tag-cloud-no-collapse .tag-cloud-expand,
.tag-cloud-no-collapse .tag-cloud-fade {
  display: none !important;
}
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .55rem;
  margin-bottom: .35rem;
}
.tag-cloud-sub {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  padding-left: .5rem;
  margin-top: .15rem;
}
.tag-cloud-sub .tag-chip {
  font-size: .72rem;
  padding: .22rem .55rem;
  opacity: .85;
}
.tag-chip-root {
  font-size: .88rem;
  font-weight: 600;
}
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  background: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 28%, transparent);
  border-radius: 9px;
  color: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 90%, white);
  font-size: .8rem;
  font-weight: 500;
  text-decoration: none;
  transition: all .18s var(--ease);
  white-space: nowrap;
}
.tag-chip:hover {
  background: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 28%, transparent);
  border-color: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 55%, transparent);
  color: var(--white);
}
.tag-chip-sm {
  padding: .18rem .5rem;
  font-size: .72rem;
  border-radius: 5px;
}
.tag-chip-count {
  background: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 22%, transparent);
  color: color-mix(in srgb, var(--cat-color, rgb(124,58,237)) 90%, white);
  font-size: .68rem;
  font-weight: 600;
  padding: .1rem .4rem;
  border-radius: 4px;
  line-height: 1;
}
.tag-chip-pending {
  opacity: .72;
  font-style: italic;
}

/* -- Tag chip usage breakdown tooltip ------------------------------- */
.tag-chip-tt {
  position: fixed;
  z-index: var(--z-tooltip);
  display: flex;
  align-items: stretch;
  background: color-mix(in srgb, var(--bg-card, #0d1117) 86%, var(--bg-base, #080b14));
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid color-mix(in srgb, var(--tt-color, rgb(124,58,237)) 38%, transparent);
  border-radius: 10px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--tt-color, rgb(124,58,237)) 12%, transparent),
    0 8px 32px rgba(0,0,0,.55),
    0 0 28px color-mix(in srgb, var(--tt-color, rgb(124,58,237)) 16%, transparent);
  pointer-events: none;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .12s ease, transform .12s ease;
  white-space: nowrap;
  overflow: visible;
}
.tag-chip-tt.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.tag-chip-tt-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .22rem;
  padding: .6rem .9rem;
}
.tag-chip-tt-stat + .tag-chip-tt-stat {
  border-left: 1px solid color-mix(in srgb, var(--tt-color, rgb(124,58,237)) 18%, transparent);
}
.tag-chip-tt-top {
  display: flex;
  align-items: center;
  gap: .28rem;
  font-size: .9rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--tt-color, rgb(124,58,237)) 92%, white);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.tag-chip-tt-top i { font-size: .78rem; opacity: .82; }
.tag-chip-tt-lbl {
  font-size: .56rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: color-mix(in srgb, var(--tt-color, rgb(124,58,237)) 58%, rgba(148,163,184,.9));
  line-height: 1;
}
/* Arrow: points down from tooltip bottom toward chip below */
.tag-chip-tt::after {
  content: '';
  position: absolute;
  top: 100%;
  left: var(--arrow-x, 50%);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: color-mix(in srgb, var(--tt-color, rgb(124,58,237)) 70%, rgba(0,0,0,.5));
  border-bottom: none;
  pointer-events: none;
}
/* Flip: tooltip below chip - arrow points up */
.tag-chip-tt[data-flip="1"]::after {
  top: auto;
  bottom: 100%;
  border-top: none;
  border-bottom: 6px solid color-mix(in srgb, var(--tt-color, rgb(124,58,237)) 70%, rgba(0,0,0,.5));
}

/* -- Tag Input Widget ------------------------------------------- */
.tag-input-container {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .45rem .6rem;
  cursor: text;
  transition: border-color .18s var(--ease);
}
.tag-input-container:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
}
.tag-input-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.tag-input-pill {
  font-size: .78rem;
  padding: .22rem .5rem;
  cursor: default;
  user-select: none;
}
.tag-input-pill-x {
  background: none;
  border: none;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0 0 .2rem;
  cursor: pointer;
  opacity: .6;
  transition: opacity .15s;
}
.tag-input-pill-x:hover { opacity: 1; }
.tag-input-pill--hidden { opacity: .7; }
.tag-alias-icon {
  font-size: .75rem;
  opacity: .6;
  cursor: help;
  margin-left: .1rem;
}
.tag-alias-icon:hover { opacity: 1; }
.tag-hidden-icon {
  font-size: .72rem;
  color: var(--muted);
  vertical-align: middle;
  margin-left: .25rem;
  cursor: default;
}
.tag-hidden-icon--dd {
  margin-left: auto;
  flex-shrink: 0;
}
.tag-input-field-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 120px;
  margin-top: .3rem;
}
.tag-input-pills:empty + .tag-input-field-wrap { margin-top: 0; }
.tag-input-field {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: .85rem;
  padding: .25rem .2rem;
  transition: padding-right .15s;
}
.tag-input-field-wrap:has(.cp-count.cp-active) .tag-input-field {
  padding-right: 3.4rem;
}
.tag-input-field::placeholder {
  color: var(--muted);
  opacity: .7;
}
.tag-input-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dialog); /* needs to clear card stacking contexts */
  background: color-mix(in srgb, var(--bg-elevated) 75%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.tag-input-dd-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem .65rem;
  cursor: pointer;
  transition: background .12s;
}
.tag-input-dd-item:hover,
.tag-input-dd-item.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}
.tag-input-dd-label {
  font-size: .75rem;
  color: var(--muted);
}
.tag-input-dd-item--new {
  border-top: 1px solid color-mix(in srgb, var(--border) 40%, transparent);
  margin-top: 2px;
}
.tag-input-dd-new-label {
  font-size: .8rem;
  color: var(--muted);
}

.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  margin: 0 0 1.25rem;
}
.profile-tags .tag-chip {
  font-size: .72rem;
  padding: .25rem .65rem;
}
.tag-section-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin: 1.5rem 0 .75rem;
}
.tag-section-title i {
  color: var(--accent-bright);
}
.profile-bg-gradient {
  position: fixed; inset: 0; z-index: var(--z-bg-deep);
}
.tag-detail-header-bg {
  padding: 4rem 0 2rem;
  max-width: 820px;
}
.tag-detail-header-bg h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 900;
  color: #fff;
  margin: 0 0 .75rem;
  letter-spacing: -.03em;
  text-shadow: 0 2px 16px rgba(0,0,0,.7);
}
.tag-detail-header-bg h1 small {
  font-size: .5em;
  font-weight: 400;
  color: rgba(226,232,240,.4);
  letter-spacing: 0;
  vertical-align: middle;
}
.tag-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-bottom: 1rem;
}
.tag-detail-meta-sep { color: rgba(226,232,240,.3); font-size: .85rem; }
.tag-detail-desc {
  color: rgba(255,255,255,.88);
  font-size: .975rem;
  line-height: 1.7;
  max-width: 680px;
  margin: 0 0 1.2rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}
.tag-meta-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin: .35rem 0;
}
.tag-meta-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(226,232,240,.5);
  flex-shrink: 0;
  min-width: 5rem;
}

/* Light mode: glassy cards for tag page listings */
[data-theme="light"] .page-tag .roster,
[data-theme="light"] .page-tag .liveset-card {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(1.3);
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
[data-theme="light"] .page-tag .roster-item {
  background: transparent;
  border-bottom-color: rgba(0, 0, 0, 0.06);
}
[data-theme="light"] .page-tag .roster-item:hover {
  background: rgba(255, 255, 255, 0.4);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .page-tag .roster,
  :root:not([data-theme="dark"]) .page-tag .liveset-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
  }
  :root:not([data-theme="dark"]) .page-tag .roster-item {
    background: transparent;
    border-bottom-color: rgba(0, 0, 0, 0.06);
  }
  :root:not([data-theme="dark"]) .page-tag .roster-item:hover {
    background: rgba(255, 255, 255, 0.4);
  }
}

/* --- Empty state */
.empty-state   { padding: 5rem 2rem; text-align: center; }
.empty-state i { font-size: 2.5rem; color: var(--text-muted); margin-bottom: 1rem; display: block; }
.empty-state p { color: var(--text-secondary); font-size: .9rem; margin: 0; }