/* ==================================================================
   dario.css — alle bevegelser Dario kan gjøre på flaten.

     d-*   grunnbevegelser, og de tre figuren selv bruker:
           d-oyne (blunk), d-sky (skyggen), d-pop (den grønne haken)
     d1-*  fase 1, uthenting av produktlinjer
     d2-*  fase 2, produktsøket
     d3-*  fase 3, henting av et påbegynt tilbud
     di-*  introen
   Prefiksene er beholdt fordi de ikke kolliderer, og fordi det gjør
   det mulig å diffe mot JSX-kildene i ../kilde/.

   .d-oyne setter en standardvarighet. dario-figur.js overstyrer den
   per frame med en inline animation-duration, fordi blunketakten er
   en del av uttrykket. Verdien rundes til halve sekunder i
   dario-scene.js, ellers får animasjonen ny varighet hver frame og
   restarter i det uendelige.

   REGEL: rotasjon i SVG-ens lokale koordinater skal IKKE gjøres her.
   CSS-transform overstyrer transform-attributtet på SVG-elementer, så
   elementet hopper ut av posisjon. Bruk <animateTransform> i markupen.
   Her hører bare hjemme: opacity, translate, scale, og rotasjon på
   elementer uten transform-attributt fra før.
================================================================== */

/* ---------- grunnbevegelser ---------- */

@keyframes d-sky     { 0%,100%{transform:scaleX(1); opacity:.15} 50%{transform:scaleX(.9); opacity:.1} }
@keyframes d-blunk   { 0%,93%,100%{transform:scaleY(1)} 96.5%{transform:scaleY(.08)} }

@keyframes d-inn     { from{opacity:0; transform:translateY(7px)}  to{opacity:1; transform:translateY(0)} }
@keyframes d-side    { from{opacity:0; transform:translateX(-14px)} to{opacity:1; transform:translateX(0)} }
@keyframes d-pop     { 0%{opacity:0; transform:scale(.3)} 70%{transform:scale(1.15)} 100%{opacity:1; transform:scale(1)} }

