/* ============================================================
   deck.css - presentation mechanics & chrome
   Header, sidebar rail, slide counter, transitions, reduced motion.
   Chrome sets its own font-size so it stays a constant, usable size
   independent of the stage's responsive rem scaling.
   ============================================================ */

/* ============================ HEADER ============================ */
.deck-header{
  position:fixed;top:0;left:var(--rail-offset,0px);right:0;height:clamp(48px,6vh,66px);z-index:50;
  display:flex;align-items:center;
  gap:1rem;padding:0 clamp(14px,2vw,28px);
  font-size:clamp(12px,1.05vw,15px);
  color:#fff;pointer-events:none;
  transition:left .42s var(--ease);
}
.deck-header > *{pointer-events:auto;}

/* hamburger / rail toggle */
.rail-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:2.6em;height:2.6em;border-radius:.6em;cursor:pointer;
  background:rgba(20,23,27,.5);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);color:#fff;}
.rail-toggle:hover{background:rgba(20,23,27,.75);}
.rail-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
.rail-toggle .bars{position:relative;width:1.1em;height:.75em;}
.rail-toggle .bars span{position:absolute;left:0;width:100%;height:2px;border-radius:2px;
  background:currentColor;transition:transform .3s var(--ease),opacity .2s;}
.rail-toggle .bars span:nth-child(1){top:0;}
.rail-toggle .bars span:nth-child(2){top:50%;transform:translateY(-50%);}
.rail-toggle .bars span:nth-child(3){bottom:0;}
.rail-open .rail-toggle .bars span:nth-child(1){top:50%;transform:translateY(-50%) rotate(45deg);}
.rail-open .rail-toggle .bars span:nth-child(2){opacity:0;}
.rail-open .rail-toggle .bars span:nth-child(3){bottom:50%;transform:translateY(50%) rotate(-45deg);}

/* ============================ RAIL (slide list) ============================ */
.rail{
  position:fixed;top:0;left:0;bottom:0;z-index:45;
  width:min(86vw,var(--rail-w));
  display:flex;flex-direction:column;
  background:rgba(16,18,22,.92);backdrop-filter:blur(18px);
  border-right:1px solid rgba(255,255,255,.1);
  color:#fff;font-size:clamp(12px,1vw,14px);
  transform:translateX(-100%);
  transition:transform .42s var(--ease);
  box-shadow:24px 0 60px -30px rgba(0,0,0,.7);
}
.rail-open .rail{transform:translateX(0);}
/* left padding clears the fixed header toggle (X) so the logo/brand
   in the rail header is never overlapped by it */
.rail .rail-head{display:flex;align-items:center;gap:.7em;
  padding:1.1em 1.2em 1.1em 74px;border-bottom:1px solid rgba(255,255,255,.08);
  font-family:var(--mono);font-size:.85em;letter-spacing:.16em;text-transform:uppercase;
  color:var(--d-mut);min-height:clamp(48px,6vh,66px);}
.rail .rail-head .logo{width:1.5em;height:1.5em;flex:none;
  background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath fill=%22%23e26028%22 d=%22M12 1 H52 Q63 1 63 12 V41 Q63 52 52 52 H48 L60 64 L33 52 H12 Q1 52 1 41 V12 Q1 1 12 1 Z%22/%3E%3Cpath fill=%22%23ffffff%22 fill-rule=%22evenodd%22 d=%22M29.10 31.75Q29.10 35.39 26.40 37.31Q23.70 39.24 18.48 39.24Q13.72 39.24 11.01 37.55Q8.30 35.86 7.53 32.43L12.54 31.61Q13.05 33.58 14.53 34.46Q16.00 35.35 18.62 35.35Q24.05 35.35 24.05 32.05Q24.05 30.99 23.43 30.31Q22.81 29.62 21.67 29.16Q20.54 28.71 17.32 28.06Q14.54 27.41 13.45 27.01Q12.36 26.61 11.49 26.08Q10.61 25.54 9.99 24.79Q9.38 24.03 9.03 23.01Q8.69 21.99 8.69 20.67Q8.69 17.32 11.21 15.53Q13.74 13.75 18.55 13.75Q23.16 13.75 25.47 15.19Q27.78 16.63 28.45 19.95L23.42 20.64Q23.03 19.04 21.85 18.23Q20.66 17.42 18.45 17.42Q13.74 17.42 13.74 20.37Q13.74 21.34 14.24 21.96Q14.74 22.57 15.72 23.00Q16.71 23.43 19.71 24.08Q23.28 24.84 24.82 25.48Q26.36 26.12 27.25 26.97Q28.15 27.83 28.62 29.01Q29.10 30.20 29.10 31.75Z M43.67 35.17Q45.69 35.17 47.59 34.59Q49.49 34.00 50.53 33.08V29.66H44.48V25.82H55.27V34.93Q53.31 36.95 50.15 38.09Q47.00 39.24 43.53 39.24Q37.49 39.24 34.23 35.89Q30.98 32.54 30.98 26.39Q30.98 20.27 34.25 17.01Q37.52 13.75 43.66 13.75Q52.37 13.75 54.75 20.20L49.97 21.64Q49.19 19.76 47.54 18.79Q45.89 17.83 43.66 17.83Q40.00 17.83 38.10 20.04Q36.20 22.25 36.20 26.39Q36.20 30.59 38.16 32.88Q40.12 35.17 43.67 35.17Z%22/%3E%3C/svg%3E") no-repeat center/contain;}
.rail ol{list-style:none;margin:0;padding:.6em 0;overflow-y:auto;flex:1;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;}
.rail li{margin:0;}
.rail a{display:flex;align-items:flex-start;gap:.85em;
  padding:.62em 1.3em;text-decoration:none;color:var(--d-mut);
  border-left:3px solid transparent;transition:background .2s,color .2s,border-color .2s;}
.rail a:hover{background:rgba(255,255,255,.05);color:#fff;}
.rail a .rn{font-family:var(--mono);font-size:.82em;letter-spacing:.06em;color:var(--d-faint);flex:none;min-width:2.2em;line-height:1.4;}
/* slide title wraps onto the next line when longer than the fixed rail width */
.rail a .rt{font-weight:600;line-height:1.25;min-width:0;overflow-wrap:anywhere;}
.rail a[aria-current="true"]{color:#fff;background:rgba(226,96,40,.14);border-left-color:var(--orange);}
.rail a[aria-current="true"] .rn{color:var(--orange);}
.rail a:focus-visible{outline:2px solid var(--orange);outline-offset:-2px;}
.rail .rail-foot{padding:1em 1.3em;border-top:1px solid rgba(255,255,255,.08);
  font-size:.8em;color:var(--d-faint);}

/* scrim behind rail on narrow screens */
.rail-scrim{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.45);
  opacity:0;visibility:hidden;transition:opacity .42s,visibility .42s;}
.rail-open .rail-scrim{opacity:1;visibility:visible;}
/* ---- Desktop: opening the rail PUSHES the content (no overlap).
   --rail-offset shrinks the deck and the stage rescales into the
   remaining width. Below 1100px the offset stays 0 and the rail
   overlays the content instead (mobile behaviour). ---- */
@media (min-width:1100px){
  .rail-open{--rail-offset:var(--rail-w);}
  .rail-open .rail-scrim{opacity:0;visibility:hidden;}
  /* no header toggle overlapping the rail on desktop -> normal padding */
  .rail .rail-head{padding-left:1.3em;}
}

/* ============================ SLIDE TRANSITION POLISH ============================ */
/* incoming slide content drifts up subtly as it fades in */
.screen{transform:translateY(0);}
.screen:not(.active) .body{transform:translateY(14px);opacity:0;}
.screen.active .body{transform:translateY(0);opacity:1;
  transition:transform .55s var(--ease) .06s,opacity .5s var(--ease) .06s;}

/* progress hairline at very bottom */
.deck-progress{position:fixed;left:var(--rail-offset,0px);bottom:0;height:3px;z-index:40;
  background:var(--orange);width:0;transition:width .45s var(--ease),left .42s var(--ease);
  box-shadow:0 0 12px rgba(226,96,40,.6);}

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion:reduce){
  .screen,.screen.active .body,.screen:not(.active) .body,
  .rail,.rail-scrim,.deck-progress,.rail-toggle .bars span{transition:none !important;}
  .screen:not(.active) .body{transform:none;opacity:1;}
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;}
}

/* no-JS fallback: stack all screens and reveal their content for SEO/readers */
.no-js .screen{position:relative;opacity:1;visibility:visible;}
.no-js .screen .body{opacity:1 !important;transform:none !important;}
.no-js .deck-header,.no-js .rail,.no-js .rail-scrim,.no-js .deck-progress{display:none;}
                                                                           