/* Hjälpcentret för Infinity CRM.
   Bygger vidare på /stil.css (tokens, Open Sans, .knapp, .marke) och lägger till
   dokumentationslayouten: navigationsträd, artikel och innehållsförteckning.
   Ingen byggkedja — filen skrivs och läses som den är. */

:root {
  --sido-bredd: 300px;
  --toc-bredd: 264px;
  --skena-bredd: 34px;
  --topp-hojd: 66px;
  --smul-hojd: 44px;
  --spar-saljare-yta: #e6f0ed;
  --spar-saljare-text: #055559;
  --spar-saljchef-yta: #eef1f6;
  --spar-saljchef-text: #3f5372;
  --spar-admin-yta: #fdece2;
  --spar-admin-text: #b8460a;
}

/* --- Sidhuvud ----------------------------------------------------------- */

.hjalp {
  background: #fff;
}

.hoppa {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--teal-dark);
  color: var(--orange-text);
  padding: 10px 18px;
  border-radius: 0 0 8px 0;
}
.hoppa:focus {
  left: 0;
}

.hjalp-topp {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--linje);
}

.hjalp-topp__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  height: var(--topp-hojd);
  padding: 0 24px;
  max-width: 1680px;
  margin: 0 auto;
}

.hjalp-topp .marke {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.hjalp-topp .marke__logo {
  display: block;
  height: 28px;
  width: auto;
}
.hjalp-topp .marke__produkt {
  padding-left: 12px;
  border-left: 1px solid var(--linje);
  font-weight: 600;
  font-size: 15px;
  color: var(--teal-dark);
  white-space: nowrap;
}

.hjalp-topp__meny {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 22px;
}
.hjalp-topp__meny a {
  color: var(--body);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.hjalp-topp__meny a:hover {
  color: var(--orange);
}

.knapp.liten {
  padding: 8px 18px;
  font-size: 13px;
}

.sido-knapp {
  display: none;
  background: none;
  border: 1px solid var(--linje);
  border-radius: 8px;
  padding: 7px;
  color: var(--body);
  cursor: pointer;
}
.sido-knapp svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* --- Brödsmulor --------------------------------------------------------- */

.smulor {
  position: sticky;
  top: var(--topp-hojd);
  z-index: 25;
  background: var(--yta);
  border-bottom: 1px solid var(--linje);
}
.smulor ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0 24px;
  height: var(--smul-hojd);
  max-width: 1680px;
  margin: 0 auto;
  font-size: 13px;
}
.smulor a {
  color: var(--muted);
  text-decoration: none;
}
.smulor a:hover {
  color: var(--orange);
}
.smulor span[aria-current] {
  color: var(--teal-dark);
  font-weight: 600;
}
.smulor__delare {
  color: #c3c8cd;
}

/* --- Layout ------------------------------------------------------------- */

.hjalp-layout {
  display: grid;
  grid-template-columns: var(--sido-bredd) minmax(0, 1fr) var(--toc-bredd);
  gap: 0;
  max-width: 1680px;
  margin: 0 auto;
  align-items: start;
  transition: grid-template-columns 0.22s ease;
}

/* Hopfällda paneler krymper till en smal skena med lodrät etikett — läsaren
   kan ge artikeln hela bredden utan att tappa vägen tillbaka. */
.hjalp-layout.sido-dold {
  grid-template-columns: var(--skena-bredd) minmax(0, 1fr) var(--toc-bredd);
}
.hjalp-layout.toc-dold {
  grid-template-columns: var(--sido-bredd) minmax(0, 1fr) var(--skena-bredd);
}
.hjalp-layout.sido-dold.toc-dold {
  grid-template-columns: var(--skena-bredd) minmax(0, 1fr) var(--skena-bredd);
}

/* --- Vikhandtag och skenor --------------------------------------------- */

.vik-handtag {
  position: absolute;
  top: 78px;
  z-index: 5;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--linje);
  border-radius: 50%;
  background: #fff;
  color: var(--teal-mid);
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  transition: color 0.15s, border-color 0.15s, transform 0.15s;
}
.vik-handtag svg {
  width: 13px;
  height: 13px;
}
.vik-handtag:hover {
  color: var(--orange);
  border-color: var(--orange);
}
.vik-handtag:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.vik-handtag--sido {
  right: -13px;
}
.vik-handtag--toc {
  left: -13px;
}
/* Pilen pekar mot den riktning panelen kommer att röra sig. */
.sido-dold .vik-handtag--sido svg,
.toc-dold .vik-handtag--toc svg {
  transform: rotate(180deg);
}

