/* TBE Vault true responsive fit.
   Goal: no whole-page scrolling on desktop. The dino list scrolls inside the vault. */

html,
body.vault-page-body {
  overflow-x: hidden !important;
}

body.vault-page-body {
  overflow-y: hidden !important;
}

/* The Vault page becomes one screen-tall app view. */
body.vault-page-body .vault-page {
  height: 100svh !important;
  min-height: 100svh !important;
  overflow: hidden !important;
}

/* Main content stacks: header, title, panel. */
body.vault-page-body .vault-page > .relative.z-10 {
  height: 100svh !important;
  min-height: 0 !important;
  box-sizing: border-box !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;

  overflow: hidden !important;
  padding-top: clamp(10px, 1.4vh, 18px) !important;
  padding-bottom: clamp(8px, 1.2vh, 16px) !important;
  padding-left: clamp(10px, 2vw, 28px) !important;
  padding-right: clamp(10px, 2vw, 28px) !important;
}

/* Header stays in normal flow and centered. */
body.vault-page-body header {
  flex: 0 0 auto !important;
  position: sticky !important;
  top: clamp(8px, 1.4vh, 16px) !important;
  width: min(1500px, calc(100vw - clamp(24px, 4vw, 48px))) !important;
  max-width: calc(100vw - 24px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  z-index: 9999 !important;
}

/* Vault shell uses the remaining height. */
body.vault-page-body .vault-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  width: min(68rem, calc(100vw - clamp(20px, 7vw, 180px))) !important;
  margin-top: clamp(8px, 1.5vh, 18px) !important;
}

/* Title block should shrink naturally. */
body.vault-page-body .vault-shell > div:first-child {
  flex: 0 0 auto !important;
  margin-bottom: clamp(6px, 1vh, 12px) !important;
}

body.vault-page-body .vault-shell > div:first-child p:first-child {
  font-size: clamp(7px, 0.8vw, 10px) !important;
  line-height: 1 !important;
  margin-bottom: 2px !important;
}

body.vault-page-body .vault-shell > div:first-child h1 {
  font-size: clamp(1.8rem, 4.2vw, 3.2rem) !important;
  line-height: 0.95 !important;
  letter-spacing: clamp(3px, 0.65vw, 9px) !important;
}

body.vault-page-body .vault-shell > div:first-child p:last-child {
  font-size: clamp(8px, 0.8vw, 11px) !important;
  line-height: 1 !important;
  margin-top: clamp(4px, 0.6vh, 8px) !important;
}

/* Panel fills remaining shell height. */
body.vault-page-body .vault-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;

  display: flex !important;
  flex-direction: column !important;

  overflow: hidden !important;
  padding: clamp(10px, 1.2vw, 16px) !important;
}

/* Panel top rows stay fixed size. */
body.vault-page-body .vault-panel > div:first-child,
body.vault-page-body .vault-how-strip,
body.vault-page-body .vault-simple-help,
body.vault-page-body .vault-bloodline-divider {
  flex: 0 0 auto !important;
}

/* Top header inside panel. */
body.vault-page-body .vault-panel > div:first-child {
  margin-bottom: clamp(6px, 0.9vh, 10px) !important;
  padding-bottom: clamp(6px, 0.9vh, 10px) !important;
}

body.vault-page-body .vault-panel h2 {
  font-size: clamp(1.2rem, 1.7vw, 1.45rem) !important;
  line-height: 1.05 !important;
}

body.vault-page-body .vault-panel > div:first-child p:last-child {
  font-size: clamp(10px, 0.85vw, 12px) !important;
}

/* Step row. */
body.vault-page-body .vault-how-strip {
  gap: clamp(6px, 0.8vw, 10px) !important;
  margin-bottom: clamp(5px, 0.8vh, 9px) !important;
}

body.vault-page-body .vault-how-strip > div {
  min-height: clamp(28px, 3.8vh, 38px) !important;
  padding: clamp(4px, 0.7vw, 8px) clamp(8px, 1vw, 12px) !important;
}

body.vault-page-body .vault-how-strip p {
  font-size: clamp(10px, 0.85vw, 12px) !important;
}

/* Divider/helper should not eat height. */
body.vault-page-body .vault-bloodline-divider {
  min-height: clamp(14px, 1.8vh, 22px) !important;
  margin-top: clamp(3px, 0.5vh, 6px) !important;
  margin-bottom: clamp(4px, 0.7vh, 8px) !important;
}

body.vault-page-body .vault-simple-help {
  margin: clamp(4px, 0.7vh, 8px) 0 !important;
  padding: clamp(5px, 0.7vh, 8px) clamp(8px, 1vw, 12px) !important;
}

