/* spells.css: the spell sheet (B3b, public/js/views/spells.js). Every
 * class here is .sp-*; the pieces it shares with the sections (.sc-pip,
 * .sc-stat, .sc-btn …) are styled in sections.css. Colours are Kit's Clean
 * tokens only; every transition names a --duration and an --ease token.
 * Two panels from 900 px, one column below; under 560 px (and on a touch
 * screen) every control is a 44 px target (.sp-sheet.is-touch). */

.sp-sheet { max-width: 1240px; margin: 0 auto; }
.sp-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.sp-back { flex: none; }
.sp-titles { flex: 1 1 10em; min-width: 0; }
.sp-live { pointer-events: none; }
.sp-titles .sc-lbl { margin: 0; }
.sp-title { margin: 0; font-size: var(--text-lg); font-weight: 600; overflow-wrap: anywhere; }
.sp-save[data-state="saved"]:not([data-demo]) { background: var(--success-soft); color: var(--success-soft-text); border-color: transparent; }
.sp-save[data-state="quota"], .sp-save[data-state="error"] { background: var(--danger-soft); color: var(--danger-soft-text); border-color: transparent; white-space: normal; }

.sp-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
@media (min-width: 900px) { .sp-cols { grid-template-columns: 300px minmax(0, 1fr); } }
.sp-left { display: grid; gap: 12px; min-width: 0; }
.sp-card {
  min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); container-type: inline-size;
}
.sp-class .sc-vit { margin-bottom: 4px; }
.sp-class-name { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-weight: 600; }
.sp-note { margin: 8px 0 0; padding: 8px; border-radius: var(--radius-sm); background: var(--surface-alt); font-size: var(--text-xs); color: var(--text-muted); }
.sp-show { justify-self: start; white-space: normal; }

/* ---- trackers ---- */
.sp-points, .sp-slots, .sp-res { margin-bottom: 10px; }
.sp-big { margin: 0; font-size: var(--text-xl); font-weight: 700; font-variant-numeric: tabular-nums; }
.sp-small { font-size: var(--text-xs); font-weight: 400; }
.sp-casts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sp-cast { font-variant-numeric: tabular-nums; }
.sp-count { min-width: 3em; font-variant-numeric: tabular-nums; }
.sp-rests { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- the alert: a soft limit, a copy to confirm, a refused rest ---- */
.sp-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; padding: 10px 12px;
  border-radius: var(--radius); background: var(--warning-soft); color: var(--warning-soft-text);
}
.sp-alert p { flex: 1 1 16em; margin: 0; font-size: var(--text-sm); }
.sp-alert-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-alert .is-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
@media (hover: hover) { .sp-alert .is-primary:not(:disabled):hover { background: var(--accent-hover); } }

/* ---- the engine's spell warnings, each soft limit with "Allow anyway" (R-B3-12) ---- */
.sp-warnings { margin-bottom: 12px; background: var(--warning-soft); color: var(--warning-soft-text); border-color: transparent; }
.sp-warnings .sc-lbl { color: inherit; }
.sp-warn-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sp-warn { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--text-sm); }
.sp-warn-text { flex: 1 1 14em; min-width: 0; overflow-wrap: break-word; }

/* ---- Font of Magic under spell points (R-B3-18) ---- */
.sp-convert { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.sp-conv-row { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); }
.sp-conv-level { width: auto; }