.rail-etikett {
  display: none;
  position: absolute;
  top: 128px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}
.sido-dold .sido .rail-etikett,
.toc-dold .artikel-toc .rail-etikett {
  display: block;
}
/* Panelernas innehåll göms — bara handtaget och etiketten blir kvar. */
.sido-dold .sido__sok,
.sido-dold .sido__trad,
.toc-dold .artikel-toc h2,
.toc-dold .artikel-toc ul {
  display: none;
}
/* Hopfälld blir panelen en skena i full höjd. Utan höjden krympte den till
   sina 86 px vaddering — och den lodräta etiketten (129 px) stack ut, vilket
   gav både avklippt text och en scrollbar i en 34 px bred remsa. */
.toc-dold .artikel-toc {
  border-left: 1px solid var(--linje);
  padding: 0;
  height: calc(100vh - var(--topp-hojd) - var(--smul-hojd));
  max-height: none;
  overflow: visible;
}

/* --- Sidomeny ----------------------------------------------------------- */

.sido {
  position: sticky;
  top: calc(var(--topp-hojd) + var(--smul-hojd));
  height: calc(100vh - var(--topp-hojd) - var(--smul-hojd));
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--linje);
  background: #fff;
}

.sido__sok {
  padding: 18px 16px 12px;
  border-bottom: 1px solid var(--linje);
}

.sok {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--linje);
  border-radius: 10px;
  padding: 0 10px;
  height: 40px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sok:focus-within {
  border-color: var(--teal-mid);
  box-shadow: 0 0 0 3px rgba(116, 165, 168, 0.18);
}
.sok svg {
  width: 15px;
  height: 15px;
  color: var(--muted);
  flex-shrink: 0;
}
.sok input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 14px;
  color: var(--body);
  background: transparent;
}
.sok kbd {
  font-family: inherit;
  font-size: 10px;
  color: var(--muted);
  border: 1px solid var(--linje);
  border-radius: 5px;
  padding: 2px 6px;
  white-space: nowrap;
}

.sparfilter {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.sparfilter button {
  flex: 1;
  font: inherit;
  font-size: 11.5px;
  padding: 5px 4px;
  border: 1px solid var(--linje);
  border-radius: 7px;
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.sparfilter button:hover {
  border-color: var(--teal-mid);
  color: var(--teal-dark);
}
.sparfilter button.ar-vald {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--orange-text);
}

.sido__trad {
  flex: 1;
  overflow-y: auto;
  padding: 12px 8px 40px;
  overscroll-behavior: contain;
}

/* Trädet */
.trad {
  list-style: none;
  margin: 0;
  padding: 0;
}
.trad[data-niva='1'] {
  margin-left: 14px;
  border-left: 1px solid var(--linje);
}
.trad[data-niva='2'] {
  margin-left: 12px;
  border-left: 1px solid var(--linje);
}
.trad[data-niva='1'],
.trad[data-niva='2'] {
  display: none;
}
.tradpost.ar-oppen > .trad {
  display: block;
}

.trad-rad {
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 8px;
  transition: background 0.12s;
}
.trad-rad:hover {
  background: var(--yta);
}

.trad-rad a,
.trad-rubrik {
  flex: 1;
  min-width: 0;
  display: block;
  padding: 6px 10px 6px 2px;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--body);
  text-decoration: none;
}
.trad-rubrik {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 14px;
  padding-bottom: 4px;
}
.tradpost[data-niva='0'] > .trad-rad > a {
  font-weight: 600;
  color: var(--teal-dark);
}
.trad-rad a:hover {
  color: var(--orange);
}
.tradpost.ar-aktiv > .trad-rad {
  background: var(--teal-soft);
}
.tradpost.ar-aktiv > .trad-rad > a {
  color: var(--teal-dark);
  font-weight: 600;
}

