/* Variant 'mindag' — kundportalens Min dag i ett stort fönster framför verktygsfönstren.
   Portalen ritas i naturlig storlek (1180 × 700) och skalas ner med --md-s. */
.am[data-typ="mindag"] { aspect-ratio: 1158 / 860; }
.am[data-typ="mindag"] .am-flikar { top: calc(4% + 16px); width: 58%; }
.md-fonster {
  position: absolute; z-index: 1; left: 50%; top: calc(4% + 152px);
  width: 76%; aspect-ratio: 1180 / 700;
  transform: translateX(-50%);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(0,0,0,.06);
  opacity: 0; translate: 0 18px; scale: .97;
  transition: opacity .5s var(--ease), translate .7s var(--ease), scale .7s var(--ease);
}
.am.samlad .md-fonster { opacity: 1; translate: 0 0; scale: 1; transition-delay: .3s; }
.md-skala { width: 1180px; height: 700px; zoom: var(--md-s, .55); /* zoom = skarp text, samma layout */ background: #f5f4f2; color: #202020; }
.md-chrome { height: 34px; display: flex; align-items: center; gap: 14px; padding: 0 14px; background: #ecebe8; border-bottom: 1px solid rgba(0,0,0,.06); }
.md-chrome .am-trafik i { width: 11px; height: 11px; }
.md-chrome .am-trafik i:nth-child(1) { background: #ff5f57; } .md-chrome .am-trafik i:nth-child(2) { background: #febc2e; } .md-chrome .am-trafik i:nth-child(3) { background: #28c840; }
.md-url { margin: 0 auto; transform: translateX(-30px); font-size: 12px; color: #8e8e8e; background: #fff; border-radius: 7px; padding: 4px 60px; }
.md-app { display: flex; height: 666px; }

/* Sidomenyn */
.md-sido { width: 262px; flex-shrink: 0; border-right: 1px solid rgba(0,0,0,.07); padding: 14px 8px; display: flex; flex-direction: column; gap: 1px; position: relative; }
.md-marke { display: flex; gap: 10px; align-items: center; padding: 0 8px 10px; }
.md-marke b { width: 32px; height: 32px; border-radius: 8px; background: #111; color: #fff; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.md-marke span, .md-anv span { display: grid; line-height: 1.25; }
.md-marke strong, .md-anv strong { font-size: 14px; font-weight: 500; }
.md-marke small, .md-anv small { font-size: 12px; color: #666; }
.md-grupp { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #8e8e8e; padding: 12px 8px 6px; }
.md-nav { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 10px; border-radius: 9px; font-size: 13.5px; color: #202020; }
.md-nav svg { color: #555; flex-shrink: 0; }
.md-nav em { margin-left: auto; font-style: normal; font-size: 12px; color: #444; }
.md-nav.aktiv { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.md-anv { position: absolute; left: 16px; bottom: 14px; display: flex; gap: 10px; align-items: center; }
.md-anv b { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); display: grid; place-items: center; font-size: 11px; font-weight: 500; color: #666; }

/* Huvudytan */
.md-huvud { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.md-sokrad { height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 24px; border-bottom: 1px solid rgba(0,0,0,.06); }
.md-sok, .md-fraga { display: inline-flex; align-items: center; gap: 8px; height: 34px; border: 1px solid rgba(0,0,0,.1); border-radius: 10px; background: #fff; font-size: 13px; padding: 0 12px; }
.md-sok { width: 420px; color: #8e8e8e; } .md-fraga { font-weight: 500; }
.md-exempel { margin-left: auto; font-size: 12px; color: #666; background: #eeede9; border-radius: 999px; padding: 3px 10px; }
.md-yta { position: relative; flex: 1; overflow: hidden; }

/* Startanimationen */
.md-intro { position: absolute; inset: 0; padding: 20px 48px; transition: opacity .5s var(--ease), translate .5s var(--ease); }
.am.dag .md-intro { opacity: 0; translate: 0 -8px; pointer-events: none; }
.md-datum { font-size: 14px; color: #666; }
.md-intro h2 { font-size: 44px; font-weight: 400; letter-spacing: -.03em; margin: 30px 0 8px; }
.md-ingress { font-size: 14px; color: #666; }
.md-steg { list-style: none; padding: 0; margin: 30px 0 0; width: 640px; display: grid; gap: 14px; }
.md-steg li { display: flex; align-items: center; gap: 12px; font-size: 15px; opacity: .35; transition: opacity .3s var(--ease); }
.md-steg li.aktiv, .md-steg li.klar { opacity: 1; }
.md-bock { width: 20px; height: 20px; border-radius: 50%; background: #eef3e6; color: #6aa84f; display: grid; place-items: center; flex-shrink: 0; }
.md-bock svg { opacity: 0; scale: .5; transition: opacity .2s var(--ease), scale .35s var(--fjader); }
.md-steg li.aktiv .md-bock { background: transparent; border: 2px solid #d6e5c8; border-top-color: #6aa84f; animation: md-snurr .8s linear infinite; }
.md-steg li.aktiv .md-bock svg { display: none; }
.md-steg li.klar .md-bock svg { opacity: 1; scale: 1; }
@keyframes md-snurr { to { rotate: 360deg; } }
.md-resultat { margin-left: auto; font-size: 14px; color: #666; font-variant-numeric: tabular-nums; opacity: 0; translate: -4px 0; transition: opacity .3s var(--ease), translate .3s var(--ease); }
.md-steg li.klar .md-resultat { opacity: 1; translate: 0 0; }
.md-summa { display: flex; align-items: center; gap: 14px; margin-top: 30px; font-size: 14px; color: #a3a3a3; opacity: 0; transition: opacity .4s var(--ease); }
.md-summa i { width: 32px; height: 1px; background: #d4d4d4; }
.am.summerad .md-summa { opacity: 1; }

/* Min dag */
.md-dag { position: absolute; inset: 0; padding: 16px 24px; display: flex; flex-direction: column; gap: 14px; opacity: 0; pointer-events: none; }
.md-dag > * { flex-shrink: 0; }
.md-dag { bottom: auto; transition: transform 1.3s cubic-bezier(.45,0,.2,1); }
.am:not(.dag) .md-dag { transition: none; }
.am.dag .md-dag { opacity: 1; }
.am.dag .md-dag > * { animation: md-upp .6s var(--ease) both; }
.am.dag .md-dag > :nth-child(2) { animation-delay: .1s; } .am.dag .md-dag > :nth-child(3) { animation-delay: .22s; } .am.dag .md-dag > :nth-child(4) { animation-delay: .34s; }
@keyframes md-upp { from { opacity: 0; translate: 0 10px; } }
.md-dagtopp { display: flex; justify-content: flex-end; align-items: center; gap: 16px; font-size: 14px; }
.md-dagtopp span { display: inline-flex; gap: 8px; align-items: center; }
.md-dagtopp b { display: inline-flex; gap: 6px; align-items: center; background: #202020; color: #fff; font-weight: 500; border-radius: 999px; padding: 7px 14px; }
.md-hero, .md-kort { background: #fff; border: 1px solid rgba(0,0,0,.07); border-radius: 22px; overflow: hidden; }
.md-hero-text {
  padding: 24px 28px 22px;
  background:
    radial-gradient(40% 70% at 72% 10%, rgba(196,190,255,.35), transparent 70%),
    radial-gradient(35% 60% at 82% 100%, rgba(253,205,170,.45), transparent 70%),
    radial-gradient(30% 50% at 30% 100%, rgba(190,215,250,.35), transparent 70%),
    #f7f7f6;
}
.md-hero-text small { font-size: 12px; color: #666; }
.md-hero-text p { font-size: 30px; letter-spacing: -.03em; line-height: 1.2; display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.md-hero-text p span { color: #8e8e8e; }
.am.dag .md-hero-text p { animation: md-upp .6s var(--ease) both; }
.am.dag .md-hero-text p:nth-of-type(2) { animation-delay: .25s; } .am.dag .md-hero-text p:nth-of-type(3) { animation-delay: .4s; }
.md-nasta { display: flex; align-items: center; gap: 22px; padding: 16px 28px; }
.md-nasta span { display: grid; } .md-nasta b { font-size: 17px; font-weight: 500; } .md-nasta small { font-size: 12px; color: #666; }
.md-nasta em { margin-left: auto; font-style: normal; font-size: 12px; color: #e5484d; }
.md-nasta strong { background: #202020; color: #fff; font-weight: 500; font-size: 13px; border-radius: 999px; padding: 9px 42px; }
.md-kort { padding: 18px 20px; }
.md-kort h3 { font-size: 17px; font-weight: 400; color: #8e8e8e; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.md-kort h3 i { font-style: normal; font-size: 11px; color: #e5484d; background: #fde8e8; border-radius: 999px; min-width: 20px; height: 20px; display: inline-grid; place-items: center; }
.md-kort h3 i.gra { color: #666; background: transparent; }
.md-kort h3 small { font-size: 12px; color: #8e8e8e; }
.md-poster { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.md-post { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.055); }
.md-post:last-child { border-bottom: 0; }
.md-post svg { color: #555; flex-shrink: 0; }
.md-post span { display: grid; min-width: 0; } .md-post b { font-size: 13.5px; font-weight: 400; } .md-post small { font-size: 11.5px; color: #8e8e8e; }
.md-post em { margin-left: auto; font-style: normal; font-size: 12px; background: #f0f0ef; border-radius: 999px; padding: 6px 14px; }
.md-rad2 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; }
.md-tidlinje { display: flex; align-items: center; gap: 6px; font-family: 'Spline Sans Mono', monospace; font-size: 11px; color: #3b82f6; }
.md-tidlinje i { flex: 1; height: 1px; background: #93c5fd; }
.md-plan { display: flex; gap: 14px; margin-top: 10px; font-size: 13px; } .md-plan em { font-style: normal; font-family: 'Spline Sans Mono', monospace; font-size: 11px; color: #8e8e8e; padding-top: 2px; }
.md-plan span, .md-mejl span { display: grid; } .md-plan small, .md-mejl small { font-size: 11.5px; color: #8e8e8e; }
.md-flikar2 { display: grid; grid-template-columns: 1fr 1fr; text-align: center; font-size: 13px; border-bottom: 1px solid rgba(0,0,0,.07); margin-bottom: 10px; }
.md-flikar2 b { font-weight: 500; border-bottom: 2px solid #202020; padding-bottom: 7px; } .md-flikar2 span { color: #8e8e8e; }
.md-mejl { display: flex; gap: 10px; font-size: 13px; } .md-mejl b.av { width: 28px; height: 28px; border-radius: 50%; background: #e6f6ec; color: #1f7a4a; font-size: 10px; display: grid; place-items: center; font-weight: 500; }
.md-mejl span b { font-weight: 500; }

.am[data-typ="mindag"] .am-sparad { left: auto; right: 3%; top: auto; bottom: 3.5%; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .md-fonster, .md-intro, .md-steg li, .md-resultat { transition: opacity .2s; translate: none; scale: none; }
  .am.dag .md-dag > *, .am.dag .md-hero-text p { animation: none; }
}

/* Dagens plan + Prioriterad inkorg i full längd (visas när vyn scrollar) */
.md-kort h3 .md-lank { margin-left: auto; font-size: 12px; color: #444; }
.md-rad2 { align-items: start; grid-template-columns: 1.35fr 1fr; }
.md-planrad { display: flex; align-items: center; gap: 14px; padding: 10px 8px; border-bottom: 1px solid rgba(0,0,0,.055); border-radius: 10px; }
.md-planrad:last-child { border-bottom: 0; }
.md-planrad > em { font-style: normal; font-family: 'Spline Sans Mono', monospace; font-size: 11px; color: #8e8e8e; width: 38px; flex-shrink: 0; }
.md-planinnehall { display: grid; gap: 3px; min-width: 0; }
.md-planinnehall small { font-size: 11.5px; color: #8e8e8e; }
.md-planinnehall small.md-nastaord { color: #e5484d; font-size: 11px; }
.md-plantitel { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; }
.md-plantitel svg { color: #8e8e8e; } .md-plantitel b { font-weight: 400; }
.md-motespill { display: inline-flex; align-items: center; gap: 6px; width: fit-content; background: #e8edfd; color: #3b5bcc; border-radius: 8px; padding: 4px 9px; font-size: 13px; white-space: nowrap; }
.md-planrad.fokus { background: linear-gradient(90deg, #f5f5f4 0%, #f7f3ef 70%, #fbeee4 100%); border-bottom-color: transparent; }
.md-folk { margin-left: auto; display: flex; }
.md-folk b { width: 22px; height: 22px; border-radius: 50%; background: #eef0fb; border: 2px solid #fff; margin-left: -5px; display: grid; place-items: center; font-size: 8.5px; font-weight: 500; color: #3b5bcc; }
.md-planrad strong { font-weight: 400; font-size: 12px; background: #f0f0ef; border-radius: 999px; padding: 6px 13px; white-space: nowrap; }
.md-planrad:not(:has(.md-folk)) strong { margin-left: auto; }
.md-mejlrad { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid rgba(0,0,0,.055); }
.md-mejlrad:last-child { border-bottom: 0; }
.md-mejlrad b.av { width: 28px; height: 28px; border-radius: 50%; font-size: 10px; display: grid; place-items: center; font-weight: 500; flex-shrink: 0; }
.md-mejlrad > span { display: grid; gap: 3px; font-size: 13px; flex: 1; min-width: 0; }
.md-mejlrad > span > b { font-weight: 500; }
.md-mejlrad em { font-style: normal; width: fit-content; font-size: 10.5px; color: #c2410c; background: #fdece7; border-radius: 5px; padding: 2px 7px; margin-top: 2px; }
.md-mejlrad small { font-family: 'Spline Sans Mono', monospace; font-size: 11px; color: #8e8e8e; white-space: nowrap; }
.md-mejlrad i { font-style: normal; color: #8e8e8e; }
.md-planinnehall { flex: 1; }
.md-motespill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: block; }
.md-motespill svg { vertical-align: -2px; margin-right: 4px; }
.md-folk { flex-shrink: 0; }


/* Snabbare takt i Min dag: fönstren samlas och portalen tonar in fortare */
.am[data-typ="mindag"].samlar .am-flik { transition: transform .7s cubic-bezier(.2,0,0,1) calc(var(--i) * 45ms), background .45s var(--ease), box-shadow .45s var(--ease); }
.am[data-typ="mindag"] .md-dag { transition: transform 2.4s cubic-bezier(.4,0,.2,1); } /* lugn scroll */

/* ===== Liten variant (.am.am-liten) — för små ytor som menyn. Ritas i ytans egen storlek utan
   nedskalning av hela scenen; portalen byggs i 760 px med en smal ikonmeny, så texten blir
   ungefär dubbelt så stor som i den nedskalade versionen och förblir skarp. ===== */
.am.am-liten[data-typ] { aspect-ratio: auto; width: 100%; height: 100%; border-radius: 0; clip-path: none; }
.am.am-liten[data-typ] .mb-rad { height: 20px; font-size: 10.5px; }
.am.am-liten[data-typ] .mb-meny { top: 22px; }
.am.am-liten[data-typ] .am-flikar { top: 28px; width: 58%; }
.am.am-liten[data-typ] .am-flik { top: calc(var(--i) * 17px); height: 150px; border-radius: 9px; transform: scale(calc(1 - (var(--n) - var(--i)) * .02)); }
.am.am-liten[data-typ] .am-flik.aktiv { transform: translateY(-3px) scale(calc(1 - (var(--n) - var(--i)) * .02)); }
.am.am-liten[data-typ] .am-flikrad { height: 17px; gap: 7px; padding: 0 8px; }
.am.am-liten[data-typ] .am-trafik i { width: 5px; height: 5px; }
.am.am-liten[data-typ] .am-flikchip { font-size: 9.5px; gap: 5px; }
.am.am-liten[data-typ] .am-flikchip img { width: 10px; height: 10px; }
.am.am-liten[data-typ] .am-flikmedd { font-size: 9.5px; }
.am.am-liten[data-typ] .am-flikkropp { height: calc(100% - 17px); }
/* samma storlek och plats som den nedskalade versionen hade i menyn (450 × 267 px, 121 px ner) */
.am.am-liten[data-typ] .md-fonster { top: 121px; width: 76%; aspect-ratio: 760 / 451; border-radius: 10px; }
.am.am-liten[data-typ] .md-skala { width: 760px; height: 451px; }
.am.am-liten[data-typ] .md-chrome { height: 26px; }
.am.am-liten[data-typ] .md-app { height: 425px; }
.am.am-liten[data-typ] .md-sido { width: 54px; padding: 10px 7px; align-items: center; gap: 2px; }
.am.am-liten[data-typ] .md-marke { padding: 0 0 8px; }
.am.am-liten[data-typ] .md-marke span, .am.am-liten[data-typ] .md-grupp, .am.am-liten[data-typ] .md-nav span, .am.am-liten[data-typ] .md-nav em, .am.am-liten[data-typ] .md-anv span { display: none; }
.am.am-liten[data-typ] .md-nav { width: 36px; height: 30px; padding: 0; justify-content: center; }
.am.am-liten[data-typ] .md-nav svg { width: 17px; height: 17px; }
.am.am-liten[data-typ] .md-anv { left: 11px; bottom: 10px; }
.am.am-liten[data-typ] .md-sokrad { height: 44px; padding: 0 18px; }
.am.am-liten[data-typ] .md-sok { width: 250px; font-size: 13px; }
.am.am-liten[data-typ] .md-exempel { display: none; }
.am.am-liten[data-typ] .md-intro { padding: 22px 30px; }
.am.am-liten[data-typ] .md-datum { font-size: 14px; }
.am.am-liten[data-typ] .md-intro h2 { font-size: 36px; margin: 4px 0 6px; }
.am.am-liten[data-typ] .md-ingress { font-size: 15px; }
.am.am-liten[data-typ] .md-steg { width: auto; margin-top: 18px; gap: 10px; }
.am.am-liten[data-typ] .md-steg li { font-size: 16px; }
.am.am-liten[data-typ] .md-resultat { font-size: 15px; }
.am.am-liten[data-typ] .md-summa { margin-top: 16px; font-size: 14px; }
.am.am-liten[data-typ] .md-dag { padding: 12px 18px; gap: 12px; }
.am.am-liten[data-typ] .md-dagtopp { display: none; }
.am.am-liten[data-typ] .md-hero-text { padding: 16px 22px 14px; }
.am.am-liten[data-typ] .md-hero-text small { font-size: 13px; }
.am.am-liten[data-typ] .md-hero-text p { font-size: 27px; }
.am.am-liten[data-typ] .md-nasta { padding: 12px 22px; gap: 14px; }
.am.am-liten[data-typ] .md-nasta b { font-size: 16px; } .am.am-liten[data-typ] .md-nasta small { font-size: 13px; } .am.am-liten[data-typ] .md-nasta em { font-size: 13px; }
.am.am-liten[data-typ] .md-nasta strong { padding: 8px 26px; font-size: 14px; }
.am.am-liten[data-typ] .md-kort { padding: 14px 16px; border-radius: 18px; }
.am.am-liten[data-typ] .md-kort h3 { font-size: 17px; }
.am.am-liten[data-typ] .md-poster { grid-template-columns: 1fr; }
.am.am-liten[data-typ] .md-poster > div + div { display: none; }
.am.am-liten[data-typ] .md-post b { font-size: 15px; } .am.am-liten[data-typ] .md-post small { font-size: 12.5px; } .am.am-liten[data-typ] .md-post em { font-size: 13px; }
.am.am-liten[data-typ] .md-rad2 { grid-template-columns: 1.15fr 1fr; gap: 12px; }
.am.am-liten[data-typ] .md-plantitel, .am.am-liten[data-typ] .md-motespill { font-size: 14px; }
.am.am-liten[data-typ] .md-planinnehall small { font-size: 12.5px; }
.am.am-liten[data-typ] .md-planrad { padding: 8px 6px; gap: 10px; }
.am.am-liten[data-typ] .md-planrad > em { width: 34px; font-size: 12px; }
.am.am-liten[data-typ] .md-planrad strong, .am.am-liten[data-typ] .md-folk { display: none; }
.am.am-liten[data-typ] .md-mejlrad > span { font-size: 14px; }
.am.am-liten[data-typ] .md-mejlrad small { display: none; }
.am.am-liten[data-typ] .am-docka { bottom: 15px; padding: 5px 6px; gap: 5px; border-radius: 11px; }
.am.am-liten[data-typ] .am-dockikon { width: 23px; height: 23px; border-radius: 6px; }
.am.am-liten[data-typ] .am-dockikon img { width: 13px; height: 13px; }
.am.am-liten[data-typ] .am-dockikon.aktiv { transform: translateY(-5px); }
.am.am-liten[data-typ] .am-sparad { right: 10px; bottom: 10px; padding: 7px 11px 7px 8px; gap: 8px; }
.am.am-liten[data-typ] .am-sparad .am-klocka { width: 24px; height: 24px; }
.am.am-liten[data-typ] .am-sparad small { font-size: 10px; } .am.am-liten[data-typ] .am-sparad b { font-size: 12.5px; }
.am.am-liten[data-typ] .md-sok { width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; line-height: 32px; }
.am.am-liten[data-typ] .md-sok svg { vertical-align: -2px; margin-right: 6px; }
.am.am-liten[data-typ] .md-grupp ~ .md-grupp ~ .md-nav { display: none; } /* bara Verksamheten-ikonerna får plats */
.am.am-liten[data-typ] .md-nav { height: 28px; }
.am.am-liten[data-typ] .md-lank { display: none; }