/* DM spell library — dense on desktop, stacked and touch-friendly on mobile. */

.spell-wrap { max-width:1240px; margin:0 auto; padding:24px 18px 56px; }

.spell-hero {
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin:0 0 22px; padding-bottom:16px;
  border-bottom:1px solid var(--blood-deep);
}
.spell-eyebrow {
  margin:0 0 3px; color:var(--gold-dim); font-size:11px; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
}
.spell-hero h1 { margin:0; font-size:36px; line-height:1.08; }
.spell-hero p:not(.spell-eyebrow) { margin:5px 0 0; color:var(--muted); font-size:13px; }
.spell-new { white-space:nowrap; }

.spell-tabs {
  display:flex; gap:4px; width:max-content; padding:3px; margin:0 0 14px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel);
}
.spell-tabs a {
  min-width:125px; padding:7px 13px; border-radius:5px;
  color:var(--muted); font-size:12px; font-weight:600; text-align:center;
}
.spell-tabs a:hover { color:var(--gold); text-decoration:none; }
.spell-tabs a.is-active { color:var(--gold); background:var(--panel2); box-shadow:0 1px 3px rgba(0,0,0,.3); }

.spell-filters {
  display:grid; grid-template-columns:minmax(190px,2fr) repeat(2,minmax(120px,1fr)) auto;
  align-items:end; gap:10px; padding:13px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
  margin-bottom:14px;
}
.spell-filters label { display:flex; flex-direction:column; gap:4px; }
.spell-filters label > span {
  color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase;
}
.spell-filters .btn { height:38px; }

.spell-library {
  display:grid; grid-template-columns:minmax(290px,360px) minmax(0,1fr);
  min-height:680px; border:1px solid var(--line); border-radius:12px;
  overflow:hidden; background:var(--panel);
}

.spell-results { border-right:1px solid var(--line); background:var(--panel2); }
.spell-results__head {
  display:flex; align-items:baseline; gap:5px; height:48px; padding:13px 15px;
  border-bottom:1px solid var(--line); color:var(--muted); font-size:11px;
  letter-spacing:.06em; text-transform:uppercase;
}
.spell-results__head strong { color:var(--gold); font-size:15px; }
.spell-results__list { max-height:760px; overflow:auto; }
.spell-result {
  display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:10px;
  min-height:62px; padding:9px 12px; color:var(--ink);
  border-bottom:1px solid rgba(87,69,42,.55);
}
.spell-result:hover { background:rgba(212,166,63,.06); text-decoration:none; }
.spell-result.is-selected {
  background:linear-gradient(90deg,rgba(212,166,63,.16),rgba(212,166,63,.04));
  box-shadow:inset 3px 0 var(--gold);
}
.spell-level {
  display:grid; place-items:center; width:32px; height:32px;
  border:1px solid var(--gold-dim); border-radius:50%;
  color:var(--gold); font:700 13px var(--serif);
}
.spell-result__body { min-width:0; display:flex; flex-direction:column; }
.spell-result__body strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.spell-result__body small {
  overflow:hidden; color:var(--muted); font-size:10px; text-overflow:ellipsis;
  white-space:nowrap;
}
.spell-origin {
  display:inline-block; width:max-content; padding:2px 7px;
  border:1px solid var(--line2); border-radius:20px;
  color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; white-space:nowrap;
}
.spell-origin--personal { color:var(--gold); border-color:var(--gold-dim); }
.spell-origin--custom { color:var(--green); border-color:var(--green); }
.spell-empty { margin:18px; color:var(--faint); font-size:13px; font-style:italic; }

.spell-editor { min-width:0; padding:22px 26px 28px; background:var(--panel); }
.spell-editor__heading {
  display:flex; align-items:flex-start; justify-content:space-between; gap:20px;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--line);
}
.spell-editor__heading h2 { margin:6px 0 0; font-size:27px; }
.spell-editor__heading p {
  max-width:260px; margin:3px 0 0; color:var(--faint); font-size:11px; text-align:right;
}
.spell-form__identity { display:grid; grid-template-columns:minmax(0,1fr) 150px; gap:12px; }
.spell-form__details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 12px; }