.trad-vik {
  flex-shrink: 0;
  width: 22px;
  height: 26px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--muted);
  cursor: pointer;
}
.trad-vik svg {
  width: 14px;
  height: 14px;
  transition: transform 0.15s;
}
.trad-vik[aria-expanded='true'] svg {
  transform: rotate(90deg);
}
.trad-vik--tom {
  cursor: default;
}

.spar-prick {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-left: 6px;
  vertical-align: middle;
}
.spar-prick--saljare {
  background: var(--spar-saljare-text);
}
.spar-prick--saljchef {
  background: var(--spar-saljchef-text);
}
.spar-prick--admin {
  background: var(--spar-admin-text);
}

/* Sökträffar ersätter trädet medan man skriver */
.sokresultat {
  padding: 4px 6px;
}
.sokresultat__tom {
  padding: 14px 10px;
  font-size: 13px;
  color: var(--muted);
}
.sokresultat a {
  display: block;
  padding: 9px 10px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--body);
}
.sokresultat a:hover,
.sokresultat a.ar-markerad {
  background: var(--teal-soft);
}
.sokresultat strong {
  display: block;
  font-size: 13.5px;
  color: var(--teal-dark);
  font-weight: 600;
}
.sokresultat span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}
.sokresultat mark {
  background: #ffe9c9;
  color: inherit;
  border-radius: 2px;
}

/* --- Artikeln ----------------------------------------------------------- */

.artikel {
  min-width: 0;
  padding: 42px 56px 80px;
  max-width: 860px;
}
/* Fäller läsaren ihop en panel ska artikeln få nytta av utrymmet — framför allt
   tabellerna. Radlängden hålls ändå läsbar. */
.toc-dold .artikel {
  max-width: 980px;
}
.sido-dold.toc-dold .artikel {
  max-width: 1060px;
}

.artikel h1 {
  font-size: 40px;
  line-height: 1.15;
  letter-spacing: -0.9px;
  font-weight: 600;
  color: var(--teal-dark);
  margin: 0 0 16px;
}

.artikel__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 22px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--linje);
}
.meta-post {
  font-size: 12.5px;
  color: var(--muted);
}
.meta-post + .meta-post::before {
  content: '·';
  margin-right: 10px;
  color: #c3c8cd;
}

.spar {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 999px;
}
.spar--saljare {
  background: var(--spar-saljare-yta);
  color: var(--spar-saljare-text);
}
.spar--saljchef {
  background: var(--spar-saljchef-yta);
  color: var(--spar-saljchef-text);
}
.spar--admin {
  background: var(--spar-admin-yta);
  color: var(--spar-admin-text);
}

.artikel p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.72;
}
.artikel p.ingress {
  font-size: 18.5px;
  line-height: 1.6;
  color: #2f3b3c;
  margin-bottom: 28px;
}

.artikel h2 {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.4px;
  font-weight: 600;
  color: var(--teal-dark);
  margin: 46px 0 16px;
  scroll-margin-top: calc(var(--topp-hojd) + var(--smul-hojd) + 16px);
}
.artikel h3 {
  font-size: 19px;
  line-height: 1.3;
  font-weight: 600;
  color: #123c3e;
  margin: 34px 0 12px;
  scroll-margin-top: calc(var(--topp-hojd) + var(--smul-hojd) + 16px);
}
.artikel h4 {
  font-size: 16px;
  font-weight: 600;
  color: #123c3e;
  margin: 0 0 8px;
}

.ankare {
  margin-left: 10px;
  color: var(--teal-mid);
  text-decoration: none;
  opacity: 0;
  font-weight: 400;
  transition: opacity 0.15s;
}
h2:hover .ankare,
h3:hover .ankare,
.ankare:focus {
  opacity: 1;
}

.artikel a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.artikel a:hover {
  color: var(--orange-mork);
}

.artikel ul,
.artikel ol {
  margin: 0 0 20px;
  padding-left: 22px;
}
.artikel li {
  margin-bottom: 8px;
  line-height: 1.7;
}

.artikel code {
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  font-size: 0.88em;
  background: var(--yta);
  border: 1px solid var(--linje);
  border-radius: 5px;
  padding: 1px 5px;
}
.artikel pre {
  background: var(--teal-darker);
  color: #d6e4e2;
  border-radius: 12px;
  padding: 18px 20px;
  overflow-x: auto;
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.6;
}
.artikel pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

