/* sida.css: grunden för alla sidor. Hemsidan v2, med förslag C (Huvudrollen) som grund (docs/beslut/2026-10-01_hemsidan_v2.md,
   docs/ux/2026-10-01_v2/riktning-c.md). Tokens, färgernas roller och fälten, menyn och ordbilden, knapparna, textfälten,
   felsidan och komponenterna som flera sidor delar: spelknappen, spelaren, salongen och eftertexterna. De står här en
   gång, och sidorna flyttar dem bara. Sidorna lägger till landning.css, wizard.css eller mina.css. webb/stil.css är
   adminpanelens och rörs inte. Ett fält per avsnitt, bytt med hårda klipp. Två typsnitt från vår egen server, två
   rörelsekurvor och tre tider. Inga externa resurser, inga kakor. Alla texter är UTKAST. */

/* ---------------------------------------------------------------- typsnitten (OFL, @fontsource-variable 5.3.0) */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(/node_modules/@fontsource-variable/bricolage-grotesque/files/bricolage-grotesque-latin-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-display: swap; font-weight: 200 800; font-stretch: 75% 100%;
  src: url(/node_modules/@fontsource-variable/bricolage-grotesque/files/bricolage-grotesque-latin-ext-standard-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/node_modules/@fontsource-variable/schibsted-grotesk/files/schibsted-grotesk-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Schibsted Grotesk'; font-style: normal; font-display: swap; font-weight: 400 900;
  src: url(/node_modules/@fontsource-variable/schibsted-grotesk/files/schibsted-grotesk-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------------------------------------------------------------- tokens */
:root {
  /* Ordbilden: namnet står bara här (KR08), en rad att byta. Omdi är produktnamnet (VD 2026-10-02, docs/beslut/2026-10-02_namnet_omdi.md).
     Menyn (konto.js), landningssidan och felsidan har en tom a.logga.ordbild som får texten härifrån. UTKAST */
  --ordbild: "Omdi";

  --papper: #F4ECDB; --ljus: #FFFAF0; --blak: #1B1714; --grafit: #5A5048; --dimljus: #C9BFAD;
  --tomat: #F05A2C; --solgul: #F5C244; --granskog: #163F30; --falurott: #812B1E;

  /* FÄRGERNAS ROLLER, samma på alla sidor (Kreativ chef, hemsidan v2 steg 3). Ett fält väljs efter vad som händer där:
       tomat    varumärket och handlingen: startsidans hjälte och pris, rubrikfältet i Mina filmer och på felsidan. I
                wizarden bara som dekor, linjen under stegets rubrik. Text står i blak på tomat (5,26:1), aldrig i tomat
                på papper (2,88:1)
       solgult  väntan: när vi arbetar (wizarden), en film som väntar på att klippas eller står i kön
       papper   besluten: stegen, beställningen, listan med dina filmer och kontot
       blak     bion: klippningen, premiären, salongen där filmen spelas och filmsidan
     Spelknappens skiva och spelarens Spela/Pausa har en egen token, så att de byts på ett ställe och samtidigt överallt */
  --spela: var(--solgul);

  --rubrik: 'Bricolage Grotesque', 'Arial Narrow', Arial, sans-serif;
  --brod: 'Schibsted Grotesk', Arial, sans-serif;
  --t-1: 14px; --t-2: 16px; --t-3: 18px; --t-4: 24px; --t-5: 32px; --t-6: 48px;
  --t-7: clamp(40px, 24px + 5vw, 96px);
  --t-8: clamp(56px, 30px + 8.5vw, 152px);

  --ut: cubic-bezier(.16, 1, .3, 1);
  --fjader: linear(0, 0.097 5%, 0.299 10%, 0.516 15%, 0.702 20%, 0.842 25%, 0.936 30%, 0.999 36%, 1.025 42%, 1.029 50%, 1.017 60%, 1.006 70%, 1 85%, 1);
  --snabb: 150ms; --mellan: 300ms; --lang: 600ms;

  --sida: 64px;
  /* papperet: bara det fina kornet, SVG-brus i stället för affischpapper (Google nekade bilden). Ingen form större än
     några pixlar upprepas, och det mörkar som mest några procent, bara bakgrunden */
  --korn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .11 -.05'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23a)'/%3E%3C/svg%3E");
  /* wizardens vänsterkant och stegkolumn från 1 200 px: samma kant i alla steg, i beställningen, kontrollpunkten och Mina filmer */
  --marg: 0px;

  --falt: var(--papper); --text: var(--blak); --text-2: var(--grafit); --ring: var(--blak); --knapp: var(--blak); --knapp-text: var(--papper); --kant: var(--blak);
}
@media (max-width: 1100px) { :root { --sida: 32px; } }
@media (min-width: 1200px) { :root { --marg: clamp(200px, 20.5vw, 296px); } }
@media (max-width: 700px) { :root { --sida: 16px; --t-6: 32px; } }

/* ---------------------------------------------------------------- fälten. Varje fält sätter sina färger; text bara i blak eller papper.
   Bara klasserna: wizarden väljer sitt fält per vy i wizard.css (en färgregel, inte en färg per steg), och felsidan
   och Mina filmer står i tomat enligt rollerna ovan */
.f-papper, body.mina { --falt: var(--papper); --text: var(--blak); --text-2: var(--grafit); --ring: var(--blak); --knapp: var(--blak); --knapp-text: var(--papper); --kant: var(--blak); --markor: var(--granskog); --varn: var(--falurott); }
.f-ljus { --falt: var(--ljus); --text: var(--blak); --text-2: var(--grafit); --ring: var(--blak); --knapp: var(--blak); --knapp-text: var(--papper); --kant: var(--blak); }
.f-tomat, body.felsida { --falt: var(--tomat); --text: var(--blak); --text-2: var(--blak); --ring: var(--blak); --knapp: var(--blak); --knapp-text: var(--papper); --kant: var(--blak); --markor: var(--blak); --varn: var(--blak); }
.f-solgul { --falt: var(--solgul); --text: var(--blak); --text-2: var(--blak); --ring: var(--blak); --knapp: var(--blak); --knapp-text: var(--papper); --kant: var(--blak); --markor: var(--granskog); --varn: var(--falurott); }
.f-granskog { --falt: var(--granskog); --text: var(--papper); --text-2: var(--dimljus); --ring: var(--papper); --knapp: var(--papper); --knapp-text: var(--blak); --kant: var(--papper); --markor: var(--solgul); --varn: var(--tomat); }
.f-falurott { --falt: var(--falurott); --text: var(--papper); --text-2: var(--dimljus); --ring: var(--papper); --knapp: var(--papper); --knapp-text: var(--blak); --kant: var(--papper); }
.f-blak { --falt: var(--blak); --text: var(--papper); --text-2: var(--dimljus); --ring: var(--papper); --knapp: var(--papper); --knapp-text: var(--blak); --kant: var(--papper); --markor: var(--solgul); --varn: var(--tomat); }

.f-papper, .f-ljus, .f-tomat, .f-solgul, .f-granskog, .f-falurott, .f-blak { background-color: var(--falt); color: var(--text); position: relative; isolation: isolate; }
.f-papper::before, .f-ljus::before, .f-tomat::before, .f-solgul::before, .f-granskog::before, .f-falurott::before, .f-blak::before, body.sida::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: var(--korn); background-size: 256px 256px; }
.f-tomat::before { opacity: .8; }

/* ---------------------------------------------------------------- grunden */
[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--papper); }
body { margin: 0; min-height: 100vh; background-color: var(--falt); color: var(--text); font: 400 var(--t-3)/1.55 var(--brod); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-synthesis: none; }
body.sida { position: relative; isolation: isolate; }
img, svg, video, canvas { display: block; max-width: 100%; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--rubrik); font-weight: 780; line-height: 1.1; text-wrap: balance; }
/* inga ensamma ord sist i stycket; rubrikerna bryts där texten har <br> vid punkten */
p, li, dd, figcaption, summary, .rubrik, .tips, .fynd { text-wrap: pretty; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; transition: text-decoration-thickness var(--snabb) var(--ut); }
a:hover { text-decoration-thickness: 4px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
:focus:not(:focus-visible) { outline: none; }
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--blak); color: var(--solgul); }
.dold-etikett { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; padding: 0; border: 0; }
.ram { width: min(1312px, 100% - 2 * var(--sida)); margin-inline: auto; }

