/* ═══ publik.css — de publika sidorna (våg 2, 2026-09-25) ════════════════════
   Laddas EFTER casters.css av: login, waitlist, demo, plattformssidorna,
   annan-plattform, ordlista, intakter, villkor, integritet, 404 och 500.
   Specen är docs/overhaul-2026-09-25/vag2-design.md — den här filen lägger bara
   till det specen inte redan har (publikt sidhuvud, sidfot, "Kort version",
   brödsmulor, länkchips, sökfält med filter, juridiksidornas layout).
   Allt annat kommer ur casters.css avsnitt 19: .container-las/.container-bred,
   .btn/.btn-gold/.btn-lg/.btn-text, .besked-*, .chip-*, details.dragspel, .sk-*.

   REGLER (samma som specen §0):
   · Färg bara ur tokens. Ingen hexkod i den här filen (utom maskernas #000,
     som bara är alfa och aldrig syns som färg).
   · Guld är bara fyllning (.btn-gold) — guld som TEXT är --lank / --guld-txt.
   · Inga klassnamn som innehåller "rod" eller "gron" (temalagret färgar dem).
   · Temalagret (casters avsnitt 0) har elementregler för nav, footer och
     main a[href^="mailto"]. Varje regel här som krockar har högre
     specificitet — det står vid regeln.
   ═════════════════════════════════════════════════════════════════════════ */


/* ── 1. SIDHUVUD (.pubnav) ─────────────────────────────────────────────────
   Samma <nav> + .nav-right som bas.html (terms.js monterar lägesknappen i
   `nav .nav-right`). Lägesväljaren visas INTE på publika sidor (specen §6.2) —
   den hör till appen. terms.js får ändå laddas för termförklaringarna och
   CSRF-huvudet; knappen den ritar göms här. */
#skv-mode { display:none !important; }
/* .btn/.btn-block sätter display och slår webbläsarens [hidden] — uppmätt på
   /login: "Avbryt" syntes trots hidden. */
[hidden] { display:none !important; }
/* Sidfoten i botten även när sidan är kort (/demo, /login på desktop). */
body:has(> .pubfot) { display:flex; flex-direction:column; }
body:has(> .pubfot) > main { flex:1 0 auto; width:100%; }
/* /demo på hög, bred skärm: blocket tog de översta 200 px och resten var tomt
   (slut-design 31). Centreras lodrätt när det finns höjd över. */
@media (min-width:1024px) and (min-height:860px) {
  body:has(> .pubfot) > main.pubsida:has(.demo-grid) { display:grid; align-content:center; }
}

/* Loggan och menyn i linje med innehållets kanter (på 1920 stod loggan på x 32 och
   innehållet på x 160): samma mått som .container-bred. */
.pubnav { padding-inline:max(var(--sidmarginal), calc((100% - var(--bredd-max)) / 2)); }
.pubnav .mark { flex-shrink:0; }
.pubnav .nav-right { gap:var(--sp-1); min-width:0; }
.pubnav .nav-link { display:inline-flex; align-items:center; min-height:var(--tryckyta);
                    padding:0 var(--sp-3); border-radius:var(--r-sm); font-size:14px; }
@media (hover:hover) { .pubnav .nav-link:hover { background:var(--nav-seg-yta); } }
.pubnav .nav-link[aria-current="page"] { color:var(--nav-ink); box-shadow:inset 0 -2px 0 var(--gold); border-radius:0; }
/* Ordmärkets mono-signatur tar ~130 px — på mobil får "Prova demot" och
   "Logga in" platsen i stället (uppmätt: annars spiller naven på 390). */
.pubnav .wm small { display:none; }
.pubnav .pubnav-bred, .pubnav .pubnav-mellan { display:none; }
@media (min-width:768px)  { .pubnav .pubnav-mellan { display:inline-flex; } }
@media (min-width:1024px) { .pubnav .pubnav-bred { display:inline-flex; } }
@media (max-width:359px)  { .pubnav .pubnav-demo { display:none; } }


/* ── 2. SIDANS KROPP ───────────────────────────────────────────────────────
   .pubsida är <main>. Innehållet står i .container-las (text) eller
   .container-bred (rutnät, tabeller) från casters avsnitt 19 (c). */