/* UI-etikett: ett ord som står på en knapp eller ett fält i produkten */
.ui {
  font-weight: 600;
  color: #123c3e;
  background: var(--teal-soft);
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
kbd {
  font-family: inherit;
  font-size: 0.82em;
  font-weight: 600;
  color: var(--body);
  background: #fff;
  border: 1px solid #cfd6da;
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  white-space: nowrap;
}
.pil {
  color: var(--teal-mid);
  padding: 0 5px;
  font-weight: 600;
}

/* --- Innehållsblock ----------------------------------------------------- */

.nyckelpunkter {
  background: var(--yta);
  border: 1px solid var(--linje);
  border-radius: 14px;
  padding: 22px 26px 6px;
  margin: 0 0 32px;
}
.nyckelpunkter h2 {
  margin: 0 0 12px;
  font-size: 15px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
}
.nyckelpunkter ul {
  padding-left: 20px;
}
.nyckelpunkter li {
  font-size: 15px;
}

.notis {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-left: 3px solid var(--teal-mid);
  background: #f5f9f9;
  border-radius: 0 10px 10px 0;
  padding: 16px 20px;
  margin: 0 0 24px;
}
.notis__namn {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal-dark);
}
.notis p {
  margin: 0;
  font-size: 15px;
}
.notis--tips {
  border-left-color: var(--orange);
  background: #fff7f2;
}
.notis--tips .notis__namn {
  color: var(--orange-mork);
}
.notis--varning {
  border-left-color: #c9971a;
  background: #fffaf0;
}
.notis--varning .notis__namn {
  color: #96700d;
}

/* Klickvägledning */
ol.steg {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  counter-reset: steg;
}
ol.steg > li {
  counter-increment: steg;
  position: relative;
  padding: 0 0 22px 46px;
  margin: 0;
  border-left: 1px solid var(--linje);
}
ol.steg > li:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
ol.steg > li::before {
  content: counter(steg);
  position: absolute;
  left: -14px;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal-dark);
  color: var(--orange-text);
  font-size: 13px;
  font-weight: 600;
  display: grid;
  place-items: center;
}
ol.steg h4 {
  margin: 4px 0 6px;
}
ol.steg p {
  margin: 0 0 12px;
}
ol.steg figure {
  margin-top: 4px;
}

/* Tabeller */
/* Tabellen ska rymmas, inte rullas. Rubrikerna fick tidigare inte radbrytas,
   vilket tvingade breda tabeller utanför textspalten och klippte sista kolumnen.
   Nu bryter rubrikerna rad, cellerna är stramare, och den vågräta rullningen
   finns kvar som sista utväg — med skuggor som visar att den finns. */
.tabell-omslag {
  position: relative;
  overflow-x: auto;
  margin: 0 0 26px;
  border: 1px solid var(--linje);
  border-radius: 12px;
  /* Skuggorna fästs vid ytorna och rullar undan när man nått kanten. */
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left / 34px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right / 34px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(5, 85, 89, 0.13), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(5, 85, 89, 0.13), transparent) right / 14px 100% no-repeat scroll;
}
.artikel table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
  background: transparent;
}
.artikel th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-dark);
  background: var(--yta);
  padding: 11px 14px;
  border-bottom: 1px solid var(--linje);
  vertical-align: bottom;
  /* Smala nyckelkolumner ska inte svälla; prosakolumner får resten. */
  min-width: 84px;
}
.artikel td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linje);
  vertical-align: top;
  line-height: 1.6;
}
.artikel td:first-child {
  min-width: 96px;
}
.artikel tbody tr:last-child td {
  border-bottom: 0;
}
.artikel tbody tr:hover td {
  background: rgba(244, 247, 247, 0.6);
}
/* I brödtext ska en UI-etikett aldrig brytas mitt itu — men i en tabellcell
   måste den få radbrytas, annars sätter den golvet för kolumnbredden och
   tvingar hela tabellen utanför spalten. */
.artikel td .ui,
.artikel th .ui,
.artikel td kbd {
  white-space: normal;
}
.artikel td {
  overflow-wrap: anywhere;
}

/* Inställningskort (administratörsavsnitten) */
.installningar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 30px;
}
.installning {
  border: 1px solid var(--linje);
  border-radius: 12px;
  padding: 20px 22px;
  background: #fff;
  box-shadow: var(--skugga);
}
.installning h4 {
  font-size: 16.5px;
  color: var(--teal-dark);
  margin: 0 0 12px;
  scroll-margin-top: calc(var(--topp-hojd) + var(--smul-hojd) + 16px);
}
.installning dl {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 8px 18px;
  margin: 0;
  font-size: 14.5px;
}
.installning dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.installning dd {
  margin: 0;
  line-height: 1.6;
}

/* Begreppslista */
dl.fakta {
  margin: 0 0 26px;
  display: grid;
  grid-template-columns: minmax(140px, 200px) minmax(0, 1fr);
  gap: 12px 24px;
}
dl.fakta dt {
  font-weight: 600;
  color: var(--teal-dark);
}
dl.fakta dd {
  margin: 0;
  line-height: 1.7;
}

/* Bilder */
.artikel figure {
  margin: 0 0 28px;
}
.artikel figure picture {
  display: block;
}
.artikel figure img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--linje);
  border-radius: 12px;
  box-shadow: var(--skugga);
  background: #fff;
}
.artikel figcaption {
  margin-top: 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
}

/* Frågor och svar */
.faq {
  border: 1px solid var(--linje);
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 28px;
}
.faq details + details {
  border-top: 1px solid var(--linje);
}
.faq summary {
  cursor: pointer;
  padding: 15px 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--teal-dark);
  list-style: none;
  position: relative;
  padding-right: 46px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  font-weight: 400;
  color: var(--teal-mid);
}
.faq details[open] summary::after {
  content: '−';
}
.faq summary:hover {
  background: var(--yta);
}
.faq__svar {
  padding: 0 20px 16px;
}
.faq__svar p {
  margin: 0;
  font-size: 15px;
}

/* Kortlänkar */
.kortlankar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin: 0 0 30px;
}
.kortlank {
  display: block;
  border: 1px solid var(--linje);
  border-radius: 14px;
  padding: 20px 22px;
  text-decoration: none !important;
  background: #fff;
  box-shadow: var(--skugga);
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.kortlank:hover {
  transform: translateY(-3px);
  box-shadow: var(--skugga-lyft);
  border-color: var(--teal-mid);
}
.kortlank .spar {
  margin-bottom: 10px;
}
.kortlank__titel {
  display: block;
  font-weight: 600;
  font-size: 16px;
  color: var(--teal-dark);
  margin-bottom: 6px;
}
.kortlank__text {
  display: block;
  font-size: 14px;
  color: var(--body);
  line-height: 1.6;
}

/* Föregående / nästa */
.grannar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 54px 0 0;
  padding-top: 28px;
  border-top: 1px solid var(--linje);
}
.granne {
  display: block;
  border: 1px solid var(--linje);
  border-radius: 12px;
  padding: 14px 18px;
  text-decoration: none !important;
  transition: border-color 0.15s, background 0.15s;
}
.granne:hover {
  border-color: var(--teal-mid);
  background: var(--yta);
}
.granne span {
  display: block;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.granne strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--teal-dark);
  line-height: 1.4;
}
.granne--nasta {
  text-align: right;
}

.hjalp-slut {
  margin-top: 34px;
  padding: 20px 24px;
  background: var(--yta);
  border-radius: 12px;
}
.hjalp-slut p {
  margin: 0;
  font-size: 14.5px;
  color: var(--muted);
}

/* --- Innehållsförteckning ----------------------------------------------- */

.artikel-toc {
  position: sticky;
  top: calc(var(--topp-hojd) + var(--smul-hojd));
  max-height: calc(100vh - var(--topp-hojd) - var(--smul-hojd));
  padding: 46px 24px 40px 8px;
  /* Rullningen ligger på LISTAN, inte på panelen. Sätts overflow här blir
     panelen en klippande behållare, och vikhandtaget — som med flit sticker ut
     över kanten — kapas på mitten. */
  display: flex;
  flex-direction: column;
}
.artikel-toc h2 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 14px;
}
.artikel-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--linje);
  overflow-y: auto;
  min-height: 0;
  overscroll-behavior: contain;
}
.artikel-toc li {
  margin: 0;
}
.artikel-toc a {
  display: block;
  padding: 6px 12px;
  margin-left: -1px;
  border-left: 2px solid transparent;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted);
  text-decoration: none;
}
.artikel-toc a:hover {
  color: var(--teal-dark);
}
.artikel-toc .toc-niva-3 a {
  padding-left: 24px;
  font-size: 12.5px;
}
.artikel-toc a.ar-lasen {
  color: var(--teal-dark);
  font-weight: 600;
  border-left-color: var(--orange);
}

