/* ═══════════════════════════════════════════════════════════════════════════
   RECEPTIONSDEMOT — formatmallen

   RAMEN STÅR INTE HÄR. Systemskalet (sidomenyn, vägen, titeln, tipset) byggs
   av js/systemskal.js och bär css/systemskal.css; ytan, panelen, arbetsloggen,
   flikarna och noten under rutan är .mk-* ur css/marknadsdemo.css. Receptionen
   bär allt det oförändrat. Två skärmar ur samma system ska se ut som två
   skärmar ur samma system: ändras skalet där ändras det här, och en egen
   uppsättning klasser hade glidit isär vid första ändringen av den ena.

   Den här filen bär BARA det som är receptionens eget: förklaringsraden,
   tråden, bokningslänken och posten. Lägger man en fönsterdel här har man
   börjat bygga en andra design.

   TRE AKTER I EN SCEN. De ligger i samma rutnätscell, så scenen är alltid
   lika hög som den högsta akten och ingenting hoppar när de byts. Bytet är
   opacity och transform, aldrig height eller display.

   UTAN JS LIGGER ALLT UNDER VARANDRA. Rutnätscellen och genomskinligheten
   sätts bara under .js-enabled, så den som har skriptet blockerat läser hela
   förloppet som text i stället för att möta en tom ruta.
   ═══════════════════════════════════════════════════════════════════════ */

/* KOMPRIMERAD DEN 5 SEPTEMBER 2026, som de tre andra skärmarna: paddingar och
   grader ned några procent, för panelerna var 1044 px höga och en laptop har
   sjuhundra att ge. Innehållet är oförändrat.

   INGEN min-height, till skillnad från .mkd. Marknadsdemot reserverar sin höjd
   för att skriptet ritar innehållet efter första målningen och rutan annars
   hade vuxit när det kom. Här står allt i markupen från början, så måttet
   hade varit ett dött golv under ett innehåll som ändå är högre.

   UPPMÄTT 653 px, och det är fönstret som kostar: listen 40, flikarna 29,
   förklaringen 74, scenen 331 (steg två med arbetsloggen är högst), foten 19
   och noten 52. Skär man här ska man mäta efteråt. */
.rcd{position:relative;display:flex;flex-direction:column;margin-top:.85rem}
/* FÖNSTRET KRYMPER ALDRIG UNDER SITT INNEHÅLL. flex:1 betyder flex-basis:0%,
   alltså startar rutan på noll höjd och växer bara om cellen har höjd att
   fördela. Marknadsdemot klarar det för att .mkd reserverar en min-height;
   den här rutan får sin höjd av innehållet, och vid 760 px blev .mk 194 px
   kring en panel på 544 som overflow:hidden sedan klippte rakt av. flex:1 0
   auto växer men krymper aldrig. */
.rcd .mk{flex:1 0 auto}


/* ── Förklaringen ──────────────────────────────────────────────────────────
   Står ÖVER skärmen och inte under den: den som läser ska veta vad han tittar
   på innan han tittar, annars läser han bilden två gånger. En rubrik och en
   mening; låg tidigare som tre i samma rutnätscell, en per steg. */
.rcd-lead{display:grid;gap:.25rem;margin-bottom:.65rem}
.rcd-lead p{margin:0;font-size:.8rem;line-height:1.6;color:var(--muted);max-width:74ch}

/* ── Arbetsloggen ──────────────────────────────────────────────────────────
   Fyra rader ur .mk-logg, avslöjade en i taget. Den bor INNE i steg två, för
   det är där skrivandet händer: ovanför scenen stod den kvar som en fylld låda
   redan i steg ett och sa att arbetet var gjort innan förfrågan lästs.

   ANIMATIONEN MÅSTE NOLLAS. .mk-logg-r bär animation:mk-in ... both i
   marknadsdemots fil, och ett fyllningsläge på both håller opacity:1 oavsett
   vad som står här. Utan raden nedan syns alla fyra raderna direkt.

   Höjden är låst till fyra rader: en logg som växer skjuter utkastet nedåt
   mitt i förloppet. */
