/* AI-maerket som et lag oven paa billedet. Se public/ai-maerke.js for hvorfor det er et lag og
   ikke pixels.

   Maerket sidder i procent af BILLEDETS bredde, ikke i pixels: det samme opslag vises som et
   lille bibliotekskort, et stort swipe-kort og en Instagram-mock i editoren, og et ikon paa 24 px
   ville vaere usynligt det ene sted og dominere det andet. `width` saettes inline af AIM.html ud
   fra kundens skyder, saa den ene vaerdi styrer alle fire flader og det braendte billede ens. */
.aim {
  position: absolute;
  z-index: 3;                 /* over billedet og over kortets caption-gradient */
  pointer-events: none;       /* maerket maa aldrig staa i vejen for et klik paa kortet */
  height: auto;
  max-width: 45%;
  /* EU kraever at maerket er "clearly perceptible". En hvid pille paa en hvid produktbaggrund er
     det ikke, saa den faar en meget let skygge. Ikonet selv roeres ikke: farven er EU's egen. */
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}
/* 4 % af bredden, samme margen som compositeAiMaerke bruger paa det braendte billede, saa
   forhaandsvisningen viser dét kunden faktisk faar ud. */
.aim-top-left { top: 4%; left: 4%; }
.aim-top-right { top: 4%; right: 4%; }
.aim-bottom-left { bottom: 4%; left: 4%; }
.aim-bottom-right { bottom: 4%; right: 4%; }

/* BILLEDTEKSTEN SKAL VIGE, IKKE MAERKET.
   Swipe-kortet laegger opslagets tekst som et lag i BUNDEN af billedet, og maerkets standardplads
   er ogsaa i bunden. Maalt i produktion 14. september 2026: de to laa oven i hinanden, og begge
   blev svaere at laese.

   Det er maerket der bliver staaende. Paa det UDSENDTE billede findes billedtekst-laget slet
   ikke — captionen staar under billedet i feedet — saa maerkets plads dernede er den rigtige, og
   en forhaandsvisning der flytter det, ville vise noget andet end det kunden faar. Derfor faar
   teksten plads i stedet. Klassen saettes af swipeAiInfo naar maerket faktisk ligger forneden. */
/* Kun klasser. En ID-vaelger herfra ville kunne slaa appens egne regler, og det er praecis
   saadan swipe-kortet kollapsede. `.aim-bund .cap` (0,2,0) vinder over `.cap` (0,1,0) uden id. */
.aim-bund .cap { padding-bottom: var(--aim-plads, 0px); }

/* Bibliotekskortets chip. Kortet er ~310 px bredt, og ikonet i sin rigtige stoerrelse blev en
   ulaeselig plet paa 69x22 px oven i billedteksten (maalt samme dag). Kortet skal svare paa ÉT
   spoergsmaal — "hvilke opslag baerer maerket?" — og det svar hoerer hjemme i bundlinjen ved
   siden af status og platforme, ikke som en efterligning af et ikon der ikke kan laeses.
   Den rigtige, maalfaste forhaandsvisning bor i editoren, hvor billedet er stort nok. */
.stbadge.aimchip { background: rgba(20,20,25,.08); color: #3a3a44; letter-spacing: .04em; }

/* MAERKET SKAL HAVE EN POSITIONERET FORFAEDER, men den maa ALDRIG paatvinges her.

   MAALT I PRODUKTION 14. september 2026, og det var min egen fejl: denne regel stod som
   `#postimg, … { position: relative; }`. Men `.postimg` er `position:absolute; inset:0`
   (dashboard.html), og en ID-vaelger slaar en klasse — saa `inset:0` holdt op med at gaelde og
   swipe-kortets billedflade kollapsede fra 700 px til 108 px, altsaa til billedtekstens egen
   hoejde. Kortet stod hvidt for JM Band, den levende kunde, indtil det blev set.

   Laeren: et element der ALLEREDE er positioneret, er en gyldig forfaeder i forvejen. Saet kun
   `relative` paa dem der ikke er det, og aldrig med en vaelger der er staerkere end den
   oprindelige regel. `.aim-vert` er editorens `.pimg`, som ikke er positioneret. */
.aim-vert { position: relative; }

/* ── Editorens betjening ────────────────────────────────────────────────────────────────── */
.aimbox { border: 1px solid var(--line, #e6e3dd); border-radius: 12px; padding: 12px 14px; margin-top: 12px; }
.aimbox .aimsw { display: flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; cursor: pointer; }
.aimbox .aimrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.aimbox .aimtitle { font-weight: 600; }
.aimbox .aimsub { font-size: 12px; opacity: .7; margin-top: 2px; line-height: 1.45; }
.aimbox .aimctrl { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.aimbox .aimctrl[hidden] { display: none; }
.aimbox label { font-size: 12px; opacity: .75; display: block; margin-bottom: 4px; }
.aimbox input[type=range] { width: 100%; }
.aimhj { display: flex; gap: 6px; flex-wrap: wrap; }
.aimhj button { border: 1px solid var(--line, #e6e3dd); background: transparent; border-radius: 8px; padding: 6px 10px; font-size: 12px; cursor: pointer; }
.aimhj button.on { border-color: var(--pink, #ff4d8d); color: var(--pink, #ff4d8d); }

/* Swipe-linjen der forklarer hvad ja og nej betyder for maerket. Philips ord: "en lille info
   hernede". Den staar under knapperne, ikke over billedet: kortet skal blive ved med at vaere
   billedet. */
.aiminfo { text-align: center; font-size: 12px; opacity: .65; margin-top: 10px; line-height: 1.5; }
.aiminfo b { opacity: .9; }