.rail{background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:4px;position:sticky;top:0;height:100vh}
.rail-brand{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;margin-bottom:18px;overflow:hidden}
.rail-brand img{width:100%;height:100%;object-fit:contain}
.rail-btn{width:40px;height:40px;border:0;border-radius:10px;display:grid;place-items:center;color:var(--muted);background:transparent;cursor:pointer;position:relative;transition:background .12s,color .12s}.rail-btn[hidden]{display:none}
.rail-btn:hover,.rail-btn:focus-visible{color:var(--text);background:var(--panel);outline:none}
.rail-btn.active{color:var(--accent);background:var(--accent-soft)}
.rail-btn svg{width:19px;height:19px}
.rail-tip{position:absolute;left:52px;top:50%;transform:translateY(-50%);background:var(--panel2);border:1px solid var(--line);padding:5px 9px;border-radius:6px;font-size:11.5px;font-weight:650;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s,transform .12s;box-shadow:0 8px 20px rgba(0,0,0,.35);z-index:20}
.rail-btn:hover .rail-tip,.rail-btn:focus-visible .rail-tip{opacity:1;transform:translateY(-50%) translateX(3px)}
.rail-spacer{flex:1}
body.recall-navigation{padding-left:64px}
.recall-navigation .app-shell{grid-template-columns:minmax(0,1fr)}
.recall-navigation .rail{position:fixed;inset:0 auto 0 0;width:64px;height:100vh;height:100dvh;z-index:100;background:var(--bg2,#0b0d10);color:var(--text,#eef1f6)}
.recall-navigation .rail-btn{flex-shrink:0;padding:0;text-decoration:none;color:var(--muted,#7c8494)}
.recall-navigation .rail-brand{flex-shrink:0}
.recall-navigation .rail-btn.active{color:var(--accent,#4169e1);background:var(--accent-soft,rgba(65,105,225,.15))}
.recall-navigation .rail-btn:focus-visible{outline:2px solid var(--accent,#4169e1);outline-offset:2px}
.recall-navigation main.roles-main{width:min(1100px,94%)}
.recall-navigation .tuto{width:min(860px,92%)}
dialog.navigation-panel[open]{position:fixed;inset:16px 16px 16px 80px;width:auto;max-width:none;height:auto;max-height:calc(100dvh - 32px);margin:0;z-index:90;overflow:auto;box-shadow:0 0 0 100vmax rgba(3,6,10,.85)}
@media (prefers-reduced-motion:no-preference){
  .recall-navigation main,.recall-navigation .pb-shell,.recall-navigation .wrap,.navigation-panel[open],.review-layout:not([hidden]),#statsPane:not([hidden]),#highlightsPane:not([hidden]),#reglagesPane:not([hidden]),#debriefPane:not([hidden]){animation:recall-enter 160ms ease-out}
  @keyframes recall-enter{from{opacity:0}to{opacity:1}}
}