/* ==========================================================================
   SilverMU inner pages: /skills (the skill list, the /skills/{slug} pages and the not-found page).
   Loaded by skills.php right after css/silver-inner.css, in the same layer and with the same mechanic:
   every rule sits in @layer sv-inner, every declaration carries !important (a declaration without it
   loses to the legacy sheets), and every selector is scoped under body.svp-inner--skills.
   The shared components (masthead, panels, heads, chips, stat tiles, FAQ, buttons) come from
   silver-inner.css; this sheet adds the skill browser (search, class chips, compact rows that turn into
   cards on phones, pager), the legend tiles and the skill page. It follows /items
   (css/silver-inner-items.css) rule for rule, under its own svp-sk-* names.

   The legacy sheets this has to beat: mu-online-attributes.css (#skill-table head colours, the 980px
   table, .skill-filter-grid), citadel.css (#skill-table cell colours with ID weight, the select triangle,
   the pager disc) and silver.css (th type, pager spans). Layered !important wins over all of them.

   NEVER: opacity/transform/transition on .white-box (fx.js reveals panels); the tbody's opacity (the
   list script dims it while loading).

   CONTENTS
    1  Masthead
    2  Skill browser: the search form (fields, menus, buttons) and the class chips
    3  The list head and the pager
    4  Skill rows (glyphs, numbers, requirements, classes)
    5  Below the list: about, legend tiles, type list, class codes
    6  Skill pages (/skills/{slug})
    7  Narrow desktop and tablet
    8  Phones: rows become cards
    9  Touch, motion
   ========================================================================== */
