/* ==========================================================================
   SilverMU inner pages: the shared layer ("Silver Codex").
   Loaded by items.php, events.php, servers.php and guide/_guide_shared.php (all 63 guides), each of which
   sets $bodyClass = 'svp-inner svp-inner--<page>' and appends this sheet to $pageStyles before header.php.
   Page sheets (css/silver-inner-<page>.css) load after this one, in the same layer.
   Component sheet: /_svp_kitchen (staging only).

   THE MECHANIC (as css/silver-account.css)
   Everything sits in @layer sv-inner and every declaration carries !important. Layered !important beats
   every unlayered !important of the legacy sheets (style.css, citadel.css, silver.css, page sheets, the
   in-body <style> blocks and style="" attributes) whatever their specificity. A declaration without the
   flag loses to all of them, so never write one.

   THE SPECIFICITY CONTRACT
   Every component selector here is  body.svp-inner :where(...)  = (0,1,1), pseudo-elements (0,1,2); only the
   tokens sit on :root, :lang(vi) and body.svp-inner--guide. So any page-sheet rule written as
   body.svp-inner--<page> .x  (0,2,1) beats the shared rule, and a page rule of equal weight wins because page
   sheets load later. Variants and states in this file win by source order. A page rule on .white-box also
   hits the masthead (.white-box.page-header-box): add :not(.page-header-box) or use a page class.

   NEVER (fx.js and page scripts own these)
   - opacity, transform, transition or animation on section, .white-box, .news-card, .class-panel, .kpi,
     .info-block: fx.js reveals them below the fold.
   - display, visibility, opacity or width on anything a script toggles ([hidden], details content,
     #item-table tbody, .has-active, the events banner states).
   - @keyframes on these properties: an !important property cannot be animated. Transitions only.

   CONTENTS
    0  Tokens                         7  Chips
    1  Page shell                     8  Stat tiles
    2  Breadcrumb                     9  Data table, scroller
    3  Masthead                      10  FAQ (dl and details)
    4  Panels                        11  Buttons, quiet action link
    5  Section heads and headings    12  Utilities
    6  Prose, .svp-duo               13  Touch and motion
   ========================================================================== */
@layer sv-inner {

/* --------------------------------------------------------------------------
   0. Tokens. Beside the skin's --sv-*: read those, never redefine them.
   -------------------------------------------------------------------------- */
:root {
  /* Spacing: 4 8 12 16 24 32 48 64 */
  --svp-1: 4px !important;
  --svp-2: 8px !important;
  --svp-3: 12px !important;
  --svp-4: 16px !important;
  --svp-5: 24px !important;
  --svp-6: 32px !important;
  --svp-7: 48px !important;
  --svp-8: 64px !important;
  /* Radius: panels, cards inside panels, controls (chips are 999px) */
  --svp-r: 14px !important;
  --svp-r-sm: 10px !important;
  --svp-r-ctl: 8px !important;
  /* Ink (all at 7:1 or better on the panel face, except --svp-ink-faint: labels only) */
  --svp-ink: #d0d7e3 !important;
  --svp-ink-strong: #f3f6fb !important;
  --svp-ink-muted: #a3adbf !important;
  --svp-ink-faint: #8e98aa !important;
  --svp-head: #eef2f8 !important;
  --svp-link: #9fd6ff !important;
  --svp-ice: #7cc8ff !important;
  --svp-ember: #ff8a2b !important;
  --svp-ember-ink: #ffb877 !important;
  --svp-good: #4ade80 !important;
  --svp-good-ink: #bbf7d0 !important;
  --svp-warn-ink: #ffd9a8 !important;
  --svp-kicker: #ffc98a !important;
  /* Lines: hairlines inside panels, stronger rules, the panel frame */
  --svp-line: rgba(195, 202, 216, 0.13) !important;
  --svp-line-2: rgba(214, 222, 236, 0.26) !important;
  --svp-frame: rgba(206, 214, 230, 0.17) !important;
  /* Surfaces: the panel face is lighter than the night sky so panels separate from it */
  --svp-face:
    linear-gradient(180deg, rgba(222, 230, 244, 0.04) 0, rgba(222, 230, 244, 0) 120px),
    linear-gradient(180deg, rgba(25, 33, 51, 0.95) 0, rgba(17, 24, 38, 0.95) 420px, rgba(14, 20, 32, 0.96) 100%) !important;
  --svp-face-solid: #141b2a !important;
  --svp-well: rgba(255, 255, 255, 0.028) !important;
  --svp-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(238, 242, 248, 0.06),
    0 24px 48px -28px rgba(0, 0, 0, 0.85) !important;
  /* Type: Cinzel through this token only (it swaps for Vietnamese below); --sv-font-body, --sv-font-ui */
  --svp-font-display: var(--sv-font-display) !important;
  --svp-measure: 30em !important;
  --svp-prose: 18px !important;
  --svp-prose-lh: 1.65 !important;
  /* Art */
  --svp-art: url("/assets/silver/brand/masthead-citadel.webp?v=8") !important;
  --svp-art-sm: url("/assets/silver/brand/masthead-citadel-sm.webp?v=8") !important;
  /* Marks, used as masks so they take currentColor */
  --svp-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1.6 1.2 6.4 6 1.6 10.8' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  --svp-chev-down: 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='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  --svp-diamond: polygon(50% 0, 100% 50%, 50% 100%, 0 50%) !important;
}
/* Cinzel has no Vietnamese marks: the display face becomes EB Garamond (as citadel does for --font-display) */
:lang(vi) {
  --svp-font-display: var(--sv-font-body) !important;
}
/* Guides read longer: the prose scale steps up (silver-inner-guide.css may tune it further) */
body.svp-inner--guide {
  --svp-prose: 20px !important;
  --svp-prose-lh: 1.7 !important;
}
@media (max-width: 760px) {
  :root {
    --svp-prose: 17px !important;
  }
  body.svp-inner--guide {
    --svp-prose: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   1. Page shell
   main > section.container: 24px under the fixed header (16px on phones) instead of the 32px inline
   margin plus 38px padding.
   One gap before the footer on every page: the last panel's 24px + 32px here + the footer's own margin
   (silver.css: clamp(3rem, 7vw, 5.5rem)) = 144px on desktop (128px at 1024); 16 + 24 + 48 = 88px on
   phones. main adds nothing (citadel gives main.guide-article-main 3rem), and a page sheet must not
   zero its last panel's margin.
   Anchors: silver.css already pads the scroll port by the header height + 14px (html scroll-padding-top),
   so targets carry no scroll margin (a margin adds to that padding). The zero also cancels citadel's
   guide h2/h3 margin. Keep this offset here, in one place; page sheets do not set one.
   -------------------------------------------------------------------------- */
body.svp-inner :where(main) {
  padding-bottom: 0 !important;
}
body.svp-inner :where(main > section.container) {
  margin-top: 0 !important;
  padding-top: 24px !important;
  padding-bottom: 32px !important;
}
body.svp-inner :where(main [id]) {
  scroll-margin-top: 0 !important;
}
@media (max-width: 760px) {
  body.svp-inner :where(main > section.container) {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }
}

/* --------------------------------------------------------------------------
   2. Breadcrumb
   nav.breadcrumb-nav[aria-label] > ol.breadcrumb > li (a) ... li[aria-current="page"]
   One separator (the "›"; citadel's ◆ is dropped), 13px Oswald, links muted, hover ice.
   Links get a 44px hit area through padding with matching negative margins (no layout change).
   -------------------------------------------------------------------------- */
body.svp-inner :where(.breadcrumb-nav) {
  width: auto !important;
  max-width: none !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !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.4 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}
body.svp-inner :where(.breadcrumb-nav .breadcrumb) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: none !important;
}
body.svp-inner :where(.breadcrumb-nav .breadcrumb > li) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--svp-ink-muted) !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  cursor: default !important;
}
body.svp-inner :where(.breadcrumb-nav .breadcrumb > li[aria-current="page"]) {
  color: var(--svp-ink) !important;
}
body.svp-inner :where(.breadcrumb-nav .breadcrumb > li + li)::before {
  content: none !important;
  display: none !important;
}
body.svp-inner :where(.breadcrumb-nav .breadcrumb > li:not(:last-child))::after {
  content: "\203A" !important;
  margin: 0 10px !important;
  color: var(--svp-ink-faint) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-shadow: none !important;
}
body.svp-inner :where(.breadcrumb-nav a) {
  margin: -12px 0 !important;
  padding: 12px 0 !important;
  border: 0 !important;
  color: var(--svp-ink-muted) !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-decoration: none !important;
  text-shadow: none !important;
  transition: color 0.18s ease !important;
}
body.svp-inner :where(.breadcrumb-nav a:hover, .breadcrumb-nav a:focus-visible) {
  color: var(--svp-ice) !important;
  text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   3. Masthead: the skin's .page-header-box family, re-tuned (one masthead for every inner page).
   div.white-box.page-header-box
     > div.page-header-copy
         > span.page-kicker            optional, ember label
         > h1.page-title               metal Cinzel, 40px, max 2 lines on desktop
         > p.page-subtitle             one-line lead (any <p> in the copy gets the lead style)
         > div.svp-mast-row            optional: .svp-chip (live facts) and/or .sv-btn (actions)
   Desktop: about 210-260px tall, art dimmed behind a stronger scrim so title and chips win.
   The side padding equals the panels' (32px, 24px on tablets, 18px on phones), so the copy starts on the
   same x as every heading, label and table below it.
   Phones (<= 760): the art is a 96px band (--svp-band) above the copy, the copy sits on plain night.
   Guides keep their own band (article::before, silver-inner-guide.css).
   -------------------------------------------------------------------------- */
body.svp-inner :where(.white-box.page-header-box) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 24px !important;
  box-sizing: border-box !important;
  min-height: 208px !important;
  margin: 0 0 24px !important;
  padding: 34px 32px !important;
  overflow: hidden !important;
  border: 1px solid rgba(214, 222, 236, 0.32) !important;
  border-radius: var(--svp-r) !important;
  background:
    var(--sv-corner) left 8px top 8px / 22px 22px no-repeat,
    var(--sv-corner-tr) right 8px top 8px / 22px 22px no-repeat,
    var(--sv-corner-bl) left 8px bottom 8px / 22px 22px no-repeat,
    var(--sv-corner-br) right 8px bottom 8px / 22px 22px no-repeat,
    linear-gradient(90deg, rgba(5, 7, 13, 0.96) 0%, rgba(5, 7, 13, 0.9) 32%, rgba(5, 7, 13, 0.62) 50%, rgba(5, 7, 13, 0.32) 68%, rgba(5, 7, 13, 0.2) 100%),
    linear-gradient(180deg, rgba(5, 7, 13, 0.34) 0%, rgba(5, 7, 13, 0) 40%, rgba(5, 7, 13, 0.6) 100%),
    radial-gradient(26% 70% at 88% 122%, rgba(255, 122, 47, 0.16), transparent 70%),
    var(--svp-art) right 34% / cover no-repeat,
    #05070d !important;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 28px 60px -32px rgba(0, 0, 0, 0.9),
    0 24px 48px -38px rgba(255, 122, 47, 0.45) !important;
}
/* The skin's hairlines: silver on top, ember at the foot (restated: citadel left a 1px border on it) */
body.svp-inner :where(.white-box.page-header-box)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: inherit !important;
  background:
    linear-gradient(90deg, transparent 6%, rgba(238, 242, 248, 0.5) 50%, transparent 94%) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 18%, rgba(255, 138, 43, 0.42) 50%, transparent 82%) bottom / 100% 1px no-repeat !important;
  box-shadow: none !important;
}
body.svp-inner :where(.white-box.page-header-box)::after {
  content: none !important;
}
body.svp-inner :where(.page-header-box > .page-header-copy) {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: min(62%, 780px) !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.svp-inner :where(.page-header-box .page-kicker) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 0 !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--svp-kicker) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85) !important;
}
body.svp-inner :where(.page-header-box .page-kicker)::before {
  content: "" !important;
  flex: none !important;
  width: 7px !important;
  height: 7px !important;
  background: var(--svp-ember) !important;
  clip-path: var(--svp-diamond) !important;
}
body.svp-inner :where(.page-header-box .page-title) {
  display: block !important;
  max-width: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: var(--sv-metal) left top / 100% 1.12em repeat-y !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-family: var(--svp-font-display) !important;
  font-size: clamp(29px, 1.6vw + 18px, 40px) !important;
  font-weight: 700 !important;
  line-height: 1.12 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  text-wrap: balance !important;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.9)) drop-shadow(0 0 22px rgba(124, 200, 255, 0.14)) !important;
}
/* Lead: p.page-subtitle, or any paragraph in the copy */
body.svp-inner :where(.page-header-box .page-header-copy > p) {
  max-width: 36em !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9) !important;
  text-wrap: pretty !important;
}
body.svp-inner :where(.page-header-box .page-header-copy > p a:not([class])) {
  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: 4px !important;
}
body.svp-inner :where(.page-header-box .page-header-copy > p a:not([class]):hover) {
  color: #ffffff !important;
  text-decoration-color: var(--svp-ice) !important;
}
/* Chips and actions under the lead */
body.svp-inner :where(.svp-mast-row) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px 12px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
}
body.svp-inner :where(.svp-mast-row + .svp-mast-row) {
  margin-top: 12px !important;
}
/* Tablets: the desktop card, copy capped before the castle */
@media (min-width: 761px) and (max-width: 1099px) {
  body.svp-inner :where(.white-box.page-header-box) {
    min-height: 196px !important;
    padding: 30px 24px !important; /* 30px: the kicker clears the 8 + 22px corner filigree */
  }
  body.svp-inner :where(.page-header-box > .page-header-copy) {
    max-width: min(74%, 620px) !important;
  }
  body.svp-inner :where(.page-header-box .page-header-copy > p) {
    font-size: 18px !important;
  }
}
/* Phones: the art is a band above the copy (moon, citadel and dragon whole), the copy on plain night */
@media (max-width: 760px) {
  /* The art is sized from the band (4.4 x its height, never narrower than the card) and pinned by
     pixels from the top: a percentage would be taken from the whole card and push it under the ground. */
  body.svp-inner :where(.white-box.page-header-box) {
    --svp-band: 96px !important;
    display: block !important;
    min-height: 0 !important;
    margin-bottom: 16px !important;
    padding: calc(var(--svp-band) + 6px) 18px 20px !important;
    background:
      var(--sv-corner) left 7px top 7px / 20px 20px no-repeat,
      var(--sv-corner-tr) right 7px top 7px / 20px 20px no-repeat,
      var(--sv-corner-bl) left 7px bottom 7px / 20px 20px no-repeat,
      var(--sv-corner-br) right 7px bottom 7px / 20px 20px no-repeat,
      linear-gradient(180deg, rgba(5, 7, 13, 0.28) 0, rgba(5, 7, 13, 0) 28px, rgba(5, 7, 13, 0.1) calc(var(--svp-band) - 46px), #0b1019 calc(var(--svp-band) + 2px)) 0 0 / 100% 100% no-repeat,
      linear-gradient(180deg, #0b1019 0, #0a0e17 100%) 0 var(--svp-band) / 100% 100% no-repeat,
      var(--svp-art-sm) right 0 top -16px / max(100%, calc(var(--svp-band) * 4.4)) auto no-repeat,
      #05070d !important;
    box-shadow:
      0 0 0 1px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      0 24px 44px -34px rgba(255, 122, 47, 0.4) !important;
  }
  body.svp-inner :where(.page-header-box > .page-header-copy) {
    max-width: none !important;
  }
  body.svp-inner :where(.page-header-box .page-kicker) {
    margin-bottom: 8px !important;
    letter-spacing: 0.12em !important;
  }
  body.svp-inner :where(.page-header-box .page-header-copy > p) {
    margin-top: 8px !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
  }
  body.svp-inner :where(.svp-mast-row) {
    gap: 8px !important;
    margin-top: 16px !important;
  }
  body.svp-inner :where(.svp-mast-row + .svp-mast-row) {
    margin-top: 10px !important;
  }
  body.svp-inner .page-header-box :where(.svp-mast-row > .sv-btn) {
    flex: 1 1 auto !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    letter-spacing: 0.08em !important;
  }
}

/* --------------------------------------------------------------------------
   4. Panels
   Every .white-box except the masthead: one frame per section, 24px apart. Inside a panel use hairlines
   and wells (.svp-stat, .svp-qa), never another framed box. Opacity, transform and transition stay fx.js's.
   -------------------------------------------------------------------------- */
body.svp-inner :where(.white-box:not(.page-header-box)) {
  box-sizing: border-box !important;
  margin: 0 0 24px !important;
  padding: 32px !important;
  border: 1px solid var(--svp-frame) !important;
  border-radius: var(--svp-r) !important;
  background: var(--svp-face) !important;
  box-shadow: var(--svp-shadow) !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}
body.svp-inner :where(.white-box:not(.page-header-box) > :last-child) {
  margin-bottom: 0 !important;
}
/* Blocks align on the panel's left edge (silver.css centred them in a 44rem column inside long-form panels) */
body.svp-inner :where(.white-box:not(.page-header-box) > :is(p, ul, ol, dl, h2, h3, h4, blockquote, table, figure, .table-wrap, .responsive-table)) {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (min-width: 761px) and (max-width: 1099px) {
  body.svp-inner :where(.white-box:not(.page-header-box)) {
    padding: 24px !important;
  }
}
@media (max-width: 760px) {
  body.svp-inner :where(.white-box:not(.page-header-box)) {
    margin-bottom: 16px !important;
    padding: 18px !important;
  }
}

/* --------------------------------------------------------------------------
   5. Section heads and headings
   div.svp-head [.svp-head--rule adds a hairline under it]
     > div.svp-head__main > p.svp-kicker? + h2.svp-h2 + p.svp-head__note?
     > div.svp-head__aside?              right side: counts, a .svp-link-action, small controls
   A bare .white-box > h2 (legacy markup) gets the .svp-h2 look. h3: .svp-h3 or any unclassed h3 in a panel.
   -------------------------------------------------------------------------- */
body.svp-inner :where(.svp-head) {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 12px 24px !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
}
body.svp-inner :where(.svp-head--rule) {
  padding-bottom: 16px !important;
  border-bottom: 1px solid var(--svp-line) !important;
}
body.svp-inner :where(.svp-head__main) {
  flex: 1 1 380px !important;
  min-width: 0 !important;
  margin: 0 !important;
}
body.svp-inner :where(.svp-head__aside) {
  display: flex !important;
  flex: 0 1 auto !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px 16px !important;
  min-width: 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: 1.4 !important;
  letter-spacing: 0.04em !important;
}
body.svp-inner :where(.svp-kicker) {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: var(--svp-kicker) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}
body.svp-inner :where(.svp-kicker)::before {
  content: "" !important;
  flex: none !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--svp-ember) !important;
  clip-path: var(--svp-diamond) !important;
}
/* H2: Cinzel 700, solid silver (never the clipped metal), sentence case */
body.svp-inner :where(.svp-h2, .white-box:not(.page-header-box) > h2:not(.page-title), .svp-prose > h2:not([class])) {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  color: var(--svp-head) !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--svp-font-display) !important;
  font-size: clamp(22px, 1vw + 16px, 26px) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  text-align: left !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-wrap: balance !important;
  filter: none !important;
}
body.svp-inner :where(.svp-h2, .white-box:not(.page-header-box) > h2:not(.page-title), .svp-prose > h2:not([class]))::before,
body.svp-inner :where(.svp-h2, .white-box:not(.page-header-box) > h2:not(.page-title), .svp-prose > h2:not([class]))::after {
  content: none !important;
}
body.svp-inner :where(.white-box:not(.page-header-box) > h2:not(.page-title), .svp-prose > h2:not([class])) {
  margin: 0 0 16px !important;
}
body.svp-inner :where(.white-box:not(.page-header-box) > * + h2:not(.page-title), .svp-prose > * + h2:not([class])) {
  margin-top: 44px !important;
}
body.svp-inner :where(.svp-head__note) {
  max-width: var(--svp-measure) !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
}
/* H3: EB Garamond 600, no caps */
body.svp-inner :where(.svp-h3, .white-box:not(.page-header-box) h3:not([class])) {
  max-width: none !important;
  margin: 28px 0 8px !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: 21px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-transform: none !important;
  text-shadow: none !important;
  filter: none !important;
}
body.svp-inner :where(.svp-h3:first-child, .white-box:not(.page-header-box) h3:not([class]):first-child) {
  margin-top: 0 !important;
}
@media (max-width: 760px) {
  body.svp-inner :where(.svp-head) {
    margin-bottom: 16px !important;
  }
  body.svp-inner :where(.white-box:not(.page-header-box) > * + h2:not(.page-title)) {
    margin-top: 36px !important;
  }
  body.svp-inner :where(.svp-head__note) {
    font-size: 16px !important;
  }
  body.svp-inner :where(.svp-h3, .white-box:not(.page-header-box) h3:not([class])) {
    font-size: 19px !important;
  }
}

/* --------------------------------------------------------------------------
   6. Prose
   .svp-prose wraps running text; unclassed p, ul and ol directly inside a panel read the same.
   Size from --svp-prose (18px, guides 20px, phones 17/18px), measure 30em (about 75 characters).
   .svp-lead: the one-paragraph intro under a section head.
   .svp-duo (>= 1100px): two blocks side by side (each child is one column), one column below.
   .svp-duo--flow: the children flow through two newspaper columns instead (break-inside avoided).
   -------------------------------------------------------------------------- */
body.svp-inner :where(.svp-prose) {
  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;
}
body.svp-inner :where(.svp-prose :is(p, ul, ol), .white-box:not(.page-header-box) > :is(p, ul, ol):not([class])) {
  max-width: var(--svp-measure) !important;
  margin: 0 0 1em !important;
  padding: 0 !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: var(--svp-prose) !important;
  font-weight: 400 !important;
  line-height: var(--svp-prose-lh) !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}
body.svp-inner :where(.svp-prose :is(p, ul, ol):last-child) {
  margin-bottom: 0 !important;
}
body.svp-inner :where(.svp-prose :is(ul, ol), .white-box:not(.page-header-box) > :is(ul, ol):not([class])) {
  list-style: none !important;
}
body.svp-inner :where(.svp-prose li, .white-box:not(.page-header-box) > :is(ul, ol):not([class]) > li) {
  position: relative !important;
  max-width: none !important;
  margin: 0 0 0.35em !important;
  padding: 0 0 0 1.25em !important;
  color: inherit !important;
  font: inherit !important;
}
body.svp-inner :where(.svp-prose ul > li, .white-box:not(.page-header-box) > ul:not([class]) > li)::before {
  content: "" !important;
  position: absolute !important;
  left: 0.15em !important;
  top: calc(var(--svp-prose-lh) * 0.5em - 3px) !important;
  width: 6px !important;
  height: 6px !important;
  background: var(--svp-ice) !important;
  clip-path: var(--svp-diamond) !important;
  opacity: 0.9 !important;
}
body.svp-inner :where(.svp-prose ol, .white-box:not(.page-header-box) > ol:not([class])) {
  counter-reset: svp-ol !important;
}
body.svp-inner :where(.svp-prose ol > li, .white-box:not(.page-header-box) > ol:not([class]) > li) {
  counter-increment: svp-ol !important;
  padding-left: 1.6em !important;
}
body.svp-inner :where(.svp-prose ol > li, .white-box:not(.page-header-box) > ol:not([class]) > li)::before {
  content: counter(svp-ol) "." !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  min-width: 1.2em !important;
  color: var(--svp-ice) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 0.82em !important;
  font-weight: 500 !important;
  line-height: calc(var(--svp-prose-lh) / 0.82) !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: tabular-nums !important;
}
/* Links, emphasis, code inside running text (panels, mastheads excluded) */
body.svp-inner :where(.svp-prose a:not([class]), .white-box:not(.page-header-box) :is(p, li, dd, td) a:not([class])) {
  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;
  transition: color 0.18s ease, text-decoration-color 0.18s ease !important;
}
body.svp-inner :where(.svp-prose a:not([class]):hover, .white-box:not(.page-header-box) :is(p, li, dd, td) a:not([class]):hover) {
  color: #ffffff !important;
  text-decoration-color: var(--svp-ice) !important;
}
body.svp-inner :where(.svp-prose :is(strong, b), .white-box:not(.page-header-box) > :is(p, ul, ol):not([class]) :is(strong, b)) {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
/* No italic face is loaded: emphasis is upright and brighter, never a synthetic slant */
body.svp-inner :where(main em) {
  color: var(--svp-ink-strong) !important;
  font-style: normal !important;
  font-synthesis-style: none !important;
}
body.svp-inner :where(.svp-prose code, .white-box:not(.page-header-box) :is(p, li, dd, td) 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;
  overflow-wrap: anywhere !important;
  -webkit-box-decoration-break: clone !important;
  box-decoration-break: clone !important;
}
body.svp-inner :where(.svp-lead) {
  max-width: var(--svp-measure) !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 19px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}
/* Two columns from 1100px. font-size makes 30em the prose measure, so two columns plus the gap = 60em + 48px. */
body.svp-inner :where(.svp-duo) {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--svp-prose) !important;
}
body.svp-inner :where(.svp-duo > *) {
  min-width: 0 !important;
}
body.svp-inner :where(.svp-duo > * + *) {
  margin-top: 1em !important;
}
@media (min-width: 1100px) {
  body.svp-inner :where(.svp-duo) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 48px !important;
    row-gap: 24px !important;
    align-items: start !important;
    max-width: calc(60em + 48px) !important;
  }
  body.svp-inner :where(.svp-duo > * + *) {
    margin-top: 0 !important;
  }
  body.svp-inner :where(.svp-duo--flow) {
    display: block !important;
    columns: 2 !important;
    column-gap: 48px !important;
  }
  body.svp-inner :where(.svp-duo--flow > *) {
    break-inside: avoid !important;
  }
  body.svp-inner :where(.svp-duo--flow > * + *) {
    margin-top: 0 !important;
  }
}
@media (max-width: 760px) {
  body.svp-inner :where(.svp-lead) {
    font-size: 17px !important;
    line-height: 1.5 !important;
  }
}

