/* ============================================================
   OPERATION ALFA — stilmall för operationalfa.se
   ------------------------------------------------------------
   Byggd mot DESIGNMANUAL v1.1 (OP-ALFA // NS-812, utgiven
   2026-08, status Gällande). Kapitelhänvisningar i kommentarer.
   Fem låsta färger, två familjer, 8px-raster, inga gradienter,
   ingen glasmorfism, amber som signal och aldrig som yta.
   ============================================================ */

/* ---- 04 FÄRG · fem låsta värden ------------------------- */
:root{
  --oa-natt:   #0D1B2A;
  --oa-grafit: #2C3E4F;
  --oa-signal: #C8922A;
  --oa-kanal:  #4A7FA5;
  --oa-papper: #F0EDE6;
}

/* Tonala steg och semantiska alias. Allt räknas fram ur de fem
   låsta värdena med color-mix — inget hexvärde är påhittat.
   -400-stegen finns för kravet i kap 17: amber under 16 px och
   kanal som text måste ljusna för att klara AA på NATT.        */
:root{
  --oa-signal-400: color-mix(in srgb, var(--oa-signal) 72%, var(--oa-papper));
  --oa-kanal-400:  color-mix(in srgb, var(--oa-kanal) 62%, var(--oa-papper));
  --oa-line:       color-mix(in srgb, var(--oa-natt) 42%, var(--oa-grafit));

  --surface-base:   var(--oa-natt);
  --surface-panel:  color-mix(in srgb, var(--oa-natt) 76%, var(--oa-grafit));
  --surface-raised: color-mix(in srgb, var(--oa-natt) 58%, var(--oa-grafit));
  --text-primary:   var(--oa-papper);
  --text-secondary: color-mix(in srgb, var(--oa-papper) 74%, var(--oa-natt));
  --text-muted:     color-mix(in srgb, var(--oa-papper) 50%, var(--oa-natt));
  --text-faint:     color-mix(in srgb, var(--oa-papper) 34%, var(--oa-natt));
  --text-accent:    var(--oa-signal);
  --border-hairline:var(--oa-line);
  --focus-ring:     var(--oa-kanal-400);
  --accent-press:   color-mix(in srgb, var(--oa-signal) 82%, var(--oa-natt));

  /* 06 LAYOUT · 8px-bas, max 1180, sidmarginal 72/20 */
  --matt-max:    1180px;
  --matt-marg:   72px;
  --matt-sektion: clamp(96px, 9vw, 160px);
  --radie:       2px;
  --radie-kort:  6px;

  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: dark;
}

/* ---- 05 TYPOGRAFI · två familjer, inga undantag ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/inter-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--surface-base);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:16px;              /* BODY 16/1.55 */
  line-height:1.55;
  font-weight:400;
  text-rendering:optimizeLegibility;
}
img,svg{max-width:100%;height:auto;display:block}

/* Rubriker: skrivs i vanlig meningsform i HTML och versaliseras
   i CSS (kap 17), i mono med spärrning (kap 05).               */
h1,h2,h3{
  font-family:var(--font-mono);
  text-transform:uppercase;
  font-weight:600;
  margin:0 0 .55em;
  color:var(--text-primary);
}
h1{font-size:clamp(30px,3.4vw + 12px,64px);line-height:1.02;letter-spacing:.02em}
h2{font-size:clamp(22px,1.4vw + 14px,36px);line-height:1.1;letter-spacing:.045em;margin-top:2.2em}
h3{font-size:clamp(17px,.6vw + 14px,22px);line-height:1.25;letter-spacing:.07em;font-weight:500}
p,ul,ol{margin:0 0 1.15em}
ul,ol{padding-left:1.25em}
li{margin-bottom:.4em}
strong{font-weight:600;color:#fff}
em{font-style:italic}

/* Sifferkolumner och koder i mono med tabulära siffror (kap 05) */
.fakta td,.meta,.lofte,.etikett,.markesord,.smulor,.devis,.sprak,.topp nav a{
  font-variant-numeric:tabular-nums;
}

.wrap{width:100%;max-width:var(--matt-max);margin-inline:auto;
      padding-inline:clamp(20px,5vw,var(--matt-marg))}
.prosa{max-width:70ch}          /* BODY radlängd 60–75 tecken */

/* EYEBROW 12/0.22em — amber under 16 px kräver -400 (kap 17) */
.etikett{
  font-family:var(--font-mono);
  font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oa-signal-400);
  margin:0 0 1.15rem;
}
.etikett--dov{color:var(--text-muted);letter-spacing:.16em}

