/* ─────────────────────────────────────────────────────────────────
   kortkoll, REN: det valda appskalet (Simon 2026-08-22)

   Laddas SIST, efter appens egen <style> och app.css, och vinner därför
   på allt den nämner. Samma princip som app.css: ingen regel här rör
   data eller logik, bara ytan. Riktningen är A + B ur designcanvasen
   (claude.ai/code/artifact/538c0eab…): Apple-rent skal på märkets palett.

   Grammatiken, i korthet:
   · Goblin TM bara i wordmarken. Allt man LÄSER står i systemfonten.
   · Botten = --ground, paneler = --paper/--raise. Höjd i stället för ram.
   · Toppen: wordmark + sök + avatar, stor titel som i iOS, ingen sökrad
     förrän man bett om den, inga bannrar.
   · Segmented control för undermenyer, grupperade listor (iOS-inset) för
     vägarna vidare, era-plattor för de två senaste seten.
   · Bottennavet är glas. Inga hårlinjer runt allt; inga punkter och
     nummer framför rubrikerna.
   ───────────────────────────────────────────────────────────────── */

/* ─── Ytorna per läge ──────────────────────────────────────────
   Appen har tre lägen: vit (grundläget), pink och gengar. Mörkt läge lägger
   panelen (paper) ett snäpp LJUSARE än botten; vitt läge måste göra tvärtom,
   vit panel på ljusgrå botten, som iOS, annars försvinner grupperingen.
   Därför två egna namn: --sida (botten) och --kort (panel). */
:root{ --sida:var(--ground); --kort:var(--paper); --kort-2:var(--raise);
  --segm:var(--raise-2); }
:root[data-theme="vit"]{ --sida:#F2F2F7; --kort:#FFFFFF; --kort-2:#F2F2F4; --segm:#FFFFFF;
  --raise-2:#FFFFFF; --lyft:0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px -18px rgba(20,20,24,.28); }
:root[data-theme="pink"]{ --segm:#FFFFFF; --raise-2:#FFFFFF;
  --lyft:0 1px 0 rgba(255,255,255,.8) inset, 0 10px 24px -18px rgba(59,14,40,.3); }

/* ─── 0. Typroller: Goblin bort från allt utom wordmarken ─────── */
h1, header nav button, h3, .lbl, .btn, .fbtn, .bnr .txt b, .bnr .txt span,
.artnamn, .snabbhead b, .empty, .toast, .pad button.act, .qsek, .qmer, th,
.apptitel, .nyalabel, .sglabel, .sidhuvud .et, .sek .et, .samhero .lbl,
.varde .lbl, .phero .plbl, .ghero .namn, .gtext h4, .butik .bnamn, .vfall,
.sokrad input::placeholder, .vpill{
  font-family:var(--brod); letter-spacing:0;
}
.wordmark{ font-family:var(--display); font-size:13px; letter-spacing:.04em;
  color:var(--ink-3); line-height:1; padding-top:2px; }
.btn,.fbtn{ font-weight:600; font-size:13px; }
.lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; }

/* Sektionsrubriker: iOS-grupprubrik, liten, versal, dämpad. Inga prickar,
   inga nummer, ingen linje. */
h3{ font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); margin:22px 0 8px; }
h3::before, .sek .et::before, .sidhuvud .et::before, .samhero .lbl::before,
.varde .lbl::before{ display:none; }
.sek{ margin:22px 0 8px; gap:8px; }
.sek .snr, .sek .hl{ display:none; }
.sek .et{ font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); }
.sek .tal{ margin-left:auto; }
.sidhuvud .et{ font-size:22px; font-weight:700; letter-spacing:-.01em; color:var(--ink); }

/* ─── 1. Botten och ytor ──────────────────────────────────────── */
body, .wrap{ background:var(--sida); }
.pane{ padding:12px 16px 96px; }
@media (min-width:900px){ .pane{ padding:16px 28px 72px; } }

/* Bannrarna är borta: identiteten bär wordmarken och titeln, inte en skog. */
.bnr.para, .bnr.slem, .samhero{ display:none; }

/* ─── 2. Toppen ───────────────────────────────────────────────── */
header{
  background:color-mix(in srgb, var(--sida) 84%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:.5px solid color-mix(in srgb, var(--ink) 12%, transparent);
  padding:10px 16px 0;
}
@media (max-width:560px){ header{ padding:8px 16px 0; } }
.brandrow{ margin-bottom:0; align-items:center; }
.hact{ display:flex; align-items:center; gap:8px; }
.ikon{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink-2); background:var(--kort); border:1px solid var(--line-soft); }
.ikon svg{ width:18px; height:18px; }
.ikon[aria-pressed="true"]{ color:var(--accent); border-color:var(--accent); }
.hjalp, .brandrow .hogerhorn, .klocka{ display:none; }
.avatar, .avatar.avatar{ width:32px; height:32px; padding:3px 2px 1px; }
.saved{ margin-right:0; }
/* Titelraden: stor som i iOS, den säger var man står. Undertexten är
   samlingens tal (samma element som förr satt uppe i hörnet). */
.titelrad{ display:flex; flex-direction:column; gap:2px; padding:6px 0 10px; }
.titelrad .hogerhorn{ align-items:flex-start; }
.apptitel{ font-size:30px; font-weight:700; letter-spacing:-.02em; line-height:1.1;
  color:var(--ink); flex:none; }
.titelrad .tot{ font-size:14px; color:var(--ink-2); display:none; }
header.med-tal .titelrad .tot{ display:block; }
/* Rubriken krymper när man rullar (app.js sätter .kompakt). */
.apptitel{ transition:font-size .16s ease-out; }
header.kompakt .apptitel{ font-size:20px; }
header.kompakt .titelrad{ padding:2px 0 6px; }
header.kompakt .titelrad .tot{ display:none; }
.titelrad .tot b{ font-weight:500; color:var(--ink-2); }
/* Sökraden: dold tills man trycker på luppen. Dröjer kvar när det står något i den. */
/* Sökfältet: alltid synligt under titeln (iOS: stor titel + sökfält).
   Göms när toppen krymper vid rullning, utom när man skriver i det. */