.spell-classes {
  margin:2px 0 17px; padding:11px 12px 12px;
  border:1px solid var(--line); border-radius:8px;
}
.spell-classes legend {
  padding:0 6px; color:var(--muted); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.spell-classes__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.spell-classes label, .spell-flags label {
  display:flex; align-items:center; gap:7px; cursor:pointer; font-size:12px;
}
.spell-classes input, .spell-flags input { width:auto; accent-color:var(--gold); }

.spell-flags {
  display:flex; flex-wrap:wrap; gap:8px 18px; padding:11px 12px; margin-bottom:15px;
  border:1px solid var(--line); border-radius:8px; background:var(--panel2);
}
.spell-editor__danger {
  display:flex; justify-content:flex-end; margin-top:14px; padding-top:14px;
  border-top:1px solid var(--line);
}
.spell-editor__danger form { margin:0; }
.spell-editor__blank {
  display:grid; place-items:center; align-content:center; min-height:560px;
  color:var(--faint); text-align:center;
}
.spell-editor__blank > span { color:var(--gold-dim); font-size:38px; }
.spell-editor__blank h2 { margin:8px 0 0; }
.spell-editor__blank p { margin:4px 0; }

/* ---------- spell slot reference ---------- */
.slot-picker {
  display:grid; grid-template-columns:minmax(180px,1fr) minmax(180px,1fr) auto;
  align-items:end; gap:12px; padding:14px;
  border:1px solid var(--line); border-radius:10px; background:var(--panel);
}
.slot-picker label { display:flex; flex-direction:column; gap:4px; }
.slot-picker label span {
  color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase;
}
.slot-picker .btn { height:38px; }
.slot-levels {
  display:grid; grid-template-columns:repeat(12,1fr); gap:5px; margin:10px 0 18px;
}
.slot-levels__level {
  display:grid; place-items:center; min-height:34px;
  border:1px solid var(--line); border-radius:6px; color:var(--muted);
  font-size:12px; font-weight:700; background:var(--panel);
}
.slot-levels__level:hover { border-color:var(--gold-dim); color:var(--gold); text-decoration:none; }
.slot-levels__level.is-active { border-color:var(--gold); color:var(--bg); background:var(--gold); }

.slot-summary {
  display:grid; grid-template-columns:minmax(240px,.72fr) minmax(0,1.6fr);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel);
}
.slot-summary__intro {
  padding:24px; border-right:1px solid var(--line);
  background:linear-gradient(145deg,var(--panel2),var(--panel));
}
.slot-summary__intro h2 { margin:8px 0 5px; font-size:25px; }
.slot-summary__intro > p { margin:0 0 20px; color:var(--muted); font-size:13px; }
.slot-summary__intro dl { display:grid; gap:10px; margin:0; }
.slot-summary__intro dl div {
  display:flex; justify-content:space-between; gap:14px; padding-top:8px;
  border-top:1px solid var(--line);
}
.slot-summary__intro dt {
  color:var(--faint); font-size:10px; letter-spacing:.08em; text-transform:uppercase;
}
.slot-summary__intro dd { margin:0; color:var(--ink); font-size:12px; font-weight:600; text-align:right; }

