/* ==========================================================================
   Ready Set Shoot — shared tab component
   RSS-13 / RSS-DL-015 item 7. Built once, used by every page with tabs.
   Do not fork this file per page. Fix it here and it is fixed everywhere.

   Requires from the host page's :root — --line --dim --white --red --ff-b
   Requires from the host page's nav script — body.nav-up while the nav is hidden
   ========================================================================== */

/* --- The bar -------------------------------------------------------------
   position:sticky already establishes a containing block for the absolutely
   positioned edge fades and cue below. Never add position:relative here.
   RSS-R-042: a relative declaration later in the cascade silently overrides
   sticky and the bar stops pinning. Verify the COMPUTED value, not the source.
   ------------------------------------------------------------------------ */
.tab-bar{position:sticky;top:64px;z-index:90;background:rgba(0,0,0,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(20px);transition:top .4s ease}

/* NO-JS FALLBACK ONLY. RSS-13: tabs.js now pins the bar by measuring the nav's
   real position, so this rule is not the live mechanism and no page needs to
   wire a body class. Kept because investment.html already sets nav-up, and a
   page with JS disabled should still behave. Do NOT add this class to other
   pages - the component handles them without it. RSS-R-045. */
body.nav-up .tab-bar{top:0}

.tab-bar-inner{padding:0 48px;display:flex;overflow-x:auto;scrollbar-width:none}
.tab-bar-inner::-webkit-scrollbar{display:none}

.tab-btn{font-family:var(--ff-b);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--dim);padding:0 24px;height:52px;border:none;background:transparent;cursor:pointer;border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:3px}
.tab-btn:hover{color:var(--white)}
.tab-btn.active{color:var(--white);border-bottom-color:var(--red)}
.tab-btn .range{font-size:9px;color:rgba(255,255,255,.3);letter-spacing:1px;font-weight:400;text-transform:none}
.tab-btn.active .range{color:rgba(255,255,255,.45)}
.tab-btn:focus-visible{outline:2px solid var(--red);outline-offset:-2px}

/* --- Panels -------------------------------------------------------------- */
.tab-panel{display:none}
.tab-panel.active{display:block}

/* --- Horizontal-scroll affordance ---------------------------------------- */
.tab-bar::after{content:"";position:absolute;top:0;right:0;bottom:0;width:72px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,0,0,.96));z-index:2;opacity:1;transition:opacity .25s ease}
.tab-bar::before{content:"";position:absolute;top:0;left:0;bottom:0;width:56px;pointer-events:none;background:linear-gradient(270deg,transparent,rgba(0,0,0,.96));z-index:2;opacity:0;transition:opacity .25s ease}
.tab-bar.sx-scrolled::before{opacity:1}
.tab-bar.sx-end::after{opacity:0}

/* RSS-13: the chevrons are real buttons now, not decoration. Founder request.
   Click to page the bar; the left one appears once there is something to go
   back to. Keyboard users already have arrow-key tab navigation, which
   auto-centres, so these are aria-hidden and out of the tab order rather than
   duplicated focus stops. */
.tab-bar .sx-cue{position:absolute;top:50%;transform:translateY(-50%);z-index:3;color:#fff;background:var(--red);border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;font-family:var(--ff-b);font-size:16px;font-weight:700;line-height:1;padding:0 0 2px 0;box-shadow:0 0 0 4px rgba(0,0,0,.55);opacity:.95;transition:opacity .25s ease;cursor:pointer}
.tab-bar .sx-next{right:8px;animation:sxNudge 1.9s ease-in-out infinite}
.tab-bar .sx-prev{left:8px;opacity:0;pointer-events:none}
.tab-bar.sx-scrolled .sx-prev{opacity:.95;pointer-events:auto}
.tab-bar.sx-end .sx-next{opacity:0;pointer-events:none}
@keyframes sxNudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(4px)}}
@media(prefers-reduced-motion:reduce){.tab-bar .sx-cue{animation:none}}
.tab-bar.sx-nooverflow::after,.tab-bar.sx-nooverflow::before,.tab-bar.sx-nooverflow .sx-cue{opacity:0;pointer-events:none}

/* RSS-13: press-and-drag to pan the bar. Mouse only - see tabs.js. */
.tab-bar-inner.sx-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.tab-bar-inner.sx-dragging .tab-btn{cursor:grabbing}

/* --- Mobile -------------------------------------------------------------- */
@media(max-width:900px){
  .tab-bar-inner{padding:0 20px}
  .tab-btn{padding:0 16px;font-size:9px}
}