/* Hjælpe-ikon (i-med-cirkel) + boble - markup fra {% hjaelp %} (crm_extras).
 *
 * Mønstret: stedsevarende forklaringer ("sådan virker det her") gemmes bag et
 * diskret i-ikon ved feltets label / sektionens overskrift og vises i en boble
 * ved hover, tastatur-fokus ELLER klik/tryk (brugerkrav 2026-08-11: al
 * forklarende tekst i et i-med-cirkel, vist ved hover). Tilstandsafhængig
 * tekst (tællere, dry-run-advarsler, fejl/tomme-tilstande) hører IKKE herind.
 *
 * HVORFOR hover ligger på WRAPPEREN, og hvorfor boblen har en gennemsigtig
 * bro: flere af teksterne indeholder klikbare links. Lå :hover på selve
 * ikonet, ville boblen forsvinde i det øjeblik musen bevæger sig fra ikonet
 * mod linket (den har forladt ikonet, boblen lukker, linket er uklikbart).
 * Derfor (a) tændes boblen af :hover/:focus-within på .hjaelp, som omslutter
 * BÅDE ikon og boble, og (b) er .hjaelp__boble en positionerings-container
 * hvis gennemsigtige padding-top bygger bro over den visuelle luft mellem
 * ikon og kort - musens vej ned i boblen forlader dermed aldrig .hjaelp.
 * Kortet (.hjaelp__kort) bærer den synlige flade; det er derfor der er to
 * lag (baggrund på ét element ville også male broen). Klik/tryk låser
 * desuden boblen åben (.is-open, hjaelp.js), så touch og tastatur har en
 * stabil vej til links uden en svævende mus.
 *
 * Æstetik: samme flade-opskrift som .hp-list (base.html) og .picker__list
 * (picker.css, hed meetings.css indtil 2026-08-12) - card-baggrund,
 * line-2-kant, r-md, sh-lg.
 */

.hjaelp { position: relative; display: inline-flex; vertical-align: middle; }

.hjaelp__knap { border: 0; background: none; padding: 2px; margin: 0; line-height: 0;
  display: inline-flex; align-items: center; cursor: help; border-radius: 50%;
  color: var(--ink-3, #a89c88); transition: background .15s, color .15s; }
.hjaelp__knap:hover { color: var(--ink-2, #6f6456); background: var(--paper-2, rgba(0,0,0,.06)); }
.hjaelp__knap:focus-visible { outline: none; color: var(--ink-2, #6f6456);
  box-shadow: var(--ring, 0 0 0 3px rgba(194,86,46,.28)); }
.hjaelp.is-open .hjaelp__knap { color: var(--accent, #c2562e); }

/* Positionerings-containeren. padding-top er broen (se hovedet); z-index over
   sticky pagehead/topbar-laget, under modalerne ville også gå, men bobler skal
   kunne stå oven på alt alm. indhold - .hp-list bruger 400, vi lægger os der. */
.hjaelp__boble { position: absolute; top: 100%; left: -9px; z-index: 400;
  display: none; padding-top: 7px; width: max-content;
  max-width: min(380px, calc(100vw - 32px)); }

.hjaelp:hover .hjaelp__boble,
.hjaelp:focus-within .hjaelp__boble,
.hjaelp.is-open .hjaelp__boble { display: block; }

/* Escape gemmer boblen selv om fokus/hover består (hjaelp.js sætter klassen
   og fjerner den igen når musen/fokus har været helt ude). !important fordi
   reglen skal vinde over alle tre vis-regler ovenfor. */
.hjaelp.is-daempet .hjaelp__boble { display: none !important; }

/* Flip: står ikonet så langt til højre at boblen ville stikke ud af
   viewporten, højrestilles den (sat af hjaelp.js FØR boblen bliver synlig). */
.hjaelp--flip .hjaelp__boble { left: auto; right: -9px; }

/* Den synlige flade. Nulstiller arvet typografi eksplicit, fordi ikonet også
   står inde i <h1>/<h2> og ved UPPERCASE-mikrolabels - kortet skal altid
   ligne sig selv. */
.hjaelp__kort { display: block; padding: 10px 13px;
  background: var(--card, #fffdf8); border: 1px solid var(--line-2, #d7cbb4);
  border-radius: var(--r-md, 12px);
  box-shadow: var(--sh-lg, 0 18px 50px -12px rgba(34,29,23,.24));
  font-family: var(--font-body); font-size: 13.5px; font-weight: 400;
  line-height: 1.55; letter-spacing: normal; text-transform: none;
  text-align: left; white-space: normal; color: var(--ink-2, #6f6456); }
.hjaelp__kort strong { color: var(--ink, #221d17); }
.hjaelp__kort code { font-size: 12.5px; }

/* Række-hjælper til block-labels: .field__label er display:block, så et ikon
   EFTER labelen ellers ryger ned på sin egen linje. Wrapperen lægger label +
   ikon på én linje og overtager labelens bund-margin. */
.hjaelp-raekke { display: flex; align-items: center; gap: 5px; margin-bottom: 6px; }
.hjaelp-raekke > .field__label { margin-bottom: 0; }