.slot-pool { min-width:0; padding:22px 24px; }
.slot-pool__head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.slot-pool__head div { display:flex; flex-direction:column; }
.slot-pool__head span:not(.pact-badge) {
  color:var(--muted); font-size:10px; letter-spacing:.1em; text-transform:uppercase;
}
.slot-pool__head strong { font:600 20px var(--serif); color:var(--gold); }
.pact-badge {
  padding:4px 9px; border:1px solid #725aa0; border-radius:20px;
  color:#b99de8; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.slot-orbs { display:grid; grid-template-columns:repeat(6,1fr); gap:9px; margin:20px 0 16px; }
.slot-orb {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:100px; padding:9px 4px; border:1px solid var(--gold-dim); border-radius:10px;
  background:radial-gradient(circle at 50% 30%,rgba(212,166,63,.15),transparent 62%);
}
.slot-orb > span { color:var(--muted); font-size:10px; font-weight:700; letter-spacing:.1em; }
.slot-orb strong { color:var(--gold); font:700 30px var(--serif); line-height:1.1; }
.slot-orb small { color:var(--muted); font-size:9px; text-transform:uppercase; }
.slot-orb.is-empty { border-color:var(--line); background:none; opacity:.45; }
.slot-orb.is-empty strong { color:var(--faint); }
.slot-note {
  margin:0; padding:10px 12px; border-left:2px solid var(--gold-dim);
  color:var(--muted); background:rgba(212,166,63,.05); font-size:12px;
}

.arcanum-card {
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  margin-top:14px; padding:14px 16px; border:1px solid #725aa0; border-radius:10px;
  background:linear-gradient(90deg,rgba(83,55,126,.22),rgba(33,26,18,.7));
}
.arcanum-card__sigil { color:#b99de8; font-size:28px; }
.arcanum-card strong { color:#c7afea; }
.arcanum-card p { margin:2px 0 0; color:var(--muted); font-size:11px; }
.arcanum-card .btn { white-space:nowrap; }

.class-spells { margin-top:25px; }
.class-spells__levels { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:9px; }
.class-spell-level {
  display:grid; grid-template-columns:36px 1fr; align-items:center; gap:0 9px;
  padding:11px; border:1px solid var(--line); border-radius:9px; color:var(--ink); background:var(--panel);
}
.class-spell-level:hover { border-color:var(--gold-dim); text-decoration:none; }
.class-spell-level > span {
  grid-row:1 / 3; display:grid; place-items:center; width:34px; height:34px;
  border:1px solid var(--gold-dim); border-radius:50%; color:var(--gold); font:700 13px var(--serif);
}
.class-spell-level strong { font-size:12px; }
.class-spell-level small { color:var(--muted); font-size:10px; }
.slot-subclass-note { margin-top:22px; }

.slot-table {
  margin-top:24px; border:1px solid var(--line); border-radius:10px; background:var(--panel);
}
.slot-table summary {
  padding:12px 15px; color:var(--muted); cursor:pointer; font-size:12px; font-weight:600;
}
.slot-table summary span { color:var(--gold); }
.slot-table__scroll { overflow-x:auto; border-top:1px solid var(--line); }
.slot-table table { width:100%; min-width:650px; border-collapse:collapse; font-size:12px; text-align:center; }
.slot-table th, .slot-table td { padding:8px 10px; border-bottom:1px solid var(--line); }
.slot-table thead th {
  color:var(--muted); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
  background:var(--panel2);
}
.slot-table tbody th { color:var(--gold); }
.slot-table tr.is-current { background:rgba(212,166,63,.1); }

@media (max-width:850px) {
  .spell-filters { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .spell-search { grid-column:1 / -1; }
  .spell-filters .btn { width:100%; }
  .spell-library { grid-template-columns:300px minmax(0,1fr); }
  .spell-editor { padding:20px; }
  .spell-classes__grid { grid-template-columns:repeat(2,1fr); }
  .slot-summary { grid-template-columns:1fr; }
  .slot-summary__intro { border-right:0; border-bottom:1px solid var(--line); }
  .slot-levels { grid-template-columns:repeat(6,1fr); }
}

@media (max-width:680px) {
  .spell-wrap { padding:16px 12px 40px; }
  .spell-hero { align-items:flex-start; }
  .spell-hero h1 { font-size:29px; }
  .spell-new { padding:8px 10px; font-size:11px; }
  .spell-library { display:block; min-height:0; overflow:visible; }
  .spell-results { border-right:0; border-bottom:1px solid var(--line); }
  .spell-results__list { display:flex; max-height:none; overflow-x:auto; scroll-snap-type:x proximity; }
  .spell-result {
    flex:0 0 255px; scroll-snap-align:start;
    border-right:1px solid var(--line); border-bottom:0;
  }
  .spell-result.is-selected { box-shadow:inset 0 -3px var(--gold); }
  .spell-editor { padding:18px 14px 22px; }
  .spell-editor__heading { display:block; }
  .spell-editor__heading p { max-width:none; text-align:left; }
  .spell-form__identity, .spell-form__details { grid-template-columns:1fr; gap:0; }
  .slot-picker { grid-template-columns:1fr 1fr; }
  .slot-picker .btn { grid-column:1 / -1; width:100%; }
  .slot-orbs { grid-template-columns:repeat(3,1fr); }
  .slot-orb { min-height:86px; }
  .arcanum-card { grid-template-columns:auto 1fr; }
  .arcanum-card .btn { grid-column:1 / -1; width:100%; }
}

@media (max-width:420px) {
  .spell-hero { display:block; }
  .spell-new { width:100%; margin-top:12px; }
  .spell-filters { grid-template-columns:1fr; }
  .spell-search { grid-column:auto; }
  .spell-classes__grid { grid-template-columns:repeat(2,1fr); }
  .spell-tabs { width:100%; }
  .spell-tabs a { flex:1; min-width:0; }
  .slot-picker { grid-template-columns:1fr; }
  .slot-picker .btn { grid-column:auto; }
  .slot-levels { grid-template-columns:repeat(4,1fr); }
  .slot-pool { padding:18px 14px; }
}