/* ==========================================================================
   SilverMU inner pages: /items (the item list and the /items/{slug} pages).
   Loaded by items.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--items.
   The shared components (masthead, panels, heads, chips, FAQ, buttons) come from silver-inner.css;
   this sheet adds the item browser (search, category chips, compact rows that turn into cards on
   phones, pager), the legend tiles and the item page.

   The legacy sheets this has to beat: mu-online-attributes.css (row cards, centred cells, sticky first
   columns, the 1080px table), citadel.css (#item-table cell colours with ID weight, the select triangle,
   the orange 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  Item browser: the search form (fields, menus, buttons) and the category chips
    2  The list head and the pager
    3  Item rows
    4  Below the list: about, legend tiles
    5  Item pages (/items/{slug})
    6  Narrow desktop and tablet
    7  Phones: rows become cards
    8  Touch, motion
   ========================================================================== */
@layer sv-inner {

body.svp-inner--items {
  --svp-items-ctl-h: 46px !important;
  --svp-items-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-items-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;
}

/* Masthead: the list title (with " – Page N" on later pages) gets a little more width than the shared
   cap, so it keeps to two lines on desktop; it still stops short of the dragon. */
@media (min-width: 1100px) {
  body.svp-inner--items .page-header-box:not(.svp-item-mast) > .page-header-copy {
    max-width: min(70%, 880px) !important;
  }
}

/* --------------------------------------------------------------------------
   1. Item browser: one panel holds the search and the list
   div.white-box.item-filters.svp-items-browser
     > h2.svp-sr
     > form#item-filter-form.svp-items-form
         > div.svp-items-controls > div.svp-items-field (label + control) x5 + div.svp-items-actions
         > div.svp-items-cats > a.svp-chip.svp-items-cat[data-slot] (count in <b>; --none when 0)
     > div.item-list-box (the list, section 2 and 3)
   Wide screens: search, class, category, type, level range and the buttons on one row.
   -------------------------------------------------------------------------- */
body.svp-inner--items .white-box.svp-items-browser {
  padding: 26px 32px 30px !important;
}
body.svp-inner--items .svp-items-form {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--items .svp-items-controls {
  display: grid !important;
  grid-template-columns: minmax(240px, 2.1fr) repeat(3, minmax(0, 1fr)) minmax(170px, 1fr) auto !important;
  grid-template-areas: "q class cat type level actions" !important;
  gap: 14px 12px !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--items .svp-items-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--items .svp-items-field--q { grid-area: q !important; }
body.svp-inner--items .svp-items-field--class { grid-area: class !important; }
body.svp-inner--items .svp-items-field--cat { grid-area: cat !important; }
body.svp-inner--items .svp-items-field--type { grid-area: type !important; }
body.svp-inner--items .svp-items-field--level { grid-area: level !important; }
body.svp-inner--items .svp-items-actions { grid-area: actions !important; }

body.svp-inner--items .svp-items-field > label,
body.svp-inner--items .svp-items-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--items .svp-items-form :where(input[type="search"], input[type="number"], select) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--svp-items-ctl-h) !important;
  min-height: var(--svp-items-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--items .svp-items-form :is(input, select)::placeholder {
  color: var(--svp-ink-faint) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
body.svp-inner--items .svp-items-form :is(input, select):hover {
  border-color: rgba(214, 222, 236, 0.42) !important;
}
body.svp-inner--items .svp-items-form :is(input, select):focus,
body.svp-inner--items .svp-items-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--items .svp-items-form input[type="search"] {
  padding-left: 42px !important;
  background-image: var(--svp-items-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--items .svp-items-form input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer !important;
}
body.svp-inner--items .svp-items-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-items-chev) !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
}
body.svp-inner--items .svp-items-form select option {
  background: #0d131f !important;
  color: var(--svp-ink-strong) !important;
}
body.svp-inner--items .svp-items-form input[type="number"] {
  padding: 0 8px !important;
  text-align: center !important;
  -moz-appearance: textfield !important;
  appearance: textfield !important;
}
body.svp-inner--items .svp-items-form input[type="number"]::-webkit-inner-spin-button,
body.svp-inner--items .svp-items-form input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}
/* Level: min – max as one pair */
body.svp-inner--items .svp-items-range {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}
body.svp-inner--items .svp-items-range__dash {
  color: var(--svp-ink-faint) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 15px !important;
  line-height: 1 !important;
}
/* Buttons: Search (steel), Reset (quiet text) */
body.svp-inner--items .svp-items-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--items .svp-items-actions .attr-btn {
  flex: none !important;
  display: inline-flex !important;
  text-decoration: none !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: var(--svp-items-ctl-h) !important;
  min-height: var(--svp-items-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;
  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-transform: uppercase !important;
  text-shadow: none !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--items .svp-items-actions .attr-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--items .svp-items-actions .attr-btn-primary:hover,
body.svp-inner--items .svp-items-actions .attr-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--items .svp-items-actions .attr-btn-ghost {
  padding: 0 12px !important;
  color: var(--svp-ink-muted) !important;
}
body.svp-inner--items .svp-items-actions .attr-btn-ghost:hover,
body.svp-inner--items .svp-items-actions .attr-btn-ghost:focus-visible {
  border-color: transparent !important;
  background: rgba(124, 200, 255, 0.07) !important;
  color: var(--svp-ice) !important;
}
body.svp-inner--items .svp-items-actions .attr-btn:focus-visible {
  outline: 2px solid rgba(124, 200, 255, 0.7) !important;
  outline-offset: 2px !important;
}
/* Category chips: plain ?slot= links, the count in <b> */
body.svp-inner--items .svp-items-cats {
  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--items a.svp-items-cat {
  padding: 6px 11px !important;
}
body.svp-inner--items a.svp-items-cat b {
  margin-left: 2px !important;
  color: var(--svp-ink-muted) !important;
  font-weight: 500 !important;
  transition: color 0.18s ease !important;
}
body.svp-inner--items a.svp-items-cat:hover b,
body.svp-inner--items a.svp-items-cat:focus-visible b,
body.svp-inner--items a.svp-items-cat[aria-current="true"] b {
  color: #d4ecff !important;
}
body.svp-inner--items a.svp-items-cat--none {
  border-color: var(--svp-line) !important;
  background: transparent !important;
  color: var(--svp-ink-faint) !important;
}
body.svp-inner--items a.svp-items-cat--none b {
  color: var(--svp-ink-faint) !important;
}
body.svp-inner--items a.svp-items-cat--none:hover,
body.svp-inner--items a.svp-items-cat--none:focus-visible {
  border-color: rgba(124, 200, 255, 0.5) !important;
  color: var(--svp-ink) !important;
}

/* --------------------------------------------------------------------------
   2. The list head and the pager
   div.item-list-box (the list script's hook: aria-busy, focus and scroll target after paging)
     > div.svp-head.svp-items-head > (h2.svp-h2 + p.svp-head__note.item-results-meta > #item-results-summary)
                                   + aside #item-pager-top
     > table#item-table  > #item-pager-bottom
   nav.pagination-bar.svp-pager > ul.pagination-list > li (a | span.active | li.svp-pager-gap)
   Same-size squares, the current page in ice; li.svp-pager-far (round-number jumps) hide on phones.
   -------------------------------------------------------------------------- */
body.svp-inner--items .svp-items-browser .item-list-box {
  margin: 24px 0 0 !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid var(--svp-line) !important;
}
body.svp-inner--items .item-list-box:focus {
  outline: none !important;
}
body.svp-inner--items .svp-items-head {
  align-items: center !important;
  margin-bottom: 18px !important;
}
body.svp-inner--items .svp-items-head .svp-head__main {
  flex: 1 1 auto !important;
}
body.svp-inner--items .svp-items-head .svp-head__aside {
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
}
body.svp-inner--items .svp-items-head .item-results-meta {
  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--items .svp-items-head .item-results-meta strong {
  color: var(--svp-ink-strong) !important;
  font-weight: 500 !important;
}
body.svp-inner--items :is(#item-pager-top, #item-pager-bottom) {
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--items #item-pager-bottom:not(:empty) {
  margin-top: 22px !important;
}
body.svp-inner--items .svp-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--items .svp-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--items #item-pager-bottom .svp-pager .pagination-list {
  justify-content: center !important;
}
body.svp-inner--items .svp-pager .pagination-list > li {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
  border: 0 !important;
}
body.svp-inner--items .svp-pager .pagination-list > li::before,
body.svp-inner--items .svp-pager .pagination-list > li::after {
  content: none !important;
}
body.svp-inner--items .svp-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--items .svp-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--items .svp-pager .pagination-list :is(a, span.active)::before,
body.svp-inner--items .svp-pager .pagination-list :is(a, span.active)::after {
  content: none !important;
}
body.svp-inner--items .svp-pager .pagination-list a:hover,
body.svp-inner--items .svp-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--items .svp-pager .pagination-list a:focus-visible {
  outline: 2px solid rgba(124, 200, 255, 0.7) !important;
  outline-offset: 2px !important;
}
body.svp-inner--items .svp-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--items .svp-pager .pagination-list .svp-pager-step a {
  padding: 0 14px !important;
  font-size: 14px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.svp-inner--items .svp-pager .pagination-list .svp-pager-gap {
  min-width: 14px !important;
  padding: 0 !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;
}

/* --------------------------------------------------------------------------
   3. Item rows
   table#item-table.svp-table.svp-table--sticky (the head sticks under the site header)
     tbody tr > td.item-cell > div.svp-item > span.svp-item-thumb[data-cat] (img, or the category glyph)
                                            + span.svp-item-text > span.svp-item-name (a.item-link + span.svp-item-tag?)
                                                                 + span.svp-item-meta (span.svp-item-role, spans, span.svp-item-id)
              > td.item-stat-cell[.svp-item-nostat] (span.svp-item-num + span.svp-item-unit | span.svp-item-dash)
              > td.svp-item-reqs[.svp-item-noreqs]  (span.svp-item-req x n | span.svp-item-none)
              > td.item-class-cell (span.svp-item-all | span.svp-item-codes | span.svp-item-none)
   The whole Item cell opens the item (the link's ::after covers it). Rows are about 70px.
   -------------------------------------------------------------------------- */
body.svp-inner--items #item-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--items #item-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--items #item-table thead th.svp-num {
  text-align: right !important;
}
/* The Item column stops at 42%, so the numbers sit near the names and the spare width ends up after the classes */
body.svp-inner--items #item-table thead th:nth-child(1) { width: 42% !important; }
body.svp-inner--items #item-table thead th:nth-child(2) { width: 10em !important; }
body.svp-inner--items #item-table thead th:nth-child(3) { width: 13em !important; }
body.svp-inner--items #item-table thead th:nth-child(4) { width: auto !important; }

body.svp-inner--items #item-table tbody td {
  position: static !important;
  left: auto !important;
  z-index: auto !important;
  min-width: 0 !important;
  padding: 12px 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;
}
body.svp-inner--items #item-table tbody tr:last-child > td {
  border-bottom: 0 !important;
}
body.svp-inner--items #item-table tbody tr:hover > td {
  background: rgba(124, 200, 255, 0.05) !important;
}
/* Item cell */
body.svp-inner--items #item-table tbody td.item-cell {
  position: relative !important;
  width: auto !important;
  padding-left: 12px !important;
}
body.svp-inner--items .svp-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}
body.svp-inner--items .svp-item-thumb {
  position: relative !important;
  flex: none !important;
  display: grid !important;
  place-items: center !important;
  /* fixed tracks: the img's 100% height is then the 44px box, so tall art (1x4 weapons) shrinks to fit instead of being cut */
  grid-template: 100% / 100% !important;
  box-sizing: border-box !important;
  width: 44px !important;
  height: 44px !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--items .svp-item-thumb img {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 3px !important;
  border: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.65)) !important;
}
/* No picture: the category's glyph, drawn as a mask so it takes the colour */
body.svp-inner--items .svp-item-thumb:empty::before {
  content: "" !important;
  width: 50% !important;
  height: 50% !important;
  background: rgba(163, 173, 191, 0.55) !important;
  -webkit-mask: var(--svp-items-glyph) center / contain no-repeat !important;
  mask: var(--svp-items-glyph) center / contain no-repeat !important;
}
body.svp-inner--items .svp-item-thumb {
  --svp-items-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 7.5 12 3.5l8.5 4v9L12 20.5l-8.5-4z'/%3E%3Cpath d='m3.5 7.5 8.5 4 8.5-4M12 11.5v9'/%3E%3C/svg%3E") !important;
}
body.svp-inner--items .svp-item-thumb[data-cat="weapon"] {
  --svp-items-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;
}
body.svp-inner--items .svp-item-thumb[data-cat="armor"] {
  --svp-items-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 7.5v9'/%3E%3C/svg%3E") !important;
}
body.svp-inner--items .svp-item-thumb[data-cat="wing"] {
  --svp-items-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 9c-2-3.5-5.5-5-9-5 .5 4.5 2.5 8 5.5 9.5L6 18c3.2-.3 5-1.8 6-4 1 2.2 2.8 3.7 6 4l-2.5-4.5C18.5 12 20.5 8.5 21 4c-3.5 0-7 1.5-9 5z'/%3E%3C/svg%3E") !important;
}
body.svp-inner--items .svp-item-thumb[data-cat="accessory"] {
  --svp-items-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='14.5' r='6'/%3E%3Cpath d='m9.6 5.8 2.4-3 2.4 3-2.4 2.7z'/%3E%3C/svg%3E") !important;
}
body.svp-inner--items .svp-item-thumb[data-cat="pet"] {
  --svp-items-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%3Cellipse cx='12' cy='16' rx='4.2' ry='3.6'/%3E%3Ccircle cx='6' cy='10.5' r='1.8'/%3E%3Ccircle cx='9.5' cy='6.5' r='1.8'/%3E%3Ccircle cx='14.5' cy='6.5' r='1.8'/%3E%3Ccircle cx='18' cy='10.5' r='1.8'/%3E%3C/svg%3E") !important;
}
body.svp-inner--items .svp-item-thumb[data-cat="pentagram"] {
  --svp-items-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='8.5'/%3E%3Cpath d='M12 3.5 17 19 4 9.5h16L7 19z'/%3E%3C/svg%3E") !important;
}
body.svp-inner--items .svp-item-thumb[data-cat="jewel"] {
  --svp-items-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 4.5h10l3.5 5L12 20 3.5 9.5z'/%3E%3Cpath d='M3.5 9.5h17M9.5 4.5 12 9.5l2.5-5M12 9.5V20'/%3E%3C/svg%3E") !important;
}
body.svp-inner--items .svp-item-thumb[data-cat="consumable"] {
  --svp-items-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='M9 3.5h6M10 3.5v5l-4.6 8a3 3 0 0 0 2.6 4.5h8a3 3 0 0 0 2.6-4.5L14 8.5v-5'/%3E%3Cpath d='M7 14.5h10'/%3E%3C/svg%3E") !important;
}
body.svp-inner--items .svp-item-thumb[data-cat="abilitycard"] {
  --svp-items-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%3Crect x='5.5' y='3' width='13' height='18' rx='2'/%3E%3Cpath d='m12 8 2.2 4L12 16l-2.2-4z'/%3E%3C/svg%3E") !important;
}

