/* rail.css: styles for rail.js, the kit's page rail (see the header of rail.js for the contract). Page-agnostic.
 * Tokens (override on :root): --xr-ink, --xr-gold, --xr-track, --xr-top, --xr-bottom, --xr-left, --xr-z.
 * Desktop: a left-edge column with a hairline track, a gold fill, one node per chapter, labels on hover or focus.
 * Phone (max-width 700px): a 2px progress line at the very top and an edge tab that opens the chapter list.
 * No JS: nothing is built, nothing shows. Present mode: hidden. Reduced motion: no transitions. */
:root{--xr-ink:#e9edf2;--xr-gold:#f3d9a0;--xr-gold-deep:#b08a45;--xr-track:rgba(233,237,242,.2);
  --xr-top:92px;--xr-bottom:92px;--xr-left:12px;--xr-z:470;--xr-ease:cubic-bezier(.2,.6,.2,1);
  --xr-glass:rgba(9,14,26,.62);
  --mat-gold-ramp:#fff3d6,#f3d9a0 22%,#d9b46a 44%,#8f6d31 66%,#f0d594 84%,#b08a45;--mat-gold-ink:#2a1d08}
.xr-rail[data-era="light"]{--xr-ink:#16101e;--xr-gold:#b08a45;--xr-gold-deep:#7a5a1c;--xr-track:rgba(22,16,30,.22);--xr-glass:rgba(255,251,240,.78);--xr-gold-rgb:150,108,36}
.xr-rail{position:fixed;left:var(--xr-left);top:var(--xr-top);bottom:var(--xr-bottom);width:28px;z-index:var(--xr-z);
  opacity:.62;transition:opacity .4s var(--xr-ease);pointer-events:none}
.xr-rail:hover,.xr-rail:focus-within,.xr-rail[data-gliding]{opacity:1}
html.is-present .xr-rail{display:none}
.xr-track{position:absolute;left:13px;top:0;bottom:0;width:2px;margin-left:-1px;border-radius:2px;
  background:repeating-linear-gradient(180deg,rgba(var(--xr-gold-rgb,243,217,160),.34) 0 2px,rgba(var(--xr-gold-rgb,243,217,160),.16) 2px 3px);   /* brushed-gold hairline */pointer-events:auto;cursor:pointer}
.xr-track::before{content:"";position:absolute;inset:0 -9px}   /* a fatter hit area than the hairline */
.xr-fill{position:absolute;left:0;top:0;width:100%;height:calc(var(--xr-p,0) * 100%);border-radius:2px;
  background:linear-gradient(90deg,#8f6d31,#fff3d6 45%,#d9b46a 60%,#8f6d31);box-shadow:0 0 10px rgba(243,217,160,.5)}
.xr-nodes{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.xr-node{position:absolute;left:0;top:var(--xr-at,0%);width:28px;height:28px;margin-top:-14px}
.xr-btn{appearance:none;-webkit-appearance:none;position:relative;display:block;width:28px;height:28px;padding:0;margin:0;border:0;background:none;
  color:var(--xr-ink);cursor:pointer;pointer-events:auto;font:inherit}
.xr-dot{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;
  background:var(--xr-track);box-shadow:0 0 0 1px var(--xr-ink) inset;opacity:.85;
  transition:transform .35s var(--xr-ease),background-color .35s var(--xr-ease),box-shadow .35s var(--xr-ease),opacity .35s}
.xr-node[data-on] .xr-dot{transform:scale(1.65);opacity:1;box-shadow:0 0 0 1px #8f6d31,0 0 14px 2px rgba(243,217,160,.55);
  background:radial-gradient(circle at 34% 28%,#fff 0 8%,#fff3d6 18%,#d9b46a 48%,#6e5326 100%)}   /* a polished node */
@media (prefers-reduced-motion:no-preference){.xr-node[data-on] .xr-dot{animation:xr-glint 6s ease-in-out infinite}}
@keyframes xr-glint{0%,70%,100%{filter:none}84%{filter:brightness(1.35) saturate(1.1)}}
.xr-btn:hover .xr-dot,.xr-btn:focus-visible .xr-dot{transform:scale(1.7);background:var(--xr-gold);opacity:1}
.xr-btn:focus-visible{outline:2px solid var(--xr-gold);outline-offset:-3px;border-radius:50%}
.xr-tip{position:absolute;left:30px;top:50%;display:flex;align-items:baseline;gap:.6em;white-space:nowrap;
  padding:.5em .85em .5em .75em;border-radius:12px;background:var(--xr-glass);color:var(--xr-ink);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:0 0 0 1px rgba(243,217,160,.32) inset,0 10px 30px -14px rgba(0,0,0,.6);
  font:500 .8rem/1 var(--o-reel-body,'Inter',system-ui,sans-serif);
  opacity:0;transform:translate(-6px,-50%);pointer-events:none;transition:opacity .3s var(--xr-ease),transform .4s var(--xr-ease)}
.xr-num{font:600 .62rem/1 var(--o-reel-mono,ui-monospace,Menlo,monospace);letter-spacing:.16em;color:var(--xr-gold)}
.xr-btn:hover .xr-tip,.xr-btn:focus-visible .xr-tip{opacity:1;transform:translate(0,-50%)}
.xr-tab,.xr-list{display:none}

@media (max-width:700px){
  .xr-rail{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;opacity:1}
  .xr-track{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;margin:0;border-radius:0;pointer-events:none;background:transparent}
  .xr-track::before{display:none}
  .xr-fill{width:calc(var(--xr-p,0) * 100%);height:2px;border-radius:0}
  .xr-nodes{display:none}
  .xr-tab{display:block;position:fixed;left:0;top:50%;width:22px;height:60px;margin-top:-30px;padding:0;border:0;
    border-radius:0 12px 12px 0;background:var(--xr-glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    box-shadow:0 0 0 1px rgba(243,217,160,.3) inset;cursor:pointer;pointer-events:auto;opacity:.75;transition:opacity .3s}
  .xr-tab:focus-visible{outline:2px solid var(--xr-gold);outline-offset:2px}
  .xr-tab__bar{position:absolute;left:8px;top:14px;bottom:14px;width:3px;border-radius:2px;background:linear-gradient(180deg,var(--xr-gold-deep),var(--xr-gold));
    opacity:.9}
  .xr-rail[data-open] .xr-tab{opacity:1}
  .xr-list{display:none;list-style:none;margin:0;padding:8px;position:fixed;left:30px;top:50%;transform:translateY(-50%);
    width:min(260px,calc(100vw - 80px));max-height:70svh;overflow:auto;border-radius:16px;background:var(--xr-glass);
    -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:0 0 0 1px rgba(243,217,160,.34) inset,0 20px 50px -16px rgba(0,0,0,.7);
    pointer-events:auto;color:var(--xr-ink)}
  .xr-rail[data-open] .xr-list{display:block;animation:xr-in .35s var(--xr-ease) both}
  .xr-item{appearance:none;-webkit-appearance:none;display:flex;align-items:baseline;gap:.8em;width:100%;min-height:44px;padding:.7em .9em;margin:0;border:0;
    border-radius:10px;background:none;color:inherit;text-align:left;cursor:pointer;font:500 .92rem/1.2 var(--o-reel-body,'Inter',system-ui,sans-serif)}
  .xr-item .xr-num{flex:none;min-width:2.4em}
  .xr-item[aria-current]{background:rgba(243,217,160,.14)}
  .xr-item:focus-visible{outline:2px solid var(--xr-gold);outline-offset:-2px}
}
@keyframes xr-in{from{opacity:0;transform:translate(-8px,-50%)}to{opacity:1;transform:translateY(-50%)}}
@media (prefers-reduced-motion:reduce){.xr-rail,.xr-dot,.xr-tip,.xr-rail[data-open] .xr-list{transition:none;animation:none}}
@media print{.xr-rail{display:none}}