.pubsida { padding-block:var(--sp-8) var(--sp-12); }
@media (min-width:1024px) { .pubsida { padding-block:var(--sp-12) var(--sp-16); } }
.pubsida > * + * { margin-top:var(--sp-8); }

/* Länkar i löpande text: guldfamiljen i båda temana (specen §3.2 --lank).
   (0,3,1) slår temalagrets html[data-theme="dark"] main a[href^="mailto"] (0,2,3). */
:is(.pubsida, .pub-mitt, .pub-avsnitt) a[href]:not(.btn):not(.btn-text):not(.lankchip):not(.vag):not(.pub-plattform),
.pubfot a[href]:not(.btn) { color:var(--lank); text-decoration:underline;
                            text-decoration-thickness:1px; text-underline-offset:3px; }
@media (hover:hover) {
  :is(.pubsida, .pub-mitt, .pub-avsnitt) a[href]:not(.btn):not(.btn-text):not(.lankchip):not(.vag):not(.pub-plattform):hover,
  .pubfot a[href]:not(.btn):hover { text-decoration-thickness:2px; }
}

/* Ingressen låg dikt an (0 px) mot nästa block på /villkor, /integritet och
   /annan-plattform. Sidhuvudet äger luften under sig. */
.pub-topp { margin-bottom:var(--sp-6); }
.pub-topp + .kortversion, .pub-topp + .pub-sektion, .pub-topp + .sokfalt { margin-top:0; }
.stack > .pub-topp { margin-bottom:0; }           /* en .stack äger redan avståndet (gap) */
.pub-topp > * + * { margin-top:var(--sp-3); }
.pub-topp h1 { font-size:var(--fs-h1); line-height:var(--lh-rubrik); font-weight:700; letter-spacing:-.02em; }
.pub-ingress { font-size:var(--fs-ingress); line-height:1.5; color:var(--dim); max-width:var(--lasbredd); }
.pub-text { font-size:var(--fs-brod); line-height:var(--lh-brod); }
.pub-text > * + * { margin-top:var(--sp-3); }
.pub-sektion > * + * { margin-top:var(--sp-4); }
.pub-sektion h2:not(.sk-etikett) { font-size:var(--fs-h2); line-height:var(--lh-rubrik); font-weight:700; letter-spacing:-.015em; }

/* Handlingsraden: EN guldknapp + en textlänk. Knappen full bredd på mobil. */
.handling { display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3) var(--sp-5); }
.handling .btn-gold { flex:1 1 100%; }
.handling-not { font-size:var(--fs-liten); color:var(--dim); }
@media (min-width:600px) { .handling .btn-gold { flex:0 0 auto; } }


/* ── 3. KORT (ruta med ram, ingen skugga i mörkt) ─────────────────────────── */
.pubkort { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-kort);
           padding:var(--sp-5); box-shadow:var(--skugga-kort); }
@media (min-width:768px) { .pubkort { padding:var(--sp-6); } }
.pubkort > * + * { margin-top:var(--sp-4); }


/* ── 4. "KORT VERSION" (plattformssidorna) ────────────────────────────────
   <dl> med 3-5 rader: vad gäller, vad du gör, vad Skattklart gör.
   Etiketten i mono-versaler ovanför på mobil, i egen kolumn från 768. */
.kortversion dl { display:grid; gap:var(--sp-3); }
@media (min-width:768px) { .kortversion dl { gap:var(--sp-4); } }
.kortversion dt { font-family:var(--mono); font-size:var(--fs-mikro); font-weight:600;
                  letter-spacing:.08em; text-transform:uppercase; color:var(--faint); line-height:1.3; }
.kortversion dd { margin:var(--sp-1) 0 0; font-size:var(--fs-brod); line-height:1.5; }
.kortversion .rad { min-width:0; }
.kortversion .rad-viktig dd { font-weight:600; }
@media (min-width:768px) {
  .kortversion .rad { display:grid; grid-template-columns:10.5rem minmax(0, 1fr); gap:var(--sp-5); align-items:baseline; }
  .kortversion dd { margin:0; }
}
.kallank { font-size:var(--fs-liten); white-space:nowrap; margin-left:var(--sp-1); }


/* ── 5. BRÖDSMULOR ─────────────────────────────────────────────────────────
   En <div role="navigation">, inte ett <nav>: casters avsnitt 4 och temalagret
   gör varje nav till en klistrad platta, och terms.js letar efter "nav". */
