/* Mallgrinden på pelarsidorna.
 *
 * Används av /raci-matris-mall/. Egen fil och inte inline: grinden är
 * byggd för att kunna sitta på fler pelarsidor, och tre inline-kopior hade
 * drivit isär. Länkas EFTER sidans egen <style>, annars förlorar reglerna
 * nedan oavgjorda specificitetsstrider mot artikeltypografin.
 *
 * VARJE regel är prefixad med .article-body, och det är inte slarv.
 * Artikeltypografin på pelarsidorna är containerscopad: .article-body p är
 * (0,1,1) och .article-body ul li är (0,1,2). En komponentklass på elementet
 * självt, .mall-finstilt, är bara (0,1,0) och förlorar oavsett var den står.
 * Uppmätt 2026-09-15: finstilten renderade i 15px ink-mid i stället för
 * 12,5px ink-soft, felmeddelandet tappade sitt röda, och listpunkterna fick
 * både disc-prick och vår bock.
 *
 * Finstilten och felraden behöver TRE klasser: .article-body .mall-grind p
 * nedan är (0,2,1) och slår en tvåklassregel på elementet självt.
 */

.article-body .mall-grind {
  margin: 2.2rem 0 1.4rem;
  background: var(--cream-2);
  border: 1px solid var(--green-line);
  border-radius: 16px;
  padding: 28px;
  display: grid;
  /* minmax(0, ...) och inte 1fr: ett gridbarn har min-content som automatiskt
     minimum, så panelen vägrade krympa och stack ut 11px i kortets
     högerpadding på 375px. Samma fälla som min-width: 0 på .article-body. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 288px);
  gap: 28px;
  align-items: start;
}
.article-body .mall-grind h3 { margin: 0 0 10px; font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.article-body .mall-grind p { font-size: 15px; line-height: 1.6; color: var(--ink-mid); margin-bottom: 14px; }
.article-body .mall-grind ul { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.article-body .mall-grind ul li { list-style-type: none; position: relative; padding-left: 26px; margin-bottom: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-mid); }
.article-body .mall-grind ul li::before { content: ""; position: absolute; left: 0; top: 6px; width: 15px; height: 8px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }
.article-body .mall-grind ul li strong { color: var(--ink); font-weight: 600; }

.article-body .mall-panel { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
/* hidden är ett attribut och förlorar mot vilken display-regel som helst.
   Panelerna byts med el.hidden, så den här raden är det som gör bytet. */
.article-body .mall-panel [hidden] { display: none !important; }
.article-body .mall-panel .form-group { margin-bottom: 12px; }
/* Träffytan: 46px höjd klarar WCAG 2.5.8 med marginal. */
.article-body .mall-panel .btn { width: 100%; min-height: 46px; font-size: 15px; padding: 13px 18px; border-radius: 11px; }
.article-body .mall-panel .btn:disabled { opacity: .55; cursor: not-allowed; }

.article-body .mall-grind .mall-finstilt { font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); margin: 12px 0 0; }
.article-body .mall-grind .mall-finstilt a { color: var(--green); font-weight: 400; text-decoration: underline; }
.article-body .mall-grind .mall-fel { font-size: 13px; color: #9c2d12; margin: 10px 0 0; }

.article-body .mall-klar { text-align: center; }
.article-body .mall-klar .check-ic { width: 44px; height: 44px; border-radius: 100px; background: var(--green-soft); border: 1px solid var(--green-line); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: var(--green); }
.article-body .mall-klar h4 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.article-body .mall-grind .mall-klar p { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 16px; }

@media (max-width: 780px) {
  .article-body .mall-grind { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 18px; }
  /* 16px och inte 14: iOS Safari zoomar in hela sidan när ett fält under 16px
     får fokus, och besökaren står sedan kvar utzoomad i en halv artikel.
     Bara mallpanelen, resten av sidans formulär är orörda. */
  .article-body .mall-panel .form-input { font-size: 16px; }
}