/* --------------------------------------------------------------------------
   7. Chips: one short fact each (a count, a state, a time).
   span.svp-chip [--good live/open | --ice info/count | --ember soon/attention | --warn caution | --quiet meta]
     > span.svp-chip__dot?  + text, numbers in <b>
   a.svp-chip is a filter or link chip: ice ring on hover; [aria-current] or [aria-pressed="true"] = selected.
   -------------------------------------------------------------------------- */
/* inline-block, not inline-flex: in a flex box every text run becomes its own item and the
   space in "<b>7,303</b> items" collapses into the gap */
body.svp-inner :where(.svp-chip) {
  display: inline-block !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 6px 13px !important;
  border: 1px solid var(--svp-line-2) !important;
  border-radius: 999px !important;
  background: rgba(8, 12, 20, 0.64) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  color: var(--svp-ink) !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;
  font-variant-numeric: lining-nums tabular-nums !important;
  text-align: left !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease !important;
}
body.svp-inner :where(.svp-chip :is(b, strong)) {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
body.svp-inner :where(.svp-chip__dot) {
  display: inline-block !important;
  position: relative !important;
  top: -1px !important;
  width: 8px !important;
  height: 8px !important;
  margin: 0 8px 0 0 !important;
  border-radius: 50% !important;
  background: currentColor !important;
  vertical-align: middle !important;
}
body.svp-inner :where(.svp-chip--good) {
  border-color: rgba(74, 222, 128, 0.45) !important;
  background: rgba(9, 44, 27, 0.6) !important;
  color: var(--svp-good-ink) !important;
}
body.svp-inner :where(.svp-chip--good .svp-chip__dot) {
  background: var(--svp-good) !important;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18), 0 0 10px rgba(74, 222, 128, 0.7) !important;
}
body.svp-inner :where(.svp-chip--ice) {
  border-color: rgba(124, 200, 255, 0.45) !important;
  background: rgba(9, 32, 56, 0.6) !important;
  color: #d4ecff !important;
}
body.svp-inner :where(.svp-chip--ice .svp-chip__dot) {
  background: var(--svp-ice) !important;
  box-shadow: 0 0 8px rgba(124, 200, 255, 0.6) !important;
}
body.svp-inner :where(.svp-chip--ember) {
  border-color: rgba(255, 160, 92, 0.5) !important;
  background: rgba(66, 24, 8, 0.62) !important;
  color: var(--svp-ember-ink) !important;
}
body.svp-inner :where(.svp-chip--ember .svp-chip__dot) {
  background: var(--svp-ember) !important;
  box-shadow: 0 0 8px rgba(255, 138, 43, 0.7) !important;
}
body.svp-inner :where(.svp-chip--warn) {
  border-color: rgba(255, 200, 120, 0.45) !important;
  background: rgba(60, 40, 8, 0.6) !important;
  color: var(--svp-warn-ink) !important;
}
body.svp-inner :where(.svp-chip--warn .svp-chip__dot) {
  background: #ffb25a !important;
}
body.svp-inner :where(.svp-chip--quiet) {
  border-color: var(--svp-line) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  box-shadow: none !important;
  color: var(--svp-ink-muted) !important;
}
body.svp-inner :where(a.svp-chip) {
  cursor: pointer !important;
}
body.svp-inner :where(a.svp-chip:hover, a.svp-chip: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 :where(.svp-chip[aria-current]:not([aria-current="false"]), .svp-chip[aria-pressed="true"]) {
  border-color: rgba(124, 200, 255, 0.85) !important;
  background: rgba(124, 200, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(124, 200, 255, 0.25) !important;
  color: #ffffff !important;
}

/* --------------------------------------------------------------------------
   8. Stat tiles: the key facts of a page, one per tile.
   div.svp-stats > (div|a|li).svp-stat > span.svp-stat__k (label) + span.svp-stat__v (value) + span.svp-stat__s? (sub line)
   Value face: Cinzel (words, short names); add .svp-num for counts and times (Oswald, tabular).
   Word values size to their tile (23px, down to 20px in a narrow tile such as six across at 1440px), so
   "Blood Castle" or "Testing phase" keep one line. The tile is a size container for that: it needs a
   sized track (the .svp-stats grid or a page's grid-template-columns) and must never be shrink-to-fit
   (no inline-block, float or flex: 0 0 auto tile), or it collapses to its padding.
   a.svp-stat: whole tile is the link, a chevron in the corner, ice ring on hover. ul.svp-stats works too.
   -------------------------------------------------------------------------- */
body.svp-inner :where(.svp-stats) {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
body.svp-inner :where(.svp-stat) {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
  container-type: inline-size !important;
  margin: 0 !important;
  padding: 16px 18px 17px !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;
  color: var(--svp-ink) !important;
  text-align: left !important;
  text-decoration: none !important;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
}
body.svp-inner :where(li.svp-stat)::before {
  content: none !important;
}
body.svp-inner :where(.svp-stat__k) {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}
body.svp-inner :where(.svp-stat__v) {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--svp-ink-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
  font-family: var(--svp-font-display) !important;
  font-size: 23px !important; /* without container units */
  font-size: clamp(20px, 12.5cqi, 23px) !important; /* 12.5% of the tile's content width */
  font-weight: 700 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
  text-transform: none !important;
  overflow-wrap: break-word !important;
  text-wrap: balance !important;
}
body.svp-inner :where(.svp-stat__v.svp-num) {
  font-family: var(--sv-font-ui) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-align: left !important;
}
body.svp-inner :where(.svp-stat__v .svp-chip) {
  margin-top: 2px !important;
}
body.svp-inner :where(.svp-stat__s) {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
body.svp-inner :where(a.svp-stat) {
  cursor: pointer !important;
}
body.svp-inner :where(a.svp-stat)::after {
  content: "" !important;
  position: absolute !important;
  top: 18px !important;
  right: 16px !important;
  width: 7px !important;
  height: 11px !important;
  background: var(--svp-ice) !important;
  -webkit-mask: var(--svp-chev) center / contain no-repeat !important;
  mask: var(--svp-chev) center / contain no-repeat !important;
  opacity: 0.75 !important;
  transition: transform 0.18s ease, opacity 0.18s ease !important;
}
body.svp-inner :where(a.svp-stat .svp-stat__k) {
  padding-right: 18px !important;
}
body.svp-inner :where(a.svp-stat:hover, a.svp-stat:focus-visible) {
  border-color: rgba(124, 200, 255, 0.55) !important;
  background: rgba(124, 200, 255, 0.045) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 1px rgba(124, 200, 255, 0.2), 0 0 26px -10px rgba(124, 200, 255, 0.55) !important;
}
body.svp-inner :where(a.svp-stat:hover, a.svp-stat:focus-visible)::after {
  opacity: 1 !important;
  transform: translateX(2px) !important;
}
body.svp-inner :where(a.svp-stat:hover .svp-stat__v) {
  color: #ffffff !important;
}
@media (max-width: 760px) {
  body.svp-inner :where(.svp-stats) {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
    gap: 10px !important;
  }
  body.svp-inner :where(.svp-stat) {
    padding: 14px 14px 15px !important;
  }
  body.svp-inner :where(.svp-stat__v) {
    font-size: 20px !important;
  }
  body.svp-inner :where(.svp-stat__v.svp-num) {
    font-size: 22px !important;
  }
  body.svp-inner :where(.svp-stat__s) {
    font-size: 15px !important;
  }
}

/* --------------------------------------------------------------------------
   9. Data table
   table.svp-table > thead th (labels) / tbody (th[scope=row] = the row's name, td = data)
   Numbers: th.svp-num and td.svp-num (right-aligned, tabular). No zebra, hairline rows, ice hover tint.
   table.svp-table--sticky: the head sticks under the fixed header (no ancestor may scroll: use it on a
   table that is not inside .svp-scroller, .table-wrap, .responsive-table or any overflow:auto/hidden box).
   div.svp-scroller: a horizontal scroller with ice edge cues when content hides left or right.
   -------------------------------------------------------------------------- */
body.svp-inner :where(table.svp-table) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: none !important;
  box-shadow: 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.45 !important;
  font-variant-numeric: lining-nums !important;
}
body.svp-inner :where(.svp-table caption) {
  caption-side: top !important;
  margin: 0 !important;
  padding: 0 0 12px !important;
  color: var(--svp-ink-muted) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  text-align: left !important;
}
body.svp-inner :where(.svp-table thead th, .svp-table thead td) {
  padding: 11px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--svp-line-2) !important;
  border-radius: 0 !important;
  background: rgba(255, 255, 255, 0.035) !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.06em !important;
  text-align: left !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  vertical-align: bottom !important;
  white-space: nowrap !important;
}
body.svp-inner :where(.svp-table thead tr > :first-child) {
  border-top-left-radius: var(--svp-r-ctl) !important;
}
body.svp-inner :where(.svp-table thead tr > :last-child) {
  border-top-right-radius: var(--svp-r-ctl) !important;
}
body.svp-inner :where(.svp-table tbody td, .svp-table tbody th, .svp-table tfoot td, .svp-table tfoot th) {
  padding: 13px 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-body) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1.45 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: none !important;
  text-transform: none !important;
  vertical-align: middle !important;
  white-space: normal !important;
}
/* The row's name (th[scope=row]) reads as a name, not as a column label */
body.svp-inner :where(.svp-table tbody th) {
  color: var(--svp-ink-strong) !important;
  font-weight: 600 !important;
}
body.svp-inner :where(.svp-table tbody tr:last-child > *) {
  border-bottom: 0 !important;
}
body.svp-inner :where(.svp-table tbody tr:hover > *) {
  background: rgba(124, 200, 255, 0.05) !important;
}
body.svp-inner :where(.svp-table .svp-num) {
  text-align: right !important;
  white-space: nowrap !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
body.svp-inner :where(.svp-table tbody .svp-num, .svp-table tfoot .svp-num) {
  color: var(--svp-ink-strong) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
}
body.svp-inner :where(.svp-table a:not([class])) {
  color: var(--svp-link) !important;
  text-decoration: none !important;
}
/* A row-name link reads as the name, as /items and /events ship it (white on hover, ice underline).
   It stays before the hover rule, which wins by source order. */
body.svp-inner :where(.svp-table tbody th a:not([class])) {
  color: var(--svp-ink-strong) !important;
}
body.svp-inner :where(.svp-table a:not([class]):hover) {
  color: #ffffff !important;
  text-decoration: underline !important;
  text-decoration-color: var(--svp-ice) !important;
  text-underline-offset: 3px !important;
}
body.svp-inner :where(table.svp-table--sticky thead th) {
  position: sticky !important;
  top: var(--site-header-offset, 78px) !important;
  z-index: 3 !important;
  background: linear-gradient(rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.035)), var(--svp-face-solid) !important;
}
body.svp-inner :where(.svp-scroller) {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  border: 0 !important;
  border-radius: var(--svp-r-ctl) !important;
  background:
    linear-gradient(90deg, var(--svp-face-solid) 30%, rgba(20, 27, 42, 0)) left center / 44px 100% no-repeat local,
    linear-gradient(270deg, var(--svp-face-solid) 30%, rgba(20, 27, 42, 0)) right center / 44px 100% no-repeat local,
    linear-gradient(90deg, rgba(124, 200, 255, 0.3), rgba(124, 200, 255, 0)) left center / 16px 100% no-repeat scroll,
    linear-gradient(270deg, rgba(124, 200, 255, 0.3), rgba(124, 200, 255, 0)) right center / 16px 100% no-repeat scroll !important;
  box-shadow: none !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(124, 200, 255, 0.4) transparent !important;
}
/* In a scroller the table reads sideways: cells keep one line, the table takes the width it needs */
body.svp-inner :where(.svp-scroller > table.svp-table) {
  width: max-content !important;
  min-width: 100% !important;
}
body.svp-inner :where(.svp-scroller > table.svp-table :is(td, th)) {
  white-space: nowrap !important;
}
@media (max-width: 760px) {
  body.svp-inner :where(.svp-table thead th, .svp-table thead td) {
    padding: 10px 12px !important;
  }
  body.svp-inner :where(.svp-table tbody td, .svp-table tbody th, .svp-table tfoot td, .svp-table tfoot th) {
    padding: 12px !important;
    font-size: 16px !important;
  }
  body.svp-inner :where(.svp-table tbody .svp-num, .svp-table tfoot .svp-num) {
    font-size: 15px !important;
  }
}

/* --------------------------------------------------------------------------
   10. FAQ: always-visible Q&A cards, two columns from 1100px.
   dl.svp-faq  > div.svp-qa > dt + dd                         (a <div> around each pair is valid in <dl>)
   div.svp-faq > div.svp-qa > (h3|p).svp-qa__q + (p|div).svp-qa__a
   div.svp-faq > details.svp-qa[open?] > summary.svp-qa__q + (p|div)   (disclosure: chevron, open state ringed)
   The text must stay identical to the FAQPage JSON-LD; only the wrappers are new.
   -------------------------------------------------------------------------- */
body.svp-inner :where(.svp-faq) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  list-style: none !important;
}
/* Always-visible cards share a row height; disclosures keep their own (a closed card never stretches) */
body.svp-inner :where(.svp-faq:has(> details)) {
  align-items: start !important;
}
body.svp-inner :where(.svp-qa) {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 20px 24px 22px !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 :where(.svp-qa > dt, .svp-qa__q) {
  display: block !important;
  max-width: none !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--svp-ink-strong) !important;
  -webkit-text-fill-color: currentColor !important;
  font-family: var(--sv-font-body) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: none !important;
  text-transform: none !important;
  filter: none !important;
}
body.svp-inner :where(.svp-qa > dt, .svp-qa__q)::before,
body.svp-inner :where(.svp-qa > dt, .svp-qa__q)::after {
  content: none !important;
}
body.svp-inner :where(.svp-qa > dd, .svp-qa__a) {
  max-width: var(--svp-measure) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: var(--svp-ink) !important;
  font-family: var(--sv-font-body) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
}
body.svp-inner :where(.svp-qa__a > p) {
  max-width: none !important;
  margin: 0 0 0.6em !important;
  font: inherit !important;
  color: inherit !important;
}
body.svp-inner :where(.svp-qa__a > p:last-child) {
  margin-bottom: 0 !important;
}
body.svp-inner :where(.svp-qa :is(dd, .svp-qa__a) a:not([class])) {
  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;
}
/* <details>: the summary is the question row; the answer gets the card padding */
body.svp-inner :where(details.svp-qa) {
  padding: 0 !important;
  transition: border-color 0.18s ease !important;
}
body.svp-inner :where(details.svp-qa > summary) {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  margin: 0 !important;
  padding: 18px 22px !important;
  list-style: none !important;
  cursor: pointer !important;
  border-radius: var(--svp-r-sm) !important;
}
body.svp-inner :where(details.svp-qa > summary)::-webkit-details-marker {
  display: none !important;
}
body.svp-inner :where(details.svp-qa > summary)::after {
  content: "" !important;
  flex: none !important;
  width: 12px !important;
  height: 8px !important;
  margin-top: 0.6em !important;
  background: var(--svp-ice) !important;
  -webkit-mask: var(--svp-chev-down) center / contain no-repeat !important;
  mask: var(--svp-chev-down) center / contain no-repeat !important;
  transition: transform 0.2s ease !important;
}
body.svp-inner :where(details.svp-qa > summary:hover) {
  color: #ffffff !important;
}
body.svp-inner :where(details.svp-qa[open]) {
  border-color: rgba(124, 200, 255, 0.32) !important;
  background: rgba(124, 200, 255, 0.03) !important;
}
body.svp-inner :where(details.svp-qa[open] > summary)::after {
  transform: rotate(180deg) !important;
}
body.svp-inner :where(details.svp-qa > :not(summary)) {
  margin: -4px 0 0 !important;
  padding: 0 22px 20px !important;
}
@media (min-width: 1100px) {
  body.svp-inner :where(.svp-faq) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}
@media (max-width: 760px) {
  body.svp-inner :where(.svp-qa) {
    padding: 16px 16px 18px !important;
  }
  body.svp-inner :where(.svp-qa > dt, .svp-qa__q) {
    font-size: 19px !important;
  }
  body.svp-inner :where(.svp-qa > dd, .svp-qa__a) {
    font-size: 17px !important;
  }
  body.svp-inner :where(details.svp-qa) {
    padding: 0 !important;
  }
  body.svp-inner :where(details.svp-qa > summary) {
    padding: 16px !important;
  }
  body.svp-inner :where(details.svp-qa > :not(summary)) {
    padding: 0 16px 18px !important;
  }
}

/* --------------------------------------------------------------------------
   11. Buttons and the quiet action link
   a.sv-btn (+ --fire for the ONE primary action of a view, --steel, --sm): the skin's buttons, given the
   control radius and calmer tracking inside main. a.svp-link-action: a quiet text action with a chevron
   ("All guides", "Full schedule").
   -------------------------------------------------------------------------- */
body.svp-inner :where(main .sv-btn) {
  border-radius: var(--svp-r-ctl) !important;
  font-size: 14px !important;
  letter-spacing: 0.12em !important;
}
body.svp-inner :where(main .sv-btn--sm) {
  min-height: 40px !important;
  font-size: 13px !important;
  letter-spacing: 0.1em !important;
}
body.svp-inner :where(.svp-link-action) {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: none !important;
  color: var(--svp-ice) !important;
  font-family: var(--sv-font-ui) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
  letter-spacing: 0.08em !important;
  text-decoration: none !important;
  text-shadow: none !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: color 0.18s ease !important;
}
body.svp-inner :where(.svp-link-action)::after {
  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;
  transition: transform 0.18s ease !important;
}
body.svp-inner :where(.svp-link-action:hover, .svp-link-action:focus-visible) {
  color: #ffffff !important;
  text-decoration: none !important;
}
body.svp-inner :where(.svp-link-action:hover, .svp-link-action:focus-visible)::after {
  transform: translateX(3px) !important;
}

/* --------------------------------------------------------------------------
   12. Utilities
   .svp-num   numbers: Oswald 500, tabular (right-aligned inside .svp-table)
   .svp-meta  dates, counts, small print: Oswald 400 14px, muted
   .svp-sr    visually hidden, still read by screen readers
   -------------------------------------------------------------------------- */
body.svp-inner :where(.svp-num) {
  font-family: var(--sv-font-ui) !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  font-variant-numeric: lining-nums tabular-nums !important;
}
body.svp-inner :where(.svp-meta) {
  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;
  text-transform: none !important;
}
body.svp-inner :where(p.svp-meta) {
  max-width: none !important;
  margin: 12px 0 0 !important;
}
body.svp-inner :where(.svp-sr) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   13. Touch and motion
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  body.svp-inner :where(a.svp-chip) {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  body.svp-inner :where(.svp-link-action) {
    min-height: 44px !important;
  }
  body.svp-inner :where(details.svp-qa > summary) {
    min-height: 44px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.svp-inner :where(.breadcrumb-nav a, .svp-chip, .svp-stat, .svp-link-action, details.svp-qa, .svp-prose a, .white-box a),
  body.svp-inner :where(a.svp-stat, .svp-link-action, details.svp-qa > summary)::after {
    transition: none !important;
  }
}

}