/* content.css — stilar för de GENERERADE innehållssidorna (/e/**, /artiklar/**).
   Länkas efter page.css. Rör inte de handskrivna sidorna.
   Bygger på samma tokens som resten av sajten (colors_and_type.css).
   Källa för layoutbesluten: appens AdditiveDetailScreen + ArticleBlock. */

/* ---- Brödsmulor ---- */
.crumbs{font-size:13px;color:var(--ink-3);margin:0 0 18px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.crumbs span[aria-hidden]{color:var(--line-strong)}

/* ---- Rubrik ---- */
.doc h1 .enum{font-variant-numeric:tabular-nums}
.doc-wide{max-width:900px}

/* Sektionsrubriker: appens versala eyebrow-recept (Manrope 600 @ 11/1.54),
   men som riktig <h2> så sidan har en läsbar rubrikstruktur för sökmotorn. */
.doc h2.sec{
  font-family:var(--font-sans);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.14em;color:var(--ink-3);
  margin:34px 0 8px;padding-top:20px;border-top:1px solid var(--line);line-height:1.3;
}
.doc h2.sec:first-of-type{border-top:none;padding-top:0}
.doc .meta{margin-top:14px;padding-top:0;border-top:none}

/* ---- Risknivå: trelägesremsan ur appen ---- */
.lvl-strip{display:flex;gap:6px;margin:24px 0 0}
.lvl{
  flex:1;display:flex;align-items:center;gap:7px;
  padding:10px;border-radius:12px;border:1px solid var(--line);background:transparent;
}
.lvl .dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink-3)}
.lvl .lbl{font-size:12px;font-weight:500;color:var(--ink-3);letter-spacing:-.006em;white-space:nowrap}
.lvl.is-active .lbl{font-weight:700}
.lvl-safe.is-active{background:var(--nova-1-tint);border-color:rgba(95,138,94,.2)}
.lvl-safe.is-active .dot{background:var(--nova-1);box-shadow:none}
.lvl-safe.is-active .lbl{color:var(--nova-1)}
.lvl-caution.is-active{background:var(--nova-3-tint);border-color:rgba(214,168,79,.2)}
.lvl-caution.is-active .dot{background:var(--nova-3);box-shadow:none}
.lvl-caution.is-active .lbl{color:#8A6B26}
.lvl-avoid.is-active{background:var(--nova-4-tint);border-color:rgba(201,121,90,.2)}
.lvl-avoid.is-active .dot{background:var(--nova-4);box-shadow:none}
.lvl-avoid.is-active .lbl{color:#93492C}
.lvl-note{font-size:13px;color:var(--ink-3);margin:8px 0 0}
@media(max-width:560px){.lvl-strip{flex-direction:column}.lvl{flex:none}}

/* BANNED är regulatorisk fakta, inte en punkt på Säker→Undvik-skalan. */
.banned-card{
  display:inline-flex;align-items:center;gap:8px;margin:24px 0 0;
  padding:10px 13px;border-radius:12px;
  background:var(--nova-4-tint);border:1px solid rgba(201,121,90,.2);
  font-size:12px;font-weight:700;color:#93492C;
}
.banned-card .dot{width:9px;height:9px;border-radius:50%;background:var(--nova-4)}

/* ---- Källor ---- */
.doc ul.src-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.doc ul.src-list li{padding-left:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.doc ul.src-list li::before{display:none}
.doc ul.src-list a{color:var(--green-press);display:inline-block;padding:7px 0}
.doc ul.src-list .ext{font-size:11px;margin-left:4px;opacity:.75}
.src-fallback{font-size:14px;color:var(--green-press);margin:0}
.doc ol.src-numbered{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.doc ol.src-numbered li{font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* ---- Disclaimer ---- */
.disclaimer{
  margin:26px 0 0;padding:13px 16px;border-radius:12px;
  background:var(--cream-surface-2);color:var(--ink-3);
  font-size:13.5px;line-height:1.55;
}

/* ---- CTA ---- */
.cta{margin:48px 0 0;padding:28px 26px;border-radius:var(--r-lg);background:var(--cream-surface);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.doc .cta h2{font-size:23px;margin:0}
.doc .cta p{margin:10px 0 0;font-size:15.5px}
.hero-cta{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}

/* Store-knappar — identisk markup och stil som startsidan, så /store-links.js
   kan uppgradera dem till riktiga länkar när Linus fyller i URL:erna. */
.store-btn{display:inline-flex;align-items:center;gap:11px;background:var(--ink);color:var(--cream-surface);padding:12px 20px 12px 18px;border-radius:var(--r-md);cursor:pointer;transition:transform .12s var(--ease-calm),opacity .18s}
.store-btn:hover{opacity:.9;text-decoration:none}
.store-btn:active{transform:scale(.98)}
.store-btn>span{display:flex;flex-direction:column;align-items:flex-start}
.store-btn .s1{font-size:10px;opacity:.72;line-height:1;letter-spacing:.02em}
.store-btn .s2{font-size:16px;font-weight:600;line-height:1.1;margin-top:3px;font-family:var(--font-sans)}
.store-btn-soon{cursor:default}
.store-btn-soon:hover{opacity:1}
.store-btn-soon:active{transform:none}

/* ---- Relaterat ---- */
.related{margin:48px 0 0;padding-top:26px;border-top:1px solid var(--line)}
.doc .related h2{font-size:23px;margin:0}
.related-sub{font-size:13px;color:var(--ink-3);margin:6px 0 0}
.doc ul.related-list{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2px}
.doc ul.related-list li{padding-left:0;font-size:15px}
.doc ul.related-list li::before{display:none}
.doc ul.related-list a{display:block;padding:9px 0;color:var(--ink-2)}
.doc ul.related-list a strong{color:var(--ink);font-variant-numeric:tabular-nums;margin-right:7px}
.doc ul.related-list a:hover{color:var(--ink)}

/* ---- Ordbokens översikt ---- */
.e-group{margin:44px 0 0}
.doc .e-group h2{font-size:23px;margin:0;scroll-margin-top:90px}
.doc ul.e-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:0 20px}
.doc ul.e-list li{padding-left:0;font-size:15px}
.doc ul.e-list li::before{display:none}
.doc ul.e-list a{display:flex;align-items:baseline;gap:9px;padding:9px 0;color:var(--ink-2);border-bottom:1px solid var(--line)}
.doc ul.e-list a:hover{color:var(--ink);text-decoration:none}
.doc ul.e-list strong{color:var(--ink);font-variant-numeric:tabular-nums;min-width:52px}
.doc ul.e-list .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc ul.e-list .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;background:var(--line-strong);align-self:center}
.doc ul.e-list .dot.lvl-safe{background:var(--nova-1)}
.doc ul.e-list .dot.lvl-caution{background:var(--nova-3)}
.doc ul.e-list .dot.lvl-avoid{background:var(--nova-4)}

/* ---- Artikellistan ---- */
.doc ul.art-cards{list-style:none;margin:32px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.doc ul.art-cards li{padding-left:0}
.doc ul.art-cards li::before{display:none}
.art-card a{display:block;padding:20px 22px;border-radius:var(--r-lg);background:var(--cream-surface);border:1px solid var(--line);box-shadow:var(--shadow-card);color:var(--ink-2)}
.art-card a:hover{text-decoration:none;border-color:var(--line-strong)}
.art-kicker{display:block;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--green-press)}
.art-title{display:block;font-family:var(--font-serif);font-size:22px;line-height:1.25;color:var(--ink);margin-top:8px}
.art-excerpt{display:block;font-size:15px;line-height:1.6;margin-top:8px}
.art-meta{display:block;font-size:12.5px;color:var(--ink-3);margin-top:10px}

/* ---- Artikelns brödtext (speglar ArticleBlock) ---- */
.art-body{margin-top:34px}
.doc .art-body p.lead{font-family:var(--font-serif);font-style:italic;font-size:19px;line-height:1.55;color:var(--ink);margin:0 0 22px}
.doc .art-body h2{margin:34px 0 10px}
.doc .art-body h3{margin:26px 0 8px}
.doc .art-body .callout{background:var(--green-tint);border:none;border-radius:var(--r-lg);padding:16px 18px;margin:18px 0}
.doc .art-body .callout p{color:var(--green-dark);font-size:14.5px;line-height:1.52;margin:0}
.doc .art-body .callout .callout-title{font-weight:600;font-size:13px;margin:0 0 5px}
.doc .art-body ul.art-list{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:9px}
.doc .art-body ol.art-list-num{list-style:decimal;margin:16px 0;padding-left:22px;display:flex;flex-direction:column;gap:9px}
.doc .art-body ol.art-list-num li{padding-left:0;font-size:16px;line-height:1.6;color:var(--ink-2)}
.doc .art-body ol.art-list-num li::before{display:none}
.doc .art-body ol.art-list-num::marker{color:var(--green)}
.aside{border-left:2px solid var(--green);padding-left:15px;margin:22px 0;font-family:var(--font-serif);font-style:italic;font-size:18px;line-height:1.5;color:var(--ink)}
.aside cite{display:block;font-family:var(--font-sans);font-style:normal;font-size:12.5px;color:var(--ink-3);margin-top:8px}
.rule{border:none;border-top:1px solid var(--line);margin:26px 0}
.art-sources{margin:44px 0 0;padding-top:24px;border-top:1px solid var(--line)}
.doc .art-sources h2{font-size:16px;font-family:var(--font-sans);font-weight:600;margin:0 0 12px}