@layer sv-inner {

body.svp-inner--skills {
  --svp-sk-ctl-h: 46px !important;
  --svp-sk-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1.2 1.6 6 6.4 10.8 1.6' fill='none' stroke='%23a3adbf' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  --svp-sk-lens: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%237cc8ff' stroke-width='2'/%3E%3Cpath d='m15.5 15.5 5 5' stroke='%237cc8ff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

/* --------------------------------------------------------------------------
   1. Masthead
   h1.page-title > text + span.svp-sk-tagline (the heading's part after its dash, a smaller second
   line; it holds span.svp-sk-pagemark, " – Page N", which the list script rewrites).
   The list copy gets a little more width than the shared cap, so the title stays on one line.
   -------------------------------------------------------------------------- */
@media (min-width: 1100px) {
  body.svp-inner--skills .page-header-box.svp-sk-mast--list > .page-header-copy {
    max-width: min(70%, 880px) !important;
  }
}
body.svp-inner--skills .page-header-box .page-title .svp-sk-tagline {
  display: block !important;
  margin: 10px 0 0 !important;
  color: #cfd7e4 !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--svp-font-display) !important;
  font-size: 0.5em !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.05em !important;
  text-wrap: balance !important;
}
body.svp-inner--skills .page-header-box .page-title .svp-sk-pagemark {
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   2. Skill browser: one panel holds the search and the list
   div.white-box.skill-filters.svp-sk-browser
     > h2.svp-sr
     > form#skill-filter-form.svp-sk-form
         > div.svp-sk-controls > div.svp-sk-field (label + control) x3 + div.svp-sk-actions
         > div.svp-sk-classes > a.svp-chip.svp-sk-chip[data-class] (count in <b>; --none when 0)
     > div.skill-list-box (the list, sections 3 and 4)
   Wide screens: search, class, type and the buttons on one row.
   -------------------------------------------------------------------------- */
body.svp-inner--skills .white-box.svp-sk-browser {
  padding: 26px 32px 30px !important;
}
body.svp-inner--skills .svp-sk-form {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--skills .svp-sk-controls {
  display: grid !important;
  grid-template-columns: minmax(260px, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) auto !important;
  grid-template-areas: "q class type actions" !important;
  gap: 14px 12px !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--skills .svp-sk-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}
body.svp-inner--skills .svp-sk-field--q { grid-area: q !important; }
body.svp-inner--skills .svp-sk-field--class { grid-area: class !important; }
body.svp-inner--skills .svp-sk-field--type { grid-area: type !important; }
body.svp-inner--skills .svp-sk-actions { grid-area: actions !important; }

body.svp-inner--skills .svp-sk-field > label {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 16px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
/* Inputs and menus: one height, one frame, one chevron (:where keeps the variants below in charge) */
body.svp-inner--skills .svp-sk-form :where(input[type="search"], select) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--svp-sk-ctl-h) !important;
  min-height: var(--svp-sk-ctl-h) !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--svp-line-2) !important;
  border-radius: var(--svp-r-ctl) !important;
  background-color: rgba(6, 10, 18, 0.62) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45) !important;
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: normal !important;
  letter-spacing: 0 !important;
  outline: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}
body.svp-inner--skills .svp-sk-form :is(input, select)::placeholder {
  color: var(--svp-ink-faint) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
body.svp-inner--skills .svp-sk-form :is(input, select):hover {
  border-color: rgba(214, 222, 236, 0.42) !important;
}
body.svp-inner--skills .svp-sk-form :is(input, select):focus,
body.svp-inner--skills .svp-sk-form :is(input, select):focus-visible {
  border-color: rgba(124, 200, 255, 0.8) !important;
  background-color: rgba(8, 16, 28, 0.82) !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(124, 200, 255, 0.18) !important;
}
body.svp-inner--skills .svp-sk-form input[type="search"] {
  padding-left: 42px !important;
  background-image: var(--svp-sk-lens) !important;
  background-repeat: no-repeat !important;
  background-position: 14px 50% !important;
  background-size: 18px 18px !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
body.svp-inner--skills .svp-sk-form input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer !important;
}
body.svp-inner--skills .svp-sk-form select {
  padding-right: 36px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: var(--svp-sk-chev) !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
}
body.svp-inner--skills .svp-sk-form select option {
  background: #0d131f !important;
  color: var(--svp-ink-strong) !important;
}
/* Buttons: Search (steel), Reset (quiet text) */
body.svp-inner--skills .svp-sk-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--skills .svp-sk-btn {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  height: var(--svp-sk-ctl-h) !important;
  min-height: var(--svp-sk-ctl-h) !important;
  margin: 0 !important;
  padding: 0 20px !important;
  border: 1px solid transparent !important;
  border-radius: var(--svp-r-ctl) !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transform: none !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease !important;
}
body.svp-inner--skills .svp-sk-btn--primary {
  border-color: rgba(214, 222, 236, 0.36) !important;
  background: linear-gradient(180deg, #2b3548 0%, #1b2232 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 6px 16px -10px rgba(0, 0, 0, 0.9) !important;
  color: var(--svp-ink-strong) !important;
}
body.svp-inner--skills .svp-sk-btn--primary:hover,
body.svp-inner--skills .svp-sk-btn--primary:focus-visible {
  border-color: rgba(124, 200, 255, 0.75) !important;
  background: linear-gradient(180deg, #30405a 0%, #1d2638 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 0 3px rgba(124, 200, 255, 0.16) !important;
  color: #ffffff !important;
}
body.svp-inner--skills .svp-sk-btn--ghost {
  padding: 0 12px !important;
}
body.svp-inner--skills .svp-sk-btn--ghost:hover,
body.svp-inner--skills .svp-sk-btn--ghost:focus-visible {
  border-color: transparent !important;
  background: rgba(124, 200, 255, 0.07) !important;
  color: var(--svp-ice) !important;
}
body.svp-inner--skills .svp-sk-btn:focus-visible {
  outline: 2px solid rgba(124, 200, 255, 0.7) !important;
  outline-offset: 2px !important;
}
/* Class chips: plain ?class= links, the count in <b> */
body.svp-inner--skills .svp-sk-classes {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 6px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
}
body.svp-inner--skills a.svp-sk-chip {
  padding: 6px 11px !important;
}
body.svp-inner--skills a.svp-sk-chip b {
  margin-left: 2px !important;
  color: var(--svp-ink-muted) !important;
  font-weight: 500 !important;
  transition: color 0.18s ease !important;
}
body.svp-inner--skills a.svp-sk-chip:hover b,
body.svp-inner--skills a.svp-sk-chip:focus-visible b,
body.svp-inner--skills a.svp-sk-chip[aria-current="true"] b {
  color: #d4ecff !important;
}
body.svp-inner--skills a.svp-sk-chip--none {
  border-color: var(--svp-line) !important;
  background: transparent !important;
  color: var(--svp-ink-faint) !important;
}
body.svp-inner--skills a.svp-sk-chip--none b {
  color: var(--svp-ink-faint) !important;
}
body.svp-inner--skills a.svp-sk-chip--none:hover,
body.svp-inner--skills a.svp-sk-chip--none:focus-visible {
  border-color: rgba(124, 200, 255, 0.5) !important;
  color: var(--svp-ink) !important;
}

/* --------------------------------------------------------------------------
   3. The list head and the pager
   div.skill-list-box (the list script's hook: aria-busy, focus and scroll target after paging)
     > div.svp-head.svp-sk-head > (h2.svp-h2#svp-sk-caption + p.svp-head__note.svp-sk-results > #skill-results-summary)
                                + aside #skill-pager-top
     > table#skill-table  > #skill-pager-bottom
   nav.pagination-bar.svp-sk-pager > ul.pagination-list > li (a | span.active | li.svp-sk-pager-gap)
   Same-size squares, the current page in ice. Phones show their own, shorter set of links (li.svp-sk-pager-wide
   and the Prev/Next steps step aside there, li.svp-sk-pager-narrow is a "..." only phones show).
   -------------------------------------------------------------------------- */
body.svp-inner--skills .svp-sk-browser .skill-list-box {
  margin: 24px 0 0 !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid var(--svp-line) !important;
}
body.svp-inner--skills .skill-list-box:focus {
  outline: none !important;
}
body.svp-inner--skills .svp-sk-head {
  align-items: center !important;
  margin-bottom: 18px !important;
}
body.svp-inner--skills .svp-sk-head .svp-head__main {
  flex: 1 1 auto !important;
}
body.svp-inner--skills .svp-sk-head .svp-head__aside {
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
}
body.svp-inner--skills .svp-sk-head .svp-sk-results {
  max-width: none !important;
  margin: 6px 0 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0.04em !important;
}
body.svp-inner--skills .svp-sk-head .svp-sk-results strong {
  color: var(--svp-ink-strong) !important;
  font-weight: 500 !important;
}
body.svp-inner--skills :is(#skill-pager-top, #skill-pager-bottom) {
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--skills #skill-pager-bottom:not(:empty) {
  margin-top: 22px !important;
}
body.svp-inner--skills .svp-sk-pager {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.svp-inner--skills .svp-sk-pager .pagination-list {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
}
body.svp-inner--skills #skill-pager-bottom .svp-sk-pager .pagination-list {
  justify-content: center !important;
}
body.svp-inner--skills .svp-sk-pager .pagination-list > li {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
}
body.svp-inner--skills .svp-sk-pager .pagination-list > li::before,
body.svp-inner--skills .svp-sk-pager .pagination-list > li::after {
  content: none !important;
}
body.svp-inner--skills .svp-sk-pager .pagination-list :is(a, span.active) {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 40px !important;
  height: 40px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border: 1px solid var(--svp-line-2) !important;
  border-radius: var(--svp-r-ctl) !important;
  background: rgba(8, 12, 20, 0.55) !important;
  box-shadow: none !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 0.03em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  transform: none !important;
  filter: none !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease !important;
}
/* The skin draws every span in a pager as a page button: the arrow and word spans inside a link stay text */
body.svp-inner--skills .svp-sk-pager .pagination-list a span {
  display: inline !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: inherit !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  transform: none !important;
}
body.svp-inner--skills .svp-sk-pager .pagination-list :is(a, span.active)::before,
body.svp-inner--skills .svp-sk-pager .pagination-list :is(a, span.active)::after {
  content: none !important;
}
body.svp-inner--skills .svp-sk-pager .pagination-list a:hover,
body.svp-inner--skills .svp-sk-pager .pagination-list a:focus-visible {
  border-color: rgba(124, 200, 255, 0.7) !important;
  background: rgba(14, 34, 56, 0.72) !important;
  color: #ffffff !important;
}
body.svp-inner--skills .svp-sk-pager .pagination-list a:focus-visible {
  outline: 2px solid rgba(124, 200, 255, 0.7) !important;
  outline-offset: 2px !important;
}
body.svp-inner--skills .svp-sk-pager .pagination-list span.active {
  border-color: rgba(124, 200, 255, 0.85) !important;
  background: rgba(124, 200, 255, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 200, 255, 0.25) !important;
  color: #ffffff !important;
  cursor: default !important;
}
body.svp-inner--skills .svp-sk-pager .pagination-list .svp-sk-pager-step a {
  padding: 0 14px !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.svp-inner--skills .svp-sk-pager .pagination-list .svp-sk-pager-gap {
  align-self: center !important;
  min-width: 14px !important;
  padding: 0 0.25em !important;
  color: var(--svp-ink-faint) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 15px !important;
  line-height: 40px !important;
  text-align: center !important;
}
/* A "..." that only the phone set of links needs (section 8 shows it there) */
body.svp-inner--skills .svp-sk-pager .pagination-list .svp-sk-pager-narrow {
  display: none !important;
}

/* --------------------------------------------------------------------------
   4. Skill rows
   table#skill-table.svp-table.svp-table--sticky (the head sticks under the site header)
     tbody tr > td.svp-sk-cell > div.svp-sk > span.svp-sk-glyph[data-glyph] (no skill art exists: a glyph)
                                            + span.svp-sk-text > span.svp-sk-name > a.skill-link
                                                               + span.svp-sk-meta (span.svp-sk-kind, spans, span.svp-sk-id)
              > td.svp-sk-dmg / td.svp-sk-mana / td.svp-sk-ag  (.svp-num; .svp-sk-nil + span.svp-sk-dash when none)
              > td.svp-sk-reqs[.svp-sk-noreqs] (span.svp-sk-req x n | span.svp-sk-none)
              > td.svp-sk-classcol (span.svp-sk-all | span.svp-sk-codes | span.svp-sk-none, + span.svp-sk-stage)
   The whole Skill cell opens the skill (the link's ::after covers it). Rows are about 64px.
   -------------------------------------------------------------------------- */
body.svp-inner--skills #skill-table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  table-layout: auto !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
}
body.svp-inner--skills #skill-table thead th {
  position: sticky !important;
  top: var(--site-header-offset, 62px) !important;
  left: auto !important;
  z-index: 4 !important;
  padding: 12px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--svp-line-2) !important;
  background: linear-gradient(rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.04)), var(--svp-face-solid) !important;
  box-shadow: none !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.08em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
body.svp-inner--skills #skill-table thead th.svp-num {
  text-align: right !important;
}
body.svp-inner--skills #skill-table thead th abbr {
  border: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
  cursor: help !important;
}
/* The Skill column takes 42% (its meta line keeps to one line down to 1366px), so the numbers sit near the
   names and the spare width ends up after the classes */
body.svp-inner--skills #skill-table thead th:nth-child(1) { width: 42% !important; }
body.svp-inner--skills #skill-table thead th:nth-child(2) { width: 7em !important; }
body.svp-inner--skills #skill-table thead th:nth-child(3) { width: 6em !important; }
body.svp-inner--skills #skill-table thead th:nth-child(4) { width: 5em !important; }
body.svp-inner--skills #skill-table thead th:nth-child(5) { width: 12em !important; }
body.svp-inner--skills #skill-table thead th:nth-child(6) { width: auto !important; }

body.svp-inner--skills #skill-table tbody td {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  min-width: 0 !important;
  padding: 11px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--svp-line) !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  vertical-align: middle !important;
  white-space: normal !important;
}
/* (mu-online-attributes.css tints the whole row on hover; the cells below carry the one tint) */
body.svp-inner--skills #skill-table tbody tr {
  background: none !important;
}
body.svp-inner--skills #skill-table tbody tr:last-child > td {
  border-bottom: 0 !important;
}
body.svp-inner--skills #skill-table tbody tr:hover > td {
  background: rgba(124, 200, 255, 0.05) !important;
}
/* Skill cell */
body.svp-inner--skills #skill-table tbody td.svp-sk-cell {
  position: relative !important;
  width: auto !important;
  padding-left: 12px !important;
}
body.svp-inner--skills .svp-sk {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}
/* The glyph: no skill art exists on the server, so each row gets the mark of what the skill is,
   drawn as a mask so it takes a colour */
body.svp-inner--skills .svp-sk-glyph {
  --svp-sk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 19.5 12 12 21 4.5 12z'/%3E%3Cpath d='M12 7.5v9M9 12h6'/%3E%3C/svg%3E") !important;
  --svp-sk-glyph-ink: rgba(163, 173, 191, 0.62) !important;
  position: relative !important;
  flex: none !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 40px !important;
  height: 40px !important;
  overflow: hidden !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-ctl) !important;
  background:
    radial-gradient(circle at 50% 38%, rgba(124, 200, 255, 0.1), rgba(124, 200, 255, 0) 70%),
    rgba(255, 255, 255, 0.025) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
body.svp-inner--skills .svp-sk-glyph::before {
  content: "" !important;
  width: 54% !important;
  height: 54% !important;
  background: var(--svp-sk-glyph-ink) !important;
  -webkit-mask: var(--svp-sk-glyph) center / contain no-repeat !important;
  mask: var(--svp-sk-glyph) center / contain no-repeat !important;
}
body.svp-inner--skills .svp-sk-glyph[data-glyph="magic"] {
  --svp-sk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4.5c.6 3.6 2.4 5.4 6 6-3.6.6-5.4 2.4-6 6-.6-3.6-2.4-5.4-6-6 3.6-.6 5.4-2.4 6-6z'/%3E%3Cpath d='M18.5 15.5v4M16.5 17.5h4'/%3E%3C/svg%3E") !important;
  --svp-sk-glyph-ink: rgba(124, 200, 255, 0.85) !important;
}
body.svp-inner--skills .svp-sk-glyph[data-glyph="physical"] {
  --svp-sk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4v4.2L9.6 18.6l-4.2-4.2L15.8 4z'/%3E%3Cpath d='m4.2 12.8 7 7M3.5 20.5l3-3'/%3E%3C/svg%3E") !important;
  --svp-sk-glyph-ink: rgba(222, 229, 240, 0.78) !important;
}
body.svp-inner--skills .svp-sk-glyph[data-glyph="strike"] {
  --svp-sk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3 6 13h5.5l-1 8L18 11h-5.5z'/%3E%3C/svg%3E") !important;
  --svp-sk-glyph-ink: rgba(159, 214, 255, 0.85) !important;
}
body.svp-inner--skills .svp-sk-glyph[data-glyph="buff"] {
  --svp-sk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 19 6v5.4c0 4.4-2.9 8-7 9.4-4.1-1.4-7-5-7-9.4V6z'/%3E%3Cpath d='M12 8.5v6M9 11.5h6'/%3E%3C/svg%3E") !important;
  --svp-sk-glyph-ink: rgba(134, 239, 172, 0.78) !important;
}
body.svp-inner--skills .svp-sk-glyph[data-glyph="passive"] {
  --svp-sk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.5 11.5 5.5-5 5.5 5M6.5 17.5l5.5-5 5.5 5'/%3E%3C/svg%3E") !important;
}
body.svp-inner--skills .svp-sk-glyph[data-glyph="utility"] {
  --svp-sk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='7'/%3E%3Cpath d='M12 2.5v5M12 16.5v5M2.5 12h5M16.5 12h5'/%3E%3C/svg%3E") !important;
}
body.svp-inner--skills .svp-sk-glyph[data-glyph="tree"] {
  --svp-sk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='5' r='2.2'/%3E%3Ccircle cx='6' cy='18.5' r='2.2'/%3E%3Ccircle cx='18' cy='18.5' r='2.2'/%3E%3Cpath d='M12 7.2v4.3M12 11.5l-4.6 5.1M12 11.5l4.6 5.1'/%3E%3C/svg%3E") !important;
}
body.svp-inner--skills .svp-sk-glyph[data-glyph="monster"] {
  --svp-sk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5c2.2 4.2 2.2 10.3-.8 17M12.2 3c2.2 4.6 2.2 11.2-.8 18M17.4 3.5c2.2 4.2 2.2 10.3-.8 17'/%3E%3C/svg%3E") !important;
  --svp-sk-glyph-ink: rgba(255, 170, 110, 0.78) !important;
}
body.svp-inner--skills .svp-sk-glyph[data-glyph="event"] {
  --svp-sk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9 12 4l8.5 5z'/%3E%3Cpath d='M5.5 9.5v8M10 9.5v8M14 9.5v8M18.5 9.5v8M3.5 20h17'/%3E%3C/svg%3E") !important;
  --svp-sk-glyph-ink: rgba(214, 222, 236, 0.7) !important;
}

body.svp-inner--skills .svp-sk-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}
body.svp-inner--skills .svp-sk-name {
  display: block !important;
  min-width: 0 !important;
}
body.svp-inner--skills #skill-table .skill-link {
  position: static !important;
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--svp-ink-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--sv-font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  overflow-wrap: anywhere !important;
  transition: color 0.18s ease !important;
}
body.svp-inner--skills #skill-table .skill-link::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}
/* The underline shows where a click goes: anywhere on the Skill cell */
body.svp-inner--skills #skill-table tbody td.svp-sk-cell:hover .skill-link,
body.svp-inner--skills #skill-table .skill-link:focus-visible {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: var(--svp-ice) !important;
  text-underline-offset: 3px !important;
}
body.svp-inner--skills #skill-table .skill-link:focus-visible {
  outline: none !important;
}
body.svp-inner--skills #skill-table .skill-link:focus-visible::after {
  outline: 2px solid rgba(124, 200, 255, 0.75) !important;
  outline-offset: -3px !important;
  border-radius: 6px !important;
}
/* Meta line: the separators trail their item, so a wrapped line never starts with a dot */
body.svp-inner--skills .svp-sk-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 0 !important;
  margin: 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0.03em !important;
}
body.svp-inner--skills .svp-sk-meta > span {
  white-space: nowrap !important;
}
body.svp-inner--skills .svp-sk-meta > span:not(:last-child):not(.svp-sk-kind)::after {
  content: "\00B7" !important;
  margin: 0 7px !important;
  color: var(--svp-ink-faint) !important;
}
body.svp-inner--skills .svp-sk-kind {
  margin-right: 9px !important;
  padding: 0 7px !important;
  border: 1px solid rgba(124, 200, 255, 0.28) !important;
  border-radius: 5px !important;
  background: rgba(124, 200, 255, 0.06) !important;
  color: #cfe6fb !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
}
body.svp-inner--skills .svp-sk-id {
  font-variant-numeric: lining-nums tabular-nums !important;
}
/* Damage, mana, AG: right-aligned numbers, a quiet dash when there is none */
body.svp-inner--skills #skill-table tbody td.svp-num {
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  text-align: right !important;
  white-space: nowrap !important;
}
body.svp-inner--skills .svp-sk-dash {
  color: var(--svp-ink-faint) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}
/* Requirements: only the ones that apply */
body.svp-inner--skills .svp-sk-req {
  display: inline-block !important;
  margin: 1px 12px 1px 0 !important;
  color: var(--svp-ink-strong) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  white-space: nowrap !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
body.svp-inner--skills .svp-sk-req:last-child {
  margin-right: 0 !important;
}
body.svp-inner--skills .svp-sk-unit {
  margin-right: 2px !important;
  color: var(--svp-ink-faint) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.svp-inner--skills .svp-sk-none {
  color: var(--svp-ink-faint) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
}
/* Classes */
body.svp-inner--skills .svp-sk-codes {
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
}
body.svp-inner--skills .svp-sk-codes[title] {
  cursor: help !important;
}
body.svp-inner--skills .svp-sk-except {
  color: var(--svp-ink-muted) !important;
}
body.svp-inner--skills .svp-sk-more {
  color: var(--svp-ice) !important;
  font-weight: 500 !important;
}
body.svp-inner--skills .svp-sk-all {
  display: inline-block !important;
  padding: 2px 10px !important;
  border: 1px solid rgba(124, 200, 255, 0.34) !important;
  border-radius: 999px !important;
  background: rgba(124, 200, 255, 0.07) !important;
  color: #d4ecff !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 18px !important;
  letter-spacing: 0.05em !important;
  white-space: nowrap !important;
}
/* The evolution the classes need ("from 3rd class", "stage varies"), on its own line under them */
body.svp-inner--skills .svp-sk-stage {
  display: block !important;
  margin-top: 3px !important;
  color: var(--svp-warn-ink) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 17px !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}
/* Nothing found */
body.svp-inner--skills #skill-table tbody tr.svp-sk-empty > td {
  padding: 44px 16px 46px !important;
  text-align: center !important;
}
body.svp-inner--skills #skill-table tbody tr.svp-sk-empty:hover > td {
  background: none !important;
}
body.svp-inner--skills .svp-sk-empty__title {
  display: block !important;
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}
body.svp-inner--skills .svp-sk-empty__hint {
  display: block !important;
  margin-top: 6px !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}
body.svp-inner--skills .skill-list-box .no-results {
  margin: 0 !important;
  padding: 28px 20px !important;
  border: 1px dashed var(--svp-line-2) !important;
  border-radius: var(--svp-r-sm) !important;
  background: var(--svp-well) !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-align: center !important;
}

/* --------------------------------------------------------------------------
   5. Below the list (page 1): about, legend tiles. The FAQ is the shared dl.svp-faq.
   div.svp-duo.svp-duo--flow.svp-prose > p x3 + ul   (two newspaper columns, paragraphs kept whole)
   dl.svp-sk-legend > div.svp-sk-legend__tile[--wide] > dt (label) + dd (definition)
     ul.svp-sk-types > li > a (span.svp-sk-types__name + span.svp-sk-types__count) + span.svp-sk-types__note
     ul.svp-sk-codekey > li > b (code) + name
   -------------------------------------------------------------------------- */
body.svp-inner--skills .svp-sk-about .svp-duo {
  margin-top: 4px !important;
}
body.svp-inner--skills .svp-sk-legend {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--skills .svp-sk-legend__tile {
  box-sizing: border-box !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 18px 20px 20px !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-sm) !important;
  background: var(--svp-well) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
}
body.svp-inner--skills .svp-sk-legend__tile--wide {
  grid-column: 1 / -1 !important;
}
body.svp-inner--skills .svp-sk-legend dt {
  display: block !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
body.svp-inner--skills .svp-sk-legend dt::before,
body.svp-inner--skills .svp-sk-legend dt::after {
  content: none !important;
}
body.svp-inner--skills .svp-sk-legend dd {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}
body.svp-inner--skills .svp-sk-legend dd strong {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
body.svp-inner--skills .svp-sk-legend dd code {
  padding: 0.1em 0.42em !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e6ecf5 !important;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace !important;
  font-size: 0.8em !important;
  white-space: nowrap !important;
}
/* The 0-5 class flag list inside its tile */
body.svp-inner--skills .svp-sk-legend dd > ul:not([class]) {
  max-width: none !important;
  margin: 8px 0 10px !important;
  padding: 0 !important;
  list-style: none !important;
}
body.svp-inner--skills .svp-sk-legend dd > ul:not([class]) > li {
  position: relative !important;
  max-width: none !important;
  margin: 0 0 3px !important;
  padding: 0 0 0 1.1em !important;
  color: var(--svp-ink) !important;
  font: inherit !important;
}
body.svp-inner--skills .svp-sk-legend dd > ul:not([class]) > li::before {
  content: "" !important;
  position: absolute !important;
  left: 0.1em !important;
  top: calc(0.775em - 3px) !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--svp-ice) !important;
  clip-path: var(--svp-diamond) !important;
  opacity: 0.9 !important;
}
body.svp-inner--skills .svp-sk-legend__lead {
  max-width: none !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  color: var(--svp-ink) !important;
  font: inherit !important;
}
/* Skill types: one link per type with its live count, three across */
body.svp-inner--skills .svp-sk-types {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px 14px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.svp-inner--skills .svp-sk-types > li {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 14px 13px !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-ctl) !important;
  background: rgba(255, 255, 255, 0.02) !important;
}
body.svp-inner--skills .svp-sk-types > li::before,
body.svp-inner--skills .svp-sk-types > li::after {
  content: none !important;
}
body.svp-inner--skills .svp-sk-types a {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 12px !important;
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  transition: color 0.18s ease !important;
}
body.svp-inner--skills .svp-sk-types a:hover,
body.svp-inner--skills .svp-sk-types a:focus-visible {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: var(--svp-ice) !important;
  text-underline-offset: 3px !important;
}
body.svp-inner--skills .svp-sk-types__count {
  flex: none !important;
  color: var(--svp-ice) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
body.svp-inner--skills .svp-sk-types__note {
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
}
/* The class code key: a full-width tile, the 16 codes in a grid (readable on touch screens, where
   the codes' title text never shows) */
body.svp-inner--skills .svp-sk-codekey {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 6px 24px !important;
  max-width: none !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.svp-inner--skills .svp-sk-codekey > li {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  line-height: 1.45 !important;
  white-space: nowrap !important;
}
body.svp-inner--skills .svp-sk-codekey > li::before,
body.svp-inner--skills .svp-sk-codekey > li::after {
  content: none !important;
}
body.svp-inner--skills .svp-sk-codekey b {
  display: inline-block !important;
  min-width: 2.7em !important;
  color: var(--svp-ice) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
}

/* --------------------------------------------------------------------------
   6. Skill pages (/skills/{slug})
   div.white-box.page-header-box.svp-sk-mast.svp-sk-mast--skill > span.svp-sk-art.svp-sk-glyph[data-glyph]
                                                               + div.page-header-copy (kicker, h1 + tagline, lead, chips, back)
   div.white-box.svp-sk-facts > p.svp-sk-group + ul.svp-stats.svp-sk-stats > li.svp-stat (.svp-sk-zero dims a 0), twice
   div.white-box.svp-sk-users > ul.svp-sk-classlist > li > a.svp-sk-classlist__link (code, name, stage) + p.svp-sk-note
   div.white-box.svp-sk-skillabout > .svp-prose + p.svp-sk-backrow
   -------------------------------------------------------------------------- */
body.svp-inner--skills .svp-sk-mast--skill {
  gap: 30px !important;
}
body.svp-inner--skills .svp-sk-mast--skill .svp-sk-art {
  position: relative !important;
  z-index: 1 !important;
  width: 120px !important;
  height: 120px !important;
  margin: 0 !important;
  border: 1px solid rgba(214, 222, 236, 0.3) !important;
  border-radius: 12px !important;
  background:
    radial-gradient(circle at 50% 42%, rgba(124, 200, 255, 0.18), rgba(124, 200, 255, 0) 68%),
    linear-gradient(180deg, rgba(20, 28, 44, 0.92), rgba(7, 10, 18, 0.95)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 32px -16px rgba(0, 0, 0, 0.95) !important;
}
body.svp-inner--skills .svp-sk-mast--skill .svp-sk-art::before {
  width: 44% !important;
  height: 44% !important;
}
body.svp-inner--skills .svp-sk-mast--skill .page-header-copy {
  max-width: min(66%, 820px) !important;
}
/* "Back to the list": the quiet action with its chevron pointing back */
body.svp-inner--skills .svp-sk-back::after {
  content: none !important;
}
body.svp-inner--skills .svp-sk-back::before {
  content: "" !important;
  flex: none !important;
  width: 7px !important;
  height: 11px !important;
  background: currentColor !important;
  -webkit-mask: var(--svp-chev) center / contain no-repeat !important;
  mask: var(--svp-chev) center / contain no-repeat !important;
  transform: rotate(180deg) !important;
  transition: transform 0.18s ease !important;
}
body.svp-inner--skills .svp-sk-back:hover::before,
body.svp-inner--skills .svp-sk-back:focus-visible::before {
  transform: rotate(180deg) translateX(3px) !important;
}
/* Fact tiles in two groups on one six-column grid (three on tablets, two on phones), so the tiles of both
   groups line up and the six requirements always fill whole rows; a 0 is dimmed.
   (citadel caps every list in a panel at 78ch: the grid takes the panel's full width) */
body.svp-inner--skills .svp-sk-facts .svp-sk-group {
  max-width: none !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
body.svp-inner--skills .svp-sk-facts .svp-sk-stats + .svp-sk-group {
  margin-top: 22px !important;
}
body.svp-inner--skills .svp-sk-facts .svp-head__note strong {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
body.svp-inner--skills .svp-sk-stats {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  max-width: none !important;
}
body.svp-inner--skills .svp-sk-stats > .svp-stat.svp-sk-zero .svp-stat__v {
  color: var(--svp-ink-faint) !important;
}
body.svp-inner--skills .svp-sk-stats .svp-stat__s {
  font-size: 15px !important;
}
/* Classes that use the skill: one card each, linked to that class's skill list */
body.svp-inner--skills .svp-sk-classlist {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
  gap: 10px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.svp-inner--skills .svp-sk-classlist > li {
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--skills .svp-sk-classlist > li::before,
body.svp-inner--skills .svp-sk-classlist > li::after {
  content: none !important;
}
body.svp-inner--skills .svp-sk-classlist__link {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  box-sizing: border-box !important;
  height: 100% !important;
  padding: 12px 16px !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-sm) !important;
  background: var(--svp-well) !important;
  color: var(--svp-ink) !important;
  text-decoration: none !important;
  transition: border-color 0.18s ease, background-color 0.18s ease !important;
}
body.svp-inner--skills .svp-sk-classlist__link:hover,
body.svp-inner--skills .svp-sk-classlist__link:focus-visible {
  border-color: rgba(124, 200, 255, 0.55) !important;
  background: rgba(124, 200, 255, 0.045) !important;
}
body.svp-inner--skills .svp-sk-classlist__code {
  flex: none !important;
  min-width: 2.6em !important;
  color: var(--svp-ice) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
}
body.svp-inner--skills .svp-sk-classlist__text {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}
body.svp-inner--skills .svp-sk-classlist__name {
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
body.svp-inner--skills .svp-sk-classlist__stage {
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
  letter-spacing: 0.03em !important;
}
body.svp-inner--skills .white-box > p.svp-sk-note {
  max-width: var(--svp-measure) !important;
  margin: 18px 0 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  line-height: 1.55 !important;
}
body.svp-inner--skills .white-box > p.svp-sk-note code {
  padding: 0.1em 0.42em !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e6ecf5 !important;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace !important;
  font-size: 0.8em !important;
  white-space: nowrap !important;
}
body.svp-inner--skills .white-box > p.svp-sk-backrow {
  margin: 20px 0 0 !important;
}

/* --------------------------------------------------------------------------
   7. Narrow desktop and tablet
   1100-1599: tighter chips and menus. Screens up to 920px tall (1440x900 and every laptop) leave out the
   list masthead's lead (the tagline under the title says the same), so the first rows reach the first
   screen; up to 820px tall the masthead and the gaps above the list get tighter too. Tablets: the
   controls keep one row from 900px (two below), narrower number columns, two legend columns.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-height: 920px) {
  body.svp-inner--skills .svp-sk-mast--list .page-subtitle {
    display: none !important;
  }
}
@media (max-width: 1599px) {
  body.svp-inner--skills .svp-sk-classes {
    gap: 8px 5px !important;
  }
  body.svp-inner--skills a.svp-sk-chip {
    padding: 6px 9px !important;
    letter-spacing: 0.03em !important;
  }
  body.svp-inner--skills .svp-sk-form :where(input[type="search"], select) {
    font-size: 16px !important;
  }
  body.svp-inner--skills .svp-sk-form select {
    padding-left: 12px !important;
    padding-right: 30px !important;
    background-position: right 12px center !important;
  }
}
@media (min-width: 761px) and (max-height: 820px) {
  body.svp-inner--skills .page-header-box.svp-sk-mast--list {
    min-height: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  body.svp-inner--skills .svp-sk-mast--list .svp-mast-row {
    margin-top: 14px !important;
  }
  body.svp-inner--skills .white-box.svp-sk-browser {
    padding-top: 20px !important;
  }
  body.svp-inner--skills .svp-sk-classes {
    margin-top: 12px !important;
    row-gap: 6px !important;
  }
  body.svp-inner--skills .svp-sk-browser .skill-list-box {
    margin-top: 14px !important;
    padding-top: 14px !important;
  }
  body.svp-inner--skills .svp-sk-head {
    margin-bottom: 12px !important;
  }
}
@media (min-width: 761px) and (max-width: 1099px) {
  body.svp-inner--skills .white-box.svp-sk-browser {
    padding: 22px 24px 26px !important;
  }
  body.svp-inner--skills .svp-sk-controls {
    grid-template-columns: minmax(200px, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto !important;
    column-gap: 10px !important;
  }
  body.svp-inner--skills .svp-sk-btn {
    padding: 0 14px !important;
  }
  body.svp-inner--skills .svp-sk-btn--ghost {
    padding: 0 10px !important;
  }
  body.svp-inner--skills .svp-sk-browser .skill-list-box {
    margin-top: 20px !important;
    padding-top: 20px !important;
  }
  body.svp-inner--skills #skill-table thead th:nth-child(1) { width: auto !important; }
  body.svp-inner--skills #skill-table thead th:nth-child(2) { width: 5.5em !important; }
  body.svp-inner--skills #skill-table thead th:nth-child(3) { width: 4.5em !important; }
  body.svp-inner--skills #skill-table thead th:nth-child(4) { width: 4em !important; }
  body.svp-inner--skills #skill-table thead th:nth-child(5) { width: 9em !important; }
  body.svp-inner--skills #skill-table thead th:nth-child(6) { width: 13em !important; }
  body.svp-inner--skills #skill-table thead th {
    padding: 11px 10px !important;
    white-space: normal !important;
  }
  body.svp-inner--skills #skill-table tbody td {
    padding: 10px !important;
  }
  body.svp-inner--skills #skill-table tbody td.svp-num {
    font-size: 16px !important;
  }
  body.svp-inner--skills .svp-sk-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.svp-inner--skills .svp-sk-types {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.svp-inner--skills .svp-sk-codekey {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.svp-inner--skills .svp-sk-mast--skill .svp-sk-art {
    width: 100px !important;
    height: 100px !important;
  }
  body.svp-inner--skills .svp-sk-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  /* The 17 chips would take three lines here: one line that scrolls sideways, edge to edge of the
     panel (as on phones), so the first rows reach the first screen; the Class menu stays beside it */
  body.svp-inner--skills .svp-sk-classes {
    flex-wrap: nowrap !important;
    margin: 14px -24px 0 !important;
    padding: 2px 24px 4px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 40px), transparent 100%) !important;
    mask: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 40px), transparent 100%) !important;
  }
  body.svp-inner--skills .svp-sk-classes::-webkit-scrollbar {
    display: none !important;
  }
  body.svp-inner--skills a.svp-sk-chip {
    flex: none !important;
  }
}
/* Portrait tablets: the search gets its own row, the menus share the second */
@media (min-width: 761px) and (max-width: 899px) {
  body.svp-inner--skills .svp-sk-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-areas:
      "q q actions"
      "class type type" !important;
  }
}

/* --------------------------------------------------------------------------
   8. Phones (<= 760)
   The menus show their own value ("All types"), so their labels stay for screen readers only; the
   class chips do the Class menu's job. Each row becomes a card: the skill on top, then damage, mana and
   AG side by side, requirements and classes; a value with nothing to say is left out.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.svp-inner--skills .page-header-box .svp-sk-chip-classes {
    display: none !important;
  }
  /* The list's lead repeats the title: phones leave it out, so the search stays in the first screen */
  body.svp-inner--skills .svp-sk-mast--list .page-subtitle {
    display: none !important;
  }
  body.svp-inner--skills .page-header-box .page-title .svp-sk-tagline {
    margin-top: 6px !important;
    font-size: 0.6em !important;
  }
  body.svp-inner--skills .white-box.svp-sk-browser {
    padding: 16px 16px 20px !important;
  }
  body.svp-inner--skills .svp-sk-controls {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "q q"
      "type actions" !important;
    gap: 10px !important;
  }
  /* The Class menu steps aside (still in the form, still submitted): the chips below do its job */
  body.svp-inner--skills .svp-sk-field--class {
    display: none !important;
  }
  body.svp-inner--skills .svp-sk-field > label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  body.svp-inner--skills .svp-sk-field {
    gap: 0 !important;
  }
  body.svp-inner--skills .svp-sk-form :where(input[type="search"], select) {
    font-size: 16px !important;
  }
  body.svp-inner--skills .svp-sk-form select {
    padding-left: 11px !important;
    padding-right: 27px !important;
    background-position: right 11px center !important;
  }
  body.svp-inner--skills .svp-sk-actions {
    gap: 2px !important;
  }
  body.svp-inner--skills .svp-sk-btn {
    padding: 0 12px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
  }
  /* The chips scroll sideways in one line, edge to edge of the panel */
  body.svp-inner--skills .svp-sk-classes {
    flex-wrap: nowrap !important;
    margin: 14px -16px 0 !important;
    padding: 2px 16px 4px !important;
    overflow-x: auto !important;
    overscroll-behavior-x: contain !important;
    scrollbar-width: none !important;
    -webkit-mask: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 32px), transparent 100%) !important;
    mask: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 32px), transparent 100%) !important;
  }
  body.svp-inner--skills .svp-sk-classes::-webkit-scrollbar {
    display: none !important;
  }
  body.svp-inner--skills a.svp-sk-chip {
    flex: none !important;
  }
  body.svp-inner--skills .svp-sk-browser .skill-list-box {
    margin-top: 16px !important;
    padding-top: 18px !important;
  }
  body.svp-inner--skills .svp-sk-head {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  body.svp-inner--skills .svp-sk-head .svp-head__aside,
  body.svp-inner--skills #skill-pager-top .svp-sk-pager .pagination-list {
    justify-content: flex-start !important;
  }
  /* The phone set of page links: first, last, current +-1 and their own "..."; the rest stays in the page */
  body.svp-inner--skills .svp-sk-pager .pagination-list :is(.svp-sk-pager-wide, .svp-sk-pager-step) {
    display: none !important;
  }
  body.svp-inner--skills .svp-sk-pager .pagination-list .svp-sk-pager-narrow {
    display: block !important;
  }
  body.svp-inner--skills .svp-sk-pager .pagination-list :is(a, span.active) {
    min-width: 44px !important;
    height: 44px !important;
  }
  body.svp-inner--skills .svp-sk-pager .pagination-list .svp-sk-pager-step a {
    padding: 0 13px !important;
  }
  body.svp-inner--skills .svp-sk-pager .pagination-list .svp-sk-pager-word {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
  }
  body.svp-inner--skills .svp-sk-pager .pagination-list .svp-sk-pager-gap {
    line-height: 44px !important;
  }

  /* Cards. (The list script dims the tbody through its inline opacity while it loads; only its display changes here.) */
  body.svp-inner--skills #skill-table {
    display: block !important;
    width: 100% !important;
  }
  body.svp-inner--skills #skill-table tbody {
    display: block !important;
  }
  body.svp-inner--skills #skill-table thead {
    display: none !important;
  }
  body.svp-inner--skills #skill-table tbody tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    margin: 0 0 10px !important;
    padding: 14px 14px 10px !important;
    border: 1px solid var(--svp-line) !important;
    border-radius: var(--svp-r-sm) !important;
    background: var(--svp-well) !important;
  }
  body.svp-inner--skills #skill-table tbody tr:last-child {
    margin-bottom: 0 !important;
  }
  body.svp-inner--skills #skill-table tbody tr:hover > td {
    background: none !important;
  }
  body.svp-inner--skills #skill-table tbody td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  body.svp-inner--skills #skill-table tbody td.svp-sk-cell {
    flex: 1 0 100% !important;
    padding: 0 0 12px !important;
    margin-bottom: 8px !important;
    border-bottom: 1px solid var(--svp-line) !important;
  }
  /* Damage, mana, AG: one line of label + number pairs under the skill (the skill cell's 100% basis puts
     them on a line of their own; a pair with nothing to say is left out) */
  body.svp-inner--skills #skill-table tbody td.svp-num {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 7px !important;
    min-width: 0 !important;
    margin: 0 20px 0 0 !important;
    padding: 4px 0 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    text-align: left !important;
  }
  body.svp-inner--skills #skill-table tbody td.svp-num::before {
    content: attr(data-label) !important;
    color: var(--svp-ink-faint) !important;
    font-family: var(--sv-font-ui) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
  body.svp-inner--skills #skill-table tbody td.svp-sk-nil {
    display: none !important;
  }
  body.svp-inner--skills #skill-table tbody :is(td.svp-sk-reqs, td.svp-sk-classcol) {
    flex: 1 0 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0 10px !important;
    padding: 4px 0 !important;
    white-space: normal !important;
  }
  body.svp-inner--skills #skill-table tbody :is(td.svp-sk-reqs, td.svp-sk-classcol)::before {
    content: attr(data-label) !important;
    flex: 0 0 112px !important;
    color: var(--svp-ink-faint) !important;
    font-family: var(--sv-font-ui) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
  }
  body.svp-inner--skills #skill-table tbody td.svp-sk-noreqs {
    display: none !important;
  }
  /* The class line wraps its stage note under the classes, level with them */
  body.svp-inner--skills #skill-table tbody td.svp-sk-classcol .svp-sk-stage {
    flex: 1 0 100% !important;
    margin: 1px 0 0 122px !important;
    white-space: normal !important;
  }
  body.svp-inner--skills #skill-table .skill-link {
    font-size: 17px !important;
  }
  body.svp-inner--skills .svp-sk {
    gap: 12px !important;
  }
  body.svp-inner--skills .svp-sk-meta {
    font-size: 13px !important;
  }
  body.svp-inner--skills #skill-table tbody tr.svp-sk-empty {
    display: block !important;
    padding: 0 !important;
  }
  body.svp-inner--skills #skill-table tbody tr.svp-sk-empty > td {
    padding: 30px 16px 32px !important;
  }
  body.svp-inner--skills .svp-sk-legend,
  body.svp-inner--skills .svp-sk-types {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  body.svp-inner--skills .svp-sk-legend__tile {
    padding: 16px !important;
  }
  body.svp-inner--skills .svp-sk-codekey {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
  }
  body.svp-inner--skills .svp-sk-codekey > li {
    font-size: 16px !important;
    white-space: normal !important;
  }
  body.svp-inner--skills .svp-sk-codekey b {
    min-width: 2.35em !important;
  }
  /* Skill page: the glyph sits in the art band at the top instead of above the kicker */
  body.svp-inner--skills .svp-sk-mast--skill .svp-sk-art {
    position: absolute !important;
    top: 10px !important;
    left: 18px !important;
    width: 76px !important;
    height: 76px !important;
    margin: 0 !important;
    border-radius: 10px !important;
  }
  body.svp-inner--skills .svp-sk-mast--skill .page-header-copy {
    max-width: none !important;
  }
  body.svp-inner--skills .svp-sk-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.svp-inner--skills .svp-sk-classlist {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   9. Touch, motion
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  body.svp-inner--skills a.svp-sk-chip {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  body.svp-inner--skills .svp-sk-types a {
    min-height: 44px !important;
    align-items: center !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.svp-inner--skills :is(.svp-sk-form input, .svp-sk-form select, .svp-sk-btn, a.svp-sk-chip b, .svp-sk-pager a, #skill-table .skill-link, .svp-sk-types a, .svp-sk-classlist__link) {
    transition: none !important;
  }
  body.svp-inner--skills .svp-sk-back::before {
    transition: none !important;
  }
}

}