/* App-shell: grid, moerk sidebar, navigationsskinner, brugerfelt
   Udtrukket fra index.html (linje 85-142 i den oprindelige <style>-blok).
   Raekkefoelgen af <link>-tags i index.html skal bevares - kaskaden afhaenger af den. */

/* ---------- app shell (mørk venstre sidebar) ---------- */
.app{display:none;min-height:100%;grid-template-columns:300px 1fr}
.app.is-on{display:grid}
.side{background:var(--ink);color:#e9e6e1;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side-logo{padding:1.1rem 1.1rem .7rem}
.side-logo img{width:150px;display:block}
.main{min-width:0;display:flex;flex-direction:column}
.view{padding:2rem 2.2rem 3rem;max-width:var(--maxw);width:100%}

.rail-top{flex:1;overflow-y:auto;padding:.3rem .7rem .8rem}
.rail-bottom{border-top:1px solid rgba(255,255,255,.12);padding:.7rem .7rem .3rem}
.rail-h{font-size:.7rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--orange);
  margin:.5rem .5rem .5rem}
.rail-group{font-size:.66rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#8f8a83;
  margin:1.1rem .55rem .45rem}
.rail-group:first-child{margin-top:.2rem}
.rail-group.accent{color:var(--orange)}
.theme-nav{background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:.35rem;margin-bottom:.3rem}
.theme-all{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;background:transparent;border:none;
  color:#e9e6e1;padding:.5rem .55rem;border-radius:8px;font-weight:700;font-size:.86rem;cursor:pointer;font-family:var(--sans);margin-bottom:.15rem}
.theme-all:hover{background:rgba(255,255,255,.07);color:#fff}
.theme-all.active{background:var(--grad);color:#3a2a26}
.theme-navitem{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;background:transparent;border:none;
  color:#d5d2cc;padding:.4rem .5rem;border-radius:8px;font-weight:600;font-size:.85rem;cursor:pointer;font-family:var(--sans);line-height:1.2}
.theme-navitem .tn{width:22px;height:22px;flex:0 0 22px;border-radius:6px;background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:.72rem}
.theme-navitem:hover{background:rgba(255,255,255,.07);color:#fff}
.theme-navitem.active{background:rgba(255,255,255,.12);color:#fff}
.theme-navitem.active .tn{background:var(--grad);color:#3a2a26}
.gsec{margin-bottom:.1rem}
.gsec-head{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:transparent;border:none;
  padding:.5rem .55rem;border-radius:9px;font-weight:700;font-size:.9rem;color:#e9e6e1;font-family:var(--sans);cursor:pointer}
.gsec-head:hover{background:rgba(255,255,255,.07);color:#fff}
.gsec-head.active{background:var(--grad);color:#3a2a26}
.gsec-head .gn{width:24px;height:24px;flex:0 0 24px;border-radius:7px;background:rgba(255,255,255,.14);color:#fff;
  display:grid;place-items:center;font-family:var(--serif);font-weight:900;font-size:.8rem}
.gsec-head.active .gn{background:rgba(255,255,255,.5);color:#3a2a26}
.gsec-head .gt{flex:1;line-height:1.2}
.gsec-head .gchev{font-size:.7rem;opacity:.6}
.gsub{display:none;padding:.2rem 0 .5rem .5rem;margin-left:1.05rem;border-left:2px solid rgba(255,255,255,.15)}
.gsec.open .gsub{display:block}
.gsub button{display:block;width:100%;text-align:left;background:transparent;border:none;color:#b9b6b0;
  padding:.35rem .55rem;border-radius:7px;font-size:.84rem;font-weight:600;font-family:var(--sans);line-height:1.25;cursor:pointer}
.gsub button:hover{background:rgba(255,255,255,.06);color:#fff}
.cnav button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;background:transparent;border:none;
  padding:.5rem .55rem;border-radius:9px;font-weight:600;font-size:.9rem;color:#cfccc6;font-family:var(--sans);cursor:pointer}
.cnav button .ico{width:18px;height:18px;flex:0 0 18px;color:#9a9690}
.cnav button:hover{background:rgba(255,255,255,.07);color:#fff}
.cnav button.active{background:var(--grad);color:#3a2a26}
.cnav button.active .ico{color:#3a2a26}

.side-me{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem;border-top:1px solid rgba(255,255,255,.12)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--grad);display:grid;place-items:center;
  color:#3a2a26;font-weight:800;font-size:.85rem;flex:0 0 34px}
.side-me .who{font-size:.83rem;line-height:1.25;min-width:0}
.side-me .who b{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.side-me .who span{color:#a9a6a0}
.side-me .out{margin-left:auto;background:transparent;border:none;color:#a9a6a0;font-size:.78rem;text-decoration:underline;cursor:pointer}

/* ---------- mobilmenu (burger + drawer) ----------
   Laa oprindeligt til sidst i <style>-blokken, dvs. EFTER media queryen i
   responsive.css. Da `.burger{display:none}` og `.burger{display:grid}` har
   samme specificitet, vandt `display:none` paa alle skaermbredder - burgeren
   var usynlig, og sidebaren (translateX(-100%) under 880px) kunne ikke aabnes
   paa mobil. Reglerne hoerer til app-shellen og ligger nu foer responsive.css,
   saa media queryen kan overskrive dem som tilsigtet. Flyt dem ikke tilbage. */
.burger{display:none;position:fixed;top:.7rem;left:.7rem;z-index:60;background:var(--ink);color:#fff;
  border:none;border-radius:10px;width:42px;height:42px;place-items:center;cursor:pointer;box-shadow:var(--shadow)}
.burger svg{width:22px;height:22px}
.scrim{display:none;position:fixed;inset:0;background:rgba(50,50,50,.5);z-index:45}
.scrim.on{display:block}

/* Stoerrelsesvarianter til .avatar. Saetter bevidst IKKE flex-basis: den
   arves fra .avatar (flex:0 0 34px), praecis som de inline styles gjorde. */
.avatar-xs{width:28px;height:28px;font-size:.7rem}
.avatar-sm{width:30px;height:30px;font-size:.72rem}
.avatar-md{width:32px;height:32px;font-size:.74rem}

/* Ikonet i "Alle temaer"-knappen - eneste svg i .theme-all. */
.theme-all svg{width:16px;height:16px}