.mk-logg[data-rcd-loggen]{min-height:4.4rem}
.mk-logg[data-rcd-loggen] .mk-logg-r{animation:none}
.js-enabled .mk-logg[data-rcd-loggen] .mk-logg-r{opacity:.001;
  transition:opacity .28s var(--ease-solutra,ease)}
.js-enabled .mk-logg[data-rcd-loggen] .mk-logg-r.pa{opacity:1}
/* Raden som arbetar just nu bär ringen i stället för bocken, som i förlagan.
   Bocken göms och rutan den låg i blir ringen: en roterande bock är ingen
   ring, den är en bock som snurrar, och det läser som ett fel. Måtten är
   .mk-rings egna, så de två demona snurrar likadant. */
.mk-logg[data-rcd-loggen] .mk-logg-r.nu{color:var(--g2)}
.mk-logg[data-rcd-loggen] .mk-logg-r.nu .mk-logg-b svg{display:none}
.mk-logg[data-rcd-loggen] .mk-logg-r.nu .mk-logg-b{border-radius:50%;
  border:2px solid rgba(42,85,200,.2);border-top-color:var(--g3);
  animation:mk-snurr .8s linear infinite}
/* BOCKEN OCH RINGEN MÅSTE VARA EXAKT LIKA STORA. Ringen var en ram på 11 px
   och bocken en 12 px-SVG, så när .nu vandrade nedåt genom raderna åkte rutans
   höjd tre pixlar upp och ned. Tre pixlar är inte mycket, men det är en
   layoutförskjutning mitt i ett förlopp och den är gratis att bli av med.
   Måttet står HÄR och inte på .nu, så båda lägena delar det. */
.mk-logg[data-rcd-loggen] .mk-logg-b{display:grid;place-items:center;
  box-sizing:border-box;width:12px;height:12px;margin-top:.16rem}

/* ── Tvåspalten ────────────────────────────────────────────────────────────
   Förfrågan står kvar till vänster hela vägen; höger spalt byter innehåll med
   steget. Vänsterspalten är NAVET: utan den bytte hela ytan innehåll mellan
   stegen och man tappade tråden mellan brevet, loggen och tabellen.

   HÖJDEN KOMMER UR HÖGERSPALTEN, som är olika hög i de tre stegen. Scenen är
   lika hög som det högsta (utkastet), och brevet till vänster sträcker sig
   lika högt, så raden är stabil och ingenting hoppar när stegen byts. */
.rcd-delad{display:grid;gap:.7rem;align-items:stretch}
/* TVÅ SPALTER SÅ TIDIGT DET GÅR. Brytpunkten låg på 820 px och kortet var då
   hundra pixlar högre än sina syskon i hela spannet 640 till 820, eftersom
   förfrågan och högerspalten staplades där. Vid 700 px är spalterna 330 px
   var, vilket räcker för meddelandet och för postens etikett-plus-värde.
   Mät om kortet mot sina syskon om måttet ändras. */
@media(min-width:700px){
  .rcd-delad{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:.8rem}
}
@media(min-width:900px){
  .rcd-delad{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);gap:.85rem}
}

/* Högerspalten. Loggen, utkastet och knappraden under varandra. Låg tidigare
   som en akt bland tre i en scen som bytte lager; med en enda vy behövs varken
   scenen eller lagren. */
.rcd-hoger{display:grid;gap:.5rem;align-content:start;min-width:0}

/* ── Breven ────────────────────────────────────────────────────────────────
   Förfrågan, utkastet och posten bor i samma sorts kort: de är tre vyer av
   samma ärende och ska läsas som det. Den inkommande har ram och vit botten,
   utkastet lutar mot systemets blå, posten står i en tonad ruta. */