body.svp-inner--items .svp-item-text {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  min-width: 0 !important;
}
body.svp-inner--items .svp-item-name {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 10px !important;
  min-width: 0 !important;
}
body.svp-inner--items #item-table .item-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--items #item-table .item-link::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
}
/* The underline shows where a click goes: anywhere on the Item cell */
body.svp-inner--items #item-table tbody td.item-cell:hover .item-link,
body.svp-inner--items #item-table .item-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--items #item-table .item-link:focus-visible {
  outline: none !important;
}
body.svp-inner--items #item-table .item-link:focus-visible::after {
  outline: 2px solid rgba(124, 200, 255, 0.75) !important;
  outline-offset: -3px !important;
  border-radius: 6px !important;
}
body.svp-inner--items .svp-item-tag {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255, 201, 138, 0.38) !important;
  border-radius: 999px !important;
  background: rgba(255, 160, 80, 0.07) !important;
  color: var(--svp-kicker) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 19px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}
/* Meta line: the separators trail their item, so a wrapped line never starts with a dot */
body.svp-inner--items .svp-item-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--items .svp-item-meta > span {
  white-space: nowrap !important;
}
body.svp-inner--items .svp-item-meta > span:not(:last-child):not(.svp-item-role)::after {
  content: "\00B7" !important;
  margin: 0 7px !important;
  color: var(--svp-ink-faint) !important;
}
body.svp-inner--items .svp-item-role {
  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--items .svp-item-id {
  font-variant-numeric: lining-nums tabular-nums !important;
}
/* Damage / Defense: the number, its unit under it */
body.svp-inner--items #item-table tbody td.item-stat-cell {
  text-align: right !important;
  white-space: nowrap !important;
}
body.svp-inner--items .svp-item-num {
  display: block !important;
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
body.svp-inner--items .svp-item-unit {
  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--items .item-stat-cell .svp-item-unit {
  display: block !important;
  margin-top: 1px !important;
}
body.svp-inner--items .svp-item-dash {
  color: var(--svp-ink-faint) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 17px !important;
  line-height: 1 !important;
}
/* Requirements: only the ones that apply */
body.svp-inner--items .svp-item-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--items .svp-item-req:last-child {
  margin-right: 0 !important;
}
body.svp-inner--items .svp-item-req .svp-item-unit {
  margin-right: 2px !important;
}
body.svp-inner--items .svp-item-none {
  color: var(--svp-ink-faint) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  letter-spacing: 0.04em !important;
}
/* Class & stage */
body.svp-inner--items .svp-item-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--items .svp-item-codes[title] {
  cursor: help !important;
}
body.svp-inner--items .svp-item-except {
  color: var(--svp-ink-muted) !important;
}
body.svp-inner--items .svp-item-more {
  color: var(--svp-ice) !important;
  font-weight: 500 !important;
}
body.svp-inner--items .svp-item-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 4th class", "stage varies"), on its own line under them */
body.svp-inner--items .svp-item-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--items #item-table tbody tr.svp-items-empty > td {
  padding: 44px 16px 46px !important;
  text-align: center !important;
}
body.svp-inner--items #item-table tbody tr.svp-items-empty:hover > td {
  background: none !important;
}
body.svp-inner--items .svp-items-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--items .svp-items-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--items .item-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;
}

/* --------------------------------------------------------------------------
   4. 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 x4   (two newspaper columns that end level)
   dl.svp-item-legend > div.svp-item-legend__tile > dt (label) + dd (definition)
   -------------------------------------------------------------------------- */
body.svp-inner--items .svp-items-about .svp-duo {
  margin-top: 4px !important;
}
body.svp-inner--items .svp-item-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--items .svp-item-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--items .svp-item-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--items .svp-item-legend dt::before,
body.svp-inner--items .svp-item-legend dt::after {
  content: none !important;
}
body.svp-inner--items .svp-item-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--items .svp-item-legend dd strong {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
body.svp-inner--items .svp-item-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 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--items .svp-item-legend__tile--wide {
  grid-column: 1 / -1 !important;
}
body.svp-inner--items .svp-item-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--items .svp-item-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--items .svp-item-codekey > li::before,
body.svp-inner--items .svp-item-codekey > li::after {
  content: none !important;
}
body.svp-inner--items .svp-item-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;
}

/* --------------------------------------------------------------------------
   5. Item pages (/items/{slug})
   div.white-box.page-header-box.svp-item-mast > span.svp-item-art (img, or .svp-item-thumb glyph)
                                                + div.page-header-copy (kicker, h1, lead, chips, actions)
   then the stat tiles (ul.item-mini-stats: values wrap instead of being cut off) and the class pills.
   -------------------------------------------------------------------------- */
body.svp-inner--items .svp-item-mast {
  gap: 30px !important;
}
body.svp-inner--items .svp-item-mast .svp-item-art {
  position: relative !important;
  z-index: 1 !important;
  flex: none !important;
  display: grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 120px !important;
  height: 120px !important;
  margin: 0 !important;
  overflow: hidden !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--items .svp-item-mast .svp-item-art img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 92px !important;
  max-height: 92px !important;
  min-width: 48px !important;
  min-height: 0 !important;
  object-fit: contain !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.75)) !important;
}
body.svp-inner--items .svp-item-mast .svp-item-art.svp-item-thumb:empty::before {
  width: 40% !important;
  height: 40% !important;
}
body.svp-inner--items .svp-item-mast .page-header-copy {
  max-width: min(66%, 820px) !important;
}
/* "Back to the list": the quiet action with its chevron pointing back */
body.svp-inner--items .svp-item-back::after {
  content: none !important;
}
body.svp-inner--items .svp-item-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--items .svp-item-back:hover::before,
body.svp-inner--items .svp-item-back:focus-visible::before {
  transform: rotate(180deg) translateX(3px) !important;
}
/* Stat tiles */
body.svp-inner--items .white-box > .item-mini-stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 10px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.svp-inner--items .white-box > .item-mini-stats > li {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 12px 16px 13px !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-sm) !important;
  background: var(--svp-well) !important;
  box-shadow: none !important;
}
body.svp-inner--items .white-box > .item-mini-stats > li::before {
  content: none !important;
}
body.svp-inner--items .white-box > .item-mini-stats > li > span {
  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.08em !important;
  text-transform: uppercase !important;
  white-space: normal !important;
}
body.svp-inner--items .white-box > .item-mini-stats > li > strong {
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.02em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
body.svp-inner--items .white-box > .item-mini-stats > li.is-zero > strong {
  color: var(--svp-ink-faint) !important;
}
body.svp-inner--items .white-box > .item-mini-stats > li.is-wide {
  grid-column: 1 / -1 !important;
}
/* Class pills: short code and class name; the 18px portraits (300px PNGs, unreadable) stay out */
body.svp-inner--items .white-box > .class-pill-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.svp-inner--items .white-box > .class-pill-list > .class-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border: 1px solid var(--svp-line-2) !important;
  border-radius: var(--svp-r-ctl) !important;
  background: var(--svp-well) !important;
  box-shadow: none !important;
}
body.svp-inner--items .white-box > .class-pill-list > .class-pill::before {
  content: none !important;
}
body.svp-inner--items .white-box > .class-pill-list .class-pill-icon {
  display: none !important;
}
body.svp-inner--items .white-box > .class-pill-list .class-pill-text {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: baseline !important;
  gap: 10px !important;
  line-height: 1.3 !important;
}
body.svp-inner--items .white-box > .class-pill-list .class-pill-short {
  color: var(--svp-ice) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.svp-inner--items .white-box > .class-pill-list .class-pill-sub {
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
}
body.svp-inner--items .white-box > p.item-row-desc {
  max-width: var(--svp-measure) !important;
  margin: 0 !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: var(--svp-prose) !important;
  line-height: var(--svp-prose-lh) !important;
}

/* --------------------------------------------------------------------------
   6. Narrow desktop and tablet
   1260-1599: the search row stays one row (laptops: rows in the first screen), with a narrower
   search field, 16px menus and tighter chips. Below 1260px the menus would cut their own labels
   ("All catego…"), so the fields take two rows. Short screens (laptops, height <= 820) get a
   compact list masthead (no lead line). The top pager leaves out the round-number jumps below
   1260px so it fits beside the list heading (the bottom pager keeps them; all stay in the HTML).
   -------------------------------------------------------------------------- */
/* Below 1600px: the eleven chips keep to one line down to 1366px with a little less air, and the
   menus get 16px type and a narrower chevron gutter, so "Rings / pendants" or "Illusion Knight" fit */
@media (max-width: 1599px) {
  body.svp-inner--items .svp-items-cats {
    gap: 8px 5px !important;
  }
  body.svp-inner--items a.svp-items-cat {
    padding: 6px 9px !important;
    letter-spacing: 0.03em !important;
  }
  body.svp-inner--items .svp-items-form :where(input[type="search"], select) {
    font-size: 16px !important;
  }
  body.svp-inner--items .svp-items-form select {
    padding-left: 12px !important;
    padding-right: 30px !important;
    background-position: right 12px center !important;
  }
}
@media (min-width: 1260px) and (max-width: 1599px) {
  body.svp-inner--items .svp-items-controls {
    grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(0, 1fr)) minmax(144px, 0.85fr) auto !important;
    column-gap: 10px !important;
  }
  body.svp-inner--items .svp-items-actions .attr-btn {
    padding: 0 16px !important;
  }
  body.svp-inner--items .svp-items-actions .attr-btn-ghost {
    padding: 0 10px !important;
  }
}
@media (max-width: 1259px) {
  body.svp-inner--items .svp-items-controls {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-areas:
      "q q q actions"
      "class cat type level" !important;
  }
  body.svp-inner--items #item-pager-top .svp-pager .pagination-list .svp-pager-far {
    display: none !important;
  }
}
@media (min-width: 761px) and (max-height: 820px) {
  body.svp-inner--items .page-header-box.svp-items-mast {
    min-height: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  body.svp-inner--items .svp-items-mast .page-subtitle {
    display: none !important;
  }
  body.svp-inner--items .svp-items-mast .svp-mast-row {
    margin-top: 14px !important;
  }
  body.svp-inner--items .svp-items-browser .item-list-box {
    margin-top: 18px !important;
    padding-top: 18px !important;
  }
}
@media (min-width: 761px) and (max-width: 1099px) {
  body.svp-inner--items .white-box.svp-items-browser {
    padding: 22px 24px 26px !important;
  }
  body.svp-inner--items .svp-items-browser .item-list-box {
    margin-top: 20px !important;
    padding-top: 20px !important;
  }
  body.svp-inner--items #item-table thead th:nth-child(1) { width: auto !important; }
  body.svp-inner--items #item-table thead th:nth-child(2) { width: 7.5em !important; }
  body.svp-inner--items #item-table thead th:nth-child(3) { width: 9em !important; }
  body.svp-inner--items #item-table thead th:nth-child(4) { width: 14.5em !important; }
  body.svp-inner--items #item-table thead th {
    padding: 11px 12px !important;
    white-space: normal !important;
  }
  body.svp-inner--items #item-table tbody td {
    padding: 11px 12px !important;
  }
  body.svp-inner--items .svp-item-legend {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.svp-inner--items .svp-item-codekey {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  body.svp-inner--items .svp-item-mast .svp-item-art {
    width: 100px !important;
    height: 100px !important;
  }
  body.svp-inner--items .svp-item-mast .svp-item-art img {
    max-width: 76px !important;
    max-height: 76px !important;
  }
}

/* --------------------------------------------------------------------------
   7. Phones (<= 760)
   The menus show their own value ("All classes"), so their labels stay for screen readers only.
   Each row becomes a card: the item on top, then one line each for damage or defense, requirements
   and classes; a line with nothing to say (no damage or defense, no requirements) is left out.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.svp-inner--items .page-header-box .svp-items-chip-classes {
    display: none !important;
  }
  /* The list's lead line repeats what the title says: phones leave it out, so the search and the
     list head stay in the first screen (masthead about 290px instead of 350) */
  body.svp-inner--items .svp-items-mast .page-subtitle {
    display: none !important;
  }
  body.svp-inner--items .white-box.svp-items-browser {
    padding: 16px 16px 20px !important;
  }
  /* The category chips below do the Category menu's job here, so the menu (still in the form) steps aside */
  body.svp-inner--items .svp-items-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "q q"
      "class type"
      "level actions" !important;
    gap: 10px !important;
  }
  body.svp-inner--items .svp-items-field--cat {
    display: none !important;
  }
  body.svp-inner--items .svp-items-field > label,
  body.svp-inner--items .svp-items-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--items .svp-items-field {
    gap: 0 !important;
  }
  body.svp-inner--items .svp-items-form :where(input[type="search"], input[type="number"], select) {
    font-size: 16px !important;
  }
  body.svp-inner--items .svp-items-form select {
    padding-left: 11px !important;
    padding-right: 27px !important;
    background-position: right 11px center !important;
  }
  body.svp-inner--items .svp-items-range {
    gap: 4px !important;
  }
  body.svp-inner--items .svp-items-actions {
    gap: 2px !important;
  }
  body.svp-inner--items .svp-items-actions .attr-btn {
    padding: 0 12px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
  }
  body.svp-inner--items .svp-items-actions .attr-btn-primary {
    flex: 1 1 auto !important;
  }
  /* The chips scroll sideways in one line, edge to edge of the panel */
  body.svp-inner--items .svp-items-cats {
    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--items .svp-items-cats::-webkit-scrollbar {
    display: none !important;
  }
  body.svp-inner--items a.svp-items-cat {
    flex: none !important;
  }
  body.svp-inner--items .svp-items-browser .item-list-box {
    margin-top: 16px !important;
    padding-top: 18px !important;
  }
  body.svp-inner--items .svp-items-head {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }
  body.svp-inner--items .svp-items-head .svp-head__aside,
  body.svp-inner--items #item-pager-top .svp-pager .pagination-list {
    justify-content: flex-start !important;
  }
  body.svp-inner--items .svp-pager .pagination-list .svp-pager-far {
    display: none !important;
  }
  body.svp-inner--items .svp-pager .pagination-list :is(a, span.active) {
    min-width: 44px !important;
    height: 44px !important;
  }
  body.svp-inner--items .svp-pager .pagination-list .svp-pager-step a {
    padding: 0 13px !important;
  }
  body.svp-inner--items .svp-pager .pagination-list .svp-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--items .svp-pager .pagination-list .svp-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--items #item-table {
    display: block !important;
    width: 100% !important;
  }
  body.svp-inner--items #item-table tbody {
    display: block !important;
  }
  body.svp-inner--items #item-table thead {
    display: none !important;
  }
  body.svp-inner--items #item-table tbody tr {
    display: flex !important;
    flex-direction: column !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--items #item-table tbody tr:last-child {
    margin-bottom: 0 !important;
  }
  body.svp-inner--items #item-table tbody tr:hover > td {
    background: none !important;
  }
  body.svp-inner--items #item-table tbody td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }
  body.svp-inner--items #item-table tbody td.item-cell {
    padding: 0 0 12px !important;
    margin-bottom: 6px !important;
    border-bottom: 1px solid var(--svp-line) !important;
  }
  body.svp-inner--items #item-table tbody :is(td.item-stat-cell, td.svp-item-reqs, td.item-class-cell) {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 4px 0 !important;
    text-align: left !important;
    white-space: normal !important;
  }
  body.svp-inner--items #item-table tbody :is(td.item-stat-cell, td.svp-item-reqs, td.item-class-cell)::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--items #item-table tbody :is(td.svp-item-nostat, td.svp-item-noreqs) {
    display: none !important;
  }
  body.svp-inner--items #item-table tbody td.item-stat-cell .svp-item-unit {
    display: none !important;
  }
  body.svp-inner--items #item-table tbody td.item-stat-cell .svp-item-num {
    font-size: 16px !important;
  }
  /* The class line wraps its stage note under the codes, level with them */
  body.svp-inner--items #item-table tbody td.item-class-cell {
    flex-wrap: wrap !important;
    row-gap: 0 !important;
  }
  body.svp-inner--items #item-table tbody td.item-class-cell .svp-item-stage {
    flex: 1 0 100% !important;
    margin: 1px 0 0 122px !important;
    white-space: normal !important;
  }
  body.svp-inner--items #item-table .item-link {
    font-size: 17px !important;
  }
  body.svp-inner--items .svp-item {
    gap: 12px !important;
  }
  body.svp-inner--items .svp-item-meta {
    font-size: 13px !important;
  }
  body.svp-inner--items #item-table tbody tr.svp-items-empty {
    display: block !important;
    padding: 0 !important;
  }
  body.svp-inner--items #item-table tbody tr.svp-items-empty > td {
    padding: 30px 16px 32px !important;
  }
  body.svp-inner--items .svp-item-legend {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  body.svp-inner--items .svp-item-legend__tile {
    padding: 16px !important;
  }
  body.svp-inner--items .svp-item-codekey {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 10px !important;
  }
  body.svp-inner--items .svp-item-codekey > li {
    font-size: 16px !important;
    white-space: normal !important;
  }
  body.svp-inner--items .svp-item-codekey b {
    min-width: 2.35em !important;
  }
  /* Item page: the picture sits in the art band at the top (it took 90px above the title before) */
  body.svp-inner--items .svp-item-mast .svp-item-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--items .svp-item-mast .svp-item-art img {
    max-width: 58px !important;
    max-height: 58px !important;
    min-width: 32px !important;
  }
  body.svp-inner--items .svp-item-mast .page-header-copy {
    max-width: none !important;
  }
  body.svp-inner--items .white-box > .item-mini-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   8. Touch, motion
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  body.svp-inner--items a.svp-items-cat {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.svp-inner--items :is(.svp-items-form input, .svp-items-form select, .svp-items-actions .attr-btn, a.svp-items-cat b, .svp-pager a, #item-table .item-link) {
    transition: none !important;
  }
  body.svp-inner--items .svp-item-back::before {
    transition: none !important;
  }
}

}