.sokrad{ display:flex; align-items:center; margin:4px 0 10px; padding:8px 12px; border-radius:12px;
  background:color-mix(in srgb, var(--ink) 7%, transparent); border:1px solid transparent; }
.sokrad:focus-within{ box-shadow:none; border-color:color-mix(in srgb, var(--accent) 60%, transparent);
  background:var(--kort); }
.sokrad .lupp{ display:block; width:16px; height:16px; flex:0 0 auto; margin-right:8px; opacity:.5;
  background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.6-3.6'/%3E%3C/svg%3E") center/contain no-repeat; }
.sokrad input{ font-size:16px; }
.sokrad input::placeholder{ font-size:15px; }
#sokTog{ display:none; }
header.kompakt:not(.sok-aktiv) .sokrad{ display:none; }

/* ─── 3. Knappar, chips, segmented ────────────────────────────── */
.btn{ border:1px solid transparent; background:var(--kort-2); border-radius:12px;
  padding:10px 14px; box-shadow:none; }
.btn.solid{ box-shadow:none; }
.chip{ border-color:var(--line-soft); background:var(--kort); }
.chip[aria-pressed="true"]{ box-shadow:none; }
/* Undermenyerna (Samling-familjen, Utforska-familjen, Inköp, Pärm) blir en
   segmented control: ett spår, ett valt fack. */
.subnav{ display:flex; gap:2px; padding:3px; border-radius:11px; flex-wrap:nowrap;
  background:color-mix(in srgb, var(--ink) 8%, transparent); margin:0 0 16px; overflow-x:auto; scrollbar-width:none; }
.subnav::-webkit-scrollbar{ display:none; }
/* Flikarna som INTE är valda satt på --ink-2 mot en tonad platta, det landade
   under 4,5:1 och gick knappt att läsa i solljus på telefonen. Mörkare färg och
   halvfet räcker; den valda flikens vita platta gör ändå skillnaden tydlig. */
.subnav .chip{ flex:1 1 0; min-width:max-content; justify-content:center; text-align:center; border:0; background:transparent;
  border-radius:8px; padding:8px 8px; font-family:var(--brod); font-size:13px; font-weight:600;
  color:color-mix(in srgb, var(--ink) 78%, transparent); letter-spacing:0; }
.subnav .chip[aria-pressed="true"]{ background:var(--segm); color:var(--ink);
  box-shadow:0 1px 3px rgba(0,0,0,.18); }

/* ─── 4. Samling: värdekort, era-plattor, grupperad lista ─────── */
.vkort{ padding:16px 18px 14px; border-radius:18px; border:1px solid var(--line-soft);
  background:var(--kort); box-shadow:var(--lyft, none); margin-bottom:16px; }
:root[data-theme="gengar"] .vkort{ background:linear-gradient(180deg, var(--raise), var(--paper) 60%); }
.vkort .vtop{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; }
.vkort .vlbl{ font-size:13px; color:var(--ink-2); }
.vkort .vpill{ font-family:var(--brod); font-size:13px; padding:0; background:none; border:0; }
.vkort .vpill.upp{ color:var(--ok); } .vkort .vpill.ner{ color:var(--warn); }
.vkort .vkr{ font-size:40px; font-weight:700; letter-spacing:-.03em; line-height:1.1; margin-top:4px;
  font-variant-numeric:tabular-nums; }
.vkort .vband{ display:flex; height:5px; border-radius:3px; overflow:hidden; gap:2px; margin-top:14px; }
.vkort .vband i{ display:block; height:100%; }
.vkort .vleg{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap;
  font-size:11px; color:var(--ink-3); margin-top:8px; }
.vkort .vleg b{ font-weight:500; color:var(--ink-2); }
.vkort .vun{ font-size:12px; color:var(--ink-3); margin-top:8px; line-height:1.5; }
.vkort .vun .upp{ color:var(--ok); } .vkort .vun .ner{ color:var(--warn); }

.grupprubrik{ font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--ink-3); margin:20px 0 8px 4px; }
.grupprubrik:first-child{ margin-top:4px; }
.grupprubrik .tal{ float:right; font-family:var(--mono); font-weight:400; text-transform:none;
  letter-spacing:0; }

/* Era-plattan: setets egen färg ur en suddig kortbild, logotypen till höger.
   De två senast besökta seten, mer än så blir ett bibliotek, och det bor
   under Sets. */
.erarad{ display:flex; flex-direction:column; gap:10px; }
.era{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; min-height:88px; padding:0 16px; border-radius:18px; overflow:hidden; text-align:left;
  background:var(--kort); border:1px solid var(--line-soft); color:var(--ink); }
.era:active{ transform:scale(.985); }
.era .erabak{ position:absolute; inset:-24px; background:var(--bak) center/cover no-repeat;
  filter:blur(24px) saturate(1.5) brightness(.75); opacity:.8; }
/* Gradienten gör texten läsbar över konsten, men den var ren vit och åt upp
   setets färg, så alla brickor såg likadana ut. Nu blandas setets egen ton in
   (--setton, se setFarg): tillräckligt för att skilja seten åt, tillräckligt
   svagt för att namnet ska stå kvar mot den. */
.era::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--setton, var(--kort)) 12%, var(--kort)) 0%,
    color-mix(in srgb, var(--setton, var(--kort)) 8%, color-mix(in srgb, var(--kort) 60%, transparent)) 55%,
    transparent 100%); }
/* Färgremsan i kanten: det är den man ser i ögonvrån när man skrollar en lång
   lista, långt innan man läst setkoden. */
.era::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; z-index:2;
  background:var(--setton, var(--line)); opacity:.9; }