.rcd-brev{display:grid;gap:.45rem;align-content:start;
  background:#fff;border:1px solid var(--line);border-radius:12px;padding:.7rem .75rem}
/* FÖRFRÅGAN ÄR FLEX OCH INTE GRID, för den ensam ska kunna trycka sin sista
   rad mot underkanten. Brevet sträcks lika högt som höger spalt, och med grid
   och align-content:start packades allt i toppen: kapplöpningsraden hamnade
   mitt i rutan med tvåhundra pixlar tomt under sig. margin-top:auto på .rcd-kapp
   gör bara något i en flexkolumn. */
.rcd-brev--in{display:flex;flex-direction:column}
.rcd-brev--ut{background:rgba(92,141,255,.055);border-color:rgba(92,141,255,.24)}
.rcd-brev--post{background:linear-gradient(180deg,#fbfcff,#f5f8ff)}
.rcd-brev-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;
  padding-bottom:.45rem;border-bottom:1px solid var(--line2)}
.rcd-brev-h b{font-size:.84rem;font-weight:700;color:var(--text)}
.rcd-brev-h em,.rcd-brev-h i,.rcd-brev-h u{font-style:normal;text-decoration:none;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.55rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.rcd-brev-h i{color:var(--g2)}
.rcd-brev-h u{margin-left:auto;color:var(--massing)}
.rcd-msg{margin:0;font-size:.79rem;line-height:1.68;color:var(--text)}

/* Kapplöpningsraden längst ned i förfrågan: först läser man den som vilken
   förfrågan som helst, sedan får man veta att tre andra byråer läser samma.
   margin-top:auto trycker den mot underkanten när brevet sträcks. */
.rcd-kapp{display:flex;align-items:flex-start;gap:.4rem;margin-top:auto;
  padding-top:.5rem;color:var(--massing)}
.rcd-kapp svg{flex:none;margin-top:.15em}
.rcd-kapp i{font-style:normal;font-size:.72rem;line-height:1.5;color:var(--faint)}

/* ── FÖRLOPPET I STEG TVÅ ──────────────────────────────────────────────────
   Ordningen är hela poängen och den ska hinnas med: förfrågan poppar upp,
   loggen radas upp rad för rad, och FÖRST DÄREFTER kommer utkastet. Låg allt
   framme på en gång såg man ett färdigt resultat och inte ett arbete, och då
   är loggen bara dekor ovanför något som redan stod där.

   UTKASTET TAR SIN PLATS DIREKT, men syns inte. Det är opacity och transform,
   aldrig display eller height: rutan ska vara exakt lika hög innan och efter
   att svaret kommer fram, annars hoppar kortet mitt i förloppet. */
.js-enabled .rcd-brev--ut,
.js-enabled .rcd-kn{
  opacity:.001;transform:translateY(10px);
  transition:opacity .5s var(--ease-solutra,ease),transform .5s var(--ease-solutra,ease)}
.rcd-utkast .rcd-brev--ut,
.rcd-utkast .rcd-kn{opacity:1;transform:none}
.rcd-utkast .rcd-kn{transition-delay:.12s}

/* Förfrågan poppar upp när förloppet börjar. Den är det första som händer och
   ska läsas som att något LANDAR, inte som att den alltid legat där. */
@keyframes rcd-pop{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:none}}
.rcd-pop .rcd-brev--in{animation:rcd-pop .52s var(--ease-solutra,ease) both}

/* Bokningslänken ritas som den ser ut i mejlet och inte som en knapp på
   sajten: den ska läsas som något köparen får, inte som något besökaren ska
   trycka på här. Därför streckad ram, ingen hovring och ingen pekare. */
.rcd-bok{display:flex;align-items:center;flex-wrap:wrap;gap:.15rem .5rem;
  padding:.45rem .6rem;border-radius:9px;
  background:rgba(92,141,255,.07);border:1px dashed rgba(92,141,255,.45);color:var(--g2)}
.rcd-bok svg{flex:none}
.rcd-bok b{font-size:.77rem;font-weight:700;color:var(--g2)}
.rcd-bok i{flex:1 1 100%;font-style:normal;font-size:.68rem;line-height:1.45;color:var(--faint)}

/* Skicka-raden. min-height låser höjden: utan den krympte fönstret i det
   ögonblick någon tryckte, och karusellen under hoppade uppåt. En förskjutning
   som besökaren själv utlöser är lika mycket CLS som en som kommer av sig. */
.rcd-kn{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .7rem;
  padding-left:.15rem;min-height:1.9rem}
.rcd-flagga{display:grid;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:.55rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.rcd-flagga i{grid-area:1/1;font-style:normal;color:var(--faint);
  opacity:.001;transition:opacity .2s linear}
.rcd-flagga i.pa{opacity:1}
.rcd-flagga.klar i.pa{color:var(--massing)}

/* Spela om. Tänds först när förloppet gått klart: en knapp som erbjuder en
   omtagning innan något visats är brus. */
.rcd-fot{display:flex;justify-content:flex-end;margin-top:.6rem;min-height:1.2rem}
.rcd-fot .mk-lank{opacity:0;pointer-events:none;transition:opacity .3s linear}
.rcd-klar .rcd-fot .mk-lank,
.rcd-fot .mk-lank:focus-visible{opacity:1;pointer-events:auto}

/* PÅ EN TELEFON ÄR HÖJDEN INTE GRATIS. Fälten får etikett och värde på samma
   rad och citatet på en andra. Citaten göms INTE: scenen är lika hög som
   utkastet och inte som posten, så att korta posten sparar noll pixlar. Mät
   innan något tas bort här. */
@media(max-width:640px){
  /* Uppmätt på 390 px innan skärningen: fönstret 957, av det noten 132,
     förklaringen 130 och flikarna 60 på två rader. Tre flikar som viker sig
     kostar dubbla höjden och läser dessutom som sex ord i stället för tre
     steg, så de får plats på en rad här. */
  .rcd .mk-not{font-size:.72rem;line-height:1.55}
  .rcd-msg{font-size:.75rem;line-height:1.55}
  .rcd-brev-h u{margin-left:0}
  .rcd-lead p{font-size:.76rem}
  .mk-logg[data-rcd-loggen]{min-height:4.6rem}

}

/* PANELERNA I #fyra SLUTAR VARA LIKA HÖGA UNDER 820 PX, och det är inte en
   smaksak. Uppmätt: i spannet 700 till 819 px är varje kort i karusellen
   396 px högt, medan receptionsfönstret behöver knappt 600. Rutans cell är
   grid-radens 1fr och krympte då till 235 px, och .mk klippte panelen rakt av
   med sin overflow:hidden. Vid 820 px och uppåt är korten 872 px och det
   finns gott om plats.

   Får varje kort sin egen höjd försvinner både klippningen och det tomrum ett
   textkort annars ärver av ett demokort. Priset är att karusellen byter höjd
   när man bläddrar, vilket är billigare än ett avklippt fönster.

   GÄLLER ENBART #fyra: de mörka korten på /crm och /website står i par och ska
   fortsätta vara lika höga. Mät om spannet om något demo i karusellen ändrar
   höjd. */
@media(max-width:819px){
  #fyra .tk-spar{align-items:start}
}

@media(prefers-reduced-motion:reduce){
  /* Den som bett om lugn får slutläget direkt: inget som poppar, ingenting som
     väntar på sin tur. */
  .js-enabled .rcd-brev--ut,
  .js-enabled .rcd-kn{opacity:1;transform:none;transition:none}
  .rcd-pop .rcd-brev--in{animation:none}
  .js-enabled .mk-logg[data-rcd-loggen] .mk-logg-r{transition:none}
  .mk-logg[data-rcd-loggen] .mk-logg-r.nu .mk-logg-b{animation:none;
    border-top-color:rgba(42,85,200,.2)}
}

/* Uppläsningsytan. Osynlig, men läses upp: stegen är knappar med aria-current,
   och det säger vilket steg som är valt utan att säga att bilden byttes. Femte
   kopian av den här regeln på sajten; se noten i css/teamdemo.css om att ring,
   tipsrad och uppläsningsyta ska brytas ut till en delad fil. */
.rcd-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}