/* ---- 14 NAVIGATION · header 64px, ingen transparens ----- */
.topp{border-bottom:1px solid var(--border-hairline);position:sticky;top:0;
      background:var(--surface-base);z-index:10}
.topp__rad{display:flex;align-items:center;gap:24px;flex-wrap:wrap;min-height:64px}
.markesord{font-family:var(--font-mono);font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;font-size:12px;text-decoration:none;color:var(--text-primary);
  white-space:nowrap;display:flex;align-items:center;gap:10px;
  padding-block:10px}
.markesord img{width:40px;height:40px}   /* sigill 40 px (kap 03/14) */
.markesord:hover{color:var(--oa-signal)}
.topp nav{margin-left:auto}
.topp nav ul{display:flex;flex-wrap:wrap;gap:24px;list-style:none;margin:0;padding:0}
.topp nav a{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;text-decoration:none;color:var(--text-secondary);
  display:flex;align-items:center;min-height:44px}   /* träffyta 44px (kap 17) */
.topp nav a:hover{color:var(--text-primary)}
.topp nav a[aria-current="page"]{color:var(--oa-signal);box-shadow:inset 0 -1px 0 var(--oa-signal)}
.sprak{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  text-decoration:none;color:var(--text-muted);border:1px solid var(--border-hairline);
  padding:0 12px;border-radius:var(--radie);display:flex;align-items:center;min-height:44px}
.sprak:hover{color:var(--text-primary);border-color:var(--text-muted)}

/* Länkar i löptext: amber är reserverad, alltså hårlinje + kanal */
main a{color:var(--text-primary);text-decoration:underline;
  text-decoration-color:var(--border-hairline);text-underline-offset:.24em;
  text-decoration-thickness:1px;
  transition:color 120ms cubic-bezier(.2,0,0,1),text-decoration-color 120ms cubic-bezier(.2,0,0,1)}
main a:hover{color:var(--oa-kanal-400);text-decoration-color:var(--oa-kanal-400)}
a:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:var(--radie)}

/* ---- Hero ----------------------------------------------- */
.hero{padding-block:var(--matt-sektion) clamp(48px,5vw,80px);
      border-bottom:1px solid var(--border-hairline)}
.hero h1{margin-bottom:.4em}
.hero--artikel{padding-block:clamp(48px,6vw,96px) clamp(32px,4vw,48px)}
.ingress{font-size:18px;line-height:1.6;color:var(--text-primary);max-width:40ch;font-weight:400}
.hero--artikel .ingress{max-width:48ch}
.lofte{font-family:var(--font-mono);font-size:15px;line-height:1.9;color:var(--text-secondary);
  border-left:1px solid var(--oa-signal);padding-left:24px;margin-top:48px;max-width:46ch}

/* ---- Faktatabell ---------------------------------------- */
.fakta{width:100%;border-collapse:collapse;font-size:15px;margin:0 0 24px;max-width:560px}
.fakta caption{text-align:left;margin-bottom:8px}
.fakta th,.fakta td{text-align:left;padding:10px 0;border-bottom:1px solid var(--border-hairline);
  vertical-align:top}
.fakta th{font-family:var(--font-mono);font-weight:400;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-muted);width:180px;padding-right:24px}

/* ---- Sektioner ------------------------------------------ */
section{padding-block:clamp(48px,6vw,96px)}
section + section{border-top:1px solid var(--border-hairline)}
.bandtitel{margin-top:0}

/* ---- Paneler -------------------------------------------- */
.kort,.jamfor{display:grid;gap:1px;background:var(--border-hairline);
  border:1px solid var(--border-hairline);border-radius:var(--radie-kort);overflow:hidden;margin:32px 0 0}
