/* skal-lab/lab.css — labbets DELADE regler ovanpå css/ny.css (tokens + primitiv).
   Sidskalet (index.html) lånar allt av ny.css; här bor platshållarna, glasmaterialets
   färgsida och tokens. /karta-skalet bor i karta.css (Sidovy E-grammatiken: rail 66 · panel 366 · 13 px inset ·
   120–320 ms på cubic-bezier(.22,.8,.28,1) · hover = ett steg ljusare · aktiv = accentalfa).
   Brytpunkter (EN ägare, här): telefon < 768 · iPad 768–1100 · pc > 1100. */

:root {
  --lk-ease: cubic-bezier(.22, .8, .28, 1);
  --lk-t: 220ms;
  --lk-inset: 13px;
  --lk-rail-w: 66px;
  --lk-panel-w: 366px;
}

/* ── sidskalets hero ── */
.lab-hero { min-height: min(62dvh, 560px); display: grid; align-content: end; gap: 14px; padding: clamp(24px, 4vw, 48px); border-radius: 22px; }
.lab-hero h1 { margin: 0; font: var(--type-display-lg); font-size: clamp(28px, 4.2vw, 52px); letter-spacing: var(--display-tracking); color: var(--fg-1); max-width: 18ch; }

/* ── platshållare ──────────────────────────────────────────────────────── */
.lab-ph {
  display: grid; place-items: center; border-radius: 12px; color: var(--fg-8); font: var(--type-kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase;
  background: repeating-linear-gradient(135deg, var(--w-045) 0 6px, transparent 6px 14px), var(--w-05);
  border: 1px dashed var(--n-18); min-height: 120px;
}
.lab-ph--bild { aspect-ratio: 16 / 9; min-height: 0; }
.lab-ph--rund { aspect-ratio: 1; border-radius: 50%; min-height: 0; }
.lab-txt { color: var(--fg-5); font: var(--type-body); }
.lab-txt--kort { max-width: 60ch; }
.lab-h { color: var(--fg-2); font: var(--type-title); margin: 0; }
.lab-rader { display: grid; }
.lab-rad { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 11px 8px; border-radius: 10px; color: var(--fg-3); font: var(--type-label); transition: background var(--lk-t) var(--lk-ease); }
.lab-rad:hover { background: var(--w-06); }
.lab-rad__n { color: var(--fg-8); font: var(--type-meta); font-variant-numeric: var(--numeric); }
.lab-rad__v { color: var(--fg-7); font: var(--type-meta); font-variant-numeric: var(--numeric); }
.lab-stapel { height: 6px; border-radius: 3px; background: var(--w-08); overflow: hidden; }
.lab-stapel > i { display: block; height: 100%; background: var(--a-4); border-radius: 3px; transform-origin: left; animation: lab-vax .6s var(--lk-ease) both; }
@keyframes lab-vax { from { transform: scaleX(0); } }

/* ── glasmaterialet: färgsidan (linsen sätts av glas.js) ───────────────── */
[data-glas] {
  --glas-alfa: .2; --glas-rim: .18;
  background: rgba(20, 17, 14, var(--glas-alfa));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--glas-rim)), inset 0 0 0 .5px rgba(255, 255, 255, calc(var(--glas-rim) * .5)), 0 1px 2px var(--sh-40), 0 8px 24px rgba(0, 0, 0, .28);
  color: var(--fg-1c);
}
[data-theme="light"] [data-glas] { background: rgba(255, 255, 255, var(--glas-alfa)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, var(--glas-rim)), inset 0 0 0 .5px rgba(11, 31, 58, calc(var(--glas-rim) * .5)), 0 1px 2px var(--sh-20), 0 8px 24px var(--sh-42); color: #0a182a; }
/* täckning + kantljus (Malte 2026-10-12: mer fyllt, kanten mycket svagare mot kroppen) */
[data-glas="knapp"] { --glas-alfa: .26; --glas-rim: .25; }
[data-glas="bar"] { --glas-alfa: .14; --glas-rim: .22; }
[data-glas="kort"] { --glas-alfa: .32; --glas-rim: .25; }
[data-glas="panel"] { --glas-alfa: .4; --glas-rim: .22; }
/* lätt-glaset (glas.js sätter attributet + talen på stora ytor): ::before = blurren, ::after = kantringen. Båda under
   innehållet (z -1 i värdens isolate) och syskon, inte nästlade: en backdrop-filter på värden gör den till backdrop-rot
   och ringen ser då ingenting. Sätter någon backdrop-filter på värden (glasVila, arkets lägen) tar den över. */
[data-glas-latt] { isolation: isolate; }
[data-glas-latt]::before, [data-glas-latt]::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
[data-glas-latt]::before { backdrop-filter: brightness(var(--glas-dim)) saturate(1.4) blur(var(--glas-blur)); -webkit-backdrop-filter: brightness(var(--glas-dim)) saturate(1.4) blur(var(--glas-blur)); }
[data-glas-latt]::after { --m: #000 2px, transparent var(--glas-kant);
  backdrop-filter: brightness(var(--glas-lyft)) saturate(var(--glas-sat)) blur(var(--glas-kblur, 0px)); -webkit-backdrop-filter: brightness(var(--glas-lyft)) saturate(var(--glas-sat)) blur(var(--glas-kblur, 0px));
  -webkit-mask: linear-gradient(to right, var(--m)), linear-gradient(to left, var(--m)), linear-gradient(to bottom, var(--m)), linear-gradient(to top, var(--m));
  mask: linear-gradient(to right, var(--m)), linear-gradient(to left, var(--m)), linear-gradient(to bottom, var(--m)), linear-gradient(to top, var(--m)); }
[data-glas-latt][data-glas-vila]::before, [data-glas-latt][data-glas-vila]::after { display: none; }
/* vila på lätt-glaset (kortet tonar in/ut): opacity < 1 på värden gör den till backdrop-rot, ::before ser då ingenting och
   kartan syntes skarp genom kortet tills bluren poppade in (flimret, Malte 2026-10-14). Värden bär samma blur under toningen. */
[data-glas-latt][data-glas-vila] { backdrop-filter: brightness(var(--glas-dim)) saturate(1.4) blur(var(--glas-blur)); -webkit-backdrop-filter: brightness(var(--glas-dim)) saturate(1.4) blur(var(--glas-blur)); }
/* Firefox saknar url()-filter i backdrop-filter: nästan-Apples webbmaterial som reserv. */
@supports not (backdrop-filter: url(#x)) { [data-glas] { backdrop-filter: blur(18px) saturate(1.6); } }

/* ── lista / statistik / nyheter: det per-sida-css:en gör i prod, i labbet bara skal ── */
.lab-lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.lab-lkort { display: flex; flex-direction: column; gap: 8px; }
.lab-lkort__bild { aspect-ratio: 16/9; border-radius: 12px; }
.ny-verktyg .list-sort { height: 44px; padding: 0 14px; border: 0; border-radius: var(--r-ctl); background: var(--w-06); color: var(--fg-3); font: var(--type-label); }
.ny-stat__topp > div:first-child { flex: 1; min-width: 260px; }
.lab-tabell { margin-top: 22px; display: grid; gap: 14px; overflow: auto; }
.lab-tabell__grid { width: 100%; border-collapse: collapse; font: var(--type-label); font-variant-numeric: tabular-nums; }
.lab-tabell__grid th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--w-12); font: var(--type-kicker); letter-spacing: var(--kicker-tracking); text-transform: uppercase; color: var(--fg-8); }
.lab-tabell__grid td { padding: 9px 10px; border-top: 1px solid var(--w-07); color: var(--fg-3); }
.lab-tabell__grid td:not(:first-child), .lab-tabell__grid th:not(:first-child) { text-align: right; }
.lab-nwlist { display: grid; gap: 14px; }
.nw-item__media.lab-ph { aspect-ratio: 4/3; }

/* Scrollbars: EN stil för sidan och alla inre rullytor (kort, ark, menyer), följer temat.
   color-scheme ger mörka/ljusa native-delar (Safari); scrollbar-color ärvs, width gör det inte ⇒ `*`.
   Samma selektor som ny.css:s rot-regel så den här vinner (laddas efter). */
:root { color-scheme: dark; }
[data-theme="light"] { color-scheme: light; }
/* färgen sätts BARA på roten och ärvs: sida.css definierar om --w-15 längre ner, per element blev nyansen olika */
:root:has(body.mm-ny) { scrollbar-color: var(--w-15) transparent; }
*, :root:has(body.mm-ny) { scrollbar-width: thin; }

/* app, inte dokument: drag över kartan/menyer/kort markerade allt blått. Fält som skrivs i behåller markering */
body { -webkit-user-select: none; user-select: none; }
:is(input, textarea, [contenteditable]) { -webkit-user-select: text; user-select: text; }