/* /ai-hub/wizard/ai-leverantor-eu — beslutsguiden, porterad från forken.
   Sidmall "Landningssida", men innehållet är en datavy: nio frågor, en
   poängmatris över fyra leverantörer, rankning och konsekvensblad. Element och
   komponenter kommer från weapp-ui.css (.w-btn, .w-card, .w-faq, .w-link);
   här ligger vyns layout. Bara var(--w-*). 1rem = 18px.

   OBS OMFATTNING: 07 säger att sid-CSS ska vara under 40 rader. Den här är
   längre, för att systemet inte har komponenter för en jämförelsematris. Se
   08 §Leverantörsfärger — antingen flyttar mönstren in i weapp-ui.css som
   .w-* eller så står filen kvar som dokumenterat undantag. Beslut hos
   systemägaren.

   Allt är scopat under .awz så guidens korta klassnamn (.card, .pill, .chip)
   inte kan krocka med Semplice-basen. */

.awz { max-width: var(--w-measure); }
#content-holder .awz p { margin: 0; }

/* ---------- Intro ---------- */
#content-holder .awz .eyebrow,
#content-holder .awz .q-num,
#content-holder .awz .section-title,
#content-holder .awz .label {
  font-family: var(--w-font-body); font-size: var(--w-kicker-size);
  line-height: var(--w-kicker-lh); color: var(--w-muted); margin: 0 0 var(--w-space-16);
}
#content-holder .awz .deck { font-size: var(--w-lead-size); line-height: var(--w-lead-lh); color: var(--w-muted); margin: 0 0 var(--w-space-24); }
#content-holder .awz .fine { font-size: var(--w-small-size); line-height: var(--w-small-lh); color: var(--w-muted); }
#content-holder .awz .btn-row { display: flex; flex-wrap: wrap; gap: var(--w-space-24); align-items: center; margin-top: var(--w-space-40); }
#content-holder .awz .awz-ghost { background: none; border: 0; cursor: pointer; font-family: var(--w-font-body); font-size: var(--w-ui-size); padding: 0; }

/* ---------- Stegindikator ---------- */
.awz-steps { display: flex; gap: var(--w-space-4); margin: 0 0 var(--w-space-40); }
.awz-steps .seg { height: 4px; flex: 1; background: var(--w-line); opacity: 0.15; }
.awz-steps .seg.done, .awz-steps .seg.curr { opacity: 1; }
.awz-steps .seg.curr { background: var(--w-green); }
.awz-steps.hide { visibility: hidden; }

/* ---------- Fråga ---------- */
#content-holder .awz .q-title { font-family: var(--w-font-h2); font-size: var(--w-h2-size); line-height: var(--w-h2-lh); letter-spacing: var(--w-h2-ls); margin: 0 0 var(--w-space-8); }
#content-holder .awz .q-help { color: var(--w-muted); margin: 0 0 var(--w-space-40); }
.awz .options { display: grid; gap: var(--w-space-16); }
#content-holder .awz .awz-opt { position: relative; text-align: left; cursor: pointer; font-family: var(--w-font-body); font-size: var(--w-body-size); line-height: var(--w-body-lh); padding: var(--w-space-24); }
/* Vald: hela kortet fylls med bläck i 0,7s, samma fyllning som knapp A gör vid
   hover (regel 11, knappfyllning). Alternativen ÄR knappar, så grammatiken är
   knappens — inte "ink som bakgrund". Markeringen ska synas på en meter. */
#content-holder .awz .awz-opt { transition: background var(--w-dur-fill) var(--w-ease), color var(--w-dur-fill) var(--w-ease), border-color var(--w-dur-fill) var(--w-ease); }
#content-holder .awz .awz-opt.is-sel { background: var(--w-ink); border-color: var(--w-ink); color: var(--w-bg); }
#content-holder .awz .awz-opt.is-sel .ot, #content-holder .awz .awz-opt.is-sel .od, #content-holder .awz .awz-opt.is-sel .key { color: var(--w-bg); }
@media (prefers-reduced-motion: reduce) {
  #content-holder .awz .awz-opt { transition: none; }
}
#content-holder .awz .awz-opt .key { position: absolute; top: var(--w-space-16); right: var(--w-space-16); color: var(--w-muted); font-size: var(--w-small-size); }
#content-holder .awz .awz-opt .ot { display: block; font-family: var(--w-font-semibold); margin-bottom: var(--w-space-4); }
#content-holder .awz .awz-opt .od { color: var(--w-muted); font-size: var(--w-small-size); line-height: var(--w-small-lh); }
.awz .q-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--w-space-16) var(--w-space-24); margin-top: var(--w-space-40); }
#content-holder .awz .q-hint { color: var(--w-muted); font-size: var(--w-small-size); line-height: var(--w-small-lh); }

