/* ============================================================
   spells.css — the Spell Sheet: slots, and the spells a class grants
   ============================================================ */

/* ─── THE VIEW SWITCH ────────────────────────────────────── */
/* A third view of the middle panel, alongside the inventory and the character
   sheet — one switch drives the swap exactly as `.sheet-view` does (see
   character.css), so the three never share the panel. */
#spell-sheet { display: none; }
#inventory-panel.spell-view #spell-sheet {
  display: block;
  flex: 1;
  overflow-y: auto;
  padding: 0 62px; /* room for the torn edge, matching .sheet-view */
  background: transparent; /* drawn on the same paper as the sheet */
}
#inventory-panel.spell-view #grid-scroll,
#inventory-panel.spell-view #stash-section,
#inventory-panel.spell-view #container-tabs,
#inventory-panel.spell-view #character-sheet { display: none; }

/* ─── SPELL SLOTS ─────────────────────────────────────────── */
.spell-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}
/* Warlock Pact Magic is a separate pool from the rest of #spell-slots (see
   pactMagicSlots() in spells.js) — its heading forces a line break in the
   wrapping flex row instead of sitting inline with a slot tile. */
.spell-slots .spellbook-group-heading { flex-basis: 100%; margin: 4px 0 -2px; }
.spell-slot-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 76px;
  padding: 8px 14px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.spell-slot-level {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.spell-slot-count {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
}

/* ─── THE SPELL LIST ──────────────────────────────────────── */
.spell-level-heading {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}
.spell-level-heading:first-child { margin-top: 0; }

.spell-card {
  position: relative;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.spell-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.spell-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--text);
}
.spell-school {
  font-size: 11px;
  font-style: italic;
  color: var(--text-dim);
}
/* The school's glyph, large in the card's top-right corner (.ico-school in
   icons.css). Pinned rather than laid out, so it doesn't push the meta line
   down; only the two lines beside it make room, the description runs under. */
.spell-card.has-school-icon {
  /* The icon's box, and how far past the card's corner the grime starts. */
  --sci-top: 10px;
  --sci-right: 12px;
  --sci-size: 40px;
  --grime-over: 4px;
  /* The icon and the grime sit at z-index -1: under the card's text, but over
     its background, which isolation keeps them from slipping beneath. */
  isolation: isolate;
}
.spell-card .ico-school {
  position: absolute;
  top: var(--sci-top);
  right: var(--sci-right);
  width: var(--sci-size);
  height: var(--sci-size);
  z-index: -1;
}

/* The grime patch behind the icon. Its top-right corner sits --grime-over past
   the card's own corner and is clipped back to the card (padding box, inner
   radius), so it runs right up to both edges; its bottom-left corner is placed
   so the icon's bottom-left corner is the midpoint of the patch's diagonal —
   hence each size is twice the icon's reach from that corner. Two gradients,
   intersected, fade it to nothing along the WHOLE left and bottom edges, not
   only at the bottom-left corner. Painted after the icon at the same z-index,
   so it lies over the glyph too. */
.spell-card.has-school-icon::after {
  content: '';
  position: absolute;
  z-index: -1;
  pointer-events: none;
  top: calc(-1 * var(--grime-over));
  right: calc(-1 * var(--grime-over));
  width: calc(2 * (var(--sci-right) + var(--sci-size) + var(--grime-over)));
  height: calc(2 * (var(--sci-top) + var(--sci-size) + var(--grime-over)));
  /* 112%: grime.png's transparent margin (about 4% a side) falls outside. */
  background: url('../../img/grime.png') center / 112% 112% no-repeat;
  opacity: 0.14;
  /* grime.png is neutral grey; warm it to a faint brown, like an old stain. */
  filter: sepia(0.7);
  -webkit-mask-image: linear-gradient(to left, #000, transparent), linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to left, #000, transparent), linear-gradient(to bottom, #000, transparent);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
  clip-path: inset(var(--grime-over) var(--grime-over) 0 0 round 0 5px 0 0);
}
.spell-card.has-school-icon .spell-card-head,
.spell-card.has-school-icon .spell-meta { padding-right: 50px; }
.spell-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: 4px;
  font-size: 11px;
  color: var(--text-dim);
}
/* Rendered from Markdown (spells.js's renderSpellDesc) — the block-level rules
   below mirror class-features.css's .feature-desc, the app's other Markdown
   card body, sized off this card's own 12px instead of that one's 11.5px. */
.spell-desc {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
  overflow-wrap: break-word;
}

.spell-desc > :first-child { margin-top: 0; }
.spell-desc > :last-child { margin-bottom: 0; }

.spell-desc p { margin: 0 0 0.6em; }

.spell-desc h1,
.spell-desc h2,
.spell-desc h3,
.spell-desc h4,
.spell-desc h5,
.spell-desc h6 {
  margin: 0.9em 0 0.3em;
  font-family: var(--font-display);
  font-size: 1em;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--accent);
}

.spell-desc ul,
.spell-desc ol { margin: 0 0 0.6em; padding-left: 1.35em; }
.spell-desc li { margin-bottom: 0.15em; }
.spell-desc li > ul,
.spell-desc li > ol { margin: 0.15em 0 0; }

.spell-desc blockquote {
  margin: 0 0 0.6em;
  padding: 0.1em 0 0.1em 0.8em;
  border-left: 2px solid var(--accent-soft);
  color: var(--text-dim);
  font-style: italic;
}
.spell-desc blockquote > :last-child { margin-bottom: 0; }

.spell-desc code {
  padding: 0.05em 0.3em;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.spell-desc pre {
  margin: 0 0 0.6em;
  padding: 7px 9px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow-x: auto;
}
.spell-desc pre code { padding: 0; background: none; border: none; }

.spell-desc a { color: var(--accent); text-decoration: underline; }
.spell-desc a:hover { text-decoration: none; }

.spell-desc strong, .spell-desc b { font-weight: 700; }
.spell-desc em, .spell-desc i { font-style: italic; }

.spell-desc table {
  width: 100%;
  margin: 0 0 0.6em;
  border-collapse: collapse;
  font-size: 0.95em;
}
.spell-desc th,
.spell-desc td {
  padding: 3px 6px;
  border: 1px solid var(--border);
  text-align: left;
}
.spell-desc th {
  background: var(--field);
  font-weight: 700;
  color: var(--text-dim);
}

.spell-note {
  font-size: 12px;
  color: var(--text-dim);
  font-style: italic;
}

/* ─── THE SPELLBOOK TAB (sidebar) ─────────────────────────────
   Takes Chat's place in the sidebar while viewing the Spell Sheet — a plain
   sidebar pane, like Chat, not drawn on the torn paper. See character-tabs.js
   / modals.js for why the two never show together. */
#tab-spellbook { padding: 0; gap: 0; overflow: hidden; }

#spellbook-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}

#spellbook-settings {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--field);
}
.spellbook-settings-label {
  display: block;
  margin-bottom: 4px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
#spellbook-sort { display: flex; gap: 14px; }
#spellbook-sort label,
.spellbook-filter-group label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text);
}
.spellbook-filter-group { display: flex; flex-wrap: wrap; gap: 4px 14px; }

.spellbook-group-heading {
  margin: 14px 0 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.spellbook-group-heading:first-child { margin-top: 0; }

#spellbook-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  scrollbar-gutter: stable;
}

.spell-picker-list { display: flex; flex-direction: column; gap: 6px; }

.spell-pick-card {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 6px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.spell-pick-card:hover:not(:disabled) { border-color: var(--accent); }
.spell-pick-card:disabled { cursor: default; opacity: 0.6; }

/* Filled = on the character's list — the same on/off language as `.prof-dot`
   (character.css), just two states instead of three. */
.spell-pick-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: transparent;
}
.spell-pick-card.known { border-color: var(--accent); }
.spell-pick-card.known .spell-pick-dot { background: var(--accent); border-color: var(--accent); }

.spell-pick-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--text);
}
.spell-pick-meta {
  flex: none;
  font-size: 10px;
  color: var(--text-dim);
}
.spell-pick-meta:empty { display: none; }
.spell-pick-card .ico-school { width: 16px; height: 16px; }

/* ─── HOVER CARD (AVAILABLE SPELLS) ───────────────────────── */
/* A row's full card, floated beside the sidebar (showSpellHoverCard() in
   spells.js). Never scrolls and never takes the pointer, like the item
   tooltip — a very long spell is cut at the window's height. */
#spell-hover-card {
  position: fixed;
  z-index: 9999;
  width: 360px;
  max-height: calc(100vh - 16px);
  overflow: hidden;
  pointer-events: none;
  border-radius: 6px;
  box-shadow: var(--shadow-deep);
}
#spell-hover-card .spell-card {
  margin: 0;
  border-color: var(--border2);
  box-shadow: inset 0 0 0 1px var(--emboss-hi);
}
.spell-hover-level {
  margin-top: 2px;
  font-size: 11px;
  font-style: italic;
  color: var(--text-dim);
}
.spell-card.has-school-icon .spell-hover-level { padding-right: 50px; }