/* ──────────────────────────────────────────────────────────────────────── */
/*  Arcane Compendium — ecosystem shell                                     */
/* ──────────────────────────────────────────────────────────────────────── */

.spells-page { max-width: 1300px; margin: 0 auto; }

/* Header */
.spells-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--border);
  margin-bottom: 1.5rem;
}
.spells-head-kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .25rem .7rem; border-radius: 999px;
  border: 1px solid rgba(214,178,87,.3); background: rgba(214,178,87,.08);
  color: var(--gold); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem;
}
.spells-head-title h1 {
  margin: 0 0 .4rem; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1;
  font-family: var(--display); letter-spacing: .02em;
  background: linear-gradient(135deg, #ffffff 10%, #f0d97a 55%, #d6b257 95%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.spells-head-sub { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.55; max-width: 680px; }

/* Container */
#spellList { color: var(--text); }

/* Form controls */
#spellList .form-label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
  margin-bottom: .25rem; display: block;
}
#spellList .form-control,
#spellList .form-select {
  padding: .4rem .6rem;
  background: rgba(8,8,14,.5);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: .82rem;
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
  transition: border-color .15s ease;
}
#spellList .form-control:focus,
#spellList .form-select:focus { border-color: var(--gold); outline: none; }

/* Buttons */
#spellList .btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .4rem .7rem; border-radius: 8px;
  font-size: .75rem; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .15s ease;
  border: 1px solid var(--border); background: transparent;
  color: var(--muted);
  white-space: nowrap;
}
#spellList .btn:hover:not(:disabled) { color: var(--text); border-color: var(--violet); background: rgba(139,112,255,.1); }
#spellList .btn:disabled { opacity: .4; cursor: not-allowed; }
#spellList .spell_viewToggle.active,
#spellList .btn.active {
  color: var(--gold-hi) !important;
  border-color: var(--gold) !important;
  background: rgba(214,178,87,.08) !important;
}
#spellList .btn-check { position: absolute; opacity: 0; pointer-events: none; }

/* Toolbar */
#spellList .spell_toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .6rem .9rem;
  padding: .75rem .9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(26,26,45,.65), rgba(19,19,33,.65));
  margin-bottom: 1rem;
}
#spellList .spell_area_view    { flex: 0 0 auto; }
#spellList .spell_area_search  { flex: 2 1 240px; min-width: 200px; }
#spellList .spell_area_levels  { flex: 1 1 180px; min-width: 160px; position: relative; }
#spellList .spell_area_class   { flex: 1 1 150px; min-width: 130px; }
#spellList .spell_area_school  { flex: 1 1 150px; min-width: 130px; }
#spellList .spell_area_source  { flex: 1 1 180px; min-width: 160px; }

/* Levels dropdown */
#spellList .spell_levels_dropdown { position: relative; }
#spellList .spell_levels_toggle {
  width: 100%;
  justify-content: space-between;
  padding: .4rem .6rem;
  font-size: .82rem;
  color: var(--text);
  background: rgba(8,8,14,.5);
  border: 1px solid var(--border);
}
#spellList .spell_levels_menu {
  position: absolute;
  top: calc(100% + 4px); left: 0;
  min-width: 280px;
  background: linear-gradient(180deg, var(--panel-top), var(--panel));
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: .7rem;
  z-index: 200;
  box-shadow: 0 14px 40px rgba(0,0,0,.55);
}
#spellList .spell_levels_menu[hidden] { display: none; }
#spellList .spell_levels_quick_row {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: .6rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border-soft);
}
#spellList .spell_levels_quick {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border);
  color: var(--muted);
  text-decoration: none;
}
#spellList .spell_levels_quick:hover { color: var(--text); border-color: var(--violet); }
#spellList .spell_levels_grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .25rem .6rem;
}
#spellList .spell_levels_item {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--muted);
  cursor: pointer;
  padding: .2rem 0;
}
#spellList .spell_levels_item input { accent-color: var(--violet); }

/* Summary + count */
#spellList .spell_summary { color: var(--muted); font-size: .82rem; }
#spellList .small { font-size: .82rem; color: var(--muted); }

/* Table-like header */
#spellList .spell_tableHeader {
  display: grid;
  grid-template-columns: 28px 2fr 110px 160px 1fr 140px;
  gap: .75rem;
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  padding: .5rem .5rem !important;
}
@media (max-width: 768px) {
  #spellList .d-md-grid { display: none !important; }
  #spellList .d-md-block { display: none !important; }
  #spellList .d-md-none { display: block; }
}
@media (min-width: 769px) {
  #spellList .d-md-grid { display: grid; }
  #spellList .d-md-block { display: block; }
  #spellList .d-md-none { display: none !important; }
}

/* Row list */
#spellList .spell_rowWrap {
  border-bottom: 1px solid var(--border-soft);
}
#spellList .spell_tableRow {
  display: grid;
  grid-template-columns: 28px 2fr 110px 160px 1fr 140px;
  gap: .75rem;
  align-items: center;
  padding: .7rem .5rem;
  cursor: pointer;
  transition: background .15s ease;
}
@media (max-width: 768px) {
  #spellList .spell_tableRow { grid-template-columns: 28px 1fr; }
}
#spellList .spell_tableRow:hover { background: rgba(139,112,255,.05); }
#spellList .spell_cellToggle {
  display: flex; align-items: center; justify-content: center;
  width: 28px;
}
#spellList .spell_chevron {
  font-size: .75rem;
  color: var(--muted);
  transition: transform .2s ease;
}
#spellList .spell_rowHeader[aria-expanded="true"] .spell_chevron { transform: rotate(90deg); color: var(--gold); }
#spellList .spell_rowTitle {
  font-family: var(--display);
  font-size: 1.02rem;
  color: var(--gold-hi);
  font-weight: 600;
  letter-spacing: .01em;
}
#spellList .spell_mobile_meta { color: var(--muted); margin-top: .25rem; }
#spellList .spell_cellSource { color: var(--muted); font-size: .82rem; }

