/* Native contents remain the baseline at every width when enhancement fails. */
[data-section-contents][hidden], .section-rail[hidden], .section-rail-panel[hidden] { display: none !important; }
.section-rail { display: none; }
@media (min-width: 1200px) {
  .section-rail {
    display: flex; align-items: center; gap: 4px;
    position: fixed; left: 12px; top: 50%;
    transform: translateY(-50%); z-index: 12;
    color: #242424; font-family: 'Public Sans', sans-serif;
  }
  .case-facts .section-rail { margin: 0; padding: 0; border: 0; }
  /* The sticky facts form a stacking context. Keep its fixed contents panel
     above the comparison's range overlay, while the site header stays above. */
  .case-facts { z-index: 4; }
  .section-rail-toggle {
    display: grid; place-items: center; flex: 0 0 44px; width: 44px; min-height: 44px;
    padding: 16px 8px; border: 0; border-radius: 8px;
    background: transparent; color: inherit; cursor: pointer;
  }
  .section-rail-toggle:hover, .section-rail-toggle[aria-expanded="true"] { background: rgb(127 127 127 / .09); }
  .section-rail-toggle:focus-visible { outline: 2px solid #5a36bc; outline-offset: 2px; }
  .section-rail-ticks { display: grid; justify-items: start; gap: 13px; width: 24px; }
  .section-rail-ticks > span { display: block; width: 15px; height: 2px; background: #b8b8b8; transition: width 160ms ease, background-color 160ms ease; }
  .section-rail-ticks > [data-current="true"] { width: 24px; height: 3px; background: #5a36bc; }
  .section-rail-panel {
    flex: 0 0 292px; width: 292px;
    max-height: min(620px, calc(100dvh - 160px)); overflow-y: auto;
    padding: 14px; border: 1px solid #e4e1e7; border-radius: 14px;
    background: #fff; box-shadow: 0 8px 32px rgb(20 10 40 / .09);
  }
  /* The shared flex box covers the full panel height, keeping diagonal pointer
     movement from the ticks to any label inside one continuous hover area. */
  .section-rail-panel > p { margin: 0 10px 8px; font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: .09em; text-transform: uppercase; color: #716d76; }
  .section-rail[data-section-rail] .section-rail-panel > a {
    display: block; margin: 2px 0; padding: 10px; border-radius: 8px;
    font-size: 14px; font-weight: 400; line-height: 1.45; color: #625e68;
    text-decoration: none; overflow-wrap: break-word;
  }
  .section-rail[data-section-rail] .section-rail-panel > a:is(:hover, [aria-current="location"]) { background: #f3f0f7; color: #242424; }
  .section-rail[data-section-rail] .section-rail-panel > a:focus-visible { outline: 2px solid #5a36bc; outline-offset: -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .section-rail-ticks > span { transition: none; }
}