.smulor ol { list-style:none; display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-1) var(--sp-2);
             font-size:var(--fs-liten); color:var(--dim); }
.smulor li { display:flex; align-items:center; gap:var(--sp-2); }
.smulor li + li::before { content:"›"; color:var(--faint); }
.smulor a[href] { color:var(--dim); display:inline-flex; align-items:center; justify-content:center;
                  min-width:var(--tryckyta); padding-inline:var(--sp-2); margin-inline:calc(-1 * var(--sp-2)); }
/* Under 640 ger casters 18 (b) alla länkar 44 px; ovanför räcker WCAG 2.5.8:s 24 px —
   utom på pekskärm (platta 768), där tryckytan är 44 px. */
@media (min-width:641px) { .smulor a[href] { min-height:24px; } }
@media (pointer:coarse) { .smulor a[href], .pubsida .btn-text, .pub-mitt .btn-text { min-height:var(--tryckyta); } }
.smulor [aria-current] { color:var(--ink); font-weight:600; }


/* ── 6. LÄNKCHIPS (plattformar, filter) ───────────────────────────────────
   .chip i casters är STATUS (prick + ord) — länkar får egen klass.
   Filterknapparna i ordlistan är <button aria-pressed>, samma utseende. */
.lankchips { display:flex; flex-wrap:wrap; gap:var(--sp-2); list-style:none; }
.lankchip { display:inline-flex; align-items:center; gap:6px; min-height:var(--tryckyta);
            padding:0 var(--sp-4); border-radius:var(--r-pill); border:1px solid var(--line2);
            background:var(--panel); color:var(--ink); font:600 14px/1.2 var(--sans);
            text-decoration:none; cursor:pointer; white-space:nowrap; }
.lankchip.streckad { border-style:dashed; color:var(--dim); }
.lankchip[aria-pressed="true"] { background:var(--ink); border-color:var(--ink); color:var(--panel); }
.lankchip .antal { font:600 var(--fs-mikro)/1 var(--mono); color:inherit; opacity:.75; }
@media (hover:hover) { .lankchip:hover { border-color:var(--gold2); } }


/* ── 7. SÖKRUTA (ordlistan) ────────────────────────────────────────────────
   Klistrad under sidhuvudet. Bakgrunden MÅSTE vara sidans (annars syns korten
   igenom). Fältet ärver ram och fokus ur casters avsnitt 9 (--falt-kant). */
.sokfalt { position:sticky; top:var(--navh); z-index:var(--z-sidnav); background:var(--bg);
           padding-block:var(--sp-3); margin-inline:calc(-1 * var(--sidmarginal));
           padding-inline:var(--sidmarginal); border-bottom:1px solid var(--line); }
/* Från 1024 står sökraden i en spalt: ingen negativ marginal (underkanten stack 16–25 px
   utanför innehållets vänsterkant). */
@media (min-width:1024px) { .sokfalt { margin-inline:0; padding-inline:0; } }
/* Under 768 var den klistrade raden 139 px (16 % av skärmen): där klistras bara fältet,
   filterknapparna rullar med sidan. */
/* display:contents: fältet blir då ett barn till hela textspalten och kan klistra över
   hela sidan (ett klistrat element stannar annars inom sin egen förälder). */
@media (max-width:767px) {
  .sokfalt { display:contents; }
  .sokfalt > input[type=search] { position:sticky; top:calc(var(--navh) + var(--sp-2)); z-index:var(--z-sidnav);
                                  margin-top:var(--sp-6); box-shadow:0 0 0 var(--sp-2) var(--bg); }
  .sokfalt > .lankchips { margin-top:var(--sp-3); }
  .sokfalt > .sok-status { margin-top:var(--sp-2); }
}
.sokfalt > * + * { margin-top:var(--sp-3); }
.sokfalt input[type=search] { width:100%; min-height:48px; font-size:var(--fs-brod); border-radius:var(--r); }
.sokfalt .lankchips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.sokfalt .lankchips::-webkit-scrollbar { display:none; }
.sok-status { font-size:var(--fs-liten); color:var(--dim); }
.sok-status:empty { display:none; }
/* Filterraden rullar i sidled på mobil — tonad högerkant visar att det finns fler. */
@media (max-width:767px) {
  .sokfalt .lankchips { -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 32px), transparent);
                                mask-image:linear-gradient(to right, #000 calc(100% - 32px), transparent);
                        padding-right:32px; }
}


