/* Spell library pages: build on the landing theme tokens defined in home.css, and the listing and
   statistics styles shared with the guild and house directories in directory.css */

/* The words column reads as spoken text, so it stays to the left; the magic level and mana columns
   hold numbers, which read better right-aligned. These outrank the directory's generic column
   alignment */
.spell-table thead th:nth-child(2),
.spell-table tbody td:nth-child(2) {
  text-align: left;
}

.spell-table thead th:nth-child(3),
.spell-table thead th:nth-child(4),
.spell-table tbody td:nth-child(3),
.spell-table tbody td:nth-child(4) {
  text-align: right;
}

/* The magic words in the listing, set apart from the spell names beside them */
.spell-words {
  color: var(--muted);
  font-weight: normal;
}

/* The identity row places the produced item beside the statistics, wrapping below on a narrow screen */
.spell-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
  padding: 16px;
}

.identity-column {
  flex: 1 1 240px;
  min-width: 0;
}

.column-title {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 11px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* The magic words spoken to cast the spell, shown as a pill under the name and its meta */
.spell-formula {
  display: inline-block;
  margin: 10px 0 0;
  padding: 5px 12px;
  color: var(--accent);
  font-family: "Courier New", monospace;
  font-size: 14px;
  letter-spacing: 0.03em;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background-color: #17140f;
  background-image: var(--surface-control);
}

/* The flavour text drawn from the spell's archived library page, leading the panel above the
   statistics. It reads as body copy, so it drops the bold weight the rest of the page carries */
.spell-description {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
  color: var(--muted);
  font-weight: normal;
  line-height: 1.6;
}

.spell-description p {
  margin: 0 0 12px;
}

.spell-description p:last-child {
  margin-bottom: 0;
}

/* The look square holding the spell's icon, shown only when the visitor's cached client files can
   render the sprite */
.outfit-frame {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  color: var(--muted);
  font-size: 11px;
  font-weight: normal;
  text-align: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background-color: #17140f;
  background-image: var(--surface-control);
  image-rendering: pixelated;
}

/* The composed 64x64 item sprite, drawn crisp inside its frame */
.outfit-sprite {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}