/* 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:#0b7f83; --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); }

/* ── Forløbet: nummererede trin med figurer ─────────────────────────────────
   Hovedformen siden 22/8-2026. Trinnet er et afsnit i et dokument, ikke et kort:
   nummeret står i marginen, teksten har en læsebredde, og figuren står under. */
.gx-forloeb > * + * { margin-top: 0; }
.gx-tr { padding: 26px 0 6px; border-top: 1px solid var(--gx-linje); scroll-margin-top: 96px; }
.gx-tr:first-of-type { border-top: 0; padding-top: 6px; }
.gx-tr-h { display: flex; gap: 14px; align-items: baseline; }
.gx-tr-n { flex: 0 0 auto; width: 26px; text-align: right; font-weight: 800; font-size: .82rem;
           color: var(--gx-accent); font-variant-numeric: tabular-nums; padding-top: 3px; }
.gx-tr-t { font-size: 1.18rem; font-weight: 700; letter-spacing: -.018em; line-height: 1.26; margin: 0; }
.gx-tr-b { margin: 9px 0 0 40px; max-width: 68ch; }
.gx-tr-b p { font-size: .96rem; line-height: 1.72; }
.gx-tr-adv { margin: 14px 0 0 40px; max-width: 68ch; }

/* Knap-udklip inde i sætningen: et rigtigt billede af knappen, i linjen. */
.gx-uichip { display: inline-flex; align-items: center; vertical-align: -6px; margin: 0 3px;
             border: 1px solid var(--gx-linje); border-radius: 8px; background: var(--gx-hvid);
             padding: 2px; overflow: hidden; max-width: 240px;
             box-shadow: 0 1px 2px rgba(12,34,48,.07); }
.gx-uichip img { display: block; height: 26px; width: auto; }

/* Figur: skærmbilledet med billedtekst og et mærkat for hvis skærm det er. */
.gx-fig { margin: 18px 0 0 40px; max-width: 940px; }
.gx-fig-r { position: relative; border: 1px solid var(--gx-linje); border-radius: 12px; overflow: hidden;
            background: var(--gx-hvid); box-shadow: 0 1px 2px rgba(12,34,48,.05), 0 12px 32px -14px rgba(12,34,48,.16); }
.gx-fig-r img { display: block; width: 100%; }
/* Lange sider rulles i rammen i stedet for at blive presset ned til et frimærke. */
.gx-fig-r.rul { max-height: 520px; overflow-y: auto; overscroll-behavior: contain; }
.gx-fig-r.rul::-webkit-scrollbar { width: 8px; }
.gx-fig-r.rul::-webkit-scrollbar-thumb { background: #c9d6dd; border-radius: 99px; }
.gx-fig-r.telefon { max-width: 268px; border-radius: 22px; }
.gx-fig-r.naer { max-width: 520px; }
.gx-fig-r.modal { max-width: 760px; }
.gx-fig-k { display: flex; gap: 10px; align-items: baseline; margin-top: 9px;
            font-size: .78rem; color: var(--gx-dim); line-height: 1.5; }
.gx-fig-k b { color: var(--gx-accent); font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
.gx-hvem { display: inline-block; margin-left: auto; white-space: nowrap; border-radius: 4px; padding: 1px 7px;
           font-size: .62rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.gx-hvem.raadgiver { background: var(--gx-accent-lys); color: var(--gx-accent); }
.gx-hvem.klient { background: var(--gx-amber-lys); color: var(--gx-amber); }

@media (max-width: 700px) {
  .gx-tr-b, .gx-tr-adv, .gx-fig { margin-left: 0; }
  /* Nummeret bliver i marginen, men smallere, saa overskriften faar plads. */
  .gx-tr-n { width: 20px; font-size: .78rem; }
  .gx-tr-t { font-size: 1.06rem; }
  .gx-tr-b p { font-size: .94rem; line-height: 1.66; }
  /* En rullende figur maa ikke aede hele skaermen paa en telefon. */
  .gx-fig-r.rul { max-height: 58vh; }
  /* Billedteksten faar lov at brydes: maerkatet skal ikke presse titlen ud. */
  .gx-fig-k { flex-wrap: wrap; }
  .gx-hvem { margin-left: 0; }
  /* Knap-udklip i saetningen skaleres ned, ellers bryder linjen grimt. */
  .gx-uichip { max-width: 62vw; vertical-align: -5px; }
  .gx-uichip img { height: 22px; }
}

/* 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; }
}