@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/atkinson-400.woff2) format('woff2')}
@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/atkinson-700.woff2) format('woff2')}
@font-face{font-family:'Fontdiner Swanky';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/dinerswanky.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/playfair-700.woff2) format('woff2')}
@font-face{font-family:'Pacifico';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/pacifico-400.woff2) format('woff2')}
@font-face{font-family:'Bangers';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bangers-400.woff2) format('woff2')}

/* Textstorlek (Aa): skalar bara sångkortet, inte topplist eller knappar */
:root{--scale:1}
html[data-size="s"]{--scale:.9}
html[data-size="l"]{--scale:1.2}
html[data-size="xl"]{--scale:1.45}
html{font-size:16px;-webkit-text-size-adjust:100%}

*,*::before,*::after{box-sizing:border-box}
/* Ägarens förhandsgranskning: ingen textmarkering (vald via is-preview på body) */
body.is-preview{-webkit-user-select:none;user-select:none}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Atkinson Hyperlegible',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
button{font:inherit;color:inherit}

/* Teman (ljust läge) */
body.theme-kraftskiva{--bg:#fff7ed;--surface:#ffffff;--text:#431407;--muted:#9a3412;--accent:#c2410c;--accent-soft:#ffedd5;--line:#fed7aa;--font-display:'Fontdiner Swanky',cursive}
body.theme-midsommar{--bg:#f0fdf4;--surface:#ffffff;--text:#14532d;--muted:#4d7c0f;--accent:#15803d;--accent-soft:#dcfce7;--line:#bbf7d0;--font-display:'Fontdiner Swanky',cursive}
body.theme-jul{--bg:#3f0d0d;--surface:#5a1b1b;--text:#fff5f5;--muted:#f3c4c4;--accent:#fbbf24;--accent-soft:#7a2a2a;--line:#8a3535;--font-display:'Playfair Display',Georgia,serif}
body.theme-klassisk{--bg:#fbf7ee;--surface:#ffffff;--text:#1f2937;--muted:#6b7280;--accent:#1e3a5f;--accent-soft:#e9eef5;--line:#e6e1d6;--font-display:'Playfair Display',Georgia,serif}
body.theme-student{--bg:#eff6ff;--surface:#ffffff;--text:#172554;--muted:#475569;--accent:#1d4ed8;--accent-soft:#dbeafe;--line:#bfdbfe;--font-display:'Fontdiner Swanky',cursive}

/* Nattläge: gemensam mörk grund, temats accent ljusas upp */
html[data-night="1"] body{--bg:#0f172a;--surface:#1e293b;--text:#f1f5f9;--muted:#94a3b8;--line:#334155;--accent-soft:#334155}
html[data-night="1"] body.theme-kraftskiva{--accent:#fdba74}
html[data-night="1"] body.theme-midsommar{--accent:#86efac}
html[data-night="1"] body.theme-jul{--accent:#fcd34d}
html[data-night="1"] body.theme-klassisk{--accent:#93c5fd}
html[data-night="1"] body.theme-student{--accent:#93c5fd}

/* Topplist */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:4px;min-height:56px;padding:6px 8px;padding-top:calc(6px + env(safe-area-inset-top));background:var(--surface);border-bottom:1px solid var(--line)}
.top .title{flex:1;min-width:0;padding-left:8px;font-family:inherit;font-weight:700;font-size:1.15rem;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left}
.top .actions{display:flex;gap:2px}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;border:0;border-radius:12px;background:transparent;color:var(--accent);cursor:pointer;-webkit-tap-highlight-color:transparent}
.iconbtn:active,.iconbtn[aria-expanded="true"]{background:var(--accent-soft)}
.iconbtn svg{width:22px;height:22px}
.aa{font-weight:700;font-size:1.05rem}
#sb-night svg:nth-child(1){display:block}#sb-night svg:nth-child(2){display:none}
html[data-night="1"] #sb-night svg:nth-child(1){display:none}html[data-night="1"] #sb-night svg:nth-child(2){display:block}

/* Aa-dropdown: varje alternativ visas i sin egen storlek */
.menu{position:absolute;right:8px;top:calc(100% + 6px);min-width:210px;padding:6px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.14);z-index:20}
.menu[hidden]{display:none}
.opt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:6px 12px;border:0;border-radius:10px;background:transparent;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.opt:active{background:var(--accent-soft)}
.opt.is-on{color:var(--accent);font-weight:700}
.opt .check{width:20px;height:20px;flex:none;visibility:hidden}
.opt.is-on .check{visibility:visible}
.opt[data-size="s"]{font-size:.9rem}.opt[data-size="m"]{font-size:1rem}.opt[data-size="l"]{font-size:1.2rem}.opt[data-size="xl"]{font-size:1.45rem}

/* Innehåll */
.wrap{max-width:640px;margin:0 auto;padding:12px 12px calc(24px + env(safe-area-inset-bottom))}
.list{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.row{display:flex;align-items:center;gap:10px;min-height:56px;padding:10px 12px;border-top:1px solid var(--line);color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.list>:first-child{border-top:0}
.row .num{width:1.8em;flex:none;color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.row .txt{flex:1;min-width:0}
.row .name{display:block;font-size:1.05rem;font-weight:700}
.row .mel{display:block;font-size:.85rem;color:var(--muted)}
.row .chev{flex:none;color:var(--muted);opacity:.6;display:flex}
.row .chev svg{width:20px;height:20px}
.row:active{background:var(--accent-soft)}
.rubrik{display:flex;align-items:center;gap:12px;padding:12px 14px;font-family:var(--font-display);font-size:1.1rem;color:var(--muted);border-top:1px solid var(--line)}
.rubrik::before,.rubrik::after{content:'';flex:1;height:1px;background:var(--line)}
/* Rubrikstilar (r-linjer är standard ovan). r-upper är tillval; textkontrasten sätts som color-mix inline. */
.rubrik.r-enkel,.rubrik.r-stor,.rubrik.r-band,.rubrik.r-pill,.rubrik.r-ram,.rubrik.r-understruken,.rubrik.r-dubbel,.rubrik.r-block,.rubrik.r-mjukblock,.rubrik.r-mork{justify-content:center}
.rubrik.r-enkel::before,.rubrik.r-enkel::after,.rubrik.r-stor::before,.rubrik.r-stor::after,.rubrik.r-band::before,.rubrik.r-band::after,.rubrik.r-pill::before,.rubrik.r-pill::after,.rubrik.r-ram::before,.rubrik.r-ram::after,.rubrik.r-understruken::before,.rubrik.r-understruken::after,.rubrik.r-dubbel::before,.rubrik.r-dubbel::after,.rubrik.r-block::before,.rubrik.r-block::after,.rubrik.r-mjukblock::before,.rubrik.r-mjukblock::after,.rubrik.r-mork::before,.rubrik.r-mork::after{display:none}
.rubrik.r-stor span{font-size:1.4em;color:var(--accent)}
.rubrik.r-band span{flex:1;text-align:center;background:var(--accent);color:var(--surface);padding:.35em 1em;border-radius:10px}
.rubrik.r-pill span{background:var(--accent-soft);color:var(--accent);padding:.35em 1.2em;border-radius:999px}
.rubrik.r-ram span{border:1px solid var(--line);padding:.35em 1.2em;border-radius:12px}
.rubrik.r-understruken span{padding-bottom:.2em;border-bottom:2px solid var(--accent)}
.rubrik.r-dubbel span{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:.3em 1.4em}
.rubrik.r-ornament{justify-content:center}
.rubrik.r-ornament::before,.rubrik.r-ornament::after{content:'\2726';flex:0 0 auto;height:auto;background:none;color:var(--accent);font-size:.85em}
.rubrik.r-block{background:var(--accent);color:var(--surface);border-top:0}
.rubrik.r-mjukblock{background:var(--accent-soft);color:var(--accent)}
.rubrik.r-mork{background:var(--text);color:var(--bg);border-top:0}
.rubrik.r-upper span{text-transform:uppercase;letter-spacing:.06em}

/* Fritext mellan visorna */
.fritext{padding:12px 14px;border-top:1px solid var(--line);white-space:pre-line;overflow-wrap:anywhere;font-size:.95rem}
.fritext.f-center{text-align:center}
.fritext.f-right{text-align:right}

/* Avdelare (a-linje är standard). Tydliga: accentfärgade linjer och stora symboler. */
.avdelare{display:flex;align-items:center;justify-content:center;gap:12px;min-height:44px;padding:10px 24px;border-top:1px solid var(--line);color:var(--accent)}
.avdelare .ln{flex:1;height:2px;background:var(--accent);opacity:.35;border-radius:2px}
.avdelare .sym{font-size:1.25rem;line-height:1}
.avdelare.a-linje .ln{height:1px;background:var(--line);opacity:1}
.avdelare.a-tjock .ln{height:4px;background:var(--accent);opacity:.85}
.avdelare.a-dubbel .ln{height:7px;background:none;border-top:2px solid var(--accent);border-bottom:2px solid var(--accent);opacity:.6;border-radius:0}
.avdelare.a-streckad .ln{height:0;background:none;border-top:3px dashed var(--accent);opacity:.6}
.avdelare.a-prickad .ln{height:0;background:none;border-top:4px dotted var(--accent);opacity:.7}
.avdelare.a-skal .sym{font-size:1.35rem}
.avdelare.a-kortaccent{gap:0}.avdelare.a-kortaccent .ln{max-width:70px;height:4px;background:var(--accent);opacity:.85}
.avdelare.a-ton .ln{height:2px;opacity:.8}
.avdelare.a-ton .ln:first-child{background:linear-gradient(90deg,transparent,var(--accent))}
.avdelare.a-ton .ln:last-child{background:linear-gradient(90deg,var(--accent),transparent)}
.avdelare.a-streckad,.avdelare.a-prickad{gap:0}
.avdelare.a-streckad .ln:last-child,.avdelare.a-prickad .ln:last-child{display:none}
.avdelare.a-prickar .ln,.avdelare.a-vag .ln,.avdelare.a-asterisker .ln,.avdelare.a-fleuron .ln{display:none}
.avdelare.a-prickar .sym{font-size:.95rem;letter-spacing:.5em;margin-right:-.5em}
.avdelare.a-diamant .sym{font-size:1.15rem}
.avdelare.a-stjarna .sym{font-size:1.4rem}
.avdelare.a-not .sym{font-size:1.35rem;letter-spacing:.1em}
.avdelare.a-fleuron .sym{font-size:1.7rem}
.avdelare.a-blomma .sym{font-size:1.45rem}
.avdelare.a-vag .sym{font-size:1.45rem}
.avdelare.a-asterisker .sym{letter-spacing:.4em;margin-right:-.4em}

.empty{padding:28px 16px;text-align:center;color:var(--muted)}

/* Sångkortet: allt här inne skalar med Aa (em relativt kortets font-size) */
.song{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px 16px 20px;font-size:calc(1rem * var(--scale))}
.song .pos{font-size:.8em;color:var(--accent);font-weight:700}
.song h1{font-family:var(--font-display);font-size:1.6em;line-height:1.15;margin:2px 0 8px;font-weight:400}
.chip{display:inline-block;font-size:.85em;color:var(--muted);background:var(--accent-soft);border-radius:999px;padding:3px 12px;margin-bottom:12px}
.lyrics{white-space:pre-line;font-size:1.125em;line-height:1.65;overflow-wrap:anywhere}

/* Infosida med schema-layout: tider och händelser i två raka spalter */
.schema{display:grid;grid-template-columns:max-content 1fr;margin-top:.35em;font-size:1.125em;line-height:1.5}
.schema .st{color:var(--accent);font-weight:700;white-space:nowrap;padding:.5em 1em .5em 0;font-variant-numeric:tabular-nums}
.schema .se{padding:.5em 0;overflow-wrap:anywhere}
.schema .st,.schema .se{border-top:1px solid var(--line)}
.schema .st:first-child,.schema .st:first-child+.se{border-top:0}
.schema.regler .st{text-align:right}

/* Infosida: samtalsämnen, ett per rad med valfri underrad (svar/författare) */
.amnen{margin-top:.6em;font-size:1.05em;line-height:1.5}
.amnen .amne{padding:.55em 0;border-top:1px solid var(--line)}
.amnen .amne:first-child{border-top:0;padding-top:0}
.amnen .at{margin:0;overflow-wrap:anywhere}
.amnen .as{margin:.15em 0 0;font-size:.85em;color:var(--muted)}

/* Infosida: meny med rubriker och texter, valfri justering (centrerat är standard) */
.meny{margin-top:1.2em;text-align:center;font-size:1.05em;line-height:1.5}
.meny.m-left{text-align:left}
.meny.m-right{text-align:right}
.meny .mh{font-family:var(--font-display);font-size:1.25em;color:var(--accent);font-weight:400;margin:.9em 0 .15em}
.meny .mh:first-child{margin-top:0}
.meny .mt{margin:0 0 .1em;white-space:pre-line;overflow-wrap:anywhere}
.schema.gaster{grid-template-columns:fit-content(45%) 1fr}
.schema.gaster .st{color:var(--text);white-space:normal}
.schema.gaster .se{color:var(--muted)}

/* Bläddring + stäng (skalar inte) */
.pager{display:flex;gap:10px;margin-top:12px}
.pager>a,.pager>span{flex:1;min-width:0;display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--line);text-decoration:none;color:var(--accent);font-weight:700;-webkit-tap-highlight-color:transparent}
.pager>.next{justify-content:flex-end;text-align:right}
.pager>span{color:var(--muted);opacity:.5}
.pager .txt{min-width:0}
.pager .lbl{display:block;font-size:.75rem;font-weight:400;color:var(--muted)}
.pager .nm{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager svg{width:20px;height:20px;flex:none}
.pager>a:active{background:var(--accent-soft)}
.close{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;margin-top:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--accent);font-weight:700;text-decoration:none;-webkit-tap-highlight-color:transparent}
.close svg{width:20px;height:20px}
.close:active{background:var(--accent-soft)}

/* Välkomst, ange kod, 404 */
.hero{min-height:calc(100vh - 64px);display:flex;align-items:center;justify-content:center;padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.hero-full{min-height:100vh;min-height:100dvh}
.card{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:28px 22px;text-align:center}
.card .symbol{font-size:3rem;line-height:1;margin-bottom:8px}
.card h1{font-family:var(--font-display);font-size:2rem;line-height:1.15;margin:0 0 6px;font-weight:400}
.card .meta{color:var(--muted);margin:2px 0}
.card .intro{white-space:pre-line;margin:18px 0 0;padding:14px;border:1px dashed var(--line);border-radius:12px;text-align:left}
.card p{margin:8px 0;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;border-radius:999px;background:var(--accent);color:var(--surface);font-weight:700;font-size:1.05rem;text-decoration:none;border:0;cursor:pointer;margin-top:18px;-webkit-tap-highlight-color:transparent}
.card input{width:100%;min-height:52px;font:inherit;font-size:1.1rem;text-align:center;border:1px solid var(--line);border-radius:14px;padding:0 12px;background:var(--bg);color:var(--text);margin-top:12px}
.card .err{color:#b91c1c;margin-top:10px}
html[data-night="1"] .card .err{color:#fca5a5}
.foot{margin-top:18px;font-size:.8rem;color:var(--muted)}
.foot a{color:inherit}

/* Offline-bekräftelse */
.offline-note{text-align:center;font-size:.85rem;color:var(--muted);margin-top:14px}
.offline-note[hidden]{display:none}

/* Gratisversion */
.locked-note{text-align:center;font-size:.9rem;color:var(--muted);margin:14px 0 0;padding:12px 14px;border:1px dashed var(--line);border-radius:12px}
.locked-text{font-size:1.05rem;line-height:1.55;margin:8px 0 0}

/* Tidslås: teaser med nedräkning ovanpå innehållet tills häftet öppnar */
.teaser{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px 16px;overflow:auto}
.teaser .card p{margin:14px 0 0;color:var(--muted)}
.teaser .opens{font-size:1.2rem;font-weight:700;color:var(--accent);margin:2px 0 14px}
.teaser .countdown{font-family:var(--font-display);font-size:2.1rem;line-height:1.1;min-height:1.2em;color:var(--text)}
body.locked{overflow:hidden}

/* Signatur längst ned i listan */
.credit{text-align:center;font-size:.8rem;color:var(--muted);margin-top:18px;opacity:.85}
.credit a{color:inherit}

/* Extrainfo under egen visa */
.extra{white-space:pre-line;margin-top:14px;padding-top:10px;border-top:1px dashed var(--line);font-size:.9em;color:var(--muted)}

/* Infosidor: chips över listan */
.pages{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 12px}
.pagechip{display:inline-flex;align-items:center;gap:6px;min-height:42px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 16px;color:var(--accent);font-weight:700;text-decoration:none;-webkit-tap-highlight-color:transparent}
.pagechip:active{background:var(--accent-soft)}
.pagechip .sym{font-size:1.1rem;line-height:1}