/* ---------- Resultat ---------- */
#content-holder .awz .res-head h2 { margin: 0 0 var(--w-space-16); }
#content-holder .awz .hero { background: var(--w-teal); color: var(--w-text-on-dark); padding: var(--w-space-40); margin: var(--w-space-40) 0; }
#content-holder .awz .hero h3 { display: flex; align-items: center; flex-wrap: wrap; gap: var(--w-space-16); color: var(--w-text-on-dark); margin: 0 0 var(--w-space-16); }
#content-holder .awz .hero .label { color: var(--w-bg); }
#content-holder .awz .hero .kind { font-family: var(--w-font-body); font-size: var(--w-small-size); border: var(--w-border) solid var(--w-line-on-dark); padding: var(--w-space-4) var(--w-space-8); }
#content-holder .awz .hero .watch, #content-holder .awz .hero .tie { margin-top: var(--w-space-16); padding-top: var(--w-space-16); border-top: var(--w-border) solid var(--w-line-on-dark); font-size: var(--w-small-size); line-height: var(--w-small-lh); }
#content-holder .awz .hero .watch b { display: block; font-family: var(--w-font-body); color: var(--w-green); margin-bottom: var(--w-space-4); }

/* rangordning */
.awz .ranking { display: grid; gap: var(--w-space-8); margin: var(--w-space-40) 0; }
/* Mobil: placering, namn och poäng på rad ett, stapeln på egen rad under —
   fast 150px stapel + poäng får inte plats på 390 (fynd 2026-09-15). */
.awz .rank { display: grid; grid-template-columns: var(--w-space-24) 1fr auto; gap: var(--w-space-8) var(--w-space-16); align-items: center; background: var(--w-white); border: var(--w-border) solid var(--w-line); padding: var(--w-space-16) var(--w-space-24); }
.awz .rank .pos { grid-area: 1 / 1; }
.awz .rank .nm { grid-area: 1 / 2; }
.awz .rank .sc { grid-area: 1 / 3; }
.awz .rank .track { grid-area: 2 / 1 / 3 / 4; }
.awz .rank.top { border-left-width: 3px; }
#content-holder .awz .rank .pos, #content-holder .awz .rank .sc { color: var(--w-muted); font-size: var(--w-small-size); }
#content-holder .awz .rank .sc { color: var(--w-ink); text-align: right; }
.awz .rank .nm { display: flex; align-items: center; gap: var(--w-space-8); }
#content-holder .awz .rank .nm small { display: block; color: var(--w-muted); font-size: var(--w-small-size); }
.awz .rank .track { height: 7px; background: var(--w-s-weak-bg); }
.awz .rank .track i { display: block; height: 100%; width: 0; background: var(--v, var(--w-ink)); transition: width var(--w-dur-fill) var(--w-ease); }

/* sektionsrubrik i vyn */
/* .w-faq ger linjer och +/−; här bara radens egen layout, så rubrik och
   underrubrik inte klistrar ihop (fynd i Davids skärmbild 2026-09-15). */
#content-holder .awz .w-faq summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--w-space-4) var(--w-space-16); }
#content-holder .awz .w-faq summary .teaser { color: var(--w-muted); font-size: var(--w-small-size); }
/* Rubrikerna i halvfet, underrubrik och brödtext i vanlig vikt. I en datavy
   står rubrik och underrubrik på samma rad, och i samma vikt läste rubriken
   inte som rubrik (David 2026-09-15). Gäller avsnittsrubriker, sektionsrader
   och linskorten. Extended är h1-h3, så halvfet är rätt steg här. */
#content-holder .awz .w-faq summary .st,
#content-holder .awz .section-title,
#content-holder .awz .lens .lt { font-family: var(--w-font-semibold); color: var(--w-ink); }
#content-holder .awz .section-title .hint { font-family: var(--w-font-body); }
/* Utfällt innehåll ska inte ligga och trycka mot nästa sektions rubrikrad.
   Luft under innehållet, och lite ovanför så det inte klistrar i sin egen
   summary (Davids fynd 2026-09-15, gäller både matrisen och avsnitten under). */
#content-holder .awz .w-faq details > .body { padding: var(--w-space-16) 0 var(--w-space-40); }

#content-holder .awz .section-title { display: flex; align-items: baseline; gap: var(--w-space-8); margin: var(--w-space-80) 0 var(--w-space-8); }
#content-holder .awz .section-title .hint { color: var(--w-muted); font-size: var(--w-small-size); }

/* grupperad matris */
.awz .mgroups { display: grid; gap: var(--w-space-16); margin-top: var(--w-space-24); }
.awz .mgroup { border: var(--w-border) solid var(--w-line); background: var(--w-white); }
#content-holder .awz .mgroup .gh { display: flex; align-items: center; gap: var(--w-space-8); padding: var(--w-space-16); border-bottom: var(--w-border) solid var(--w-line); font-family: var(--w-font-semibold); }
.awz .mrow { display: grid; grid-template-columns: 1fr auto; gap: var(--w-space-8); align-items: center; padding: var(--w-space-8) var(--w-space-16); }
#content-holder .awz .mrow .dim { color: var(--w-muted); font-size: var(--w-small-size); }
.awz .mrow .vals { display: flex; gap: var(--w-space-4); }

/* Kolumnhuvud: vilket bolag varje poängkolumn tillhör. Chipet står rakt ovanför
   sin egen pill, namnet under när spalten rymmer det. */
.awz .mrow.mhead { border-bottom: var(--w-border) solid var(--w-line); padding-bottom: var(--w-space-16); align-items: end; }
#content-holder .awz .mrow.mhead .dim { color: var(--w-muted); }
.awz .vcol { width: 24px; display: flex; flex-direction: column; align-items: center; gap: var(--w-space-4); }
#content-holder .awz .vcol-t { color: var(--w-muted); font-size: var(--w-small-size); line-height: 1; writing-mode: vertical-rl; transform: rotate(180deg); max-height: 84px; overflow: hidden; }

/* Leverantörslegend ovanför matrisen — färg till bolag, i kolumnordning. */
.awz .vlegend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--w-space-8) var(--w-space-24); margin-top: var(--w-space-24); }
#content-holder .awz .vlegend-t, #content-holder .awz .mlegend-t { color: var(--w-muted); font-size: var(--w-small-size); }
.awz .mlegend { display: flex; flex-wrap: wrap; gap: var(--w-space-16); margin-top: var(--w-space-16); }
.awz .mlegend span { display: inline-flex; align-items: center; gap: var(--w-space-8); }
#content-holder .awz .mcaveat { color: var(--w-muted); font-size: var(--w-small-size); line-height: var(--w-small-lh); margin-top: var(--w-space-24); }

/* linser */
.awz .lenses { display: grid; gap: var(--w-space-16); margin-top: var(--w-space-24); }
.awz .lens { border: var(--w-border) solid var(--w-line); background: var(--w-white); padding: var(--w-space-24); }
#content-holder .awz .lens .lt { display: flex; align-items: center; gap: var(--w-space-8); color: var(--w-muted); font-size: var(--w-small-size); }
#content-holder .awz .lens .lsub, #content-holder .awz .lens .lead-row { color: var(--w-muted); font-size: var(--w-small-size); line-height: var(--w-small-lh); margin-top: var(--w-space-8); }
.awz .lens .lead-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--w-space-8); }
#content-holder .awz .vchip { display: inline-flex; align-items: center; gap: var(--w-space-8); color: var(--w-ink); }

/* identifikationschip och poängpill — undantaget i 08 */
.awz .chip { display: inline-block; width: 10px; height: 10px; background: var(--v, var(--w-ink)); }
.awz .hero .chip { width: 15px; height: 15px; }
.awz .v-anthropic { --v: var(--w-v-anthropic); }
.awz .v-openai { --v: var(--w-v-openai); }
.awz .v-copilot { --v: var(--w-v-copilot); }
.awz .v-azure { --v: var(--w-v-azure); }
.awz .pill { display: grid; place-items: center; width: 24px; height: 22px; font-size: var(--w-small-size); font-variant-numeric: tabular-nums; }
.awz .pill.s-strong, .awz .chip.s-strong { background: var(--w-s-strong-bg); color: var(--w-s-ink); }
.awz .pill.s-good, .awz .chip.s-good { background: var(--w-s-good-bg); color: var(--w-s-ink); }
.awz .pill.s-weak, .awz .chip.s-weak { background: var(--w-s-weak-bg); color: var(--w-muted); }
.awz .pill.s-risk, .awz .chip.s-risk { background: var(--w-s-risk-bg); color: var(--w-s-risk-ink); }

/* callout-kort, konsekvensblad, changelog, residenskrav */
.awz .card, .awz .ccard, .awz .changed, .awz .must, .awz .hardreq { background: var(--w-white); border: var(--w-border) solid var(--w-line); padding: var(--w-space-24); margin-top: var(--w-space-24); }
.awz .changed, .awz .hardreq { border-left-width: 3px; }
.awz .ownwarn { border: var(--w-border) solid var(--w-s-risk-ink); border-left-width: 3px; padding: var(--w-space-16) var(--w-space-24); margin-top: var(--w-space-24); }
.awz .card .two { display: grid; gap: var(--w-space-24); margin-top: var(--w-space-16); }
#content-holder .awz .card h5, #content-holder .awz .ccard .ch, #content-holder .awz .changed .label, #content-holder .awz .must .mt, #content-holder .awz .hardreq .ht, #content-holder .awz .cons .ct { display: flex; align-items: center; gap: var(--w-space-8); font-family: var(--w-font-semibold); margin: 0 0 var(--w-space-8); }
#content-holder .awz .ccard .ch { justify-content: space-between; }
.awz .cgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--w-space-16); }
#content-holder .awz .ccard p, #content-holder .awz .card p, #content-holder .awz .changed li, #content-holder .awz .must li, #content-holder .awz .htx { color: var(--w-muted); font-size: var(--w-small-size); line-height: var(--w-small-lh); }
#content-holder .awz .cref, #content-holder .awz .hnote, #content-holder .awz .mnote, #content-holder .awz .changed .note, #content-holder .awz .disclaim { color: var(--w-muted); font-size: var(--w-small-size); line-height: var(--w-small-lh); margin-top: var(--w-space-8); }
#content-holder .awz b { font-family: var(--w-font-semibold); font-weight: 400; color: var(--w-ink); }

/* ---------- Läsbarhet i underlagsavsnitten ----------
   Blocken nedan är täta faktalistor. Utan egen uppställning läser etikett och
   brödtext ihop till en enda massa — syns tydligast i Källor, där rubriken
   satt fast i första meningen (Davids fynd 2026-09-15). */

/* Källor: etiketten på egen rad, två spalter när bredden räcker. */
#content-holder .awz .sources p { margin: 0 0 var(--w-space-16); break-inside: avoid; }
#content-holder .awz .sources p b { display: block; margin-bottom: var(--w-space-4); }

/* Friskrivningen avslutar avsnittet — avskild med en linje. */
#content-holder .awz .disclaim { border-top: var(--w-border) solid var(--w-line); padding-top: var(--w-space-16); margin-top: var(--w-space-24); }

/* Punktlistor: markörer tillbaka, annars ser raderna ut som löptext.
   Leverantörsraderna i changelogen får sin fyrkant i bolagets färg — samma
   identifikationsanvändning som chipsen (undantaget i 08). */
#content-holder .awz .must ul { list-style: disc; padding-left: var(--w-space-24); }
#content-holder .awz .must li { margin-bottom: var(--w-space-8); }
#content-holder .awz .must li b, #content-holder .awz .changed li b { display: block; }
#content-holder .awz .card .two li { position: relative; padding-left: var(--w-space-24); }
#content-holder .awz .card .two li::before { content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; background: var(--w-muted); }
#content-holder .awz .changed li { position: relative; padding-left: var(--w-space-24); }
#content-holder .awz .changed li::before { content: ''; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; background: var(--w-ink); }
#content-holder .awz .changed li.a::before { background: var(--w-v-anthropic); }
#content-holder .awz .changed li.o::before { background: var(--w-v-openai); }
#content-holder .awz .changed li.c::before { background: var(--w-v-copilot); }
#content-holder .awz .changed li.z::before { background: var(--w-v-azure); }

/* De tre frågorna: siffran i egen spalt, linje mellan raderna. */
#content-holder .awz .qlist { gap: 0; }
#content-holder .awz .qi { display: grid; grid-template-columns: var(--w-space-40) 1fr; gap: var(--w-space-16); padding: var(--w-space-16) 0; border-bottom: var(--w-border) solid var(--w-line); }
#content-holder .awz .qi:last-child { border-bottom: 0; padding-bottom: 0; }
#content-holder .awz .qi b { display: block; margin-bottom: var(--w-space-4); }

/* Residenskraven: bolag, status och text i tre tydliga spalter. */
#content-holder .awz .hrow { display: grid; grid-template-columns: 1fr; gap: var(--w-space-4); padding: var(--w-space-16) 0; border-bottom: var(--w-border) solid var(--w-line); margin: 0; }
#content-holder .awz .hrow:last-of-type { border-bottom: 0; }

@media screen and (min-width: 768px) {
  #content-holder .awz .sources { columns: 2; column-gap: var(--w-space-40); }
  #content-holder .awz .hrow { grid-template-columns: 140px 120px 1fr; gap: var(--w-space-16); align-items: baseline; }
}
.awz .cst { border: var(--w-border) solid currentColor; padding: var(--w-space-4) var(--w-space-8); font-size: var(--w-small-size); white-space: nowrap; }
.awz .cst.v { color: var(--w-s-ink); }
.awz .cst.b { color: var(--w-muted); }
.awz .changed ul, .awz .must ul, .awz .card .two ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--w-space-8); }
.awz .hrow { display: flex; flex-wrap: wrap; gap: var(--w-space-8); align-items: baseline; margin-bottom: var(--w-space-8); }
.awz .hv { display: flex; align-items: center; gap: var(--w-space-8); min-width: 120px; }
.awz .hchip { padding: var(--w-space-4) var(--w-space-8); font-size: var(--w-small-size); white-space: nowrap; }
.awz .hchip.ok { background: var(--w-s-strong-bg); color: var(--w-s-ink); }
.awz .hchip.cond, .awz .hchip.pend { background: var(--w-s-weak-bg); color: var(--w-muted); }
.awz .qlist { display: grid; gap: var(--w-space-16); margin-top: var(--w-space-24); }
.awz .qi { display: flex; gap: var(--w-space-16); }
#content-holder .awz .qi .n { font-family: var(--w-font-h2); color: var(--w-green); }
.awz .sources p { margin-bottom: var(--w-space-8); }

@media screen and (min-width: 768px) {
  .awz .rank { grid-template-columns: var(--w-space-24) 1fr 150px var(--w-space-40); gap: var(--w-space-16); }
  .awz .rank .pos, .awz .rank .nm, .awz .rank .sc, .awz .rank .track { grid-area: auto; }
  .awz .options { grid-template-columns: 1fr 1fr; }
  .awz .card .two { grid-template-columns: 1fr 1fr; }
  .awz .changed ul { grid-template-columns: 1fr 1fr; }
}
@media screen and (min-width: 992px) {
  .awz .mgroups, .awz .lenses { grid-template-columns: repeat(3, 1fr); }
}


/* ---------- Utskrift ----------
   Inget block får delas mitt itu över ett sidbrott. Innehållet anpassas INTE
   till A4 i övrigt (David 2026-09-15) — bara brytningen styrs. */
@media print {
  .awz .mgroup, .awz .lens, .awz .card, .awz .ccard, .awz .changed, .awz .must,
  .awz .hardreq, .awz .ownwarn, .awz .rank, .awz .hero, .awz .qi, .awz .mrow,
  .awz .w-faq details, .awz .vlegend, .awz .mlegend {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  /* Rubrik ska aldrig bli ensam sist på en sida. */
  .awz .section-title, #content-holder .awz .res-head h2, #content-holder .awz .mgroup .gh {
    break-after: avoid;
    page-break-after: avoid;
  }
  /* Utfällbara avsnitt öppnas av beforeprint; deras innehåll hålls ihop. */
  .awz .w-faq summary { break-after: avoid; page-break-after: avoid; }
  /* Rader i löptext delas inte på en ensam rad. */
  #content-holder .awz p { orphans: 3; widows: 3; }
}