/* ============================================================================
   AIWP LIST ELEMENTS v1.0.0 — checklista · punktlista · prislista · steglista
   /hiro-extcus 2026-10-08

   KONCEPTET: ett tryckt specifikationsblad. Bläckmärken i marginalen, hängande
   indrag, hårstreck, tabellsiffror, punktlinje fram till priset. Spårbart till
   vad Gösab och JobOffice själva lämnar över på papper — besiktningsprotokoll
   och prislistor — inte till en designtrend. Det är medvetet INTE defaultstacken,
   som hade gjort varje lista till guldikon-i-rundad-ruta plus grå text.

   ────────────────────────────────────────────────────────────────────────────
   🔴 VARFÖR INGEN MARKÖR LIGGER I ETT PSEUDOELEMENT

   Pennan äger BÅDA pseudoelementen på varje redigerbar rad:
     ai-fe-editor.css:578  body.ai-fe-editing [data-ai-fe-editable]::before  → pennbrickan
     ai-fe-editor.css:548  body.ai-fe-editing [data-ai-fe-editable]::after   → hovertinten
     ai-fe-editor.css:599  …​.aife-bi-block [data-ai-fe-editable]::before { display:none }

   Den sista är avgörande: `.aife-bi-block` är omslaget pennan stoppar INFOGADE
   element i — alltså precis där de här listorna hamnar. En markör på `::before`
   hade därför släckts i redigeringsläge och kommit tillbaka vid spara. Kunden
   läser det som att bockarna försvann.

   Tre markörer, tre olika mekanismer, var och en vald för att överleva pennan:
     bock    → inline <svg> i <li>.  cleanpage.js:1246 sätter contenteditable=false
               på `> svg` så kunden inte kan radera den, och "+rad" (:4245) KLONAR
               bocken från första raden som har en. Pennan stödjer vägen aktivt.
     streck  → background-image på <li>. Pennan rör aldrig elementets `background`
               (uttalat i ai-fe-editor.css:542-547 — tinten ligger i ::after just
               för att inte nollställa bakgrunden). Ren färg → tar var() och följer
               kundens tokens.
     siffra  → li::marker. Det enda pseudoelement pennan inte tagit.

   ⚠️ Lägger du till en ny markör: använd en av de tre. Ett `::before` fungerar
   i webbläsaren och går sönder först när kunden öppnar pennan.

   ────────────────────────────────────────────────────────────────────────────
   🔴 MARKÖREN ÄR BLÄCK, INTE ACCENT — TVINGAT AV KONTRAST

   Mätt mot vitt: temats --gold #cb8732 ger 2,97:1 och Gösabs --gold #f58e48
   mindre. Båda faller även under 3:1-golvet för meningsbärande grafik.
   --navy #18405d ger 10,8:1, Gösabs #022a3a mer. Accenten är därför kvar som
   hårstreck och dekor, aldrig som markör.

   ────────────────────────────────────────────────────────────────────────────
   NAMNRUMMET ÄR FRITT, OCH DET ÄR SKÄLET TILL ATT DET ÄR NYTT

   `check-list` gick inte att återanvända. Mätt på live dev4 2026-10-08:
     client.css:1890  .check-list li::before { content:none !important }  → bocken släckt
     client.css:5433  .section-inner > .check-list:has(> li:nth-child(4)) { columns:2 }
                      → listan delas TYST i två spalter när kunden lägger till rad fyra
     dev4:s main.css saknar dessutom ::before-fallbacken helt (demo har den)
   `aiwp-list*` gav noll träffar i all CSS på demo, dev3 och dev4.

   ⚠️ Den automatiska tvåspalten är medvetet INTE reproducerad här. `--cols` är
   alltid opt-in. En layout som byter sig själv vid ett radantal är en fälla.
   ========================================================================= */

/* ─── BASEN — radrytm, hängande indrag, EN färgtoken ─────────────────────── */