@keyframes d-strom   { from{transform:translateY(0)}   to{transform:translateY(-34px)} }
@keyframes d-sveip   { 0%{transform:translateY(0)}     100%{transform:translateY(66px)} }
@keyframes d-blad    { 0%{opacity:0; transform:translateX(0) rotate(0)} 20%{opacity:1} 100%{opacity:0; transform:translateX(58px) rotate(9deg)} }
@keyframes d-band    { from{transform:translateX(0)}   to{transform:translateX(-42px)} }
@keyframes d-puls    { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes d-ring    { 0%{transform:scale(.4); opacity:.75} 100%{transform:scale(1.9); opacity:0} }

@keyframes d-vippe   { 0%,100%{transform:translateY(-7px)} 50%{transform:translateY(7px)} }
@keyframes d-vippe-2 { 0%,100%{transform:translateY(7px)}  50%{transform:translateY(-7px)} }

@keyframes d-nikk    { 0%{transform:translateY(0)} 45%{transform:translateY(3px)} 100%{transform:translateY(0)} }
@keyframes d-tikk    { 0%{transform:scaleY(.2)} 60%{transform:scaleY(1.18)} 100%{transform:scaleY(1)} }
@keyframes d-sprett  { 0%{opacity:0; transform:translateY(4px) scale(.7)} 100%{opacity:1; transform:translateY(-9px) scale(1)} }

.d-sky      { transform-box: fill-box; transform-origin: center; animation: d-sky 3.6s ease-in-out infinite; }
.d-oyne     { transform-box: fill-box; transform-origin: center; animation: d-blunk 6.4s infinite; }

.d-inn      { animation: d-inn .45s ease-out backwards; }
.d-side     { animation: d-side .5s ease-out backwards; }
.d-pop      { transform-box: fill-box; transform-origin: center; animation: d-pop .4s ease-out backwards; }

.d-strom    { transform-box: fill-box; animation: d-strom 1.4s linear infinite; }
.d-sveip    { animation: d-sveip 1.9s ease-in-out infinite alternate; }
.d-blad     { transform-box: fill-box; animation: d-blad 2.4s ease-in infinite; }
.d-band     { animation: d-band 1.4s linear infinite; }
.d-puls     { animation: d-puls 1.2s ease-in-out infinite; }
.d-ring     { transform-box: fill-box; transform-origin: center; animation: d-ring 1.5s ease-out infinite; }

.d-vippe    { animation: d-vippe 2.4s ease-in-out infinite; }
.d-vippe-2  { animation: d-vippe-2 2.4s ease-in-out infinite; }

.d-nikk     { animation: d-nikk .42s ease-out; }
.d-tikk     { transform-origin: center bottom; animation: d-tikk .42s ease-out; }
.d-sprett   { animation: d-sprett .45s ease-out backwards; }

/* ---------- fase 1: uthenting av produktlinjer ---------- */

@keyframes d1-bob      { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes d1-blunk    { 0%,93%,100%{transform:scaleY(1)} 96.5%{transform:scaleY(.08)} }
@keyframes d1-sky      { 0%,100%{transform:scaleX(1); opacity:.14} 50%{transform:scaleX(.92); opacity:.1} }
@keyframes d1-arkskann { 0%{transform:translateY(0); opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{transform:translateY(150px); opacity:0} }
@keyframes d1-blad     { 0%{transform:translateX(0) rotate(0); opacity:1} 55%{opacity:1} 100%{transform:translateX(-118px) rotate(-11deg); opacity:0} }
@keyframes d1-sveip    { 0%{transform:translateY(0)} 100%{transform:translateY(115px)} }
@keyframes d1-pop      { 0%{opacity:0; transform:scale(.3)} 70%{transform:scale(1.15)} 100%{opacity:1; transform:scale(1)} }
@keyframes d1-inn      { from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:translateY(0)} }
@keyframes d1-fall     { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)} }
@keyframes d1-puls     { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes d1-ramme    { 0%,100%{stroke-opacity:.4} 50%{stroke-opacity:1} }
@keyframes d1-marsj    { to { stroke-dashoffset: -20; } }
@keyframes d1-ring     { 0%{transform:scale(.35); opacity:.7} 100%{transform:scale(1.7); opacity:0} }

.d1-bob      { animation: d1-bob 3.6s ease-in-out infinite; }
.d1-oyne     { transform-box: fill-box; transform-origin: center; animation: d1-blunk 6.4s infinite; }
.d1-sky      { transform-box: fill-box; transform-origin: center; animation: d1-sky 3.6s ease-in-out infinite; }
.d1-arkskann { transform-box: fill-box; animation: d1-arkskann 1.9s linear infinite; }
.d1-blad     { transform-box: fill-box; animation: d1-blad 1.9s ease-in infinite; }
.d1-sveip    { transform-box: fill-box; animation: d1-sveip 2.2s ease-in-out infinite alternate; }
.d1-pop      { transform-box: fill-box; transform-origin: center; animation: d1-pop .35s ease-out backwards; }
.d1-inn      { animation: d1-inn .3s ease-out backwards; }
.d1-fall     { animation: d1-fall .4s ease-out backwards; }
.d1-puls     { animation: d1-puls 1.1s ease-in-out infinite; }
.d1-ramme    { animation: d1-ramme 1.4s ease-in-out infinite, d1-marsj 1.2s linear infinite; }
.d1-straal   { animation: d1-marsj 1s linear infinite; }
.d1-ring     { transform-box: fill-box; transform-origin: center; animation: d1-ring 1.2s ease-out infinite; }

/* ---------- fase 2: produktsøket ---------- */

@keyframes d2-bob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} }
@keyframes d2-blunk { 0%,93%,100%{transform:scaleY(1)} 96.5%{transform:scaleY(.08)} }
@keyframes d2-sky   { 0%,100%{transform:scaleX(1); opacity:.14} 50%{transform:scaleX(.92); opacity:.1} }
@keyframes d2-strom { from{transform:translateY(0)} to{transform:translateY(-34px)} }
@keyframes d2-sveip { 0%{transform:translateY(0)} 100%{transform:translateY(96px)} }
@keyframes d2-pop   { 0%{opacity:0; transform:scale(.3)} 70%{transform:scale(1.15)} 100%{opacity:1; transform:scale(1)} }
@keyframes d2-inn   { from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:translateY(0)} }
@keyframes d2-fall  { from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:translateY(0)} }
@keyframes d2-puls  { 0%,100%{opacity:.25} 50%{opacity:1} }
@keyframes d2-marsj { to { stroke-dashoffset: -20; } }