/* UTKAST-raden: diskret, klistrar aldrig (KR07, AK05) */
.utkast { background: var(--blak); color: var(--solgul); font: 500 var(--t-1)/28px var(--brod); height: 28px; padding: 0 var(--sida); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 2; }
@media (max-width: 700px) { .utkast { line-height: 24px; height: 24px; font-size: 13px; } .utkast .bred { display: none; } }

/* ordbilden: genererat innehåll ur --ordbild, töjs vid hover och fokus */
.ordbild { display: inline-flex; align-items: center; min-height: 40px; min-width: 40px; color: var(--text); text-decoration: none; font: 800 var(--t-4)/1 var(--rubrik); font-stretch: 75%; letter-spacing: -.01em; transition: font-stretch var(--mellan) var(--ut); }
.ordbild::before { content: var(--ordbild); }
.ordbild:hover, .ordbild:focus-visible { font-stretch: 100%; }

/* menyn: ordbilden till vänster, kontot till höger (konto.js skriver den i wizarden och Mina filmer) */
.topp { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; flex-wrap: wrap; }
.kontomeny { display: flex; gap: 8px 20px; align-items: center; flex-wrap: wrap; justify-content: flex-end; font: 500 var(--t-2)/1.2 var(--brod); }
.kontomeny a { display: inline-flex; align-items: center; min-height: 40px; text-decoration-thickness: 2px; text-decoration-color: transparent; }
.kontomeny a:hover, .kontomeny a.aktiv { text-decoration-color: currentColor; }
.kontomeny span.dim { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
@media (max-width: 480px) { .kontomeny span.dim { display: none; } .topp { min-height: 56px; } }
.menylank { display: inline-flex; align-items: center; min-height: 40px; font: 600 var(--t-2)/1.2 var(--brod); }

/* ---------------------------------------------------------------- knapparna */
.knapp { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 24px; border: 2px solid var(--knapp); border-radius: 4px;
  background: var(--knapp); color: var(--knapp-text); font: 700 var(--t-3)/1.15 var(--rubrik); text-decoration: none; text-align: center; cursor: pointer; transition: transform var(--snabb) var(--fjader); -webkit-tap-highlight-color: transparent; }
.knapp:hover { text-decoration: none; }
.knapp:active:not(:disabled) { transform: scale(.97); }
.knapp.sek { background: transparent; color: var(--text); border-color: var(--text); }
/* låst: heldragen kant och skraffering, inte streckad (streckat betyder bara attrapp och släppyta) */
.knapp:disabled, .knapp[aria-disabled=true] { color: var(--text); border: 2px solid var(--text); cursor: not-allowed;
  background: repeating-linear-gradient(-45deg, transparent 0 7px, color-mix(in srgb, var(--text) 16%, transparent) 7px 9px); }
.knapp.fram::after, .knapp .pil { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; transition: transform var(--snabb) var(--fjader);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11 4.5 16.5 10 11 15.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M3 10h13M11 4.5 16.5 10 11 15.5' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.knapp.fram:not(:disabled):hover::after, .knapp.fram:focus-visible::after { transform: translateX(4px); }
.knapp.ned::after { content: ""; width: 20px; height: 20px; flex: none; background: currentColor; order: -1;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5v11M4.5 8.5 10 14l5.5-5.5M3 17.5h14' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5v11M4.5 8.5 10 14l5.5-5.5M3 17.5h14' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E") center / contain no-repeat; }
.knapp:disabled::after { display: none; }
.liten-knapp { min-height: 40px; padding: 0 16px; font-size: var(--t-2); }
@media (max-width: 700px) { .knapp { min-height: 52px; padding: 0 20px; } .liten-knapp { min-height: 40px; } }
.for-mobil { display: none !important; }
@media (hover: none) and (pointer: coarse) { .for-dator { display: none !important; } .for-mobil { display: revert !important; } }

/* tryckraden: samma läge och samma 14 px under varje bild (AK19) */
.tryckrad { margin-top: 8px; font: 500 var(--t-1)/1.35 var(--brod); color: var(--text); }
.tryckrad b { font-weight: 700; }

/* ---------------------------------------------------------------- töjningen: smal till bred, en gång per kapitel */
@keyframes toj { from { font-stretch: 75%; font-weight: 560; } }
.toj { font-stretch: 100%; font-weight: 800; }
.js .toj:not(.spelad) { font-stretch: 75%; font-weight: 560; }
.js .toj.spelad { animation: toj var(--lang) var(--ut) both; }
.js .toj.spelad.direkt { animation: none; }
@media (prefers-reduced-motion: reduce) { .js .toj:not(.spelad), .js .toj.spelad { font-stretch: 100%; font-weight: 800; animation: none; } }

/* ---------------------------------------------------------------- textfälten */
input[type=text], input[type=email], input[type=password], textarea { width: 100%; background: var(--ljus); color: var(--blak); border: 2px solid var(--kant); border-radius: 4px; padding: 14px 16px; font: 400 var(--t-3)/1.5 var(--brod); resize: vertical; }
input[type=text], input[type=email], input[type=password] { min-height: 56px; }
::placeholder { color: var(--grafit); opacity: 1; }
input[type=text]:focus-visible, input[type=email]:focus-visible, input[type=password]:focus-visible, textarea:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }
/* K01: lösenordet under e-posten, och textknapparna för att byta mellan att skapa ett konto och logga in */
#epostRad > input + label + input, .falt-rad-losen { margin-top: 12px; }
.konto-lage { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 8px 0 4px; }
.konto-lage .textknapp { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; cursor: pointer; font: 600 var(--t-2)/1.2 var(--brod); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.konto-lage .textknapp:hover { text-decoration-thickness: 4px; }
/* K01: rutan när fliken väntar på länken i e-posten, och beskedet i Mina filmer */
:is(#bekraftaRuta, #lankBesked) .knapp { margin-top: 4px; }
:is(#bekraftaRuta, #lankBesked) p { margin: 0; }
:is(#bekraftaRuta, #lankBesked) p + p { margin-top: 10px; }
.vantar-ruta .textknapp { display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; border: 0; background: none; color: inherit; cursor: pointer; font: 600 var(--t-2)/1.2 var(--brod); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.vantar-ruta .textknapp:hover { text-decoration-thickness: 4px; }
/* W05: raden om lanseringserbjudandet på landningssidan och i steg 1 */
.gratis-erbjudande { font: 700 var(--t-2)/1.4 var(--brod); }
/* W05: raden om gratisfilmen överst i sedeln */
.gratis-rad { margin: 0 0 12px; padding: 10px 14px; background: var(--solgul); color: var(--blak); font: 700 var(--t-2)/1.4 var(--brod); }
/* W04: valet av kontaktuppgifter på slutskylten */
.slutskylt-val { border: 0; padding: 0; margin: 28px 0 0; min-width: 0; }
.slutskylt-val legend { padding: 0; margin-bottom: 8px; }
.slutskylt-val .dim { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- det som flera sidor delar */
.dim { color: var(--text-2); }
.liten { font-size: var(--t-1); }
/* tipsen i sidans tryckspråk: samma fyrkantiga markör som kickern och fynden, ingen tonad ruta */
.tips { position: relative; margin: 0 0 16px; padding: 0 0 0 24px; border: 0; background: none; font: 400 var(--t-2)/1.5 var(--brod); color: var(--text); }
.tips::before { content: ""; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; background: var(--text); }
.nederst { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-top: 32px; }
.nederst.borjan { justify-content: flex-start; }

.attrapp-ruta { margin: 20px 0; padding: 14px 16px; border: 2px dashed var(--text); border-radius: 4px; font: 400 var(--t-1)/1.5 var(--brod); color: var(--text); }
.attrapp-ruta b { font-weight: 700; }
/* FP08: koden från brevet, sex siffror i ett fält med knappen bredvid. Fältet står överst i rutan, så att det syns ovanför
   telefonens tangentbord */
.kod-rad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin: 16px 0 4px; }
.kod-rad label { flex: 1 0 100%; font: 600 var(--t-2)/1.3 var(--brod); }
input[type=text].kod-falt { width: 10ch; flex: none; font: 600 var(--t-4)/1.2 var(--brod); letter-spacing: .2em; text-align: center; font-variant-numeric: tabular-nums; }
.kod-fel { min-height: 1.5em; margin: 4px 0; font-weight: 600; }

#koRuta, .vantar-ruta { margin: 0 0 24px; padding: 16px 20px; background: var(--solgul); color: var(--blak); font: 400 var(--t-2)/1.5 var(--brod); border-radius: 2px; }
.vantar-ruta strong, #koRuta strong { display: block; font: 780 var(--t-4)/1.2 var(--rubrik); margin-bottom: 4px; }
.vantar-ruta .dim, #koRuta .dim { color: var(--blak); }
.vantar-ruta .knapp { margin-top: 12px; --knapp: var(--blak); --knapp-text: var(--papper); }

/* wizarden: tomat som varumärkets enda dekor (rollerna ovan), en linje på 6 px under stegets rubrik i de steg där du
   fattar beslut på papper. Dekor, ingen text: tomat på papper är bara 2,88:1 */
body.wizard:is([data-vy=dator], [data-vy=annons], [data-vy=cv], [data-vy=brev], [data-vy=rost], [data-vy=bilder], [data-vy=konto], [data-vy=betala], [data-vy=utseende]) .vy > h1::after {
  content: ""; display: block; width: 56px; height: 6px; margin-top: 14px; background: var(--tomat); }

/* ================================================================ KOMPONENTERNA SOM SIDORNA DELAR
   En gång här. Sidorna flyttar dem (läge och storlek i sammanhanget), men ritar dem inte om */

/* ---------------------------------------------------------------- spelknappen: en skiva med en triangel och etiketten på en
   blak platta under, aldrig text direkt på bilden. Mitt i bilden som standard. Startsidans duk, kopiorna i Mina filmer
   och filmsidan använder den; premiären i wizarden har kvar sin egen .spela-upp tills den byts hit */
.spela { position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px; background: none; border: 0; cursor: pointer; color: var(--papper); font: 700 var(--t-2)/1 var(--rubrik); }
.skiva { position: relative; display: block; width: 72px; height: 72px; border-radius: 50%; background: var(--spela); transition: transform var(--snabb) var(--fjader); }
.skiva::after { content: ""; position: absolute; left: 29px; top: 23px; border-left: 22px solid var(--blak); border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.spela:hover .skiva, .spela:focus-visible .skiva { transform: scale(1.06); }
.spela:active .skiva { transform: scale(.97); }
.spela .etikett { display: block; background: var(--blak); color: var(--papper); padding: 6px 10px; border-radius: 2px; white-space: nowrap; }
.spela:focus-visible { outline: 3px solid var(--solgul); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 700px) {
  .skiva { width: 60px; height: 60px; }
  .skiva::after { left: 24px; top: 19px; border-left-width: 18px; border-top-width: 11px; border-bottom-width: 11px; }
}

/* ---------------------------------------------------------------- den egna spelaren (förslag A, webb/v2/gemensam.js, egenSpelare)
   .spelar-ram > .spelar-duk > video, och .spelarlist med [data-s=…]. Knappar i Bricolage, Spela/Pausa i --spela,
   förloppet som en linje, Undertext som en växel. Står på blak (bion) */
.spelar-ram, .spelar-duk { position: relative; }
.spelar-ram video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.spelar-ram[data-kopplad] video { cursor: pointer; }
.spelar-ram video::cue { font-family: var(--brod); }
/* fokus: utan webbläsarens kontroller är videon inte i tabbordningen. Med dem sitter ringen på hela spelaren (2.4.7) */
.spelar-ram video:focus-visible { outline: 3px solid var(--ring); outline-offset: 4px; }
.spelarlist { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; padding: 12px 0 0; color: var(--papper); }
.spelar-knapp { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 2px solid var(--papper); border-radius: 4px; background: transparent; color: var(--papper); font: 700 var(--t-2)/1 var(--rubrik); cursor: pointer; white-space: nowrap; transition: transform var(--snabb) var(--fjader); }
.spelar-knapp:active { transform: scale(.97); }
.spelar-knapp[aria-pressed=true] { background: var(--papper); color: var(--blak); }
.spelar-knapp.paus { min-width: 116px; justify-content: flex-start; background: var(--spela); border-color: var(--spela); color: var(--blak); }
.spelar-knapp.paus::before { content: ""; width: 14px; height: 16px; flex: none; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.spelar-knapp.paus[data-lage=pausa]::before { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.spelar-knapp:focus-visible, .forlopp:focus-visible { outline: 3px solid var(--solgul); outline-offset: 3px; }
.spelar-knapp.paus:focus-visible { outline-color: var(--papper); }
.forlopp { flex: 1 1 220px; min-width: 120px; height: 32px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.forlopp::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(var(--spela), var(--spela)) 0 0 / calc(var(--del, 0) * 100%) 100% no-repeat, rgb(244 236 219 / .45); }
.forlopp::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--papper); border: 0; }
.forlopp::-moz-range-track { height: 4px; background: rgb(244 236 219 / .45); }
.forlopp::-moz-range-progress { height: 4px; background: var(--spela); }
.forlopp::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--papper); border: 0; }
.spelar-tid { font: 600 var(--t-2)/1 var(--brod); font-variant-numeric: tabular-nums; color: var(--papper); white-space: nowrap; }
.spelar-ram:fullscreen { display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 16px 24px; background: #000; }
.spelar-ram:fullscreen > .spelar-duk, .spelar-ram:fullscreen > .spelarlist { width: min(100%, (100vh - 110px) * 16 / 9); margin-inline: auto; }
/* smalt: förloppet över hela bredden, Spela och tiden på en rad, och de tre växlarna lika breda under */
@media (max-width: 700px) {
  .spelarlist { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; }
  .forlopp { grid-area: 1 / 1 / 2 / 7; width: 100%; min-width: 0; }
  .spelarlist [data-s=paus] { grid-area: 2 / 1 / 3 / 4; justify-self: start; }
  .spelar-tid { grid-area: 2 / 4 / 3 / 7; justify-self: end; }
  /* växlarna delar tredje raden lika, också när Undertext eller Helskärm saknas */
  .spelarlist :is([data-s=text], [data-s=ljud], [data-s=hel]) { grid-row: 3; grid-column: span 2; }
  .spelarlist:has(:is([data-s=text], [data-s=hel])[hidden]) :is([data-s=text], [data-s=ljud], [data-s=hel]) { grid-column: span 3; }
  .spelarlist:has([data-s=text][hidden]):has([data-s=hel][hidden]) [data-s=ljud] { grid-column: span 6; }
  .spelar-knapp { padding: 0 8px; min-width: 0; }
}
@media (max-width: 420px) { .spelar-knapp:not(.paus) { font-size: var(--t-1); } }

/* ---------------------------------------------------------------- salongen: en och samma bild vid priset på startsidan, i Mina
   filmer och på felsidan. I gråskala och tonad i tomat utanför duken (multiply), så att stolarnas röda aldrig blir en
   fjärde röd utanför paletten. Duken står i sina egna färger. --duk-x, -y, -b och -h är dukens läge i den del av
   bilden som syns, mätt i salong-duk-1920.webp när hela bredden syns (37,03 % in, 23,07 % ned, 25,94 % bred och
   29,33 % hög). En sida som beskär bilden sätter sina egna värden */
.salong-ram { position: relative; isolation: isolate; overflow: hidden; background: var(--blak); --duk-x: 37.03%; --duk-y: 23.07%; --duk-b: 25.94%; --duk-h: 29.33%; }
.salong-ram > .salong-bild { filter: grayscale(1) contrast(1.08) brightness(1.3); }
.salong-ton { position: absolute; inset: 0; background: var(--tomat); mix-blend-mode: multiply; pointer-events: none;
  clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0, var(--duk-x) var(--duk-y), calc(var(--duk-x) + var(--duk-b)) var(--duk-y), calc(var(--duk-x) + var(--duk-b)) calc(var(--duk-y) + var(--duk-h)), var(--duk-x) calc(var(--duk-y) + var(--duk-h)), var(--duk-x) var(--duk-y)); }

/* ---------------------------------------------------------------- eftertexterna: allt redovisas, sist som i en film (förslag A),
   som på startsidan. Rubriken i Bricolage, rollen till vänster i dimljus och vem till höger, namnet i en <b>. Två
   spalter också på mobilen. Står på blak. :where() ger reglerna specificiteten 0, så att startsidans .krediter och
   premiärens regler står kvar tills de stryks och sidorna använder de här */
:where(.eftertexter) :where(h2, h3) { font: 780 var(--t-6)/1.1 var(--rubrik); letter-spacing: -.02em; text-align: center; }
:where(.eftertexter) :where(dl) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 14px; max-width: 980px; margin: 56px auto 0; text-align: left; }
:where(.eftertexter dl) > :where(div) { display: contents; }
:where(.eftertexter) :where(dt) { text-align: right; color: var(--dimljus); font: 500 var(--t-2)/1.45 var(--brod); }
:where(.eftertexter) :where(dd) { margin: 0; font: 500 var(--t-3)/1.4 var(--brod); overflow-wrap: anywhere; }
:where(.eftertexter dd) :where(b) { font: 800 var(--t-4)/1.1 var(--rubrik); }
@media (max-width: 700px) {
  :where(.eftertexter) :where(h2, h3) { font-size: var(--t-5); }
  :where(.eftertexter) :where(dl) { column-gap: 16px; }
  :where(.eftertexter) :where(dt) { font-size: var(--t-1); }
  :where(.eftertexter) :where(dd) { font-size: var(--t-2); }
}

/* ================================================================ FELSIDAN (N05): ett fält i tomat, och salongen med 404 på duken */
.fel-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: center; min-height: calc(100vh - 160px); padding: 48px 0 96px; }
.fel-grid h1 { font-size: var(--t-7); line-height: .95; letter-spacing: -.02em; }
.fel-grid p { margin-top: 24px; font-size: var(--t-4); line-height: 1.35; max-width: 32ch; }
.fel-grid .nederst { justify-content: flex-start; }
@media (max-width: 800px) { .fel-grid { grid-template-columns: 1fr; } }

/* ================================================================ REDUCERAD RÖRELSE: allt står i slutläget (A02, AK12) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 380px) { .knapp { padding: 0 16px; } }

/* Sidfoten med bolagsuppgifterna på varje sida (V07, bolagets 04_texter_i_tjansten.md §6, e-handelslagen 8 §). Servern sätter
   in den (kedja/bolaget.js, sidfot) */
.bolagsfot { padding-block: 24px 32px; margin-top: 32px; border-top: 1px solid var(--dimljus); font-size: var(--t-1); line-height: 1.5; color: var(--text-2); }
.bolagsfot p { margin: 0 0 4px; }
/* klickytan är minst 24 px hög (WCAG 2.5.8, sidornas AK16) utan att raden blir högre */
.bolagsfot a { color: inherit; text-underline-offset: 3px; display: inline-block; min-height: 24px; line-height: 24px; }

/* V01: ångerfunktionen (bolagets 04_texter_i_tjansten.md §4). Knappen står synlig där kunden följer sin film och under
   Mina filmer, och rutan är en dialog med bolagets text (webb/angra.js) */
.angra-rad { display: flex; justify-content: flex-end; margin: 8px 0 0; }
.angra-rad[hidden] { display: none; }
.angra-ruta { max-width: min(560px, 100% - 32px); padding: 24px; border: 2px solid var(--blak); background: var(--papper); color: var(--blak); }
.angra-ruta::backdrop { background: rgb(27 23 20 / .55); }
.angra-ruta h2 { font: 700 var(--t-4)/1.2 var(--rubrik); margin: 0 0 12px; }
.angra-ruta .falt { display: grid; gap: 4px; margin: 12px 0; }
.angra-ruta .falt .rubrik { font-weight: 600; font-size: var(--t-2); }
.angra-ruta input { font: inherit; padding: 8px 10px; border: 2px solid var(--blak); background: var(--ljus); }
.angra-ruta .nederst { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }