/* ==========================================================================
   SilverMU inner pages: /maps (maps.php, the map list).
   Loaded by maps.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--maps.
   The shared components (masthead, panels, heads, chips, FAQ) come from silver-inner.css; this sheet
   adds the map browser (search, type chips, compact rows that turn into cards on phones), the type
   glyphs and the legend tiles. The look follows /items (css/silver-inner-items.css), under svp-mp-* names.

   NEVER: opacity/transform/transition on .white-box (fx.js reveals panels). Rows: the list script
   shows and hides them through their hidden attribute; tr[hidden] stays display:none at every width
   (the phone cards set display on tr, so that rule must keep the higher specificity).

   CONTENTS
    1  Type glyphs and colours (rows, chips, legend)
    2  Map browser: the search form, buttons and the type chips
    3  The list head
    4  Rows
    5  Below the list: about, legend tiles
    6  Short screens, narrow desktop, tablet
    7  Phones: rows become cards
    8  Touch, motion
   ========================================================================== */
@layer sv-inner {

body.svp-inner--maps {
  --svp-mp-ctl-h: 46px !important;
  --svp-mp-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-mp-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 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--maps .page-header-box.svp-mp-mast > .page-header-copy {
    max-width: min(70%, 880px) !important;
  }
}

/* --------------------------------------------------------------------------
   1. Type glyphs and colours
   Every element that stands for a map type carries data-type (town, hunting, event, boss, pvp, field,
   quest): the rows, the type chips and the legend's type key. It sets two tokens its glyphs read:
   --svp-mp-glyph (an SVG drawn as a mask, so it takes a colour) and --svp-mp-hue (a soft tint, used on
   the glyph and the row's type tag only; names and numbers stay neutral).
   -------------------------------------------------------------------------- */
body.svp-inner--maps :is(#map-table tbody tr, .svp-mp-types a, .svp-mp-typekey li) {
  --svp-mp-hue: #b8c2d4 !important;
  --svp-mp-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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 21V3.5'/%3E%3Cpath d='M6 4.5h11.5L15 8.8l2.5 4.2H6'/%3E%3C/svg%3E") !important;
}
/* Town / safe zone: a house */
body.svp-inner--maps :is(#map-table tbody tr, .svp-mp-types a, .svp-mp-typekey li)[data-type="town"] {
  --svp-mp-hue: #8fe0ad !important;
  --svp-mp-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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11 12 4l8.5 7'/%3E%3Cpath d='M5.8 9.4V20h12.4V9.4'/%3E%3Cpath d='M10 20v-5.2h4V20'/%3E%3C/svg%3E") !important;
}
/* Monster hunting field / leveling map: a sword */
body.svp-inner--maps :is(#map-table tbody tr, .svp-mp-types a, .svp-mp-typekey li)[data-type="hunting"] {
  --svp-mp-hue: #93cfff !important;
  --svp-mp-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.7' 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;
}
/* Instanced event / dungeon: a gate */
body.svp-inner--maps :is(#map-table tbody tr, .svp-mp-types a, .svp-mp-typekey li)[data-type="event"] {
  --svp-mp-hue: #ffb877 !important;
  --svp-mp-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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 20.5v-10a6.5 6.5 0 0 1 13 0v10'/%3E%3Cpath d='M3.5 20.5h17'/%3E%3Cpath d='M9.5 20.5v-5a2.5 2.5 0 0 1 5 0v5'/%3E%3C/svg%3E") !important;
}
/* Boss arena / raid map: a skull */
body.svp-inner--maps :is(#map-table tbody tr, .svp-mp-types a, .svp-mp-typekey li)[data-type="boss"] {
  --svp-mp-hue: #ff9f91 !important;
  --svp-mp-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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c-4.4 0-7.5 3.1-7.5 7.1 0 2.5 1.2 4.3 3 5.3v3.6h9v-3.6c1.8-1 3-2.8 3-5.3 0-4-3.1-7.1-7.5-7.1z'/%3E%3Ccircle cx='9.3' cy='11' r='1.5'/%3E%3Ccircle cx='14.7' cy='11' r='1.5'/%3E%3Cpath d='M10.6 19.5v-2.2M13.4 19.5v-2.2'/%3E%3C/svg%3E") !important;
}
/* PvP arena / duel map: crossed swords */
body.svp-inner--maps :is(#map-table tbody tr, .svp-mp-types a, .svp-mp-typekey li)[data-type="pvp"] {
  --svp-mp-hue: #c8b6ff !important;
  --svp-mp-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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l11 11M12.5 17.5l5-5M15 15l4.5 4.5'/%3E%3Cpath d='M20 4 9 15M6.5 12.5l5 5M9 15l-4.5 4.5'/%3E%3C/svg%3E") !important;
}
/* Field / event map: a flag (also the fallback above) */
body.svp-inner--maps :is(#map-table tbody tr, .svp-mp-types a, .svp-mp-typekey li)[data-type="field"] {
  --svp-mp-hue: #b8c2d4 !important;
}
/* Quest / scenario map: the quest mark */
body.svp-inner--maps :is(#map-table tbody tr, .svp-mp-types a, .svp-mp-typekey li)[data-type="quest"] {
  --svp-mp-hue: #f1d58c !important;
  --svp-mp-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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V13'/%3E%3Cpath d='M12 16.4v.1'/%3E%3C/svg%3E") !important;
}

/* The glyph tile (rows and the legend key) */
body.svp-inner--maps .svp-mp-glyph {
  position: relative !important;
  flex: none !important;
  display: inline-grid !important;
  place-items: center !important;
  box-sizing: border-box !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--svp-line) !important;
  border-radius: var(--svp-r-ctl) !important;
  background: rgba(255, 255, 255, 0.03) !important;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--svp-mp-hue) 15%, transparent), transparent 72%),
    rgba(255, 255, 255, 0.025) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  vertical-align: middle !important;
}
body.svp-inner--maps .svp-mp-glyph::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--svp-mp-hue) !important;
  -webkit-mask: var(--svp-mp-glyph) center / contain no-repeat !important;
  mask: var(--svp-mp-glyph) center / contain no-repeat !important;
}

/* --------------------------------------------------------------------------
   2. Map browser: one panel holds the search and the list
   div.white-box.map-filters.svp-mp-browser
     > h2.svp-sr
     > form#map-filter-form.svp-mp-form
         > div.svp-mp-controls > div.svp-mp-field--q, div.svp-mp-field--type (label + control), div.svp-mp-actions
         > div.svp-mp-types > a.svp-chip.svp-mp-chip[data-type] (glyph, label, count in <b>; --none when 0)
     > div.map-list-box (the list, sections 3 and 4)
   -------------------------------------------------------------------------- */
body.svp-inner--maps .white-box.svp-mp-browser {
  padding: 26px 32px 30px !important;
}
body.svp-inner--maps .svp-mp-form {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--maps .svp-mp-controls {
  display: grid !important;
  grid-template-columns: minmax(280px, 1fr) minmax(220px, 320px) auto !important;
  grid-template-areas: "q type actions" !important;
  gap: 14px 12px !important;
  align-items: end !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--maps .svp-mp-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--maps .svp-mp-field--q { grid-area: q !important; }
body.svp-inner--maps .svp-mp-field--type { grid-area: type !important; }
body.svp-inner--maps .svp-mp-actions { grid-area: actions !important; }

body.svp-inner--maps .svp-mp-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;
}
/* Search box and menu: one height, one frame, one chevron (:where keeps the variants below in charge) */
body.svp-inner--maps .svp-mp-form :where(input[type="search"], select) {
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  height: var(--svp-mp-ctl-h) !important;
  min-height: var(--svp-mp-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--maps .svp-mp-form :is(input, select)::placeholder {
  color: var(--svp-ink-faint) !important;
  font-weight: 400 !important;
  opacity: 1 !important;
}
body.svp-inner--maps .svp-mp-form :is(input, select):hover {
  border-color: rgba(214, 222, 236, 0.42) !important;
}
body.svp-inner--maps .svp-mp-form :is(input, select):focus,
body.svp-inner--maps .svp-mp-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--maps .svp-mp-form input[type="search"] {
  padding-left: 42px !important;
  background-image: var(--svp-mp-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--maps .svp-mp-form input[type="search"]::-webkit-search-cancel-button {
  cursor: pointer !important;
}
body.svp-inner--maps .svp-mp-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-mp-chev) !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
}
body.svp-inner--maps .svp-mp-form select option {
  background: #0d131f !important;
  color: var(--svp-ink-strong) !important;
}
/* Buttons: Search (steel), Reset (quiet text) */
body.svp-inner--maps .svp-mp-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--maps .svp-mp-btn {
  flex: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  height: var(--svp-mp-ctl-h) !important;
  min-height: var(--svp-mp-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-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--maps .svp-mp-btn--go {
  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--maps .svp-mp-btn--go:hover,
body.svp-inner--maps .svp-mp-btn--go: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--maps .svp-mp-btn--reset {
  padding: 0 12px !important;
}
body.svp-inner--maps .svp-mp-btn--reset:hover,
body.svp-inner--maps .svp-mp-btn--reset:focus-visible {
  border-color: transparent !important;
  background: rgba(124, 200, 255, 0.07) !important;
  color: var(--svp-ice) !important;
}
body.svp-inner--maps .svp-mp-btn:focus-visible {
  outline: 2px solid rgba(124, 200, 255, 0.7) !important;
  outline-offset: 2px !important;
}
/* Type chips: plain ?role= links, a glyph, the count in <b> */
body.svp-inner--maps .svp-mp-types {
  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--maps a.svp-mp-chip {
  padding: 6px 12px !important;
}
body.svp-inner--maps .svp-mp-chip__glyph {
  display: inline-block !important;
  position: relative !important;
  top: -1px !important;
  width: 15px !important;
  height: 15px !important;
  margin: 0 7px 0 0 !important;
  background: var(--svp-mp-hue) !important;
  -webkit-mask: var(--svp-mp-glyph) center / contain no-repeat !important;
  mask: var(--svp-mp-glyph) center / contain no-repeat !important;
  vertical-align: middle !important;
}
body.svp-inner--maps a.svp-mp-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--maps a.svp-mp-chip:hover b,
body.svp-inner--maps a.svp-mp-chip:focus-visible b,
body.svp-inner--maps a.svp-mp-chip[aria-current="true"] b {
  color: #d4ecff !important;
}
body.svp-inner--maps a.svp-mp-chip--none {
  border-color: var(--svp-line) !important;
  background: transparent !important;
  color: var(--svp-ink-faint) !important;
}
body.svp-inner--maps a.svp-mp-chip--none b {
  color: var(--svp-ink-faint) !important;
}
body.svp-inner--maps a.svp-mp-chip--none .svp-mp-chip__glyph {
  background: var(--svp-ink-faint) !important;
}
body.svp-inner--maps a.svp-mp-chip--none:hover,
body.svp-inner--maps a.svp-mp-chip--none:focus-visible {
  border-color: rgba(124, 200, 255, 0.5) !important;
  color: var(--svp-ink) !important;
}

/* --------------------------------------------------------------------------
   3. The list head
   div.map-list-box > div.svp-head.svp-mp-head > h2.svp-h2 + p.svp-head__note.svp-mp-summary (#map-results-count)
                    > table#map-table
   -------------------------------------------------------------------------- */
body.svp-inner--maps .svp-mp-browser .map-list-box {
  margin: 24px 0 0 !important;
  padding: 24px 0 0 !important;
  border-top: 1px solid var(--svp-line) !important;
}
/* No form (the list could not be loaded): the list head opens the panel */
body.svp-inner--maps .svp-mp-browser > h2.svp-sr + .map-list-box {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
body.svp-inner--maps .svp-mp-head {
  align-items: center !important;
  margin-bottom: 18px !important;
}
/* Desktop: the count sits at the end of the heading's line (one line less before the first row) */
@media (min-width: 1100px) {
  body.svp-inner--maps .svp-mp-head .svp-head__main {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 4px 24px !important;
  }
  body.svp-inner--maps .svp-mp-head .svp-mp-summary {
    margin: 0 !important;
  }
}
body.svp-inner--maps .svp-mp-summary {
  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--maps #map-results-count {
  color: var(--svp-ink-strong) !important;
  font-weight: 500 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
body.svp-inner--maps .map-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. Rows
   table#map-table.svp-table.svp-table--sticky (the head sticks under the site header)
     tbody tr#map-{slug}[data-type] > td.svp-mp-id (number)
                                    > th.svp-mp-cell > span.svp-mp-map > span.svp-mp-glyph + span.svp-mp-name
                                    > td.svp-mp-typecell > span.svp-mp-tag
                                    > td.svp-mp-filecell > code.svp-mp-file + span.svp-mp-shared? (count in <b>)
     tbody tr.svp-mp-empty (shown when nothing matches)
   One line per map, about 55px. A row reached through /maps#map-... is marked (ice bar and tint).
   -------------------------------------------------------------------------- */
body.svp-inner--maps #map-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--maps #map-table tbody tr[hidden] {
  display: none !important;
}
body.svp-inner--maps #map-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--maps #map-table thead th.svp-num {
  text-align: right !important;
}
/* ID, map, type, layout file: the names get room, the spare width ends up after the files */
body.svp-inner--maps #map-table thead th:nth-child(1) { width: 7em !important; }
body.svp-inner--maps #map-table thead th:nth-child(2) { width: 28% !important; }
body.svp-inner--maps #map-table thead th:nth-child(3) { width: 14em !important; }
body.svp-inner--maps #map-table thead th:nth-child(4) { width: auto !important; }

body.svp-inner--maps #map-table tbody :is(td, th) {
  position: static !important;
  min-width: 0 !important;
  padding: 9px 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;
  text-transform: none !important;
  vertical-align: middle !important;
  white-space: normal !important;
}
body.svp-inner--maps #map-table tbody tr:hover > * {
  background: rgba(124, 200, 255, 0.05) !important;
}
/* Reached through a link (a guide's /maps#map-deep-dungeon5): an ice bar and a tint */
body.svp-inner--maps #map-table tbody tr:target > * {
  background: rgba(124, 200, 255, 0.1) !important;
}
body.svp-inner--maps #map-table tbody tr:target > :first-child {
  box-shadow: inset 3px 0 0 var(--svp-ice) !important;
}
/* Anchors land below the sticky column head as well as the site header (html scroll-padding covers
   the header; this row's own margin covers the 42px head) */
@media (min-width: 761px) {
  body.svp-inner--maps #map-table tbody tr[id] {
    scroll-margin-top: 48px !important;
  }
}
/* Map ID */
body.svp-inner--maps #map-table tbody td.svp-mp-id {
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-align: right !important;
  white-space: nowrap !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
/* Map: glyph and name */
body.svp-inner--maps .svp-mp-map {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0 !important;
}
body.svp-inner--maps #map-table tbody th.svp-mp-cell {
  padding-left: 18px !important;
}
body.svp-inner--maps .svp-mp-name {
  min-width: 0 !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;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
}
/* Type tag, tinted with the type's colour */
body.svp-inner--maps .svp-mp-tag {
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 8px !important;
  border: 1px solid rgba(214, 222, 236, 0.26) !important;
  border: 1px solid color-mix(in srgb, var(--svp-mp-hue) 40%, transparent) !important;
  border-radius: 5px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  background: color-mix(in srgb, var(--svp-mp-hue) 7%, transparent) !important;
  color: var(--svp-ink) !important;
  color: color-mix(in srgb, var(--svp-mp-hue) 45%, #f3f6fb) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: help !important;
}
/* Layout file, and how many maps share it */
body.svp-inner--maps .svp-mp-file {
  display: inline !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--svp-ink-muted) !important;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  overflow-wrap: anywhere !important;
  white-space: normal !important;
}
body.svp-inner--maps .svp-mp-shared {
  display: inline-block !important;
  margin: 2px 0 !important;
  padding: 0 8px !important;
  border: 1px solid rgba(124, 200, 255, 0.3) !important;
  border-radius: 999px !important;
  background: rgba(124, 200, 255, 0.06) !important;
  color: #cfe6fb !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 20px !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
  cursor: help !important;
}
body.svp-inner--maps .svp-mp-shared b {
  color: #ffffff !important;
  font-weight: 500 !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
/* Nothing found */
body.svp-inner--maps #map-table tbody tr.svp-mp-empty > td {
  padding: 44px 16px 46px !important;
  border-bottom: 0 !important;
  text-align: center !important;
}
body.svp-inner--maps #map-table tbody tr.svp-mp-empty:hover > td {
  background: none !important;
}
body.svp-inner--maps .svp-mp-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--maps .svp-mp-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--maps .svp-mp-empty__hint a {
  color: var(--svp-link) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(124, 200, 255, 0.45) !important;
  text-underline-offset: 3px !important;
}
body.svp-inner--maps .svp-mp-empty__hint a:hover,
body.svp-inner--maps .svp-mp-empty__hint a:focus-visible {
  color: #ffffff !important;
  text-decoration-color: var(--svp-ice) !important;
}

/* --------------------------------------------------------------------------
   5. Below the list: about (two columns), legend tiles (2 x 2 and the type key), FAQ (shared)
   div.svp-mp-about > div.svp-duo.svp-prose > (div > p x2) + ul
   dl.svp-mp-legend > div.svp-mp-legend__tile[--wide] > dt (label) + dd (definition; the wide one holds
   ul.svp-mp-typekey > li[data-type] > span.svp-mp-glyph + span.svp-mp-typekey__text)
   -------------------------------------------------------------------------- */
body.svp-inner--maps .svp-mp-about .svp-duo {
  margin-top: 4px !important;
}
body.svp-inner--maps .svp-mp-about .svp-duo > div > p:last-child {
  margin-bottom: 0 !important;
}
body.svp-inner--maps .svp-mp-legend {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner--maps .svp-mp-legend__tile {
  box-sizing: border-box !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 18px 22px 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--maps .svp-mp-legend__tile--wide {
  grid-column: 1 / -1 !important;
}
body.svp-inner--maps .svp-mp-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--maps .svp-mp-legend dt::before,
body.svp-inner--maps .svp-mp-legend dt::after {
  content: none !important;
}
body.svp-inner--maps .svp-mp-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--maps .svp-mp-legend dd strong {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
body.svp-inner--maps .svp-mp-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 type key: each type's glyph, its tag and its full name */
body.svp-inner--maps .svp-mp-typekey {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px 24px !important;
  max-width: none !important;
  margin: 14px 0 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.svp-inner--maps .svp-mp-typekey > li {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
  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: 16px !important;
  line-height: 1.35 !important;
}
body.svp-inner--maps .svp-mp-typekey > li::before,
body.svp-inner--maps .svp-mp-typekey > li::after {
  content: none !important;
}
body.svp-inner--maps .svp-mp-typekey .svp-mp-glyph {
  width: 32px !important;
  height: 32px !important;
}
body.svp-inner--maps .svp-mp-typekey .svp-mp-glyph::before {
  width: 18px !important;
  height: 18px !important;
}
body.svp-inner--maps .svp-mp-typekey__text {
  min-width: 0 !important;
}
body.svp-inner--maps .svp-mp-typekey b {
  display: block !important;
  color: var(--svp-ink-strong) !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;
}

/* FAQ: three questions, one row of cards on wide screens (the shared grid's two columns would leave
   the third card alone on a second row) */
@media (min-width: 1280px) {
  body.svp-inner--maps .map-faq-box .svp-faq {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* --------------------------------------------------------------------------
   6. Short screens, narrow desktop and tablet
   Short screens (laptops, height <= 820): a compact masthead (no lead line), so rows reach the first
   screen. Below 900px the search takes its own row.
   -------------------------------------------------------------------------- */
@media (min-width: 761px) and (max-height: 820px) {
  body.svp-inner--maps .page-header-box.svp-mp-mast {
    min-height: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  body.svp-inner--maps .svp-mp-mast .page-subtitle {
    display: none !important;
  }
  body.svp-inner--maps .svp-mp-mast .svp-mast-row {
    margin-top: 14px !important;
  }
  body.svp-inner--maps .svp-mp-browser .map-list-box {
    margin-top: 18px !important;
    padding-top: 18px !important;
  }
}
@media (min-width: 761px) and (max-width: 1099px) {
  body.svp-inner--maps .white-box.svp-mp-browser {
    padding: 22px 24px 26px !important;
  }
  body.svp-inner--maps .svp-mp-browser .map-list-box {
    margin-top: 20px !important;
    padding-top: 20px !important;
  }
  body.svp-inner--maps #map-table thead th:nth-child(1) { width: 5.5em !important; }
  body.svp-inner--maps #map-table thead th:nth-child(2) { width: auto !important; }
  body.svp-inner--maps #map-table thead th:nth-child(3) { width: 11.5em !important; }
  body.svp-inner--maps #map-table thead th:nth-child(4) { width: 34% !important; }
  body.svp-inner--maps #map-table thead th {
    padding: 11px 12px !important;
    white-space: normal !important;
  }
  body.svp-inner--maps #map-table tbody :is(td, th) {
    padding: 9px 12px !important;
  }
  body.svp-inner--maps .svp-mp-file {
    font-size: 13px !important;
  }
  body.svp-inner--maps .svp-mp-typekey {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 761px) and (max-width: 899px) {
  body.svp-inner--maps .svp-mp-controls {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
      "q q"
      "type actions" !important;
  }
  body.svp-inner--maps .svp-mp-legend {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* --------------------------------------------------------------------------
   7. Phones (<= 760)
   The type chips do the menu's job, so the menu (still in the form, still submitted) steps aside and
   the field labels stay for screen readers only. Each row becomes a card, what the map is first:
     line 1: glyph, name, type tag      line 2: ID, layout file (an ellipsis if it is too long), shared count
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.svp-inner--maps .page-header-box .svp-mp-chip-files {
    display: none !important;
  }
  /* The lead repeats what the title says: phones leave it out, so the search and the list head
     stay in the first screen */
  body.svp-inner--maps .svp-mp-mast .page-subtitle {
    display: none !important;
  }
  body.svp-inner--maps .white-box.svp-mp-browser {
    padding: 16px 16px 20px !important;
  }
  body.svp-inner--maps .svp-mp-controls {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas: "q actions" !important;
    gap: 8px !important;
  }
  body.svp-inner--maps .svp-mp-field--type {
    display: none !important;
  }
  body.svp-inner--maps .svp-mp-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--maps .svp-mp-field {
    gap: 0 !important;
  }
  body.svp-inner--maps .svp-mp-form :where(input[type="search"], select) {
    font-size: 16px !important;
  }
  body.svp-inner--maps .svp-mp-btn {
    padding: 0 14px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
  }
  /* Reset: the chips' "All maps" and the search box's own clear button do it here */
  body.svp-inner--maps .svp-mp-btn--reset {
    display: none !important;
  }
  /* The chips scroll sideways in one line, edge to edge of the panel */
  body.svp-inner--maps .svp-mp-types {
    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--maps .svp-mp-types::-webkit-scrollbar {
    display: none !important;
  }
  body.svp-inner--maps a.svp-mp-chip {
    flex: none !important;
  }
  body.svp-inner--maps .svp-mp-browser .map-list-box {
    margin-top: 16px !important;
    padding-top: 18px !important;
  }
  body.svp-inner--maps .svp-mp-head {
    gap: 12px !important;
    margin-bottom: 14px !important;
  }

  /* Cards. The rows' hidden attribute (the list script's filter) still wins: see section 4. */
  body.svp-inner--maps #map-table {
    display: block !important;
    width: 100% !important;
  }
  body.svp-inner--maps #map-table thead {
    display: none !important;
  }
  body.svp-inner--maps #map-table tbody {
    display: block !important;
  }
  body.svp-inner--maps #map-table tbody tr {
    display: grid !important;
    grid-template-columns: max-content minmax(0, 1fr) max-content !important;
    grid-template-areas:
      "map map type"
      "id file file" !important;
    align-items: center !important;
    gap: 5px 10px !important;
    margin: 0 0 8px !important;
    padding: 11px 12px 12px !important;
    border: 1px solid var(--svp-line) !important;
    border-radius: var(--svp-r-sm) !important;
    background: var(--svp-well) !important;
  }
  body.svp-inner--maps #map-table tbody tr.svp-mp-empty:not([hidden]) {
    display: block !important;
    padding: 0 !important;
  }
  body.svp-inner--maps #map-table tbody tr:last-child {
    margin-bottom: 0 !important;
  }
  body.svp-inner--maps #map-table tbody tr:hover > * {
    background: none !important;
  }
  body.svp-inner--maps #map-table tbody tr:target {
    border-color: rgba(124, 200, 255, 0.6) !important;
    background: rgba(124, 200, 255, 0.08) !important;
  }
  body.svp-inner--maps #map-table tbody tr:target > * {
    background: none !important;
  }
  body.svp-inner--maps #map-table tbody tr:target > :first-child {
    box-shadow: none !important;
  }
  body.svp-inner--maps #map-table tbody :is(td, th) {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
  }
  body.svp-inner--maps #map-table tbody th.svp-mp-cell {
    grid-area: map !important;
    padding: 0 !important;
  }
  /* Line 2 starts under the name: the glyph (32px) plus the gap (12px) */
  body.svp-inner--maps #map-table tbody td.svp-mp-id {
    grid-area: id !important;
    align-self: center !important;
    padding-left: 44px !important;
    color: var(--svp-ink-muted) !important;
    font-size: 15px !important;
    text-align: left !important;
  }
  body.svp-inner--maps #map-table tbody td.svp-mp-id::before {
    content: attr(data-label) " " !important;
    color: var(--svp-ink-faint) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
  }
  body.svp-inner--maps #map-table tbody td.svp-mp-typecell {
    grid-area: type !important;
    align-self: center !important;
    text-align: right !important;
  }
  body.svp-inner--maps #map-table tbody td.svp-mp-filecell {
    grid-area: file !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }
  body.svp-inner--maps .svp-mp-file {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-size: 13px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow-wrap: normal !important;
  }
  body.svp-inner--maps .svp-mp-shared {
    flex: none !important;
    margin: 0 !important;
    font-size: 12.5px !important;
  }
  body.svp-inner--maps .svp-mp-map {
    gap: 12px !important;
  }
  body.svp-inner--maps #map-table .svp-mp-glyph {
    width: 32px !important;
    height: 32px !important;
  }
  body.svp-inner--maps #map-table .svp-mp-glyph::before {
    width: 18px !important;
    height: 18px !important;
  }
  body.svp-inner--maps .svp-mp-name {
    font-size: 17px !important;
  }
  body.svp-inner--maps .svp-mp-tag {
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
  }
  body.svp-inner--maps #map-table tbody tr.svp-mp-empty > td {
    padding: 30px 16px 32px !important;
  }
  body.svp-inner--maps .svp-mp-legend {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
  body.svp-inner--maps .svp-mp-legend__tile {
    padding: 16px !important;
  }
  body.svp-inner--maps .svp-mp-legend dd code {
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }
  body.svp-inner--maps .svp-mp-typekey {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
  }
}

/* --------------------------------------------------------------------------
   8. Touch, motion
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  body.svp-inner--maps a.svp-mp-chip {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.svp-inner--maps :is(.svp-mp-form input, .svp-mp-form select, .svp-mp-btn, a.svp-mp-chip b) {
    transition: none !important;
  }
}

}