/* skal-lab/meny.css — hamburgarmenyn, delad av sidorna (knapp #ny-meny i headern) och /karta (märket .lk-brand[data-sidmeny]).
   Byggs av lab.js. DESIGN.md §7.3-arket. Stor titel + rund X, kicker per grupp,
   grupperade rundade listor (ikonbricka · etikett · undertext · chevron, vald = accent + bock). Luft skiljer
   grupperna, bara en insatt hårlinje mellan raderna. Telefon = bottenark med grabber, iPad = panel under knappen.
   1100 = kartans iPad-gräns; sidornas hamburgare syns bara ≤ 1024 (ny.css), så 1025–1100 är ofarligt där. */
.sida-meny, .sida-meny-slojan { display: none; }
@media (max-width: 1100px) {
  .sida-meny {
    display: flex; flex-direction: column; position: fixed; z-index: 81; width: 360px; max-height: calc(100dvh - 110px); overflow: hidden;
    padding: 6px 14px 14px; border-radius: 28px;
    font: 400 15px/1.25 var(--font-ui); color: var(--fg-1c);
    transform-origin: top right; transform: translateY(-8px) scale(.96); opacity: 0; visibility: hidden;
    transition: transform 260ms var(--lk-ease), opacity 180ms var(--lk-ease), visibility 0s 260ms;
  }
  .sida-meny[data-glas] { --glas-alfa: .94; --glas-rim: .5; } /* nästan opak: sidan bakom ska döljas, inte lysa igenom */
  [data-theme="light"] .sida-meny[data-glas] { --glas-alfa: .97; }
  .sida-meny.is-oppen { transform: none; opacity: 1; visibility: visible; transition: transform var(--lk-t) var(--lk-ease), opacity 180ms var(--lk-ease); }
  .sida-meny-slojan { display: block; position: fixed; inset: 0; z-index: 80; background: rgba(8, 10, 14, .5); opacity: 0; visibility: hidden; transition: opacity 220ms var(--lk-ease), visibility 0s 220ms; }
  .sida-meny-slojan.is-oppen { opacity: 1; visibility: visible; transition: opacity 220ms var(--lk-ease); }
  .ny-nav.is-oppen { display: none; } /* ny.css gamla nedfällda lista, om något ändå tänder den */
}
.sida-meny__grabb { display: none; }
.sida-meny__topp { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px 4px; }
/* bara kroppen skrollar (telefon + iPad): rubrik + X står kvar utan egen yta, raderna tonar ut i överkanten */
.sida-meny__kropp { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -14px; padding: 0 14px; -webkit-mask-image: linear-gradient(transparent, #000 14px); mask-image: linear-gradient(transparent, #000 14px); }
.sida-meny__topp h2 { margin: 0; font: 700 28px/1.1 var(--font-ui); letter-spacing: -.02em; color: var(--fg-1); }
.sida-meny__x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 999px; background: var(--w-10); color: var(--fg-3); cursor: pointer; transition: background var(--lk-t) var(--lk-ease), transform var(--lk-t) var(--lk-ease); }
.sida-meny__x:hover { background: var(--w-12); color: var(--fg-1c); }
.sida-meny__x:active { transform: scale(.92); transition-duration: 80ms; }
.sida-meny__x .ny-i { width: 16px; height: 16px; stroke-width: 2.4; }
.sida-meny__kicker { margin: 18px 4px 7px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-6); }
.sida-meny__grupp { border-radius: 18px; background: var(--w-06); overflow: hidden; }
.sida-meny__rad { position: relative; display: flex; align-items: center; gap: 13px; min-height: 58px; padding: 9px 14px 9px 12px; color: inherit; text-decoration: none; transition: background var(--lk-t) var(--lk-ease); }
button.sida-meny__rad { width: 100%; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.sida-meny__rad + .sida-meny__rad::before { content: ""; position: absolute; top: 0; left: 57px; right: 0; border-top: 1px solid var(--w-08); } /* insatt hårlinje, börjar vid texten (Apple) */
.sida-meny__rad:is(:hover, :focus-visible) { background: var(--w-06); outline: 0; }
.sida-meny__rad:focus-visible { outline: 2px solid var(--a-4); outline-offset: -2px; border-radius: 12px; }
.sida-meny__rad:active { background: var(--w-10); }
.sida-meny__ikon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: var(--w-06); color: var(--fg-3); }
.sida-meny__ikon .ny-i { width: 17px; height: 17px; }
.sida-meny__ikon--himmel { background: var(--sd-himmel-t); color: var(--sd-himmel); }
.sida-meny__ikon--rod { background: var(--sd-rod-t); color: var(--a-4); }
.sida-meny__ikon--sol { background: var(--sd-sol-t); color: var(--sd-sol); }
.sida-meny__ikon--ang { background: var(--sd-ang-t); color: var(--sd-ang); }
.sida-meny__txt { flex: 1; min-width: 0; }
.sida-meny__txt b { display: block; font-weight: 500; }
.sida-meny__txt small { display: block; margin-top: 2px; font-size: 12.5px; color: var(--fg-6); }
.sida-meny__rad > .ny-i { flex: none; width: 16px; height: 16px; color: var(--fg-7); transition: transform var(--lk-t) var(--lk-ease); }
.sida-meny__rad:hover > .ny-i { transform: translateX(2px); }
.sida-meny__rad.is-aktiv b { color: var(--a-4); }
.sida-meny__rad.is-aktiv > .ny-i { color: var(--a-4); stroke-width: 2.4; transform: none; }
.sida-meny.is-oppen .sida-meny__rad { animation: sida-upp 320ms var(--lk-ease) both; animation-delay: calc(40ms + var(--i, 0) * 22ms); }
@media (max-width: 1024px) {
  body.sida-meny-uppe .ny-hdr__meny { background: var(--aw-18); color: var(--a-2b); }
}
/* telefon: bottenark med grabber, glider upp ur underkanten */
@media (max-width: 767px) {
  .sida-meny {
    top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; max-height: calc(100dvh - 72px);
    padding: 0 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 32px; transform-origin: bottom center;
    transform: translateY(calc(100% + 24px)); opacity: 1;
    transition: transform 300ms var(--lk-ease), visibility 0s 300ms;
  }
  .sida-meny.is-oppen { transition: transform 420ms var(--lk-ease); }
  .sida-meny__grabb { display: block; width: 36px; height: 5px; margin: 7px auto 0; border-radius: 999px; background: var(--w-18, rgba(128, 128, 128, .4)); }
  .sida-meny__topp { padding-top: 8px; }
  /* dra (lab.js draArk): grabben och rubriken är handtaget; under draget följer arket fingret, släppet glider till läget */
  .sida-meny__grabb, .sida-meny__topp { touch-action: none; }
  .sida-meny.is-oppen.is-dras { transition: none; }
  .sida-meny.is-oppen.is-snapp { transition: transform 300ms var(--lk-ease), height 300ms var(--lk-ease), top 300ms var(--lk-ease); }
  .sida-meny-slojan:has(+ .sida-meny.is-dras) { transition: none; }
  .sida-meny__kropp { margin-inline: -16px; padding-inline: 16px; }
  /* sidorna: absolute, top sätts i lab.js (placera). Slöjan räcker förbi statusfält och sökruta. */
  body:not(.lk) > .sida-meny { position: absolute; bottom: auto; }
  body:not(.lk) > .sida-meny-slojan { position: absolute; bottom: auto; height: 100lvh; }
}
@media (prefers-reduced-motion: reduce) { .sida-meny, .sida-meny *, .sida-meny-slojan { transition: none !important; animation: none !important; } }