/* ---- the right panel ---- */
.sp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.sp-tabs { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
.sp-right > .sp-tabs { margin-bottom: 8px; }
.sp-tab {
  min-height: 30px; padding: 4px 10px; border: 0; border-radius: 6px; background: none; color: var(--text-muted);
  font: inherit; font-size: var(--text-sm); cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.sp-tab[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); }
.sp-filter { flex: 1 1 10em; max-width: 16em; min-width: 0; margin-left: auto; }

.sp-list { margin: 0; padding: 0; list-style: none; }
.sp-row { border-top: 1px solid var(--border); }
.sp-headrow, .sp-line {
  display: grid; align-items: center; gap: 4px 8px;
  grid-template-columns: 28px minmax(0, 1fr) 2.2em minmax(0, 7em) minmax(0, 6em) minmax(0, 6em);
}
/* The header's grid sizes its em columns at the rows' font size, so its
 * columns sit over theirs (R-B3-17); its labels are smaller. */
.sp-headrow { padding: 0 0 4px; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); }
.sp-headrow > span { font-size: var(--text-xs); }
.sp-line { padding: 4px 0; font-size: var(--text-sm); }
.sp-ctl { display: flex; align-items: center; justify-content: center; min-width: 0; }
.sp-main { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 4px; min-width: 0; }
.sp-lvl { text-align: center; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sp-meta {
  min-width: 0; overflow: hidden; overflow-wrap: anywhere; font-size: var(--text-xs); color: var(--text-muted);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
}
.sp-name {
  padding: 0; border: 0; background: none; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer;
  transition: color var(--duration-fast) var(--ease-standard);
}
@media (hover: hover) { .sp-name:hover { color: var(--link); } }
.sp-uses { display: inline-flex; align-items: center; gap: 4px; margin-left: 4px; }
.sp-copy, .sp-swap { min-height: 26px; padding: 2px 6px; font-size: var(--text-xs); }
/* A list with Copy or Swap buttons: one wide control column for every row
 * and the header, so the names line up (R-B3-17). */
.sp-wide .sp-line, .sp-headrow.sp-wide { grid-template-columns: 9.5em minmax(0, 1fr) 2.2em minmax(0, 7em) minmax(0, 6em) minmax(0, 6em); }

.sp-dot {
  width: 16px; height: 16px; padding: 0; border: 1.5px solid var(--border-alt); border-radius: 50%; background: none; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard);
}
.sp-dot.is-on { background: var(--accent); border-color: var(--accent); }
.sp-dot.is-fixed { display: inline-block; cursor: default; }

.sp-detail { padding: 2px 0 10px 36px; }
.sp-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 6px; font-size: var(--text-sm); }
.sp-facts > div { display: flex; gap: 6px; min-width: 0; }
.sp-facts dt { flex: none; font-weight: 600; color: var(--text-muted); }
.sp-facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.sp-higher-table { border-collapse: collapse; margin: 4px 0 6px; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.sp-higher-table th, .sp-higher-table td { padding: 2px 12px 2px 0; text-align: left; border-bottom: 1px solid var(--border); }
.sp-higher-table thead th { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); }
.sp-higher-table tbody th { font-weight: 500; }
.sp-higher { margin: 8px 0 0; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); }
.sp-other { margin-top: 16px; }
.sp-other .sp-line { grid-template-columns: 0 minmax(0, 1fr) 2.2em minmax(0, 7em) minmax(0, 6em) minmax(0, 6em); }

.sp-tab:focus-visible, .sp-name:focus-visible, .sp-dot:focus-visible { outline: none; box-shadow: var(--ring); }

/* A narrow panel: school, time and range give way to the name. */
@container (max-width: 620px) {
  .sp-headrow, .sp-line { grid-template-columns: 28px minmax(0, 1fr) 2.2em minmax(0, 6em); }
  .sp-wide .sp-line, .sp-headrow.sp-wide { grid-template-columns: 9.5em minmax(0, 1fr) 2.2em minmax(0, 6em); }
  .sp-other .sp-line { grid-template-columns: 0 minmax(0, 1fr) 2.2em minmax(0, 6em); }
  .sp-school, .sp-meta:last-child { display: none; }
  .sp-detail { padding-left: 8px; }
}

/* ---- 44 px targets on a phone and any touch screen ---- */
.sp-sheet.is-touch .sc-btn, .sp-sheet.is-touch .sp-tab, .sp-sheet.is-touch .sc-fld,
.sp-sheet.is-touch button.sc-num, .sp-sheet.is-touch .sp-name, .sp-sheet.is-touch .sc-link { min-height: 44px; min-width: 44px; }
.sp-sheet.is-touch .sp-dot { width: 44px; height: 44px; border: 0; background: none; position: relative; }
.sp-sheet.is-touch .sp-dot::before {
  content: ""; position: absolute; inset: 13px; border: 1.5px solid var(--border-alt); border-radius: 50%;
}
.sp-sheet.is-touch .sp-dot.is-on::before { background: var(--accent); border-color: var(--accent); }
.sp-sheet.is-touch .sc-pip { width: 44px; height: 44px; }
.sp-sheet.is-touch .sc-pip::before { inset: 13px; }
.sp-sheet.is-touch .sc-pips { gap: 0; }
.sp-sheet.is-touch .sp-headrow, .sp-sheet.is-touch .sp-line { grid-template-columns: 44px minmax(0, 1fr) 2.2em; }
.sp-sheet.is-touch .sp-wide .sp-line, .sp-sheet.is-touch .sp-headrow.sp-wide { grid-template-columns: 9.5em minmax(0, 1fr) 2.2em; }
.sp-sheet.is-touch .sp-other .sp-line { grid-template-columns: 0 minmax(0, 1fr) 2.2em; }
.sp-sheet.is-touch .sp-meta { display: none; }
.sp-sheet.is-touch .sp-filter { max-width: none; }