/* Section menu for long pages, the same component as xgravity.co in The Market Verdict's colors (DESIGN.md):
   a back-to-top button and a tab showing the current section, which opens the full list. It floats in the
   right margin and never changes the page layout. Shown from 1360px, where the margin beside the 1200px
   content is wide enough for it. */
.xnav { display: none; }
[data-nav][id] { scroll-margin-top: 96px; }
[data-nav][tabindex="-1"]:focus { outline: none; }
@media (min-width: 1360px) {
  .xnav { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; position: fixed; z-index: 30; top: 50%;
    right: max(12px, calc((100vw - 1200px) / 4 - 24px)); transform: translate(calc(100% + 40px), -50%); visibility: hidden;
    transition: transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .45s; }
  .xnav.show { transform: translate(0, -50%); visibility: visible; transition: transform .45s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
}
.xnav-top, .xnav-tab { display: flex; align-items: center; justify-content: center; min-width: 48px; height: 48px; padding: 0; border-radius: 999px;
  border: 1px solid rgba(245, 241, 232, .18); background: rgba(38, 57, 31, .94); color: #F5F1E8; cursor: pointer; font: 600 14px/1 Inter, system-ui, sans-serif;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 30px -12px rgba(38, 57, 31, .55); }
.xnav-top:hover { background: #3A5B2F; }
.xnav-tab b { font: 400 14px/1 Fraunces, Georgia, serif; color: #B6E35A; }
/* The tab shows the section number; its name slides out on hover or keyboard focus. */
.xnav-tab span { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .35s cubic-bezier(.2, .7, .2, 1), opacity .25s, margin .35s; }
.xnav-tab:hover, .xnav-tab:focus-visible, .xnav-tab[aria-expanded="true"] { padding: 0 18px; gap: 10px; }
.xnav-tab:hover span, .xnav-tab:focus-visible span, .xnav-tab[aria-expanded="true"] span { max-width: 260px; opacity: 1; }
.xnav-top:focus-visible, .xnav-tab:focus-visible, .xnav-list a:focus-visible { outline: 2px solid #B6E35A; outline-offset: 3px; }
.xnav-list { position: absolute; right: calc(100% + 10px); top: 50%; transform: translateY(-50%); max-height: calc(100vh - 120px); overflow: auto;
  list-style: none; margin: 0; padding: 8px; min-width: 250px; max-width: 320px; border-radius: 20px; background: rgba(38, 57, 31, .97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 20px 50px rgba(38, 57, 31, .35); animation: xnav-in .25s ease; }
.xnav-list[hidden] { display: none; }
@keyframes xnav-in { from { opacity: 0; } to { opacity: 1; } }
.xnav-list a { display: flex; gap: 12px; align-items: baseline; padding: 10px 14px; border-radius: 12px; color: rgba(245, 241, 232, .86);
  text-decoration: none; font: 500 14.5px/1.35 Inter, system-ui, sans-serif; }
.xnav-list a b { font: 400 13px/1 Fraunces, Georgia, serif; color: #B6E35A; min-width: 20px; }
.xnav-list a:hover { background: rgba(245, 241, 232, .08); color: #F5F1E8; }
.xnav-list a[aria-current="true"] { background: #3A5B2F; color: #F5F1E8; }
.xnav-list a[aria-current="true"] b { color: #B6E35A; }
.xnav-list .xnav-up a { color: rgba(245, 241, 232, .65); }
@media (prefers-reduced-motion: reduce) { .xnav, .xnav.show, .xnav-tab span { transition: none; } .xnav-list { animation: none; } }