.aiwp-list {
  /* Retinta en hel lista utan en rad ny CSS: sätt --aiwp-list-mark på valfri
     förälder. Det är komponentens enda avsedda variationspunkt utöver klasserna. */
  --aiwp-list-mark: var(--navy, #18405d);
  --aiwp-list-accent: var(--gold, #cb8732);
  --aiwp-list-rule: var(--gray-200, #d8d5cf);

  --aiwp-list-pitch: 0.5rem;     /* luft MELLAN rader */
  --aiwp-list-indent: 1.55rem;   /* hängande indrag = markörens spalt */
  --aiwp-list-lh: var(--lh-body, 1.7);
  --aiwp-list-paper: #fff;       /* bocken INUTI en färgad ruta */

  /* 🔴 EN VARIABEL PER KANT, OCH DET ÄR INTE PEDANTERI.
     Fram till 2026-10-08 fanns en enda `--aiwp-list-pad-y` för båda kanterna, och
     `--rule` nollade första radens `padding-top` DIREKT. Texten flyttade då upp medan
     markören — som läser variabeln — stod kvar. Resultat: bocken ur linje på exakt
     FÖRSTA raden, och bara i `--rule`. Robert såg det på dev3 inom minuter.

     Med en variabel per kant kan en rad omdeklarera sin EGEN topp, och markören följer
     med av sig själv eftersom den ärver samma värde från sin `<li>`. Markören kan alltså
     inte längre hamna i otakt med sin text — oavsett vilken variant som ändrar luften. */
  --aiwp-list-pad-t: 0rem;
  --aiwp-list-pad-b: 0rem;

  list-style: none;
  margin: 1.35rem 0;
  padding: 0;
  color: var(--text, #2c2c2c);
  font-size: var(--fs-body, 0.95rem);
  line-height: var(--aiwp-list-lh);
}

.aiwp-list > li {
  position: relative;            /* containing block för bockens <svg> */
  list-style: none;
  margin: 0;
  padding: var(--aiwp-list-pad-t) 0 var(--aiwp-list-pad-b) var(--aiwp-list-indent);
  /* En rad kunden tömt helt kollapsar annars till noll höjd och blir oklickbar. */
  min-height: calc(var(--aiwp-list-lh) * 1em);
}

.aiwp-list > li + li { margin-top: var(--aiwp-list-pitch); }

/* Pennans fokusram ligger 4 px utanför raden. Utan extra luft i redigeringsläge
   krockar ramarna på två intilliggande rader och ser ut som en enda ram. Den
   publicerade sidan är oförändrad — luften finns bara medan kunden redigerar. */
body.ai-fe-editing .aiwp-list { --aiwp-list-pitch: 0.85rem; }

/* ─── MARKÖR: BOCK (standard) ────────────────────────────────────────────── */
/* <svg> ligger absolut, alltså UTANFÖR textflödet. Det ger ett rent hängande
   indrag: rad två i en lång punkt börjar under rad ett, inte under bocken.
   Höjden är hela radboxen och preserveAspectRatio centrerar glyfen i den — så
   bocken sitter optiskt på FÖRSTA radens mitt utan en enda magisk siffra. */

.aiwp-list--check > li > svg,
.aiwp-list--check-box > li > svg,
.aiwp-list--check-ring > li > svg {
  position: absolute;
  left: 0;
  top: var(--aiwp-list-pad-t);
  width: 0.95em;
  height: calc(var(--aiwp-list-lh) * 1em);
  color: var(--aiwp-list-mark);
  stroke: currentColor;
  fill: none;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;   /* raden är redigerbar, bocken ska inte ta klicket */
}

/* ─── MARKÖR: BOCK I FÄRGAD RUTA ─────────────────────────────────────────── */
/* Robert 2026-10-08. Här går bocken från marginalanteckning till märke — tyngre,
   mer "avklarat", och den bär brandfärgen utan att tappa kontrast.

   🔴 RUTAN ÄR KVADRATISK, INTE RADHÖG. Standardbocken får `height: lh * 1em` och
   centreras optiskt av preserveAspectRatio — en ruta med den höjden hade blivit en
   avlång platta. Därför en egen höjd, och toppen räknas ut i stället för att ärvas:
   `(radboxen − rutan) / 2` lägger rutans mitt på första radens mitt, oavsett
   typsnitt, radavstånd eller vilken variant som ändrat luften. */

.aiwp-list--check-box,
.aiwp-list--check-ring { --aiwp-list-indent: 1.95rem; }

.aiwp-list--check-box > li > svg,
.aiwp-list--check-ring > li > svg {
  width: 1.2em;
  height: 1.2em;
  top: calc(var(--aiwp-list-pad-t) + (var(--aiwp-list-lh) * 1em - 1.2em) / 2);
  padding: 0.22em;
  border-radius: 5px;
  stroke-width: 3;      /* mindre glyfyta → grövre drag, annars ser den tunn ut */
}

/* Fylld ruta i bläck, bock i papper. Mätt: #fff på --navy ger 17,2:1 (JobOffice),
   10,8:1 (temat), 15,0:1 (Gösab). */
.aiwp-list--check-box > li > svg {
  background: var(--aiwp-list-mark);
  color: var(--aiwp-list-paper);
}

/* Brandfärgad ruta. 🔴 Bocken blir BLÄCK, aldrig vit: vitt på JobOffices --gold
   #e8960c är 2,39:1 — samma siffra som sänkte guldknappen i POWERFRONT. Bläck på
   guld är 7,2:1. Accenten får bära rutan, aldrig märket. */
.aiwp-list--check-box.aiwp-list--accent > li > svg {
  background: var(--aiwp-list-accent);
  color: var(--navy, #18405d);
}

/* Enbart kontur — lättare än rutan, tydligare än den nakna bocken. */
.aiwp-list--check-ring > li > svg {
  background: none;
  border: 2px solid var(--aiwp-list-mark);
  border-radius: 50%;
  color: var(--aiwp-list-mark);
  padding: 0.2em;
}
.aiwp-list--check-ring.aiwp-list--accent > li > svg { border-color: var(--aiwp-list-accent); }

/* Nödutgång: en rad som tappat sin <svg> (inklistrad text, eller en bock som
   strippats vid spara) får ett streck i stället för ett tomt hål. Medvetet ett
   streck och inte en halvdan bock — ett märke som nästan ser rätt ut är värre
   än ett som tydligt är något annat, för då syns det att raden behöver lagas. */
.aiwp-list--check > li:not(:has(> svg)) {
  background-image: linear-gradient(var(--aiwp-list-mark), var(--aiwp-list-mark));
  background-repeat: no-repeat;
  background-size: 0.68em 2px;
  background-position: left calc(var(--aiwp-list-pad-t) + var(--aiwp-list-lh) * 0.5em - 1px);
}

/* ─── MARKÖR: STRECK (signaturdraget) ────────────────────────────────────── */
/* En kort regel, inte en prick. Prickraden är defaultstackens punktlista; en
   regel i marginalen är registrets och innehållsförteckningens. Noll markup. */

/* Robert 2026-10-08: *"kanske något större bullet"* → 0,68em × 2px blev 0,82em × 2,5px.
   Strecket bär nu samma vikt som bocken bredvid sig i en blandad sektion. */
.aiwp-list--dash > li {
  background-image: linear-gradient(var(--aiwp-list-mark), var(--aiwp-list-mark));
  background-repeat: no-repeat;
  background-size: 0.82em 2.5px;
  background-position: left calc(var(--aiwp-list-pad-t) + var(--aiwp-list-lh) * 0.5em - 1.25px);
}

/* ─── MARKÖR: PRICK ──────────────────────────────────────────────────────── */
/* Tre vikter. Alla är rena gradienter — ingen markup, inget pseudoelement, och de
   tar kundens token precis som strecket. */

.aiwp-list--dot > li {
  background-image: radial-gradient(circle at center,
    var(--aiwp-list-mark) 0 3.2px, transparent 3.4px);
  background-repeat: no-repeat;
  background-size: 0.75em 0.75em;
  background-position: left calc(var(--aiwp-list-pad-t) + var(--aiwp-list-lh) * 0.5em - 0.375em);
}

/* Stor prick. */
.aiwp-list--dot-lg > li {
  background-image: radial-gradient(circle at center,
    var(--aiwp-list-mark) 0 4.6px, transparent 4.8px);
  background-repeat: no-repeat;
  background-size: 0.95em 0.95em;
  background-position: left calc(var(--aiwp-list-pad-t) + var(--aiwp-list-lh) * 0.5em - 0.475em);
}

/* 🔴 RING UTAN FYLLNAD (Robert 2026-10-08: *"en lite större med bara ringen och ingen
   fyllnad"*). En ring är tre stopp i samma radial-gradient: hål, färg, hål. Den väger
   mindre än en fylld prick men tar mer plats — vilket är precis vad en luftig lista
   vill ha. Ringens tjocklek är 1,8px; tunnare än så försvinner den mot ljus bakgrund. */
.aiwp-list--ring > li {
  background-image: radial-gradient(circle at center,
    transparent 0 3.0px,
    var(--aiwp-list-mark) 3.2px 5.0px,
    transparent 5.2px);
  background-repeat: no-repeat;
  background-size: 0.95em 0.95em;
  background-position: left calc(var(--aiwp-list-pad-t) + var(--aiwp-list-lh) * 0.5em - 0.475em);
}

/* ─── MARKÖR: SIFFRA (steglista) ─────────────────────────────────────────── */
/* ::marker, inte en CSS-counter i ett ::before — se filhuvudet. Tabellställda
   siffror så 9 och 10 står i samma spalt. */

.aiwp-list--num {
  list-style: decimal outside;
  padding-left: var(--aiwp-list-indent);
}
.aiwp-list--num > li {
  list-style: decimal outside;
  padding-left: 0.3rem;
}
.aiwp-list--num > li::marker {
  color: var(--aiwp-list-mark);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

/* ─── MARKÖR: INGEN (ren rad) ────────────────────────────────────────────── */

.aiwp-list--plain > li {
  padding-left: 0;
  background-image: none;
}
.aiwp-list--plain > li > svg { display: none; }

/* ─── RYTM: HÅRSTRECK ────────────────────────────────────────────────────── */
/* Looken kunden redan känner igen från `sp-list` (43 förekomster på demo).

   🔴 FÖRSTA OCH SISTA RADEN OMDEKLARERAR VARIABELN — DE SÄTTER ALDRIG `padding` DIREKT.
   Det var hela buggen 2026-10-08: `padding-top: 0` flyttade texten men inte markören,
   som läser variabeln. Nu ärver markören radens egen `--aiwp-list-pad-t` och kan inte
   hamna i otakt. Ändrar du luften här: ändra VARIABELN, aldrig `padding`. */

.aiwp-list--rule {
  --aiwp-list-pad-t: 0.62rem;
  --aiwp-list-pad-b: 0.62rem;
  --aiwp-list-pitch: 0rem;
}
.aiwp-list--rule > li + li { border-top: 1px solid var(--aiwp-list-rule); }
.aiwp-list--rule > li:first-child { --aiwp-list-pad-t: 0rem; }
.aiwp-list--rule > li:last-child  { --aiwp-list-pad-b: 0rem; }

/* ─── RYTM: TÄTHET ───────────────────────────────────────────────────────── */

.aiwp-list--tight { --aiwp-list-pitch: 0.18rem; }
.aiwp-list--airy  { --aiwp-list-pitch: 1rem; }
.aiwp-list--tight.aiwp-list--rule { --aiwp-list-pad-t: 0.4rem;
  --aiwp-list-pad-b: 0.4rem; }
.aiwp-list--airy.aiwp-list--rule  { --aiwp-list-pad-t: 0.95rem;
  --aiwp-list-pad-b: 0.95rem; }

/* ─── RYTM: TVÅ SPALTER — ALLTID OPT-IN ──────────────────────────────────── */

@media (min-width: 700px) {
  .aiwp-list--cols { columns: 2; column-gap: 2.5rem; }
  .aiwp-list--cols > li {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
  }
  /* Första raden i spalt två får inte toppmarginal — den ser ut som feljustering. */
  .aiwp-list--cols > li + li { margin-top: var(--aiwp-list-pitch); }
}

/* ─── EMFAS: LEDANDE RAD ─────────────────────────────────────────────────── */
/* Låter en lista bära egen hierarki utan en separat rubrik ovanför. */

.aiwp-list--lead > li:first-child {
  font-size: 1.12em;
  font-weight: 600;
  color: var(--navy, #18405d);
}

/* ─── MÖRK SEKTION ───────────────────────────────────────────────────────── */
/* Listorna landar i navysektioner. Vit text 0,88 över #18405d ger ~8,6:1. */

.aiwp-list--on-dark {
  --aiwp-list-mark: rgba(255, 255, 255, 0.92);
  --aiwp-list-rule: rgba(255, 255, 255, 0.16);
  /* 🔴 Papperet måste vändas med. Rutan fylls med `--aiwp-list-mark` (nu nästan vit) och
     bocken ritas i `--aiwp-list-paper` — stod den kvar på #fff hade bocken blivit vit på
     vitt, alltså OSYNLIG, och bara i mörka sektioner. Precis den sortens fel som inte
     syns i en ljus förhandsvisning. */
  --aiwp-list-paper: var(--navy, #18405d);
  color: rgba(255, 255, 255, 0.88);
}
.aiwp-list--on-dark.aiwp-list--lead > li:first-child { color: #fff; }

/* ============================================================================
   PRISLISTA
   ----------------------------------------------------------------------------
   <dl> med <div>-rader, inte <ul> med <span>. Tre mätta skäl:

   1. `dt` och `dd` saknar pennans minimilängdsspärr. cleanpage.js:1213 hoppar
      över ett <span> under tre tecken — ett pris som kunden kortar till "95"
      hade alltså TYST slutat vara redigerbart vid nästa inloggning.
   2. `div` finns inte i textSelector, så radomslaget blir aldrig redigerbart.
      Därför kan det bära punktlinjen i ett ::after utan att krocka med pennans
      hovertint — vilket en dt::after hade gjort.
   3. Term och pris blir TVÅ självständiga fält i stället för en mosig rad.
      `<ul>` med spans ger ett enda redigerbart fält för hela raden.

   🔴 ÖPPEN BEGÄRAN TILL /ainstein-wp: "+rad" känner `ul, ol, table` och FAQ,
   men inte `dl` (cleanpage.js:4234). Kunden kan alltså inte lägga till en
   prisrad. Samma form som FAQ-grenen han redan har — klona en .aiwp-list-row.
   Tills dess levereras mallen med fyra rader.
   ========================================================================= */

.aiwp-list--price {
  --aiwp-list-pad-t: 0.45rem;
  --aiwp-list-pad-b: 0.45rem;
  display: block;
}

.aiwp-list--price .aiwp-list-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: var(--aiwp-list-pad-t) 0 var(--aiwp-list-pad-b);
}
.aiwp-list--price .aiwp-list-row + .aiwp-list-row { margin-top: var(--aiwp-list-pitch); }

.aiwp-list--price dt {
  order: 0;
  flex: 0 1 auto;
  min-width: 0;          /* annars kan en lång benämning inte brytas */
  margin: 0;
  font-weight: 400;
}

/* PUNKTLINJEN. Sitter på radomslaget, som inte är redigerbart — enda stället
   där ett ::after är ledigt. Tom flexrad vars baslinje syntetiseras ur dess
   nedre kant, vilket råkar vara exakt textens baslinje. Ingen transform behövs. */
.aiwp-list--price .aiwp-list-row::after {
  content: "";
  order: 1;
  flex: 1 1 1.5rem;
  min-width: 1.25rem;
  border-bottom: 2px dotted currentColor;
  opacity: 0.3;
}

.aiwp-list--price dd {
  order: 2;
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  /* Detaljen som gör att kolumnen står still när kunden byter siffror. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

/* Pris direkt efter benämningen, vänsterställt — ingen punktlinje. */
.aiwp-list--price-left .aiwp-list-row { justify-content: flex-start; }
.aiwp-list--price-left .aiwp-list-row::after { display: none; }
.aiwp-list--price-left dt { flex: 0 0 auto; }

/* "Från 2 950 kr" — priset som utsaga, inte som tabellvärde. */
.aiwp-list--price-strong dd {
  font-size: 1.28em;
  color: var(--navy, #18405d);
}
.aiwp-list--price-strong.aiwp-list--on-dark dd { color: #fff; }

/* Hårstreck i stället för punktlinje. */
.aiwp-list--price.aiwp-list--rule { --aiwp-list-pad-t: 0.62rem;
  --aiwp-list-pad-b: 0.62rem; }
.aiwp-list--price.aiwp-list--rule .aiwp-list-row::after { display: none; }
/* 🔴 Punktlinjen var `flex: 1` — alltså ÄVEN det som sköt priset till högerkanten. Döljs den
   utan ersättning hamnar priset klistrat efter benämningen, och prisspalten upphör att vara en
   spalt. Hittat i egen 390 px-kontroll 2026-10-08, efter att skrivbordsvyn sett rätt ut.
   Samma sak gäller varje framtida variant som tar bort linjen: ta då över dess `auto`-marginal. */
.aiwp-list--price.aiwp-list--rule dd { margin-left: auto; }
.aiwp-list--price.aiwp-list--rule .aiwp-list-row + .aiwp-list-row {
  margin-top: 0;
  border-top: 1px solid var(--aiwp-list-rule);
}

/* ─── SMAL SPALT / 390 px ────────────────────────────────────────────────── */
/* Benämning och pris på samma rad så länge det går. Under 360 px faller
   punktlinjen bort och priset lägger sig under — en punktlinje på 20 px läser
   ingen, och ett avstavat pris är värre än ett radbyte. */

@media (max-width: 359px) {
  .aiwp-list--price .aiwp-list-row {
    flex-wrap: wrap;
    gap: 0 0.55rem;
  }
  .aiwp-list--price .aiwp-list-row::after { display: none; }
  .aiwp-list--price dd {
    order: 2;
    flex: 1 0 100%;
    text-align: left;
    color: var(--navy, #18405d);
  }
  .aiwp-list--price-strong.aiwp-list--on-dark dd,
  .aiwp-list--price.aiwp-list--on-dark dd { color: #fff; }
}