/* --- Sidfot ------------------------------------------------------------- */

.hjalp-fot {
  background: var(--teal-darker);
  color: #b9c9c8;
  margin-top: 0;
  /* Marknadssajtens /stil.css ger varje <footer> 48px vaddering. Hjälpcentrets
     sidfot bär två rader text och ska vara en tunn remsa — nollställ, annars
     lägger sig 96px ovanpå den egna vadderingen. */
  padding: 0;
}
/* Tunn remsa. Sidfoten bär bara två rader text — den ska inte ta plats som en
   sidfot med innehåll i. */
.hjalp-fot__inner {
  display: flex;
  align-items: center;
  max-width: 1680px;
  margin: 0 auto;
  padding: 11px 24px;
  font-size: 12.5px;
}
.hjalp-fot .hoger {
  margin-left: auto;
}
.hjalp-fot a {
  color: #fff;
  text-decoration: none;
}
.hjalp-fot a:hover {
  color: var(--orange);
}

/* --- Startsidan för hjälpcentret ---------------------------------------- */

.hjalp-start .artikel {
  max-width: 980px;
}
.hjalp-start .artikel h1 {
  font-size: 46px;
}

/* --- Responsivt --------------------------------------------------------- */

@media (max-width: 1240px) {
  .hjalp-layout {
    grid-template-columns: var(--sido-bredd) minmax(0, 1fr);
  }
  .artikel-toc {
    display: none;
  }
  .artikel {
    padding: 38px 40px 70px;
  }
}

@media (max-width: 900px) {
  .hjalp-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .hjalp-topp__meny {
    display: none;
  }
  .sido-knapp {
    display: block;
    margin-left: auto;
  }
  .sido {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 40;
    width: min(320px, 88vw);
    height: 100vh;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
  }
  .sido.ar-oppen {
    transform: none;
  }
  .sido-tacke {
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(0, 38, 37, 0.4);
    border: 0;
  }
  .artikel {
    padding: 28px 22px 60px;
  }
  .artikel h1 {
    font-size: 31px;
  }
  .artikel h2 {
    font-size: 22px;
  }
  .grannar {
    grid-template-columns: 1fr;
  }
  .installning dl {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .installning dt {
    padding-top: 10px;
  }
  dl.fakta {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 0;
  }
  dl.fakta dd {
    margin-bottom: 12px;
  }

  /* Tabeller staplas till kort. En vågrät rullning på telefon hittar ingen —
     i stället får varje värde sin kolumnrubrik framför sig (data-rubrik). */
  .tabell-omslag {
    overflow-x: visible;
    border: 0;
    background: none;
  }
  /* min-width: 0 är nödvändigt — annars behåller webbläsaren tabellens
     inneboende minsta bredd (summan av kolumnernas min-content) även när
     cellerna gjorts till block, och hela tabellen sticker ut ur spalten. */
  .artikel table,
  .artikel tbody,
  .artikel tr,
  .artikel td {
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }
  .artikel thead {
    /* Rubrikraden behövs inte längre — den bärs av varje cell. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }
  .artikel tr {
    border: 1px solid var(--linje);
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 4px 0;
    background: #fff;
    box-shadow: var(--skugga);
  }
  .artikel td {
    border-bottom: 0;
    padding: 8px 16px;
  }
  .artikel td::before {
    content: attr(data-rubrik);
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
  }
  .artikel td:empty {
    display: none;
  }
  .artikel tbody tr:hover td {
    background: transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .hjalp-topp,
  .smulor,
  .sido,
  .artikel-toc,
  .grannar,
  .hjalp-slut,
  .hjalp-fot {
    display: none !important;
  }
  .hjalp-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .artikel {
    padding: 0;
    max-width: none;
  }
}