/* ==========================================================================
   Min Børnehave — milo-companion.css
   --------------------------------------------------------------------------
   Ét lille, roligt Milo-slot ved sidens første titel. Selvstændig fil:
   afhænger ikke af site-ui, Tailwind, brand-overrides eller andre
   stylesheets og kan loades på alle sider (site-ui og de 18 isolerede).

   Markup (indsættes lige FØR første synlige H1; H1 og hooks røres ikke):
     <figure class="milo-companion" data-milo-surface="planning" aria-hidden="true">
       <picture>
         <source srcset="/assets/img/milo-planning-transparent-20261013-256.webp 256w,
                         /assets/img/milo-planning-transparent-20261013-512.webp 512w"
                 sizes="(max-width:767px) 72px, 128px" type="image/webp">
         <img class="milo-companion__image"
              src="/assets/img/milo-planning-transparent-20261013.png"
              alt="" width="128" height="128" decoding="async">
       </picture>
     </figure>
   Reglerne rammer både <picture><img> (faktisk markup) og en direkte
   <img> som barn af figuren (fallback). Kun img INDE I .milo-companion.

   Principper
   - Alle regler står på .milo-companion (og dens picture/img). Intet andet røres.
   - Normal dokumentflow i egen række: ingen fixed/absolute på skærm, ingen
     overlay, ingen animation, ingen interaktion (pointer-events:none).
   - Mobil: billedet er 64–80 px. Fra 768 px: 96–128 px (max 128).
   - Billedet følger sidens tekstjustering (text-align arves), så det står til
     venstre i venstrestillede og centreret i centrerede sektioner.
   - Hvid fugl på lys flade: billedet får en rolig, lys "plade" (cirkel) med
     tynd kant, så det kan ses både på hvid, lyseblå, mørkeblå og grøn flade.
     PNG/WebP har ægte alpha og ingen egen baggrund; pladen kommer kun herfra
     (--mc-plate: transparent fjerner den).
   - Ingen display/visibility/opacity-regler, der kan skjule figuren.
   ========================================================================== */

.milo-companion {
  --mc-size: clamp(4rem, 19vw, 5rem);        /* 64–80 px */
  --mc-gap: 0.75rem;
  --mc-plate: #e3eeff;
  --mc-ring: #b7cdee;

  display: block !important;
  box-sizing: border-box !important;
  position: static !important;
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 var(--mc-gap) !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  text-align: inherit;
  font-size: 0 !important;        /* ingen linjebokse omkring billedet */
  line-height: 0 !important;
  pointer-events: none !important;
  user-select: none;
  -webkit-user-select: none;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  /* egen række, også hvis forælderen er flex (wrap) eller grid */
  flex: 0 1 100%;
  grid-column: 1 / -1;
}

/* <picture> er en inline-boks i figurens første linje og bærer størrelsen;
   <img> i den fylder 100 %. */
.milo-companion > picture {
  display: inline-block !important;
  box-sizing: border-box !important;
  width: var(--mc-size) !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top;
  font-size: 0 !important;
  line-height: 0 !important;
  pointer-events: none !important;
}

.milo-companion img {
  display: inline-block !important;
  box-sizing: border-box !important;
  width: var(--mc-size) !important;      /* direkte <img> uden picture */
  height: auto !important;
  max-width: 100% !important;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  padding: calc(var(--mc-size) * 0.07) !important;   /* luft mellem fugl og plade (ikke %: % måles mod forælderens bredde) */
  vertical-align: top;
  object-fit: contain;
  border-radius: 50% !important;
  background-color: var(--mc-plate) !important;
  box-shadow: 0 0 0 1px var(--mc-ring) !important;
  pointer-events: none !important;
  -webkit-user-drag: none;
  animation: none !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
}

.milo-companion picture > img {
  display: block !important;
  width: 100% !important;
}

@media screen and (min-width: 768px) {
  .milo-companion {
    --mc-size: clamp(6rem, 11vw, 8rem);      /* 96–128 px */
    --mc-gap: 1rem;
  }
}

/* Min Skole: grøn identitet (min-skole-layout.css: wash #eef8f0, kant #b8dcc4) */
:is(body.min-skole-page, body[data-family="min-skole"]) .milo-companion {
  --mc-plate: #eef8f0;
  --mc-ring: #b8dcc4;
}

/* Højkontrast: systemet overstyrer baggrunde, så pladen ville forsvinde og en
   hvid fugl stå på hvid Canvas. forced-color-adjust:none bevarer pladen; kanten
   bruger systemfarve. Figuren skjules ikke. */
@media (forced-colors: active) {
  .milo-companion img {
    forced-color-adjust: none;
    background-color: #e3eeff !important;
    box-shadow: none !important;
    border: 2px solid CanvasText !important;
  }
}

/* Print (også A4-printark): ingen ekstra række og ingen ændret paginering.
   Figuren har nul højde i flowet; billedet (≈ 32 px, tynd grå kant, ingen
   baggrund) lægges i figurens øverste højre hjørne, dvs. ved titlen.
   Skal figuren ikke med på papir: .milo-companion { display: none !important; } */
