/* ============================================================
   NEXTRUM — artiklarna (2026-11-12)

   Leo: "gör om strukturen på artiklarna de behöver ej linka våran
   sida så mycket experimenterar". En artikel är en läsbar spalt, inte
   en landningssida: rubrik, ingress, I korthet, och sedan block i den
   ordning artikeln behöver (text, tabell, räkneexempel, kalkylator,
   lista, ruta, tidslinje, frågor). Ingen knapp till anmälan, inga
   ämneskort, inget Nästa steg: Nextrum står i en rad sist.

   Inga hexkoder: allt ur cinemas tokens, så att mörkt läge följer med.
   Laddas bara av artiklarna (artikelsida() i bygg-omradessidor.py).
   ============================================================ */

.ar{
  max-width:740px;
  margin-inline:auto;
  /* Sidhuvudet ligger fast ovanpå: samma luft som .nx-page-hero. */
  padding-block:clamp(112px,13vw,170px) clamp(48px,7vw,96px);
}

/* ---------- toppen ---------- */
.ar-topp .nx-back{display:inline-flex}
.ar-topp .nx-et{display:flex;width:max-content;margin-top:24px}
.ar-h1{
  margin:14px 0 0;
  font-size:clamp(2.2rem,5.2vw,3.7rem);
  line-height:1;
  letter-spacing:-.042em;
  font-weight:800;
  text-wrap:balance;
}
.ar-h1 em{font-style:normal;color:var(--acc-lugn)}
.ar-ingress{
  margin:18px 0 0;
  font-size:clamp(1.12rem,1.5vw,1.3rem);
  line-height:1.5;
  letter-spacing:-.01em;
  color:var(--bl-2);
  text-wrap:pretty;
}
.ar-meta{
  margin:20px 0 0;
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bl-3);
}

/* ---------- I korthet och innehållet ---------- */
.ar-kort{
  margin-top:30px;
  padding:20px 22px 18px;
  background:var(--yta);
  border:1px solid var(--ln);
  border-radius:18px;
}
.ar-kort-h,
.ar-toc-h{
  font-family:var(--f-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--acc-lugn);
}
.ar-kort ul{margin:10px 0 0;padding-left:1.15em}
.ar-kort li{margin:.4em 0;font-size:1.02rem;line-height:1.5}
.ar-toc{margin-top:22px}
.ar-toc ol{margin:8px 0 0;padding-left:1.4em;font-size:.98rem;line-height:1.5}
.ar-toc li{margin:.25em 0}
.ar-toc a{color:inherit;text-decoration:underline;text-decoration-color:var(--ln-2);text-underline-offset:3px}

/* ---------- brödtexten ---------- */
.ar-h2{
  margin:clamp(42px,5.5vw,60px) 0 0;
  font-size:clamp(1.5rem,2.9vw,2.15rem);
  line-height:1.1;
  letter-spacing:-.032em;
  font-weight:700;
  text-wrap:balance;
  scroll-margin-top:96px;
}
.ar-h3{
  margin:0;
  font-size:1.08rem;
  line-height:1.3;
  letter-spacing:-.01em;
  font-weight:700;
}
.ar p,
.ar li{text-wrap:pretty}
.ar-text p{
  margin:16px 0 0;
  max-width:68ch;
  font-size:1.07rem;
  line-height:1.72;
}
.ar a:not(.nx-back){
  color:inherit;
  text-decoration:underline;
  text-decoration-color:var(--acc-lugn);
  text-underline-offset:3px;
}

/* ---------- tabell ---------- */
.ar-tabell-ram{margin-top:22px;overflow-x:auto}
.ar-tabell{width:100%;border-collapse:collapse;font-size:1rem}
.ar-tabell caption{
  caption-side:bottom;
  text-align:left;
  padding-top:10px;
  font-size:.9rem;
  color:var(--bl-3);
}
.ar-tabell th,
.ar-tabell td{padding:11px 12px;border-bottom:1px solid var(--ln);text-align:left}
.ar-tabell thead th{
  font-family:var(--f-mono);
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--bl-3);
  border-bottom-color:var(--ln-2);
}
/* Tal till höger bara i en tabell med tal ('tal' i blocket). Inga
   tabellsiffror: typsnittets tabellkomma står med en lucka, "17 ,5". */
.ar-tabell.tal td:not(:first-child),
.ar-tabell.tal th:not(:first-child){text-align:right}
.ar-tabell td{line-height:1.45}
.ar-tabell tbody th{font-weight:700}

/* ---------- räkneexempel ---------- */
.ar-exempel{
  margin-top:24px;
  padding:20px 22px;
  background:var(--tint);
  border-left:3px solid var(--acc-lugn);
  border-radius:4px 16px 16px 4px;
}
.ar-exempel dl{margin:12px 0 0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px}
.ar-exempel dt{font-size:1rem;line-height:1.45}
.ar-exempel dd{margin:0;text-align:right;font-size:1rem}
.ar-exempel .ar-summa{border-top:1px solid var(--ln-2);padding-top:8px;font-weight:700}
.ar-exempel p{margin:12px 0 0;font-size:.95rem;line-height:1.55;color:var(--bl-2)}

