/* ===================================================================
   PROJECT 100 — "Fixonic" design-system layer (site-wide)

   Adds a Fixonic-Webflow-inspired layer of motion/polish on TOP of the
   existing shell/carousel/connect system — nothing here replaces those
   files, it only adds new components + upgrades the nav so every page
   that links this file + fixonic.js gets the same modern treatment
   with zero markup rewrite required (nav-scroll arrows + sticky-condense
   are injected by fixonic.js at runtime).

   Load order on every page:
     <link rel="stylesheet" href="assets/css/shell.css">
     <link rel="stylesheet" href="assets/css/carousel.css">
     <link rel="stylesheet" href="assets/css/connect.css">
     <link rel="stylesheet" href="assets/css/float-connect.css">
     <link rel="stylesheet" href="assets/css/fixonic.css">   <!-- new, last -->
     ...page's own <style> block...
     <script src="assets/js/fixonic.js"></script>            <!-- new -->
   =================================================================== */

/* ---------- 1. Nav scroll-affordance (page-tabs / cat-tabs) ---------- */
/* fixonic.js injects <button class="tab-arrow arrow-l/r"> as the last
   children of every .page-tabs / .cat-tabs <nav>, and toggles can-l/can-r
   on that nav's .wrap based on real scroll position. Works whether or not
   a page already has its own static mask-image rule — these rules are
   more specific (nav.wrap.can-*) and load after page <style>, so they win. */
.page-tabs, .cat-tabs{ position:relative; }