@media print {
  .milo-companion {
    position: relative !important;
    height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    break-inside: avoid;
    break-after: avoid;
    page-break-after: avoid;
  }

  /* picture-varianten: picture bærer position/størrelse, img fylder den */
  .milo-companion > picture,
  .milo-companion > img {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 2rem !important;
  }

  .milo-companion picture > img {
    position: static !important;
    width: 100% !important;
  }

  .milo-companion img {
    padding: 2px !important;
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 1px solid #8a96a8 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* ==========================================================================
   Min Børnehave — milo-companion-minder-patch.css
   --------------------------------------------------------------------------
   Lille patch til BEGGE Minder-sider. Loades EFTER milo-companion.css (og
   efter premium-experience.css):
     … → milo-companion.css → milo-companion-minder-patch.css

   Markup (uændret, figuren ligger UDENFOR #minder-app og består alle tilstande):
     <body class="site-ui app-page minder-page">
       <main id="main-content" class="minder-shell">
         <figure class="milo-companion" …>…</figure>
         <div id="minder-app">…dynamisk indhold…</div>
       </main>

   Problem: premium-experience.css gør .minder-shell til
   width:100%; margin:0; padding:0 (fuldbånds-heroer), så figuren stod klistret
   til venstre kant. Her får figuren SAMME venstre kant som Minder-heroens
   indhold (.minder-hero__layout): gutter 24 px (16 px ≤ 640 px), centreret
   container, rolig top- og bundafstand. Normal flow, ingen ny wrapper, ingen
   parent-mutation. Størrelsen (64–80 / 96–128 px) er stadig milo-companion.css'.

   Kun skærm: print er urørt, så figurens nul-højde i print fra
   milo-companion.css gælder uændret.
   ========================================================================== */

@media screen {
  body.minder-page main.minder-shell > .milo-companion {
    --mc-minder-max: 1120px;   /* = .minder-hero__layout; sæt 1180px, hvis app-tilstandene bruger 1180 */
    width: min(100% - 48px, var(--mc-minder-max)) !important;
    max-width: none !important;
    margin: 1.5rem auto 1.25rem !important;
    padding: 0 !important;
    text-align: left;          /* flugter med Minder-overskrift og tekst */
  }
}

@media screen and (max-width: 640px) {
  body.minder-page main.minder-shell > .milo-companion {
    width: min(100% - 32px, var(--mc-minder-max)) !important;
    margin: 1rem auto 1rem !important;
  }
}


/* ==========================================================================
   Min Børnehave — milo-print-companion-patch.css
   --------------------------------------------------------------------------
   Lille PRINT-ONLY patch til de 3 printbare ark (printbar-institutionsbesoeg,
   -opstartsark, -pakkeliste). APPENDES til milo-companion.css (samme fil,
   ingen ekstern URL, ingen baggrunds-url).

   Markup (sidste barn i headeren; ét element pr. ark):
     <article class="print-sheet">
       <header class="sheet-header">
         … eksisterende børn …
         <figure class="milo-print-companion" aria-hidden="true">
           <picture><source …webp… sizes="32px"><img … width="32" height="32"></picture>
         </figure>
       </header>

   Hvorfor: .milo-companion i .hero skjules af arkenes print-CSS, så Milo
   findes ikke på papir. Dette element ligger i selve arket.

   Geometri (header: grid 1fr auto, padding-bottom 1rem = 16 px,
   border-bottom 2pt ≈ 2,67 px, margin-bottom 1,25rem = 20 px):
     figuren er 32 × 32 px, position:absolute, right:0, bottom:-16px
     (målt fra headerens padding-kant) →
       øverste 16 px  = i headerens padding-bottom (tom plads),
       derefter       = skillelinjen (2,67 px) som figuren dækker bag billedet,
       nederste ≈13 px = i margin-bottom (20 px), ≈6,7 px luft til næste indhold.
   Absolut positioneret børn deltager ikke i grid-layoutet: ingen ny række,
   ingen ændret højde/margin/paginering, ingen overlap med flow-indhold.
   Figuren ligger altså tilbage på linjen — et hvidt billede dækker linjen
   lokalt. Offset kan justeres med --mpc-offset.

   Skærm: figuren er display:none (ingen layout, ingen tab-stop, aria-hidden).
   Print-regler kræver :has() (@supports); uden støtte vises figuren ikke.
   Ingen animation, pointer-events:none, ingen farver/baggrunde/skrifttyper,
   ingen hero-print-overrides, ingen ændring af navigation/note/tillid.
   ========================================================================== */

.milo-print-companion {
  display: none !important;
}

@media print {
  @supports selector(:has(*)) {
    .print-sheet header.sheet-header:has(> .milo-print-companion) {
      position: relative;
    }

    .print-sheet header.sheet-header > .milo-print-companion {
      --mpc-size: 32px;
      --mpc-offset: -16px;

      display: block !important;
      position: absolute !important;
      right: 0 !important;
      bottom: var(--mpc-offset) !important;
      left: auto !important;
      top: auto !important;
      grid-column: auto;
      box-sizing: border-box !important;
      width: var(--mpc-size) !important;
      height: var(--mpc-size) !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      background: none !important;
      font-size: 0 !important;
      line-height: 0 !important;
      overflow: hidden;
      pointer-events: none !important;
      animation: none !important;
      transition: none !important;
      transform: none !important;
      break-inside: avoid;
      page-break-inside: avoid;
    }

    .print-sheet header.sheet-header > .milo-print-companion > picture {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }

    .print-sheet header.sheet-header > .milo-print-companion img {
      display: block !important;
      box-sizing: border-box !important;
      width: 100% !important;
      height: 100% !important;
      max-width: none !important;
      margin: 0 !important;
      padding: 0 !important;
      border: 0 !important;
      border-radius: 0 !important;
      background: none !important;
      box-shadow: none !important;
      object-fit: contain;
      filter: none !important;
      animation: none !important;
      transition: none !important;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
}

/* Actual print QA: leave two pixels above the taller startup-sheet trust label. */
@media print {
  .print-sheet header.sheet-header > .milo-print-companion {
    --mpc-offset: -18px;
  }
}