.d2-bob    { animation: d2-bob 3.6s ease-in-out infinite; }
.d2-oyne   { transform-box: fill-box; transform-origin: center; animation: d2-blunk 6.4s infinite; }
.d2-sky    { transform-box: fill-box; transform-origin: center; animation: d2-sky 3.6s ease-in-out infinite; }
.d2-strom  { transform-box: fill-box; animation: d2-strom 1.4s linear infinite; }
.d2-sveip  { transform-box: fill-box; animation: d2-sveip 2.2s ease-in-out infinite alternate; }
.d2-pop    { transform-box: fill-box; transform-origin: center; animation: d2-pop .35s ease-out backwards; }
.d2-inn    { animation: d2-inn .3s ease-out backwards; }
.d2-fall   { animation: d2-fall .4s ease-out backwards; }
.d2-puls   { animation: d2-puls 1.1s ease-in-out infinite; }
.d2-straal { animation: d2-marsj 1s linear infinite; }

/* ---------- fase 3: henting av et påbegynt tilbud ----------
   Sveipet er kortere her enn i fase 1 og 2 med vilje. Fase 3 venter
   ikke på et søk, den venter på en nedlasting, og et bredt sveip over
   hele panelet ville lovet mer arbeid enn det som faktisk skjer. */

@keyframes d3-sveip { 0%{transform:translateY(0)} 100%{transform:translateY(145px)} }
@keyframes d3-pop   { 0%{opacity:0; transform:scale(.3)} 70%{transform:scale(1.15)} 100%{opacity:1; transform:scale(1)} }
@keyframes d3-inn   { from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:translateY(0)} }
@keyframes d3-puls  { 0%,100%{opacity:.25} 50%{opacity:1} }

.d3-sveip  { transform-box: fill-box; animation: d3-sveip 2.6s ease-in-out infinite alternate; }
.d3-pop    { transform-box: fill-box; transform-origin: center; animation: d3-pop .35s ease-out backwards; }
.d3-inn    { animation: d3-inn .3s ease-out backwards; }
.d3-puls   { animation: d3-puls 1.1s ease-in-out infinite; }

/* ---------- venteflaten rundt scenen ---------- */

:host(dario-scene)   { display: block; }
:host(dario-ns-scene){ display: block; }
:host(dario-logo)    { display: inline-flex; vertical-align: middle; }
:host(dario-tilstand){ display: block; }