/* ── 8. DRAGSPELSLISTA (ordlista, guider) ──────────────────────────────────
   details.dragspel kommer ur casters (h). Här: sammanfattningsraden får en
   andra rad (kort förklaring) och innehållet läsbar färg — casters sätter
   --dim på .dragspel-kropp, vilket passar hjälptext men inte en guide. */
.dragspel-lista { border-bottom:1px solid var(--line); }
.dragspel-lista details.dragspel:last-of-type { border-bottom:0; }
details.dragspel > summary .sum-text { display:flex; flex-direction:column; gap:2px; min-width:0; }
details.dragspel > summary .sum-kort { font-weight:400; font-size:var(--fs-liten); color:var(--dim); line-height:1.4;
                                       white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dragspel-lista details.dragspel > .dragspel-kropp { color:var(--ink); }
.dragspel-kropp > * + * { margin-top:var(--sp-3); }
.dragspel-kropp ul, .dragspel-kropp ol { padding-left:1.25em; }
.dragspel-kropp li + li { margin-top:var(--sp-2); }
details.dragspel:target > summary, details.dragspel.traff > summary { color:var(--guld-txt); }
.dold { display:none !important; }


/* ── 9. RADLISTA (intäktsguiden, plattformssidornas detaljer) ─────────────── */
.radlista { list-style:none; }
.radlista > li { padding-block:var(--sp-3); border-top:1px solid var(--line); }
.radlista > li:first-child { border-top:0; padding-top:0; }
.radlista .rad-topp { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:var(--sp-1) var(--sp-3); }
.radlista .rad-namn { font-weight:600; }
.radlista .rad-info { margin-top:2px; font-size:var(--fs-bas); color:var(--dim); line-height:1.55; }


/* ── 10. SIDFOT (.pubfot) ──────────────────────────────────────────────────
   :root-prefixet (0,2,0) slår temalagrets html[data-theme="dark"] footer
   (0,1,2), som annars målar varje <footer> marinblå. */
:root .pubfot { background:transparent; color:var(--dim); border-top:1px solid var(--line);
                padding-block:var(--sp-8) var(--sp-10); font-size:14px; line-height:1.6; }
.pubfot .fot-rad { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--sp-3) var(--sp-6); }
.pubfot .fot-marke { font-weight:700; color:var(--ink); display:none; align-items:center; min-height:var(--tryckyta); }
/* Ordmärket i sidfoten bara från 768 — på mobil leder loggan i sidhuvudet hem. */
@media (min-width:768px) { .pubfot .fot-marke { display:inline-flex; } }
.pubfot .fot-lankar { display:flex; flex-wrap:wrap; gap:0 var(--sp-5); list-style:none; }
/* Tryckytan 44 px bred utan hål EFTER korta ord ("Pris"): luften ligger som padding på
   båda sidor och tas igen med negativ marginal, i stället för min-width med vänsterställd text.
   Texten står i början av ytan, inte centrerad (designfix F11/V9): centrerat stod "Pris" 3–4 px
   längre in än "Användarvillkor" på raden under. Ett kort ord får sin rest av 44 px efter sig. */
.pubfot .fot-lankar a[href] { display:inline-flex; align-items:center; justify-content:flex-start;
                              min-height:var(--tryckyta); min-width:var(--tryckyta);
                              padding-inline:var(--sp-2); margin-inline:calc(-1 * var(--sp-2)); }
.pubfot .fot-juridik { margin-top:var(--sp-4); max-width:var(--lasbredd); }
.pubfot .fot-juridik + .fot-juridik { margin-top:var(--sp-2); }


/* ── 11. JURIDIKSIDORNA (/villkor, /integritet) ────────────────────────────
   Texten är ordagrann ur apex-repot (templates/juridik/). Den bär apex egna
   klasser .toc, .box och .tblwrap — de stylas HÄR, avgränsade till .juridik.
   Från 1024 blir .juridik ett rutnät: innehållsförteckningen (.toc, apex egen)
   står klistrad i vänsterkolumnen och texten i en 65-teckens spalt till höger.
   Ingen markup flyttas — .toc placeras med grid-row över alla rader. */