.kort{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.jamfor{grid-template-columns:repeat(auto-fit,minmax(272px,1fr));margin:32px 0}
.kort > *,.jamfor > div{background:var(--surface-panel);padding:24px}
.kort h3,.jamfor h3{margin-top:0}
.kort p{margin:0;font-size:15px;color:var(--text-secondary)}
.kort a{display:block;text-decoration:none;transition:background 160ms cubic-bezier(.2,0,0,1)}
.kort a:hover{background:var(--surface-raised)}
.jamfor ul{margin-bottom:0;padding-left:1.1em}
.jamfor li{font-size:15px;color:var(--text-secondary)}

.fraga{border-top:1px solid var(--border-hairline);padding-top:24px;margin-top:24px}
.fraga h3{margin-top:0;margin-bottom:.5em}
.fraga p:last-child{margin-bottom:0}

.notis{border:1px solid var(--border-hairline);border-radius:var(--radie);
  border-left:1px solid var(--oa-kanal);background:var(--surface-panel);
  padding:24px;font-size:15px;color:var(--text-secondary);margin:32px 0}
.notis p:last-child{margin-bottom:0}

/* ---- Brödsmulor · META 12/1.5 --------------------------- */
.smulor{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--text-muted);padding-top:24px}
.smulor ol{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.smulor li::after{content:"·";margin-left:8px;color:var(--border-hairline)}
.smulor li:last-child::after{content:""}
.smulor a{text-decoration:none;color:var(--text-muted)}
.smulor a:hover{color:var(--text-primary)}

/* ---- Vidare --------------------------------------------- */
.vidare{list-style:none;padding:0;margin:24px 0 0}
.vidare li{border-bottom:1px solid var(--border-hairline);margin:0}
.vidare a{display:block;padding:16px 0;text-decoration:none;min-height:44px}
.vidare a:hover{color:var(--oa-kanal-400)}
.vidare span{display:block;font-size:15px;color:var(--text-muted);margin-top:2px}
.vidare a:hover span{color:var(--text-secondary)}

/* ---- Sidfot · devis längst ned till höger (kap 14) ------- */
.fot{border-top:1px solid var(--border-hairline);padding-block:48px 64px;
  font-size:15px;color:var(--text-muted)}
.fot__rad{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.fot__om{max-width:40ch}
.fot a{color:var(--text-secondary);text-decoration:none}
.fot a:hover{color:var(--text-primary)}
.fot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.fot__slut{width:100%;display:flex;justify-content:flex-end;margin-top:32px}
.devis{font-family:var(--font-mono);font-size:12px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--oa-signal-400);margin:0}

.hoppa{position:absolute;left:-9999px}
.hoppa:focus{position:static;display:inline-block;margin:12px 0 0 20px;padding:12px 16px;
  background:var(--surface-panel);color:var(--text-primary);
  border:1px solid var(--border-hairline);border-radius:var(--radie)}

/* ---- 14 Mobilregler · < 768 px -------------------------- */
@media (max-width:767px){
  .topp{position:static}
  .topp__rad{gap:12px 16px;padding-block:8px}
  .sprak{margin-left:auto;order:2}
  .topp nav{order:3;margin-left:0;width:100%;overflow-x:auto;scrollbar-width:none}
  .topp nav::-webkit-scrollbar{display:none}
  .topp nav ul{flex-wrap:nowrap;gap:20px}
  .topp nav a{white-space:nowrap;min-height:40px}
  .hero{padding-block:48px 40px}
  .fakta th{width:130px;padding-right:16px}
}

/* ---- 10 RÖRELSE ----------------------------------------- */
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- Specrad: rena köpfakta, alltid utan fiktion --------- */
.spec{display:flex;flex-wrap:wrap;gap:0;list-style:none;margin:40px 0 0;padding:0;
  border-top:1px solid var(--border-hairline);border-bottom:1px solid var(--border-hairline)}
.spec li{flex:1 1 150px;padding:16px 24px 16px 0;font-size:15px;color:var(--text-primary)}
.spec b{display:block;font-family:var(--font-mono);font-weight:400;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:4px}

/* ---- Artefaktband: PAPPER som avgränsat inslag (kap 11) -- */
.artefakt{background:var(--oa-papper);color:var(--oa-natt);border-radius:var(--radie-kort);
  padding:clamp(32px,5vw,56px);margin:0}
.artefakt blockquote{margin:0;font-family:var(--font-mono);font-size:clamp(15px,1.1vw + 11px,19px);
  line-height:1.75;max-width:44ch}
.artefakt figcaption{margin-top:24px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:color-mix(in srgb, var(--oa-natt) 62%, var(--oa-papper))}

/* ---- Numrerade steg ------------------------------------- */
.steg{list-style:none;counter-reset:s;padding:0;margin:32px 0 0;
  display:grid;gap:1px;background:var(--border-hairline);border:1px solid var(--border-hairline);
  border-radius:var(--radie-kort);overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.steg li{counter-increment:s;background:var(--surface-panel);padding:24px;margin:0;
  font-size:15px;color:var(--text-secondary)}
.steg li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--font-mono);
  font-size:11px;letter-spacing:.16em;color:var(--oa-signal-400);margin-bottom:8px}
.steg b{display:block;color:var(--text-primary);font-weight:500;margin-bottom:4px}

/* ---- Byline: verklig avsändare, aldrig i roll ------------ */
.byline{border-top:1px solid var(--border-hairline);margin-top:48px;padding-top:24px;
  font-size:14px;color:var(--text-muted)}
.byline strong{color:var(--text-secondary);font-weight:500}