/* Infällbar sidomeny (ikon-rail som fälls ut ovanpå innehållet) och overlay-scrollbar. Laddas sist; logiken ligger i meny.js.
   Animationer bara med transform och opacity, 150–200 ms ease-out. prefers-reduced-motion stänger av dem (regeln i app.css). */
:root{--rail:56px;--meny:232px;--meny-ease:cubic-bezier(0,0,.2,1)}

/* ---------------------------------------------------------------- overlay-scrollbar */
/* webbläsarens egna scrollbars döljs överallt (de tar ingen bredd), meny.js ritar en tunn thumb ovanpå innehållet */
*{scrollbar-width:none}
*::-webkit-scrollbar{display:none;width:0;height:0}
.osb{position:fixed;top:0;left:0;z-index:70;opacity:0;pointer-events:none;touch-action:none;transition:opacity .18s var(--meny-ease)}
.osb.syns{opacity:1;pointer-events:auto}
.osb::before{content:"";position:absolute;border-radius:var(--radius-full);background:color-mix(in srgb,var(--ink-muted) 50%,transparent);transition:transform .15s var(--meny-ease),opacity .15s var(--meny-ease)}
/* träffytan är 12 px, själva thumben 5 px och 8 px vid hovring/drag */
.osb.v{width:12px}
.osb.v::before{top:0;bottom:0;right:2px;width:8px;transform:scaleX(.625);transform-origin:right}
.osb.h{height:12px}
.osb.h::before{left:0;right:0;bottom:2px;height:8px;transform:scaleY(.625);transform-origin:bottom}
.osb:hover::before,.osb.drar::before{transform:none;background:color-mix(in srgb,var(--ink-muted) 75%,transparent)}
.osb.ljus::before{background:rgba(201,214,230,.36)}
.osb.ljus:hover::before,.osb.ljus.drar::before{background:rgba(201,214,230,.62)}
body.osb-drar{user-select:none;-webkit-user-select:none}

/* ---------------------------------------------------------------- sidomenyn, gemensamt */
/* webbläsarens 8 px kantmarginal bort, så att den fasta menyn och innehållet ligger kant i kant */
body{margin:0}
/* clip i stället för hidden: annars rullar webbläsaren panelen i sidled när en knapp i den infällda menyn får fokus */
.side{padding:0;display:block;overflow:clip}
.side-in{height:100%;display:flex;flex-direction:column;gap:22px;padding:22px 8px 14px}
.side .logo{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:48px;padding:0 0 0 8px;flex:none}
.side .logo img{width:auto;height:28px}
.meny-nal{all:unset;box-sizing:border-box;position:absolute;right:2px;top:50%;margin-top:-17px;width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-md);cursor:pointer}
.meny-nal svg{opacity:.6;transition:opacity .15s var(--meny-ease),transform .15s var(--meny-ease)}
.meny-nal:hover{background:rgba(255,255,255,.08)}
.meny-nal:hover svg,.meny-nal[aria-pressed="true"] svg{opacity:1}
.meny-nal[aria-pressed="true"]{background:rgba(0,181,226,.16)}
.meny-nal[aria-pressed="false"] svg{transform:rotate(30deg)}
.meny-nal:focus-visible{outline:2px solid var(--sky)}
/* bara menylistan scrollar; logotypen står kvar överst och användarraden längst ner */
.nav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;margin:0 -8px;padding:0 8px 4px}
.nav button,.nav .grp{white-space:nowrap}
.nav button{flex:none}
.side .foot{flex:none;margin-top:0;padding:10px 0 0;border-top:1px solid rgba(255,255,255,.08);gap:2px;font-size:12px}
.side .foot .side-rad{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:11px;padding:7px 10px;border-radius:var(--radius-md);color:#9FC6E8;white-space:nowrap;cursor:pointer;line-height:1.3}
.side .foot div.side-rad{cursor:default}
.side .foot .side-rad img,.side .foot .side-rad svg{flex:none;width:20px;height:20px;opacity:.72}
.side .foot a.side-rad:hover,.side .foot button.side-rad:hover{background:rgba(255,255,255,.06);color:#fff}
.side .foot .side-rad:focus-visible{outline:2px solid var(--sky)}

/* ---------------------------------------------------------------- dator: rail 56 px, fälls ut ovanpå innehållet */
@media (min-width:861px){
  .app{display:block;padding-left:var(--rail)}
  .app.meny-fast{padding-left:var(--meny)}
  /* panelen är alltid 232 px bred och skjuts åt vänster; innehållet skjuts tillbaka lika mycket, så ikonerna står still medan panelen öppnas */
  .side{position:fixed;top:0;left:0;bottom:0;width:var(--meny);height:auto;z-index:15;transform:translateX(calc(var(--rail) - var(--meny)));transition:transform .18s var(--meny-ease)}
  .side-in{transform:translateX(calc(var(--meny) - var(--rail)));transition:transform .18s var(--meny-ease)}
  .app.meny-ut .side,.app.meny-ut .side-in,.app.meny-fast .side,.app.meny-fast .side-in{transform:none}
  .side-skugga{position:fixed;top:0;left:0;bottom:0;width:var(--meny);z-index:14;pointer-events:none;box-shadow:10px 0 32px rgba(0,20,46,.28);opacity:0;transform:translateX(calc(var(--rail) - var(--meny)));transition:opacity .18s var(--meny-ease),transform .18s var(--meny-ease)}
  .app.meny-ut:not(.meny-fast) .side-skugga{opacity:1;transform:none}
  /* text och nål tonar in när menyn är ute */
  .nav button span,.nav .grp,.side .foot .side-rad span,.meny-nal{opacity:0;transition:opacity .15s var(--meny-ease)}
  :is(.app.meny-ut,.app.meny-fast) :is(.nav button span,.nav .grp,.side .foot .side-rad span,.meny-nal){opacity:1}
  .side::after{opacity:0;transition:opacity .18s var(--meny-ease)}
  :is(.app.meny-ut,.app.meny-fast) .side::after{opacity:.09}
}

/* ---------------------------------------------------------------- mobil: drawer som öppnas med menyknappen */
@media (max-width:860px){
  .side-skugga,.meny-nal{display:none}
  .side{overflow:clip;padding:0}
  .side-in{padding:calc(18px + env(safe-area-inset-top,0px)) 14px calc(14px + env(safe-area-inset-bottom,0px))}
  .nav{margin:0 -14px;padding:0 14px 4px}
  .side .foot{font-size:13px}
  .side .foot .side-rad{padding:10px}
}