#spellList .spell_rowDetail {
  display: none;
  padding: .75rem 1rem 1rem 2.75rem;
  background: rgba(139,112,255,.03);
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
}
#spellList .spell_rowDetail.show { display: block; }
#spellList .spell_detailBox b,
#spellList .spell_detailBox strong { color: var(--gold); }
#spellList .spell_tableRowDetail { margin: .25rem 0; color: var(--muted); }
#spellList .spell_tableRowDetail i { color: var(--violet); width: 1.25em; }
#spellList .spell_note {
  background: rgba(245, 201, 116, .08);
  border-left: 3px solid var(--gold);
  border-radius: 6px;
  padding: .5rem .75rem;
  color: var(--text);
}
#spellList .spell_muted { color: var(--faint); font-style: italic; }

/* Badges */
#spellList .spell_badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .12rem .5rem; border-radius: 999px;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .05em;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.03);
  color: var(--muted);
  margin-right: .2rem;
  white-space: nowrap;
}
#spellList .spell_badgeLevel  { color: var(--gold-hi); border-color: rgba(214,178,87,.35); background: rgba(214,178,87,.08); }
#spellList .spell_badgeSchool { color: #b29cff; border-color: rgba(139,112,255,.35); background: rgba(139,112,255,.08); }
#spellList .spell_badgeFlag   { color: #f6c453; border-color: rgba(246,196,83,.4); background: rgba(246,196,83,.1); text-transform: uppercase; font-size: .65rem; }
#spellList .spell_badgeClass  { color: var(--text); border-color: var(--border); background: rgba(255,255,255,.04); }

/* Class icons */
#spellList .spell_classIcon {
  width: 16px; height: 16px;
  display: inline-block;
  filter: invert(1) opacity(.85);
  object-fit: contain;
}
#spellList .spell_classIcon_compact {
  width: 18px; height: 18px;
  margin: 0 2px;
  vertical-align: middle;
}

/* Cards */
#spellList #spell_cards_results.row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: .8rem;
  margin: 0;
}
#spellList #spell_cards_results > [class*="col-"] { padding: 0; width: auto; }
#spellList .spell_card {
  background: linear-gradient(180deg, var(--panel-top), var(--panel));
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color .15s ease;
  height: 100%;
}
#spellList .spell_card:hover { border-color: rgba(214,178,87,.3); }
#spellList .spell_card_body { padding: 1rem 1.1rem 1.1rem; color: var(--muted); }
#spellList .spell_title {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--gold-hi);
  font-weight: 600;
  letter-spacing: .02em;
  margin-bottom: .5rem;
}
#spellList .spell_cardBadgesTop,
#spellList .spell_cardClassLine,
#spellList .spell_cardFlags {
  display: flex; flex-wrap: wrap; gap: .35rem;
  margin-bottom: .5rem;
}
#spellList .spell_meta {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: .75rem; row-gap: .25rem;
  margin: .5rem 0;
  font-size: .82rem;
}
#spellList .spell_meta dt { color: var(--faint); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .7rem; padding-top: .1rem; }
#spellList .spell_meta dd { margin: 0; color: var(--text); }
#spellList .spell_desc { color: var(--muted); font-size: .88rem; line-height: 1.55; }
#spellList .spell_desc b, #spellList .spell_desc strong { color: var(--gold); }

/* Pager */
#spellList .spell_pager { color: var(--muted); }

/* Empty / loading */
#spellList .spell_empty {
  padding: 1rem;
  color: var(--muted);
  font-style: italic;
  text-align: center;
  border: 1px dashed var(--border);
  border-radius: 10px;
}
#spellList .spell_loader {
  display: none;
  padding: .75rem;
  color: var(--muted);
  font-size: .85rem;
}
#spellList .spell_loader.show { display: block; }

/* Layout utilities used inline */
#spellList .d-flex { display: flex; }
#spellList .d-none { display: none !important; }
#spellList .align-items-center { align-items: center; }
#spellList .align-items-start { align-items: flex-start; }
#spellList .align-items-end { align-items: flex-end; }
#spellList .justify-content-between { justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
#spellList .flex-wrap { flex-wrap: wrap; }
#spellList .gap-1 { gap: .25rem; }
#spellList .gap-2 { gap: .5rem; }
#spellList .gap-3 { gap: 1rem; }
#spellList .mb-0 { margin-bottom: 0; }
#spellList .mb-1 { margin-bottom: .25rem; }
#spellList .mb-2 { margin-bottom: .5rem; }
#spellList .mb-3 { margin-bottom: 1rem; }
#spellList .mt-2 { margin-top: .5rem; }
#spellList .mt-3 { margin-top: 1rem; }
#spellList .mt-4 { margin-top: 1.5rem; }
#spellList .me-1 { margin-right: .25rem; }
#spellList .me-2 { margin-right: .5rem; }
#spellList .ms-1 { margin-left: .25rem; }
#spellList .ms-auto { margin-left: auto; }
#spellList .px-2 { padding-left: .5rem; padding-right: .5rem; }
#spellList .py-1 { padding-top: .25rem; padding-bottom: .25rem; }
#spellList .py-2 { padding-top: .5rem; padding-bottom: .5rem; }
#spellList .text-end { text-align: right; }

/* Print-only */
@media print {
  body { background: #fff !important; color: #1b1b20; }
  .topbar, .footer, .page-back, .spells-head, #spellList .spell_toolbar, #spellList .spell_pager, #spellList .d-flex.justify-content-between { display: none !important; }
}