.tab-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:6;
  width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(10,11,13,.94); border:1px solid rgba(255,255,255,.18); color:#eef0f4;
  font-size:.74rem; line-height:1; cursor:pointer; padding:0;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, border-color .15s ease, color .15s ease, background .15s ease;
}
.tab-arrow.arrow-l{ left:3px; }
.tab-arrow.arrow-r{ right:3px; }
.page-tabs .wrap.can-l ~ .tab-arrow.arrow-l,
.cat-tabs .wrap.can-l ~ .tab-arrow.arrow-l,
.page-tabs .wrap.can-r ~ .tab-arrow.arrow-r,
.cat-tabs .wrap.can-r ~ .tab-arrow.arrow-r{
  opacity:1; visibility:visible; pointer-events:auto;
}
@media (hover:hover){
  .tab-arrow:hover{ border-color:var(--red,#e6273f); color:var(--red,#e6273f); background:rgba(10,11,13,1); }
}
@media (max-width:900px){
  .page-tabs .wrap, .cat-tabs .wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
  .page-tabs .wrap::-webkit-scrollbar, .cat-tabs .wrap::-webkit-scrollbar{ display:none; }
}
.page-tabs .wrap.can-l.can-r, .cat-tabs .wrap.can-l.can-r{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
}
.page-tabs .wrap.can-r:not(.can-l), .cat-tabs .wrap.can-r:not(.can-l){
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
}
.page-tabs .wrap.can-l:not(.can-r), .cat-tabs .wrap.can-l:not(.can-r){
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px);
  mask-image:linear-gradient(90deg,transparent,#000 22px);
}
.page-tabs .wrap:not(.can-l):not(.can-r), .cat-tabs .wrap:not(.can-l):not(.can-r){
  -webkit-mask-image:none; mask-image:none;
}

/* ---------- 2. Sticky condensed nav on scroll ---------- */
.site-head{ transition:box-shadow .25s ease; }
.site-head.condensed #nav .wrap{ padding-top:8px; padding-bottom:8px; }
.site-head.condensed .brand{ font-size:.92rem; }
.site-head.condensed{ box-shadow:0 6px 20px rgba(0,0,0,.35); }
#nav .wrap{ transition:padding .2s ease; }
.brand{ transition:font-size .2s ease; }

/* ---------- 3. Animated stat counters ---------- */
.stat-num{ font-variant-numeric:tabular-nums; }
.stat-num.counting::after{ content:""; }

/* ---------- 4. Service-card grid (hover-lift + icon glow) ---------- */
.fx-card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; }
.fx-card{
  position:relative; display:block; padding:22px 20px 20px; border-radius:14px;
  background:linear-gradient(160deg,var(--surface,#16181e),var(--surface-2,#1d2029));
  border:1px solid var(--border,#272b35); text-decoration:none; color:var(--text,#eef0f4);
  overflow:hidden; transition:transform .25s cubic-bezier(.22,1,.36,1), border-color .25s ease, box-shadow .25s ease;
}
.fx-card::before{
  content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
  background:radial-gradient(circle at 30% 20%, rgba(230,39,63,.22), transparent 60%);
  transition:opacity .25s ease;
}
.fx-card .fx-icon{
  width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:rgba(230,39,63,.14); border:1px solid rgba(230,39,63,.3); font-size:1.3rem; margin-bottom:14px;
  transition:transform .25s ease, background .25s ease;
}
.fx-card h3{ font-family:'Oswald',sans-serif; font-size:1.02rem; margin:0 0 8px; text-transform:uppercase; letter-spacing:.02em; }
.fx-card p{ margin:0; color:var(--text-dim,#9aa1b0); font-size:.86rem; line-height:1.5; }
.fx-card .fx-go{ display:inline-flex; align-items:center; gap:5px; margin-top:14px; font-family:'Oswald',sans-serif; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--red,#e6273f); }
@media (hover:hover){
  .fx-card:hover{ transform:translateY(-6px); border-color:rgba(230,39,63,.45); box-shadow:0 16px 34px rgba(0,0,0,.45); }
  .fx-card:hover::before{ opacity:1; }
  .fx-card:hover .fx-icon{ transform:scale(1.1); background:rgba(230,39,63,.24); }
}

/* ---------- 5. Before / after comparison slider ---------- */
.ba-slider{
  position:relative; max-width:520px; margin:0 auto; border-radius:14px; overflow:hidden;
  aspect-ratio:4/5; background:#000; border:1px solid var(--border,#272b35);
  box-shadow:0 18px 40px rgba(0,0,0,.45); touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
}
.ba-slider img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ba-slider .ba-after-wrap{ position:absolute; inset:0; overflow:hidden; clip-path:inset(0 50% 0 0); }
.ba-slider .ba-after-wrap img{ position:absolute; inset:0; }
.ba-slider .ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:3px; background:#fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.3); transform:translateX(-50%); cursor:ew-resize; z-index:5;
}
.ba-slider .ba-handle::after{
  content:"◂ ▸"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:40px; height:40px; border-radius:50%; background:#fff; color:#111;
  display:flex; align-items:center; justify-content:center; font-size:.7rem; letter-spacing:.1em;
  box-shadow:0 4px 14px rgba(0,0,0,.4);
}
.ba-slider input[type="range"]{
  position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; z-index:6;
}
.ba-tag{
  position:absolute; top:10px; font-family:'Oswald',sans-serif; font-size:.66rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:100px;
  background:rgba(10,11,13,.78); border:1px solid rgba(255,255,255,.18); color:#fff; z-index:4;
}
.ba-tag.ba-before-tag{ left:10px; }
.ba-tag.ba-after-tag{ right:10px; }

/* ---------- 6. Gallery lightbox ---------- */
.fx-gallery{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.fx-gallery button{
  all:unset; display:block; cursor:zoom-in; border-radius:10px; overflow:hidden; aspect-ratio:1;
  border:1px solid var(--border,#272b35); position:relative;
}
.fx-gallery img{ width:100%; height:100%; object-fit:cover; transition:transform .3s ease; display:block; }
@media (hover:hover){ .fx-gallery button:hover img{ transform:scale(1.08); } }

.fx-lightbox{
  position:fixed; inset:0; z-index:200; background:rgba(4,4,6,.94); display:none;
  align-items:center; justify-content:center; padding:40px 16px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.fx-lightbox.open{ display:flex; }
.fx-lightbox img{ max-width:min(90vw,900px); max-height:80vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.fx-lightbox .fx-lb-close, .fx-lightbox .fx-lb-nav{
  position:absolute; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); color:#fff;
  width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  cursor:pointer; font-size:1.1rem; transition:background .15s ease;
}
.fx-lightbox .fx-lb-close{ top:18px; right:18px; }
.fx-lightbox .fx-lb-nav.prev{ left:14px; top:50%; transform:translateY(-50%); }
.fx-lightbox .fx-lb-nav.next{ right:14px; top:50%; transform:translateY(-50%); }
@media (hover:hover){ .fx-lightbox .fx-lb-close:hover, .fx-lightbox .fx-lb-nav:hover{ background:var(--red,#e6273f); border-color:var(--red,#e6273f); } }
@media (max-width:640px){
  .fx-lightbox .fx-lb-nav{ width:36px; height:36px; }
  .fx-card{ padding:18px 16px 16px; }
}

/* ---------- 7. Scroll-reveal (used by stat strips / cards entering view) ---------- */
.fx-reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.fx-reveal.fx-in{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion:reduce){ .fx-reveal{ opacity:1; transform:none; transition:none; } }

/* ---------- 8. YouTube lite-embed card (fit-workout training log) ---------- */
.log-card.yt-card{ cursor:pointer; }
.log-media .yt-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
  background:linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
}
.log-media .yt-play svg{ width:40px; height:40px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.log-media.yt-active .yt-play{ display:none; }
.log-media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }
.log-body .watch-yt{ margin-top:6px; font-size:.66rem; font-weight:700; color:#ff4444; display:flex; align-items:center; gap:4px; text-decoration:none; }

/* ---------- 9. Reveal-zoom media: pair with .fx-reveal on a card that
   wraps a photo. The card fades/slides up while its photo settles from
   a slight zoom-out — opt-in via a second class so it never changes
   existing .fx-reveal usage (stat bars, etc). ---------- */
.fx-reveal-media img{ transition:transform 1s cubic-bezier(.16,1,.3,1); }
.fx-reveal-media:not(.fx-in) img{ transform:scale(1.15); }
@media (prefers-reduced-motion:reduce){ .fx-reveal-media:not(.fx-in) img{ transform:none; } }

/* ---------- 10. Staggered children reveal: put .fx-stagger on a
   container whose direct children each carry their own .fx-reveal —
   they'll fade up in sequence instead of all at once. ---------- */
.fx-stagger > *:nth-child(1){ transition-delay:.02s; }
.fx-stagger > *:nth-child(2){ transition-delay:.08s; }
.fx-stagger > *:nth-child(3){ transition-delay:.14s; }
.fx-stagger > *:nth-child(4){ transition-delay:.2s; }
.fx-stagger > *:nth-child(5){ transition-delay:.26s; }
.fx-stagger > *:nth-child(6){ transition-delay:.32s; }
.fx-stagger > *:nth-child(7){ transition-delay:.38s; }
.fx-stagger > *:nth-child(8){ transition-delay:.44s; }
.fx-stagger > *:nth-child(9){ transition-delay:.5s; }
.fx-stagger > *:nth-child(n+10){ transition-delay:.56s; }

/* ---------- 11. Spotlight cursor glow: a soft light that follows the
   pointer over a card/section. fixonic.js's initSpotlight() sets the
   --sx/--sy custom props from real mouse coordinates. ---------- */
.fx-spotlight{ position:relative; }
.fx-spotlight::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; opacity:0;
  border-radius:inherit; mix-blend-mode:overlay; transition:opacity .35s ease;
  background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%), rgba(255,255,255,.55), transparent 70%);
}
@media (hover:hover){ .fx-spotlight:hover::after{ opacity:1; } }
@media (prefers-reduced-motion:reduce){ .fx-spotlight::after{ display:none; } }

/* ---------- 12. Aurora glow backdrop: slow-drifting color bloom for
   hero / feature sections. Pairs well with .fx-spotlight on the same
   element (aurora = ambient, spotlight = cursor-reactive). ---------- */
.fx-aurora{ position:relative; overflow:hidden; }
.fx-aurora::before{
  content:""; position:absolute; inset:-25%; z-index:0; pointer-events:none;
  background:radial-gradient(circle at 28% 25%, rgba(230,39,63,.28), transparent 55%),
             radial-gradient(circle at 76% 70%, rgba(63,215,208,.2), transparent 50%);
  filter:blur(44px); animation:fxAurora 16s ease-in-out infinite alternate;
}
@keyframes fxAurora{ from{ transform:translate(-3%,-2%) scale(1); } to{ transform:translate(4%,3%) scale(1.1); } }
@media (prefers-reduced-motion:reduce){ .fx-aurora::before{ animation:none; } }

/* ---------- 13. Shine sweep: a one-shot diagonal light sweep across a
   small badge/pill/tag on hover — stacks fine with the badge's own
   background/border, just needs position+overflow to clip the sweep. ---------- */
.fx-shine{ position:relative; overflow:hidden; }
.fx-shine::after{
  content:""; position:absolute; top:0; left:-160%; width:55%; height:100%;
  background:linear-gradient(115deg, transparent, rgba(255,255,255,.45), transparent);
  transform:skewX(-18deg); transition:left .65s ease; pointer-events:none;
}
@media (hover:hover){ .fx-shine:hover::after{ left:160%; } }

/* ---------- 14. Pulse glow: a slow breathing box-shadow for callouts /
   annotation cards that should quietly keep drawing the eye. ---------- */
.fx-pulse-glow{ animation:fxPulseGlow 3.2s ease-in-out infinite; }
@keyframes fxPulseGlow{
  0%,100%{ box-shadow:0 4px 18px rgba(232,182,76,.12), 0 0 24px rgba(232,182,76,.18); }
  50%{ box-shadow:0 4px 22px rgba(232,182,76,.24), 0 0 40px rgba(232,182,76,.38); }
}
@media (prefers-reduced-motion:reduce){ .fx-pulse-glow{ animation:none; } }

/* ---------- 15. Auto-scrolling carousel row: fixonic.js's initAutoScroll()
   advances any [data-autoscroll] container's .carousel-row on a timer,
   pausing on hover/touch/manual-nav. Pure opt-in via the data attribute. ---------- */
[data-autoscroll] .carousel-row{ scroll-behavior:smooth; }

/* ---------- 16. Table row glow: a red left-accent stripe that lights up
   the hovered row, layered on top of whatever hover background a page's
   own table CSS already applies. Opt-in per table via class="fx-table". ---------- */
.fx-table tr{ transition:box-shadow .2s ease; }
@media (hover:hover){
  .fx-table tr:hover td{ box-shadow:inset 3px 0 0 var(--red,#e6273f); }
}


/* ---------- 17. Brand wordmark icon: small circular red-arrow mark that
   precedes the PROJEK_100 logotype in the nav/footer .brand link. Pure
   presentation — sits inline via vertical-align, so it needs no layout
   change to the existing .brand anchor's own (per-page) CSS. ---------- */
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; background:#fff;
  vertical-align:-6px; margin-right:7px; flex:0 0 auto;
}
.brand-mark svg{ width:13px; height:13px; color:#e6273f; display:block; }
@media (max-width:640px){
  .brand-mark{ width:19px; height:19px; margin-right:5px; vertical-align:-5px; }
  .brand-mark svg{ width:11px; height:11px; }
}


/* ---------- 18. Site-wide light/dark theme toggle (classic pages) ----------
   Shared control for the 5 "classic" pages (index, fit-workout,
   fit-nutrition, gear-shop, ninja-creami) that don't have a theme system
   of their own. body[data-fx-theme="classic"] marks those pages so this
   block can never match fit-protocol.html / fit-protocol-archive.html,
   which already ship their own separately-tuned light/dark tokens under
   the same --surface/--border/--text names. ---------- */
.icon-btn{
  background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  width:32px; height:32px; border-radius:6px; display:flex; align-items:center;
  justify-content:center; cursor:pointer; flex:0 0 auto; text-decoration:none;
}
.icon-btn:focus-visible{ outline:2px solid var(--red,var(--accent,#e6273f)); outline-offset:2px; }
.icon-btn svg{ width:15px; height:15px; }
/* shell.css hardcodes body{background:#000 !important}. !important beats
   any higher-specificity non-important rule regardless of load order, which is
   why the plain override below didn't work — this one needs !important too so
   specificity (which we do win) finally gets to decide. */
body[data-fx-theme="classic"]{ background:var(--bg) !important; }
@media(hover:hover){ .icon-btn:hover{ border-color:var(--red,var(--accent,#e6273f)); } }

@media (prefers-color-scheme:light){
  html:not([data-theme="dark"]) body[data-fx-theme="classic"]{
    --bg:#eef0f2; --bg-2:#e6e9ec; --surface:#ffffff; --surface-2:#e6e9ec;
    --border:#d3d7dd; --text:#14171b; --text-dim:#4b5158;
    --red:#c81f34; --red-dim:#a91d30; --cyan:#086b66; --gold:#b8860b;
    --purple:#7c5cf0; --purple-deep:#5c3fd0; --purple-soft:#f1eefc;
    --slate:#5b6472; --bad:#b7373a;
  }
}
html[data-theme="light"] body[data-fx-theme="classic"]{
  --bg:#eef0f2; --bg-2:#e6e9ec; --surface:#ffffff; --surface-2:#e6e9ec;
  --border:#d3d7dd; --text:#14171b; --text-dim:#4b5158;
  --red:#c81f34; --red-dim:#a91d30; --cyan:#086b66; --gold:#b8860b;
  --purple:#7c5cf0; --purple-deep:#5c3fd0; --purple-soft:#f1eefc;
  --slate:#5b6472; --bad:#b7373a;
}
html[data-theme="dark"] body[data-fx-theme="classic"]{
  --bg:#0a0b0d; --bg-2:#111318; --surface:#16181e; --surface-2:#1d2029;
  --border:#272b35; --text:#eef0f4; --text-dim:#9aa1b0;
  --red:#e6273f; --red-dim:#a91d30; --cyan:#3fd7d0; --gold:#e8b64c;
  --purple:#a78bfa; --purple-deep:#c9b8ff; --purple-soft:#1d1730;
  --slate:#9aa1b0; --bad:#e0575a;
}

/* ---------- 19. FAQ accordion — native <details>/<summary>, no JS needed.
   Used on index.html only (one well-lit place instead of duplicating it
   across every page). ---------- */
.faq-section{ padding:70px 0; }
.faq-list{ max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
.faq-item{ background:var(--surface); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:16px 20px; font-weight:700; font-size:.95rem;
  display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--text);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+'; font-size:1.3rem; font-weight:400; color:var(--red,var(--accent,#e6273f)); flex:0 0 auto;
}
.faq-item[open] summary::after{ content:'\2212'; }
.faq-item .faq-a{ padding:0 20px 18px; color:var(--text-dim); font-size:.9rem; line-height:1.6; }
.faq-item .faq-a p{ margin:0; }
@media(hover:hover){ .faq-item summary:hover{ color:var(--red,var(--accent,#e6273f)); } }

/* ---------- 20. "Next in log" suggested chip — appears only once a viewer
   taps play on a Fit Workout log card, pointing to the next entry in the
   log rather than autoplaying into it. ---------- */
.yt-next-chip{
  position:absolute; left:8px; right:8px; bottom:8px; z-index:2;
  background:rgba(10,11,13,.82); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff;
  border:1px solid rgba(255,255,255,.18); border-radius:8px; padding:8px 10px;
  font-size:.7rem; font-weight:700; text-align:left; cursor:pointer; font-family:inherit;
  display:flex; align-items:center; gap:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.yt-next-chip:before{ content:'\25B8 NEXT: '; color:var(--red,#e6273f); flex:0 0 auto; }
@media(hover:hover){ .yt-next-chip:hover{ border-color:var(--red,#e6273f); } }
@keyframes logPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(230,39,63,0); } 50%{ box-shadow:0 0 0 4px rgba(230,39,63,.55); } }
.log-highlight{ animation:logPulse 1.5s ease-in-out 1; border-radius:14px; }


/* ---------- 21. index.html only: pin text/border colors inside the
   hero and cta-band sections to their dark values regardless of the
   site theme toggle. Both sit on a permanently-dark photo/video scrim
   (not driven by --bg), so their text has to stay light-on-dark even
   once the rest of the page switches to light mode. ---------- */
.hero, .cta-band{
  --text:#eef0f4; --text-dim:#9aa1b0; --border:#3a3f48; --cyan:#3fd7d0;
  color:#eef0f4;
}

/* ---------- 22. Light-mode contrast fixes ----------
   The #nav brand/link bar keeps a permanently-dark glass background
   (rgba(10,11,13,.92) — see each page's own <style>) exactly like the
   .hero/.cta-band case in #21, but its .brand/.btn-ghost text still read
   var(--text)/var(--red), which turn near-black in light mode and become
   almost invisible against that dark bar. Pin nav text to dark-mode-style
   colors here so it stays readable no matter which theme the rest of the
   page is in. Scoped to the 5 "classic" pages only, same as #18. */
body[data-fx-theme="classic"] #nav{
  --text:#eef0f4; --text-dim:#9aa1b0; --border:#2a2e37;
}
/* The non-current Fit-page pills (Fit Protocol/Workout/Nutrition/Fit Gear)
   use a hardcoded pink (#f19aa5) tuned for the dark page-tabs strip. In
   light mode that strip turns light gray and the same pink washes out
   almost to nothing — darken it for light mode specifically, site-wide
   (not just the classic pages, fit-protocol/-archive share this rule too). */
@media (prefers-color-scheme:light){
  html:not([data-theme="dark"]) .page-tab:not(.tab-home):not(.tab-creami):not(.current){ color:#b02f4a; }
}
html[data-theme="light"] .page-tab:not(.tab-home):not(.tab-creami):not(.current){ color:#b02f4a; }
/* index.html only: the red field-note's tag chip uses a hardcoded pink
   (#ff6b81) tuned for its dark-mode surface. On the light surface that same
   pink sits on a near-white pink-tinted background and washes out (contrast
   ~2.7). Darken it for light mode only — dark mode keeps the original. */
@media (prefers-color-scheme:light){
  html:not([data-theme="dark"]) body[data-fx-theme="classic"] .field-note--red .fn-tag{ color:#a11527; }
}
html[data-theme="light"] body[data-fx-theme="classic"] .field-note--red .fn-tag{ color:#a11527; }

/* ---------- 22b. Brand wordmark: bigger + glow, nav-left grouping ----------
   Rebrand: PROJEK_100. The wordmark link (nav + footer, all pages) gets a
   much larger size and a pulsing red glow so it reads as the site's actual
   logo. Scoped to <a class="brand"> only, so it never touches
   fit-protocol-archive's unrelated <div class="topbar"><div class="brand">
   tag. The classic pages' #nav brand gets its red pinned directly here
   since --red is no longer forced in that scope (see #22 note above). */
a.brand{
  position:relative; display:inline-block;
  font-size:1.9rem; font-weight:800; letter-spacing:.1em; line-height:1;
  text-decoration:none; padding-bottom:8px;
}
a.brand::after{
  content:""; position:absolute; left:1px; right:1px; bottom:-1px; height:4px;
  background:#ff3b57; border-radius:2px;
  transform:scaleX(1); transform-origin:left center; transition:transform .25s ease;
}
@media(hover:hover){ a.brand:hover::after{ transform:scaleX(1.04); } }
a.brand b{
  text-shadow:
    1px 1px 0 rgba(255,59,87,.45),
    2px 2px 0 rgba(255,59,87,.35),
    3px 3px 0 rgba(255,59,87,.25),
    4px 4px 0 rgba(255,59,87,.15);
}
body[data-fx-theme="classic"] #nav .brand b{ color:#ff3b57; }
@media (max-width:640px){
  a.brand{ font-size:1.3rem; padding-bottom:6px; letter-spacing:.06em; }
  a.brand::after{ height:3px; }
  a.brand b{
    text-shadow:
      1px 1px 0 rgba(255,59,87,.45),
      2px 2px 0 rgba(255,59,87,.30);
  }
}

/* Groups the theme switch + wordmark together at the far left of the nav,
   ahead of the All Links/Fit Protocol buttons on the right. */
.nav-left{ display:flex; align-items:center; gap:14px; flex:0 0 auto; }
@media (max-width:640px){ .nav-left{ gap:8px; } }

/* ---------- 23. Obvious ON/OFF theme switch (replaces the small icon-btn).
   A wide, equally-divided pill — left half = light/sun, right half =
   dark/moon — with a sliding thumb that parks on whichever side is active.
   Driven purely by html[data-theme] (or prefers-color-scheme as a fallback
   before the user picks explicitly), which fixonic.js's initThemeToggle()
   already sets on every page, including fit-protocol/-archive's own
   separate token system — so no JS changes needed. ---------- */
.theme-switch{
  --ts-w:30px; --ts-h:58px; --ts-pad:3px;
  position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:var(--ts-w); height:var(--ts-h); padding:0; border-radius:100px; cursor:pointer;
  border:1px solid rgba(255,255,255,.16); background:#12141a;
  overflow:hidden; -webkit-tap-highlight-color:transparent;
}
.theme-switch .ts-track{ position:relative; display:flex; flex-direction:column; width:100%; height:100%; }
.theme-switch .ts-icon{
  flex:1 1 50%; display:flex; align-items:center; justify-content:center; position:relative; z-index:1;
  transition:opacity .2s ease;
}
.theme-switch .ts-icon svg{ width:13px; height:13px; display:block; }
.theme-switch .ts-sun{ color:#e8b64c; }
.theme-switch .ts-moon{ color:#c7ccd6; }
.theme-switch .ts-thumb{
  position:absolute; top:var(--ts-pad); left:var(--ts-pad);
  width:calc(var(--ts-w) - (var(--ts-pad) * 2)); height:calc(var(--ts-w) - (var(--ts-pad) * 2));
  border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.4);
  transition:transform .25s cubic-bezier(.4,0,.2,1), background .25s ease;
  z-index:2; pointer-events:none;
}
.theme-switch:focus-visible{ outline:2px solid #ff3b57; outline-offset:2px; }
@media(hover:hover){ .theme-switch:hover{ border-color:rgba(255,255,255,.32); } }

/* dark = thumb parked bottom (moon side). Color-inverted from site theme:
   in dark mode the switch itself turns WHITE/light-toned so it reads as
   its own distinct color-tone control instead of blending into the navs
   fixed dark backdrop; in light mode it turns dark-toned (the inverse).
   Thumb position + icon opacity still track the real active mode. */
html[data-theme="dark"] .theme-switch{ background:#eef0f2; border-color:#c9ced6; }
html[data-theme="dark"] .theme-switch .ts-thumb{ transform:translateY(calc(var(--ts-h) - var(--ts-w))); background:#1a1c22; }
html[data-theme="dark"] .theme-switch .ts-sun{ opacity:.32; }
html[data-theme="dark"] .theme-switch .ts-moon{ opacity:1; color:#2a2e37; }
html[data-theme="light"] .theme-switch{ background:#12141a; border-color:rgba(255,255,255,.16); }
html[data-theme="light"] .theme-switch .ts-thumb{ transform:translateY(0); background:#eef0f2; }
html[data-theme="light"] .theme-switch .ts-sun{ opacity:1; }
html[data-theme="light"] .theme-switch .ts-moon{ opacity:.32; color:#5b6472; }
/* no explicit choice made yet: follow system preference with the same states */
@media (prefers-color-scheme:dark){
  html:not([data-theme]) .theme-switch{ background:#eef0f2; border-color:#c9ced6; }
  html:not([data-theme]) .theme-switch .ts-thumb{ transform:translateY(calc(var(--ts-h) - var(--ts-w))); background:#1a1c22; }
  html:not([data-theme]) .theme-switch .ts-sun{ opacity:.32; }
  html:not([data-theme]) .theme-switch .ts-moon{ opacity:1; color:#2a2e37; }
}
@media (prefers-color-scheme:light){
  html:not([data-theme]) .theme-switch{ background:#12141a; border-color:rgba(255,255,255,.16); }
  html:not([data-theme]) .theme-switch .ts-thumb{ transform:translateY(0); background:#eef0f2; }
  html:not([data-theme]) .theme-switch .ts-sun{ opacity:1; }
  html:not([data-theme]) .theme-switch .ts-moon{ opacity:.32; color:#5b6472; }
}
@media (max-width:640px){
  .theme-switch{ --ts-w:26px; --ts-h:50px; }
  .theme-switch .ts-icon svg{ width:11px; height:11px; }
}