html {
  width: 100%;
  height: auto;
  overflow-y: scroll;
  color-scheme: dark;
  /* Always show the vertical scrollbar */
  scrollbar-gutter: stable;
  /* Ensures consistent layout by reserving space for the scrollbar */
  overflow-x: hidden !important;
  scrollbar-color: var(--section-medium-background-color) var(--section-dusk-background-color);

  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;


}



body {
  padding: 0;
  margin: 0;
  padding-top: var(--top-bar-H);


  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;



  background-color: var(--section-darkestdark-background-color);
}

.mainNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  background-color: var(--main-background-color);
  z-index: 95000;
  padding: 0;
  box-sizing: border-box;
  margin: 0;
}

@media (max-width: 1150px) {
  .mainNav {

    /* border-bottom: 1px solid var(--section-medium-background-color); */
  }
}















/* ───────────────────────────────────────────────────────────
   SITE COMPARE TOGGLES
─────────────────────────────────────────────────────────── */


/* Hide the actual checkbox */
.compare-checkbox {
  display: none;
}

/* Label: square button that scales with .compare-toggle font-size */
.compare-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  /* ~32px at 16px base → matches original 26–32px target */
  height: 2em;
  aspect-ratio: 1;
  padding: 0.25em;
  /* ~4px at 16px base */
  background-color: var(--card-color, var(--site-color));
  color: var(--white-color-1);
  font-family: var(--identity-font);
  font-weight: 600;
  letter-spacing: -0.0625em;
  /* ≈ -1px at 16px base */
  text-transform: capitalize;
  border-radius: 0.125em;
  /* ≈ 2px at 16px base */
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  position: relative;
  transition: background-color 0.3s;
  font-size: 1em;
  /* inherit scale from .compare-toggle */
}

/* Symbol container (targets original ~18px glyph sizing at 16px base) */
.compare-symbol {
  position: relative;
  display: flex;
  width: 1.125em;
  height: 1.125em;
  flex: 0 0 1.125em;
  align-items: center;
  justify-content: center;
  user-select: none;
  box-sizing: content-box;
  font-size: 1.125em;
  /* ≈ 18px when .compare-toggle is 16px */
}

/* Plus and minus symbols with flip transition */
.compare-symbol .minus {
  display: none;
  justify-content: center;
  margin-bottom: 0.2em;
  width: 1em;
}

.compare-symbol .plus {
  display: flex;
  justify-content: center;
  width: 1em;
}

/* ──────────────────────────────────────────────────────────────
   LOADERS SECTION
   ────────────────────────────────────────────────────────────── */
.toggle-wrapper {
  align-self: center !important;
  justify-self: center !important;
  height: 100%;
}

.toggle-spinner {
  width: 1em;
  height: 1em;
  border: 0.11em solid var(--white-color-1);
  /* scales with font-size */
}

.toggle-caution svg {
  width: 1em;
  height: 1em;
}

/* Text: Hidden by default, with slide and fade */
.compare-text {
  display: flex;
  max-width: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* Hover/focus expansion for pointers */
@media (hover: hover) and (pointer: fine) {

  .compare-label:hover,
  .compare-label:active,
  .compare-checkbox:focus+.compare-label {
    width: fit-content;
    padding: 0.25em 0.5em 0.25em 1.25em;
    aspect-ratio: unset;
    justify-content: space-between;
  }

  .compare-label:hover .compare-text {
    display: flex;
    align-items: flex-start;
    max-width: fit-content;
    min-height: fit-content;
    margin-right: 1.25em;
  }
}

/* Touch-only “expanded” state */
@media (hover: none) and (pointer: coarse) {
  .compare-label.touch-open {
    width: fit-content;
    padding: 0.25em 0.5em 0.25em 1.25em;
    aspect-ratio: unset;
    justify-content: space-between;
  }

  .compare-label.touch-open .compare-text {
    display: inline-block;
    max-width: fit-content;
    opacity: 1;
    margin-right: 1em;
  }
}

/* site_shared.css — APPEND near the compare/vault rules */

/* ──────────────────────────────────────────────────────────────
   STATIC compare/vault (thumbnail) — never expands, no text
   ────────────────────────────────────────────────────────────── */
.compare-toggle--static .compare-label {
  pointer-events: none;
  /* no hover/press on desktop/mobile */
}

.compare-toggle--static .compare-text,
.compare-toggle--static .toggle-spinner {
  display: none !important;
  /* never show helper text/spinner   */
}

/* Square remains fixed-size; rely on inherited font-size */
.compare-toggle--static .compare-label {
  width: 2em;
  height: 2em;
  padding: 0.25em;
  aspect-ratio: 1;
  justify-content: center;
}

/* Show + by default, flip to − when marked in-vault */
.compare-toggle--static .plus {
  display: flex;
}

.compare-toggle--static .minus {
  display: none;
}

.compare-toggle--static.in-vault .plus,
.compare-toggle--static[data-in-vault="true"] .plus {
  display: none;
}

.compare-toggle--static.in-vault .minus,
.compare-toggle--static[data-in-vault="true"] .minus {
  display: flex;
}