/* THIS is the important part:
   The saved dino list uses all leftover space and becomes the only scroller. */
body.vault-page-body .vault-dino-list {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  padding: clamp(8px, 1vh, 12px) 10px clamp(10px, 1.2vh, 16px) 0 !important;
  margin-top: 0 !important;

  scrollbar-gutter: stable !important;
  mask-image: none !important;
  -webkit-mask-image: none !important;
}

/* Dino cards fit inside that scroller. */
body.vault-page-body .vault-dino-list > section {
  padding: clamp(12px, 1.2vw, 18px) clamp(13px, 1.4vw, 20px) !important;
  margin-bottom: clamp(12px, 1.4vh, 18px) !important;
  min-height: auto !important;
  overflow: visible !important;
}

/* Text scales a little but never becomes microscopic. */
body.vault-page-body .vault-dino-list h3,
body.vault-page-body .vault-dino-name {
  font-size: clamp(1.15rem, 1.55vw, 1.35rem) !important;
}

body.vault-page-body .vault-dino-list > section p {
  font-size: clamp(11px, 0.85vw, 12px) !important;
}

/* Stat row adapts. */
body.vault-page-body .vault-dino-list > section .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(6px, 0.8vw, 10px) !important;
  margin: clamp(6px, 0.9vh, 10px) 0 clamp(8px, 1vh, 12px) !important;
}

body.vault-page-body .vault-dino-list > section .grid > div {
  min-height: clamp(28px, 3.4vh, 34px) !important;
  padding: clamp(5px, 0.7vw, 8px) clamp(8px, 1vw, 11px) !important;
}

/* Mutations stay visible and readable. */
body.vault-page-body .vault-dino-list > section span.rounded-full {
  min-height: clamp(28px, 3.6vh, 31px) !important;
  padding: clamp(6px, 0.8vw, 8px) clamp(10px, 1vw, 14px) !important;
  font-size: clamp(11px, 0.9vw, 13px) !important;
}

body.vault-page-body .vault-dino-list > section [class*="flex"][class*="wrap"] {
  gap: clamp(7px, 0.9vw, 10px) !important;
  padding-bottom: clamp(4px, 0.8vh, 8px) !important;
}

/* Progress line does not dominate. */
body.vault-page-body .vault-panel .h-2\.5 {
  height: clamp(3px, 0.45vh, 5px) !important;
  margin-bottom: clamp(8px, 1vh, 12px) !important;
}

/* If browser height is short, remove some decorative height first. */
@media (max-height: 820px) {
  body.vault-page-body .vault-page > .relative.z-10 {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  body.vault-page-body .vault-shell {
    margin-top: 6px !important;
  }

  body.vault-page-body .vault-shell > div:first-child h1 {
    font-size: clamp(1.65rem, 3.2vw, 2.45rem) !important;
  }

  body.vault-page-body .vault-shell > div:first-child p:last-child {
    display: none !important;
  }

  body.vault-page-body .vault-panel {
    padding: 10px !important;
  }
}

/* Very short browser windows: compact the title more, not the dino list. */
@media (max-height: 700px) {
  body.vault-page-body .vault-shell > div:first-child {
    margin-bottom: 4px !important;
  }

  body.vault-page-body .vault-shell > div:first-child p:first-child {
    display: none !important;
  }

  body.vault-page-body .vault-shell > div:first-child h1 {
    font-size: 1.7rem !important;
  }

  body.vault-page-body .vault-simple-help {
    display: none !important;
  }
}

/* Wide screens: don't let the panel get silly huge. */
@media (min-width: 1700px) {
  body.vault-page-body .vault-shell {
    width: min(66rem, calc(100vw - 300px)) !important;
  }
}

/* Mobile/narrow: page can scroll normally because tiny screens need it. */
@media (max-width: 760px) {
  body.vault-page-body {
    overflow-y: auto !important;
  }

  body.vault-page-body .vault-page {
    height: auto !important;
    min-height: 100svh !important;
    overflow-y: auto !important;
  }

  body.vault-page-body .vault-page > .relative.z-10 {
    height: auto !important;
    min-height: 100svh !important;
    overflow-y: visible !important;
  }

  body.vault-page-body .vault-shell {
    width: calc(100vw - 20px) !important;
  }

  body.vault-page-body .vault-panel {
    min-height: auto !important;
  }

  body.vault-page-body .vault-dino-list {
    max-height: none !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
  }

  body.vault-page-body .vault-dino-list > section .grid {
    grid-template-columns: 1fr !important;
  }
}