.era[style*="--setton"] { border-color:color-mix(in srgb, var(--setton) 28%, var(--line-soft)); }
:root[data-theme="pink"] .era .erabak{ filter:blur(24px) saturate(1.2) brightness(1.1); opacity:.55; }
.era .t{ position:relative; z-index:1; min-width:0; flex:1; }
.era .t b{ display:block; font-size:17px; font-weight:600; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.era .t .m{ display:block; font-family:var(--mono); font-size:11px; color:var(--ink-3); margin-top:3px;
  font-variant-numeric:tabular-nums; }
.era .t .pbar{ display:block; position:relative; width:120px; height:4px; border-radius:2px;
  background:color-mix(in srgb, var(--ink) 12%, transparent); margin-top:8px; overflow:hidden; }
.era .t .pbar i{ position:absolute; inset:0 auto 0 0; background:var(--accent); border-radius:2px; }
.era .elog{ position:relative; z-index:1; flex:0 0 auto; width:128px; height:62px; display:flex;
  align-items:center; justify-content:flex-end; }
.era .elog img{ max-width:100%; max-height:58px; object-fit:contain;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.era .elog .fallback{ display:none; }
.era .elog:has(> .fallback){ width:0; }

/* Grupperad lista, iOS inset grouped. Raderna är knappar. */
.grupp{ border-radius:14px; background:var(--kort); border:1px solid var(--line-soft); overflow:hidden; }
.grupp .rad{ display:flex; align-items:center; gap:12px; width:100%; min-height:46px; padding:11px 14px 11px 16px;
  text-align:left; color:var(--ink); background:transparent; border:0;
  border-bottom:.5px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.grupp .rad:last-child{ border-bottom:0; }
.grupp .rad:active{ background:color-mix(in srgb, var(--ink) 6%, transparent); }
.grupp .rad .rt{ flex:1; min-width:0; font-size:16px; }
.grupp .rad .rt small{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:1px; }
.grupp .rad .rv{ font-size:15px; color:var(--ink-3); display:flex; align-items:center; gap:6px;
  white-space:nowrap; font-variant-numeric:tabular-nums; }
.grupp .rad .rv b{ font-weight:500; color:var(--ink-2); }
.grupp .rad .rv svg{ width:16px; height:16px; color:var(--ink-4); }
.grupp .rad[aria-expanded="true"] .rv svg{ transform:rotate(90deg); }
.grupp .rad .rik{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center;
  background:var(--kort-2); color:var(--ink-2); flex:0 0 auto; }
.grupp .rad .rik svg{ width:16px; height:16px; }
.grupp .rad .rik img{ width:100%; height:100%; object-fit:cover; border-radius:8px; }
.grupp .rad .rik.kort{ width:28px; height:38px; border-radius:5px; }
.grupp .rad .rik.ok{ color:var(--ok); }
.grupp .rad .rik.hjarta{ color:var(--magenta); }
.grupp .rad .rik.guld{ color:var(--gold); }
.grupp .rad .chip{ margin-left:auto; }

/* Spårningsväljaren när den är utfälld, samma chips som förr, men i en panel. */
.sparval{ margin-top:10px; padding:12px 14px; border-radius:14px; background:var(--kort);
  border:1px solid var(--line-soft); }
.sparval h3:first-child{ margin-top:4px; }
.packs{ margin-top:12px; }
.pack{ border-radius:16px; border-color:var(--line-soft); background:var(--kort); }

/* ─── 5. Bottennavet: glas ────────────────────────────────────── */
.bottennav{ background:color-mix(in srgb, var(--sida) 80%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); backdrop-filter:blur(20px) saturate(1.4);
  border-top:.5px solid color-mix(in srgb, var(--ink) 12%, transparent); }
.bottennav .bfl{ font-family:var(--brod); font-size:10.5px; font-weight:500; color:var(--ink-3); }
.bottennav .bfl[aria-current="true"]{ color:var(--accent); }
.fab{ box-shadow:0 0 0 1px rgba(184,245,30,.3), 0 10px 24px -10px rgba(184,245,30,.6); }

/* ─── 6. Små städningar ───────────────────────────────────────── */
.toast{ font-weight:500; }
.empty{ font-size:14px; color:var(--ink-3); }

/* ─── 7. Setvyn ───────────────────────────────────────────────── */
/* Bannerremsan och setraden (chips för att hoppa mellan set) är borta:
   Sets-fliken och Samlingens plattor är vägen mellan set. Kvar: tillbaka,
   logoplatta + namn, statistik, Alla/Har/Saknas, filter, rutnät. */
#vSet .bnr.setbnr, #vSet .setbar{ display:none; }
#vSet > div:has(> #setBack){ padding:4px 16px 0 !important; }
#setBack{ background:transparent; border:0; padding:2px 0; color:var(--accent); font-size:15px; font-weight:500; }
.sethead{ padding:2px 16px 2px; gap:12px; }
.slogoplatta{ flex:0 0 auto; width:116px; height:64px; border-radius:14px; display:flex; align-items:center;
  justify-content:center; background:radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), var(--kort-2) 72%);
  border:1px solid var(--line-soft); }
.slogoplatta:has(> img[hidden]){ display:none; }
.slogoplatta img{ max-width:86%; max-height:54px; height:auto; object-fit:contain;
  filter:drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.sethead h2{ font-size:22px; font-weight:700; letter-spacing:-.02em; }
.sethead .meta{ font-size:12px; color:var(--ink-3); margin-top:3px; }
#vSet .bar{ display:none; }
.setstat{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; margin:6px 16px 0; padding:7px 0;
  border-radius:14px; background:var(--kort); border:1px solid var(--line-soft); }
.setstat span{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:0;
  border-right:.5px solid color-mix(in srgb, var(--ink) 12%, transparent); padding:0 4px; }
.setstat span:last-child{ border-right:0; }
.setstat b{ font-size:16px; font-weight:700; letter-spacing:-.01em; white-space:nowrap; }
.setstat b.ok{ color:var(--accent); }
.setstat small{ font-size:11px; color:var(--ink-2); }
/* Alla/Har/Saknas och filterraden följer med när man rullar: det är de man
   byter mellan mitt i avprickningen, och toppen ovanför (namn, statkort)
   behöver inte stå kvar (HIG-genomgången 2026-09-21). */
#sVem{ margin:0 0 0; padding:8px 16px 0; position:sticky; top:var(--headerh, 120px); z-index:21;
  background:color-mix(in srgb, var(--sida) 86%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
#vSet .filters{ padding:6px 16px 6px; position:sticky; top:calc(var(--headerh, 120px) + 56px); z-index:20;
  background:color-mix(in srgb, var(--sida) 86%, transparent); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.filtknapp{ border-radius:999px; }
/* Rutnätet: tre kolumner på telefon, bock i hörnet, nummer nere till vänster.
   Inga typfärgade ramar, det kortet har är bilden. */
#vSet .grid{ padding:4px 16px 0; gap:10px; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
#vSet .grid.chips{ grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:6px; }
#vSet .grid.lugn{ grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
/* Lugna läget är brickor (samma som Katalogen), samma sidmarginal som rutnätet. */
#vSet .brickor{ padding:4px 16px 0; }
.kortruta{ position:relative; gap:0; }
.cell{ border-color:transparent !important; border-radius:10px; overflow:hidden; background:var(--kort-2); }
.cell::before{ display:none; }
.cell:not(.chip):not([data-own]) img{ filter:grayscale(.35) brightness(.55); }
.cell .n{ left:6px; bottom:6px; padding:2px 6px; border-radius:6px; background:rgba(14,7,22,.68); color:#F1E9FF;
  font-size:11px; }
.cell.sel{ outline:2px solid var(--accent); outline-offset:1px; }
.kortruta .kortknappar{ position:absolute; top:6px; left:6px; right:6px; display:flex; justify-content:space-between;
  gap:4px; pointer-events:none; }
.kortruta .kkn{ pointer-events:auto; position:relative; flex:0 0 auto; width:30px; height:30px; border-radius:50%; padding:0;
  display:grid; place-items:center; border:1.5px solid rgba(255,255,255,.55); background:rgba(14,7,22,.38);
  color:#fff; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
/* 44 px träffyta runt 30 px knapp (HIG). Knapparna sitter i var sitt hörn. */
.kortruta .kkn::after{ content:""; position:absolute; left:50%; top:50%; width:44px; height:44px; transform:translate(-50%,-50%); }
.kortruta .kkn svg{ width:14px; height:14px; }
.kortruta .kkn[data-kk="h"]{ opacity:.85; }
.kortruta .kkn[data-kk="h"][aria-pressed="true"]{ background:var(--magenta); border-color:var(--magenta); opacity:1; }
/* Plusknappen ÄR bocken: ägt kort = fylld accentcirkel med bock, annars tom ring. */
.kortruta .kkn.plus{ border-color:rgba(255,255,255,.6); }
.kortruta .kkn.plus svg{ display:none; }
.kortruta .kkn.plus::before{ content:""; width:12px; height:7px; border-left:2.2px solid transparent; border-bottom:2.2px solid transparent;
  transform:rotate(-45deg) translate(1px,-1px); }
.kortruta:has(.cell[data-own]) .kkn.plus{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.kortruta:has(.cell[data-own]) .kkn.plus::before{ border-color:var(--accent-ink); }
.kortruta .kkn.plus b{ position:absolute; right:-6px; bottom:-6px; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--ink); color:var(--sida); font-size:9.5px; line-height:16px; text-align:center; margin:0; }
.korttext{ margin-top:6px; }
.gridsek{ margin:14px 0 2px; }
.gridsek .et{ font-size:12px; font-weight:600; letter-spacing:.05em; color:var(--ink-3); }
.gridsek .hl{ display:none; }
.gridsek .tal{ margin-left:auto; }

/* ─── 8. Datorn ───────────────────────────────────────────────── */
@media (min-width:760px){
  .erarad{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .apptitel{ font-size:34px; }
}

/* ─── 9. Undermenyn först, filterraden som en rad, arket ──────── */
.subnav{ margin:2px 0 14px; }
/* Sidhuvudet dubblerade toppens stora titel (Väggen/Innehåll/Värde). */
.sidhuvud{ display:none; }
/* Filterraden: en rad, klistrad under toppen, pillerknapp + klartext + träffar. */
.filt.ihop{ position:sticky; top:var(--headerh, 120px); z-index:20; margin:0 -16px 12px; padding:6px 16px 8px;
  background:color-mix(in srgb, var(--sida) 88%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:0; border-radius:0; box-shadow:none; }
.filt.ihop .rad{ padding:0; border:0; align-items:center; gap:8px; flex-wrap:nowrap; }
.filt.ihop .sam{ font-family:var(--mono); font-size:11.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; }
.filt.ihop .kvar{ font-family:var(--mono); font-size:11px; color:var(--ink-2); white-space:nowrap; }
.filt.ihop .chip{ flex:0 0 auto; }
/* På telefon får sammanfattningen 60 px mellan två knappar och blir
   "spårade …", vilket inte säger någonting. Låt raden brytas och ge den
   hela bredden på nästa rad i stället, knapparna ligger kvar överst. */
@media (max-width: 460px){
  .filt.ihop .rad{ flex-wrap:wrap; row-gap:4px; }
  .filt.ihop .kvar{ order:2; margin-left:auto; }
  .filt.ihop .sam{ order:3; flex:1 0 100%; min-width:0; }
}
/* Arket: grupperna ärver setvyns arkgrammatik; setlistan rullar i sin ruta. */
#arkFiltInneh .sok{ width:100%; padding:10px 14px; border-radius:var(--radie-pill); border:1px solid var(--line-soft);
  background:var(--kort-2); font:inherit; font-size:15px; color:var(--ink); }
#arkFiltInneh .arkgrupp{ margin-bottom:14px; }
#arkFiltInneh .arkset{ position:static; background:none; border:0; box-shadow:none; }
#arkFiltInneh .arkset .rad{ padding:0 0 6px; border:0; gap:6px; }
#arkFiltInneh .arkset .rad.setfiltlista{ max-height:150px; overflow-y:auto; }
#arkFiltInneh .arkset .sok{ width:auto; flex:1; padding:7px 12px; font-size:13px; }
#arkFiltInneh .chip.t b{ width:9px; height:9px; border-radius:50%; background:var(--c); margin-right:5px; display:inline-block; }

/* ─── 10. Mata in: samma plattor som Samling ──────────────────── */
.era.vald{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.era.vald .t b::after{ content:" ✓"; color:var(--accent); }

/* ─── 11. Sets-fliken: plattor med bevakningsstjärna ─────────── */
.packruta .era{ padding-right:16px; }
.packruta .bevaka{ top:auto; bottom:8px; right:8px; width:30px; height:30px; border-radius:50%;
  background:color-mix(in srgb, var(--kort) 80%, transparent); border:1px solid var(--line-soft);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); font-size:15px; }
.packruta.bevakad .era{ border-color:color-mix(in srgb, var(--accent) 55%, var(--line-soft)); }
.packruta .nymark{ position:absolute; top:-6px; left:12px; z-index:2; }
.packruta .era .elog{ padding-bottom:14px; }

/* ─── 12. Fyll pärmen (B + A:s uppslag) ──────────────────────── */
.fylltopp{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.fylltopp .mono{ font-size:12px; color:var(--ink-2); }
.fyllsid{ padding:10px; border-radius:16px; background:var(--kort); border:1px solid var(--line-soft); }
.fyllsh{ display:flex; justify-content:space-between; align-items:baseline; margin:0 2px 8px; }
.fyllsh b{ font-size:15px; font-weight:600; }
.fyllsh .mono{ font-size:11px; color:var(--ink-3); }
.fyllrutor{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
.fyllrutor.p4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.fyllf{ position:relative; aspect-ratio:63/88; border-radius:8px; overflow:hidden; padding:0; background:var(--kort-2);
  border:1.5px solid transparent; color:var(--ink-3); font-size:22px; display:flex; align-items:center; justify-content:center; }
.fyllf img{ width:100%; height:100%; object-fit:cover; display:block; }
.fyllf .tomkort{ position:absolute; inset:0; opacity:.35; }
.fyllf.tom{ border:1.5px dashed color-mix(in srgb, var(--ink) 28%, transparent); background:transparent; }
.fyllf.vald{ outline:2px solid var(--accent); outline-offset:-1px; }
.fyllf.flytt{ outline:2px solid var(--magenta); outline-offset:-1px; }
.fyllf .nr{ position:absolute; left:5px; bottom:5px; font-size:9.5px; padding:1px 5px; border-radius:5px;
  background:rgba(14,7,22,.7); color:#F1E9FF; }
.fyllf.tom .nr{ background:transparent; color:var(--ink-4); font-size:10px; }
.fylluppslag{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.fyllsid.liten{ padding:6px; }
.fyllsid.liten .fyllrutor{ gap:4px; }
.fyllsid.liten .fyllf{ border-radius:5px; font-size:16px; }
.fyllsid.liten .fyllf .nr{ display:none; }
.fyllpager{ display:flex; align-items:center; gap:10px; margin:10px 0 0; }
.fyllpager .mono{ font-size:12px; color:var(--ink-2); }
.fyllpager .valdtxt{ margin-left:auto; color:var(--accent); font-size:11px; text-align:right; }
.fyllpager .chip{ padding:5px 12px; font-size:14px; }
.fyllverktyg{ display:flex; gap:8px; margin-top:10px; }
.fyllverktyg .btn{ flex:1; text-align:center; padding:9px 6px; font-size:12.5px; }
.fyllverktyg .btn[aria-pressed="true"]{ border-color:var(--magenta); color:var(--magenta); }
.fyllgrid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
@media (min-width:700px){ .fyllgrid{ grid-template-columns:repeat(6, minmax(0, 1fr)); } }
.fyllk{ position:relative; aspect-ratio:63/88; border-radius:7px; overflow:hidden; padding:0; background:var(--kort-2); border:0; }
.fyllk img{ width:100%; height:100%; object-fit:cover; display:block; }
.fyllk .tomkort{ position:absolute; inset:0; opacity:.5; }
.fyllk .nr{ position:absolute; left:4px; bottom:4px; font-size:9px; padding:1px 5px; border-radius:5px;
  background:rgba(14,7,22,.7); color:#F1E9FF; }
.fyllk.klar img{ opacity:.35; }
.fyllk .pl{ position:absolute; top:4px; right:4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px;
  background:var(--accent); color:var(--accent-ink); font-family:var(--mono); font-size:9.5px; line-height:16px; text-align:center; }
.fyllk:active{ transform:scale(.95); }
select.chip{ appearance:none; -webkit-appearance:none; padding-right:12px; }


/* ─── Kortbladet: grepp och dragstängning (2026-09-21) ───────── */
.bladtopp{ position:relative; padding-top:18px; }
.bladgrepp{ position:absolute; left:50%; top:6px; width:40px; height:5px; border-radius:3px;
  background:color-mix(in srgb, var(--ink) 22%, transparent); transform:translateX(-50%); }
/* Metaraden: mörkare än förr, den föll på kontrast mot ljus botten. */
.metarad{ color:var(--ink-2); }


/* ─── 10. Vitt läge: djup i stället för platt (2026-09-21) ────────
   Lila läget bär höjd av sig självt: mörk botten, tonade paneler, lysande
   accent. Vitt läge hade vit panel på ljusgrå botten med en hårlinje runt,
   och ingenting annat, "platt" (Simon). Här får det samma grammatik som
   publika sajten fick i augusti: en svag aura i botten, skugga i stället
   för ram på allt som är en panel, valt fack som lyfter i segmented
   controls, glas i toppen och bottennavet, och en mörkare accent för TEXT
   (den ljusa slime-gröna är för svag mot vitt, 3:1). Bara vitt läge rörs. */
:root[data-theme="vit"]{
  --sida:#F3F2F8;
  --skugga-1:0 1px 2px rgba(24,20,40,.05), 0 6px 18px -10px rgba(24,20,40,.18);
  --skugga-2:0 1px 2px rgba(24,20,40,.06), 0 14px 32px -16px rgba(24,20,40,.28);
  --lyft:0 1px 0 rgba(255,255,255,.9) inset, 0 14px 32px -16px rgba(24,20,40,.28);
  --line-soft:rgba(24,20,40,.07);
  --accent-text:#527C00;
}
:root[data-theme="vit"] body{
  background:
    radial-gradient(120% 55% at 8% -8%, rgba(160,59,240,.11), transparent 62%),
    radial-gradient(90% 45% at 104% -6%, rgba(184,245,30,.18), transparent 56%),
    var(--sida);
  background-attachment:fixed;
}
:root[data-theme="vit"] .vkort, :root[data-theme="vit"] .grupp, :root[data-theme="vit"] .setstat,
:root[data-theme="vit"] .sparval, :root[data-theme="vit"] .pack, :root[data-theme="vit"] .era,
:root[data-theme="vit"] .bevakkort, :root[data-theme="vit"] .nyaset, :root[data-theme="vit"] .panel,
:root[data-theme="vit"] .statkort, :root[data-theme="vit"] .kop, :root[data-theme="vit"] .butik,
:root[data-theme="vit"] .parmrad, :root[data-theme="vit"] .krad{
  background:#FFFFFF; border-color:var(--line-soft); box-shadow:var(--skugga-1);
}
:root[data-theme="vit"] .vkort{ box-shadow:var(--skugga-2); }
:root[data-theme="vit"] .subnav{ background:rgba(24,20,40,.075); }
:root[data-theme="vit"] .subnav .chip[aria-pressed="true"]{
  box-shadow:0 2px 6px rgba(24,20,40,.16), 0 0 0 .5px rgba(24,20,40,.05); }
:root[data-theme="vit"] .chip{ background:#FFFFFF; border-color:var(--line-soft); box-shadow:0 1px 2px rgba(24,20,40,.06); }
:root[data-theme="vit"] .chip[aria-pressed="true"]{ background:var(--slime-bg); border-color:var(--accent); color:var(--accent-text); }
:root[data-theme="vit"] .btn{ box-shadow:0 1px 2px rgba(24,20,40,.06); }
:root[data-theme="vit"] .filtknapp{ background:#FFFFFF; box-shadow:0 1px 2px rgba(24,20,40,.06); border-color:var(--line-soft); }
:root[data-theme="vit"] .kk .bild{ border-color:rgba(24,20,40,.08);
  box-shadow:0 2px 6px -2px rgba(24,20,40,.22), 0 10px 22px -14px rgba(24,20,40,.4); }
:root[data-theme="vit"] .kk[data-own] .bild{ border-color:var(--accent);
  box-shadow:0 0 0 1.5px var(--accent), 0 10px 24px -12px rgba(111,168,0,.55); }
:root[data-theme="vit"] .cell{ box-shadow:var(--skugga-1); }
:root[data-theme="vit"] .cell[data-own]{ box-shadow:0 0 0 2px var(--accent), var(--skugga-1); }
:root[data-theme="vit"] header{ background:rgba(255,255,255,.72); border-bottom-color:rgba(24,20,40,.08); }
:root[data-theme="vit"] header.kompakt{ box-shadow:0 8px 20px -16px rgba(24,20,40,.35); }
:root[data-theme="vit"] .bottennav{ background:rgba(255,255,255,.8); border-top-color:rgba(24,20,40,.08);
  box-shadow:0 -10px 28px -22px rgba(24,20,40,.35); }
:root[data-theme="vit"] .fab{ box-shadow:0 10px 22px -8px rgba(111,168,0,.75), 0 1px 2px rgba(24,20,40,.12); }
:root[data-theme="vit"] .bottennav .bfl[aria-current="true"], :root[data-theme="vit"] #setBack,
:root[data-theme="vit"] .lank, :root[data-theme="vit"] .setstat b.ok, :root[data-theme="vit"] .vkort .vpill.upp,
:root[data-theme="vit"] .ikon[aria-pressed="true"]{ color:var(--accent-text); }
:root[data-theme="vit"] .sokrad{ background:rgba(24,20,40,.065); }
:root[data-theme="vit"] .sokrad:focus-within{ background:#FFFFFF; box-shadow:var(--skugga-1); }
:root[data-theme="vit"] .grupprubrik, :root[data-theme="vit"] h3{ color:var(--ink-2); }
:root[data-theme="vit"] .slogoplatta{ background:#FFFFFF; box-shadow:var(--skugga-1); }
:root[data-theme="vit"] .parmikon{ box-shadow:var(--skugga-1); }
/* Segmented controls behåller sin form: spår, valt fack lyfter. Den generella
   chip-regeln ovan gav dem vita knappar. */
:root[data-theme="vit"] .subnav .chip{ background:transparent; border:0; box-shadow:none;
  color:color-mix(in srgb, var(--ink) 78%, transparent); }
:root[data-theme="vit"] .subnav .chip[aria-pressed="true"]{ background:#FFFFFF; color:var(--ink);
  box-shadow:0 2px 6px rgba(24,20,40,.16), 0 0 0 .5px rgba(24,20,40,.05); }
/* Sökfältet: ett enda piller, inte ett fält i ett fält. */
.sokrad{ padding:6px 12px; }
.sokrad input{ background:transparent; border:0; padding:5px 0; box-shadow:none; }
.sokrad input:focus{ outline:none; box-shadow:none; }
/* Setlistans topp-panel: samma vita panel som resten. */
:root[data-theme="vit"] .setlhero{ background:#FFFFFF; border-color:var(--line-soft); box-shadow:var(--skugga-1); }
:root[data-theme="vit"] .setlhero .setltal{ background:transparent; box-shadow:none; }
:root[data-theme="vit"] #setBack{ box-shadow:none; background:transparent; }
/* Setlistans Filter-knapp ligger till höger i samma rad som statuschipsen. */
[data-slfilt]{ margin-left:auto; }


/* ─── 13. SF Pro, fetare, och mobilputs (2026-09-30) ─────────────
   Önskemålet: en fetare SF Pro på all text. Tre saker:
   1. En typfamilj för allt man läser. Mono stod på metadata, priser och
      hela förklaringsstycken (Inköp, pärmraderna) och gjorde appen spretig
      bredvid SF Pro. --mono pekar nu på SF Pro med tabellsiffror, så tal i
      kolumner står kvar i linje. Äkta mono bara där tecknen måste gå att
      skilja åt: synkkoden och bytesrutan (--kod).
   2. Ett snäpp tyngre överallt: bröd 500, rader och knappar 600, rubriker
      och belopp 700–800 med tätare spärrning, som iOS stora titlar.
   3. Buggarna från genomgången på 390 px: se varje regel. */
:root{
  --brod: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI",
          "Hiragino Sans", "Hiragino Kaku Gothic ProN", Roboto, sans-serif;
  --rubrik: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI",
          "Hiragino Sans", "Hiragino Kaku Gothic ProN", Roboto, sans-serif;
  --mono: var(--brod);
  --kod:  ui-monospace, "SF Mono", Menlo, monospace;
}
body{ font-family:var(--brod); font-weight:500; font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
b, strong{ font-weight:700; }
/* Mono-klasserna bar spärrning som bara hör hemma i mono. */
.num, .mono, .lbl, .trend, .cell .n, .era .t .m, .grupprubrik .tal,
.filt.ihop .sam, .filt.ihop .kvar, .fyllpager .mono, .fylltopp .mono, .fyllsh .mono{
  letter-spacing:0; font-variant-numeric:tabular-nums; }
.lbl{ font-weight:700; letter-spacing:.04em; }
/* Versala etiketter hade mono-spärrning (.11–.14em) som ser ut som lösa
   bokstäver i SF Pro. Samma täthet som grupprubrikerna. */
.setlhero .etikett, th, .gridsek .et, .saved{ letter-spacing:.045em; font-weight:700; }

/* Rubrikerna: Display-snittet, tyngre och tätare. */
.apptitel, .sethead h2, .vkort .vkr, .bladpris b, .sidhuvud .et, h2{
  font-family:var(--rubrik); }
.apptitel{ font-size:32px; font-weight:800; letter-spacing:-.028em; }
header.kompakt .apptitel{ font-size:20px; font-weight:700; letter-spacing:-.015em; }
.sethead h2{ font-weight:800; letter-spacing:-.025em; line-height:1.12; }
.vkort .vkr{ font-weight:800; letter-spacing:-.035em; }
h3, .grupprubrik, .sek .et{ font-weight:700; letter-spacing:.045em; }
.era .t b{ font-weight:700; letter-spacing:-.015em; }
.era .t .m{ font-size:12px; font-weight:600; }
.grupp .rad .rt{ font-weight:600; }
.grupp .rad .rt small{ font-weight:500; }
.grupp .rad .rv b{ font-weight:600; }
.btn, .fbtn{ font-weight:700; }
.chip{ font-weight:600; }
.subnav .chip, :root[data-theme="vit"] .subnav .chip{ font-weight:600; }
.subnav .chip[aria-pressed="true"], :root[data-theme="vit"] .subnav .chip[aria-pressed="true"]{ font-weight:700; }
.bottennav .bfl{ font-weight:600; }
.bottennav .bfl[aria-current="true"]{ font-weight:700; }
.setstat b{ font-weight:800; }
.titelrad .tot b{ font-weight:600; }

/* Trendpillen i värdekortet: en äldre regel gav den ram, ren.css nollade
   paddingen, och "30d" låg mot kanten och klipptes på 390 px. */
.vkort .vpill{ flex:0 0 auto; white-space:nowrap; padding:3px 9px; border:0; border-radius:999px;
  font-size:12.5px; font-weight:700; background:color-mix(in srgb, currentColor 11%, transparent); }

/* iOS zoomar in på varje fält under 16 px och stannar inzoomat, så sidan
   "hoppar" när man trycker i sökrutorna. 16 px på telefon, överallt. */
@media (max-width:760px){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{ font-size:16px !important; }
}

/* Setlistans och setfiltrets sökfält saknade stil helt (jättetext utan ram). */
input.sok[data-slsok], input.sok[data-setfilt-sok]{ width:100%; padding:10px 14px; border-radius:12px;
  border:1px solid transparent; background:color-mix(in srgb, var(--ink) 7%, transparent);
  color:var(--ink); font:inherit; font-size:16px; font-weight:500; outline:none; }
input.sok[data-slsok]:focus, input.sok[data-setfilt-sok]:focus{ background:var(--kort);
  border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
input.sok::placeholder{ color:var(--ink-3); font-weight:500; }

/* Läggarket: fältet hade en egen platta inuti rutan, ett fält i ett fält. */
.arksok input{ background:transparent !important; border:0 !important; box-shadow:none !important;
  padding:4px 0; outline:none; }

/* Kortbladet: priset i Display, länkpillerna utan understrykning. */
.bladpris b{ font-size:26px; font-weight:800; letter-spacing:-.025em; }
.bladpris .meta{ font-size:13px; font-weight:500; }
a.chip{ text-decoration:none; }
.chip[disabled]{ opacity:.38; }

/* Konstnärsträffarna i sökningen hade en tom grå ruta där bilden sitter för
   pokémon och set. Utan bild blir raden bara namn + roll. */
.qrad[data-konst] .sw{ display:none; }
.qrad .t span{ font-weight:500; }

/* Setvyn: Alla/Har/Saknas och filterraden var två klistrade rader och tog en
   fjärdedel av skärmen när man rullade. Nu en rad: segmentet tar resten av
   bredden, Filter och täthetsväxeln står till höger. Valda filterchips får
   raden att bryta, bara då. */
.setkontroll{ position:sticky; top:var(--headerh, 120px); z-index:21; display:flex; flex-wrap:wrap;
  align-items:center; gap:8px; padding:8px 16px 8px;
  background:color-mix(in srgb, var(--sida) 86%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); }
.setkontroll #sVem{ position:static; flex:1 1 170px; min-width:0; margin:0; padding:3px;
  background:color-mix(in srgb, var(--ink) 8%, transparent); -webkit-backdrop-filter:none; backdrop-filter:none; }
:root[data-theme="vit"] .setkontroll #sVem{ background:rgba(24,20,40,.075); }
.setkontroll #sVem .chip{ padding:7px 6px; min-width:0; }
.setkontroll .filters{ position:static; flex:0 1 auto; display:flex; align-items:center;
  flex-wrap:wrap; justify-content:flex-end; gap:6px; padding:0; margin:0; background:none;
  -webkit-backdrop-filter:none; backdrop-filter:none; }
#vSet .setkontroll .filters{ position:static; padding:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.setkontroll .filtav{ order:3; }

/* Hjärtat på varje kortruta i setvyn: två knappar per kort i ett rutnät med
   tre kolumner blev rörigt. "Vill ha" finns i kortbladet. Bocken står kvar,
   nu ensam uppe till höger. */
.kortruta .kkn[data-kk="h"]{ display:none; }
.kortruta .kortknappar{ justify-content:flex-end; }

/* Nya set ligger nu under sökningen och statusraden. */
.nyaset{ margin:4px 0 16px; }

/* ─── 14. Datorn får en sidonav, och fyra buggar från genomgången (2026-10-01)
   Genomgång med skärmbilder i 375 och 1440 px. Datorn visade telefonens
   layout utsträckt: bottennav med fyra knappar på 1 120 px, en plusknapp
   mitt i, segmented controls på hela bredden. Nu bär en sidonav till vänster
   navigeringen från 1024 px, bottennavet försvinner och kontrollerna får en
   rimlig bredd. Markupen är densamma, bara CSS. */

/* Pärmhero: uppslaget låg roterat och uppskalat med negativa marginaler. På
   telefonen klipptes korten och plusrutorna hamnade utanför kanten, på datorn
   blev sex kolumner à 185 px en halv skärm pärm. Nu ett rakt uppslag i en
   panel som allt annat på sidan. */
.phero{ margin:0 0 16px; padding:14px 16px 16px; background:var(--kort); border:1px solid var(--line-soft);
  border-radius:18px; box-shadow:var(--lyft, none); contain:none; overflow:visible; }
.uppslag{ transform:none; margin:0 0 12px; gap:6px; max-width:520px; }
.uppslag .f{ border-radius:6px; }

/* Setvyn: metaraden bröt datumet mitt itu ("2026-09-" / "16") när setnamnet
   tog bredden. Raden får inte brytas; långa versala setnamn bryts i stället. */
.sethead .meta{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sethead h2{ overflow-wrap:anywhere; }
/* Namnblocket får krympa; annars sköt det Dela-knappen utanför skärmen på 320 px. */
.sethead > div{ min-width:0; flex:1 1 auto; }
.sethead .slogoplatta{ flex:0 0 auto; }
@media (max-width:560px){ .sethead h2{ font-size:19px; } }

/* Fälten: ett utseende. Snabbinmatningens nummerfält och setfiltret i Mata in
   stod som bar text utan ram, filterradens sök hade en tredje stil. Samma
   platta som sökfältet i toppen, 44 px hög så den går att träffa. */
input.sok, .filt .sok{ width:100%; padding:10px 14px; border-radius:12px; border:1px solid transparent;
  background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink); font:inherit;
  font-size:16px; font-weight:500; outline:none; min-height:44px; box-shadow:none; }
input.sok:focus, .filt .sok:focus{ background:var(--kort); border-color:color-mix(in srgb, var(--accent) 60%, transparent); }
input.sok::placeholder, .filt .sok::placeholder{ color:var(--ink-3); font-weight:500; }
#mataNrIn{ max-width:none !important; }
/* Språkväljaren i Mata in klipptes på 320 px ("Kinesis"); den får rulla i sidled. */
.sprakval{ overflow-x:auto; scrollbar-width:none; }
.sprakval::-webkit-scrollbar{ display:none; }
.filt .sok{ width:auto; min-height:38px; padding:7px 12px; font-size:14px; }
@media (max-width:760px){ .filt .sok{ font-size:16px; } }

/* Hopfällda intron: första meningen syns, resten bakom "Mer". */
details.intro summary{ list-style:none; cursor:pointer; display:inline; }
details.intro summary::-webkit-details-marker{ display:none; }
details.intro summary::after{ content:" Mer"; color:var(--accent-text, var(--accent)); font-weight:600; }
details.intro[open] summary::after{ content:" Mindre"; }

/* Kortbladets topprad följer innehållets bredd på breda skärmar. */
.bladtopp{ max-width:900px; margin-inline:auto; }

/* Datorn från 1024 px: sidonav till vänster, inget bottennav. */
@media (min-width:1024px){
  :root{ --navh:0px; --rail:224px; }
  body{ padding-left:var(--rail); }
  .bottennav{ left:0; right:auto; top:0; bottom:0; width:var(--rail); max-width:none; margin:0;
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:4px;
    padding:22px 14px 16px; border-top:0;
    border-right:.5px solid color-mix(in srgb, var(--ink) 12%, transparent); }
  .bottennav::before{ content:"kortkoll"; font-family:var(--display); font-size:15px; letter-spacing:.04em;
    color:var(--ink-3); padding:4px 12px 18px; }
  .bottennav .bfl{ flex:0 0 auto; flex-direction:row; justify-content:flex-start; gap:12px;
    padding:10px 12px; border-radius:12px; font-size:14.5px; font-weight:600; color:var(--ink-2); }
  .bottennav .bfl svg{ width:20px; height:20px; }
  .bottennav .bfl:hover{ background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink); }
  .bottennav .bfl[aria-current="true"]{ background:color-mix(in srgb, var(--accent) 14%, transparent);
    color:var(--accent-text, var(--accent)); font-weight:700; }
  .bottennav .bfl:active{ transform:none; }
  .fabvagga{ order:10; width:auto; margin:14px 0 0; display:block; }
  .fab{ width:100%; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    gap:8px; font-size:14px; font-weight:700; }
  .fab::after{ content:"Lägg till kort"; }
  .fab svg{ width:18px; height:18px; }
  .fab:active{ transform:none; }
  /* Wordmarken står i sidonaven; toppens kopia göms men håller radens höjd. */
  .brandrow .wordmark{ visibility:hidden; }
  /* Segmented controls och filterrader sträckte sig över 1 060 px. */
  .subnav{ max-width:640px; }
  /* Det som centreras i fönstret ska centreras över innehållet. */
  .toast{ left:calc(50% + var(--rail) / 2); }
  .ark{ left:var(--rail); }
}