/* Rail navigation — outline icons inspired by Resend */

.rail-icon--font{
  font-family:'Material Symbols Outlined';
  font-weight:normal;
  font-style:normal;
  font-size:18px;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex-shrink:0;
  -webkit-font-smoothing:antialiased;
  font-variation-settings:'FILL' 0,'wght' 300,'GRAD' 0,'opsz' 24;
}
.rail-icon--svg{
  font-family:unset;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  flex-shrink:0;
  perspective:48px;
}
.rail-icon--ui{font-size:16px;width:16px;height:16px}
.rail-svg{
  width:18px;
  height:18px;
  display:block;
  overflow:visible;
}
.rail-icon--ui .rail-svg{width:16px;height:16px}
.ws-rail-panel-icon .rail-svg,
.rail-picker-item .rail-svg{width:20px;height:20px}

.workspace-rail-item .rail-icon,
.workspace-rail-tool-btn .rail-icon,
.workspace-rail-add-btn .rail-icon{margin-top:.02rem}
.workspace-rail-item--labeled{align-items:center}

/* Motion tokens — playful but clean */
:root{
  --rail-spring:cubic-bezier(0.34,1.42,0.64,1);
  --rail-smooth:cubic-bezier(0.22,1,0.36,1);
  --rail-soft:cubic-bezier(0.16,1,0.3,1);
  --rail-dur:.72s;
}
.rail-svg [class*="rail-"]{
  transform-box:fill-box;
  transition:transform .5s var(--rail-smooth),opacity .4s ease,stroke-dashoffset .55s var(--rail-soft);
}