.juridik { font-size:var(--fs-brod); line-height:var(--lh-brod); }
.juridik > * + * { margin-top:var(--sp-3); }
.juridik h2 { font-size:var(--fs-h2); line-height:var(--lh-rubrik); font-weight:700; letter-spacing:-.015em;
              margin-top:var(--sp-10); scroll-margin-top:calc(var(--navh) + var(--sp-4)); }
.juridik h3 { font-size:var(--fs-h3); font-weight:700; margin-top:var(--sp-5); }
.juridik ul { padding-left:1.25em; }
.juridik li + li { margin-top:var(--sp-2); }
.juridik strong { color:var(--ink); }
.juridik .box { background:var(--info-yta); border:1px solid var(--info-kant); border-left:4px solid var(--info-txt);
                border-radius:var(--r); padding:var(--sp-4) var(--sp-5); }
.juridik .tblwrap { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-kort); }
.juridik table { font-size:var(--fs-bas); }
.juridik th { white-space:normal; font-size:var(--fs-mikro); }
.juridik td { font-size:var(--fs-bas); vertical-align:top; }
.juridik .toc { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-kort);
                padding:var(--sp-3) var(--sp-4); }
/* Luften över och under texten är padding (designfix F10): bara min-height gav enradiga
   rader 10 px luft men tvåradiga (49 px) texten rakt mot skiljelinjen. 10 px + 24 px rad
   + 10 px = 44 px, så enradiga rader är lika höga som förut. */
.juridik .toc a[href] { display:flex; align-items:center; min-height:var(--tryckyta); font-size:var(--fs-bas);
                        padding-block:10px; text-decoration:none; }
.juridik .toc a[href] + a[href] { border-top:1px solid var(--line); }
.juridik-prisnot { max-width:var(--lasbredd); margin-bottom:var(--sp-6); }
/* Juridiksidorna på bred skärm: innehållet slutade på x 1050 av 1920 med högra halvan
   tom. Behållaren är nu precis så bred som spalterna (innehåll + text) och centreras. */
@media (min-width:1024px) {
  .pubsida .container-bred:has(> .juridik) {
    max-width:calc(16rem + var(--sp-12) + var(--lasbredd) + 2 * var(--sidmarginal)); }
}
@media (min-width:1024px) {
  .juridik { display:grid; grid-template-columns:16rem minmax(0, var(--lasbredd));
             column-gap:var(--sp-12); align-items:start; }
  .juridik > * { grid-column:2; }
  .juridik > * + * { margin-top:0; }
  .juridik > p, .juridik > ul, .juridik > .box, .juridik > .tblwrap, .juridik > h3 { margin-top:var(--sp-3); }
  .juridik > .toc { grid-column:1; grid-row:1 / span 80; position:sticky;
                    top:calc(var(--navh) + var(--sp-6)); margin-top:0;
                    max-height:calc(100vh - var(--navh) - 48px); overflow-y:auto; }
  .juridik > h2:first-of-type, .juridik > .toc + h2 { margin-top:0; }
  /* Prisnoten står utanför artikeln (artikeln är den ordagranna villkorstexten) men i
     linje med textspalten. */
  .juridik-prisnot { margin-left:calc(16rem + var(--sp-12)); }
}


/* ── 12. INLOGGNINGSKORTET (/login) och små centrerade kort (/waitlist) ─── */
.pub-mitt { display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
            padding:var(--sp-6) var(--sidmarginal) var(--sp-10); }
@media (min-width:768px) { .pub-mitt { justify-content:center; padding-block:var(--sp-12); } }
.pub-mitt .pubkort { width:100%; max-width:28rem; }
.pub-mitt .pubkort h1 { font-size:var(--fs-h1); line-height:var(--lh-rubrik); font-weight:700; letter-spacing:-.02em; }
.samtycke { font-size:var(--fs-liten); color:var(--dim); line-height:1.5; }
.formrad { display:flex; flex-direction:column; gap:var(--sp-2); }
.formrad label { font-size:14px; font-weight:600; }
.formrad input { width:100%; min-height:48px; font-size:var(--fs-brod); }
.formfel { color:var(--viktig-txt); font-size:var(--fs-bas); }


/* ── 13. UTSKRIFT ───────────────────────────────────────────────────────── */
@media print {
  .pubnav, .pubfot, .sokfalt, .juridik .toc, .hoppa { display:none !important; }
  .juridik { display:block; }
}