/* guide.css, komponent-stil til rådgiverguiden.
   Bruges BÅDE i rådgiverfladen (Hjælp > Guide) og i editorens forhåndsvisning på
   /platform. Selvstændige farver (Danske-paletten), så filen ikke afhænger af
   hvilke CSS-variabler den enkelte side definerer. */

.gx { --gx-blaek:#12232e; --gx-dim:#5b6b76; --gx-linje:#e2e8ec; --gx-papir:#f4f6f8;
      --gx-petrol:#003755; --gx-accent:#0091da; --gx-accent-lys:#e8f4fb;
      --gx-amber:#8a5a00; --gx-amber-lys:#fdf3e2; --gx-hvid:#fff;
      color:var(--gx-blaek); }

.gx > * + * { margin-top: 26px; }
.gx h3 { font-size: 1.06rem; font-weight: 700; margin: 0 0 12px; letter-spacing: -.01em; scroll-margin-top: 96px; }
.gx p { font-size: .95rem; line-height: 1.68; margin: 0 0 10px; color: #3b4b56; }
.gx p:last-child { margin-bottom: 0; }
.gx code { background: var(--gx-papir); border: 1px solid var(--gx-linje); border-radius: 5px; padding: 1px 5px; font-size: .86em; }
.gx strong { font-weight: 700; color: var(--gx-blaek); }

/* Manchet: første afsnit, større og roligere */
.gx-intro { font-size: 1.06rem; line-height: 1.62; color: var(--gx-dim); border-left: 3px solid var(--gx-accent); padding-left: 18px; }
.gx-intro p { font-size: inherit; color: inherit; }

/* Trin-forløb: nummereret kæde med lodret linje */
.gx-trin { list-style: none; margin: 0; padding: 0; position: relative; }
.gx-trin::before { content: ""; position: absolute; left: 17px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(var(--gx-accent), var(--gx-linje)); }
.gx-trin li { position: relative; display: flex; gap: 16px; padding: 0 0 18px; }
.gx-trin li:last-child { padding-bottom: 0; }
.gx-trin .n { position: relative; z-index: 1; flex-shrink: 0; width: 36px; height: 36px; border-radius: 99px; background: var(--gx-petrol); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .92rem; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px #fff; }
.gx-trin .k { flex: 1; min-width: 0; background: var(--gx-hvid); border: 1px solid var(--gx-linje); border-radius: 12px; padding: 13px 17px; }
.gx-trin .t { font-weight: 700; font-size: .95rem; }
.gx-trin .b { font-size: .9rem; line-height: 1.6; color: #4a5964; margin-top: 3px; }

/* Kort-grid */
.gx-kort { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; }
.gx-kort .k { background: var(--gx-hvid); border: 1px solid var(--gx-linje); border-top: 3px solid var(--gx-accent); border-radius: 12px; padding: 14px 16px; }
.gx-kort .t { font-weight: 700; font-size: .93rem; }
.gx-kort .b { font-size: .87rem; line-height: 1.58; color: #4a5964; margin-top: 4px; }

/* Faktafelter: label over værdi, i én ramme */
.gx-fakta { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 0; border: 1px solid var(--gx-linje); border-radius: 12px; overflow: hidden; background: var(--gx-hvid); }
.gx-fakta .k { padding: 14px 17px; border-right: 1px solid var(--gx-linje); border-bottom: 1px solid var(--gx-linje); }
.gx-fakta .t { font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--gx-accent); }
.gx-fakta .b { font-size: .89rem; line-height: 1.55; color: #3b4b56; margin-top: 5px; }

/* Tjekliste */
.gx-tjek { list-style: none; margin: 0; padding: 0; background: var(--gx-hvid); border: 1px solid var(--gx-linje); border-radius: 12px; }
.gx-tjek li { display: flex; gap: 13px; padding: 13px 17px; border-bottom: 1px solid var(--gx-linje); }
.gx-tjek li:last-child { border-bottom: 0; }
.gx-tjek .m { flex-shrink: 0; width: 21px; height: 21px; border-radius: 6px; background: var(--gx-accent-lys); color: var(--gx-accent); display: flex; align-items: center; justify-content: center; }
.gx-tjek .m svg { width: 13px; height: 13px; }
.gx-tjek .t { font-weight: 700; font-size: .93rem; }
.gx-tjek .b { font-size: .87rem; line-height: 1.55; color: #4a5964; margin-top: 2px; }

/* Fremhævet boks */
.gx-boks { display: flex; gap: 14px; border-radius: 12px; padding: 15px 18px; border: 1px solid var(--gx-linje); background: var(--gx-accent-lys); border-left: 3px solid var(--gx-accent); }
.gx-boks .i { flex-shrink: 0; color: var(--gx-accent); }
.gx-boks .i svg { width: 20px; height: 20px; }
.gx-boks .t { font-weight: 700; font-size: .93rem; margin-bottom: 3px; }
.gx-boks .b { font-size: .9rem; line-height: 1.6; color: #3b4b56; }
.gx-boks.advarsel { background: var(--gx-amber-lys); border-left-color: #d99a2b; }
.gx-boks.advarsel .i { color: var(--gx-amber); }
.gx-boks.regel { background: #eef3f6; border-left-color: var(--gx-petrol); }
.gx-boks.regel .i { color: var(--gx-petrol); }

/* Tabel */
.gx-tabel-ramme { overflow-x: auto; border: 1px solid var(--gx-linje); border-radius: 12px; background: var(--gx-hvid); }
.gx-tabel { width: 100%; border-collapse: collapse; font-size: .89rem; }
.gx-tabel th { text-align: left; font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--gx-dim); background: var(--gx-papir); padding: 10px 15px; white-space: nowrap; }
.gx-tabel td { padding: 11px 15px; border-top: 1px solid var(--gx-linje); vertical-align: top; line-height: 1.5; }
.gx-tabel tr td:first-child { font-weight: 600; }

@media (max-width: 620px) {
  .gx-trin::before { left: 14px; }
  .gx-trin .n { width: 30px; height: 30px; font-size: .84rem; }
  .gx-fakta .k { border-right: 0; }
}