.dario-vent        { padding: 44px 20px 64px; display: flex; flex-direction: column; align-items: center; }
.dario-vent__ramme { width: 100%; max-width: 620px; overflow: hidden; border-radius: var(--sg-shape-panel, 12px); border: 1px solid var(--sg-border-subtle, #D2DCE0); background: var(--sg-surface-raised, #fff); }
.dario-vent__scene { background: #F7F9FA; padding: 12px 12px 2px; }
.dario-vent__tekst { border-top: 1px solid var(--sg-border-subtle, #D2DCE0); padding: 16px 20px 20px; }
.dario-vent__topp  { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dario-vent__steg  { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #00869D; }
.dario-vent__steg--klar { color: #55AD7C; }
/* tabular-nums: uten den hopper bredden for hvert sekund som tikker. */
.dario-vent__tid   { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: #847876; font-variant-numeric: tabular-nums; }
.dario-vent__tittel{ margin: 5px 0 0; font-size: 17px; font-weight: 700; line-height: 24px; color: #3C3C3C; }
.dario-vent__sub   { margin: 3px 0 0; font-size: 13.5px; line-height: 20px; color: #847876; }
.dario-vent__bar   { margin-top: 14px; height: 6px; border-radius: 3px; background: #D2DCE0; overflow: hidden; }
.dario-vent__fyll  { height: 100%; border-radius: 3px; background: #024F88; width: 0; transition: width 260ms cubic-bezier(.2,0,0,1); }
/* Fremdriftskurven flater ut mot slutten og ser da frossen ut. Sveipen viser
   at det fortsatt jobbes, uten å påstå at baren har beveget seg. */
@keyframes dario-sveip { from { background-position: 180% 0; } to { background-position: -80% 0; } }
.dario-vent__fyll--jobber { background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.40) 50%, transparent 100%);
                            background-size: 60% 100%; background-repeat: no-repeat; animation: dario-sveip 2.1s linear infinite; }
.dario-vent__fyll--klar { background: #55AD7C; transition-duration: 380ms; }
.dario-vent__notis { margin: 10px 0 0; font-size: 12.5px; line-height: 18px; font-weight: 600; color: #3C3C3C; }

/* ---------- logo ---------- */

.dario-logo        { display: inline-flex; align-items: center; gap: 11px; }
.dario-logo__ord   { line-height: 1; text-align: left; }
.dario-logo__navn  { font-weight: 700; letter-spacing: -0.01em; color: #024F88; }
.dario-logo__rolle { margin-top: .2em; text-transform: uppercase; letter-spacing: .14em; color: #847876; }
:host([lys]) .dario-logo__navn  { color: #ffffff; }
:host([lys]) .dario-logo__rolle { color: #B6DFE7; }

/* ---------- introen, di-* fra kilde/Dario-intro.jsx ---------- */

@keyframes di-bob   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3.5px)} }
@keyframes di-blunk { 0%,93%,100%{transform:scaleY(1)} 96.5%{transform:scaleY(.08)} }
@keyframes di-sky   { 0%,100%{transform:scaleX(1); opacity:.15} 50%{transform:scaleX(.9); opacity:.1} }
@keyframes di-rull  { 0%{transform:translateX(-150px); opacity:0} 30%{opacity:1} 100%{transform:translateX(0); opacity:1} }
@keyframes di-inn   { from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:translateY(0)} }
@keyframes di-side  { from{opacity:0; transform:translateX(-14px)} to{opacity:1; transform:translateX(0)} }
@keyframes di-pop   { 0%{opacity:0; transform:scale(.3)} 70%{transform:scale(1.15)} 100%{opacity:1; transform:scale(1)} }
@keyframes di-fall  { 0%{opacity:0; transform:translateY(-46px)} 55%{opacity:1} 88%{opacity:1; transform:translateY(74px) scale(.72)} 100%{opacity:0; transform:translateY(84px) scale(.6)} }
@keyframes di-puls  { 0%,100%{opacity:.3} 50%{opacity:1} }
@keyframes di-ring  { 0%{transform:scale(.4); opacity:.75} 100%{transform:scale(1.9); opacity:0} }
@keyframes di-dim   { from{opacity:1} to{opacity:.32} }
@keyframes di-pek   { 0%{transform:translateX(16px); opacity:0} 60%{transform:translateX(0); opacity:1} 72%{transform:translateX(4px)} 100%{transform:translateX(0); opacity:1} }
@keyframes di-chev  { 0%,100%{transform:translateY(0); opacity:.55} 50%{transform:translateY(5px); opacity:1} }

.di-kropp { animation: di-bob 3.6s ease-in-out infinite; }
.di-oyne  { transform-box: fill-box; transform-origin: center; animation: di-blunk 6.4s infinite; }
.di-sky   { transform-box: fill-box; transform-origin: center; animation: di-sky 3.6s ease-in-out infinite; }
.di-rull  { animation: di-rull 1.05s cubic-bezier(.22,.7,.25,1) backwards; }
.di-inn   { animation: di-inn .45s ease-out backwards; }
.di-side  { animation: di-side .5s ease-out backwards; }
.di-pop   { transform-box: fill-box; transform-origin: center; animation: di-pop .4s ease-out backwards; }
.di-fall  { transform-box: fill-box; animation: di-fall 2.1s ease-in infinite; }
.di-puls  { animation: di-puls 1.2s ease-in-out infinite; }
.di-ring  { transform-box: fill-box; transform-origin: center; animation: di-ring 1.5s ease-out infinite; }
.di-dim   { animation: di-dim .8s ease-out .5s forwards; }
.di-pek   { animation: di-pek .8s ease-out backwards; }
.di-chev  { animation: di-chev 1.6s ease-in-out infinite; }

/* Verten må være flex-container selv. En indre height:100% løser seg ikke
   mot en flex-item-høyde, og da faller innholdet til toppen av flata. */
:host(dario-intro) { display: flex; min-height: 0; }

.dario-intro         { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.dario-intro__ramme  { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; min-height: 0;
                       overflow: hidden; border-radius: var(--sg-shape-panel, 12px);
                       border: 1px solid var(--sg-border-subtle, #D2DCE0); background: var(--sg-surface-raised, #fff); }
.dario-intro__scene  { flex: 1 1 auto; min-height: 120px; display: flex; background: #F7F9FA; padding: 12px 12px 0; }
.dario-intro__scene svg { width: 100%; height: 100%; min-height: 0; }
.dario-intro__tekst  { flex: 0 0 auto; border-top: 1px solid var(--sg-border-subtle, #D2DCE0); padding: 16px 24px 20px; }
.dario-intro__merke  { font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #00869D; }
.dario-intro__tittel { margin: 6px 0 0; font-size: 25px; font-weight: 700; line-height: 1.2; color: #024F88; text-wrap: pretty; }
.dario-intro__sub    { margin: 10px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: #3C3C3C; text-wrap: pretty; }

.dario-intro__nav    { width: 100%; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.dario-intro__knapp  { border-radius: 8px; border: 1px solid #D2DCE0; background: #fff; padding: 10px 16px;
                       font: inherit; font-size: 14px; font-weight: 600; color: #3C3C3C; cursor: pointer; }
.dario-intro__knapp:hover:not(:disabled) { border-color: #024F88; }
.dario-intro__knapp:disabled { opacity: .35; cursor: default; }
.dario-intro__knapp--primar { border-color: #024F88; background: #024F88; color: #fff; }
.dario-intro__knapp--primar:hover { background: #013E6D; }
.dario-intro__prikker{ flex: 1 1 auto; display: flex; justify-content: center; gap: 8px; }
.dario-intro__prikk  { height: 8px; width: 8px; padding: 0; border: none; border-radius: 999px;
                       background: #D2DCE0; cursor: pointer; transition: width .2s ease, background .2s ease; }
.dario-intro__prikk:hover { background: #B6DFE7; }

/* ---------- ror-*: overgangen fra skjema til venteflate ----------
   Bygges av dario-ror.js og lever UTENFOR shadow DOM, på document.body.
   Reglene virker likevel, fordi dario.css er lenket globalt i tillegg
   til å legges i shadow rootene.

   Alt går på én 7000 ms tidslinje. Ingen kjeding av timere: hvert element
   har samme varighet og skiller seg bare på keyframe-prosentene. Da kan
   hele overgangen kuttes ved å fjerne overlegget, uten opprydding.

   Lange hold mellom bevegelsene er med vilje. Selgeren skal rekke å se at
   forespørselen går inn i røret, og at den kommer ut igjen hos Dario.

   Holdepunkter: 9 % (900 ms) dekklaget er tett, 40 % (4000 ms) flatene
   byttes bak dekket, 62 % (6200 ms) dekket begynner å slippe.

   Dekket står tett i 2,2 s etter byttet, og retur-røret venter til 46 %.
   Begge marginene er der fordi byttetimeren driver på en lastet maskin, og
   et bytte som blir synlig ødelegger hele illusjonen.

   Leveransen lander mot slutten med vilje. Ventescenen holdes på frame 0
   til da, se SCENE_HOLD i dario-ror.js og settHold i dario-scene.js.
   Dokumentet i manuset glir inn fra venstre, samme vei som pakken, så de to
   bevegelsene skal gå i hverandre og ikke etter hverandre.

   BD-Blå og ikke petroleum: dette er transporten mellom to flater, ikke
   Darios forslag. Se dario-implementering.md. */

@keyframes ror-dekk  { 0%{opacity:0} 9%{opacity:1} 62%{opacity:1} 68%{opacity:0} 100%{opacity:0} }
@keyframes ror-inn-a { 0%{transform:translate(-100%,0)} 5%{transform:translate(0,0)} 36%{transform:translate(0,0)}
                       43%{transform:translate(-100%,-20px)} 100%{transform:translate(-100%,-20px)} }
@keyframes ror-inn-b { 0%,46%{transform:translateX(-100%)} 58%{transform:translateX(0)}
                       93%{transform:translateX(0)} 100%{transform:translateX(-100%)} }
@keyframes ror-sug   { 0%,13%{transform:translate(0,0) scale(1,1)}
                       28%{transform:translate(var(--rk-dx),0) scale(.5,.16)}
                       36%,100%{transform:translate(calc(var(--rk-dx) - var(--rk-w) * .32),0) scale(.34,.12)} }
@keyframes ror-lever { 0%,64%{transform:translate(-40px,0) scale(.26,.12); opacity:0}
                       67%{transform:translate(-28px,0) scale(.4,.36); opacity:1}
                       90%{transform:translate(calc(var(--lev-dx) * .72),0) scale(.86,.88); opacity:1}
                       100%{transform:translate(var(--lev-dx),0) scale(1,1); opacity:0} }

.ror-lag     { position: fixed; inset: 0; z-index: 9000; pointer-events: none; contain: layout paint; }
.ror-dekk    { position: absolute; left: 0; right: 0; top: var(--dekk-t); bottom: 0;
               background: var(--sg-color-neutral-100, #F2F5F6); animation: ror-dekk 10000ms linear both; }

/* Klippekanten står i rørmunningen. Uten den glir pakken bare forbi røret
   i stedet for å forsvinne inn i det, og hele illusjonen ryker. */
.ror-klipp     { position: absolute; top: 0; bottom: 0; right: 0; overflow: hidden; }
.ror-klipp--inn{ left: var(--rr-w); }
.ror-klipp--ut { left: var(--rr-w2); }

.ror-ror     { position: absolute; left: 0; height: 58px; margin-top: -29px; will-change: transform; }
.ror-ror--a  { top: var(--rr-y);  width: var(--rr-w);  animation: ror-inn-a 10000ms cubic-bezier(.24,.66,.28,1) both; }
.ror-ror--b  { top: var(--rr-y2); width: var(--rr-w2); animation: ror-inn-b 10000ms cubic-bezier(.24,.66,.28,1) both; }

/* Sylinderfølelsen kommer av lysstripen høyt oppe og den mørke underkanten,
   ikke av en skygge. En flat firkant leses ikke som et rør. */
.ror-korpus  { position: absolute; inset: 0 24px 0 0; border-radius: 0 4px 4px 0;
               background: linear-gradient(180deg,#0A5B95 0%,#4593CB 15%,#024F88 54%,#012237 100%);
               box-shadow: 0 14px 30px rgba(1,34,55,.26); }
.ror-krave   { position: absolute; top: -8px; bottom: -8px; right: 0; width: 27px; border-radius: 6px;
               background: linear-gradient(180deg,#0C67A7 0%,#54A0D4 15%,#024F88 56%,#011B2D 100%);
               box-shadow: 0 14px 30px rgba(1,34,55,.28); }

.ror-pakke   { position: absolute; width: var(--rk-w); height: var(--rk-h);
               overflow: hidden; padding: 12px 14px; border-radius: 10px;
               border: 1px solid var(--sg-border-subtle, #D2DCE0); background: var(--sg-surface-raised, #fff);
               box-shadow: 0 10px 26px rgba(1,34,55,.14);
               font-family: Arial, sans-serif; will-change: transform, opacity; }
/* Venstre kant er relativ til klippekanten, ikke til viewporten. */
.ror-pakke--inn { left: calc(var(--rk-x) - var(--rr-w)); top: var(--rk-y); transform-origin: center;
                  animation: ror-sug 10000ms cubic-bezier(.5,0,.42,1) both; }
/* Utpakken ankrer til returrørets munning, ikke til skjemaets posisjon.
   Den tones ut idet den lander, sa manusets eget ark tar over uten at det
   ser ut som to dokumenter. */
.ror-pakke--ut  { left: 0; top: var(--rr-y2); width: 152px; height: 122px; margin-top: -61px;
                  transform-origin: left center; animation: ror-lever 10000ms cubic-bezier(.2,.7,.3,1) both; }

/* Kortvarianten, 5000 ms (retur:false i dario-ror.js). Innsuget har samme
   tider i ms som over. Ingen retur: verten bytter flate ved 3400 ms, og
   dekket står tett til 4400 ms, så byttetimeren har 1 s margin. */
@keyframes ror-dekk-kort { 0%{opacity:0} 18%{opacity:1} 88%{opacity:1} 100%{opacity:0} }
@keyframes ror-inn-kort  { 0%{transform:translate(-100%,0)} 10%{transform:translate(0,0)} 68%{transform:translate(0,0)}
                           82%{transform:translate(-100%,-20px)} 100%{transform:translate(-100%,-20px)} }
@keyframes ror-sug-kort  { 0%,26%{transform:translate(0,0) scale(1,1)}
                           56%{transform:translate(var(--rk-dx),0) scale(.5,.16)}
                           68%,100%{transform:translate(calc(var(--rk-dx) - var(--rk-w) * .32),0) scale(.34,.12)} }
.ror-lag--inn .ror-dekk       { animation: ror-dekk-kort 5000ms linear both; }
.ror-lag--inn .ror-ror--a     { animation: ror-inn-kort 5000ms cubic-bezier(.24,.66,.28,1) both; }
.ror-lag--inn .ror-pakke--inn { animation: ror-sug-kort 5000ms cubic-bezier(.5,0,.42,1) both; }

.ror-pakke__topp  { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #847876; }
.ror-pakke__kropp { margin-top: 9px; display: flex; flex-direction: column; gap: 7px; }
.ror-pakke__linje { font-size: 12px; line-height: 14px; color: #3C3C3C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ror-pakke__linje--tom { height: 8px; border-radius: 4px; background: #E7EDEF; }
.ror-pakke__fil   { margin-top: 8px; display: inline-block; max-width: 100%; padding: 4px 9px; border-radius: 999px;
                    background: #E9F3F8; font-size: 11px; font-weight: 700; color: #024F88;
                    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dario-intro__prikk--aktiv { width: 28px; background: #024F88; }
.dario-intro__teller { font-size: 14px; color: #847876; padding: 0 4px; }
.dario-intro__ned    { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0 auto;
                       border: none; background: none; font: inherit; font-size: 14px; font-weight: 600;
                       color: #00869D; cursor: pointer; }
/* Klassene over setter display og slår dermed ut UA-regelen for [hidden]. */
.dario-intro [hidden] { display: none; }
@media (max-width: 620px) {
  .dario-intro__tittel { font-size: 21px; }
  .dario-intro__sub    { font-size: 15px; }
}

/* ---------- tomme tilstander og feilflater ---------- */

.dario-tom         { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dario-tom__scene  { flex: 0 0 auto; }
.dario-tom__tekst  { flex: 1 1 240px; min-width: 0; }
.dario-tom__tittel { margin: 0; font-size: 16px; font-weight: 700; line-height: 22px; color: #3C3C3C; text-wrap: pretty; }
.dario-tom__sub    { margin: 4px 0 0; font-size: 13.5px; line-height: 20px; color: #847876; text-wrap: pretty; }

/* Ingen unntak. Alt skrus av, også SMIL-animasjonene som slås av i JS.
   Telleren er da eneste livstegn igjen, og den tikker fortsatt. */
@media (prefers-reduced-motion: reduce) {
  .dario-vent__fyll { transition: none; }
  .dario-vent__fyll--jobber { animation: none; background-image: none; }
  .di-chev { animation: none !important; }
  svg * { animation: none !important; }
}