/* Keyframes — semantic, subtle, with personality */
@keyframes railBookPageTurn{
  0%{transform:rotateY(0deg);opacity:1}
  38%{transform:rotateY(-58deg);opacity:.88}
  62%{transform:rotateY(-64deg);opacity:.82}
  100%{transform:rotateY(0deg);opacity:1}
}
@keyframes railBookLineIn{
  0%{opacity:0;transform:translateX(-3px)}
  100%{opacity:1;transform:translateX(0)}
}
@keyframes railBellRing{
  0%,100%{transform:rotate(0)}
  10%{transform:rotate(10deg)}
  22%{transform:rotate(-8deg)}
  34%{transform:rotate(5deg)}
  46%{transform:rotate(-3deg)}
  58%{transform:rotate(1.5deg)}
}
@keyframes railBellClapper{
  0%,100%{transform:translateY(0)}
  20%{transform:translateY(1.5px)}
  45%{transform:translateY(-1px)}
  70%{transform:translateY(.5px)}
}
@keyframes railCalFlip{
  0%{transform:rotateX(0deg) scale(1)}
  42%{transform:rotateX(-62deg) scale(.96)}
  100%{transform:rotateX(0deg) scale(1)}
}
@keyframes railUploadLift{
  0%,100%{transform:translateY(0)}
  35%{transform:translateY(-2px)}
  55%{transform:translateY(-5px)}
  75%{transform:translateY(-1px)}
}
@keyframes railBubbleBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.035)}
}
@keyframes railTypingDot{
  0%,100%{transform:translateY(0);opacity:.35}
  45%{transform:translateY(-2.5px);opacity:1}
}
@keyframes railDoorPeek{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.78)}
}
@keyframes railDocWrite{
  0%{stroke-dashoffset:14;opacity:.2}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes railCheckDraw{
  0%{stroke-dashoffset:9;opacity:0}
  35%{opacity:1}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes railCompassSpin{
  0%{transform:rotate(-18deg)}
  100%{transform:rotate(342deg)}
}
@keyframes railPlaneArc{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(3.5px,-2.5px)}
}
@keyframes railMoonRock{
  0%,100%{transform:rotate(-6deg)}
  50%{transform:rotate(8deg)}
}
@keyframes railStarTwinkle{
  0%,100%{opacity:.45;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}
@keyframes railGridPop{
  0%,100%{transform:translate(0,0) scale(1)}
  50%{transform:translate(1px,-1.5px) scale(1.06)}
}
@keyframes railRadarSweep{
  0%{transform:rotate(0);opacity:.55}
  70%{opacity:1}
  100%{transform:rotate(300deg);opacity:.55}
}
@keyframes railPadPress{
  0%,100%{transform:scale(1)}
  45%{transform:scale(.5)}
  70%{transform:scale(1.08)}
}
@keyframes railTrendDraw{
  0%{stroke-dashoffset:28;opacity:.25}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes railTrendArrow{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(2.5px,-2.5px)}
}
@keyframes railUserWave{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2.5px)}
}
@keyframes railTasselSwing{
  0%,100%{transform:rotate(0)}
  40%{transform:rotate(14deg)}
  70%{transform:rotate(-4deg)}
}
@keyframes railHandleLift{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-3.5px)}
}
@keyframes railDbStack{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2.5px)}
}
@keyframes railRecBlink{
  0%,100%{opacity:1;transform:scale(1)}
  40%{opacity:.15;transform:scale(.7)}
  70%{opacity:1;transform:scale(1.1)}
}
@keyframes railReelSpin{
  0%{transform:rotate(0)}
  100%{transform:rotate(160deg)}
}
@keyframes railLidOpen{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-2.5px) rotate(-8deg)}
}
@keyframes railHeadNod{
  0%,100%{transform:translateY(0) rotate(0)}
  40%{transform:translateY(1.5px) rotate(3deg)}
  70%{transform:translateY(0) rotate(-1deg)}
}
@keyframes railCloudDrift{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3.5px)}
}
@keyframes railShieldDraw{
  0%{stroke-dashoffset:12;opacity:0}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes railSliderA{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes railSliderB{0%,100%{transform:translateY(0)}50%{transform:translateY(2.5px)}}
@keyframes railPlusPop{
  0%{transform:scale(0);opacity:.4}
  70%{transform:scale(1.08);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes railChevronNudge{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(2.5px)}
}
@keyframes railXDraw{
  0%{stroke-dashoffset:18;opacity:.3}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes railCardFlip{
  0%,100%{transform:rotateY(0) translateX(0)}
  48%{transform:rotateY(-32deg) translateX(-1.5px)}
}
@keyframes railSearchScan{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(22deg)}
}
@keyframes railBranchGrow{
  0%{stroke-dashoffset:16;opacity:.3}
  100%{stroke-dashoffset:0;opacity:1}
}
@keyframes railFrameZoom{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@keyframes railQMarkTilt{
  0%,100%{transform:rotate(0)}
  50%{transform:rotate(8deg)}
}

.rail-doc-line,.rail-check-mark,.rail-fact-check-mark,.rail-shield-line,.rail-trend-line,.rail-x-a,.rail-x-b,.rail-branch{
  stroke-dasharray:14;
  stroke-dashoffset:0;
}

/* Hover — parts only, staggered where it helps */
:is(.workspace-rail-item,.workspace-rail-tool-btn,.workspace-rail-add-btn,.account-rail-btn,.admin-nav button,.rail-picker-item,.workspace-rail-collapse-btn,.workspace-rail-item--group,.ws-rail-panel-item):hover .rail-icon[data-icon="menu_book"] .rail-book-page,
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="study-session"] .rail-book-page{
  transform-origin:left center;
  animation:railBookPageTurn var(--rail-dur) var(--rail-soft);
}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="menu_book"] .rail-book-page-line--1,
:is(.workspace-rail-item,.rail-picker-item):hover .rail-icon[data-icon="study-session"] .rail-book-page-line--1{animation:railBookLineIn .45s var(--rail-soft) .18s both}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="menu_book"] .rail-book-page-line--2,
:is(.workspace-rail-item,.rail-picker-item):hover .rail-icon[data-icon="study-session"] .rail-book-page-line--2{animation:railBookLineIn .45s var(--rail-soft) .28s both}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="menu_book"] .rail-book-page-line--3,
:is(.workspace-rail-item,.rail-picker-item):hover .rail-icon[data-icon="study-session"] .rail-book-page-line--3{animation:railBookLineIn .45s var(--rail-soft) .38s both}

:is(.workspace-rail-item,.workspace-rail-tool-btn,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="notifications"] .rail-bell,
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="notifications_active"] .rail-bell{
  transform-origin:top center;
  animation:railBellRing .85s var(--rail-soft);
}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="notifications"] .rail-bell-clapper,
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="notifications_active"] .rail-bell-clapper{
  animation:railBellClapper .85s var(--rail-soft);
}

:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="calendar_month"] .rail-cal-flip,
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="calendar_today"] .rail-cal-flip{
  transform-origin:top center;
  animation:railCalFlip .68s var(--rail-soft);
}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="upload_file"] .rail-upload-arrow{
  animation:railUploadLift .62s var(--rail-spring);
}

:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="forum"] .rail-chat-bubble,
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="chat"] .rail-chat-bubble{
  transform-origin:center bottom;
  animation:railBubbleBreath .62s var(--rail-soft);
}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="forum"] .rail-chat-dot--1,
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="chat"] .rail-chat-dot--1{animation:railTypingDot .58s var(--rail-spring) .06s}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="forum"] .rail-chat-dot--2,
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="chat"] .rail-chat-dot--2{animation:railTypingDot .58s var(--rail-spring) .16s}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="forum"] .rail-chat-dot--3,
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="chat"] .rail-chat-dot--3{animation:railTypingDot .58s var(--rail-spring) .26s}

:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="home"] .rail-home-door{
  transform-origin:bottom center;
  animation:railDoorPeek .55s var(--rail-soft);
}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="description"] .rail-doc-line--1,
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="assignment"] .rail-doc-line--1{animation:railDocWrite .5s var(--rail-soft) .08s forwards}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="description"] .rail-doc-line--2,
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="assignment"] .rail-doc-line--2{animation:railDocWrite .5s var(--rail-soft) .22s forwards}

:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="checklist"] .rail-check-mark--1{animation:railCheckDraw .48s var(--rail-soft) .1s forwards}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="checklist"] .rail-check-mark--2{animation:railCheckDraw .48s var(--rail-soft) .26s forwards}
:is(.workspace-rail-item,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="fact_check"] .rail-fact-check-mark{animation:railCheckDraw .52s var(--rail-soft) .12s forwards}

:is(.workspace-rail-item,.workspace-rail-tool-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="travel_explore"] .rail-compass-needle{
  transform-origin:center;
  animation:railCompassSpin 1s var(--rail-soft);
}
:is(.workspace-rail-item,.workspace-rail-tool-btn,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="flight_takeoff"] .rail-plane,
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="connecting_airports"] .rail-plane{
  animation:railPlaneArc .68s var(--rail-spring);
}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="bedtime"] .rail-moon{
  transform-origin:center;
  animation:railMoonRock .85s var(--rail-soft);
}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="bedtime"] .rail-moon-star{
  animation:railStarTwinkle .7s var(--rail-soft);
}

:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="widgets"] .rail-grid-tile,
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="grid_view"] .rail-grid-tile{animation:railGridPop .48s var(--rail-spring)}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="widgets"] .rail-grid-tile--2,
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="grid_view"] .rail-grid-tile--2{animation-delay:.07s}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="widgets"] .rail-grid-tile--3,
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="grid_view"] .rail-grid-tile--3{animation-delay:.14s}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="widgets"] .rail-grid-tile--4,
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="grid_view"] .rail-grid-tile--4{animation-delay:.21s}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="dashboard"] .rail-dash-side{animation:railGridPop .48s var(--rail-spring) .06s}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="dashboard"] .rail-dash-side--2{animation:railGridPop .48s var(--rail-spring) .14s}

:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="account_tree"] .rail-branch{animation:railBranchGrow .55s var(--rail-soft)}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="account_tree"] .rail-branch:last-child{animation-delay:.12s}

:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="radar"] .rail-radar-sweep,
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="briefing"] .rail-radar-sweep{
  transform-origin:12px 12px;
  animation:railRadarSweep 1.05s var(--rail-soft);
}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="sports_esports"] .rail-pad-btn{animation:railPadPress .42s var(--rail-spring)}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="sports_esports"] .rail-pad-btn--2{animation:railPadPress .42s var(--rail-spring) .1s}

:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="trending_up"] .rail-trend-line{animation:railTrendDraw .62s var(--rail-soft) forwards}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="trending_up"] .rail-trend-arrow{animation:railTrendArrow .62s var(--rail-spring) .2s}

:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="groups"] .rail-user--2{animation:railUserWave .55s var(--rail-spring)}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="groups"] .rail-user-body--2{animation:railUserWave .55s var(--rail-spring) .08s}

:is(.workspace-rail-item,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="school"] .rail-tassel{
  transform-origin:top center;
  animation:railTasselSwing .68s var(--rail-soft);
}
:is(.workspace-rail-item,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="luggage"] .rail-luggage-handle{
  animation:railHandleLift .55s var(--rail-spring);
}
:is(.workspace-rail-item,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="database"] .rail-db-mid{
  animation:railDbStack .58s var(--rail-soft);
}
:is(.workspace-rail-item,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="videocam"] .rail-rec-dot{
  animation:railRecBlink .62s var(--rail-soft);
}
:is(.workspace-rail-item,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="movie"] .rail-film-reel{
  transform-origin:center;
  animation:railReelSpin .75s var(--rail-soft);
}
:is(.workspace-rail-item,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="work"] .rail-case-lid{
  transform-origin:bottom center;
  animation:railLidOpen .58s var(--rail-soft);
}
:is(.workspace-rail-item,.account-rail-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="person"] .rail-person-head{
  animation:railHeadNod .52s var(--rail-soft);
}
:is(.workspace-rail-item,.account-rail-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="cloud"] .rail-cloud{
  animation:railCloudDrift .75s var(--rail-soft);
}
:is(.workspace-rail-item,.account-rail-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="shield"] .rail-shield-line{
  animation:railShieldDraw .52s var(--rail-soft) .1s forwards;
}
:is(.workspace-rail-item,.account-rail-btn,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="tune"] .rail-slider-knob{animation:railSliderA .52s var(--rail-spring)}
:is(.workspace-rail-item,.account-rail-btn,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="tune"] .rail-slider-knob--2{animation:railSliderB .52s var(--rail-spring) .08s}
:is(.workspace-rail-item,.account-rail-btn,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="tune"] .rail-slider-knob--3{animation:railSliderA .52s var(--rail-spring) .16s}

:is(.workspace-rail-add-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="add"] .rail-plus-h,
:is(.workspace-rail-add-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="add"] .rail-plus-v{
  transform-origin:center;
  animation:railPlusPop .42s var(--rail-spring);
}
:is(.workspace-rail-add-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="add"] .rail-plus-v{animation-delay:.06s}

:is(.workspace-rail-collapse-btn,.workspace-rail-item--group):hover .rail-icon[data-icon="expand_more"] .rail-chevron,
:is(.workspace-rail-collapse-btn):hover .rail-icon[data-icon="chevron_left"] .rail-chevron,
:is(.workspace-rail-collapse-btn):hover .rail-icon[data-icon="chevron_right"] .rail-chevron{
  animation:railChevronNudge .48s var(--rail-spring);
}
:is(.account-rail-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="close"] .rail-x-a{animation:railXDraw .42s var(--rail-soft) forwards}
:is(.account-rail-btn,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="close"] .rail-x-b{animation:railXDraw .42s var(--rail-soft) .1s forwards}

:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="style"] .rail-card--front,
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="flashcards"] .rail-card--front{
  transform-origin:left center;
  animation:railCardFlip .68s var(--rail-soft);
}
:is(.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="search"] .rail-search-handle{
  transform-origin:11px 11px;
  animation:railSearchScan .55s var(--rail-soft);
}
:is(.workspace-rail-item,.admin-nav button,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="image"] .rail-frame-sun{
  animation:railStarTwinkle .6s var(--rail-soft);
}
:is(.workspace-rail-item,.rail-picker-item,.ws-rail-panel-item):hover .rail-icon[data-icon="quiz"] .rail-q-mark{
  transform-origin:center;
  animation:railQMarkTilt .55s var(--rail-spring);
}

@media (prefers-reduced-motion:reduce){
  .rail-svg [class*="rail-"]{transition:none!important}
  :is(.workspace-rail-item,.workspace-rail-tool-btn,.workspace-rail-add-btn,.account-rail-btn,.admin-nav button,.rail-picker-item,.workspace-rail-collapse-btn,.ws-rail-panel-item) .rail-svg [class*="rail-"]{
    animation:none!important;
    transform:none!important;
    opacity:1!important;
    stroke-dashoffset:0!important;
  }
}