/* /karta laddar inte sida.css: ikonbrickornas bifärger (kopia av sida.css §0) och radernas inglidning */
.lk .sida-meny { --sd-ang: #8fb86a; --sd-ang-t: rgba(143, 184, 106, .14); --sd-himmel: #86b4d4; --sd-himmel-t: rgba(134, 180, 212, .14); --sd-sol: #f0c24f; --sd-sol-t: rgba(240, 194, 79, .12); --sd-rod-t: rgba(229, 160, 119, .14); }
[data-theme="light"] .lk .sida-meny { --sd-ang: #5f8c3e; --sd-ang-t: #e6efd9; --sd-himmel: #3f7fa8; --sd-himmel-t: #e0edf5; --sd-sol: #b8860b; --sd-sol-t: #fbf0d2; --sd-rod-t: #f6e2dc; }
/* §språk: språkmenyn (lab.js sprakSatt), liten glaspanel vid knappen som tryckts; z över hamburgarmenyn.
   Samma material/mått/animation som Sparade-menyn (sida.css §2c .sida-sparade), synka om den ändras. */
.sprak-meny {
  position: fixed; z-index: 90; width: min(220px, calc(100vw - 32px)); padding: 6px; border-radius: 22px;
  font: 400 13px/1.3 var(--font-ui); color: var(--fg-1c);
  transform: translateY(-6px) scale(.96); opacity: 0; visibility: hidden;
  transition: transform 260ms var(--lk-ease), opacity 180ms var(--lk-ease), visibility 0s 260ms;
}
.sprak-meny[data-glas] { --glas-alfa: .5; --glas-rim: .5; }
[data-theme="light"] .sprak-meny[data-glas] { --glas-alfa: .72; }
.sprak-meny.is-oppen { transform: none; opacity: 1; visibility: visible; transition: transform var(--lk-t) var(--lk-ease), opacity 180ms var(--lk-ease); }
.sprak-meny__rad { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border: 0; border-radius: 13px; background: none; color: inherit; font: inherit; font-weight: 500; text-align: left; cursor: pointer; transition: background var(--lk-t) var(--lk-ease); }
.sprak-meny.is-oppen .sprak-meny__rad { animation: sida-upp 300ms var(--lk-ease) both; }
.sprak-meny.is-oppen .sprak-meny__rad + .sprak-meny__rad { animation-delay: 30ms; }
.sprak-meny__rad:is(:hover, :focus-visible) { background: var(--w-08); outline: 0; }
.sprak-meny__rad:focus-visible { outline: 2px solid var(--a-4); outline-offset: -2px; }
.sprak-meny__rad:active { background: var(--w-10); }
.sprak-meny__kod { display: grid; place-items: center; flex: none; width: 30px; height: 24px; border-radius: 7px; background: var(--w-06); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; color: var(--fg-3); }
.sprak-meny__rad .ny-i { width: 16px; height: 16px; margin-left: auto; stroke-width: 2.4; color: var(--a-4); visibility: hidden; }
.sprak-meny__rad[aria-checked="true"] { color: var(--a-4); }
.sprak-meny__rad[aria-checked="true"] .ny-i { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .sprak-meny, .sprak-meny * { transition: none !important; animation: none !important; } }

@keyframes sida-upp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }