/* The lesson stage: 1600×900 (or 1080×1080), scaled to fit. Every moving value is set from JS at time t
   (assets/js/rorelse.js); nothing here animates on its own, so a frame at t always looks the same. */
.spelare { display: grid; gap: 12px; }
.vy { position: relative; width: 100%; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--vit);
  border: 1.5px solid var(--black); border-radius: 0 0 14px 14px; box-shadow: 6px 6px 0 var(--black); }
.scen {
  --scen-bg: var(--scen, #f9f9f5);
  position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; cursor: var(--pekare-aktiv);
  background: var(--scen-bg); color: var(--black); font-family: var(--sans); overflow: hidden;
}
/* Matte paper: a very fine, static grain over everything. */
.scen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 7; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }
.scen .lager { cursor: var(--pekare); }
.scen-topp { position: absolute; left: 64px; right: 64px; top: 44px; display: flex; justify-content: space-between; align-items: center; z-index: 3; }
.scen-kicker { font: 600 18px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dampad); }
.scen-marke { display: flex; align-items: center; gap: 12px; color: var(--mork); }
.scen-marke svg { width: 34px; height: 34px; }
.scen-marke span { font: 600 17px/1 var(--sans); letter-spacing: .22em; }
.scen-progress { position: absolute; left: 0; top: 0; height: 6px; background: var(--jade); width: calc(var(--p, 0) * 100%); z-index: 4; }

.bild { position: absolute; left: 0; right: 0; top: 100px; height: 600px; opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 18px)); }
.bild.borta { visibility: hidden; }
.fram { opacity: var(--in, 0); transform: translateY(calc((1 - var(--in, 0)) * 22px)); }

/* Captions */
.textning { position: absolute; left: 120px; right: 120px; top: 726px; height: 140px; display: flex; align-items: center; justify-content: center; text-align: center; z-index: 3;
  font: 600 46px/1.22 var(--sans); letter-spacing: -.01em; text-wrap: balance; }
.textning .o { color: var(--grat); }
.textning .o.sagt { color: var(--black); }
.textning .o.nu { color: var(--jade); }
.textning-av .textning { display: none; }

/* rubrik */
.t-rubrik { display: flex; flex-direction: column; justify-content: center; padding: 0 140px; gap: 18px; }
.t-rubrik .kick { font: 500 32px/1.2 var(--sans); color: var(--jade-text); }
.t-rubrik .rad { font: 600 104px/1.02 var(--rubrik); letter-spacing: -.035em; }
.t-rubrik .rad em { font-style: normal; color: var(--jade); }

/* Windows in the macOS manner: rounded, a title bar with three lights, a hard offset shadow (Kader Cadre). */
.fonster { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); width: 1160px; background: #fff;
  border: 1.5px solid var(--black); border-radius: 16px; box-shadow: 10px 10px 0 var(--black); overflow: visible; }
.fonster-list { height: 50px; display: grid; grid-template-columns: 120px 1fr 120px; align-items: center; padding: 0 18px;
  background: #eef0eb; border-bottom: 1.5px solid var(--black); border-radius: 15px 15px 0 0; font: 600 18px var(--sans); color: var(--dampad); }
.fonster-list b { text-align: center; font-weight: 600; }
.fonster-list .ljus { display: flex; gap: 9px; }
.fonster-list .ljus i { width: 14px; height: 14px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.fonster-list .ljus i:nth-child(1) { background: #e06a5c; }
.fonster-list .ljus i:nth-child(2) { background: #e9b949; }
.fonster-list .ljus i:nth-child(3) { background: #6dbb6b; }
.fonster.mork { background: #14201c; }
.fonster.mork .fonster-list { background: #1e2b26; color: #a8b8af; border-bottom-color: #0c1311; }

.mejl-huvud { padding: 24px 36px 18px; border-bottom: 1px solid var(--linje); display: grid; gap: 10px; }
.mejl-fran { display: flex; gap: 14px; align-items: center; font-size: 28px; }
.mejl-fran strong { font-weight: 600; }
.avatar, .tel-avatar { width: 48px; height: 48px; border-radius: 50%; background: #2b5797; color: #fff; display: inline-grid; place-items: center; font: 600 22px var(--sans); flex: none; }
.mejl-amne { font: 600 40px/1.2 var(--rubrik); letter-spacing: -.02em; }
.mejl-kropp { padding: 22px 36px 34px; font-size: 29px; line-height: 1.5; display: grid; gap: 8px; }
.mejl-knapp { justify-self: start; margin-top: 12px; background: #2b5797; color: #fff; padding: 16px 30px; border-radius: 10px; font: 600 27px var(--sans); }
.mejl-bilaga { justify-self: start; border: 1.5px solid var(--linje); border-radius: 12px; padding: 8px 16px 8px 8px; font-size: 22px; display: flex; gap: 10px; align-items: center; }
.mejl-bilaga svg { width: 46px; height: 46px; }
.lank-tips { position: absolute; left: 0; top: calc(100% + 14px); white-space: nowrap; background: var(--black); color: #fff; font: 500 20px var(--mono);
  padding: 9px 14px; border-radius: 8px; opacity: var(--p, 0); translate: 0 calc((1 - var(--p, 0)) * -8px); }

/* Markings: a frame drawn on around the thing (SVG, rounded), and a label that pops out. */
.markerbar { position: relative; }
.markram { position: absolute; pointer-events: none; overflow: visible; z-index: 2; max-width: none; display: block; }
.markram rect { stroke: var(--ockra); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
/* Labels: placement lives in `transform`; the entrance motion (rorelse.js) owns `translate` and `scale`. */
.etikett-m { position: absolute; right: -18px; top: 50%; transform: translate(100%, -50%); transform-origin: left center; z-index: 3;
  background: var(--ockra); color: #fff; font: 600 22px/1 var(--sans); padding: 10px 14px; white-space: nowrap; border-radius: 9px;
  border: 1.5px solid var(--black); box-shadow: 4px 4px 0 var(--black); opacity: 0; }

/* Device with thickness (former.js): the front face carries the screen; its layered shadow is the body. */
.enhet-plats { position: absolute; left: 50%; top: 50%; }
.enhet { position: relative; }
.enhet-front { position: absolute; left: 0; top: 0; box-sizing: border-box; background: #1b2420; transform-origin: 0 0;
  outline: 1.5px solid rgba(255,255,255,.06); outline-offset: -2px; }
.enhet-skarm { position: relative; width: 100%; height: 100%; overflow: hidden; background: #fbfbf8; display: flex; flex-direction: column; }
.enhet-ö { position: absolute; left: 50%; top: 12px; width: 84px; height: 24px; border-radius: 14px; background: #101614; translate: -50% 0; z-index: 3; }
.tel-huvud { padding: 46px 18px 12px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid #e3e6df; background: #f3f4f0; }
.tel-huvud b { font: 600 20px var(--sans); }
.tel-avatar { width: 38px; height: 38px; font-size: 17px; background: var(--jade); }
.tel-avatar.stor { width: 104px; height: 104px; font-size: 44px; position: relative; z-index: 1; }
.tel-fonster { position: relative; flex: 1; overflow: hidden; }

/* Chat flow (sms, chatt): bubbles pop from the tail corner; older ones slide up. */
.flode { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; }
.bubbla { max-width: 84%; padding: 11px 16px; border-radius: 20px 20px 20px 6px; font-size: 21px; line-height: 1.32; background: #e9ebe5;
  align-self: flex-start; transform-origin: 0 100%; opacity: 0; }
.bubbla.mig { align-self: flex-end; background: var(--mork); color: #fff; border-radius: 20px 20px 6px 20px; transform-origin: 100% 100%; }
.skriver { position: absolute; left: 16px; display: flex; gap: 6px; padding: 14px 16px; background: #e9ebe5; border-radius: 20px 20px 20px 6px; transform-origin: 0 100%; }
.skriver i { width: 10px; height: 10px; border-radius: 50%; background: #7d877f; display: block; }

.t-chatt .chatt-fonster { position: relative; height: 470px; overflow: hidden; }
.t-chatt .flode { gap: 22px; padding: 26px 34px; }
.t-chatt .bubbla.chatt-rad { max-width: none; align-self: stretch; background: transparent; padding: 0; border-radius: 0; display: grid; grid-template-columns: 56px 1fr; gap: 16px; }
.chatt-rad .ini { width: 56px; height: 56px; border-radius: 50%; background: var(--jade-ljus); color: var(--mork); display: grid; place-items: center; font: 600 22px var(--sans); }
.chatt-rad b { font: 600 22px var(--sans); display: block; margin-bottom: 6px; }
.chatt-rad p { margin: 0; font-size: 29px; line-height: 1.4; background: #f0f2ed; padding: 14px 20px; border-radius: 6px 18px 18px 18px; display: inline-block; }
.t-chatt .skriver { left: 106px; }

/* Call */
.samtal-text { text-align: center; color: var(--dampad); font-size: 19px; padding-top: 52px; }
.samtal-ring { position: relative; display: grid; place-items: center; margin: 26px auto 12px; width: 104px; height: 104px; }
.samtal-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--jade); opacity: 0; }
.samtal-namn { text-align: center; font: 600 31px/1.15 var(--rubrik); padding: 0 16px; }
.samtal-nummer { text-align: center; font: 500 23px var(--sans); color: var(--dampad); margin-top: 8px; }
.samtal-nummer span { display: inline-block; }
.samtal-knappar { margin-top: auto; display: flex; justify-content: space-around; padding: 0 20px 34px; }
.samtal-knappar span { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 13px var(--sans); }
.samtal-knappar .neka { background: #b5523e; } .samtal-knappar .svara { background: var(--jade); }
.samtal-knappar svg { width: 46%; height: 46%; }
.samtal-knappar .neka svg { rotate: 135deg; }
.samtal-text { display: grid; }
.samtal-lage, .samtal-tid { grid-area: 1 / 1; }
.samtal-tid { opacity: 0; font-variant-numeric: tabular-nums; }

/* The caller's lines: cards beside the phone, in the order they are said. */
.t-samtal.med-replik .enhet-plats { left: 36%; }
.repliker { position: absolute; left: calc(36% + 190px); top: 50%; translate: 0 -62%; width: 560px; display: flex; flex-direction: column;
  align-items: flex-start; gap: 18px; }
.replik { background: #fff; border: 1.5px solid var(--black); border-radius: 22px 22px 22px 6px; box-shadow: 6px 6px 0 var(--black);
  padding: 18px 24px; font: 500 30px/1.28 var(--sans); color: var(--black); transform-origin: 0 100%; opacity: 0; max-width: 100%; }

/* MFA prompts pile up, each popping in a little lower. */
.mfa-hog { position: relative; flex: 1; }
.mfa-kort { position: absolute; left: 14px; right: 14px; top: calc(18px + var(--i) * 40px); border: 1.5px solid var(--black); border-radius: 16px; padding: 14px 16px;
  background: #fff; display: grid; gap: 4px; box-shadow: 4px 4px 0 var(--black); opacity: 0; transform-origin: 50% 0; }
.mfa-kort b { font: 600 20px var(--sans); }
.mfa-kort small { font-size: 16px; color: var(--dampad); }
.mfa-knappar { display: flex; gap: 8px; margin-top: 8px; }
.mfa-knappar span { flex: 1; text-align: center; padding: 7px; border-radius: 9px; font: 600 16px var(--sans); border: 1px solid var(--linje); background: #f6f7f3; }
.mfa-knappar span:last-child { background: var(--mork); color: #fff; border-color: var(--mork); }

/* foremal */
.t-foremal { display: grid; place-items: center; }
.foremal-wrap { display: grid; justify-items: center; gap: 14px; }
.foremal-yta { position: relative; width: 400px; height: 400px; display: grid; place-items: center; }
.foremal-bild { width: 340px; height: 340px; transform-origin: 50% 60%; }
.foremal-bild svg { width: 100%; height: 100%; }
.ringar { position: absolute; inset: 0; overflow: visible; }
.ringar .puls { fill: none; stroke: var(--ockra); stroke-width: 3; }
.foremal-yta .etikett-m { right: -6px; top: 22%; }
.foremal-etikett { font: 600 34px/1.2 var(--rubrik); letter-spacing: -.02em; text-align: center; max-width: 900px; }

/* lista, fragor: numbers pop, a line is drawn under each row */
.t-lista { width: 1180px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
.t-lista h3 { font: 600 34px/1.15 var(--rubrik); color: var(--jade-text); margin-bottom: 18px; }
.lista-rad { position: relative; display: grid; grid-template-columns: 96px 1fr; align-items: center; padding: 20px 0; opacity: 0; }
.lista-rad .nr { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: var(--mork); color: #fff; font: 600 30px/1 var(--rubrik); }
.lista-rad .tx { font: 600 50px/1.12 var(--rubrik); letter-spacing: -.025em; }
.lista-ikon { width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 1.5px solid var(--black); box-shadow: 4px 4px 0 var(--black);
  display: grid; place-items: center; }
.lista-ikon svg { width: 52px; height: 52px; }
.understruken { position: absolute; left: 96px; right: 0; bottom: 0; width: calc(100% - 96px); height: 10px; overflow: visible; }
.understruken path { fill: none; stroke: var(--black); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.t-fragor .lista-rad .tx { font-size: 40px; }
.t-fragor .lista-rad .nr { background: var(--ockra); }

/* jamforelse */
.t-jamforelse { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; padding: 10px 140px 0; align-content: center; }
.jf-kol { background: #fff; border: 1.5px solid var(--black); border-radius: 18px; box-shadow: 8px 8px 0 var(--black); padding: 30px 34px; display: grid; gap: 14px; align-content: start; opacity: 0; }
.jf-kol h3 { font: 600 46px/1.05 var(--rubrik); letter-spacing: -.02em; }
.jf-kol.hoger { background: var(--primar-ton); }
.jf-kol.hoger h3 { color: var(--jade-text); }
.jf-kol li { font-size: 33px; line-height: 1.28; list-style: none; }
.jf-kol ul { margin: 0; padding: 0; display: grid; gap: 12px; }

/* tidslinje */
.t-tidslinje { padding: 150px 140px 0; }
.tl-linje { position: relative; height: 4px; background: var(--linje); margin: 0 30px; border-radius: 2px; }
.tl-fyll { position: absolute; left: 0; top: 0; height: 4px; background: var(--jade); width: calc(var(--p, 0) * 100%); border-radius: 2px; }
.tl-punkter { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: -24px; }
.tl-punkt { display: grid; justify-items: center; text-align: center; gap: 14px; opacity: 0; }
.tl-punkt i { width: 44px; height: 44px; border-radius: 50%; background: #fff; border: 4px solid var(--jade); display: block; }
.tl-punkt b { font: 600 66px/1 var(--rubrik); letter-spacing: -.03em; }
.tl-punkt span { font-size: 31px; line-height: 1.28; max-width: 380px; color: var(--black); }

/* kod */
.kod-yta { color: #d9e3dc; font: 400 28px/1.6 var(--mono); padding: 24px 0 30px; counter-reset: rad; border-radius: 0 0 15px 15px; }
.kod-rad { padding: 0 34px 0 90px; position: relative; white-space: pre; }
.kod-rad::before { counter-increment: rad; content: counter(rad); position: absolute; left: 24px; width: 44px; text-align: right; color: #5d7067; }
.kod-yta .etikett-m { right: 30px; transform: translate(0, -50%); }

/* panel (HMI) */
.panel-yta { background: #d9dcd6; padding: 24px; display: grid; gap: 10px; font-family: var(--sans); border-radius: 0 0 15px 15px; }
.panel-rad { display: grid; grid-template-columns: 1fr 220px 180px; align-items: center; background: #eef0ec; border: 1px solid #b8bdb5; border-radius: 10px; padding: 16px 22px; font-size: 27px; }
.panel-rad .varde { font: 600 30px var(--mono); text-align: right; }
.panel-rad .st { justify-self: end; font: 600 18px var(--sans); letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 6px; background: var(--primar-ljus); color: var(--primar-text); }
.panel-rad .st.avvikelse { background: var(--ockra); color: #fff; }
.panel-rad .etikett-m { right: 14px; transform: translate(0, -50%); }

/* citat: roman, not italic serif */
.t-citat { display: grid; place-items: center; padding: 0 180px; text-align: center; }
.t-citat blockquote { margin: 0; font: 600 64px/1.15 var(--rubrik); letter-spacing: -.025em; }
.t-citat blockquote::before { content: "”"; display: block; font: 600 120px/0.6 var(--rubrik); color: var(--jade); }
.t-citat cite { display: block; margin-top: 26px; font: 500 26px var(--sans); font-style: normal; color: var(--dampad); }

/* kedja: steps in a row; a tick on a passed step, pulse rings on the barrier, a dimmed step behind it */
.t-kedja { overflow: visible; }
.kedja-yta { position: absolute; inset: 0; width: 1600px; height: 600px; overflow: visible; }
.kedja-yta .puls { fill: none; stroke: var(--ockra); stroke-width: 3; }
.koppling.stangd { stroke: var(--dampad); stroke-dasharray: 10 12; }
.kedja-steg { --ikon: 176px; position: absolute; translate: -50% calc(var(--ikon) / -2); transform-origin: 50% calc(var(--ikon) / 2); display: grid; justify-items: center; gap: 10px; text-align: center; opacity: 0; }
.kedja-steg .rund-ikon { position: relative; width: var(--ikon); height: var(--ikon); border-radius: 50%; background: #fff; border: 1.5px solid var(--black);
  box-shadow: 6px 6px 0 var(--black); display: grid; place-items: center; }
.kedja-steg .rund-ikon > svg { width: 112px; height: 112px; }
.kedja-steg b { font: 600 34px var(--rubrik); max-width: 340px; line-height: 1.15; }
.kedja-steg small { font: 500 25px var(--sans); color: var(--dampad); }
.kedja-steg.sparr .rund-ikon { background: var(--accent-yta); border-color: var(--ockra); box-shadow: 6px 6px 0 var(--ockra); }
.kedja-steg.sparr small { color: var(--ockra); font-weight: 600; }
.kedja-bock { position: absolute; right: -6px; top: -6px; width: 52px; height: 52px; border-radius: 50%; background: var(--jade); color: #fff;
  border: 1.5px solid var(--black); display: grid; place-items: center; scale: 0; }
.kedja-bock svg { width: 30px; height: 30px; }

/* spridning: a source, Bézier connectors drawn on, nodes popping in, a counter */
.t-spridning { overflow: visible; }
.spridning-yta { position: absolute; inset: 0; width: 1600px; height: 600px; overflow: visible; }
.koppling { stroke: var(--ockra); stroke-width: 4; stroke-linecap: round; }
.spr-kalla, .spr-nod { position: absolute; translate: -50% -50%; display: grid; justify-items: center; gap: 8px; text-align: center; }
.spr-kalla .rund-ikon { width: 180px; height: 180px; border-radius: 50%; background: #fff; border: 1.5px solid var(--black); box-shadow: 8px 8px 0 var(--black); display: grid; place-items: center; }
.spr-kalla .rund-ikon svg { width: 120px; height: 120px; }
.spr-kalla b { font: 600 28px var(--rubrik); }
.spr-nod { opacity: 0; }
.spr-nod .rund-ikon { width: 110px; height: 110px; border-radius: 50%; background: #fff; border: 1.5px solid var(--black); box-shadow: 5px 5px 0 var(--black); display: grid; place-items: center; }
.spr-nod .rund-ikon svg { width: 72px; height: 72px; }
.spr-nod b { font: 600 22px var(--sans); white-space: nowrap; }
.spr-nod small { font: 500 18px var(--sans); color: var(--ockra); }
.spr-raknare { position: absolute; right: 70px; bottom: 10px; display: flex; align-items: baseline; gap: 12px; }
.spr-raknare b { font: 600 96px/1 var(--rubrik); color: var(--ockra); display: inline-block; transform-origin: 50% 80%; }
.spr-raknare span { font: 600 28px var(--sans); }

/* losenord: typed out with a cursor, rules tick as they are met */
.t-losenord { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 44px; padding: 20px 140px 0; align-content: center; }
.lo-kol { display: grid; gap: 16px; align-content: start; opacity: 0; }
.lo-etikett { font: 600 28px var(--sans); color: var(--dampad); }
.lo-falt { min-height: 96px; background: #fff; border: 1.5px solid var(--black); border-radius: 14px; box-shadow: 6px 6px 0 var(--black); padding: 20px 24px; display: flex; align-items: center; font: 600 40px var(--mono); }
.lo-markor { width: 3px; height: 44px; background: var(--black); margin-left: 4px; display: inline-block; }
.lo-regler { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.lo-regler li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: center; font-size: 27px; color: var(--dampad); }
.lo-regler li.ok { color: var(--black); }
.lo-regler svg { width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--linje); overflow: visible; }
.lo-regler li.ok svg { border-color: var(--jade); background: var(--primar-ton); }
.bock { fill: none; stroke: var(--jade); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* question, feedback, principle: part of the stage so group sessions see the same thing */
.lager { position: absolute; inset: 0; background: var(--scen-bg, var(--vit)); z-index: 5; padding: 120px 140px 70px; display: flex; flex-direction: column; gap: 30px; }
.lager[hidden] { display: none; }
.lager .kick { font: 600 26px/1.2 var(--sans); color: var(--jade-text); }
.fraga-text:focus { outline: none; }
.fraga-text { font: 600 46px/1.18 var(--rubrik); letter-spacing: -.02em; max-width: 1240px; }
.svarslista { display: grid; gap: 16px; }
.svar-knapp { all: unset; cursor: var(--pekare-aktiv); display: grid; grid-template-columns: 64px 1fr; gap: 18px; align-items: center; border: 1.5px solid var(--black);
  border-radius: 14px; padding: 20px 26px; font: 500 32px/1.3 var(--sans); background: #fff; box-shadow: 5px 5px 0 var(--black); }
.svar-knapp:hover { translate: -2px -2px; box-shadow: 7px 7px 0 var(--black); }
.svar-knapp:focus-visible { outline: 4px solid var(--ockra); outline-offset: 4px; }
.svar-knapp .bokstav { width: 56px; height: 56px; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; font: 600 26px var(--sans); }
.svar-knapp.ratt { background: var(--primar-ton); }
.svar-knapp.fel.valt { background: var(--accent-yta); }
.svar-knapp[disabled] { cursor: var(--pekare); translate: none; }
/* Group session: how the room voted, as a bar behind each option and a count at its end. */
.svar-stapel, .svar-antal { display: none; }
.svar-knapp.med-fordelning { grid-template-columns: 64px 1fr auto; position: relative; isolation: isolate; overflow: hidden; }
.med-fordelning .svar-stapel { display: block; position: absolute; inset: 0 auto 0 0; z-index: -1; width: calc(var(--andel, 0) * 100%); background: var(--jade-ljus); }
.med-fordelning .svar-antal { display: block; font: 600 40px/1 var(--sans); font-variant-numeric: tabular-nums; min-width: 1.4em; text-align: right; }
.aterkoppling-antal { white-space: nowrap; font-weight: 600; color: var(--dampad); }
.aterkoppling { font-size: 32px; line-height: 1.4; max-width: 1240px; background: var(--primar-ton); padding: 18px 24px; border-radius: 14px; }
.aterkoppling.fel { background: var(--accent-yta); }
.lager-knappar { display: flex; gap: 16px; margin-top: auto; }
.lager-knappar button { all: unset; cursor: var(--pekare-aktiv); padding: 18px 30px; font: 600 26px var(--sans); background: var(--mork); color: #fff; border-radius: 12px; border: 1.5px solid var(--black); box-shadow: 5px 5px 0 var(--black); }
.lager-knappar button.ljus { background: #fff; color: var(--mork); }
.lager-knappar button:focus-visible { outline: 4px solid var(--ockra); outline-offset: 4px; }
.princip-text { font: 600 92px/1.04 var(--rubrik); letter-spacing: -.035em; max-width: 1300px; margin-top: 40px; }
.princip-marke { position: absolute; right: 140px; bottom: 90px; width: 150px; color: var(--mork); opacity: .9; }
.klar-rad { font-size: 30px; color: var(--dampad); max-width: 1100px; }

/* Poster before play: a title card on the stage (scaled with it), one round play button. */
.affisch { position: absolute; inset: 0; z-index: 6; background: var(--scen-bg); display: grid; align-content: center; justify-items: start;
  padding: 0 150px; gap: 18px; cursor: var(--pekare-aktiv); }
.affisch[hidden] { display: none; }
.aff-kick { font: 500 26px/1.2 var(--sans); color: var(--jade-text); }
.aff-titel { font: 600 112px/1.0 var(--rubrik); letter-spacing: -.04em; max-width: 1100px; text-wrap: balance; }
.aff-tid { font: 500 26px/1 var(--sans); color: var(--dampad); font-variant-numeric: tabular-nums; }
.aff-spela { position: absolute; right: 150px; top: 50%; translate: 0 -50%; width: 168px; height: 168px; border-radius: 50%;
  background: var(--mork); color: #fff; display: grid; place-items: center; border: 2px solid var(--black); box-shadow: 8px 8px 0 var(--black); }
.aff-spela svg { width: 72px; height: 72px; translate: 6px 0; }
.affisch:hover .aff-spela { translate: -3px calc(-50% - 3px); box-shadow: 11px 11px 0 var(--black); }
.aff-marke { position: absolute; left: 150px; bottom: 90px; width: 64px; color: var(--mork); }
.scen-kvadrat .affisch { padding: 0 80px; }
.scen-kvadrat .aff-titel { font-size: 92px; }
.scen-kvadrat .aff-spela { right: 80px; top: auto; bottom: 120px; translate: none; }

/* Controls on the film (not scaled): a quiet bar at the bottom, hidden while playing until the pointer moves. */
.ov { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 8; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px; border-radius: 12px; background: color-mix(in srgb, var(--black) 84%, transparent); color: var(--vit); backdrop-filter: blur(6px);
  transition: opacity .25s ease, translate .25s ease; }
.vy.ov-dold .ov { opacity: 0; translate: 0 8px; pointer-events: none; }
.vy.ov-dold { cursor: none; }
.ov-knapp { all: unset; cursor: var(--pekare-aktiv); width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; flex: none; color: inherit; }
.ov-knapp svg { width: 20px; height: 20px; }
.ov-knapp:hover { background: rgba(255,255,255,.12); }
.ov-knapp:focus-visible { outline: 2px solid var(--ockra); outline-offset: 1px; }
.ov-text { width: auto; padding: 0 9px; font: 600 12px/1 var(--sans); letter-spacing: .08em; }
.ov-tid { font: 500 12px/1 var(--sans); font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--vit) 78%, var(--black)); flex: none; }
/* The timeline: a 14 px track (owner 2026-11-04: 3-4 times the browser's own), filled up to --fyll (set by the player). */
.ov-linje { -webkit-appearance: none; appearance: none; flex: 1; min-width: 60px; height: 28px; margin: 0; background: transparent; cursor: var(--pekare-aktiv); --fyll: 0; }
.ov-linje::-webkit-slider-runnable-track { height: 14px; border-radius: 7px;
  background: linear-gradient(to right, var(--primar-ljus) calc(var(--fyll) * 100%), color-mix(in srgb, var(--vit) 26%, transparent) 0); }
.ov-linje::-moz-range-track { height: 14px; border-radius: 7px;
  background: linear-gradient(to right, var(--primar-ljus) calc(var(--fyll) * 100%), color-mix(in srgb, var(--vit) 26%, transparent) 0); }
.ov-linje::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -3px; border-radius: 50%; background: var(--vit); border: 2px solid var(--primar-ljus); }
.ov-linje::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--vit); border: 2px solid var(--primar-ljus); }
.ov-linje:focus-visible { outline: 2px solid var(--ockra); outline-offset: 2px; border-radius: 7px; }
.ov-val { position: relative; flex: none; }
.ov-meny { position: absolute; right: 0; bottom: calc(100% + 12px); min-width: 180px; display: grid; padding: 6px; z-index: 9;
  background: var(--vit); color: var(--black); border: 1.5px solid var(--black); border-radius: 12px; box-shadow: 5px 5px 0 var(--black); }
.ov-meny[hidden] { display: none; }
.ov-meny button { all: unset; cursor: var(--pekare-aktiv); padding: 10px 12px; border-radius: 8px; font: 500 14px/1.2 var(--sans); }
.ov-meny button:hover, .ov-meny button:focus-visible { background: var(--papper-2); }
.ov-meny button[aria-current="true"] { font-weight: 700; }
.ov-meny button[aria-current="true"] { display: flex; justify-content: space-between; gap: 12px; }
.ov-meny button[aria-current="true"]::after { content: ""; width: 14px; height: 14px; align-self: center; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.5l5 5L20 6.5%27 fill=%27none%27 stroke=%27black%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat; }
[data-fas="start"] .ov { display: none; }
[data-fas="fraga"] .ov, [data-fas="svar"] .ov, [data-fas="princip"] .ov { display: none; }
[data-fas="start"] .textning { visibility: hidden; }
.transkript { background: var(--vit); border: 1.5px solid var(--black); border-radius: 12px; padding: 20px 24px; }
.transkript p { margin: 0 0 10px; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) { .bild, .fram { transform: none !important; } }

/* Narrow screens: captions and the question live under the stage at readable sizes. */
.textning.ute { position: static; height: auto; min-height: 3.9em; padding: 4px 0; font-size: 19px; line-height: 1.3; }
.vy.textning-av ~ .textning.ute { display: none; }
.lager.ute { position: static; padding: 18px 0 8px; gap: 14px; background: transparent; }
.lager.ute .kick, .textning.ute .o.nu { color: var(--jade-text); }
.lager.ute .kick { font-size: 15px; }
.lager.ute .fraga-text { font-size: 21px; }
.lager.ute .fraga-text[style] { font-size: 18px !important; }
.lager.ute .svar-knapp { grid-template-columns: 34px 1fr; gap: 12px; padding: 12px 14px; font-size: 17px; box-shadow: 3px 3px 0 var(--black); }
.lager.ute .svar-knapp .bokstav { width: 30px; height: 30px; font-size: 14px; }
.lager.ute .aterkoppling { font-size: 17px; padding: 12px 14px; }
.lager.ute .princip-text { font-size: 34px; margin-top: 6px; }
.lager.ute .klar-rad { font-size: 16px; }
.lager.ute .princip-marke { display: none; }
.lager.ute .lager-knappar button { font-size: 16px; padding: 12px 18px; box-shadow: 3px 3px 0 var(--black); }

/* Square format (1080 × 1080) for social media. Same scenes, tighter measures. */
.vy-kvadrat { aspect-ratio: 1 / 1; max-width: 640px; margin: 0 auto; }
.scen-kvadrat { width: 1080px; height: 1080px; }
.scen-kvadrat .scen-topp { left: 54px; right: 54px; top: 46px; }
.scen-kvadrat .bild { top: 130px; height: 680px; }
.scen-kvadrat .textning { left: 64px; right: 64px; top: 850px; height: 170px; font-size: 50px; }
.scen-kvadrat .t-rubrik { padding: 0 80px; }
.scen-kvadrat .t-rubrik .rad { font-size: 96px; }
.scen-kvadrat .fonster { width: 940px; top: 60px; }
.scen-kvadrat .mejl-fran { font-size: 24px; flex-wrap: wrap; gap: 6px 12px; }
.scen-kvadrat .t-lista { width: 900px; }
.scen-kvadrat .lista-rad .tx { font-size: 56px; }
.scen-kvadrat .t-tidslinje { padding: 190px 60px 0; }
.scen-kvadrat .tl-punkt b { font-size: 56px; }
.scen-kvadrat .tl-punkt span { font-size: 28px; max-width: 300px; }
.scen-kvadrat .t-jamforelse { padding: 10px 70px 0; gap: 30px; }
.scen-kvadrat .jf-kol li { font-size: 28px; }
.scen-kvadrat .t-citat { padding: 0 80px; }
.scen-kvadrat .t-citat blockquote { font-size: 56px; }
.scen-kvadrat .etikett-m { right: 0; top: -14px; transform: translate(0, -100%); transform-origin: right bottom; }
.tel-avatar svg { width: 62%; height: 62%; }
/* On a phone screen a label sits under the marked thing; the screen edge would cut it at the side. */
.enhet-skarm .etikett-m { right: auto; left: 50%; top: 100%; transform: translate(-50%, 12px); transform-origin: 50% 0; font-size: 17px; padding: 8px 12px; }
.lo-matare { display: grid; gap: 8px; font-size: 24px; color: var(--dampad); }
.lo-matare b { font: 600 30px var(--rubrik); color: var(--black); }
.lo-matare sup { font-size: .6em; }
.lo-stapel { height: 12px; border-radius: 6px; background: #e3e6df; overflow: hidden; }
.lo-stapel i { display: block; height: 100%; background: var(--jade); border-radius: 6px; }
.spr-nod b { max-width: 260px; white-space: normal; line-height: 1.15; }
.spr-nod.betona .rund-ikon { width: 132px; height: 132px; background: var(--accent-yta); border-color: var(--ockra); box-shadow: 6px 6px 0 var(--ockra); }
.spr-nod.betona b { color: var(--ockra); }
.spr-raknare { left: 200px; right: auto; bottom: 20px; }
.samtal-namn .markerbar .etikett-m { top: calc(100% + 46px); }
.samtal-ring, .tel-avatar.stor { width: 84px; height: 84px; }
.samtal-ring { margin: 18px auto 10px; }
.tel-avatar.stor { font-size: 36px; }
.samtal-namn .markerbar .etikett-m { top: calc(100% + 36px); }

/* Slim phone (former.js ENHET.telefon): screen content at phone proportions. */
.enhet-telefon .tel-huvud { padding: 40px 12px 10px; gap: 9px; }
.enhet-telefon .tel-huvud b { font-size: 16px; }
.enhet-telefon .tel-avatar { width: 30px; height: 30px; font-size: 14px; }
.enhet-telefon .flode { gap: 9px; padding: 14px 11px; }
.enhet-telefon .bubbla { font-size: 16.5px; padding: 9px 13px; border-radius: 17px 17px 17px 5px; max-width: 88%; }
.enhet-telefon .bubbla.mig { border-radius: 17px 17px 5px 17px; }
.enhet-telefon .skriver { left: 11px; padding: 11px 13px; }
.enhet-telefon .skriver i { width: 8px; height: 8px; }
.enhet-telefon .enhet-ö { width: 70px; height: 20px; top: 10px; }
.enhet-telefon .samtal-text { font-size: 15px; padding-top: 44px; }
.enhet-telefon .samtal-ring, .enhet-telefon .tel-avatar.stor { width: 70px; height: 70px; }
.enhet-telefon .tel-avatar.stor { font-size: 30px; }
.enhet-telefon .samtal-namn { font-size: 25px; }
.enhet-telefon .samtal-nummer { font-size: 18px; }
.enhet-telefon .samtal-knappar span { width: 58px; height: 58px; font-size: 11px; }
.enhet-telefon .mfa-kort { left: 10px; right: 10px; padding: 11px 12px; top: calc(14px + var(--i) * 34px); }
.enhet-telefon .mfa-kort b { font-size: 16px; }
.enhet-telefon .mfa-kort small { font-size: 13px; }
.enhet-telefon .mfa-knappar span { font-size: 13px; padding: 6px; }
.enhet-telefon .etikett-m { font-size: 14px; padding: 6px 10px; }

/* Vector device (former.js): body behind, screen HTML in the middle, bezel ring on top. */
.enhet-bak, .enhet-ram { position: absolute; left: 0; top: 0; overflow: visible; max-width: none; display: block; }
.enhet-ram { z-index: 2; pointer-events: none; }
.enhet-front { background: transparent; box-shadow: none; outline: none; z-index: 1; }
.enhet-skarm { background: #fbfbf8; }
.enhet-ö { display: none; }

/* Narrow screens: compact controls on the film; menus open as a small popover above their button (few items, so it
   fits inside the film). */
.vy.smal .ov { left: 6px; right: 6px; bottom: 6px; gap: 4px; padding: 2px 4px; border-radius: 9px; }
.vy.smal .ov-knapp { width: 28px; height: 28px; }
.vy.smal .ov-knapp svg { width: 16px; height: 16px; }
.vy.smal .ov-tid { font-size: 10px; }
.vy.smal .ov-text { font-size: 10px; padding: 0 6px; }
.vy.smal .ov-meny { bottom: calc(100% + 8px); min-width: 150px; max-width: calc(100vw - 32px); padding: 4px; border-radius: 10px; box-shadow: 4px 4px 0 var(--black); }
.vy.smal .ov-meny button { padding: 10px 12px; font-size: 15px; }

/* Filmen i den ritade stilen (assets/js/film/): en SVG per bild, pekaren i ett eget lager över bilderna. */
.f-bild { overflow: visible; }
.f-svg { display: block; overflow: visible; }
.f-text { font-family: var(--sans); }
.f-rubrik { letter-spacing: -0.02em; }
.f-mono { font-family: var(--mono); }
.film-pekare { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 3; overflow: visible; }
/* Per kund (film/visning.js): utan märke, utan rubrikrad. */
.utan-marke .scen-marke, .utan-marke .aff-marke { display: none; }
.utan-rubrikrad .scen-kicker, .utan-rubrikrad .aff-kick { visibility: hidden; }
/* Tavlan bakom bilderna (film/overgang.js): papper med svag, stor fiberstruktur som följer kamerans svep och lyft. */
.film-tavla { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .014' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .52 0 0 0 0 .44 0 0 0 .22 -.04'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"); }
.f-bild { will-change: transform, opacity; }

/* Full screen (assets/js/spelare.js): the player fills the screen on black, the stage as large as its shape allows. */
.spelare:fullscreen { background: #000; display: grid; align-content: center; justify-items: center; gap: 0; padding: 0; overflow: auto; }
.spelare:fullscreen .vy { width: min(100vw, calc(100vh * 16 / 9)); }
.spelare:fullscreen .vy-kvadrat { width: min(100vw, 100vh); max-width: none; }
.spelare:fullscreen .textning.ute, .spelare:fullscreen .lager.ute { width: min(100vw, calc(100vh * 16 / 9)); }
.spelare:fullscreen .transkript { display: none; }

/* End screen on the last frame (owner 2026-11-06): the frame dims and one button plays the film again. Outside the
   scaled stage, so the button is drawn at its own size with sharp edges (scaled, its border showed a light seam). It
   stands while no question layer covers the stage: under a narrow stage the question is below it, and after Klar on a
   page with no next step the layer is gone. */
.slutbild { position: absolute; inset: 0; z-index: 7; display: none; place-items: center;
  background: color-mix(in srgb, var(--scen-bg, var(--papper)) 72%, transparent); }
.vy[data-slut]:not(:has(.scen > .lager:not([hidden]))) .slutbild { display: grid; }
.slut-igen { display: inline-flex; align-items: center; gap: 10px; padding: 14px 24px 14px 18px; border-radius: 999px;
  background: var(--mork); color: var(--papper); border: 0; box-shadow: 4px 4px 0 var(--black);
  font: 600 16px/1 var(--sans); cursor: var(--pekare-aktiv); transition: translate .15s ease, box-shadow .15s ease; }
.slut-igen svg { width: 20px; height: 20px; }
.slut-igen:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--black); }
.slut-igen:active { translate: 2px 2px; box-shadow: 2px 2px 0 var(--black); cursor: var(--pekare-tryck); }
.slut-igen:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .slut-igen { transition: none; } }