/* Skudliste – layout og farver fra den godkendte prototype (prototype/index.html) */
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonte/Inter-Regular.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap; src: url(fonte/Inter-Medium.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap; src: url(fonte/Inter-SemiBold.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(fonte/Inter-Bold.woff2) format("woff2"); }
:root {
  --papir: #f6f5f1; --flade: #fbfaf7; --scene: #f6f5f1; --blaek: #2b2b29; --tekst: #2b2b29;
  --daempet: #7d7b76; --linje: #e4e2dc; --tape: #f5d547; --taget: #2e9a5c; --taget-tekst: #1e7d47; --scene-faerdig: #dcf1e3; --frokost: #e2ecfa; --frokost-tekst: #2a5fa8;
  --nu: #e5534b; --roed-tekst: #d93d36; --roed-kant: #ef8a83; --roed-fyld: #d93d36; --bagud: #fce6e4;
  --nice: #fbf7cf; --nice-tekst: #7d7b76; --nice-stjerne: #7d7b76; --dag-kommende: #cfccc5; --skygge: 0 6px 24px rgba(0,0,0,.18);
  color-scheme: light;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papir: #151514; --flade: #1c1c1a; --scene: #151514; --blaek: #ecebe7; --tekst: #ecebe7;
    --daempet: #9a9893; --linje: #2c2b29; --taget: #4cc47f; --taget-tekst: #5fd08f; --scene-faerdig: #1a3326; --frokost: #16273d; --frokost-tekst: #8fbcf5;
    --nu: #ff6b63; --roed-tekst: #ff8a80; --roed-kant: #a5403b; --roed-fyld: #c9443d; --bagud: #36191c;
    --nice: #2c2712; --nice-tekst: #9a9893; --nice-stjerne: #e9d55a; --dag-kommende: #4a4845; --scene-uden: #2a2927; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --papir: #151514; --flade: #1c1c1a; --scene: #151514; --blaek: #ecebe7; --tekst: #ecebe7;
  --daempet: #9a9893; --linje: #2c2b29; --taget: #4cc47f; --taget-tekst: #5fd08f; --scene-faerdig: #1a3326; --frokost: #16273d; --frokost-tekst: #8fbcf5;
    --nu: #ff6b63; --roed-tekst: #ff8a80; --roed-kant: #a5403b; --roed-fyld: #c9443d; --bagud: #36191c;
  --nice: #2c2712; --nice-tekst: #9a9893; --nice-stjerne: #e9d55a; --dag-kommende: #4a4845; --scene-uden: #2a2927; color-scheme: dark;
}
html { scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 150px); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
button, .board, .dagknap { touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
body { margin: 0; background: var(--papir); color: var(--tekst); font: 400 15px/1.4 Inter, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--papir); }
button { font: inherit; color: inherit; }
.wrap { max-width: 720px; margin: 0 auto; }

/* Top: dagens mærke og fremdrift — holdes fast, mens man scroller */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--papir); border-bottom: 2px solid var(--blaek); }
.linje1 { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 0; }
.projekt { font-size: 13px; font-weight: 600; color: var(--daempet); }
.rolle { border: 1px solid var(--linje); background: var(--flade); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; cursor: pointer; }
.rolle[data-kan="1"] { background: var(--blaek); color: var(--papir); border-color: var(--blaek); }
.dag { display: flex; align-items: flex-end; gap: 14px; padding: 10px 16px 4px; }
.tape { background: var(--tape); color: #141414; font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: -.5px; padding: 6px 12px 5px; transform: rotate(-1.5deg); transform-origin: left bottom; white-space: nowrap; }
.dagfakta { display: flex; gap: 16px; padding-bottom: 2px; }
.dagfakta div { display: flex; flex-direction: column; }
.dagfakta small { font-size: 11px; color: var(--daempet); }
.dagfakta b { font-size: 16px; font-weight: 700; color: var(--blaek); font-variant-numeric: tabular-nums; }   /* faste cifferbredder, så dato og tider ikke hopper */
.dage { display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; scrollbar-width: none; }
.dage::-webkit-scrollbar { display: none; }
.dagknap { flex: none; border: 1px solid var(--linje); background: transparent; border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: center; min-width: 54px; }
.dagknap small { display: block; font-size: 10px; font-weight: 500; color: var(--daempet); }
.dagknap[aria-current="true"] { background: var(--blaek); color: var(--papir); border-color: var(--blaek); }
.dagknap[aria-current="true"] small { color: inherit; opacity: .75; }
.dagknap .flueben { color: var(--taget-tekst); }
.linje1 { gap: 8px; }
.projekt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rolle { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ikkenaaet { flex: none; border: 1.5px solid var(--linje); background: transparent; color: var(--daempet); border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.ikkenaaet.har { border-color: var(--roed-kant); color: var(--roed-tekst); }
.ikkenaaet[aria-pressed="true"] { background: var(--roed-fyld); border-color: var(--roed-fyld); color: #fafafa; }
@media (min-width: 760px) { .rolle { max-width: 170px; } }
.fremdrift { padding: 0 16px 10px; }
.bar { height: 8px; background: var(--flade); border-radius: 999px; overflow: hidden; border: 1px solid var(--linje); }
.bar i { display: block; height: 100%; background: var(--taget); width: 0; transition: width .3s ease; }
.fremtekst { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; gap: 8px; }
.fremtekst strong { font-size: 14px; }
.filter { display: inline-flex; border: 1px solid var(--linje); border-radius: 999px; padding: 2px; background: var(--flade); }
.filter button { border: 0; background: transparent; border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--daempet); }
.filter button[aria-pressed="true"] { background: var(--papir); color: var(--blaek); box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* Scener */
.scene { margin-top: 18px; }
.slug { position: sticky; top: calc(env(safe-area-inset-top, 0px) + var(--topH, 190px)); z-index: 10; background: var(--scene); border-top: 2px solid var(--blaek); padding: 9px 16px; display: flex; gap: 10px; align-items: baseline; font-weight: 700; font-size: 14px; color: var(--blaek); }
.slug .nr { min-width: 40px; }
.slug .navn { flex: 1; text-transform: uppercase; }
.slug .meta { font-weight: 500; color: var(--daempet); font-size: 13px; white-space: nowrap; }
.slug .scenestatus { font-weight: 600; font-size: 13px; white-space: nowrap; }
.slug .scenestatus.faerdig { color: var(--taget-tekst); }
.synopsis { padding: 8px 16px 0; color: var(--daempet); font-size: 13px; }
.kommentar { padding: 4px 16px 0; font-size: 13px; font-weight: 600; color: var(--blaek); }

/* Skud */
.skud { display: grid; grid-template-columns: 52px 1fr auto auto; gap: 0 12px; padding: 12px 16px; border-bottom: 1px solid var(--linje); align-items: start; position: relative; }
.skud.nice { background: var(--nice); }
.skud.taget { background: var(--scene-faerdig); }   /* samme grøn som en færdig scene */
.skud.taget .indhold { opacity: .55; }
.skud.droppet { background: var(--flade); }
.skud.droppet .indhold, .skud.droppet .board { opacity: .45; }
.skud.droppet .skudnr, .skud.droppet .beskr { text-decoration: line-through; }
.skud.droppet .tjek { border-style: solid; border-color: var(--linje); }
.skud.droppet .tjek::after { content: "–"; font-size: 22px; font-weight: 700; color: var(--daempet); line-height: 1; }
.status.droppet { color: var(--daempet); }
.flytmaerke { font-size: 11px; font-weight: 700; color: var(--papir); background: var(--blaek); padding: 1px 7px 2px; border-radius: 999px; }
.skud.flyttet .tjek::after { content: "→"; font-size: 20px; }
.skud.flyttet .skudnr, .skud.flyttet .beskr { text-decoration: none; }
.dagvalg { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 8px; }
.dagvalg button { border: 1px solid var(--linje); background: var(--flade); border-radius: 12px; padding: 12px 8px; font-size: 16px; font-weight: 700; cursor: pointer; color: var(--tekst); }
.dagvalg button small { display: block; font-size: 12px; font-weight: 500; color: var(--daempet); margin-top: 2px; }
.dagvalg button[aria-current="true"] { opacity: .4; cursor: default; }
.hjoerne { display: flex; align-items: center; gap: 4px; margin-top: -4px; }
.nytmaerke { font-size: 11px; font-weight: 700; color: #141414; background: var(--tape); padding: 1px 7px 2px; border-radius: 999px; }
.erstatter { margin-top: 3px; font-size: 12px; font-weight: 600; color: var(--daempet); }
.mere { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: var(--daempet); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 0 6px; }
.mere:active { background: var(--flade); }
.tilfoej { display: block; width: calc(100% - 32px); margin: 10px 16px 10px; border: 1.5px dashed var(--linje); background: transparent; border-radius: 10px; padding: 11px; font-size: 14px; font-weight: 600; color: var(--daempet); cursor: pointer; }
.handlinger { display: flex; flex-direction: column; gap: 8px; }
.handlinger button { border: 1px solid var(--linje); background: var(--flade); border-radius: 12px; padding: 14px; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; color: var(--tekst); }
.handlinger button.fare { color: var(--roed-tekst); }
.handlinger small { display: block; font-size: 13px; font-weight: 400; color: var(--daempet); margin-top: 2px; }
.ark select { width: 100%; font: inherit; font-size: 17px; padding: 12px; border: 1px solid var(--linje); border-radius: 10px; background: var(--flade); color: var(--tekst); margin-bottom: 10px; -webkit-appearance: none; appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--daempet) 50%), linear-gradient(135deg, var(--daempet) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.ark { max-height: none; }
#nytdialog .ark { max-width: 520px; }
.ark textarea { width: 100%; font: inherit; font-size: 16px; padding: 12px; border: 1px solid var(--linje); border-radius: 10px; background: var(--flade); color: var(--tekst); margin-bottom: 10px; min-height: 70px; resize: vertical; }
.vaelg { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vaelg button { border: 1.5px solid var(--linje); background: transparent; border-radius: 999px; padding: 7px 12px; font-size: 14px; font-weight: 500; cursor: pointer; color: var(--tekst); }
.vaelg button[aria-pressed="true"] { border-color: transparent; }
.skifter { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--linje); border-radius: 10px; background: var(--flade); margin-bottom: 12px; cursor: pointer; }
.skifter input { width: 22px; height: 22px; accent-color: #b8930b; margin: 0; }
.fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fotos .foto { position: relative; width: 112px; height: 63px; border-radius: 6px; overflow: hidden; border: 1px solid var(--linje); }
.fotos .foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fotos .foto button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0,0,0,.7); color: #fafafa; font-size: 14px; line-height: 1; cursor: pointer; padding: 0; }
.fotos label.tilfoejfoto { width: 112px; height: 63px; border: 1.5px dashed var(--linje); border-radius: 6px; display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--daempet); cursor: pointer; margin: 0; text-align: center; }
.board.foto { background-size: cover; background-position: center; }
.lysbillede.foto { background-size: contain; background-repeat: no-repeat; background-position: center; background-color: #141414; }
.ark label { display: block; font-size: 13px; font-weight: 600; margin: 4px 0 4px; color: var(--daempet); }
.tjek { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--daempet); background: transparent; display: grid; place-items: center; cursor: pointer; padding: 0; margin-top: -2px; }
.tjek svg { width: 22px; height: 22px; opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s; }
.skud.taget .tjek { background: var(--taget); border-color: var(--taget); }
.skud.taget .tjek svg { opacity: 1; transform: scale(1); }
.tjek:active { transform: scale(.92); }
.tjek.laast { border-style: dashed; opacity: .7; }
.skud.taget .tjek.laast { opacity: 1; border-style: solid; }
.top1 { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.skudnr { font-weight: 700; font-size: 16px; padding: 1px 8px 2px; border-radius: 999px; margin-right: 2px; font-variant-numeric: tabular-nums; color: var(--blaek); }
.skudnr.uden { padding-left: 0; }
.tag { font-size: 12px; font-weight: 500; padding: 2px 8px 3px; border-radius: 999px; white-space: nowrap; }
.beskr { margin-top: 6px; font-size: 15px; color: var(--tekst); }
.tagraekke { display: grid; grid-template-columns: 76px 1fr; gap: 8px; align-items: baseline; margin-top: 6px; }
.taglabel { font-size: 12px; font-weight: 500; color: var(--daempet); padding-top: 2px; }
.piller { display: flex; flex-wrap: wrap; gap: 4px; }
.note { margin-top: 3px; font-size: 13px; color: var(--daempet); }
.nicemaerke { grid-column: 2 / 5; justify-self: end; margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--nice-tekst); }
.skud.taget .nicemaerke, .skud.droppet .nicemaerke { opacity: .55; }
.status { margin-top: 6px; font-size: 12px; font-weight: 600; color: var(--taget-tekst); }
.board { width: 96px; height: 54px; border-radius: 4px; background: repeating-linear-gradient(135deg, var(--scene), var(--scene) 6px, var(--flade) 6px, var(--flade) 12px); border: 1px solid var(--linje); position: relative; cursor: pointer; padding: 0; }
.board span { position: absolute; right: 3px; bottom: 3px; background: rgba(0,0,0,.7); color: #fafafa; font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 999px; }
.board.ingen { visibility: hidden; }
.tom { padding: 32px 16px; color: var(--daempet); text-align: center; }

/* Fortryd og dialoger */
.toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); transform: translate(-50%, 140%); background: var(--blaek); color: var(--papir); border-radius: 12px; padding: 10px 10px 10px 16px; display: flex; gap: 14px; align-items: center; box-shadow: var(--skygge); transition: transform .2s ease; z-index: 40; max-width: calc(100% - 24px); }
.toast.vis { transform: translate(-50%, 0); }
.toast button { background: var(--tape); color: #141414; border: 0; border-radius: 8px; padding: 7px 12px; font-weight: 600; cursor: pointer; }
.dialog { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 50; padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px); overflow-y: auto; }
.dialog.vis { display: flex; }
.ark { background: var(--papir); width: 100%; max-width: 420px; border-radius: 16px; padding: 20px; box-shadow: var(--skygge); margin: auto; }
.ark h2 { margin: 0 0 6px; font-size: 18px; color: var(--blaek); }
.ark p { margin: 0 0 14px; color: var(--daempet); font-size: 14px; }
.ark input { width: 100%; font: inherit; font-size: 17px; padding: 12px; border: 1px solid var(--linje); border-radius: 10px; background: var(--flade); color: var(--tekst); margin-bottom: 10px; }
.ark .knapper { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.ark .knapper button { border: 1px solid var(--linje); background: transparent; border-radius: 10px; padding: 10px 14px; font-weight: 600; cursor: pointer; }
.ark .knapper .primaer { background: var(--blaek); color: var(--papir); border-color: var(--blaek); }
.fejl { color: var(--roed-tekst); font-size: 13px; min-height: 18px; margin: -4px 0 6px; }
.lys { position: fixed; inset: 0; background: rgba(0,0,0,.92); display: none; flex-direction: column; z-index: 60; padding: calc(env(safe-area-inset-top, 0px) + 12px) 12px calc(env(safe-area-inset-bottom, 0px) + 12px); color: #fafafa; }
.lys.vis { display: flex; }
.lys header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-weight: 600; }
.lys header button { background: rgba(255,255,255,.15); border: 0; color: #fafafa; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.planknap { display: flex; align-items: center; gap: 12px; width: calc(100% - 32px); margin: 10px 16px 2px; padding: 6px; border: 1px solid var(--linje); border-radius: 10px; background: var(--flade); cursor: pointer; text-align: left; }
.planknap img { width: 112px; height: 72px; object-fit: contain; background: #fafafa; border-radius: 6px; border: 1px solid var(--linje); flex: none; }
.planknap b { display: block; font-size: 14px; color: var(--blaek); }
.planknap small { font-size: 12px; color: var(--daempet); }
@media (min-width: 760px) { .planknap { width: calc(100% - 48px); margin: 12px 24px 2px; } .planknap img { width: 200px; height: 128px; } }
.planbar { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-bottom: 8px; }
.planbar[hidden] { display: none; }
.lysbilleder[hidden] { display: none; }   /* ellers fylder den tomme storyboard-visning pladsen over gulvplanen */
.planbar button { min-width: 48px; height: 44px; border: 0; border-radius: 12px; background: rgba(255,255,255,.16); color: #fafafa; font-size: 24px; font-weight: 600; cursor: pointer; padding: 0 14px; }
.planbar button.luk { font-size: 16px; background: #fafafa; color: #141414; margin-left: 6px; }
.planbar button:disabled { opacity: .35; cursor: default; }
.planbar #zoomnul { display: grid; place-items: center; padding: 0; width: 48px; }
.zoomtal { font-size: 13px; font-weight: 600; color: #cfcfca; margin-right: auto; font-variant-numeric: tabular-nums; }
.planvisning { flex: 1 1 0; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; background: #fafafa; border-radius: 8px; display: flex; }
.planvisning[hidden] { display: none; }
/* Lærredet er mindst lige så stort som visningen, så planen står i midten; zoomes der ind, vokser det, og man kan scrolle */
.planlaerred { display: grid; place-items: center; flex: 1 0 auto; min-width: 100%; min-height: 100%; width: max-content; padding: 8px; box-sizing: border-box; }
.planlaerred img { display: block; max-width: none; height: auto; }
.lysbilleder { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; }
.lysbillede { aspect-ratio: 16 / 9; width: 100%; border-radius: 6px; background: repeating-linear-gradient(135deg, #3a3a38, #3a3a38 10px, #2c2c2a 10px, #2c2c2a 20px); display: grid; place-items: center; color: #bdbdb8; font-size: 14px; }
.scenenav { display: none; }

/* iPad og større: dagen og scenerne i en fast sidekolonne, skuddene til højre med større storyboards */
@media (min-width: 760px) {
  .wrap { max-width: none; display: grid; grid-template-columns: minmax(280px, 340px) 1fr; align-items: start; }
  .top { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow-y: auto; border-bottom: 0; border-right: 2px solid var(--blaek);
         padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); }
  .dage { flex-wrap: wrap; overflow: visible; }
  .fremtekst { flex-direction: column; align-items: flex-start; }
  .scenenav { display: block; padding: 4px 0 24px; border-top: 1px solid var(--linje); }
  .scenenav button { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 11px 16px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--linje); }
  .scenenav button b { font-weight: 700; color: var(--blaek); }
  .scenenav button span { color: var(--daempet); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; font-size: 12.5px; padding-top: 1px; }
  .scenenav button em { font-style: normal; font-weight: 600; font-size: 13px; color: var(--daempet); }
  .scenenav button em.faerdig { color: var(--taget-tekst); }
  main { min-width: 0; padding-right: env(safe-area-inset-right, 0px); }
  .slug { top: env(safe-area-inset-top, 0px); padding: 11px 24px; font-size: 15px; }
  .scene { margin-top: 0; }
  .synopsis, .kommentar { padding-left: 24px; padding-right: 24px; }
  .skud { grid-template-columns: 56px 1fr auto auto; padding: 14px 24px; gap: 0 16px; }
  .tilfoej { width: calc(100% - 48px); margin: 10px 24px 10px; }
  .board { width: 176px; height: 99px; }
  .skudnr { font-size: 17px; }
  .beskr { font-size: 15px; }
  .fod { grid-column: 2; }
  .toast { left: calc(50% + 170px); }
}
@media (min-width: 1100px) { .board { width: 224px; height: 126px; } }
.fod { padding: 24px 16px 40px; color: var(--daempet); font-size: 12px; text-align: center; }
:focus-visible { outline: 3px solid var(--tape); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Tilføjet i den rigtige app ---- */
[hidden] { display: none !important; }
.board img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.fotos .foto.venter { display: grid; place-items: center; font-size: 12px; color: var(--daempet); background: var(--flade); }
/* Synkronisering: vises kun, når telefonen er offline, eller ændringer venter på at blive sendt */
.synk { flex: none; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 999px; background: var(--flade); border: 1px solid var(--linje); color: var(--daempet); white-space: nowrap; }
.synk.offline { background: var(--roed-fyld); border-color: var(--roed-fyld); color: #fafafa; }
/* Indgangen: visningskoden, før man ser noget */
.port { position: fixed; inset: 0; z-index: 70; background: var(--papir); display: flex; align-items: center; justify-content: center; padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); }
.port .ark { box-shadow: none; border: 1px solid var(--linje); }
.port .tape { display: inline-block; margin: 0 0 18px; font-size: 26px; }
.indlaeser { padding: 48px 16px; text-align: center; color: var(--daempet); }
/* Dagsprogram (PDF): yderst til højre i dagsrækken; er der ikke plads, lægger knappen sig på linjen under */
.dag { flex-wrap: wrap; row-gap: 8px; }
.programknap { margin-left: auto; align-self: center; display: inline-flex; align-items: center; gap: 6px; flex: none;
  border: 1.5px solid var(--blaek); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  color: var(--blaek); background: var(--papir); text-decoration: none; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.programknap:active { background: var(--flade); }
.programknap { font-family: inherit; cursor: pointer; }
/* Dagsprogrammet i appen: siderne under hinanden i gulvplanens zoomvisning */
.planvisning.dokument { background: #cfcfcb; }
.planlaerred.dokument { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 10px 8px; }
.planlaerred.dokument img { background: #fafafa; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.planbar a.pdf { display: grid; place-items: center; height: 44px; padding: 0 12px; border-radius: 12px; background: rgba(255,255,255,.16);
  color: #fafafa; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.planbar a.pdf[hidden] { display: none; }
/* Smalle telefoner: et langt mærke ("Technical  Håndholdt") må ikke skubbe ⋯ ud over kanten.
   Er der ikke plads ved siden af kolonnenavnet, lægger mærkerne sig under det. */
.skud { grid-template-columns: 52px minmax(0, 1fr) auto auto; }
.indhold { min-width: 0; }
.tagraekke { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.taglabel { flex: 0 0 76px; }
.piller { flex: 1 1 auto; min-width: 0; }
@media (min-width: 760px) { .skud { grid-template-columns: 56px minmax(0, 1fr) auto auto; } }
/* Toasten står ved left: 50% og ville ellers kun få halvdelen af skærmen at brede sig i */
.toast { width: max-content; }
/* Zoomtallet må ikke knække ("100 %"), heller ikke når "Åbn PDF" også står i bjælken */
.zoomtal { white-space: nowrap; flex: none; }
/* Smalle telefoner: med "Åbn PDF" i bjælken er der ikke plads til zoomtallet; knapperne viser grænserne */
@media (max-width: 420px) { .planbar:has(#planpdf:not([hidden])) .zoomtal { display: none; } }
/* Toasten placeres ud fra den synlige skærmhøjde (svh = med Safaris værktøjslinje fremme) og iPhonens sikre margen
   i bunden, så den ikke havner under skærmkanten. Den toner ind og ud i stedet for at glide ud under kanten. */
@supports (height: 100svh) {
  .toast { bottom: auto; top: calc(100svh - env(safe-area-inset-bottom, 0px) - 16px);
    transform: translate(-50%, calc(-100% + 12px)); opacity: 0; visibility: hidden;
    transition: transform .2s ease, opacity .2s ease, visibility .2s; }
  .toast.vis { transform: translate(-50%, -100%); opacity: 1; visibility: visible; }
}
/* Ingen "gummibånd" på iPhone: siden trækkes ikke ned forbi toppen (eller op forbi bunden), så appen føles som en app.
   Rulning inde i dialoger og fuldskærmsvisninger smitter ikke af på listen bagved. */
html, body { overscroll-behavior: none; }
.dialog, .lysbilleder, .planvisning, .top { overscroll-behavior: contain; }

/* Skudlisten ruller for sig selv under toppen, ligesom i en native app: toppen (dag, dagvælger, fremdrift) står stille,
   og kun listen har iOS' gummibånd. Siden selv ruller ikke. På iPad er sidekolonnen og listen hver sit rulleområde. */
html, body { height: 100%; overflow: hidden; }
:root { padding-bottom: 0; }
.wrap { height: 100%; display: flex; flex-direction: column; }
/* sticky (ikke relative): iOS 26 genkender så toppen som fast og slører den ikke under statuslinjen */
.top { position: sticky; top: 0; flex: none; }
.rulle { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }
.slug { top: 0; }
.fod { padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 760px) {
  .wrap { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .top { height: auto; min-height: 0; }
  .rulle { min-width: 0; }
  .fod { grid-column: auto; }
}

/* Ingen luft og ingen ekstra streg over den første scene; toppens streg er skillelinjen */
#liste > .scene:first-child { margin-top: 0; }
#liste > .scene:first-child > .slug { border-top: 0; }

/* Indbakke (admin): mærke i toppen og dialog med dagsprogrammer fra mail */
.indbakkeknap { flex: none; border: 0; background: var(--tape); color: #141414; border-radius: 999px; padding: 5px 11px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; font-family: inherit; }
.indbakkepost { border: 1px solid var(--linje); border-radius: 12px; padding: 12px; margin-bottom: 10px; background: var(--flade); display: flex; flex-direction: column; gap: 3px; }
.indbakkepost b { color: var(--blaek); font-size: 15px; overflow-wrap: anywhere; }
.indbakkepost small { color: var(--daempet); font-size: 13px; overflow-wrap: anywhere; }
.indbakkepost .sepdf { align-self: flex-start; margin: 6px 0 2px; color: var(--blaek); font-weight: 600; font-size: 14px; }
.indbakkepost select { margin: 2px 0 4px; }
.indbakkepost .indbakkenote { min-height: 16px; }
.indbakkepost .knapper button:disabled { opacity: .45; cursor: default; }
#indbakkedialog .ark { max-width: 520px; }

/* Knib med to fingre i zoomvisningen zoomer indholdet (app.js), ikke hele appen */
.lys, .planvisning { touch-action: pan-x pan-y; }
.planvisning.moerk { background: #141414; }
.planvisning.moerk .planlaerred.dokument img { box-shadow: none; background: transparent; }
/* Storyboards står lodret i midten, når de kan være på skærmen (auto-marginer: sikker centrering, der stadig kan rulles) */
.planvisning.moerk .planlaerred.dokument > img:first-child { margin-top: auto; }
.planvisning.moerk .planlaerred.dokument > img:last-child { margin-bottom: auto; }

/* Appen sidder fast til skærmen. iOS kan efter en rotation (liggende og tilbage) efterlade siden rullet op, så toppen
   forsvinder; med position: fixed betyder sidens rulning ingenting. Margener til statuslinje og notch i liggende format. */
:root { padding-top: 0; }
.wrap { position: fixed; inset: 0; height: auto; box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); }
@media (min-width: 760px) { .wrap { max-width: none; } .top { padding-top: 0; padding-left: 0; } }

/* Storyboards i listen i deres eget format (beskæres ikke); rammen følger billedets højde */
.board { height: auto; background: none; }
.board img { height: auto; object-fit: contain; border-radius: 3px; }
.board.ingen { height: 1px; }
/* Planlærredet i dokument-tilstand: billederne er højst så brede, som de er sat til (ingen strækning) */
.planlaerred img { max-width: none; }

/* Telefon på langs (bred, men lav skærm): sidekolonne som på iPad, men smallere og med mindre storyboards,
   så teksten i skudkortene har plads ved siden af billedet */
@media (min-width: 760px) and (max-height: 520px) {
  .wrap { grid-template-columns: minmax(230px, 260px) 1fr; }
  .board { width: 120px; }
  .skud { grid-template-columns: 48px minmax(0, 1fr) auto auto; padding: 12px 16px; gap: 0 12px; }
  .slug { padding: 9px 16px; font-size: 14px; }
  .synopsis, .kommentar { padding-left: 16px; padding-right: 16px; }
  .tilfoej { width: calc(100% - 32px); margin: 10px 16px 10px; }
  .planknap { width: calc(100% - 32px); margin: 10px 16px 2px; }
  .planknap img { width: 112px; height: 72px; }
  .toast { left: calc(50% + 125px); }
}

/* Overstået dag med skud, der ikke blev nået: rød i dagvælgeren */
.dagknap.mangler { border-color: var(--roed-kant); color: var(--roed-tekst); }
.dagknap.mangler small { color: inherit; }
.dagknap.mangler[aria-current="true"] { background: var(--roed-fyld); border-color: var(--roed-fyld); color: #fafafa; }
/* Dato, call og wrap står højrestillet, så de ikke flytter sig, når dagsnummeret er bredere ("Dag 1" / "Dag 10") */
.dagfakta { margin-left: auto; }
/* I sidekolonnen (iPad, telefon på langs) er der ikke altid plads ved siden af "Dag N"; datoerne står derfor
   altid på deres egen linje, så kolonnen ikke hopper fra dag til dag */
@media (min-width: 760px) { .dagfakta { flex-basis: 100%; margin-left: 0; } }

/* Telefon på langs: margenen til notch-siden lå to gange i højre side (hele appen + listen), så listen stoppede
   ca. 120 px før kanten. Nu går listens farver (sceneoverskrifter, gule rækker) helt ud til kanten, og kun
   indholdet holdes fri af notch-siden. På iPad og stående telefon er margenen 0, så intet ændrer sig dér. */
.wrap { padding-right: 0; }
@media (min-width: 760px) { main { padding-right: 0; } }
@media (min-width: 760px) and (max-height: 520px) {
  .skud, .slug { padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
  .synopsis, .kommentar, .fod { padding-right: calc(16px + env(safe-area-inset-right, 0px)); }
  .tilfoej, .planknap { width: calc(100% - 32px - env(safe-area-inset-right, 0px)); }
}

/* Kun fuld margen i notch-siden på langs (app.js sætter data-notch). Den anden side får højst 20 px, så de runde
   hjørner stadig ikke skærer i indholdet. Telefoner uden notch har margen 0 og påvirkes ikke. */
:root[data-notch="hoejre"] .wrap { padding-left: min(env(safe-area-inset-left, 0px), 20px); }
@media (min-width: 760px) and (max-height: 520px) {
  :root[data-notch="venstre"] .skud, :root[data-notch="venstre"] .slug,
  :root[data-notch="venstre"] .synopsis, :root[data-notch="venstre"] .kommentar, :root[data-notch="venstre"] .fod {
    padding-right: calc(16px + min(env(safe-area-inset-right, 0px), 20px)); }
  :root[data-notch="venstre"] .tilfoej, :root[data-notch="venstre"] .planknap {
    width: calc(100% - 32px - min(env(safe-area-inset-right, 0px), 20px)); }
}

/* Margener mod skærmkanten som variabler: fuld margen i notch-siden, højst 20 px i den anden (app.js sætter data-notch) */
:root { --kant-venstre: env(safe-area-inset-left, 0px); --kant-hoejre: env(safe-area-inset-right, 0px); }
:root[data-notch="hoejre"] { --kant-venstre: min(env(safe-area-inset-left, 0px), 20px); }
:root[data-notch="venstre"] { --kant-hoejre: min(env(safe-area-inset-right, 0px), 20px); }

/* Fuld skærm på langs (telefon): billedet får hele højden. Titlen ligger som et mærke øverst til venstre og
   knapperne i en lodret søjle i højre side, begge oven på billedet og fri af notchen. */
@media (orientation: landscape) and (max-height: 520px) {
  .lys { padding: 0; background: #141414; }
  .planvisning { position: absolute; top: 0; bottom: 0; left: var(--kant-venstre); right: var(--kant-hoejre); border-radius: 0; }
  .lys > header { position: absolute; z-index: 2; top: 8px; left: calc(var(--kant-venstre) + 10px); max-width: 45%; margin: 0;
    background: rgba(0,0,0,.62); border-radius: 10px; padding: 6px 10px; font-size: 14px; pointer-events: none; }
  .lys > header #lystitel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .planbar { position: absolute; z-index: 2; top: 8px; right: calc(var(--kant-hoejre) + 10px); margin: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; }
  .planbar button, .planbar a.pdf { background: rgba(0,0,0,.62); width: 52px; min-width: 52px; padding: 0; display: grid; place-items: center; }
  .planbar a.pdf { font-size: 12px; text-align: center; line-height: 1.1; height: 44px; }
  .planbar button.luk { order: -1; margin: 0 0 4px; background: rgba(0,0,0,.75); color: #fafafa; font-size: 15px; box-shadow: inset 0 0 0 1.5px #fafafa; }
  .planbar .zoomtal { order: 10; margin: 0; text-align: center; font-size: 12px; background: rgba(0,0,0,.62); border-radius: 8px; padding: 3px 0; }
  #zoomind { order: 1; } #zoomud { order: 2; } #zoomnul { order: 3; } #planpdf { order: 4; }
}

/* Profilikon øverst til højre: omrids = kun se, udfyldt = krydser af, gul prik = admin */
.profil { flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--blaek); background: transparent;
  color: var(--blaek); display: grid; place-items: center; padding: 0; cursor: pointer; position: relative; }
.profil svg { width: 18px; height: 18px; }
.profil[data-kan="1"] { background: var(--blaek); color: var(--papir); }
.profil[data-rolle="admin"]::after { content: ""; position: absolute; top: -2px; right: -2px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--tape); border: 2px solid var(--papir); }
.profilsprog { display: flex; align-items: center; gap: 6px; margin: 14px 0 16px; font-size: 13px; color: var(--daempet); }
.profilsprog span { margin-right: auto; font-weight: 600; }
.profilsprog button { border: 1px solid var(--linje); background: transparent; border-radius: 999px; padding: 6px 12px; font-size: 13px;
  font-weight: 600; cursor: pointer; color: var(--tekst); font-family: inherit; }
.profilsprog button[aria-pressed="true"] { background: var(--blaek); color: var(--papir); border-color: var(--blaek); }

/* Dagsrækken: "Dag N" øverst; dato, call og wrap på linjen under, på linje med Dagsprogram-knappen (til højre) */
.dag { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "tape tape" "fakta knap";
  align-items: end; column-gap: 12px; row-gap: 8px; }
.dag .tape { grid-area: tape; justify-self: start; }
.dagfakta { grid-area: fakta; margin-left: 0; }
.programknap { grid-area: knap; margin-left: 0; align-self: end; }
/* Smal telefon: knappen viser kun ikonet, så dato og tider stadig er på samme linje */
@media (max-width: 380px) {
  .programknap { padding: 7px; } .programknap span { display: none; }
}
/* Sidekolonnen (iPad, telefon på langs) er for smal til begge: knappen står under dato og tider */
@media (min-width: 760px) {
  .dag { grid-template-areas: "tape tape" "fakta fakta" "knap knap"; }
  .dagfakta { flex-basis: auto; }
  .programknap { justify-self: start; }
}
/* Lavere header: projektnavnet tættere på "Dag N", og mindre luft i toppen og omkring dagvælgeren */
.linje1 { padding-top: 6px; }
.dag { padding-top: 2px; padding-bottom: 2px; row-gap: 6px; }
.dage { padding-top: 8px; padding-bottom: 8px; }
.fremdrift { padding-bottom: 8px; }
.fremtekst { margin-top: 6px; }

/* "Ikke nået" og profilikonet står til højre på linje med "Dag N"; første linje har kun projektnavnet (og evt. mærker) */
.dag { grid-template-areas: "tape handl" "fakta knap"; }
.daghandlinger { grid-area: handl; justify-self: end; align-self: center; display: flex; align-items: center; gap: 8px; }
.linje1 { min-height: 26px; }
@media (min-width: 760px) { .dag { grid-template-areas: "tape handl" "fakta fakta" "knap knap"; } }
/* "Ikke nået" og profilikonet deler den øverste linje med "Dag N" (samme gitterfelt), så højre kolonne kun er så bred
   som Dagsprogram-knappen og dato/tider har plads på linjen under */
.dag { grid-template-areas: "tape tape" "fakta knap"; }
.daghandlinger { grid-area: tape; }
@media (min-width: 760px) { .dag { grid-template-areas: "tape tape" "fakta fakta" "knap knap"; } }
/* Sidekolonnen: på iPad står "Dag N" og knapperne i hver sin kolonne; på en telefon på langs er der ikke plads,
   så knapperne står på deres egen linje under "Dag N" */
@media (min-width: 760px) {
  .dag { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "tape handl" "fakta fakta" "knap knap"; }
  .daghandlinger { grid-area: handl; }
}
@media (min-width: 760px) and (max-height: 520px) {
  .dag { grid-template-areas: "tape tape" "handl handl" "fakta fakta" "knap knap"; }
  .daghandlinger { justify-self: start; }
}

/* Sceneoverskrift: grøn, når alle skud er færdige eller fjernet (droppet/flyttet); tryk folder scenen sammen/ud */
.slug { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.slug.faerdig { background: var(--scene-faerdig); border-top-color: var(--taget); }
.slug .fold { flex: none; align-self: center; width: 8px; height: 8px; margin: 0 2px 3px 2px;
  border-right: 2px solid var(--daempet); border-bottom: 2px solid var(--daempet); transform: rotate(45deg); transition: transform .15s ease; }
.scene.foldet > .slug .fold { transform: rotate(-45deg); margin-bottom: 0; }
.scene.foldet > :not(.slug) { display: none; }
.slug:focus-visible { outline: 2px solid var(--taget); outline-offset: -2px; }

/* Tider fra dagsprogrammet: tid i sceneoverskriften, note under den, rækker for setup/omstilling/ryk/frokost/nedpak */
.slug { flex-wrap: wrap; row-gap: 2px; }
.slug .slugtid { flex-basis: 100%; padding-left: 50px; font-size: 12px; font-weight: 400; color: var(--daempet); font-variant-numeric: tabular-nums; }
.slug .slugtid b { font-weight: 600; color: var(--blaek); }
.regi { margin: 0; padding: 7px 16px 7px 66px; font-size: 13px; color: var(--daempet); border-bottom: 1px solid var(--linje); }
.tidsraekke { display: flex; align-items: center; gap: 8px; padding: 9px 16px; background: var(--flade); border-top: 1px solid var(--linje); font-size: 13px; color: var(--daempet); }
.tidsraekke .kl { min-width: 92px; font-weight: 600; color: var(--blaek); font-variant-numeric: tabular-nums; }
.tidsraekke svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tidsraekke.omstilling { background: var(--papir); }   /* samme højde som de andre rækker, men dæmpet */
.tidsraekke.omstilling .kl { font-weight: 400; color: var(--daempet); }
.tidsraekke.frokost { background: var(--frokost); color: var(--frokost-tekst); }
.tidsraekke.frokost .kl { color: var(--frokost-tekst); }
.nulinje { position: relative; height: 0; border-top: 2px solid var(--nu); z-index: 5; }
.nulinje span { position: absolute; left: 12px; top: -10px; padding: 0 6px; border-radius: 6px; background: var(--papir); color: var(--roed-tekst); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.scenenav .navtid { font-style: normal; font-weight: 600; color: var(--blaek); margin-right: 6px; font-variant-numeric: tabular-nums; }
/* Admin: dagsprogrammet afviger fra planen */
.tiderbanner { display: block; width: calc(100% - 24px); margin: 10px 12px; text-align: left; border: 0; border-radius: 10px; padding: 10px 12px; background: var(--frokost); color: var(--frokost-tekst); font: inherit; font-size: 13px; cursor: pointer; }
.tiderbanner b { display: block; font-weight: 700; }
.tiderbanner small { display: block; font-size: 12px; margin-top: 1px; }
.tiderbanner.valgt { background: var(--flade); color: var(--daempet); }
.tiderbanner.valgt b { font-weight: 600; }
.tiderkol { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.tiderkol h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--daempet); }
.tiderscene, .tiderlinje { padding: 6px 9px; border-radius: 7px; background: var(--flade); margin-bottom: 4px; font-size: 14px; font-variant-numeric: tabular-nums; color: var(--tekst); }
.tiderlinje { display: flex; justify-content: space-between; }
.tiderscene.flyttet, .tiderlinje.flyttet { background: var(--frokost); color: var(--frokost-tekst); font-weight: 600; }
.ark p.tidernote { margin: 6px 0 0; padding: 6px 9px; border-radius: 7px; font-size: 13px; }
.ark p.tidernote.ekstra { background: var(--frokost); color: var(--frokost-tekst); }
.ark p.tidernote.mangler { border: 1px solid var(--roed-kant); color: var(--roed-tekst); }
#tiderindhold { margin-bottom: 14px; }
.handlinger button[aria-pressed="true"] { border-color: var(--blaek); }
/* Tidsrækker og noter følger sceneoverskrifternes margener på iPad og telefon på langs */
@media (min-width: 760px) {
  .tidsraekke { padding-left: 24px; padding-right: 24px; }
  .regi { padding-left: 74px; padding-right: 24px; }
}
@media (min-width: 760px) and (max-height: 520px) {
  .tidsraekke { padding-left: 16px; padding-right: calc(16px + var(--kant-hoejre)); }
  .regi { padding-left: 66px; padding-right: calc(16px + var(--kant-hoejre)); }
}
/* Tidsrækkerne hører til scenen efter dem: ingen luft imellem, luften står før rækkerne i stedet */
.tidsraekke + .scene, .tidsraekke + .nulinje + .scene { margin-top: 0; }
.scene + .tidsraekke { margin-top: 18px; }
@media (min-width: 760px) { .scene + .tidsraekke { margin-top: 0; } }
/* Skud før nu-linjen, der ikke er færdige: lys rød baggrund (også på Nice to have) og rød cirkel */
.skud.bagud, .skud.nice.bagud { background: var(--bagud); }
.skud.bagud .tjek { border-color: var(--nu); border-width: 2.5px; }
/* Scenens tid er gået, og der mangler skud: rød sceneoverskrift (som grøn, når alt er færdigt) */
.slug.bagud { background: var(--bagud); border-top-color: var(--nu); }
.slug.bagud .scenestatus { color: var(--roed-tekst); }
/* Hele scenen (regi-note, beskrivelse, gulvplan, mellemrum) får sceneoverskriftens farve: grøn, når den er færdig,
   rød, når tiden er gået og der mangler skud. Skuddene beholder deres egen farve (færdig, droppet, mangler). */
.scene.faerdig { background: var(--scene-faerdig); }
.scene.bagud { background: var(--bagud); }
.scene.faerdig > .regi, .scene.bagud > .regi { border-bottom-color: transparent; }
/* Ingen hvid afstand mellem scenerne: scenerne er farvede (grøn/rød), og når en sceneoverskrift skubber den forrige
   ud af toppen ved scroll, skal de to overskrifter mødes uden mellemrum. Overskriftens streg adskiller scenerne. */
.scene, .scene + .tidsraekke { margin-top: 0; }
/* Knappen "Tilføj skud" nederst i scenen må ikke skubbe sin margen ud under scenen (den blev til en hvid stribe) */
.scene { display: flow-root; }
/* Scenetid, regi-note og scenebeskrivelse står med samme afstand som overskrift og tid (navn–tid 5 px, tid–regi og regi–beskrivelse 7 px).
   Regi-noten og beskrivelsen ligger under sceneoverskriften (de klæber ikke fast med den) og har overskriftens
   baggrund, så det læses som én blok. */
.slug:has(+ .regi), .slug:has(+ .synopsis) { padding-bottom: 2px; }
.slug + .regi { margin: -1px 0 0; padding-top: 4px; padding-bottom: 10px; border-bottom: 0; background: var(--scene); }
.slug + .regi:has(+ .synopsis) { padding-bottom: 2px; }
.slug + .synopsis, .regi + .synopsis { margin: -1px 0 0; padding-top: 3px; padding-bottom: 10px; background: var(--scene); }
.scene.faerdig > .regi, .scene.faerdig > .synopsis, .scene.bagud > .regi, .scene.bagud > .synopsis { background: transparent; }
/* Fastklæbet sceneoverskrift med regi-note/beskrivelse under sig: 7 px ekstra baggrund i bunden (kun visuelt) */
.slug.fast:has(+ .regi)::after, .slug.fast:has(+ .synopsis)::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% - 1px); height: 8px; background: inherit; }   /* 1 px overlap: ingen spalte ved brøkdele af pixels */
/* Med scenetid: scenenummeret står lodret centreret ud for titel og tid (to linjer) */
.slug:has(.slugtid) { display: grid; grid-template-columns: minmax(40px, auto) minmax(0, 1fr) auto auto; column-gap: 10px; row-gap: 2px; align-items: baseline; }
.slug:has(.slugtid) .nr { grid-row: 1 / 3; align-self: center; }
.slug:has(.slugtid) .slugtid { grid-column: 2 / -1; padding-left: 0; }
/* Telefon (stående): kun én streg mellem header og liste, og den flytter sig aldrig. Headeren har ingen streg; i stedet
   ligger en fastklæbet sort streg øverst i listen. En fastklæbet sceneoverskrift lægger sig præcis oven på den med
   sin egen streg (sort, grøn eller rød), så der aldrig er to streger oven på hinanden. */
@media (max-width: 759px) {
  .top { border-bottom: 0; }
  #liste::before { content: ""; display: block; position: sticky; top: 0; height: 1px; margin-bottom: -1px; background: var(--blaek); z-index: 9; }
  #liste > .scene:first-child > .slug { border-top-width: 1px; border-top-style: solid; }
  /* Farven skal sættes her: reglen, der fjerner stregen på iPad (border-top: 0), nulstiller også farven */
  #liste > .scene:first-child > .slug { border-top-color: var(--blaek); }
  #liste > .scene:first-child > .slug.faerdig { border-top-color: var(--taget); }
  #liste > .scene:first-child > .slug.bagud { border-top-color: var(--nu); }
}
/* Regi-note og beskrivelse går 1 px ind under feltet over sig, så der ikke opstår en lys spalte ved brøkdele af pixels */
/* Progress-baren: lige meget luft over (til dagknapperne, 8 px) og under (til filterknapperne) */
.fremdrift .fremtekst { margin-top: 8px; }
/* Check-cirklen står lodret centreret i forhold til hele skudkortet (også statuslinje og "Nice to have") */
.skud > .tjek { grid-row: 1 / span 3; align-self: center; margin-top: 0; }
/* Stregen mellem scener er 1 px (halv tykkelse); under scenebeskrivelsen en streg som mellem skuddene */
.slug { border-top-width: 1px; }
.synopsis { border-bottom: 1px solid var(--linje); }
/* Fastklæbet sceneoverskrift: stregen under scenebeskrivelsen følger med og står under overskrift/tid */
.slug.fast { box-shadow: 0 1px 0 var(--linje); }
.slug.fast:has(+ .regi)::after, .slug.fast:has(+ .synopsis)::after { border-bottom: 1px solid var(--linje); }
/* Streger i skudlisten er gennemsigtige, så de tager farve efter baggrunden: lysegrå på hvid, mørkere rosa på rød,
   mørkere grøn på grøn, mørkere gul på Nice to have. På hvid ser de ud som før (#dcdcd8 svarer til ca. 13 % sort). */
#liste { --linje: rgba(0, 0, 0, .10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #liste { --linje: rgba(255, 255, 255, .10); } }
:root[data-theme="dark"] #liste { --linje: rgba(255, 255, 255, .10); }
/* Nice to have på et rødt eller grønt skud: den gule tekst står i en lille gul pille, så den kan læses på farven */
.skud.taget .nicemaerke, .skud.bagud .nicemaerke { background: var(--nice); padding: 2px 8px; border-radius: 999px; }
.skud.taget .nicemaerke { opacity: 1; }
/* Nice to have: neutral tekst med en stjerne (gul i mørk tilstand) */
.nicemaerke::before { content: "★ "; color: var(--nice-stjerne); }
/* Dagknapperne har rundere hjørner */
.dagknap { border-radius: 14px; }

/* ===== Nordisk design: varm papirfarve, blød sort, hårfine streger, piller og lettere skrift ===== */
/* Dagsmærket: tynd pille med statusprik (grå: kommende, grøn: i dag efter planen eller færdig, rød: bagud/ikke nået) */
.tape { display: inline-flex; align-items: center; gap: 9px; background: var(--flade); color: var(--blaek); border: 1px solid var(--linje);
  border-radius: 999px; font-size: 22px; font-weight: 500; letter-spacing: -.2px; padding: 5px 16px 5px 12px; transform: none; }
.tape::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--dag-kommende); }
.tape[data-status="igang"]::before, .tape[data-status="faerdig"]::before { background: var(--taget); }
.tape[data-status="bagud"]::before { background: var(--nu); }
.port .tape::before { display: none; }
.port .tape { font-size: 20px; padding: 5px 16px; }
/* Lettere skrift */
.dagfakta b { font-weight: 500; }
.dagknap { font-weight: 500; }
.dagknap small { font-weight: 400; }
.fremtekst strong { font-weight: 500; }
.ikkenaaet { font-weight: 500; border-width: 1px; }
.slug { font-weight: 500; }
.slug .nr { font-weight: 600; }
.slug .scenestatus { font-weight: 500; }
.skudnr { font-weight: 600; }
.skudnr.uden { padding-left: 8px; background: var(--scene-uden, #ece9e3); }
.planknap b { font-weight: 500; }
.tilfoej { font-weight: 500; border-width: 1px; border-radius: 12px; }
/* Knapper i toppen som tynde piller */
.programknap { border: 1px solid var(--linje); background: var(--flade); font-weight: 500; }
.profil { border: 1px solid var(--linje); background: var(--flade); color: var(--blaek); }
.profil[data-kan="1"] { background: var(--flade); color: var(--blaek); }
.profil[data-kan="0"] svg { opacity: .55; }
.profil[data-rolle="admin"]::after { background: #efcf4f; border-color: var(--papir); }
/* Fremdrift og filter */
.bar { height: 4px; border: 0; background: var(--linje); border-radius: 2px; }
.filter { background: transparent; }
.filter button[aria-pressed="true"] { background: var(--flade); box-shadow: 0 0 0 1px var(--linje); }
/* Tidsrækker ligger på papiret med en hårfin streg */
.tidsraekke { background: transparent; }
.tidsraekke.omstilling { background: transparent; }
/* Gulvplan og storyboards */
.planknap { border-radius: 14px; }
.planknap img { border-radius: 8px; }
.board { border-radius: 9px; }
.board img { border-radius: 8px; }
@media (max-width: 759px) { .board { width: 84px; } .planknap img { width: 84px; height: 54px; } }
/* Mærker og menu: "Nyt" og "Fra dag" som piller, ⋯ centreret ud for dem */
.nytmaerke { background: var(--blaek); color: var(--papir); font-weight: 600; padding: 2px 8px; }
.flytmaerke { background: var(--flade); color: var(--daempet); border: 1px solid var(--linje); font-weight: 600; padding: 1px 7px; }
.hjoerne { align-items: center; }
.mere { display: grid; place-items: center; padding: 0; font-size: 0; }
.mere svg { width: 18px; height: 18px; fill: currentColor; }
/* Progress-baren: rød prik, hvor man burde være nu ifølge tidsplanen */
.bar { position: relative; overflow: visible; }
.bar i { border-radius: 2px; }
.planprik { position: absolute; top: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--nu);
  border: 2px solid var(--papir); transform: translate(-50%, -50%); transition: left .3s ease; }
.planprik[hidden] { display: none; }
/* Nu-linjen allerøverst i listen lægger sig i stedet for startlinjen. På telefonen står klokkeslættet på linjen via
   headeren (.nuetiket); ellers (iPad) under stregen i højre side, da listen klipper alt over sin top. */
#liste > .nulinje.oeverst { z-index: 12; margin-bottom: -2px; }
#liste > .nulinje.oeverst span { top: 3px; left: auto; right: 12px; }
@media (max-width: 759px) { #liste > .nulinje.oeverst span { display: none; } }
.nuetiket { position: absolute; left: 12px; bottom: -5px; z-index: 21; padding: 0 6px; border-radius: 6px; background: var(--papir);
  color: var(--roed-tekst); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: normal; pointer-events: none; }
.nuetiket[hidden] { display: none; }
/* Rækkefølge: langt tryk og træk på et skud */
#liste .skud { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.skud.traekkes { z-index: 30; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); transition: box-shadow .15s; cursor: grabbing; }
.skud.traekkes:not(.taget):not(.bagud):not(.nice):not(.droppet) { background: var(--papir); }
.skud.flytter { transition: transform .15s ease; }
body.traek, body.traek * { cursor: grabbing !important; }
/* Skudkortet: storyboardet står under ⋯ (og "Nyt"/"Fra dag") i højre kolonne, ikke til venstre for dem */
.skud { grid-template-columns: 52px minmax(0, 1fr) auto; }
@media (min-width: 760px) { .skud { grid-template-columns: 56px minmax(0, 1fr) auto; } }
@media (min-width: 760px) and (max-height: 520px) { .skud { grid-template-columns: 48px minmax(0, 1fr) auto; } }
.skud > .indhold { grid-column: 2; grid-row: 1 / span 2; }
.skud > .hjoerne { grid-column: 3; grid-row: 1; justify-self: end; }
.skud > .board { grid-column: 3; grid-row: 2; justify-self: end; margin-top: 4px; }
.skud > .board.ingen { display: none; }
.skud > .tjek { grid-row: 1 / span 4; }
.skud > .nicemaerke { grid-column: 2 / -1; }
/* Den høje beskrivelse må ikke skubbe storyboardet ned: ekstra højde går til rækken under billedet */
.skud { grid-template-rows: auto 1fr; }
/* Admin markeres ikke ved profilknappen (rollen står i profil-pop-up'en); prikken lignede en ulæst besked */
.profil[data-rolle="admin"]::after { content: none; display: none; }
/* Nu-tiden i en lille pille (tynd rød kant), centreret på stregen */
.nulinje span, .nuetiket { border: 1px solid var(--nu); border-radius: 999px; padding: 1px 7px; line-height: 14px; background: var(--papir); }
.nulinje span { top: -10px; }
.nuetiket { bottom: -10px; }
/* Fortryd og gentag */
.fortrydknapper { display: inline-flex; gap: 6px; flex: none; }
.fortrydknapper[hidden] { display: none; }
.fortrydknapper button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--linje); background: var(--flade); color: var(--blaek);
  display: grid; place-items: center; padding: 0; cursor: pointer; }
.fortrydknapper button svg { width: 15px; height: 15px; }
.fortrydknapper button:disabled { opacity: .35; cursor: default; }
.fortrydknapper button:not(:disabled):active { transform: scale(.92); }
/* Svævende pille nederst til højre (kun når der er noget at fortryde eller gentage) */
.fortrydknapper.flyd { position: fixed; right: calc(14px + var(--kant-hoejre)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 40;
  padding: 4px; gap: 2px; border: 1px solid var(--linje); background: var(--flade); border-radius: 999px; box-shadow: 0 4px 14px rgba(0,0,0,.10); }
.fortrydknapper.flyd button { border: 0; width: 34px; height: 34px; background: transparent; }
.fortrydknapper.flyd.tom { display: none; }
/* Pillen står stille. På telefonen ligger toasten til venstre ved siden af den (samme bundlinje), og toastens egen
   "Fortryd" skjules, når pillen er der, da pillen gør det samme */
.fortrydknapper.flyd { bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
body:has(.fortrydknapper.flyd:not(.tom):not([hidden])) #fortryd { display: none; }
@media (max-width: 759px) {
  body:has(.fortrydknapper.flyd:not(.tom):not([hidden])) .toast { left: 14px; max-width: calc(100% - 28px - 92px); min-height: 46px; }
  @supports (height: 100svh) {
    body:has(.fortrydknapper.flyd:not(.tom):not([hidden])) .toast { transform: translate(0, calc(-100% + 12px)); }
    body:has(.fortrydknapper.flyd:not(.tom):not([hidden])) .toast.vis { transform: translate(0, -100%); }
  }
}
/* Turnstile (bot-beskyttelse) på login: fylder kun, hvis Cloudflare beder om en handling */
.turnstilefelt { margin: 2px 0 6px; }
.turnstilefelt[hidden] { display: none; }