/* Självhostade typsnitt (OFL), se typsnitt/VENDOR.md. Filnamnen ska stämma med typsnitt/. */
@font-face { font-family: "Bricolage Grotesque"; src: url("typsnitt/BricolageGrotesque-Latin1.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("typsnitt/IBMPlexSans-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("typsnitt/IBMPlexSans-Medium-Latin1.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "IBM Plex Sans"; src: url("typsnitt/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("typsnitt/IBMPlexMono-Regular-Latin1.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("typsnitt/IBMPlexMono-Medium-Latin1.woff2") format("woff2"); font-weight: 500; font-display: swap; }

/* Layout: ett smalt dokumentspår (protokollet) som ryggrad; sektionerna växlar mellan papper och bläck.
   Accent = stämpeldynans violett, används sparsamt: stämpeln, länkar, en knapp. */
:root {
  --papper: #f7f7fa;
  --ark: #ffffff;
  --ark-2: #efeef5;
  --black: #1a1b2e;
  --black-2: #55566b;
  --black-3: #86879a;
  --kant: rgba(26, 27, 46, 0.12);
  --kant-2: rgba(26, 27, 46, 0.24);
  --stampel: #5a3fb0;
  --stampel-hover: #4a3294;
  --stampel-svag: #ece7fa;
  --pa-stampel: #ffffff;
  --ok: #1f7a43;
  --fel: #b3261e;
  --utkast: #8a5a00;
  --utkast-svag: #fdf3dc;
  --mork-yta: #1a1b2e;
  --mork-text: #eceaf6;
  --mork-text-2: #b2b0c8;

  --f-rubrik: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-brod: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-kod: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --radie: 10px;
  --spar: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papper: #121320; --ark: #1b1c2c; --ark-2: #24253a;
    --black: #eceaf6; --black-2: #b2b0c8; --black-3: #7f7e98;
    --kant: rgba(236, 234, 246, 0.12); --kant-2: rgba(236, 234, 246, 0.24);
    --stampel: #a993ff; --stampel-hover: #c0afff; --stampel-svag: #2a2448; --pa-stampel: #150f2e;
    --ok: #6fd39a; --fel: #ff8a80; --utkast: #f2c46b; --utkast-svag: #3a2e14;
    --mork-yta: #0b0c16; --mork-text: #eceaf6; --mork-text-2: #a6a4bf;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papper: #121320; --ark: #1b1c2c; --ark-2: #24253a;
  --black: #eceaf6; --black-2: #b2b0c8; --black-3: #7f7e98;
  --kant: rgba(236, 234, 246, 0.12); --kant-2: rgba(236, 234, 246, 0.24);
  --stampel: #a993ff; --stampel-hover: #c0afff; --stampel-svag: #2a2448; --pa-stampel: #150f2e;
  --ok: #6fd39a; --fel: #ff8a80; --utkast: #f2c46b; --utkast-svag: #3a2e14;
  --mork-yta: #0b0c16; --mork-text: #eceaf6; --mork-text-2: #a6a4bf;
  color-scheme: dark;
}

* { box-sizing: border-box; }
body { background: var(--papper); color: var(--black); font: 17px/1.6 var(--f-brod); margin: 0; overflow-wrap: break-word; hyphens: auto; }
a { color: var(--stampel); text-underline-offset: 3px; }
a:hover { color: var(--stampel-hover); }
:focus-visible { outline: 2px solid var(--stampel); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--f-rubrik); font-weight: 700; line-height: 1.12; text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.2rem; font-weight: 500; letter-spacing: 0; }
p { margin: 0; }
.spar { max-width: var(--spar); margin: 0 auto; padding-inline: 20px; }
.etikett { font: 500 0.78rem/1 var(--f-kod); letter-spacing: 0.08em; text-transform: uppercase; color: var(--black-3); }
.ingress { font-size: 1.15rem; color: var(--black-2); max-width: 36em; }
section { padding-block: clamp(56px, 9vw, 104px); }
section > .spar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
.sektionshuvud { display: grid; gap: 14px; max-width: 46rem; }

/* Utkastmarkering för förslaget */
.stampelstreck { stroke: var(--stampel); }
.utkastband { background: var(--utkast-svag); color: var(--utkast); font: 500 0.85rem/1.4 var(--f-brod); text-align: center; padding: 8px 16px; }

/* Sidhuvud */
.huvud { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in srgb, var(--papper) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--kant); }
.huvud .spar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.marke { display: inline-flex; align-items: center; gap: 10px; color: var(--black); text-decoration: none; font: 700 1.3rem/1 var(--f-rubrik); letter-spacing: -0.01em; }
.marke svg { width: 28px; height: 28px; }
.nav { display: flex; align-items: center; gap: 22px; font-size: 0.95rem; }
.nav a { color: var(--black-2); text-decoration: none; }
.nav a:hover { color: var(--black); }
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 20px; border-radius: var(--radie); font: 500 1rem/1.2 var(--f-brod); text-decoration: none; border: 1px solid var(--kant-2); color: var(--black); background: var(--ark); }
.knapp:hover { background: var(--ark-2); color: var(--black); }
.knapp.primar { background: var(--stampel); border-color: var(--stampel); color: var(--pa-stampel); }
.knapp.primar:hover { background: var(--stampel-hover); color: var(--pa-stampel); }
.nav .knapp { min-height: 40px; padding: 8px 16px; font-size: 0.95rem; }
.nav .knapp.primar { color: var(--pa-stampel); }
@media (max-width: 760px) { .nav a:not(.knapp) { display: none; } }

/* Hjälte */
.hjalte { padding-block: clamp(40px, 7vw, 88px) clamp(56px, 8vw, 96px); }
.hjalte .spar { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hjalte-text { display: grid; gap: 22px; }
.hjalte-text .ingress { font-size: 1.2rem; }
.knappar { display: flex; flex-wrap: wrap; gap: 12px; }
.smatt { font-size: 0.92rem; color: var(--black-3); }
@media (max-width: 880px) { .hjalte .spar { grid-template-columns: minmax(0, 1fr); } }

/* Protokollet i hjälten */
.protokoll { position: relative; background: var(--ark); border: 1px solid var(--kant); border-radius: 6px; padding: 28px 28px 24px; box-shadow: 0 1px 0 var(--kant), 0 24px 48px -28px rgba(26, 27, 46, 0.35); font-size: 0.92rem; transform: rotate(-0.6deg); }
.protokoll header { display: grid; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--kant); }
.protokoll header strong { font: 700 1.05rem/1.3 var(--f-rubrik); }
.protokoll header span { color: var(--black-3); font-size: 0.85rem; }
.paragrafer { list-style: none; margin: 14px 0 18px; padding: 0; display: grid; gap: 8px; color: var(--black-2); }
.paragrafer b { color: var(--black); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }
.justering { display: grid; gap: 10px; border-top: 1px dashed var(--kant-2); padding-top: 14px; }
.justering .rad { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 12px; }
.justering .roll { color: var(--black-3); font-size: 0.78rem; display: block; }
.justering .namn { font-weight: 500; }
.status { font: 500 0.78rem/1.2 var(--f-kod); white-space: nowrap; }
.status.klar { color: var(--ok); }
.status.vantar { color: var(--black-3); }
.serversyn { margin-top: 18px; background: var(--mork-yta); color: var(--mork-text-2); border-radius: 6px; padding: 12px 14px; display: grid; gap: 6px; }
.serversyn .etikett { color: var(--mork-text-2); font-size: 0.7rem; }
.serversyn p { font: 400 0.75rem/1.5 var(--f-kod); overflow-wrap: anywhere; color: #c0afff; }
.hash { margin-top: 16px; font: 400 0.72rem/1.5 var(--f-kod); color: var(--black-3); overflow-wrap: anywhere; }
.stampel { position: absolute; right: 18px; bottom: 118px; width: 116px; height: 116px; color: var(--stampel); transform: rotate(-12deg); opacity: 0.88; pointer-events: none; }
@media (max-width: 480px) { .protokoll { padding: 20px 18px; } .stampel { width: 92px; height: 92px; right: 8px; bottom: 130px; } }

/* Tre steg */
.steg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: steg; list-style: none; margin: 0; padding: 0; }
.steg li { display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 2px solid var(--black); }
.steg li::before { counter-increment: steg; content: "Steg " counter(steg); font: 500 0.78rem/1 var(--f-kod); letter-spacing: 0.08em; text-transform: uppercase; color: var(--stampel); }
.steg p { color: var(--black-2); }
@media (max-width: 760px) { .steg { grid-template-columns: minmax(0, 1fr); } }

/* Mörk sektion: säkerhet */
.mork { background: var(--mork-yta); color: var(--mork-text); }
.mork .etikett { color: var(--mork-text-2); }
.mork .ingress { color: var(--mork-text-2); }
.mork a { color: #c0afff; }
.lofte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.lofte article { display: grid; gap: 12px; align-content: start; }
.lofte p { color: var(--mork-text-2); }
.lofte svg { width: 32px; height: 32px; color: #c0afff; }
.lofte code { font: 0.85em var(--f-kod); color: var(--mork-text); background: rgba(236, 234, 246, 0.08); padding: 1px 5px; border-radius: 4px; }
@media (max-width: 860px) { .lofte { grid-template-columns: minmax(0, 1fr); gap: 32px; } }

/* Användning */
.anvandning { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grupp { background: var(--ark); border: 1px solid var(--kant); border-radius: var(--radie); padding: 28px; display: grid; gap: 14px; align-content: start; }
.grupp ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.grupp li { padding: 10px 0; border-top: 1px solid var(--kant); color: var(--black-2); }
.grupp li:first-child { border-top: 0; }
@media (max-width: 760px) { .anvandning { grid-template-columns: minmax(0, 1fr); } }

/* Rak information om nivå */
.niva { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.niva > div { padding: 24px 0 0; border-top: 1px solid var(--kant-2); display: grid; gap: 10px; align-content: start; }
.niva h3 { font-weight: 700; }
.niva p { color: var(--black-2); }
@media (max-width: 760px) { .niva { grid-template-columns: minmax(0, 1fr); } }

/* Priser */
.priser { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan { background: var(--ark); border: 1px solid var(--kant); border-radius: var(--radie); padding: 28px; display: grid; gap: 16px; grid-template-rows: auto auto 1fr auto; }
.plan.markerad { border: 2px solid var(--stampel); }
.plan .pris { font: 700 2rem/1.1 var(--f-rubrik); font-variant-numeric: tabular-nums; }
.plan .pris small { font: 400 0.95rem var(--f-brod); color: var(--black-3); }
.plan ul { margin: 0; padding: 0 0 0 1.1em; color: var(--black-2); display: grid; gap: 6px; }
.utkastlapp { display: inline-block; justify-self: start; background: var(--utkast-svag); color: var(--utkast); font: 500 0.75rem/1 var(--f-kod); letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 8px; border-radius: 4px; }
.prisnot { color: var(--black-3); font-size: 0.92rem; }
@media (max-width: 900px) { .priser { grid-template-columns: minmax(0, 1fr); } }

/* Beställning: plats för formuläret */
.bestall { background: var(--ark-2); }
.formularplats { border: 2px dashed var(--kant-2); border-radius: var(--radie); padding: clamp(24px, 4vw, 40px); display: grid; gap: 14px; background: var(--ark); }
.formularplats .etikett { color: var(--stampel); }
.formular { background: var(--ark); border: 1px solid var(--kant); border-radius: var(--radie); padding: clamp(20px, 4vw, 36px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; max-width: 52rem; min-width: 0; }
.paket { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.paket legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.paket label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: 1px solid var(--kant-2); border-radius: var(--radie); cursor: pointer; }
.paket label:has(input:checked) { border-color: var(--stampel); background: var(--stampel-svag); }
.paket input, .kryss input { accent-color: var(--stampel); }
.falt-rad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 680px) { .falt-rad { grid-template-columns: minmax(0, 1fr); } }
.falt { display: grid; gap: 6px; font-weight: 500; font-size: 0.95rem; align-content: start; min-width: 0; }
.valfritt { font-weight: 400; color: var(--black-3); font-size: 0.85rem; }
.falt input, .falt textarea { font: 400 1rem var(--f-brod); color: var(--black); background: var(--papper); border: 1px solid var(--kant-2); border-radius: 8px; padding: 11px 12px; width: 100%; min-height: 46px; }
.falt textarea { resize: vertical; }
.falt input::placeholder { color: var(--black-3); }
.adressfalt { display: flex; align-items: stretch; }
.adressfalt input { border-radius: 8px 0 0 8px; min-width: 0; }
.adressfalt span { display: flex; align-items: center; padding: 0 12px; border: 1px solid var(--kant-2); border-left: 0; border-radius: 0 8px 8px 0; background: var(--ark-2); color: var(--black-2); font: 400 0.92rem var(--f-kod); white-space: nowrap; }
.kryss { display: flex; gap: 10px; align-items: flex-start; color: var(--black-2); }
.kryss input { margin-top: 5px; width: 18px; height: 18px; flex: none; }
.falla { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
button.knapp { cursor: pointer; }

/* Frågor */
.fragor { display: grid; gap: 0; max-width: 46rem; }
.fragor details { border-top: 1px solid var(--kant); padding: 18px 0; }
.fragor details:last-child { border-bottom: 1px solid var(--kant); }
.fragor summary { cursor: pointer; font: 500 1.1rem/1.4 var(--f-rubrik); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.fragor summary::-webkit-details-marker { display: none; }
.fragor summary::after { content: "+"; color: var(--stampel); font-family: var(--f-kod); }
.fragor details[open] summary::after { content: "−"; }
.fragor details p { margin-top: 10px; color: var(--black-2); }

/* Sidfot */
.fot { border-top: 1px solid var(--kant); padding-block: 40px; font-size: 0.92rem; color: var(--black-3); }
.fot .spar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.fot address { font-style: normal; line-height: 1.6; }
.fot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.fot a { color: var(--black-2); }

@media (prefers-reduced-motion: no-preference) {
  .stampel { animation: stampla 700ms cubic-bezier(.2,.9,.3,1.3) 400ms both; }
  @keyframes stampla { from { transform: rotate(-12deg) scale(1.6); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 0.88; } }
}

/* Kort sida: tack och fel */
.kort-sida { min-height: 60vh; display: grid; align-content: center; }
.kort-sida .spar { max-width: 40rem; display: grid; gap: 18px; justify-items: start; }

/* Startsidan: länk till kontrollsidan under hjältens knappar */
.kontroll-lank { margin: 16px 0 0; font-weight: 500; }

/* Driftstatus (byggs av signatum-statussida) */
.driftstatus .spar { max-width: 44rem; }
.statusrad { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 clamp(1.6rem, 4vw, 2.2rem)/1.2 var(--f-rubrik); }
.statusprick { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--black-3); }
.statusrad.ok .statusprick, .kontroll.ok .lage::before { background: var(--ok); }
.statusrad.fel .statusprick, .kontroll.fel .lage::before { background: var(--fel); }
.statusrad.forsenad .statusprick, .kontroll.forsenad .lage::before { background: var(--utkast); }
.kontroller { list-style: none; margin: 8px 0 0; padding: 0; width: 100%; border: 1px solid var(--kant); border-radius: var(--radie); background: var(--ark); }
.kontroll { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 16px 20px; }
.kontroll + .kontroll { border-top: 1px solid var(--kant); }
.kontroll-text h2, .kontroll-text h3 { margin: 0; font: 600 1.05rem/1.3 var(--f-brod); }
.kontroll-text p { margin: 4px 0 0; }
.kontroll .detalj { color: var(--black-2); font-size: 0.9rem; }
.lage { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; white-space: nowrap; }
.lage::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--black-3); }
.kontroll.ok .lage { color: var(--ok); }
.kontroll.fel .lage { color: var(--fel); }
.kontroll.forsenad .lage { color: var(--utkast); }
@media (max-width: 520px) { .kontroll { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px 16px; } }

/* Textsidor: villkor, integritetspolicy och personuppgiftsbiträdesavtal */
.textsida { padding-block: 48px 72px; }
.textsida .spar { max-width: 46rem; }
.textsida h1 { font-size: clamp(2rem, 4.4vw, 2.8rem); margin: 10px 0 18px; }
.textsida h2 { font-size: 1.35rem; margin: 40px 0 12px; }
.textsida h3 { font-size: 1.1rem; margin: 28px 0 8px; }
.textsida p, .textsida ul { margin: 0 0 14px; }
.textsida ul { padding-left: 1.3em; }
.textsida li { margin-bottom: 6px; }
.textsida table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 0.95rem; }
.textsida th, .textsida td { text-align: left; vertical-align: top; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--kant); }
.textsida th[scope="row"] { width: 30%; font-weight: 600; }
.textsida td ul { margin: 0; }
.textsida .utkast { padding: 12px 16px; border: 1px solid var(--kant-2); border-left: 4px solid var(--utkast); border-radius: var(--radie); font-weight: 500; }
.textsida .versionsrad { margin-top: 40px; color: var(--black-3); font-size: 0.92rem; }
@media (max-width: 560px) { .textsida table { display: block; overflow-x: auto; } }