/* ---------- lista och tidslinje ---------- */
.ar-lista{margin:18px 0 0;padding-left:1.3em;max-width:68ch}
.ar-lista li{margin:.55em 0;font-size:1.05rem;line-height:1.6}
.ar-lista.check{list-style:none;padding-left:0}
.ar-lista.check li{position:relative;padding-left:32px}
.ar-lista.check li::before{
  content:"";
  position:absolute;left:0;top:.28em;
  width:18px;height:18px;
  border:2px solid var(--acc-lugn);
  border-radius:5px;
}
.ar-tid{margin:22px 0 0;padding:0;list-style:none;border-left:2px solid var(--ln-2)}
.ar-tid li{position:relative;padding:0 0 18px 22px}
.ar-tid li::before{
  content:"";
  position:absolute;left:-7px;top:.35em;
  width:12px;height:12px;border-radius:50%;
  background:var(--acc-lugn);
}
.ar-tid b{display:block;font-family:var(--f-mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--bl-3)}
.ar-tid span{display:block;margin-top:4px;font-size:1.03rem;line-height:1.55}

/* ---------- ruta ---------- */
.ar-ruta{
  margin-top:28px;
  padding:20px 22px;
  border:1px solid var(--ln-2);
  border-radius:18px;
}
.ar-ruta p{margin:10px 0 0;font-size:1rem;line-height:1.6}

/* ---------- kalkylatorn ---------- */
.ar-kalk{
  margin-top:24px;
  padding:clamp(18px,3vw,28px);
  background:var(--yta);
  border:1px solid var(--ln);
  border-radius:22px;
}
.ar-kalk-rutnat{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));
  gap:8px 20px;
  margin-top:14px;
}
.ar-kalk label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:48px;
  border-bottom:1px solid var(--ln);
  font-size:.98rem;
  line-height:1.25;
}
.ar-kalk select{
  flex:none;
  width:72px;
  min-height:40px;
  padding:0 8px;
  font:inherit;
  font-size:1rem;
  color:var(--bl);
  background:var(--pap);
  border:1px solid var(--ln-2);
  border-radius:10px;
}
.ar-kalk-extra{margin-top:16px}
.ar-kalk-extra .ar-h3{margin-bottom:4px}
.ar-kalk-ut{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--ln-2);
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
}
@media (min-width:620px){
  .ar-kalk-ut{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:start}
}
.ar-kalk-tal{
  display:block;
  font-size:clamp(2.6rem,7vw,3.6rem);
  line-height:1;
  letter-spacing:-.04em;
  font-weight:800;
}
.ar-kalk-tak{display:block;margin-top:6px;font-size:.92rem;color:var(--bl-3)}
.ar-kalk-beh{margin:0;padding:0;list-style:none}
.ar-kalk-beh li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 0;
  border-bottom:1px solid var(--ln);
  font-size:.96rem;
  line-height:1.35;
}
.ar-kalk-beh [data-lage]{flex:none;font-weight:700;color:var(--bl-3)}
.ar-kalk-beh [data-lage="ja"]{color:var(--gron-text)}
.ar-kalk-beh [data-lage="nej"]{color:var(--rod-text)}
.ar-kalk-not{margin:16px 0 0;font-size:.88rem;line-height:1.5;color:var(--bl-3)}
.ar-kalk-tom{
  margin-top:12px;
  font-size:.9rem;
  color:var(--bl-2);
  background:none;
  border:0;
  padding:0;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  min-height:44px;
}

/* ---------- frågorna ---------- */
.ar-fragor{margin-top:16px;border-top:1px solid var(--ln)}
.ar-fragor details{border-bottom:1px solid var(--ln)}
.ar-fragor summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:56px;
  padding:10px 0;
  font-size:1.05rem;
  font-weight:600;
  line-height:1.35;
  list-style:none;
  cursor:pointer;
}
.ar-fragor summary::-webkit-details-marker{display:none}
.ar-fragor summary::after{content:"+";flex:none;font-weight:400;font-size:1.3rem;color:var(--bl-3)}
.ar-fragor details[open] summary::after{content:"−"}
.ar-fragor details p{margin:0 0 18px;max-width:68ch;font-size:1.02rem;line-height:1.65;color:var(--bl-2)}

/* ---------- slutet ---------- */
.ar-kallor{margin-top:clamp(44px,6vw,64px)}
.ar-kallor ol{margin:10px 0 0;padding-left:1.4em;font-size:.95rem;line-height:1.55;color:var(--bl-2)}
.ar-kallor li{margin:.35em 0;overflow-wrap:anywhere}
.ar-las{margin-top:34px}
.ar-las ul{margin:10px 0 0;padding:0;list-style:none}
.ar-las li{padding:10px 0;border-bottom:1px solid var(--ln);font-size:1.02rem}
.ar-om{
  margin-top:34px;
  padding-top:18px;
  border-top:1px solid var(--ln);
  font-size:.96rem;
  line-height:1.6;
  color:var(--bl-2);
}