.workspace-rail-group-chevron.rail-icon{
  width:16px;height:16px;
  margin-left:auto;margin-top:0;
}

/* Dark mode — ghost pill, white active */
body:not(.light-theme) .workspace-rail--passenger .workspace-rail-item,
body:not(.light-theme) .workspace-rail--student .workspace-rail-item,
body:not(.light-theme) .workspace-rail-menu--pro .workspace-rail-item,
body:not(.light-theme) .workspace-rail .workspace-rail-item{
  color:rgba(255,255,255,.44);
  transition:color .22s ease,background .22s ease;
}
body:not(.light-theme) .workspace-rail--passenger .workspace-rail-item:hover,
body:not(.light-theme) .workspace-rail--student .workspace-rail-item:hover,
body:not(.light-theme) .workspace-rail-menu--pro .workspace-rail-item:hover,
body:not(.light-theme) .workspace-rail .workspace-rail-item:hover{
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.055);
}
body:not(.light-theme) .workspace-rail--passenger .workspace-rail-item.active,
body:not(.light-theme) .workspace-rail--student .workspace-rail-item.active,
body:not(.light-theme) .workspace-rail-menu--pro .workspace-rail-item.active,
body:not(.light-theme) .workspace-rail .workspace-rail-item.active{
  color:#fff;
  background:rgba(255,255,255,.09);
}
body:not(.light-theme) .workspace-rail--passenger .workspace-rail-item.active .workspace-rail-label,
body:not(.light-theme) .workspace-rail--passenger .workspace-rail-item.active .rail-icon,
body:not(.light-theme) .workspace-rail--student .workspace-rail-item.active .workspace-rail-label,
body:not(.light-theme) .workspace-rail--student .workspace-rail-item.active .rail-icon,
body:not(.light-theme) .workspace-rail-menu--pro .workspace-rail-item.active .workspace-rail-label,
body:not(.light-theme) .workspace-rail-menu--pro .workspace-rail-item.active .rail-icon,
body:not(.light-theme) .workspace-rail .workspace-rail-item.active .rail-icon{
  color:#fff;
}
body:not(.light-theme) .workspace-rail-group.has-active-child .workspace-rail-item--group .workspace-rail-label,
body:not(.light-theme) .workspace-rail-group.has-active-child .workspace-rail-item--group .rail-icon:first-child{
  color:rgba(255,255,255,.82);
}
body:not(.light-theme) .workspace-rail-item--group:hover,
body:not(.light-theme) .workspace-rail-item--group.active{
  background:rgba(255,255,255,.05);
}

/* Light mode */
body.light-theme .workspace-rail--passenger .workspace-rail-item,
body.light-theme .workspace-rail--student .workspace-rail-item,
body.light-theme .workspace-rail-menu--pro .workspace-rail-item,
body.light-theme .workspace-rail .workspace-rail-item{
  color:rgba(15,26,20,.52);
}
body.light-theme .workspace-rail--passenger .workspace-rail-item:hover,
body.light-theme .workspace-rail--student .workspace-rail-item:hover,
body.light-theme .workspace-rail-menu--pro .workspace-rail-item:hover,
body.light-theme .workspace-rail .workspace-rail-item:hover{
  color:rgba(15,26,20,.88);
  background:rgba(0,0,0,.045);
}
body.light-theme .workspace-rail--passenger .workspace-rail-item.active,
body.light-theme .workspace-rail--student .workspace-rail-item.active,
body.light-theme .workspace-rail-menu--pro .workspace-rail-item.active,
body.light-theme .workspace-rail .workspace-rail-item.active{
  color:#0f1a14;
  background:rgba(0,0,0,.07);
}
body.light-theme .workspace-rail--passenger .workspace-rail-item.active .workspace-rail-label,
body.light-theme .workspace-rail--passenger .workspace-rail-item.active .rail-icon,
body.light-theme .workspace-rail--student .workspace-rail-item.active .workspace-rail-label,
body.light-theme .workspace-rail--student .workspace-rail-item.active .rail-icon,
body.light-theme .workspace-rail-menu--pro .workspace-rail-item.active .workspace-rail-label,
body.light-theme .workspace-rail-menu--pro .workspace-rail-item.active .rail-icon,
body.light-theme .workspace-rail .workspace-rail-item.active .rail-icon{
  color:#0f1a14;
}
body.light-theme .workspace-rail-group.has-active-child .workspace-rail-item--group .workspace-rail-label,
body.light-theme .workspace-rail-group.has-active-child .workspace-rail-item--group .rail-icon:first-child{
  color:#0f1a14;
}
body.light-theme .workspace-rail-item--group:hover,
body.light-theme .workspace-rail-item--group.active{
  background:rgba(0,0,0,.04);
}

/* Footer shortcut slots */
.workspace-rail-tool-btn{
  border:0;
  border-radius:.65rem;
  background:transparent;
  transition:color .22s ease,background .22s ease,transform .22s ease;
}
body:not(.light-theme) .workspace-rail-tool-btn{color:rgba(255,255,255,.44)}
body:not(.light-theme) .workspace-rail-tool-btn:hover{color:rgba(255,255,255,.82);background:rgba(255,255,255,.055)}
body.light-theme .workspace-rail-tool-btn{color:rgba(15,26,20,.52);background:transparent;border:0}
body.light-theme .workspace-rail-tool-btn:hover{color:#0f1a14;background:rgba(0,0,0,.045)}
.workspace-rail-tool-btn .rail-icon{font-size:17px;width:17px;height:17px}

/* Add shortcut button */
.workspace-rail-add-btn{
  border:1px dashed rgba(255,255,255,.14);
  background:transparent;
  color:rgba(255,255,255,.5);
  font-weight:700;
  transition:color .22s ease,background .22s ease,border-color .22s ease;
}
.workspace-rail-add-btn:hover{
  color:rgba(255,255,255,.82);
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.2);
  opacity:1;
}
body.light-theme .workspace-rail-add-btn{
  border-color:rgba(0,0,0,.12);
  background:transparent;
  color:rgba(15,26,20,.52);
}
body.light-theme .workspace-rail-add-btn:hover{
  color:#0f1a14;
  background:rgba(0,0,0,.04);
  border-color:rgba(0,0,0,.16);
}
body.workspace-rail-collapsed .workspace-rail-add-btn span:not(.rail-icon){display:none}

/* Account rail */
.account-rail-btn{
  border-radius:.72rem;
  transition:color .22s ease,background .22s ease;
}
body:not(.light-theme) .account-rail-btn{color:rgba(255,255,255,.44)}
body:not(.light-theme) .account-rail-btn:hover,
body:not(.light-theme) .account-rail-btn.is-active{
  color:#fff;
  background:rgba(255,255,255,.09);
}
body.light-theme .account-rail-btn{color:rgba(15,26,20,.48)}
body.light-theme .account-rail-btn:hover,
body.light-theme .account-rail-btn.is-active{
  color:#0f1a14;
  background:rgba(0,0,0,.06);
}
.account-rail-btn .rail-icon{font-size:18px}

/* Panel list icons */
.ws-rail-panel-icon.rail-icon{
  width:20px;height:20px;font-size:20px;
  color:rgba(255,255,255,.55);
}
body.light-theme .ws-rail-panel-icon.rail-icon{color:rgba(15,26,20,.52)}

/* Rail picker */
.rail-picker-item .rail-icon{
  width:20px;height:20px;font-size:20px;
  color:inherit;
}

.workspace-rail-item.active::before{display:none!important}
body.workspace-rail-collapsed .workspace-rail-item--labeled .rail-icon,
body.workspace-rail-collapsed .workspace-rail-menu--pro .workspace-rail-item .rail-icon{margin-top:0}
.workspace-rail-item:active .rail-icon--font,
.account-rail-btn:active .rail-icon--font,
.admin-nav button:active .rail-icon--font{opacity:.7}

/* Admin sidebar */
.admin-nav button{
  transition:color .22s ease,background .22s ease;
}
.admin-nav button .rail-icon{color:inherit}
.admin-nav button:hover,
.admin-nav button.active{
  background:rgba(255,255,255,.07);
  border-color:transparent;
}