/* Modulernes illustrationer (3/10): én form pr. modul, direkte på det slørede
   foto med lys tekst og uden hvide kort. Samme toning som coach-panelet og
   #demo, og den dækker hele rammen, også kanten rundt om det hvide tekstfelt.
   Afløser de to forgrundskort og baggrundskortene. app.js flyver .ms-layer ind
   én gang, ligesom de gamle kort. Prøven, de kom fra: modul-preview.html. */

#moduler .feature-shell::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(150deg,#142d46c9 0%,#1a354bb3 55%,#1a354b99 100%),radial-gradient(ellipse at 15% 85%,#356facb3,transparent 65%);pointer-events:none}
#moduler .feature-copy{justify-content:center}

/* Etiketten over overskriften er en lille blå linje, ikke en pille. */
#moduler .feature-copy span.eyebrow{background:none;padding:0;border-radius:0;font-size:15px;line-height:1.4;font-weight:500;color:var(--blue)}
#moduler .feature-copy span.eyebrow+h2{margin-top:14px}

/* Scenen: én genstand pr. modul. */
.ms-scene{position:relative;z-index:3;width:100%;max-width:520px;margin-inline:auto;color:#fff}
.ms-layer{will-change:transform,opacity;transform-origin:50% 50%}
#moduler .ms-scene h3{font:500 24px/1.25 'Product Display',var(--display);letter-spacing:-.5px;color:#fff}
#moduler .ms-scene blockquote{font:500 24px/1.35 'Product Display',var(--display);letter-spacing:-.5px;color:#fff;margin:0}
#moduler .ms-scene .persona-avatar{box-shadow:0 0 0 2px #ffffff8c}
.ms-head{display:flex;align-items:center;gap:14px}
.ms-head>div:first-of-type{min-width:0;flex:1}
.ms-kicker{display:block;font-size:14px;line-height:1.5;color:#e0e8f2;margin-bottom:4px}
.ms-tag,.ms-chip{display:inline-block;font-size:14px;line-height:1.3;padding:6px 12px;border-radius:40px;background:#ffffff26;color:#fff;white-space:nowrap}

/* Modul 1: samme kladde, to modtagere. Kladden er svag (før), de to beskeder
   er tydeligere (efter), og Redapting-mærket sidder i delingen. */
.ms-initial{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:50%;background:#ffffff26;color:#fff;font-size:14px;font-weight:500}
.ms-col-head{display:flex;align-items:center;gap:12px;min-width:0}
.ms-col-head strong{display:block;font:500 18px/1.3 var(--display);letter-spacing:-.2px;color:#fff}
.ms-col-head .ms-chip{margin-top:6px}
.ms-float{border-radius:16px;padding:20px 22px 22px;background:#ffffff29;border:1px solid #ffffff3d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#moduler .ms-float p{font:500 22px/1.35 'Product Display',var(--display);letter-spacing:-.4px;color:#fff;margin-top:16px;max-width:none;text-wrap:pretty}
/* Forslaget står klart hvidt og resten dæmpet, så øjet ser, at det samme
   forslag kommer sidst hos Sofie og først hos Mads. */
#moduler .ms-split .ms-float p{color:#c9d6e6}
#moduler .ms-split .ms-float p b{font-weight:inherit;color:#fff}
.ms-float.is-draft{width:min(100%,300px);margin-inline:auto;background:#ffffff12;border-color:#ffffff26}
#moduler .ms-float.is-draft p{font:400 19px/1.4 var(--display);letter-spacing:-.2px;color:#e0e8f2;margin-top:14px}
.ms-fork-wrap{position:relative;height:64px}
.ms-fork{display:block;width:100%;height:64px;color:#ffffffb3}
.ms-fork path{vector-effect:non-scaling-stroke}
.ms-re{position:absolute;left:50%;top:8px;width:32px;height:32px;margin-left:-16px;border-radius:9px;box-shadow:0 6px 16px #0b1f3a66}
.ms-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}

/* Modul 2: tempo-aksen. Afstanden mellem personerne bærer betydningen, og buen
   med den hvide etiket er rådet: fra dig over til Sara. */
.ms-axis{position:relative;--sara:15%;--you:69%;--fred:86%;padding-top:62px}
.ms-arc{position:absolute;top:24px;left:var(--sara);width:calc(var(--you) - var(--sara));height:36px;border:2px solid #fff;border-bottom:0;border-radius:20px 20px 0 0}
.ms-arc::after{content:'';position:absolute;left:-7px;bottom:-3px;border:6px solid transparent;border-top:9px solid #fff;border-bottom:0}
.ms-arc .ms-tag{position:absolute;left:50%;top:-1px;transform:translate(-50%,-50%);padding:8px 14px;background:#fff;color:var(--blue);font-weight:500}
.ms-people{position:relative;height:92px}
.ms-who{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:500 16px/1.2 var(--display);color:#fff;white-space:nowrap}
#moduler .ms-who .persona-avatar,.ms-who .ms-initial{width:56px;height:56px}
.ms-who.is-you .ms-initial{background:#fff;color:#1a354b}
.ms-who.is-you svg{width:24px;height:24px}
.ms-line{position:relative;height:3px;border-radius:2px;background:#ffffff59;margin-top:14px}
.ms-line i{position:absolute;top:50%;width:11px;height:11px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.ms-ends{display:flex;justify-content:space-between;margin-top:14px;font-size:14px;line-height:1.3;color:#e0e8f2}
.ms-check{margin-top:36px;padding-top:28px;border-top:1px solid #ffffff38}
#moduler .ms-check blockquote{margin-top:16px}

/* Modul 3: mødet som tidslinje. Første og sidste punkt er lave og svage, så
   kun blokken med spørgsmålet fylder. */
.ms-avatars{display:flex;flex:none}
.ms-avatars img{width:36px;height:36px;border-radius:50%;border:2px solid #ffffffa6;object-fit:cover;background:#edf2fa}
.ms-avatars img+img{margin-left:-9px}
.ms-timeline{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ms-timeline li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:10px}
.ms-timeline time{font-size:14px;line-height:1.3;color:#e0e8f2;padding-top:13px;font-variant-numeric:tabular-nums}
.ms-block{display:flex;flex-direction:column;justify-content:center;min-height:44px;border-radius:12px;padding:6px 16px;background:#ffffff17;color:#e0e8f2}
.ms-block-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ms-block-top strong{font:500 16px/1.3 var(--display);color:#fff}
.ms-block-top span{font-size:14px;white-space:nowrap}
.ms-timeline .is-focus .ms-block{justify-content:flex-start;gap:18px;padding:18px;background:#ffffff2e;border:1px solid #ffffff42;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ms-timeline .is-focus .ms-block-top strong{font-size:19px}
.ms-ask{display:flex;align-items:flex-start;gap:14px}
#moduler .ms-ask .persona-avatar{width:44px;height:44px}
.ms-ask-label{display:block;font-size:14px;line-height:1.3;color:#e0e8f2;margin-bottom:6px}
#moduler .ms-ask blockquote{font-size:21px;line-height:1.35;letter-spacing:-.4px}

@media(max-width:1100px){
  #moduler .ms-scene h3{font-size:21px}
  #moduler .ms-scene blockquote{font-size:21px}
  .ms-float{padding:16px 16px 18px}
  #moduler .ms-float p{font-size:19px}
  #moduler .ms-float.is-draft p{font-size:17px}
  .ms-check{margin-top:28px;padding-top:22px}
  #moduler .ms-ask blockquote{font-size:18px}
}
/* Lave desktopvinduer (kortstakken er lavere end 720px): strammere lodret. */
@media(min-width:810px) and (max-height:820px){
  .ms-fork-wrap{height:52px}
  .ms-fork{height:52px}
  .ms-re{top:4px}
  .ms-float{padding:16px 18px 18px}
  #moduler .ms-float p{font-size:19px;margin-top:12px}
  .ms-check{margin-top:26px;padding-top:22px}
  .ms-timeline{margin-top:20px}
}
@media(max-width:600px){
  /* mobile.css skalerer illustrationen ned med zoom; de nye scener er sat op til
     fuld størrelse på mobil. */
  #moduler .module-stage .feature-visual{zoom:1;padding:28px 18px}
  #moduler .feature-copy span.eyebrow{font-size:14px}
  .ms-split{gap:10px}
  .ms-split .ms-col-head{flex-direction:column;align-items:flex-start;gap:8px}
  .ms-float{padding:14px}
  #moduler .ms-float p,#moduler .ms-float.is-draft p{font-size:16px;margin-top:12px}
  .ms-axis{--sara:16%;--you:62%;--fred:86%}
  #moduler .ms-who .persona-avatar,.ms-who .ms-initial{width:46px;height:46px}
  .ms-people{height:80px}
  .ms-arc .ms-tag{padding:7px 11px;font-size:13px}
  .ms-timeline li{grid-template-columns:40px minmax(0,1fr);gap:8px}
  .ms-timeline .is-focus .ms-block{padding:14px}
  #moduler .ms-ask blockquote{font-size:17px}
}
@media(prefers-reduced-motion:reduce){.ms-layer{will-change:auto}}